/**
 * Only what theme.json cannot express: the light/shade registers, the
 * photographic hero, the naming preview, and the decorative motifs.
 * Every colour and measure still comes from a theme.json token.
 *
 * The design idea, so nobody flattens it back out later: Andalusian light is
 * a contrast between hard sun on a lime-washed wall and the deep cool shade of
 * the patio you stand in to look at it. The page alternates between those two
 * registers — `.fdmc-sol` and `.fdmc-sombra` — instead of floating everything
 * on one flat cream. The shade sections exist to make the plaques glow;
 * cream-on-cream was flattening the very thing the shop sells.
 */

/* --- The two registers. ------------------------------------------------ */

/*
 * theme.json emits its element styles inside :where(), which has zero
 * specificity, so a single class here reliably wins without !important.
 */
.fdmc-sombra {
	background-color: var(--wp--preset--color--sombra);
	color: var(--wp--preset--color--pergamino);
}
.fdmc-sombra :is(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--blanco);
}
.fdmc-sombra a:not(.wp-element-button) {
	color: var(--wp--preset--color--oro);
}
.fdmc-sombra a:not(.wp-element-button):hover,
.fdmc-sombra a:not(.wp-element-button):focus-visible {
	color: var(--wp--preset--color--blanco);
}
.fdmc-sombra .fdmc-eyebrow {
	color: var(--wp--preset--color--oro);
}
/* On shade, the filled cobalto button disappears — invert it to cal. */
.fdmc-sombra .wp-element-button {
	background-color: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--sombra);
}
.fdmc-sombra .wp-element-button:hover {
	background-color: var(--wp--preset--color--oro);
	color: var(--wp--preset--color--sombra);
}

.fdmc-sol {
	background-color: var(--wp--preset--color--pergamino);
	color: var(--wp--preset--color--tinta);
}

/* Generous vertical rhythm; sections earn their space. */
.fdmc-band {
	padding-block: clamp(3.5rem, 9vw, var(--wp--preset--spacing--70));
}

/*
 * --- The grid line. ----------------------------------------------------
 *
 * One rule, measured and enforced: every section's eyebrow and heading
 * begin on the left edge of the alignwide box. The markup recipe is
 *
 *   group alignfull fdmc-{sol|sombra} fdmc-band  (layout: constrained)
 *     group alignwide (layout: constrained, justifyContent: left)
 *       eyebrow / heading / lead        ← land on the grid line
 *     [alignwide content: columns, grids, collections]
 *
 * WordPress computes that edge as max(root padding, (body − wideSize) / 2).
 * Only viewport-anchored elements that cannot use alignwide (the hero's
 * split panel) need to reproduce it by hand — see .fdmc-hero__panel.
 */

/*
 * The homepage opens on a photograph, so nothing may sit between the header
 * and the hero. Block themes give <main> a default top margin, which showed
 * as a strip of page background under the header.
 */
.wp-site-blocks > main {
	margin-block-start: 0;
}
.wp-site-blocks > main > .fdmc-hero:first-child {
	margin-block-start: 0;
}

/*
 * Full-bleed bands carry their own vertical padding, so the global block gap
 * between two of them just shows a stripe of page background — which is what
 * the alternating light/shade rhythm is meant to replace. Scoped to adjacent
 * full-width siblings so ordinary page content keeps its spacing. The same
 * slit appeared on lienzo pages (band content lives inside post-content) and
 * between a closing dark band and the footer, so those seams are closed too.
 */
.wp-site-blocks main > .alignfull + .alignfull,
.wp-site-blocks main .wp-block-post-content > .alignfull + .alignfull,
.wp-site-blocks main > .wp-block-post-content.alignfull,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* --- The eyebrow: Cinzel demoted from display to signage. -------------- */

/*
 * Trajan capitals are lettering for signs and lintels, not for headlines.
 * Used small and widely tracked they do the job they were cut for, and they
 * leave the display voice to Garamond, which is far warmer at scale.
 */
.fdmc-eyebrow {
	color: var(--wp--preset--color--terracota);
	font-family: var(--wp--preset--font-family--cinzel);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.22em;
	line-height: 1.4;
	margin-block-end: var(--wp--preset--spacing--20);
	text-transform: uppercase;
}

