/*
Theme Name: WP Definitivo
Theme URI: https://wpdefinitivo.com/tema-wp-definitivo/
Author: WP Definitivo
Author URI: https://wpdefinitivo.com/
Description: Accessibility-focused WordPress block theme for modern sites and WooCommerce stores, built with native blocks, patterns and the Site Editor.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wp-definitivo
Domain Path: /languages
Tags: blog, e-commerce, grid-layout, one-column, two-columns, right-sidebar, wide-blocks, accessibility-ready, block-patterns, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, full-width-template, sticky-post, threaded-comments, translation-ready
*/

/*
 * Global tokens and block defaults belong in theme.json. This stylesheet
 * covers accessibility states and native elements that theme.json cannot
 * consistently express across the minimum supported WordPress version.
 */

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

:where(body) {
	overflow-wrap: break-word;
}

:where(a) {
	text-decoration-thickness: 0.1em;
	text-underline-offset: 0.16em;
}

:where(a):hover {
	text-decoration-thickness: 0.16em;
}

:where(.wp-block-post-title a, .wp-block-post-author-name a, .wp-block-post-date a, .wp-block-post-terms a, .wp-block-comment-author-name a, .wp-block-comment-date a) {
	text-decoration: underline;
}

:where(h1, h2, h3, h4, h5, h6) {
	overflow-wrap: anywhere;
}

:where(img, svg, video, audio, canvas, iframe) {
	max-width: 100%;
}

:where(audio) {
	width: 100%;
}

/* The audio block's own style sets a 300px minimum width with the same
   specificity, and on pages where it loads after this file it won: at 320px
   the player overflowed the content column and the page scrolled sideways. */
.wp-site-blocks .wp-block-audio audio {
	min-width: 0;
}

.wp-block-post-content .wp-caption {
	max-width: 100%;
}

.wp-block-post-content .wp-caption img {
	height: auto;
}

/* A linked legacy caption image needs its link box to match the image. */
.wp-block-post-content .wp-caption > a {
	display: inline-block;
	max-width: 100%;
}

.wp-block-post-content .wp-caption > a > img {
	display: block;
}

/* Legacy standalone linked images otherwise give their inline link a one-line box. */
.wp-block-post-content p:has(> a > img) > a {
	display: inline-block;
	max-width: 100%;
}

.wp-block-post-content p:has(> a > img) > a > img {
	display: block;
	height: auto;
}

/*
 * Classic posts can place an alignment class on an image nested inside a
 * paragraph. The block layout only applies its alignment rules to direct
 * children, so preserve the expected legacy left, right, and centre flows.
 */
.wp-block-post-content p > img.alignleft,
.wp-block-post-content p > a:has(> img.alignleft) {
	float: left;
	margin: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50) var(--wp--preset--spacing--30) 0;
}

.wp-block-post-content p > img.alignright,
.wp-block-post-content p > a:has(> img.alignright) {
	float: right;
	margin: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
}

.wp-block-post-content p > img.aligncenter,
.wp-block-post-content p > a:has(> img.aligncenter) {
	clear: both;
	display: block;
	margin: var(--wp--preset--spacing--20) auto var(--wp--preset--spacing--30);
}

.wp-block-post-content p > a:has(> img.aligncenter) {
	width: fit-content;
}

/* Legacy gallery links must enclose their image so keyboard focus outlines it. */
.wp-block-post-content .gallery-icon > a {
	display: inline-block;
	max-width: 100%;
}

.wp-block-post-content .gallery-icon > a > img {
	display: block;
	height: auto;
}

.wp-block-post-content > .mejs-container {
	max-width: 100%;
	min-width: 0 !important;
	width: 100% !important;
}

/* The media player's 20px buttons sit in a 40px dark bar. The global 44px
   button height made them spill below it, and the accent ring disappeared on
   the dark bar, so the controls keep their size and take a white ring. */
.mejs-container .mejs-button > button {
	min-height: 0;
}

.mejs-container :is(.mejs-button > button, [role="slider"]):focus-visible {
	box-shadow: none;
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 2px;
}

/* The volume slider is almost as tall as the bar, so its ring goes inside. */
.mejs-container .mejs-controls .mejs-horizontal-volume-slider:focus-visible {
	outline-offset: -2px;
}

:where(pre) {
	max-width: 100%;
	overflow-wrap: anywhere;
	white-space: pre-wrap;
}

/* Tables fit their container and wrap their text instead of scrolling, since a
   scrolling box cannot be reached with a keyboard and a block-level table loses
   its table semantics in some screen readers. */
.wp-block-table {
	overflow-x: visible;
}

:where(.wp-block-table table) {
	border-collapse: collapse;
	width: 100%;
}

:where(.wp-block-table th, .wp-block-table td) {
	border: 1px solid var(--wp--preset--color--border);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	text-align: start;
	vertical-align: top;
}

:where(.wp-block-table th) {
	background: var(--wp--preset--color--soft);
	font-weight: 700;
}

/* The Theme Unit Test also contains legacy tables without a block wrapper,
   in post content and in comments. */
:where(.wp-block-post-content, .wp-block-comment-content) :where(table) {
	border-collapse: collapse;
	margin-block: var(--wp--preset--spacing--30);
	max-width: 100%;
}

/* Cells break a word only when it cannot fit. Breaking anywhere, which the
   Columns block also passes down as word-break, let short columns shrink to a
   letter and split "$100M" or "Employee" even on wide screens. */
:where(.wp-block-table td, .wp-block-table th, .wp-block-post-content table td, .wp-block-post-content table th, .wp-block-comment-content table td, .wp-block-comment-content table th) {
	hyphens: auto;
	overflow-wrap: break-word;
	word-break: normal;
}

:where(.wp-block-post-content table th, .wp-block-post-content table td, .wp-block-comment-content table th, .wp-block-comment-content table td) {
	border: 1px solid var(--wp--preset--color--border);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	text-align: start;
	vertical-align: top;
}

:where(.wp-block-post-content table th, .wp-block-comment-content table th) {
	background: var(--wp--preset--color--soft);
	font-weight: 700;
}

/* Tighter cells on narrow screens let wide tables fit without scrolling. */
@media (max-width: 40rem) {
	:where(.wp-block-table th, .wp-block-table td, .wp-block-post-content table th, .wp-block-post-content table td, .wp-block-comment-content table th, .wp-block-comment-content table td) {
		padding: var(--wp--preset--spacing--10) 0.375rem;
	}
}

:where(label, legend) {
	font-weight: 700;
}

:where(fieldset) {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0.25rem;
	padding: var(--wp--preset--spacing--30);
}

:where(
	input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
	select,
	textarea
) {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0.25rem;
	color: var(--wp--preset--color--foreground);
	font: inherit;
	line-height: 1.5;
	max-width: 100%;
	min-height: 2.75rem;
	padding: 0.625rem 0.75rem;
}

:where(input[type="text"], input[type="email"], input[type="url"], input[type="search"], input[type="password"], input[type="tel"], textarea) {
	width: 100%;
}

/* Browsers paint the native select arrow hard against the border box and
   ignore padding, so a dropdown carries its own chevron with room around it.
   Multi-select lists have no arrow and keep the native rendering. */
select:not([multiple]) {
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
	background-position: right 0.875rem center;
	background-repeat: no-repeat;
	background-size: 0.875rem;
	padding-inline-end: 2.5rem;
}

/* The native control mirrored itself in right-to-left languages; a background
   image does not, so the chevron is placed explicitly. */
[dir="rtl"] select:not([multiple]) {
	background-position: left 0.875rem center;
}

/* Forced-colours modes drop background images, so the native widget returns
   rather than leaving the control with no arrow at all. */
@media (forced-colors: active) {
	select:not([multiple]) {
		-webkit-appearance: auto;
		appearance: auto;
		background-image: none;
		padding-inline-end: 0.75rem;
	}
}

.post-password-form label {
	display: block;
	margin-block-end: var(--wp--preset--spacing--20);
}

:where(textarea) {
	min-height: 8rem;
	resize: vertical;
}

:where(input[type="checkbox"], input[type="radio"]) {
	accent-color: var(--wp--preset--color--accent);
	min-height: 1.25rem;
	min-width: 1.25rem;
}

::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

::selection {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
}

:where(button, input[type="button"], input[type="reset"], input[type="submit"], .wp-element-button, .wp-block-button__link, .wc-block-components-button) {
	min-height: 2.75rem;
}

.woocommerce-account form.woocommerce-form .password-input input,
.woocommerce-page.woocommerce-account form.woocommerce-form .password-input input {
	padding-inline-end: 4rem;
}

.woocommerce form .show-password-input,
.woocommerce-page form .show-password-input {
	display: grid;
	min-inline-size: 2.75rem;
	place-items: center;
}

:where(button, input[type="button"], input[type="reset"], input[type="submit"]):enabled {
	cursor: pointer;
}

:where(button, input[type="button"], input[type="reset"], input[type="submit"]):disabled,
:where(.wp-element-button, .wp-block-button__link)[aria-disabled="true"],
.woocommerce .single_add_to_cart_button.disabled {
	background-color: var(--wp--preset--color--soft) !important;
	border-color: var(--wp--preset--color--border) !important;
	color: var(--wp--preset--color--muted) !important;
	cursor: not-allowed;
	opacity: 1 !important;
}

:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
	box-shadow: 0 0 0 6px var(--wp--preset--color--accent);
	outline: 3px solid var(--wp--preset--color--white);
	outline-offset: 2px;
}

/* Native audio and video players move focus through controls of their own,
   which only the browser marks, with a thin outline. The theme's ring stays
   around the player while focus is anywhere inside it. */
:where(audio, video):is(:focus-visible, :focus-within) {
	box-shadow: 0 0 0 6px var(--wp--preset--color--accent);
	outline: 3px solid var(--wp--preset--color--white);
	outline-offset: 2px;
}

/* Core's comment form removes the shadow of its submit button at the same
   specificity as the ring above. With WooCommerce active its stylesheet loads
   after the theme's, which left only the white outline on a white page. */
.wp-block-post-comments-form :where(input[type="submit"]):focus-visible {
	box-shadow: 0 0 0 6px var(--wp--preset--color--accent);
}

/* Core's social icons also remove that shadow, at a higher specificity, so a
   focused icon kept only the white outline. The ring follows the round icon. */
.wp-block-social-links .wp-social-link a:focus-visible {
	border-radius: inherit;
	box-shadow: 0 0 0 6px var(--wp--preset--color--accent);
}

/* Core's File block removes the shadow of its focused button with the same
   specificity as the ring above, and its styles are often printed after the
   theme's. It also turns the button text white on focus, which hid the label
   of a File block saved before WordPress 6.1: that button has no background. */
.wp-block-file .wp-block-file__button:focus-visible {
	box-shadow: 0 0 0 6px var(--wp--preset--color--accent);
}

.wp-block-file a.wp-block-file__button:not(.wp-element-button):focus {
	color: var(--wp--preset--color--accent);
}

/* Text links have no padding, so the ring above sat on the letters and the
   underline. Here a gap separates the text from the ring; the white beyond it
   keeps the ring visible on dark sections. */