/* Garamond italic is the romantic voice — used for display, never for UI. */
.fdmc-display {
	font-style: italic;
	font-weight: 500;
}

/* --- The hero: photography first. -------------------------------------- */

/*
 * A split rather than type-on-photo. Text laid over a photograph is a
 * contrast gamble that this image loses — a lime-washed wall in low sun is
 * nearly white in places, and no scrim strong enough to fix that leaves the
 * photograph worth showing. The panel is the shade you stand in; the
 * photograph is the light you look at. Contrast is then a fixed pairing
 * rather than a hope.
 */
.fdmc-hero {
	display: grid;
	margin-block-start: 0;
}

.fdmc-hero__media {
	aspect-ratio: 4 / 3;
	block-size: 100%;
	display: block;
	inline-size: 100%;
	object-fit: cover;
	object-position: center 45%;
}

.fdmc-hero__panel {
	background-color: var(--wp--preset--color--sombra);
	box-sizing: border-box;
	color: var(--wp--preset--color--blanco);
	display: grid;
	gap: var(--wp--preset--spacing--20);
	inline-size: 100%;
	justify-items: start;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}

@media (min-width: 56rem) {
	.fdmc-hero {
		grid-template-columns: minmax(0, 41%) minmax(0, 59%);
		min-block-size: min(80svh, 42rem);
	}
	.fdmc-hero__panel {
		align-content: center;
		order: 1;
		padding-block: var(--wp--preset--spacing--50);
		/*
		 * The panel is viewport-anchored (its left edge is the viewport's), so
		 * it cannot sit in the alignwide flow — its text joins the grid line by
		 * construction instead. The panel spans 41% of the hero, so 100% of the
		 * panel is 0.41 × body; dividing by 0.82 yields body ÷ 2, and
		 * subtracting half the wide size lands exactly on (body − wide) / 2 —
		 * the same edge WordPress computes for alignwide. The 0.82 constant is
		 * 2 × the 41% column: change one, change both.
		 */
		padding-inline-start: max(var(--wp--preset--spacing--30), calc(100% / 0.82 - var(--wp--style--global--wide-size) / 2));
		padding-inline-end: clamp(2rem, 4vw, 4rem);
	}
	.fdmc-hero__media {
		aspect-ratio: auto;
		order: 2;
	}
}

.fdmc-hero__panel :is(h1, h2) {
	color: var(--wp--preset--color--blanco);
	margin: 0;
	text-wrap: balance;
}

.fdmc-hero__lead {
	color: var(--wp--preset--color--pergamino);
	margin: 0;
	max-inline-size: 40ch;
}

.fdmc-hero__panel .fdmc-eyebrow {
	color: var(--wp--preset--color--oro);
	margin-block-end: 0;
}

.fdmc-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin-block-start: var(--wp--preset--spacing--20);
}

/* --- The signature: writing your house's name onto a blank plaque. ----- */

/*
 * The customisable plaques ship as a pair — one blank, one carrying a sample
 * name — which is exactly the material for showing what the shop actually
 * sells: not a tile, but your house having a name. The script face appears
 * here and essentially nowhere else, because this is the one moment that
 * earns it.
 */
/*
 * The section header (eyebrow + heading) sits above this grid, on the grid
 * line like every other band; this grid holds only the plate and the
 * control column, spanning the wide box.
 */
.fdmc-naming {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

@media (min-width: 56rem) {
	.fdmc-naming {
		align-items: center;
		gap: var(--wp--preset--spacing--50);
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	}
}

.fdmc-naming__plate {
	box-shadow: 0 18px 48px -24px color-mix(in srgb, var(--wp--preset--color--tinta) 55%, transparent);
	display: grid;
	isolation: isolate;
	position: relative;
}

.fdmc-naming__plate img {
	block-size: auto;
	display: block;
	grid-area: 1 / 1;
	inline-size: 100%;
}

/*
 * Positioned over this plaque's clear panel specifically, which sits left of
 * centre — the right third of the design is a painted landscape. The inset is
 * asymmetric for that reason rather than by oversight, so swapping the image
 * means re-measuring these percentages against the new artwork.
 */
.fdmc-naming__text {
	align-content: center;
	color: var(--wp--preset--color--cobalto);
	display: grid;
	font-family: var(--wp--preset--font-family--rotulo);
	font-size: clamp(1.05rem, 3.2vw, 2.05rem);
	grid-area: 1 / 1;
	hyphens: none;
	line-height: 1.22;
	overflow-wrap: break-word;
	padding-block-end: 3%;
	padding-inline: 19% 41%;
	place-self: center;
	text-align: center;
	text-wrap: balance;
	z-index: 1;
}

/*
 * Grid gap owns the rhythm here, so the block-level margins that would
 * otherwise stack on top of it are cleared. Without this the heading and the
 * paragraph sit a full block-gap plus a paragraph margin apart.
 */
.fdmc-naming__control {
	display: grid;
	gap: var(--wp--preset--spacing--20);
}

.fdmc-naming__control > * {
	margin-block: 0;
}

.fdmc-naming__control label {
	font-family: var(--wp--preset--font-family--cinzel);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.fdmc-naming__control input {
	background: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--preset--color--cobalto);
	box-sizing: border-box;
	font-family: var(--wp--preset--font-family--garamond);
	font-size: var(--wp--preset--font-size--large);
	inline-size: 100%;
	max-inline-size: 100%;
	padding: 0.6em 0.7em;
}

.fdmc-naming__note {
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
	opacity: 0.75;
}

/* --- Editorial gallery: photography edge to edge. ---------------------- */

/*
 * Two rows of unequal height rather than a uniform strip: the deep row reads
 * as the wall you are looking at, the shallow one as a glimpse past it.
 * Deliberately not a masonry span — six items across four columns with two
 * double-height cells cannot fill, and leaves a visible hole.
 */
.fdmc-galeria {
	display: grid;
	gap: 2px;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 13rem;
}

@media (min-width: 56rem) {
	.fdmc-galeria {
		grid-template-columns: repeat(3, 1fr);
		grid-auto-rows: auto;
		grid-template-rows: 24rem 17rem;
	}
}

.fdmc-galeria figure {
	margin: 0;
	min-block-size: 0;
	overflow: hidden;
}

.fdmc-galeria img {
	block-size: 100%;
	display: block;
	inline-size: 100%;
	object-fit: cover;
}

.fdmc-rule {
	background-image: url("../img/tile-rule.svg");
	background-repeat: repeat-x;
	background-size: auto 24px;
	block-size: 24px;
	inline-size: 100%;
}

.fdmc-rosette::before,
.fdmc-rosette::after {
	background-image: url("../img/rosette.svg");
	background-size: contain;
	block-size: 2rem;
	content: "";
	display: inline-block;
	inline-size: 2rem;
	vertical-align: middle;
}
.fdmc-rosette::before { margin-inline-end: 0.75rem; }
.fdmc-rosette::after  { margin-inline-start: 0.75rem; }

/* Crackle glaze: a whisper, not a texture pack. */
.fdmc-crackle {
	background-image:
		linear-gradient(115deg, color-mix(in srgb, var(--wp--preset--color--tinta) 2.5%, transparent) 1px, transparent 1px),
		linear-gradient(20deg, color-mix(in srgb, var(--wp--preset--color--tinta) 2%, transparent) 1px, transparent 1px);
	background-size: 37px 41px, 53px 29px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/*
 * theme.json's `elements.button:focus` gold ring only reaches
 * `.wp-element-button` — theme.json has no "input" element type to style
 * generic form fields the same way, so text/email/textarea/select/radio/
 * checkbox controls were falling back to the browser's default (dark)
 * focus outline instead of the brand's gold one. Verified during the Task
 * 17 keyboard-only pass through the personalisation fieldset and the
 * enquiry form: every button already got the gold ring, no field did.
 * `:focus-visible` (not `:focus`) so a mouse click doesn't draw a ring a
 * keyboard user didn't ask for.
 */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 3px solid var(--wp--preset--color--oro);
	outline-offset: 2px;
}

/* --- Header & footer: the site chrome frame. --- */

/*
 * The header sits on shade so the photography below it reads as light. It
 * also has to hold nine items on one line at 1440px — six links, the language
 * switcher, the wordmark and the cart — which the previous cream header did
 * not, wrapping the nav onto a second row. Everything here is sized down and
 * tracked in to buy that room back rather than dropping a destination.
 */
.fdmc-header__bar {
	column-gap: var(--wp--preset--spacing--30);
}

/*
 * Badge + wordmark lockup. The gap is fixed rather than the flex default so
 * the pair reads as one mark, and the group refuses to shrink so the nav —
 * already sized to hold nine items at 1440px — squeezes before the brand
 * does. The image sizes itself via width/height attributes; display:block
 * only removes the inline baseline gap under it.
 */
.fdmc-marca {
	column-gap: 0.75rem;
	flex-shrink: 0;
}
.fdmc-marca__logo img {
	display: block;
}

/*
 * Below 600px the bar — wordmark, hamburger, account, cart on a nowrap
 * row — fits a 390px viewport with nothing to spare; the badge's 60px
 * pushed the cart off-screen. The wordmark alone carries the brand there,
 * as it did before the badge existed.
 */
@media (max-width: 599px) {
	.fdmc-marca__logo {
		display: none;
	}
}

/* The wordmark is the one place Cinzel Decorative is used. */
.fdmc-wordmark,
.fdmc-wordmark a {
	font-family: var(--wp--preset--font-family--cinzel-decorative);
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-decoration: none;
	text-wrap: nowrap;
}

/*
 * Sized down hard so nine items — six destinations, the language switcher,
 * the wordmark and the cart — hold one line at 1440px. The navigation block
 * inherits the global `medium` size otherwise, which is what pushed the menu
 * onto a second row in the previous build and a third in the first pass of
 * this one. Targeting the item link as well as the container because the
 * block sets sizes at several levels.
 */
.fdmc-header .wp-block-navigation,
.fdmc-header .wp-block-navigation .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--cinzel);
	font-size: clamp(0.72rem, 0.62rem + 0.28vw, 0.86rem);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.fdmc-header .wp-block-navigation__container {
	column-gap: clamp(0.7rem, 1.35vw, 1.5rem);
	row-gap: 0.35rem;
}