:where(a:not([class]), .comment-reply-link, .woocommerce-review-link, .wp-block-latest-comments__comment-author, .wp-block-latest-comments__comment-link, .wp-block-post-author-name__link, .wc-block-components-product-name):focus-visible {
	border-radius: 2px;
	box-shadow: 0 0 0 7px var(--wp--preset--color--white);
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.wpdef-site-footer :where(a:not([class])):focus-visible {
	box-shadow: 0 0 0 7px var(--wp--preset--color--foreground);
	outline-color: var(--wp--preset--color--white);
}

.wc-block-grid__products .wc-block-grid__product-image a:focus-visible {
	box-shadow: 0 0 0 6px var(--wp--preset--color--accent);
	outline: 3px solid var(--wp--preset--color--white);
	outline-offset: 2px;
}

/* The card clips its overflow for the rounded corners, which cut the ring
   around the flush image down to a line at its foot. The two colours are
   drawn inside the image instead: white along the edge, then the accent. */
.wpdef-product-card :is(.wp-block-woocommerce-product-image, .wc-block-grid__product-image) a:focus-visible {
	box-shadow: none;
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: -6px;
}

.wpdef-product-card :is(.wp-block-woocommerce-product-image, .wc-block-grid__product-image) a:focus-visible::after {
	border: 3px solid var(--wp--preset--color--white);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.wp-site-blocks .wp-block-gallery.has-nested-images figure.wp-block-image figcaption,
.wp-site-blocks .wp-block-gallery:not(.has-nested-images) .blocks-gallery-item .blocks-gallery-item__caption {
	background: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--white);
}

/* Core lays gallery captions over the image and lets a long one scroll inside
   a box a keyboard cannot reach. Showing the caption in full beneath its image
   keeps all of the text readable and removes the scrollable region. */
.wp-site-blocks .wp-block-gallery.has-nested-images figure.wp-block-image figcaption,
.wp-site-blocks .wp-block-gallery:not(.has-nested-images) .blocks-gallery-item figcaption,
.wp-site-blocks .wp-block-gallery:not(.has-nested-images) .blocks-gallery-image figcaption {
	max-height: none;
	overflow: visible;
	position: static;
	text-shadow: none;
	width: auto;
}

.wp-site-blocks .wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before {
	display: none;
}

/* In the legacy gallery each figure is a flex row, so the caption beneath its
   image became a column beside it and squeezed the image, down to nothing. */
.wp-site-blocks .wp-block-gallery:not(.has-nested-images) :is(.blocks-gallery-item, .blocks-gallery-image) figure:has(figcaption) {
	align-items: stretch;
	flex-direction: column;
}

/* Tag clouds size each link from the tag's weight, and the smallest ones fall
   below the 24px target a pointer needs. */
:where(.wp-block-tag-cloud, .tagcloud) a {
	box-sizing: border-box;
	display: inline-block;
	min-block-size: 1.5rem;
	min-inline-size: 1.5rem;
	padding-inline: 0.25rem;
	text-align: center;
}

/* Empty stars are drawn as outlines in the Border colour, at least 3:1 on the
   light backgrounds, because they are what shows a rating is out of five. The
   font draws every star solid, so the outline comes from a text stroke and the
   filled stars stay solid: the two differ by shape, not by colour alone. The
   filled stars carry a stroke of their own colour to cover the outline under
   them. These are
   deliberately not scoped to the product card: a rating renders on the
   single product and in reviews too, and scoping the pair to one layout left
   those showing filled and empty stars in the same colour. */
.wp-site-blocks .wc-block-components-product-rating__stars::before,
.wp-site-blocks .wc-block-grid__product-rating__stars::before,
.wp-site-blocks .wc-block-product-review-rating__stars::before,
.wp-site-blocks .star-rating::before,
.wp-site-blocks .woocommerce .star-rating::before {
	-webkit-text-stroke: 1px var(--wp--preset--color--border);
	color: transparent;
	opacity: 1;
}

.wp-site-blocks .wc-block-components-product-rating__stars span::before,
.wp-site-blocks .wc-block-grid__product-rating__stars span::before,
.wp-site-blocks .wc-block-product-review-rating__stars span::before,
.wp-site-blocks .star-rating span::before,
.wp-site-blocks .woocommerce .star-rating span::before {
	-webkit-text-stroke: 1px var(--wp--preset--color--rating);
	color: var(--wp--preset--color--rating);
}

/* Forced colours would paint both kinds of star in the same system colour,
   so the outline and the fill are set with system colours instead. */
@media (forced-colors: active) {
	.wp-site-blocks .wc-block-components-product-rating__stars::before,
	.wp-site-blocks .wc-block-grid__product-rating__stars::before,
	.wp-site-blocks .wc-block-product-review-rating__stars::before,
	.wp-site-blocks .star-rating::before,
	.wp-site-blocks .woocommerce .star-rating::before {
		-webkit-text-stroke-color: CanvasText;
		color: Canvas;
		forced-color-adjust: none;
	}

	.wp-site-blocks .wc-block-components-product-rating__stars span::before,
	.wp-site-blocks .wc-block-grid__product-rating__stars span::before,
	.wp-site-blocks .wc-block-product-review-rating__stars span::before,
	.wp-site-blocks .star-rating span::before,
	.wp-site-blocks .woocommerce .star-rating span::before {
		-webkit-text-stroke-color: CanvasText;
		color: CanvasText;
		forced-color-adjust: none;
	}
}

/* The stars are letters drawn by WooCommerce's star font. Firefox passed the
   letters to screen readers, and NVDA read "S S S S S" after the rating, so
   the same letters are drawn with empty alternative text. The rating keeps
   its name from the aria-label of the element that holds the stars. */
.wp-site-blocks .woocommerce .star-rating::before {
	content: "sssss" / "";
}

.wp-site-blocks .woocommerce .star-rating span::before,
.wp-site-blocks .wc-block-components-product-rating__stars::before,
.wp-site-blocks .wc-block-components-product-rating__stars span::before {
	content: "SSSSS" / "";
}

:where(.wp-block-navigation-item__content) {
	padding-block: 0.625rem;
}

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

/* The Site Editor separates the template regions with the block gap, so its canvas matches the site. */
.editor-styles-wrapper .is-root-container > :where(header, main, footer) {
	margin-block-start: 0;
}

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

.wpdef-site-header__inner,
.wpdef-site-footer__inner {
	column-gap: var(--wp--preset--spacing--50);
	row-gap: var(--wp--preset--spacing--30);
}

.wpdef-site-header__inner {
	flex-wrap: wrap;
}

/* The footer opens with a hidden heading, so the first visible row keeps the top spacing it had as the first child. */
.wpdef-site-footer > .screen-reader-text + * {
	margin-block-start: 0;
}

.wpdef-site-branding,
.wpdef-site-branding__text,
.wpdef-site-footer__identity {
	min-width: 0;
}

.wpdef-site-branding {
	flex: 0 1 18rem;
}

.wpdef-site-branding .wp-block-site-logo {
	flex: 0 0 auto;
}

.wpdef-site-branding .wp-block-site-title,
.wpdef-site-branding .wp-block-site-tagline,
.wpdef-site-footer .wp-block-site-title,
.wpdef-site-footer .wp-block-site-tagline {
	margin-block: 0;
}

/* The footer title and menu links are inline flex boxes, where breaking a
   word only when it overflows does not let them shrink. A title or link
   without spaces, such as a domain, then widened the footer, and the page
   scrolled sideways with enlarged text and wider text spacing. */
.wpdef-site-footer .wp-block-site-title,
.wpdef-footer-navigation .wp-block-navigation-item__content {
	overflow-wrap: anywhere;
}

.wpdef-site-branding .wp-block-site-logo img {
	display: block;
}

/* theme.json sets "medium" for every core/navigation, and WordPress prints it
   as :root :where(.wp-block-navigation) in the global styles, with the
   specificity of a single class and after this stylesheet. The header therefore
   needs the :is() below: it raises the rule to 0-2-0, so the size no longer
   depends on the loading order. */
/* A small flex basis lets the menu share the row with the search and store
   icons on notebook screens, wrapping its own items instead of pushing the
   icons onto a line of their own. The basis leaves out the search button and
   its gap: with text enlarged to 200%, the rem doubles, and a basis of 20rem
   kept the title and menu on the row but sent the search, or the cart alone,
   to the next one. */
:is(.wp-site-blocks, .editor-styles-wrapper) .wpdef-primary-navigation {
	flex: 1 1 calc(20rem - 2.75rem - var(--wp--preset--spacing--50));
	font-size: var(--wp--preset--font-size--small);
	margin-inline-start: auto;
	min-width: 0;
}

.wpdef-site-header__inner > .wpdef-header-search {
	flex: 0 0 2.75rem;
	min-width: 2.75rem;
}

.wpdef-header-search {
	position: static;
}

/* Reserve a separate row while keeping the trigger and navigation stationary. */
.wpdef-site-header:has(.wpdef-header-search:is([open], .wpdef-header-search--closing)) {
	padding-bottom: calc(var(--wp--preset--spacing--30) + var(--wpdef-search-panel-height, 5.25rem)) !important;
}

/* compact-navigation.js keeps a just-closed panel on screen until focus is
   back on the trigger. */
.wpdef-header-search.wpdef-header-search--closing::details-content {
	content-visibility: visible;
}

.wpdef-header-search > summary {
	align-items: center;
	color: var(--wp--preset--color--muted);
	border-radius: 0.25rem;
	cursor: pointer;
	display: flex;
	height: 2.75rem;
	justify-content: center;
	list-style: none;
	min-width: 2.75rem;
}

.wpdef-header-search > summary::-webkit-details-marker {
	display: none;
}

.wpdef-header-search > summary::marker {
	content: '';
}

.wpdef-header-search > summary:hover,
.wpdef-header-search[open] > summary {
	background-color: var(--wp--preset--color--soft);
}

.wpdef-header-search > summary svg {
	height: 1.25rem;
	width: 1.25rem;
}

.wpdef-header-search__panel {
	align-items: center;
	background: var(--wp--preset--color--white);
	border-top: 1px solid var(--wp--preset--color--border-subtle);
	bottom: 0;
	box-sizing: border-box;
	display: flex;
	gap: 0.75rem;
	justify-content: center;
	left: 0;
	padding: 0.75rem max(1rem, calc((100% - 56rem) / 2));
	position: absolute;
	width: 100%;
}

.wpdef-header-search__form {
	align-items: center;
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0.375rem;
	box-shadow: none;
	display: flex;
	flex: 1 1 auto;
	min-height: 3.625rem;
	min-width: 0;
	padding: 0 0.5rem;
}

.wpdef-header-search__field {
	align-items: center;
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
}

.wpdef-header-search__field svg {
	color: var(--wp--preset--color--muted);
	flex: 0 0 auto;
	height: 1.25rem;
	margin-inline: 0.5rem;
	width: 1.25rem;
}

.wpdef-header-search__form input {
	background: transparent;
	border: 0;
	box-shadow: none;
	flex: 1 1 auto;
	font-family: inherit;
	font-size: 1.125rem;
	line-height: 1.5;
	margin: 0;
	min-width: 0;
	padding: 0.75rem 0.25rem;
}

/* Hide the clear icon Chromium browsers draw in search fields. It works only
   with a pointer and is redundant: Escape and the keyboard clear the field. */
input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
	display: none;
}

.wpdef-header-search__form input:focus {
	box-shadow: none;
	outline: 0;
}