.fdmc-header .wp-block-navigation a {
	color: var(--wp--preset--color--pergamino);
	text-decoration: none;
}
.fdmc-header .wp-block-navigation a:hover,
.fdmc-header .wp-block-navigation a:focus-visible,
.fdmc-header .wp-block-navigation .current-menu-item > a {
	color: var(--wp--preset--color--oro);
}

/* The language switcher is a trailing utility, not a seventh destination. */
.fdmc-header .wp-block-navigation .wp-block-polylang-navigation-language-switcher {
	margin-inline-start: clamp(0.35rem, 0.9vw, 1rem);
	opacity: 0.82;
}

/* The mobile overlay inherits the shade rather than opening white. */
.fdmc-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--sombra);
	color: var(--wp--preset--color--pergamino);
}
.fdmc-header .wp-block-navigation__responsive-container.is-menu-open a {
	color: var(--wp--preset--color--pergamino);
	font-size: var(--wp--preset--font-size--large);
}

/* Cart glyph and count, legible on shade. */
.fdmc-header .wc-block-mini-cart__button {
	color: var(--wp--preset--color--pergamino);
}
.fdmc-header .wc-block-mini-cart__button:hover {
	color: var(--wp--preset--color--oro);
}

/*
 * theme.json's global link colours (cobalto text, terracota hover) are tuned
 * for pergamino/blanco backgrounds. On the shade footer they either
 * disappear or fail contrast, so the footer keeps its own verified pairing.
 */
.fdmc-footer a {
	color: var(--wp--preset--color--pergamino);
	text-decoration: none;
}
.fdmc-footer a:hover,
.fdmc-footer a:focus {
	color: var(--wp--preset--color--oro);
}

.fdmc-footer-columns {
	column-gap: var(--wp--preset--spacing--50);
	row-gap: var(--wp--preset--spacing--30);
}

/* Stands in for the old text brand name at the top of the brand column. */
.fdmc-footer-logo {
	margin-block: 0 1rem;
}
.fdmc-footer-logo img {
	display: block;
}