/* One focus indicator around the whole field, with no nested input border. */
.wpdef-header-search__form:has(input:focus-visible) {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.wpdef-header-search__form button {
	background-color: var(--wp--preset--color--accent);
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 0.25rem;
	color: var(--wp--preset--color--white);
	flex: 0 0 auto;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	min-height: 2.75rem;
	padding-inline: 1rem;
}

.wpdef-header-search__form button:hover,
.wpdef-header-search__form button:focus-visible {
	background-color: var(--wp--preset--color--secondary);
	border-color: var(--wp--preset--color--secondary);
}

.wpdef-header-search__close:hover,
.wpdef-header-search__close:focus-visible {
	background-color: var(--wp--preset--color--soft);
}

.wpdef-header-search__close {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 0.25rem;
	color: var(--wp--preset--color--muted);
	display: flex;
	flex: 0 0 auto;
	height: 2.75rem;
	justify-content: center;
	padding: 0;
	width: 2.75rem;
}

.wpdef-header-search__close svg {
	height: 1.25rem;
	width: 1.25rem;
}

/* Sized by their content: the icon alone fills the minimum, while the
   account label or the cart total widen the box instead of spilling over
   the neighbouring controls. */
.wpdef-site-header__inner > .wp-block-woocommerce-customer-account,
.wpdef-site-header__inner > .wp-block-woocommerce-mini-cart {
	flex: 0 0 auto;
	min-width: 2.75rem;
}

.wpdef-site-header__inner > .wp-block-woocommerce-customer-account {
	margin-inline-start: auto;
}

/* An icon that follows another one closes the gap, whatever order the icons
   arrive in: WooCommerce inserts the account and cart right after the menu,
   and compact-navigation.js moves the search before them only after the first
   paint, so the spacing must not change with the order. */
.wpdef-site-header__inner > :is(.wpdef-header-search, .wp-block-woocommerce-customer-account, .wp-block-woocommerce-mini-cart) + :is(.wpdef-header-search, .wp-block-woocommerce-customer-account, .wp-block-woocommerce-mini-cart) {
	margin-inline-start: calc(var(--wp--preset--spacing--10) - var(--wp--preset--spacing--50));
}

.wpdef-site-header__inner > .wp-block-woocommerce-customer-account :is(.wc-block-customer-account__link, .wc-block-customer-account__toggle),
.wpdef-site-header__inner > .wp-block-woocommerce-mini-cart .wc-block-mini-cart__button {
	align-items: center;
	display: flex;
	justify-content: center;
	min-height: 2.75rem;
	min-width: 2.75rem;
}

/* The account control takes the header's text colour, like the search and
   cart buttons, instead of the content link colour and underline. */
.wpdef-site-header__inner > .wp-block-woocommerce-customer-account :is(.wc-block-customer-account__link, .wc-block-customer-account__toggle) {
	color: inherit;
	text-decoration: none;
}

/* With its label shown, the account control reads as a menu item. */
.wpdef-site-header__inner > .wp-block-woocommerce-customer-account :is(.wc-block-customer-account__link, .wc-block-customer-account__toggle):has(> .label) {
	border-radius: 0.25rem;
	column-gap: 0.375rem;
	padding-inline: 0.625rem;
}

.wpdef-site-header__inner > .wp-block-woocommerce-customer-account :is(.wc-block-customer-account__link, .wc-block-customer-account__toggle):has(> .label):hover {
	background-color: var(--wp--preset--color--soft);
}

.wpdef-primary-navigation .wp-block-navigation__container,
.wpdef-footer-navigation .wp-block-navigation__container {
	row-gap: var(--wp--preset--spacing--10);
}

.wpdef-primary-navigation .wp-block-navigation__responsive-container:not(.is-menu-open),
.wpdef-primary-navigation .wp-block-navigation__responsive-container-content,
.wpdef-primary-navigation .wp-block-navigation__container,
.wpdef-primary-navigation .wp-block-page-list {
	min-width: 0;
	width: 100%;
}

.wpdef-primary-navigation .wp-block-navigation__container,
.wpdef-primary-navigation .wp-block-page-list {
	column-gap: var(--wp--preset--spacing--10);
	flex-wrap: wrap;
	justify-content: flex-end;
}

.wpdef-primary-navigation .wp-block-navigation__submenu-container,
.wpdef-footer-navigation .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--border);
	border-radius: 0.25rem;
	color: var(--wp--preset--color--foreground);
	min-width: 14rem;
	padding: var(--wp--preset--spacing--10);
}

.wpdef-primary-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.wpdef-footer-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	width: 100%;
}

/* Nested desktop submenus open toward the available left side of this right-aligned menu.
   The extra classes outrank the core rules for right-aligned menus. */
@media (min-width: 1024px) {
	:is(.wp-site-blocks, .editor-styles-wrapper) .wpdef-primary-navigation.wp-block-navigation .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
		left: auto;
		right: calc(100% + 1rem);
		top: -1px;
	}

	:is(.wp-site-blocks, .editor-styles-wrapper) .wpdef-primary-navigation.wp-block-navigation .wp-block-navigation__submenu-container > :is(.wp-block-navigation-submenu, .wp-block-pages-list__item.has-child) > .wp-block-navigation__submenu-icon > svg {
		/* Core rotates an open submenu arrow upward; nested panels still open left. */
		transform: rotate(90deg);
	}
}

:where(.wp-block-navigation-submenu__toggle) {
	min-height: 2.75rem;
	min-width: 2.75rem;
}

/* The current page and the submenu item that holds it are marked in bold only.
   Core removes the underline from menu links but not from submenu buttons, so an
   underline here showed on parent buttons alone. The class selectors keep the
   bold weight on those buttons, which core sets to inherit. */
.wp-block-navigation :is(.current-menu-item, .current-menu-ancestor) > .wp-block-navigation-item__content {
	font-weight: 700;
}

:where(.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close) {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	min-height: 2.75rem;
	min-width: 2.75rem;
}

/* At high zoom the open menu scrolls; the margin keeps the whole focus ring of the focused item in view. */
:where(.wp-block-navigation__responsive-container.is-menu-open) {
	padding: var(--wp--preset--spacing--40);
	scroll-padding-block: 1rem;
}

.wpdef-site-footer__inner {
	align-items: flex-start;
}

.wpdef-footer-navigation {
	max-width: 100%;
}

:where(.wp-block-query-pagination a, .wp-block-comments-pagination a, .post-navigation-link-previous a, .post-navigation-link-next a) {
	display: inline-block;
	padding-block: 0.5rem;
}

.wpdef-post-pages {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin-block: var(--wp--preset--spacing--40);
}

.wpdef-post-pages__label {
	font-weight: 700;
}

.wpdef-post-pages .post-page-numbers {
	align-items: center;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0.25rem;
	display: inline-flex;
	justify-content: center;
	max-width: 100%;
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem;
	text-decoration: none;
}

.wpdef-post-pages .post-page-numbers.current {
	background-color: var(--wp--preset--color--soft);
	font-weight: 700;
}

.wpdef-post-pages a.post-page-numbers:hover {
	background-color: var(--wp--preset--color--soft);
	text-decoration: underline;
}

:where(.post-navigation-link-previous, .post-navigation-link-next) {
	align-items: baseline;
	display: flex;
	flex: 1 1 16rem;
	gap: 0.5rem;
	max-width: 100%;
	min-width: 0;
}

:where(.post-navigation-link-previous a, .post-navigation-link-next a, .post-navigation-link__title) {
	max-width: 100%;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* functions.php moves the arrows inside the links, so the gap is a margin. */
.wp-block-post-navigation-link a .wp-block-post-navigation-link__arrow-previous {
	margin-inline: 0 0.5rem;
}

.wp-block-post-navigation-link a .wp-block-post-navigation-link__arrow-next {
	margin-inline: 0.5rem 0;
}

:where(summary) {
	cursor: pointer;
	font-weight: 700;
}

:where([id]) {
	scroll-margin-top: var(--wp--preset--spacing--50);
}

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

.screen-reader-text:focus {
	background-color: var(--wp--preset--color--white);
	clip-path: none;
	color: var(--wp--preset--color--foreground);
	display: block;
	font-size: 1rem;
	font-weight: 700;
	height: auto;
	inset: 0 auto auto 0;
	line-height: normal;
	margin: 0.5rem;
	padding: 0.75rem 1rem;
	text-decoration: underline;
	width: auto;
	z-index: 100000;
}

/*
 * Visual system for theme-provided templates and patterns.
 */

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

.wpdef-site-header {
	box-shadow: none;
}

.wpdef-site-header__inner {
	min-height: 4rem;
}

.wpdef-site-branding {
	align-items: center;
}

.wpdef-site-branding .wp-block-site-title {
	font-size: clamp(1.25rem, 1.6vw, 1.625rem);
	letter-spacing: -0.025em;
}

/* On wide screens the site identity stays compact beside the menu and icons, and
   the footer title no longer takes the large preset meant for page headings. */
@media (min-width: 1024px) {
	.wpdef-site-branding .wp-block-site-title {
		font-size: clamp(1.125rem, 1.3vw, 1.375rem);
	}

	.wpdef-site-branding .wp-block-site-tagline {
		line-height: 1.5;
	}

	.wpdef-site-footer .wp-block-site-title {
		font-size: clamp(1.375rem, 1.5vw, 1.625rem);
	}

	.wpdef-site-footer__identity {
		max-width: 30rem;
	}
}

.wpdef-site-branding .wp-block-site-title a,
.wpdef-site-footer .wp-block-site-title a,
.wpdef-primary-navigation .wp-block-navigation-item__content,
.wpdef-footer-navigation .wp-block-navigation-item__content {
	align-items: center;
	display: inline-flex;
	min-height: 2.75rem;
	min-width: 2.75rem;
}

.wpdef-primary-navigation .wp-block-navigation-item__content {
	border-radius: 0.25rem;
	padding-inline: 0.625rem;
}

/* A submenu parent needs MORE trailing padding than a plain link, not the
   same. Core pulls the chevron back over that padding with a negative margin
   equal to its own width, so it always lands flush with the toggle's trailing
   edge. Matching a plain link's padding therefore leaves the chevron touching
   both the label and the edge, and re-tuning the shared padding-inline can
   only ever move the label, never open a gap after the chevron.
   The trailing padding hosts a gap, the chevron, and a second gap.
   Saved menus and the automatic Page List mark their parents with different
   classes; core's open-on-click rule removes the leading padding from both,
   so each needs its own selector here. In the editor the Page List sits in a
   list of its own, which :where() skips without changing the specificity;
   without the padding there, the chevron moved over the label. */
.wpdef-primary-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-submenu__toggle,
.wpdef-primary-navigation .wp-block-navigation__container > .wp-block-pages-list__item > .wp-block-navigation-submenu__toggle,
.wpdef-primary-navigation .wp-block-navigation__container > :where(.wp-block-page-list) > .wp-block-pages-list__item > .wp-block-navigation-submenu__toggle {
	padding-inline: 0.625rem 1.625rem;
}

/* In the editor a saved submenu's button lacks the toggle class, and core's
   editor rule for such a button removes all its padding, so the chevron sat
   on the label there too. The site's button has the class, so this rule only
   reaches the editor, where it restores the site's padding. */
.wpdef-primary-navigation .wp-block-navigation__container > .wp-block-navigation-submenu.open-on-click > button.wp-block-navigation-item__content:not(.wp-block-navigation-submenu__toggle) {
	padding-block: 0.625rem;
	padding-inline: 0.625rem 1.625rem;
}

/* Footer links carry no padding of their own, so a footer submenu parent
   starts flush like them and its trailing padding holds a gap and the
   chevron only; the spacing between items stays the same. */
.wpdef-footer-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-submenu__toggle,
.wpdef-footer-navigation .wp-block-navigation__container > .wp-block-pages-list__item > .wp-block-navigation-submenu__toggle,
.wpdef-footer-navigation .wp-block-navigation__container > :where(.wp-block-page-list) > .wp-block-pages-list__item > .wp-block-navigation-submenu__toggle {
	padding-inline: 0 1rem;
}

.wpdef-footer-navigation .wp-block-navigation__container > .wp-block-navigation-submenu.open-on-click > button.wp-block-navigation-item__content:not(.wp-block-navigation-submenu__toggle) {
	padding-block: 0.625rem;
	padding-inline: 0 1rem;
}

/* Core pulls the chevron over that padding only after a button with the
   toggle class, so the editor's button needs the same pull. */
:is(.wpdef-primary-navigation, .wpdef-footer-navigation) .wp-block-navigation__container > .wp-block-navigation-submenu.open-on-click > button.wp-block-navigation-item__content:not(.wp-block-navigation-submenu__toggle) + .wp-block-navigation__submenu-icon {
	margin-inline-start: -0.6em;
}

.wpdef-primary-navigation .wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--soft);
}

.wpdef-site-header .wpdef-site-branding .wp-block-site-title a:hover,
.wpdef-primary-navigation .wp-block-navigation-item__content:hover {
	text-decoration: none;
}

/* Offset the chevron out of the toggle's trailing edge so the space after it
   matches a plain item's padding. inset-inline-start is released first,
   because core pins the icon with a logical start offset. As above, saved
   menus and the automatic Page List each need their own selector. */
.wpdef-primary-navigation .wp-block-navigation-submenu > .wp-block-navigation__submenu-icon,
.wpdef-primary-navigation .wp-block-pages-list__item > .wp-block-navigation__submenu-icon {
	inset-inline-end: 0.625rem;
	inset-inline-start: auto;
	position: relative;
	z-index: 1;
}

/* In the footer the chevron stays flush with the toggle's end, where the
   next item's gap begins, as a plain link's text does. */
.wpdef-footer-navigation .wp-block-navigation-submenu > .wp-block-navigation__submenu-icon,
.wpdef-footer-navigation .wp-block-pages-list__item > .wp-block-navigation__submenu-icon {
	inset-inline: auto;
	position: relative;
	z-index: 1;
}

.wpdef-site-footer {
	margin-block-start: 0;
}

.wpdef-site-footer :where(.wp-block-site-title, .wp-block-site-title a, .wp-block-site-tagline) {
	color: var(--wp--preset--color--white);
}

/* The global styles print the site-title link colour as :root :where(...),
   0-1-0 and after this stylesheet, which turned the footer title dark on the
   dark footer. These selectors outrank it in every link state. */
.wpdef-site-footer .wp-block-site-title a,
.wpdef-site-footer .wp-block-site-title a:visited,
.wpdef-site-footer .wp-block-site-title a:hover {
	color: var(--wp--preset--color--white);
}

.wpdef-site-footer :where(a, .wp-block-navigation-item__content) {
	color: var(--wp--preset--color--white);
	text-decoration-color: currentColor;
}

.wpdef-site-footer :where(a, .wp-block-navigation-item__content):visited {
	color: var(--wp--preset--color--white);
}

.wpdef-site-footer :where(a, .wp-block-navigation-item__content):hover {
	color: var(--wp--preset--color--white);
	text-decoration: underline;
	text-decoration-thickness: 0.16em;
}

.wpdef-site-footer :is(.wp-block-site-title a, .wpdef-footer-navigation .wp-block-navigation-item__content):hover {
	text-decoration: none;
}

.wpdef-footer-navigation .wp-block-navigation-item__content {
	border-radius: 0.25rem;
	transition: background-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

.wpdef-site-footer .wpdef-footer-navigation > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:is(:hover, :focus-visible) {
	background-color: color-mix(in srgb, var(--wp--preset--color--white) 12%, transparent);
	text-decoration: none;
}

.wpdef-site-footer .wpdef-footer-navigation > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
	box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--wp--preset--color--white) 12%, transparent);
}

.wpdef-site-footer .wpdef-footer-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:is(:hover, :focus-visible) {
	background-color: var(--wp--preset--color--soft);
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.wpdef-site-footer .wpdef-footer-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.wpdef-site-footer .wpdef-footer-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:visited {
	color: var(--wp--preset--color--foreground);
}

/* Core sets the panel to color: inherit (0-3-0), so it took the white footer
   text and hid the currentColor arrows of nested items on the white panel. */
.wpdef-site-footer .wpdef-footer-navigation .has-child .wp-block-navigation__submenu-container {
	color: var(--wp--preset--color--foreground);
}

/* The toggle (z-index 1) paints over the arrow that follows it, so the hover
   and focus background of nested items hid the arrow. Clicks still reach the
   toggle through the arrow, and the arrow drops core's inherited white
   background, which showed as a square on that background. */
.wpdef-site-footer .wpdef-footer-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
	background-color: transparent;
	pointer-events: none;
	position: relative;
	z-index: 2;
}

/* From 782px core opens nested panels of a right-aligned menu to the left but
   still points their arrows right. */
@media (min-width: 782px) {
	:is(.wp-site-blocks, .editor-styles-wrapper) .wpdef-footer-navigation.items-justified-right.wp-block-navigation .wp-block-navigation__submenu-container > :is(.wp-block-navigation-submenu, .wp-block-pages-list__item.has-child) > .wp-block-navigation__submenu-icon > svg {
		transform: rotate(90deg);
	}
}
.wpdef-site-footer .wpdef-footer-separator {
	opacity: 0.65;
}

.wpdef-home-main,
.wpdef-main {
	min-width: 0;
}

.wpdef-home-hero {
	background-color: var(--wp--preset--color--foreground);
	overflow: clip;
}

.wpdef-home-hero .wp-block-columns {
	margin-block-end: 0;
}

.wpdef-home-hero .wp-block-site-title {
	letter-spacing: -0.045em;
	margin-block: var(--wp--preset--spacing--20);
}

.wpdef-home-hero .wp-block-site-title a,
.wpdef-home-hero .wp-block-site-title a:visited,
.wpdef-home-hero .wp-block-site-title a:hover {
	color: var(--wp--preset--color--white);
}

.wpdef-home-hero .wp-block-site-title a:hover {
	text-decoration: none;
}

.wpdef-home-hero .wp-block-site-tagline {
	color: var(--wp--preset--color--white);
	font-weight: 700;
	line-height: 1.3;
	margin-block: var(--wp--preset--spacing--20);
	max-width: 54ch;
}

.wpdef-hero-summary {
	max-width: 54ch;
	opacity: 0.92;
}

.wpdef-kicker,
.wpdef-step {
	color: var(--wp--preset--color--accent);
	font-weight: 800;
	letter-spacing: 0.09em;
	line-height: 1.4;
	margin-block-end: var(--wp--preset--spacing--10);
	text-transform: uppercase;
}

.wpdef-home-hero .wpdef-kicker {
	color: var(--wp--preset--color--white);
}

.wpdef-hero-actions {
	margin-block-start: var(--wp--preset--spacing--40);
}

.wpdef-button-light .wp-block-button__link,
.wpdef-button-light .wp-block-button__link:visited {
	background-color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--accent);
}

.wpdef-button-light .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--soft);
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--foreground);
}

.wpdef-button-on-dark .wp-block-button__link,
.wpdef-button-on-dark .wp-block-button__link:visited {
	background-color: transparent;
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--white);
}

.wpdef-button-on-dark .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--foreground);
}

.wpdef-hero-card,
.wpdef-principles-card,
.wpdef-search-card,
.wpdef-empty-state {
	border: 1px solid var(--wp--preset--color--content-border);
	border-radius: 0.75rem;
	box-shadow: 0 1.25rem 3.5rem color-mix(in srgb, var(--wp--preset--color--foreground) 14%, transparent);
}

.wpdef-hero-card {
	box-shadow: 0 1.5rem 4rem color-mix(in srgb, var(--wp--preset--color--foreground) 28%, transparent);
}

.wpdef-feature-list,
.wpdef-principles-list {
	margin-block: 0;
	padding-inline-start: 1.35rem;
}

.wpdef-feature-list li,
.wpdef-principles-list li {
	padding-block: var(--wp--preset--spacing--20);
}

.wpdef-feature-list li + li,
.wpdef-principles-list li + li {
	border-top: 1px solid var(--wp--preset--color--border);
}

.wpdef-section {
	margin-block-start: 0;
}

.wpdef-section :where(h2, h3),
.wpdef-page-intro :where(h1, h2),
.wpdef-entry-header h1 {
	letter-spacing: -0.025em;
}

.wpdef-card {
	border: 1px solid var(--wp--preset--color--content-border);
	border-radius: 0.75rem;
	box-shadow: 0 0.625rem 1.75rem color-mix(in srgb, var(--wp--preset--color--foreground) 7%, transparent);
}

.wpdef-page-main {
	/* Must match the contentSize of the content group in templates/page.html. */
	--wpdef-page-measure: 60rem;

	padding-block-end: var(--wp--preset--spacing--40);
}

.wpdef-page-content {
	width: min(
		calc(100% - 2rem),
		calc(var(--wpdef-page-measure) + var(--wp--preset--spacing--60) * 2)
	);
	margin-inline: auto;
	margin-block-end: 0;
	/* Flat like the post article box; the card shadow stays on cards in a grid. */
	box-shadow: none;
}

.wpdef-card-grid > .wp-block-column {
	display: flex;
}

.wpdef-card-grid > .wp-block-column > .wpdef-card {
	width: 100%;
}

.wpdef-card :where(h2, h3),
.wpdef-product-card :where(h2, h3) {
	margin-block-start: 0;
}

.wpdef-principles-card {
	box-shadow: none;
}

.wpdef-service-card {
	container-type: inline-size;
	height: 100%;
}

/* With more columns set in the editor, a 2rem title no longer fit a narrow
   card and broke mid-word, as in "Acompanh" over "amento". The Large size stops
   at what the card can hold, never below 1.25rem, and long words break at a
   syllable. */
.wpdef-service-card :where(h2, h3) {
	hyphens: auto;
}

.wpdef-service-card :where(h2, h3).has-large-font-size {
	font-size: min(var(--wp--preset--font-size--large), max(1.25rem, 10cqi)) !important;
}

.wpdef-service-card__icon {
	align-items: center;
	background-color: var(--wp--preset--color--soft);
	border-radius: 0.75rem;
	color: var(--wp--preset--color--accent);
	display: flex;
	flex: 0 0 auto;
	height: 3rem;
	justify-content: center;
	width: 3rem;
}

.wpdef-service-card__icon svg {
	height: 1.5rem;
	width: 1.5rem;
}