.fdmc-footer-heading {
	font-family: var(--wp--preset--font-family--cinzel);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/*
 * The footer's link lists are navigation, not prose — browser list markers
 * were rendering as raw bullets on the shade background.
 */
.fdmc-footer ul.wp-block-list {
	list-style: none;
	margin: 0;
	padding-inline-start: 0;
}
.fdmc-footer ul.wp-block-list li {
	margin-block-end: 0.4rem;
}

/* --- Personalisation fields: product page → cart → checkout. --- */

.fdmc-personalisation {
	border: 1px solid var(--wp--preset--color--oro);
	margin-block: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30);
}
.fdmc-personalisation legend {
	color: var(--wp--preset--color--cobalto);
	font-family: var(--wp--preset--font-family--cinzel);
	letter-spacing: 0.06em;
	padding-inline: 0.5em;
	text-transform: uppercase;
}
.fdmc-personalisation__field { display: grid; gap: 0.35rem; }
.fdmc-personalisation__field input {
	border: 1px solid var(--wp--preset--color--cobalto);
	background: var(--wp--preset--color--blanco);
	padding: 0.6em 0.75em;
	inline-size: 100%;
}
.fdmc-personalisation__help {
	color: var(--wp--preset--color--tinta);
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.8;
}

/* --- Custom-design enquiry form. --- */

.fdmc-enquiry__step {
	border: 1px solid var(--wp--preset--color--oro);
	margin-block: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30);
}
.fdmc-enquiry__step legend {
	color: var(--wp--preset--color--cobalto);
	font-family: var(--wp--preset--font-family--cinzel);
	letter-spacing: 0.06em;
	padding-inline: 0.5em;
	text-transform: uppercase;
}
.fdmc-enquiry__errors {
	background: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--preset--color--tinta);
	color: var(--wp--preset--color--tinta);
	margin-block-end: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30);
}
.fdmc-enquiry__sent {
	background: var(--wp--preset--color--pergamino);
	border: 1px solid var(--wp--preset--color--oro);
	padding: var(--wp--preset--spacing--30);
}
.fdmc-enquiry__nav {
	display: flex;
	gap: var(--wp--preset--spacing--20);
	justify-content: flex-end;
	margin-block-start: var(--wp--preset--spacing--30);
}

/*
 * Honeypot: kept in normal document/tab flow but visually off-screen, never
 * `type="hidden"` or `display:none` — both of those are what bots filter for.
 */
.fdmc-enquiry__honeypot {
	position: absolute;
	left: -9999px;
}

/*
 * --- Cart & checkout: the personalisation line item. ---
 *
 * A painter reads this row as a work order, not marketing copy: the house
 * name a customer typed on the product page (Task 11) surfaces here as
 * WooCommerce's own `wc-block-components-product-details` meta row, on the
 * Cart and Checkout blocks we deliberately did not rewrite. Small caps in
 * Cinzel make it read as a specification rather than an afterthought.
 *
 * Scoped to `.wc-block-cart`/`.wc-block-checkout` ancestors — WooCommerce
 * reuses this same component class inside the Mini Cart drawer, and an
 * unscoped selector was leaking the Cinzel small-caps treatment into the
 * drawer too, where the surrounding text is plain body copy.
 */
.wc-block-cart .wc-block-components-product-details,
.wc-block-checkout .wc-block-components-product-details {
	font-family: var(--wp--preset--font-family--cinzel);
	font-variant-caps: small-caps;
	letter-spacing: 0.03em;
}
.wc-block-cart .wc-block-components-product-details__name,
.wc-block-checkout .wc-block-components-product-details__name {
	color: var(--wp--preset--color--cobalto);
}

/* Order summary panel: a quieter surface than the pergamino page background. */
.wc-block-cart__sidebar,
.wc-block-checkout__sidebar {
	background-color: var(--wp--preset--color--pergamino-oscuro);
	padding: var(--wp--preset--spacing--40);
}

/* --- Product cards: one baseline per row. ------------------------------ */

/*
 * The grid stretches rows, so every card in a row is equal height; the card
 * itself is a column with the button pinned to its bottom edge. That is
 * what puts every button in a row on one line and one baseline, whatever
 * the title length — the defect this replaces had buttons at three heights
 * and three widths in a single row.
 */