/* The call to action sits at the foot of the card so that cards holding
   descriptions of different lengths still align their links on one line. The
   card is a flex layout, whose children core resets with body .is-layout-flex
   > * { margin: 0 }, so the rule names the card to keep its auto margin. */
.wpdef-service-card > .wpdef-service-card__link {
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--20);
}

/* Links inside content stay underlined, as the global link style draws them;
   hover thickens the line. */
.wpdef-service-card__link a {
	font-weight: 700;
}

.wpdef-service-card__link a::after {
	content: "\2192";
	margin-inline-start: 0.4em;
}

/* The arrow is decorative. Browsers that understand the alternative text
   syntax announce nothing in its place. */
@supports (content: "a" / "") {
	.wpdef-service-card__link a::after {
		content: "\2192" / "";
	}
}

.wpdef-service-card--featured {
	border-color: var(--wp--preset--color--accent);
}

.wpdef-post-grid > li {
	display: flex;
}

.wpdef-post-grid .wpdef-post-card {
	width: 100%;
}

.wpdef-latest-posts .wp-block-post-title a {
	text-decoration: none;
}

.wpdef-latest-posts .wp-block-post-title a:hover {
	text-decoration: underline;
}

.wpdef-post-card .wp-block-post-date,
.wpdef-post-list__item .wp-block-post-date,
.wpdef-entry-meta {
	font-weight: 700;
	letter-spacing: 0.025em;
}

.wpdef-post-card .wp-block-post-title,
.wpdef-post-list__item .wp-block-post-title {
	margin-block: var(--wp--preset--spacing--10);
}

.wpdef-post-list .wp-block-post-template {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.wpdef-post-list__item {
	margin-block: 0;
}

.wpdef-post-list .wp-block-post.sticky > .wpdef-post-list__item {
	box-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--wp--preset--color--foreground) 14%, transparent);
}

.wpdef-blog-posts-panel,
.wpdef-blog-widget,
.wpdef-blog-post-card,
.wpdef-single-article {
	border: 1px solid var(--wp--preset--color--content-border);
	border-radius: 0.40rem;
	box-shadow: none;
}

.wpdef-blog-post-grid__items > li {
	display: flex;
	min-width: 0;
}

.wpdef-blog-post-grid__items > li.sticky {
	grid-column: 1 / -1;
}

.wpdef-blog-post-card {
	overflow: hidden;
	width: 100%;
}

.wpdef-blog-post-card__image {
	margin-block: 0;
}

.wpdef-main .wpdef-blog-post-card .wpdef-blog-post-card__image img {
	aspect-ratio: 16 / 9;
	border-radius: 0;
	display: block;
	object-fit: cover;
	width: 100%;
}

.wpdef-blog-post-card .wp-block-post-title {
	letter-spacing: -0.025em;
	margin-block: 0;
}

.wpdef-blog-post-card .wp-block-post-title a,
.wpdef-post-list__item .wp-block-post-title a {
	text-decoration: none;
}

.wpdef-blog-post-card .wp-block-post-title a:hover,
.wpdef-post-list__item .wp-block-post-title a:hover {
	text-decoration: underline;
}

.wpdef-blog-post-card__meta {
	font-weight: 400;
}

.wpdef-blog-post-card__meta :where(p, .wp-block-post-date, .wp-block-post-author-name) {
	margin-block: 0;
}

.wpdef-blog-post-card__meta a,
.wpdef-blog-post-card__meta a:visited {
	color: var(--wp--preset--color--accent);
}

.wpdef-blog-post-grid .wp-block-query-pagination {
	margin-block-start: var(--wp--preset--spacing--50);
}

.wpdef-blog-post-grid .wp-block-post.sticky .wpdef-blog-post-card {
	border-color: var(--wp--preset--color--content-border);
	border-inline-start: 0.375rem solid var(--wp--preset--color--accent);
	box-shadow: none;
}

.wpdef-blog-widget .wp-block-search {
	margin-block-start: 0;
}

/* Sidebar card titles get room before the list and a short accent rule. The
   rule is a border, so it stays visible in forced colours mode. */
.wpdef-blog-widget > .wp-block-heading {
	margin-block-end: var(--wp--preset--spacing--40);
	padding-block-end: var(--wp--preset--spacing--20);
	position: relative;
}

.wpdef-blog-widget > .wp-block-heading::after {
	border-block-start: 3px solid var(--wp--preset--color--accent);
	border-radius: 2px;
	content: "";
	inline-size: 2.5rem;
	inset-block-end: 0;
	inset-inline-start: 0;
	position: absolute;
}

.wpdef-blog-widget .wp-block-search__inside-wrapper {
	align-items: stretch;
}

.wpdef-recent-posts {
	list-style: none;
	margin-block: 0;
	padding-inline-start: 0;
}

.wpdef-recent-posts li {
	border-block-end: 1px solid var(--wp--preset--color--border-subtle);
	margin-block: 0;
	padding-block: var(--wp--preset--spacing--20);
}

.wpdef-recent-posts li:first-child {
	padding-block-start: 0;
}

.wpdef-recent-posts li:last-child {
	border-block-end: 0;
	padding-block-end: 0;
}

.wpdef-recent-posts a {
	display: inline-block;
	font-weight: 700;
	text-decoration: none;
}

.wpdef-recent-posts a:hover {
	text-decoration: underline;
}

.wpdef-latest-comments {
	margin-block: 0;
	padding-inline-start: 0;
}

.wpdef-latest-comments .wp-block-latest-comments__comment {
	border-block-end: 1px solid var(--wp--preset--color--border-subtle);
	line-height: 1.5;
	margin-block: 0;
	padding-block: var(--wp--preset--spacing--20);
}

.wpdef-latest-comments .wp-block-latest-comments__comment:first-child {
	padding-block-start: 0;
}

.wpdef-latest-comments .wp-block-latest-comments__comment:last-child {
	border-block-end: 0;
	padding-block-end: 0;
}

.wpdef-search-card {
	box-shadow: none;
}

.wpdef-search-card .wp-block-search {
	margin-block-start: var(--wp--preset--spacing--30);
}

.wp-block-search {
	container-type: inline-size;
}

/* Core sets nowrap on this wrapper with the same specificity and later in the
   page, which kept the field and button side by side when the rules below ask
   them to stack, squeezing the field until its placeholder was cut. */
.wp-block-search .wp-block-search__inside-wrapper {
	border-radius: 0.5rem;
	flex-wrap: wrap;
	max-width: 100%;
	min-width: 0;
	row-gap: var(--wp--preset--spacing--20);
}

.wp-block-search__input {
	flex: 1 1 12rem;
	min-width: 0;
}

/* Core's comment form and search block draw their fields in a 3.03:1 grey
   at zero specificity, like the theme's field rule. With WooCommerce active
   their stylesheets load after the theme's and that grey won, so the theme's
   Border colour, 4.76:1, is named here with a class. */
.wp-block-post-comments-form :where(input:not([type="submit"]):not([type="checkbox"]):not([type="hidden"]), textarea),
.wp-block-search .wp-block-search__input {
	border-color: var(--wp--preset--color--border);
}

@container (max-width: 20rem) {
	.wp-block-search__input {
		flex-basis: 100%;
		font-size: 0.875rem;
		padding-inline: 0.375rem;
		width: 100%;
	}

	.wp-block-search .wp-block-search__button {
		margin-inline-start: 0;
		max-width: 100%;
		width: 100%;
	}
}

@container (max-width: 14rem) {
	.wp-block-search__input {
		font-size: 0.75rem;
	}
}

.wpdef-main {
	background-color: var(--wp--preset--color--background);
}

.wpdef-main--single {
	background-color: var(--wp--preset--color--soft);
}

.wpdef-main--store > .wp-block-post-title,
.wpdef-main--listing > .wp-block-query-title,
.wpdef-entry-header,
.wpdef-page-intro {
	max-width: var(--wp--style--global--content-size);
}

.wpdef-main--store > .wp-block-post-title,
.wpdef-main--listing > .wp-block-query-title {
	letter-spacing: -0.035em;
	margin-block-end: var(--wp--preset--spacing--50);
}

.wpdef-main--page {
	background-color: var(--wp--preset--color--soft);
}

.wpdef-page-hero {
	margin-block-start: 0;
}

.wpdef-page-hero .wp-block-post-title {
	letter-spacing: -0.035em;
	margin-block: 0;
}

.wpdef-page-hero__excerpt {
	border-inline-start: 2px solid var(--wp--preset--color--border-subtle);
	line-height: 1.6;
	margin-block-end: 0;
	max-width: 48rem;
	padding-inline-start: var(--wp--preset--spacing--30);
}

.wpdef-page-hero__excerpt .wp-block-post-excerpt__excerpt {
	margin-block: 0;
}

.wpdef-single-hero {
	border-block-end: 1px solid var(--wp--preset--color--border-subtle);
	margin-block-start: 0;
}

.wpdef-single-hero .wp-block-post-title {
	letter-spacing: -0.045em;
	margin-block: 0;
	max-width: 18ch;
}

.wpdef-single-hero__excerpt {
	border-inline-start: 2px solid var(--wp--preset--color--border-subtle);
	line-height: 1.6;
	margin-block-end: 0;
	max-width: 54rem;
	padding-inline-start: var(--wp--preset--spacing--30);
}

.wpdef-single-hero__excerpt .wp-block-post-excerpt__excerpt {
	margin-block: 0;
}

.wpdef-single-entry-meta :where(.wp-block-post-terms, .wp-block-post-date, .wp-block-post-author-name) {
	margin-block: 0;
}

.wpdef-single-categories {
	column-gap: var(--wp--preset--spacing--20);
	display: flex;
	flex-wrap: wrap;
	row-gap: var(--wp--preset--spacing--20);
}

.wpdef-single-categories .wp-block-post-terms__separator {
	display: none;
}

.wpdef-single-categories a {
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 0.25rem;
	display: inline-block;
	font-family: var(--wp--preset--font-family--system-monospace);
	font-weight: 600;
	letter-spacing: 0.08em;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	text-decoration: none;
	text-transform: uppercase;
}

.wpdef-single-categories a:hover {
	background-color: var(--wp--preset--color--soft);
	text-decoration: underline;
}

.wpdef-single-date,
.wpdef-single-author {
	font-family: var(--wp--preset--font-family--system-monospace);
}

.wpdef-single-featured-image {
	margin-block: var(--wp--preset--spacing--50) 0;
}

.wpdef-single-featured-image img {
	border: 1px solid var(--wp--preset--color--border-subtle);
	border-radius: 0.25rem;
}

.wpdef-single-content {
	margin-block-start: 0;
}

.wpdef-main--page > .wp-block-post-featured-image {
	margin-block-start: var(--wp--preset--spacing--70);
}

.wpdef-main .wp-block-post-featured-image img {
	border-radius: 0.75rem;
}

.wpdef-main .wp-block-post-content {
	margin-block-start: var(--wp--preset--spacing--50);
}

.wpdef-entry-header {
	border-inline-start: 0.375rem solid var(--wp--preset--color--accent);
	padding-inline-start: var(--wp--preset--spacing--40);
}

.wpdef-entry-meta {
	color: var(--wp--preset--color--muted);
	column-gap: var(--wp--preset--spacing--30);
}

.wpdef-empty-state {
	text-align: start;
}

.wpdef-testimonial .wp-block-quote {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-inline-start: 0.5rem solid var(--wp--preset--color--accent);
	border-radius: 0.75rem;
	padding: var(--wp--preset--spacing--50);
}

.wpdef-store-sidebar .wc-block-product-filters__overlay-content,
.wpdef-store-sidebar .wc-block-product-filters__content {
	gap: var(--wp--preset--spacing--40);
}

/* The filters become a card when shown inline. Up to WooCommerce 11.1 that is
 * above 600px; from 11.2 the block carries is-mobile-overlay, stays a drawer
 * up to 782px and resets the inline padding with a selector of the same weight. */
@media (min-width: 601px) {
	.wpdef-store-sidebar .wc-block-product-filters:not(.is-mobile-overlay) .wc-block-product-filters__overlay-content,
	.wpdef-store-sidebar .wc-block-product-filters:not(.is-mobile-overlay) .wc-block-product-filters__content {
		background-color: var(--wp--preset--color--white);
		border: 1px solid var(--wp--preset--color--content-border);
		border-radius: 0.75rem;
		padding: var(--wp--preset--spacing--30);
	}
}

@media (min-width: 783px) {
	.wpdef-store-sidebar .wc-block-product-filters.is-mobile-overlay .wc-block-product-filters__overlay-content {
		background-color: var(--wp--preset--color--white);
		border: 1px solid var(--wp--preset--color--content-border);
		border-radius: 0.75rem;
		padding: var(--wp--preset--spacing--30);
	}
}

.wpdef-store-sidebar__title,
.wpdef-store-sidebar legend.screen-reader-text {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	margin-block: 0 var(--wp--preset--spacing--20);
}

.wpdef-store-sidebar .wc-block-product-filter-checkbox-list__label:hover,
.wpdef-store-sidebar .wc-block-product-filter-checkbox-list__label:focus-within,
.wpdef-store-sidebar .wc-block-product-filter-checkbox-list__label:has(input:checked) {
	background-color: var(--wp--preset--color--soft);
}

.wpdef-store-categories__all,
.wpdef-store-categories .wc-block-product-categories-list-item {
	align-items: center;
	border-radius: 0.25rem;
	display: flex;
	gap: 0.5rem;
	line-height: 1.35;
	margin: 0;
	min-height: 2.75rem;
	padding-block: 0.25rem;
	padding-inline: 0.5rem;
}

.wpdef-store-categories__all,
.wpdef-store-categories .wc-block-product-categories-list-item > a {
	color: var(--wp--preset--color--foreground);
	flex-grow: 1;
	text-decoration: none;
}

.wpdef-store-categories__all:hover,
.wpdef-store-categories__all:focus-visible,
.wpdef-store-categories .wc-block-product-categories-list-item:hover,
.wpdef-store-categories .wc-block-product-categories-list-item:focus-within {
	background-color: var(--wp--preset--color--soft);
}

.wpdef-store-categories__all:hover,
.wpdef-store-categories__all:focus-visible,
.wpdef-store-categories .wc-block-product-categories-list-item > a:hover,
.wpdef-store-categories .wc-block-product-categories-list-item > a:focus-visible {
	text-decoration: underline;
}

.wpdef-store-categories .wc-block-product-categories-list-item:has(> a[aria-current="page"]) > a,
.wpdef-store-categories .wc-block-product-categories-list-item:has(> a[aria-current="page"]) .wc-block-product-categories-list-item-count {
	color: var(--wp--preset--color--white);
}

/* The link covers its whole row, so the row, count included, is the click
   target and carries the theme's text-link focus ring instead of the name. */
.wpdef-store-categories .wc-block-product-categories-list-item {
	position: relative;
}

.wpdef-store-categories .wc-block-product-categories-list-item > a::after {
	content: "";
	inset: 0;
	position: absolute;
}

.wpdef-store-categories .wc-block-product-categories-list-item:has(> a:focus-visible) {
	box-shadow: 0 0 0 7px var(--wp--preset--color--white);
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.wpdef-store-categories .wc-block-product-categories-list-item > a:focus-visible {
	box-shadow: none;
	outline: none;
}

@media (forced-colors: active) {
	.wpdef-store-categories .wc-block-product-categories-list-item:has(> a:focus-visible) {
		box-shadow: none;
		outline-color: Highlight;
	}
}

/* WooCommerce's ordering form and its select carry margins of their own,
   which drop the control below the row's centre line. */
.wpdef-store-toolbar__meta .wc-block-catalog-sorting,
.wpdef-store-toolbar__meta .woocommerce-ordering,
.wpdef-store-toolbar__meta .woocommerce-ordering select {
	margin: 0;
	max-width: 100%;
	min-width: 0;
}

/* Flex gaps own the spacing inside cards; neutralize WordPress flow margins. */
.wpdef-product-card > .wpdef-product-card__body,
.wpdef-product-card .wpdef-product-card__body > * {
	margin-block: 0;
}

.wpdef-product-card__category a:hover,
.wpdef-product-card__category a:focus-visible {
	text-decoration: underline;
}

.wpdef-product-card__title a:hover,
.wpdef-product-card__title a:focus-visible {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

/* The price row holds the price group and, on a sale, the saving chip. The
   saving is added wherever a price block renders, so the card and the single
   product share this treatment instead of the chip orphaning itself. */
.wpdef-product-card__price,
.wpdef-price {
	align-items: baseline;
	column-gap: 0.5rem;
	display: flex;
	flex-wrap: wrap;
	margin-block-start: 0.25rem;
	row-gap: 0.25rem;
}

/* WooCommerce marks del/ins aria-hidden and repeats both prices in adjacent
   screen-reader text, so showing the current price first is visual only. */
.wpdef-product-card__price .wc-block-components-product-price,
.wpdef-price .wc-block-components-product-price {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.wpdef-product-card__price ins,
.wpdef-price ins {
	font-weight: 700;
	letter-spacing: -0.01em;
	order: 1;
	text-decoration: none;
}

/* The old price is reference, not the offer, so it drops a step in size and
   weight and keeps the rule thin enough to leave the digits readable. */
.wpdef-product-card__price del,
.wpdef-price del {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	opacity: 1;
	order: 2;
	text-decoration-thickness: 1px;
}

/* WooCommerce's own button styles load after this stylesheet, so the card
   button needs the extra class to win the cascade rather than !important. */
:is(.wp-site-blocks, .editor-styles-wrapper) .wpdef-product-card .wpdef-product-card__action .wp-block-button__link,
:is(.wp-site-blocks, .editor-styles-wrapper) .wpdef-product-card .wpdef-product-card__action .wc-block-components-product-button__button {
	align-items: center;
	background-color: var(--wp--preset--color--secondary);
	border-color: var(--wp--preset--color--secondary);
	display: inline-flex;
	flex-grow: 1;
	gap: 0.5em;
	justify-content: center;
	min-height: 2.75rem;
	text-align: center;
	width: 100%;
}
/* Icons are decorative: a masked shape with empty content, so no assistive
   technology announces them and they inherit the button's own colour.
   WooCommerce renders the real add-to-cart control as the only button here,
   while every other card action is a link, which is what splits the two. */
.wp-site-blocks .wpdef-product-card__action button::before,
.wp-site-blocks .wpdef-product-card__action a::after {
	background-color: currentColor;
	content: "";
	flex-shrink: 0;
	height: 1.05em;
	width: 1.05em;
}

.wp-site-blocks .wpdef-product-card__action .added_to_cart.wc_forward:hover,
.wp-site-blocks .wpdef-product-card__action .added_to_cart.wc_forward:focus-visible {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
	text-decoration: none;
}
/* Masked icons are painted with a background, which forced-colours modes
   override, so repaint them with the system button colour. */
@media (forced-colors: active) {
	.wp-site-blocks .wpdef-product-card__action button::before,
	.wp-site-blocks .wpdef-product-card__action a::after {
		background-color: ButtonText;
	}
}

@media (max-width: 40rem) {
	.wp-block-woocommerce-add-to-cart-form .woocommerce-grouped-product-list,
	.wp-block-woocommerce-add-to-cart-form .woocommerce-grouped-product-list tbody,
	.wp-block-woocommerce-add-to-cart-form .woocommerce-grouped-product-list tr,
	.wp-block-woocommerce-add-to-cart-form .woocommerce-grouped-product-list td {
		display: block;
	}

	.wp-block-woocommerce-add-to-cart-form .woocommerce-grouped-product-list tr:first-child td,
	.wp-block-woocommerce-add-to-cart-form .woocommerce-grouped-product-list td {
		border: 0;
		padding: 0;
	}
}

/* The pagination blocks take their gap from theme.json, as a block gap the
   editor can change; a class rule here lost to core's layout gap. */
:where(
	.woocommerce nav.woocommerce-pagination ul,
	.pagination .nav-links
) {
	gap: var(--wp--preset--spacing--20);
}

:is(
	.wp-block-query-pagination a,
	.wp-block-comments-pagination a,
	.wp-block-query-pagination .current,
	.wp-block-comments-pagination .current,
	.woocommerce-pagination a.page-numbers,
	.woocommerce-pagination span.page-numbers,
	.pagination a.page-numbers,
	.pagination span.page-numbers,
	.wc-block-pagination-page
) {
	align-items: center;
	border: 1px solid var(--wp--preset--color--content-border);
	border-radius: 0.40rem;
	display: inline-flex;
	font-weight: 500;
	justify-content: center;
	line-height: 1.25;
	min-height: 2.75rem;
	min-width: 2.75rem;
	padding: 0.5rem 0.75rem;
	text-decoration: none;
}

:is(
	.wp-block-query-pagination a:hover,
	.wp-block-comments-pagination a:hover,
	.woocommerce-pagination a.page-numbers:hover,
	.pagination a.page-numbers:hover,
	.wc-block-pagination-page:hover
) {
	border-color: var(--wp--preset--color--accent);
	text-decoration: none;
}

:where(
	.wp-block-query-pagination .current,
	.wp-block-comments-pagination .current,
	.woocommerce-pagination span.page-numbers.current,
	.pagination span.page-numbers.current,
	.wc-block-pagination-page--active
) {
	background-color: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--white);
	font-weight: 500;
}

/* Keep query-pagination numbers and its next/previous action together when space allows. */
.wp-block-query-pagination > .wp-block-query-pagination {
	align-items: center;
	display: flex;
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--20);
	max-width: 100%;
}

.wp-block-query-pagination-numbers {
	align-items: center;
	display: flex;
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--20);
}

.wp-block-query-pagination-next,
.wp-block-query-pagination-previous {
	flex: 0 0 auto;
}

/* Pagination needs a visible focus indicator without overwhelming its compact controls. */
:is(
	.wp-block-query-pagination a,
	.wp-block-comments-pagination a,
	.woocommerce-pagination a.page-numbers,
	.pagination a.page-numbers
):focus-visible {
	box-shadow: 0 0 0 3px var(--wp--preset--color--accent);
	outline: 2px solid var(--wp--preset--color--white);
}

@media (max-width: 30rem) {
	.wp-block-query-pagination > .wp-block-query-pagination,
	.wp-block-query-pagination-numbers {
		flex-wrap: wrap;
	}
}

:where(.woocommerce nav.woocommerce-pagination ul) {
	border: 0;
	display: flex;
	flex-wrap: wrap;
}

:where(.woocommerce nav.woocommerce-pagination ul li) {
	border: 0;
}