.wp-block-woocommerce-product-template > li {
	display: flex;
	flex-direction: column;
}

.wp-block-woocommerce-product-template > li .wp-block-post-title {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.35;
	margin-block: var(--wp--preset--spacing--20) 0.35rem;
}
.wp-block-woocommerce-product-template > li .wp-block-post-title a {
	color: var(--wp--preset--color--cobalto);
	text-decoration: none;
}
.wp-block-woocommerce-product-template > li .wp-block-post-title a:hover {
	color: var(--wp--preset--color--terracota);
}

.wp-block-woocommerce-product-template > li .wc-block-components-product-price {
	color: var(--wp--preset--color--tinta);
}

.wp-block-woocommerce-product-template > li .wc-block-components-product-button {
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--20);
}
.wp-block-woocommerce-product-template > li .wc-block-components-product-button .wp-block-button__link {
	inline-size: 100%;
	text-align: center;
}

/* Hover: a small lift, nothing more — the buttons already answer on hover. */
@media (prefers-reduced-motion: no-preference) {
	.wp-block-woocommerce-product-template > li {
		transition: transform 0.2s ease, box-shadow 0.2s ease;
	}
	.wp-block-woocommerce-product-template > li:hover {
		box-shadow: 0 14px 34px -20px color-mix(in srgb, var(--wp--preset--color--tinta) 45%, transparent);
		transform: translateY(-4px);
	}
}

/* --- Catalogue tabs: the three ways of buying. ------------------------- */

/*
 * Links styled as tabs, not JavaScript state: the three destinations are
 * real pages, aria-current marks where you are, and everything works with
 * JS disabled. Signage voice — this is wayfinding, not decoration.
 */
.fdmc-tabs {
	border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--cobalto) 22%, transparent);
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1rem, 2.5vw, 2.25rem);
}

.fdmc-tabs a {
	border-block-end: 3px solid transparent;
	color: color-mix(in srgb, var(--wp--preset--color--tinta) 78%, transparent);
	display: inline-block;
	font-family: var(--wp--preset--font-family--cinzel);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.1em;
	margin-block-end: -1px;
	padding-block: 0.65em;
	text-decoration: none;
	text-transform: uppercase;
}

.fdmc-tabs a:hover,
.fdmc-tabs a:focus-visible {
	color: var(--wp--preset--color--terracota);
}

.fdmc-tabs a[aria-current="page"] {
	border-block-end-color: var(--wp--preset--color--oro);
	color: var(--wp--preset--color--cobalto);
}

/* The one-line offering intro under the tabs, kept to a readable measure. */
.fdmc-tab-intro,
.wp-block-term-description {
	max-inline-size: 52ch;
}

/* --- Shop toolbar: count, sort and the size filter in one quiet row. --- */

.fdmc-toolbar {
	align-items: center;
	border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--tinta) 14%, transparent);
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	justify-content: space-between;
	padding-block-end: var(--wp--preset--spacing--20);
}

.fdmc-toolbar .wc-block-product-results-count,
.fdmc-toolbar .wc-block-catalog-sorting {
	margin: 0;
}

/*
 * The size filter: three always-visible toggle links (the disclosure this
 * replaces hid three options behind a click). Same Cinzel voice as the
 * tabs, but pill-shaped so they read as filters, not navigation.
 */
.fdmc-size-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.fdmc-size-filter__button {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--cobalto) 35%, transparent);
	border-radius: 999px;
	color: var(--wp--preset--color--cobalto);
	display: inline-block;
	font-family: var(--wp--preset--font-family--cinzel);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.08em;
	padding: 0.3rem 0.9rem;
	text-decoration: none;
	white-space: nowrap;
}
.fdmc-size-filter__button:hover,
.fdmc-size-filter__button:focus-visible {
	border-color: var(--wp--preset--color--terracota);
	color: var(--wp--preset--color--terracota);
}
.fdmc-size-filter__button.is-active {
	background: var(--wp--preset--color--cobalto);
	border-color: var(--wp--preset--color--cobalto);
	color: var(--wp--preset--color--blanco);
}
.fdmc-size-filter__button.is-active:hover,
.fdmc-size-filter__button.is-active:focus-visible {
	background: var(--wp--preset--color--terracota);
	border-color: var(--wp--preset--color--terracota);
	color: var(--wp--preset--color--blanco);
}

/* --- Prose pages: the readable shape for legal text. ------------------- */

.fdmc-page-header {
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
}

/* --- Motion: the evening patio coming to life. ------------------------- */

/*
 * Load sequence, CSS only: the hero photograph breathes — a slow settle
 * from a slight zoom — while the panel's lines rise in, one after another.
 * The image is the LCP element and is never opacity-animated; it paints
 * immediately and the scale rides on top. The global reduced-motion block
 * at the top of this file zeroes all of it.
 */
.fdmc-hero {
	overflow: hidden;
}

/*
 * The slow settle on the hero photograph is desktop-only, and that is a
 * measured decision, not a stylistic one: on mobile it cost ~5 Lighthouse
 * performance points (76 vs 80–90 A/B-tested with everything else equal)
 * for an effect that barely reads at 390px — while desktop sits at 99 with
 * headroom, and a slow 9s breathe is exactly what a large screen shows well.
 */
@media (prefers-reduced-motion: no-preference) and (min-width: 56rem) {
	.fdmc-hero__media {
		animation: fdmc-hero-breathe 9s cubic-bezier(0.22, 1, 0.36, 1) both;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.fdmc-hero__panel > * {
		animation: fdmc-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
	}
	.fdmc-hero__panel > :nth-child(1) { animation-delay: 0.15s; }
	.fdmc-hero__panel > :nth-child(2) { animation-delay: 0.3s; }
	.fdmc-hero__panel > :nth-child(3) { animation-delay: 0.45s; }
	.fdmc-hero__panel > :nth-child(4) { animation-delay: 0.6s; }

	.fdmc-galeria figure img {
		transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
	}
	.fdmc-galeria figure:hover img {
		transform: scale(1.04);
	}
}

@keyframes fdmc-hero-breathe {
	from { transform: scale(1.05); }
	to   { transform: scale(1); }
}

@keyframes fdmc-rise {
	from { opacity: 0; transform: translateY(14px); }
}

/*
 * Scroll reveals. The resting CSS state is fully visible: the hidden
 * "init" class is applied by assets/js/motion.js, which bails under
 * reduced motion and never runs without JS — so no-JS and reduced-motion
 * visitors always see a complete page. Transform and opacity only; no
 * layout movement, no CLS.
 */
.fdmc-anima--init {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.fdmc-anima--in {
	opacity: 1;
	transform: none;
}

/*
 * The lienzo template's document h1 is real for assistive tech and hidden
 * visually — WordPress core does not reliably ship .screen-reader-text
 * styles to block-theme front ends, so the theme defines it.
 */
.screen-reader-text {
	clip-path: inset(50%);
	block-size: 1px;
	inline-size: 1px;
	margin: -1px;
	overflow: hidden;
	position: absolute;
	word-wrap: normal;
}

/* --- Header account icon and flag switcher. ---------------------------- */

.fdmc-header :is(.wc-block-customer-account, .wp-block-woocommerce-customer-account) a,
.fdmc-header :is(.wc-block-customer-account, .wp-block-woocommerce-customer-account) svg {
	color: var(--wp--preset--color--pergamino);
	fill: currentColor;
}
.fdmc-header :is(.wc-block-customer-account, .wp-block-woocommerce-customer-account) a:hover,
.fdmc-header :is(.wc-block-customer-account, .wp-block-woocommerce-customer-account) a:focus-visible {
	color: var(--wp--preset--color--oro);
}

/* Polylang's flag images: align with the nav text, soften on shade. */
.fdmc-header .wp-block-navigation .pll-navigation-language-switcher img,
.fdmc-header .wp-block-navigation img.flag {
	display: inline-block;
	vertical-align: middle;
}

/* --- Footer brand column. ---------------------------------------------- */

.fdmc-footer-brand address {
	font-style: normal;
	margin-block-start: var(--wp--preset--spacing--20);
}

/*
 * The pending-address line is deliberately dimmer than real content — it is
 * a placeholder awaiting the business's registered address, and must not
 * read as a published fact.
 */
.fdmc-footer-address__pending {
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.55;
}