:where(.woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner) {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-inline-start-width: 0.5rem;
	border-radius: 0.375rem;
	color: var(--wp--preset--color--foreground);
	padding: var(--wp--preset--spacing--30);
}

:where(.woocommerce-message, .wc-block-components-notice-banner.is-success) {
	border-inline-start-color: var(--wp--preset--color--success);
}

:where(.woocommerce-error, .wc-block-components-notice-banner.is-error) {
	border-inline-start-color: var(--wp--preset--color--error);
}

:where(.woocommerce-info, .wc-block-components-notice-banner.is-info) {
	border-inline-start-color: var(--wp--preset--color--accent);
}

:where(input, select, textarea)[aria-invalid="true"],
:where(.woocommerce-invalid input, .woocommerce-invalid select, .woocommerce-invalid textarea) {
	border-color: var(--wp--preset--color--error);
	box-shadow: 0 0 0 1px var(--wp--preset--color--error);
}

:where(.wc-block-components-validation-error, .woocommerce-error, .woocommerce-invalid label) {
	color: var(--wp--preset--color--error);
	font-weight: 700;
}

@media (forced-colors: active) {
	:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
		box-shadow: none;
		outline: 3px solid Highlight;
	}

	/* Core removes the outline of a search field with the button inside, and
	   MediaElement that of its player, at a higher specificity. The theme's
	   shadow still marks them, but forced colours drop shadows. */
	.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus-visible,
	.wp-site-blocks .mejs-container:focus-visible {
		outline: 3px solid Highlight;
	}

	:where(audio, video):is(:focus-visible, :focus-within) {
		box-shadow: none;
		outline: 3px solid Highlight;
	}
}

/* Collapse the menu into its button only on narrow screens; notebooks keep the full menu. */
@media (max-width: 1023px) {
	.wpdef-site-header .wpdef-site-header__inner {
		align-items: center;
		column-gap: var(--wp--preset--spacing--30);
		justify-content: flex-start;
	}

	.wpdef-site-header__inner > .wpdef-site-branding {
		flex: 1 1 12rem;
	}

	.wpdef-site-header__inner > .wpdef-primary-navigation {
		flex: 0 0 3.25rem;
		margin-inline-start: auto;
	}

	/* Same box as the 3.25rem buttons inside, so no button covers the gap to the next one. */
	.wpdef-site-header__inner > :is(.wpdef-header-search, .wp-block-woocommerce-customer-account, .wp-block-woocommerce-mini-cart) {
		flex: 0 0 3.25rem;
		min-width: 3.25rem;
	}

	.wpdef-site-header__inner > :is(.wp-block-woocommerce-customer-account, .wp-block-woocommerce-mini-cart) {
		flex-basis: auto;
	}

	.wpdef-site-header__inner > .wp-block-woocommerce-customer-account {
		margin-inline-start: 0;
	}

	.wpdef-site-header__inner > :is(.wpdef-primary-navigation, .wpdef-header-search, .wp-block-woocommerce-customer-account, .wp-block-woocommerce-mini-cart) + :is(.wpdef-header-search, .wp-block-woocommerce-customer-account, .wp-block-woocommerce-mini-cart) {
		margin-inline-start: calc(var(--wp--preset--spacing--10) - var(--wp--preset--spacing--30));
	}

	.wpdef-primary-navigation .wp-block-navigation__responsive-container-open,
	.wpdef-primary-navigation .wp-block-navigation__responsive-container-close,
	.wpdef-header-search > summary,
	.wpdef-site-header__inner > .wp-block-woocommerce-customer-account :is(.wc-block-customer-account__link, .wc-block-customer-account__toggle),
	.wpdef-site-header__inner > .wp-block-woocommerce-mini-cart .wc-block-mini-cart__button {
		background-color: transparent;
		border: 0;
		border-radius: 0.25rem;
		min-height: 3.25rem;
		min-width: 3.25rem;
	}

	.wpdef-primary-navigation .wp-block-navigation__responsive-container-open:hover,
	.wpdef-primary-navigation .wp-block-navigation__responsive-container-open[aria-expanded="true"],
	.wpdef-header-search > summary:hover,
	.wpdef-header-search[open] > summary,
	.wpdef-site-header__inner > .wp-block-woocommerce-customer-account :is(.wc-block-customer-account__link, .wc-block-customer-account__toggle):hover,
	.wpdef-site-header__inner > .wp-block-woocommerce-mini-cart .wc-block-mini-cart__button:hover {
		background-color: var(--wp--preset--color--soft);
	}

	.wpdef-primary-navigation .wp-block-navigation__responsive-container-open svg,
	.wpdef-header-search > summary svg,
	.wpdef-site-header__inner > .wp-block-woocommerce-customer-account svg:not(.wc-block-customer-account__caret),
	.wpdef-site-header__inner > .wp-block-woocommerce-mini-cart svg {
		height: 1.5rem;
		width: 1.5rem;
	}

	.wpdef-primary-navigation .wp-block-navigation__responsive-container-close svg {
		height: 2rem;
		width: 2rem;
	}

	.wpdef-site-branding .wp-block-site-title {
		overflow-wrap: anywhere;
		white-space: normal;
	}

	.wpdef-primary-navigation .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.wpdef-primary-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: inline-flex;
	}
}

/* A menu set to always collapse in the editor uses the same button and overlay
   on wider screens, so the overlay layout does not depend on width. */
.wpdef-primary-navigation .wp-block-navigation__responsive-container-open.always-shown {
	border-radius: 0.25rem;
	color: var(--wp--preset--color--muted);
}

.wpdef-primary-navigation .wp-block-navigation__responsive-container-open.always-shown:hover,
.wpdef-primary-navigation .wp-block-navigation__responsive-container-open.always-shown[aria-expanded="true"] {
	background-color: var(--wp--preset--color--soft);
}

@media (min-width: 1024px) {
	.wpdef-primary-navigation .wp-block-navigation__responsive-container-open.always-shown svg {
		height: 1.25rem;
		width: 1.25rem;
	}

	/* The site identity takes the width of its title, up to 26rem, so a long title
	   wraps in two or three lines and a short one leaves the rest to the menu. */
	.wpdef-site-header__inner > .wpdef-site-branding {
		flex: 0 1 auto;
		max-width: 26rem;
	}

	/* On the menu's row the menu takes all the free space, so this margin acts
	   only when enlarged text sends the icons to a row of their own: they then
	   stay at the end, under the menu. */
	.wpdef-site-header__inner > .wpdef-header-search {
		margin-inline-start: auto;
	}

	/* A menu set to always collapse needs only its button. */
	.wpdef-site-header__inner > .wpdef-primary-navigation:has(> .wp-block-navigation__responsive-container-open.always-shown) {
		flex: 0 0 auto;
	}

	/* The menu button then joins the search, account and cart icons, with their spacing. */
	.wpdef-site-header__inner > .wpdef-primary-navigation:has(> .wp-block-navigation__responsive-container-open.always-shown) + :is(.wpdef-header-search, .wp-block-woocommerce-customer-account, .wp-block-woocommerce-mini-cart) {
		margin-inline-start: calc(var(--wp--preset--spacing--10) - var(--wp--preset--spacing--50));
	}
}

/* Up to 1279px the menu needs the room more than a long site title does. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.wpdef-site-header__inner > .wpdef-site-branding {
		max-width: 18rem;
	}
}

.wpdef-primary-navigation .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--40);
}

.wpdef-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch;
}

.wpdef-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: stretch;
	gap: var(--wp--preset--spacing--10);
	width: 100%;
}

.wpdef-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: stretch;
	width: 100%;
}

.wpdef-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	padding: var(--wp--preset--spacing--10);
	width: 100%;
}

.wpdef-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	border: 0;
	min-width: 0;
	padding-inline-start: var(--wp--preset--spacing--30);
	width: 100%;
}

/* In the compact overlay, reveal each submenu only when its own button is expanded. */
/* The arrow sits in the toggle's trailing padding, so the focus ring around
   the toggle takes it in; clicks on the arrow still reach the toggle. */
.wpdef-primary-navigation .wp-block-navigation__responsive-container.is-menu-open :is(.wp-block-navigation-submenu, .wp-block-pages-list__item.has-child) > .wp-block-navigation__submenu-icon {
	display: inline-flex;
	flex: 0 0 auto;
	inset-inline: auto;
	justify-content: center;
	margin-inline: -2.5rem 0;
	pointer-events: none;
	position: relative;
	width: 2.5rem;
	z-index: 1;
}

.wpdef-primary-navigation .wp-block-navigation__responsive-container.is-menu-open :is(.wp-block-navigation-submenu, .wp-block-pages-list__item.has-child) {
	align-items: center;
	flex-direction: row;
	flex-wrap: wrap;
}

.wpdef-primary-navigation .wp-block-navigation__responsive-container.is-menu-open :is(.wp-block-navigation-submenu, .wp-block-pages-list__item.has-child) > .wp-block-navigation-submenu__toggle {
	flex: 1 1 0;
	padding-inline-end: 2.5rem;
	width: auto;
}

.wpdef-primary-navigation .wp-block-navigation__responsive-container.is-menu-open :is(.wp-block-navigation-submenu, .wp-block-pages-list__item.has-child) > .wp-block-navigation__submenu-container {
	display: none;
	flex-basis: 100%;
}

.wpdef-primary-navigation .wp-block-navigation__responsive-container.is-menu-open :is(.wp-block-navigation-submenu, .wp-block-pages-list__item.has-child) > .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container,
.wpdef-primary-navigation .wp-block-navigation__responsive-container.is-menu-open :is(.wp-block-navigation-submenu, .wp-block-pages-list__item.has-child).wpdef-submenu-closing > .wp-block-navigation__submenu-container {
	display: flex;
}

/* Nested submenus open below in the overlay, so their arrows point down and
   turn up when open, instead of core's sideways arrow from 782px. */
:is(.wp-site-blocks, .editor-styles-wrapper) .wpdef-primary-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon > svg {
	transform: none;
}

:is(.wp-site-blocks, .editor-styles-wrapper) .wpdef-primary-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-icon > svg {
	transform: rotate(180deg);
}

/* Keeps a submenu closed with Escape on screen while its toggle already reads
   as collapsed, until compact-navigation.js moves focus back to the toggle. */
.wp-block-navigation .has-child.wpdef-submenu-closing > .wp-block-navigation__submenu-container {
	height: auto;
	min-width: 200px;
	opacity: 1;
	overflow: visible;
	visibility: visible;
	width: auto;
}

/* Keep sidebars useful at browser zoom: stack before their controls become
   cramped. Core's Columns block keeps columns on one line from 782px with
   flex-wrap: nowrap !important and loads after the theme, so the selectors
   name the block too; with the class alone the columns shrank side by side. */
@media (max-width: 1280px) {
	.wp-block-columns.wpdef-blog-layout,
	.wp-block-columns.wpdef-single-layout {
		flex-wrap: wrap !important;
	}

	.wpdef-blog-layout > .wp-block-column,
	.wpdef-single-layout > .wp-block-column {
		flex-basis: 100% !important;
	}
}

@media (max-width: 781px) {

	.wpdef-site-footer__inner {
		align-items: flex-start;
		flex-direction: column;
	}

	.wpdef-footer-navigation .wp-block-navigation__container {
		align-items: flex-start;
		flex-direction: column;
	}

	.wpdef-footer-navigation,
	.wpdef-footer-navigation .wp-block-page-list {
		width: 100%;
	}

	.wpdef-footer-navigation .wp-block-page-list {
		align-items: flex-start;
		flex-direction: column;
	}

	/* On narrow screens, as at 200% and 400% zoom, footer submenus open inside
	   the list and push what follows down, as in the mobile menu. As floating
	   panels, each nested level covered the items of the level before. The
	   first level keeps its white panel; deeper levels sit indented in it. */
	.wpdef-footer-navigation :is(.wp-block-navigation-submenu, .wp-block-pages-list__item.has-child) {
		flex-wrap: wrap;
	}

	:is(.wp-site-blocks, .editor-styles-wrapper) .wpdef-footer-navigation.wp-block-navigation :is(.wp-block-navigation-submenu, .wp-block-pages-list__item.has-child) > .wp-block-navigation__submenu-container {
		display: none;
		flex-basis: 100%;
		position: static;
	}

	:is(.wp-site-blocks, .editor-styles-wrapper) .wpdef-footer-navigation.wp-block-navigation :is(.wp-block-navigation-submenu, .wp-block-pages-list__item.has-child) > .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container,
	:is(.wp-site-blocks, .editor-styles-wrapper) .wpdef-footer-navigation.wp-block-navigation :is(.wp-block-navigation-submenu, .wp-block-pages-list__item.has-child).wpdef-submenu-closing > .wp-block-navigation__submenu-container {
		display: flex;
	}

	:is(.wp-site-blocks, .editor-styles-wrapper) .wpdef-footer-navigation.wp-block-navigation .wp-block-navigation__submenu-container :is(.wp-block-navigation-submenu, .wp-block-pages-list__item.has-child) > .wp-block-navigation__submenu-container {
		background: none;
		border: 0;
		min-width: 0;
		padding: 0 0 0 var(--wp--preset--spacing--20);
	}
}

/* Keep mobile actions together regardless of the site title, logo or tagline. */
@media (max-width: 600px) {
	.wpdef-site-header .wpdef-site-header__inner {
		column-gap: var(--wp--preset--spacing--10);
		row-gap: 0.75rem;
		justify-content: flex-end;
	}

	.wpdef-site-header__inner > .wpdef-site-branding {
		flex: 0 1 100%;
		max-width: 100%;
		column-gap: var(--wp--preset--spacing--10);
	}

	.wpdef-site-header .wpdef-site-header__inner > :is(
		.wpdef-primary-navigation,
		.wpdef-header-search,
		.wp-block-woocommerce-customer-account,
		.wp-block-woocommerce-mini-cart
	) {
		flex: 0 0 3.25rem;
		min-width: 3.25rem;
		margin-inline: 0;
	}

	.wpdef-site-header .wpdef-site-header__inner > :is(.wp-block-woocommerce-customer-account, .wp-block-woocommerce-mini-cart) {
		flex-basis: auto;
	}
}

@media (max-width: 480px) {
	.wpdef-site-header__inner {
		column-gap: var(--wp--preset--spacing--10);
		justify-content: space-between;
	}

	.wpdef-site-branding {
		column-gap: var(--wp--preset--spacing--10);
	}

	.wpdef-site-branding .wp-block-site-title {
		font-size: var(--wp--preset--font-size--medium);
	}

	.wpdef-site-branding__text,
	.wpdef-site-branding .wp-block-site-tagline {
		max-width: 100%;
		min-width: 0;
		overflow-wrap: anywhere;
		white-space: normal;
	}

	.wpdef-site-header__inner > :is(.wpdef-header-search, .wp-block-woocommerce-customer-account, .wp-block-woocommerce-mini-cart) + :is(.wpdef-header-search, .wp-block-woocommerce-customer-account, .wp-block-woocommerce-mini-cart) {
		margin-inline-start: 0;
	}

}

@media (max-width: 781px) {
	.wpdef-home-hero .wp-block-column + .wp-block-column {
		margin-block-start: var(--wp--preset--spacing--40);
	}

	.wpdef-card-grid > .wp-block-column {
		display: block;
	}

	.wpdef-post-grid > li {
		display: block;
	}

	/* Two readable columns fit tablets and narrow windows better than three. */
	.wpdef-post-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.wpdef-site-footer__identity {
		max-width: 36rem;
	}
}

@media (max-width: 600px) {
	/* Avoid a narrow text column beside legacy floated images on small screens. */
	.wp-block-post-content p > img.alignleft,
	.wp-block-post-content p > img.alignright,
	.wp-block-post-content p > a:has(> img.alignleft),
	.wp-block-post-content p > a:has(> img.alignright),
	.wp-block-post-content .wp-caption.alignleft,
	.wp-block-post-content .wp-caption.alignright {
		float: none;
		display: block;
		margin: var(--wp--preset--spacing--20) auto var(--wp--preset--spacing--30);
	}

	.wp-block-post-content p > a:has(> img.alignleft),
	.wp-block-post-content p > a:has(> img.alignright) {
		width: fit-content;
	}

	.wp-block-comment-template ol {
		border-inline-start: 1px solid var(--wp--preset--color--border);
		padding-inline-start: 0.25rem;
	}

	.wp-block-comment-template > li,
	.wp-block-comment-template > li > ol {
		border-inline-start: 0;
	}

	.wpdef-home-hero,
	.wpdef-section,
	.wpdef-home-search {
		padding-block: var(--wp--preset--spacing--70) !important;
	}

	.wpdef-main {
		padding-block: var(--wp--preset--spacing--60) !important;
	}

	.wpdef-main.wpdef-main--page {
		padding-block-start: 0 !important;
	}

	.wpdef-main.wpdef-main--single {
		padding-block: 0 !important;
	}

	.wpdef-blog-posts-panel,
	.wpdef-blog-widget,
	.wpdef-blog-post-card__content,
	.wpdef-single-article {
		padding: var(--wp--preset--spacing--30) !important;
	}

	.wpdef-blog-post-grid__items {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	/* Phones use one full-width card per row to preserve readable line lengths. */
	.wpdef-post-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.wpdef-hero-card,
	.wpdef-principles-card,
	.wpdef-search-card,
	.wpdef-empty-state,
	.wpdef-card,
	.wpdef-testimonial .wp-block-quote {
		padding: var(--wp--preset--spacing--30) !important;
	}

	.wpdef-entry-header {
		padding-inline-start: var(--wp--preset--spacing--30);
	}

	.wpdef-hero-actions .wp-block-button,
	.wpdef-hero-actions .wp-block-button__link {
		width: 100%;
	}

	.wpdef-hero-actions .wp-block-button__link {
		text-align: center;
	}

	.wp-block-search__inside-wrapper {
		flex-wrap: wrap;
	}

	.wp-block-search__input {
		flex-basis: 100%;
		width: 100%;
	}

	.wp-block-search .wp-block-search__button {
		margin-inline-start: 0;
		max-width: 100%;
		width: 100%;
	}
}
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

.wpdef-store-category-tiles__list,
.wpdef-store-category-tiles .wc-block-product-categories-list {
	display: contents;
}

.wpdef-store-category-tiles__all,
.wpdef-store-category-tiles .wc-block-product-categories-list-item,
.wpdef-store-category-tiles .cat-item {
	align-items: center;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--custom--color--line-1);
	border-radius: 999px;
	color: var(--wp--preset--color--foreground);
	display: inline-flex;
	gap: 0.75rem;
	list-style: none;
	margin: 0;
	max-width: 100%;
	min-height: 2.75rem;
	padding: 0.5rem 1rem;
	position: relative;
	text-decoration: none;
	transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.wpdef-store-category-tiles__all > a,
.wpdef-store-category-tiles .wc-block-product-categories-list-item > a,
.wpdef-store-category-tiles .cat-item > a {
	color: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.4;
	overflow-wrap: anywhere;
	text-decoration: none;
}

.wpdef-store-category-tiles .wc-block-product-categories-list-item-count::before,
.wpdef-store-category-tiles .wpdef-term-count::before,
.wpdef-store-category-tiles .wc-block-product-categories-list-item-count::after,
.wpdef-store-category-tiles .wpdef-term-count::after {
	content: none;
}

.wpdef-store-category-tiles__all:has([aria-current="page"]),
.wpdef-store-category-tiles .wc-block-product-categories-list-item:has([aria-current="page"]),
.wpdef-store-category-tiles .cat-item:has([aria-current="page"]) {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
}

/* Forced colours drop the fill that marks the open category, so the system's
   selection colours mark it, unadjusted so the text keeps no backplate. */
@media (forced-colors: active) {
	.wpdef-store-category-tiles__all:has([aria-current="page"]),
	.wpdef-store-category-tiles .wc-block-product-categories-list-item:has([aria-current="page"]),
	.wpdef-store-category-tiles .cat-item:has([aria-current="page"]) {
		background: SelectedItem;
		border-color: SelectedItem;
		color: SelectedItemText;
		forced-color-adjust: none;
	}
}

.wpdef-store-category-tiles__all:hover,
.wpdef-store-category-tiles .wc-block-product-categories-list-item:hover,
.wpdef-store-category-tiles .cat-item:hover {
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 3px 10px color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent);
}

/* The link's ::after covers the whole pill, so the pill carries the theme's
   two-colour focus indicator and the label no longer gets a box of its own. */
.wpdef-store-category-tiles__all:focus-within,
.wpdef-store-category-tiles .wc-block-product-categories-list-item:focus-within,
.wpdef-store-category-tiles .cat-item:focus-within {
	box-shadow: 0 0 0 6px var(--wp--preset--color--accent);
	outline: 3px solid var(--wp--preset--color--white);
	outline-offset: 2px;
}

.wpdef-store-category-tiles__all > a:focus-visible,
.wpdef-store-category-tiles .wc-block-product-categories-list-item > a:focus-visible,
.wpdef-store-category-tiles .cat-item > a:focus-visible {
	box-shadow: none;
	outline: none;
}

.wpdef-main--store .wpdef-store-sidebar__title,
.wpdef-main--store .wpdef-store-sidebar legend.screen-reader-text {
	font-size: 0.875rem;
	margin-block-end: 0.5rem;
}

.wpdef-store-price-filter,
.wpdef-main--store .wpdef-store-categories {
	border-top: 1px solid var(--wp--preset--color--content-border);
	padding-block-start: 1.25rem;
}

.wpdef-main--store .wpdef-product-card__price,
.wpdef-main--store .wpdef-product-card__price ins {
	color: var(--wp--preset--color--accent);
	font-size: 1.0625rem;
}

@media (max-width: 600px) {

	.wpdef-store-category-tiles__all,
	.wpdef-store-category-tiles .wc-block-product-categories-list-item,
	.wpdef-store-category-tiles .cat-item {
		gap: 0.5rem;
		padding: 0.5rem 0.875rem;
	}

}

.wpdef-main--cart .wc-block-cart .wc-block-cart__main,
.wpdef-main--cart .wc-block-cart .wc-block-cart__sidebar {
	margin: 0;
	min-width: 0;
	padding: 0;
	width: 100%;
}

.wpdef-main--cart .wc-block-cart-item__prices,
.wpdef-main--cart .wc-block-cart-item__prices .wc-block-components-product-price {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}