/* FalahFit — front-end styles.
 *
 * Design tokens (colour, type, spacing) live in theme.json. This file holds
 * the section layouts the block system cannot express on its own: the
 * marquees, the full-bleed image bands, the countdown and the footer.
 *
 * Layout reference is the 1920px Figma frame; fixed values from it are
 * expressed as clamp() against that width so the page scales down rather
 * than snapping at breakpoints.
 */

/* Without this, any element combining width:100% with side padding computes
   wider than its parent — which pushed every .ff-shell past the viewport. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

:root {
	--ff-ease: cubic-bezier(.4, 0, .2, 1);
	--ff-speed: 240ms;
	--ff-gutter: clamp(1.25rem, 3.18vw, 3.8125rem); /* 61/1920 */
	--ff-card-gap: clamp(.5rem, .94vw, 1.125rem);   /* 18/1920 */
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

*:focus-visible {
	outline: 2px solid var(--wp--preset--color--mulberry);
	outline-offset: 3px;
}

/* ------------------------------------------------------------------ *
 * Shared pieces
 * ------------------------------------------------------------------ */

.ff-shell {
	width: 100%;
	max-width: 1920px;
	margin-inline: auto;
	padding-inline: var(--ff-gutter);
}

/* Pill button, carried over from the template component set. */
.ff-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(.6875rem, .63vw, .75rem);
	font-weight: 400;
	letter-spacing: .13em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 1.125rem 1.875rem;
	border: 1px solid currentColor;
	border-radius: 150px;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: background var(--ff-speed) var(--ff-ease),
	            color var(--ff-speed) var(--ff-ease),
	            border-color var(--ff-speed) var(--ff-ease);
}
.ff-btn:hover,
.ff-btn:focus-visible {
	background: var(--wp--preset--color--nude);
	border-color: var(--wp--preset--color--nude);
	color: var(--wp--preset--color--mulberry);
}
.ff-btn--solid {
	background: var(--wp--preset--color--mulberry);
	border-color: var(--wp--preset--color--mulberry);
	color: var(--wp--preset--color--porcelain);
}

.ff-section-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.25rem, 4.27vw, 5.125rem); /* 82/1920 */
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-align: center;
	margin: 0;
}

/* ------------------------------------------------------------------ *
 * Marquees — announcement bar, slogan ticker, testimonials
 * ------------------------------------------------------------------ */

.ff-marquee {
	overflow: hidden;
	position: relative;
	display: flex;
}
.ff-marquee__track {
	display: flex;
	flex: none;
	align-items: center;
	gap: var(--ff-marquee-gap, 5.625rem);
	padding-inline-end: var(--ff-marquee-gap, 5.625rem);
	min-width: 100%;
	animation: ff-scroll var(--ff-marquee-duration, 40s) linear infinite;
}
.ff-marquee:hover .ff-marquee__track { animation-play-state: paused; }

@keyframes ff-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-100%, 0, 0); }
}

/* Announcement bar */
.ff-announce {
	background: var(--wp--preset--color--mulberry-deep);
	color: rgba(251, 246, 242, .7);
	font-size: .8125rem;
	letter-spacing: .02em;
	padding-block: .75rem;
	--ff-marquee-duration: 48s;
}
.ff-announce a {
	color: var(--wp--preset--color--porcelain);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: .2em;
}
.ff-announce .ff-rule {
	width: 50px;
	height: 1px;
	background: currentColor;
	opacity: .4;
	flex: none;
}

/* ------------------------------------------------------------------ *
 * Header — nav left, centred wordmark, actions right, over the hero
 * ------------------------------------------------------------------ */

.ff-header {
	position: absolute;
	inset-inline: 0;
	/* Required: the hero is a centred flex container, so an abspos child with
	   no `top` resolves to the centred static position, not the top edge. */
	top: 0;
	z-index: 10;
	padding-block: clamp(1rem, 1.9vw, 2.3125rem);
	color: var(--wp--preset--color--porcelain);
}
.ff-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-left: -8px;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}
.ff-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1.5rem;
}
.ff-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(.75rem, 1.4vw, 1.6875rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ff-nav a {
	font-size: clamp(.75rem, .78vw, .9375rem);
	font-weight: 500;
	letter-spacing: .03em;
	text-transform: uppercase;
	text-decoration: none;
	color: inherit;
}
.ff-nav a:hover { color: var(--wp--preset--color--nude); }

.ff-wordmark {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.5rem, 2vw, 2.375rem);
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	color: inherit;
	justify-self: center;
	white-space: nowrap;
}
.ff-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: clamp(.75rem, 1.1vw, 1.375rem);
}
.ff-actions a { color: inherit; display: inline-flex; }
.ff-actions svg { width: 21px; height: 21px; }

/* ------------------------------------------------------------------ *
 * Hero
 * ------------------------------------------------------------------ */

.ff-hero {
	position: relative;
	min-height: clamp(30rem, 56.4vw, 67.6875rem); /* 1083/1920 */
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--wp--preset--color--mulberry-deep);
	color: var(--wp--preset--color--porcelain);
}
.ff-hero__media {
	position: absolute;
	inset: 0;
}
.ff-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ff-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(49, 1, 20, .55) 0%, rgba(49, 1, 20, .15) 55%, rgba(49, 1, 20, .35) 100%);
}
.ff-hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: center;
	gap: clamp(2rem, 5vw, 6rem);
	width: 100%;
}
.ff-hero__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(3rem, 7.19vw, 8.625rem); /* 138/1920 */
	font-weight: 400;
	font-style: italic;
	line-height: .86;
	letter-spacing: -.01em;
	text-transform: uppercase;
	text-align: right;
	margin: 0;
	text-wrap: balance;
}
.ff-hero__copy {
	font-size: clamp(.875rem, 1.09vw, 1.3125rem);
	letter-spacing: .14em;
	text-transform: uppercase;
	line-height: 1.5;
	max-width: min(27rem, 100%);
	margin: 0 0 clamp(1.5rem, 2.6vw, 3rem);
}
.ff-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ------------------------------------------------------------------ *
 * Product grid
 * ------------------------------------------------------------------ */

.ff-products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--ff-card-gap);
}
.ff-product__media {
	display: block;
	aspect-ratio: 436 / 576;
	max-width: 100%;
	overflow: hidden;
	background: var(--wp--preset--color--blush-sand);
}
.ff-product__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms var(--ff-ease);
}
.ff-product:hover .ff-product__media img { transform: scale(1.04); }
.ff-product__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1rem, 1.15vw, 1.375rem);
	line-height: 1.25;
	margin: 1.25rem 0 .5rem;
}
.ff-product__name a { text-decoration: none; color: inherit; }
.ff-product__price {
	font-size: clamp(.875rem, .83vw, 1rem);
	letter-spacing: .03em;
	font-variant-numeric: tabular-nums;
	margin: 0;
	color: var(--wp--preset--color--muted);
}

/* Bands */
.ff-band--dark {
	background: var(--wp--preset--color--mulberry);
	color: var(--wp--preset--color--porcelain);
	padding-block: clamp(2.5rem, 5.5vw, 6.5rem);
}
.ff-band--dark .ff-product__price { color: rgba(251, 246, 242, .72); }
.ff-band--dark .ff-section-title { margin-bottom: clamp(2rem, 3.7vw, 4.4375rem); }

.ff-band--light {
	background: var(--wp--preset--color--porcelain);
	color: var(--wp--preset--color--ink);
	padding-block: clamp(2.5rem, 5.5vw, 6.5rem);
}
.ff-band--light .ff-section-title { margin-bottom: clamp(2rem, 3.7vw, 4.4375rem); }

/* ------------------------------------------------------------------ *
 * Category tiles — 2x2, image with gradient and overlaid copy
 * ------------------------------------------------------------------ */

.ff-categories {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ff-category {
	position: relative;
	aspect-ratio: 960 / 1031;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: clamp(1.5rem, 6.5vw, 7.8125rem) clamp(1.5rem, 3.4vw, 4.0625rem);
	overflow: hidden;
	color: var(--wp--preset--color--porcelain);
	background: var(--wp--preset--color--mulberry-deep);
}
.ff-category__media { position: absolute; inset: 0; }
.ff-category__media img { width: 100%; height: 100%; object-fit: cover; }
.ff-category__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(49, 1, 20, 0) 35%, rgba(49, 1, 20, .72) 100%);
}
.ff-category__body { position: relative; z-index: 2; max-width: min(34rem, 100%); }
.ff-category__title {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: clamp(2.25rem, 6.82vw, 8.1875rem); /* 131/1920 */
	font-weight: 400;
	line-height: .82;
	letter-spacing: .02em;
	text-transform: uppercase;
	margin: 0 0 clamp(.75rem, 1.2vw, 1.4375rem);
}
.ff-category__copy {
	font-size: clamp(.8125rem, 1.09vw, 1.3125rem);
	letter-spacing: .14em;
	text-transform: uppercase;
	line-height: 1.5;
	margin: 0 0 clamp(1.25rem, 2.2vw, 2.625rem);
}

/* ------------------------------------------------------------------ *
 * Full-bleed banner (best sellers)
 * ------------------------------------------------------------------ */

.ff-banner {
	position: relative;
	min-height: clamp(26rem, 53.7vw, 64.4375rem); /* 1031/1920 */
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--wp--preset--color--blush-sand);
}
.ff-banner__media { position: absolute; inset: 0; }
.ff-banner__media img { width: 100%; height: 100%; object-fit: cover; }
.ff-banner__body { position: relative; z-index: 2; max-width: min(40rem, 100%); }
.ff-banner__title {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: clamp(3rem, 10.47vw, 12.5625rem); /* 201/1920 */
	font-weight: 400;
	line-height: .78;
	letter-spacing: .01em;
	text-transform: uppercase;
	margin: 0 0 clamp(1rem, 1.9vw, 2.25rem);
	color: var(--wp--preset--color--mulberry);
}
.ff-banner__copy {
	font-size: clamp(.8125rem, 1.09vw, 1.3125rem);
	letter-spacing: .14em;
	text-transform: uppercase;
	margin: 0 0 clamp(1.25rem, 2.2vw, 2.625rem);
}

/* ------------------------------------------------------------------ *
 * Editorial triptych
 * ------------------------------------------------------------------ */

.ff-triptych { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ff-panel {
	position: relative;
	aspect-ratio: 633 / 869;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: clamp(1.5rem, 4vw, 4.5rem) 1rem;
	overflow: hidden;
	background: var(--wp--preset--color--mulberry-deep);
}
.ff-panel__media { position: absolute; inset: 0; }
.ff-panel__media img { width: 100%; height: 100%; object-fit: cover; }
.ff-panel__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(49, 1, 20, .42);
}
.ff-panel__title {
	position: relative;
	z-index: 2;
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: clamp(1.75rem, 6.09vw, 7.3125rem); /* 117/1920 */
	font-weight: 400;
	line-height: .8;
	text-transform: uppercase;
	text-align: center;
	color: var(--wp--preset--color--porcelain);
	margin: 0;
	text-wrap: balance;
}

/* ------------------------------------------------------------------ *
 * Sale band with countdown
 * ------------------------------------------------------------------ */

.ff-sale {
	background: var(--wp--preset--color--mulberry);
	color: var(--wp--preset--color--porcelain);
	padding-block: clamp(2rem, 3vw, 3.5rem);
}
.ff-sale__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1.5rem, 3vw, 3rem);
}
.ff-sale__title {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: clamp(1.75rem, 3.23vw, 3.875rem); /* 62/1920 */
	font-weight: 400;
	line-height: 1.05;
	margin: 0 0 clamp(1rem, 1.4vw, 1.625rem);
	text-wrap: balance;
}
.ff-countdown { display: flex; gap: clamp(.5rem, 1vw, 1.25rem); flex-wrap: wrap; }
.ff-countdown__cell {
	width: clamp(4rem, 5vw, 6rem);
	height: clamp(4rem, 5vw, 6rem);
	border-radius: 10px;
	background: var(--wp--preset--color--mulberry-deep);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .1rem;
}
.ff-countdown__num {
	font-size: clamp(1.375rem, 1.82vw, 2.1875rem);
	font-weight: 500;
	letter-spacing: .05em;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
.ff-countdown__label {
	font-size: clamp(.625rem, .68vw, .8125rem);
	letter-spacing: .05em;
	text-transform: uppercase;
	opacity: .78;
}

/* ------------------------------------------------------------------ *
 * Testimonials
 * ------------------------------------------------------------------ */

.ff-testimonials {
	background: var(--wp--preset--color--blush-sand);
	color: var(--wp--preset--color--ink);
	padding-block: clamp(2.5rem, 4.4vw, 5.25rem);
	overflow: hidden;
}
.ff-testimonials .ff-section-title { margin-bottom: clamp(1.5rem, 2.6vw, 3.0625rem); }
.ff-testimonials .ff-marquee { --ff-marquee-duration: 60s; --ff-marquee-gap: 4.9375rem; }
.ff-quote { width: min(22.8125rem, 78vw); flex: none; }
.ff-quote__name {
	font-size: 1.125rem;
	font-weight: 400;
	margin: 0 0 1.4375rem;
	font-family: var(--wp--preset--font-family--display);
}
.ff-quote__text { font-size: .875rem; margin: 0; color: var(--wp--preset--color--muted); }

/* ------------------------------------------------------------------ *
 * Social grid
 * ------------------------------------------------------------------ */

.ff-social { background: var(--wp--preset--color--mulberry-deep); color: var(--wp--preset--color--porcelain); }
.ff-social__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 1rem 2rem;
	padding-block: clamp(2rem, 3.5vw, 4rem) clamp(1.5rem, 2.5vw, 2.5rem);
	text-align: center;
}
.ff-social__title {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: clamp(1.75rem, 3.54vw, 4.25rem); /* 68/1920 */
	font-weight: 400;
	letter-spacing: .02em;
	text-transform: uppercase;
	margin: 0;
}
.ff-social__handle {
	display: inline-flex;
	align-items: center;
	gap: .625rem;
	font-size: 1rem;
	letter-spacing: .17em;
	text-transform: uppercase;
	text-decoration: none;
	color: inherit;
}
.ff-social__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ff-social__cell { aspect-ratio: 482 / 428; overflow: hidden; background: var(--wp--preset--color--mulberry); }
.ff-social__cell img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ff-ease); }
.ff-social__cell:hover img { transform: scale(1.05); }

/* ------------------------------------------------------------------ *
 * Footer
 * ------------------------------------------------------------------ */

.ff-footer {
	background: var(--wp--preset--color--mulberry-deep);
	color: var(--wp--preset--color--porcelain);
	padding-block: clamp(2.5rem, 4vw, 4.75rem) clamp(1.5rem, 2.5vw, 2.5rem);
}
.ff-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr));
	gap: clamp(1.75rem, 3vw, 3.5rem);
	align-items: start;
}
.ff-newsletter__title {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: clamp(1.5rem, 1.98vw, 2.375rem); /* 38/1920 */
	font-weight: 400;
	margin: 0 0 .25rem;
}
.ff-newsletter__sub { font-size: clamp(.9375rem, 1.04vw, 1.25rem); font-weight: 400; margin: 0 0 1.5rem; }
.ff-newsletter__form {
	display: flex;
	align-items: center;
	background: var(--wp--preset--color--porcelain);
	border-radius: 7px;
	padding: .5rem .5rem .5rem 1.5rem;
	max-width: min(32rem, 100%);
	gap: .75rem;
}
.ff-newsletter__form input[type="email"] {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: .875rem;
	color: var(--wp--preset--color--ink);
	padding-block: .75rem;
}
.ff-newsletter__form input::placeholder { color: #9a9a9a; }
.ff-newsletter__form button {
	flex: none;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: .8125rem;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mulberry);
	cursor: pointer;
	padding: .5rem .75rem;
}
.ff-footer__col h3 {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: clamp(1rem, 1.09vw, 1.3125rem);
	font-weight: 400;
	letter-spacing: .07em;
	text-transform: uppercase;
	margin: 0 0 1rem;
	color: inherit;
}
.ff-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3125rem; }
.ff-footer__col a { font-size: .8125rem; text-decoration: none; color: rgba(251, 246, 242, .82); }
.ff-footer__col a:hover { color: var(--wp--preset--color--nude); }

.ff-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	margin-top: clamp(2rem, 3.3vw, 4rem);
	padding-top: 1.5rem;
	border-top: 1px solid rgba(251, 246, 242, .15);
}
.ff-footer__mark {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	color: inherit;
}
.ff-socials { display: flex; gap: .625rem; }
.ff-socials a {
	width: 39px;
	height: 39px;
	border: 1px solid rgba(251, 246, 242, .15);
	border-radius: 50px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: inherit;
	transition: border-color var(--ff-speed) var(--ff-ease), background var(--ff-speed) var(--ff-ease);
}
.ff-socials a:hover {
	background: var(--wp--preset--color--nude);
	border-color: var(--wp--preset--color--nude);
	color: var(--wp--preset--color--mulberry);
}
.ff-socials svg { width: 17px; height: 17px; }
.ff-copyright { font-size: .75rem; color: rgba(251, 246, 242, .6); margin: 0; }

/* ------------------------------------------------------------------ *
 * Responsive — the 1920 grid folds down in three steps
 * ------------------------------------------------------------------ */

@media (max-width: 1100px) {
	.ff-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ff-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ff-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
	.ff-hero__title { text-align: left; }
	.ff-hero {
		padding-block: clamp(7rem, 18vw, 10rem) clamp(3rem, 8vw, 5rem);
		align-items: flex-end;
	}
}

@media (max-width: 860px) {
	.ff-categories { grid-template-columns: minmax(0, 1fr); }
	.ff-category { aspect-ratio: 4 / 5; }
	.ff-triptych { grid-template-columns: minmax(0, 1fr); }
	.ff-panel { aspect-ratio: 4 / 3; }
	.ff-social__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ff-header__inner { grid-template-columns: auto 1fr auto; gap: .75rem; }
	.ff-nav-toggle { display: inline-flex; }
	.ff-nav {
		display: none;
		position: absolute;
		top: 100%;
		inset-inline: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--wp--preset--color--mulberry-deep);
		padding: .5rem var(--ff-gutter) 1.25rem;
	}
	.ff-nav.is-open { display: flex; }
	.ff-nav a {
		display: block;
		padding-block: .85rem;
		border-bottom: 1px solid rgba(251, 246, 242, .12);
	}
}

@media (max-width: 560px) {
	.ff-products { grid-template-columns: minmax(0, 1fr); }
	.ff-footer__top { grid-template-columns: minmax(0, 1fr); }
	.ff-sale__inner { flex-direction: column; align-items: flex-start; }
	.ff-newsletter__form { flex-wrap: wrap; padding-inline: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
	.ff-marquee { overflow-x: auto; }
}

/* ------------------------------------------------------------------ *
 * Image placeholders — stand-ins until real photography lands
 * ------------------------------------------------------------------ */

.ff-ph {
	position: relative;
	background:
		linear-gradient(118deg, rgba(255, 255, 255, .07) 0 18%, transparent 18.5% 34%, rgba(255, 255, 255, .05) 34.5% 47%, transparent 47.5% 68%, rgba(255, 255, 255, .06) 68.5% 80%, transparent 81%),
		linear-gradient(170deg, var(--wp--preset--color--mulberry-light) 0%, var(--wp--preset--color--mulberry) 55%, var(--wp--preset--color--mulberry-deep) 100%);
}
.ff-ph--light {
	background:
		linear-gradient(118deg, rgba(255, 255, 255, .3) 0 18%, transparent 18.5% 34%, rgba(255, 255, 255, .22) 34.5% 47%, transparent 47.5% 68%, rgba(255, 255, 255, .26) 68.5% 80%, transparent 81%),
		linear-gradient(170deg, #EFD9C9 0%, var(--wp--preset--color--nude) 55%, #C9A68E 100%);
}
.ff-btn--onlight { color: var(--wp--preset--color--mulberry); }

/* ------------------------------------------------------------------ *
 * WooCommerce — map its default catalogue markup onto the theme grid
 * ------------------------------------------------------------------ */

body .woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--ff-card-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
body .woocommerce ul.products::before,
body .woocommerce ul.products::after { content: none; }

body .woocommerce ul.products[class*="columns-"] li.product {
	width: auto;
	float: none;
	margin: 0;
	text-align: left;
}
body .woocommerce ul.products[class*="columns-"] li.product a img {
	width: 100%;
	aspect-ratio: 436 / 576;
	object-fit: cover;
	margin: 0;
	transition: transform 600ms var(--ff-ease);
}
body .woocommerce ul.products[class*="columns-"] li.product:hover a img { transform: scale(1.04); }

body .woocommerce ul.products[class*="columns-"] li.product .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1rem, 1.15vw, 1.375rem);
	font-weight: 400;
	line-height: 1.25;
	padding: 0;
	margin: 1.25rem 0 .5rem;
}
body .woocommerce ul.products[class*="columns-"] li.product .price {
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(.875rem, .83vw, 1rem);
	font-weight: 300;
	letter-spacing: .03em;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--muted);
	margin: 0;
}
body .woocommerce ul.products[class*="columns-"] li.product .price del { opacity: .5; margin-inline-end: .4rem; }
body .woocommerce ul.products[class*="columns-"] li.product .price ins { text-decoration: none; color: var(--wp--preset--color--sale); }

/* The loop "add to cart" link is noise on a fashion grid; the product page
   handles size selection, so send shoppers there instead. */
body .woocommerce ul.products[class*="columns-"] li.product .button { display: none; }

body .woocommerce ul.products[class*="columns-"] li.product .onsale {
	background: var(--wp--preset--color--sale);
	color: var(--wp--preset--color--porcelain);
	border-radius: 0;
	font-size: .625rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: .35rem .6rem;
	min-height: 0;
	min-width: 0;
	line-height: 1.4;
}

body .ff-band--dark .woocommerce ul.products li.product .woocommerce-loop-product__title { color: var(--wp--preset--color--porcelain); }
body .ff-band--dark .woocommerce ul.products li.product .price { color: rgba(251, 246, 242, .72); }

@media (max-width: 1100px) {
	body .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	body .woocommerce ul.products { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ *
 * Heading colour by context
 *
 * theme.json no longer sets a global heading colour — it made every
 * heading on a mulberry band invisible. Headings inherit from their
 * section; these are the cases where that is not enough.
 * ------------------------------------------------------------------ */

.ff-band--dark .ff-section-title,
.ff-sale .ff-sale__title,
.ff-social .ff-social__title,
.ff-category .ff-category__title,
.ff-panel .ff-panel__title,
.ff-hero .ff-hero__title,
.ff-footer .ff-newsletter__title,
.ff-footer .ff-footer__col h3 {
	color: var(--wp--preset--color--porcelain);
}

.ff-band--light .ff-section-title,
.ff-testimonials .ff-section-title,
.ff-banner .ff-banner__title {
	color: var(--wp--preset--color--mulberry);
}

/* The shortcode wrapper WooCommerce prints must not become a grid itself,
   or the whole product list collapses into one column of the parent grid. */
.ff-band--dark > .ff-shell > .woocommerce,
.ff-band--light > .ff-shell > .woocommerce {
	display: block;
	width: 100%;
}

/* ------------------------------------------------------------------ *
 * Overflow guard and placeholder placement
 * ------------------------------------------------------------------ */

/* Nothing in the design is wider than the screen; this stops a single
   stray element from giving the whole page a sideways scrollbar. */
html, body { max-width: 100%; overflow-x: hidden; }

/* The placeholder caption sat at the bottom, where it collided with the
   bottom-aligned category and panel titles. Move it clear of them. */
/* Long uppercase copy with wide tracking needs help breaking on phones. */
.ff-hero__copy,
.ff-category__copy,
.ff-banner__copy {
	overflow-wrap: break-word;
}

@media (max-width: 560px) {
	/* Tracking that reads as editorial at 1920 is unreadable at 412. */
	.ff-hero__copy,
	.ff-category__copy,
	.ff-banner__copy {
		letter-spacing: .06em;
		line-height: 1.6;
	}
	.ff-category { aspect-ratio: 3 / 4; }
	.ff-category__title { font-size: clamp(2rem, 13vw, 3.25rem); }
	.ff-countdown__cell { width: 3.75rem; height: 3.75rem; }
}

/* ------------------------------------------------------------------ *
 * Catalogue corrections
 * ------------------------------------------------------------------ */

/* WooCommerce's product link is inline, so an image set to width:100%
   resolves against a shrink-to-fit box and never fills the grid cell. */
body .woocommerce ul.products[class*="columns-"] li.product a.woocommerce-loop-product__link {
	display: block;
}

/* Placeholder captions sit above the gradient but below real content. */
@media (max-width: 560px) {
	/* One product per row wastes a phone screen on a fashion catalogue —
	   two lets shoppers compare without scrolling past every item. */
	body .woocommerce ul.products,
	.ff-products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	body .woocommerce ul.products[class*="columns-"] li.product .woocommerce-loop-product__title {
		margin-top: .75rem;
		font-size: .9375rem;
	}
}

/* ------------------------------------------------------------------ *
 * Header positioning
 *
 * The header is its own template part, a sibling of the hero rather than a
 * child of it, so `top: 0` resolves against the page and drags the header
 * over the announcement bar. On the home page it is absolutely positioned
 * against the site wrapper and offset by the announcement bar's height so
 * it overlays the hero; everywhere else it stays in normal flow on its own
 * background.
 * ------------------------------------------------------------------ */

.wp-site-blocks { position: relative; }

/* Fixed height keeps the header offset below deterministic. */
.ff-announce {
	height: 44px;
	padding-block: 0;
	display: flex;
	align-items: center;
}

.ff-header {
	position: relative;
	top: auto;
	z-index: 10;
	background: var(--wp--preset--color--mulberry-deep);
}

body.home .ff-header,
body.front-page .ff-header {
	position: absolute;
	top: 0;
	background: transparent;
}

@media (max-width: 860px) {
	/* The dropdown panel needs an opaque backing on pages where the header
	   itself is transparent. */
	.ff-nav { background: var(--wp--preset--color--mulberry-deep); }
}

/* ------------------------------------------------------------------ *
 * Category tiles: three stocked categories, so three across
 * ------------------------------------------------------------------ */

.ff-categories { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 900px) {
	.ff-categories { grid-template-columns: minmax(0, 1fr); }
}

/* Portrait photography in a wide band crops to a narrow strip unless the
   focal point is pulled upward toward the garment and face. */
.ff-hero__media img { object-position: center 22%; }
.ff-banner__media img { object-position: center 28%; }
.ff-category__media img { object-position: center 18%; }
.ff-panel__media img { object-position: center 20%; }

/* ------------------------------------------------------------------ *
 * Corrections once real photography landed
 * ------------------------------------------------------------------ */

/* The title scale was set for two tiles across. At three per row it sizes
   off the viewport, not the tile, and runs over the edge. */
.ff-category__title {
	font-size: clamp(1.75rem, 3.4vw, 3.5rem);
	line-height: .95;
}
.ff-category__copy { font-size: clamp(.75rem, .9vw, .9375rem); }
.ff-category { aspect-ratio: 3 / 4; }

/* Light garments behind dark display type need a scrim to stay legible. */
.ff-banner__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(251, 246, 242, .94) 0%, rgba(251, 246, 242, .82) 34%, rgba(251, 246, 242, .1) 62%, rgba(251, 246, 242, 0) 100%);
}
.ff-banner__media { position: absolute; inset: 0; }

@media (max-width: 900px) {
	.ff-category__title { font-size: clamp(2rem, 7vw, 3.5rem); }
	.ff-banner__media::after {
		background: linear-gradient(180deg, rgba(251, 246, 242, .92) 0%, rgba(251, 246, 242, .72) 50%, rgba(251, 246, 242, .3) 100%);
	}
}

/* Category copy was landing on pale areas of the photography; the original
   scrim started too low and too light to carry small uppercase text. */
.ff-category__media::after {
	background: linear-gradient(180deg,
		rgba(49, 1, 20, 0) 18%,
		rgba(49, 1, 20, .45) 48%,
		rgba(49, 1, 20, .88) 78%,
		rgba(49, 1, 20, .96) 100%);
}
.ff-category__copy { color: rgba(251, 246, 242, .92); }

/* ------------------------------------------------------------------ *
 * Promo banner
 * ------------------------------------------------------------------ */

.ff-promo {
	position: relative;
	min-height: clamp(18rem, 29vw, 35rem);
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--wp--preset--color--mulberry-deep);
	color: var(--wp--preset--color--porcelain);
}
.ff-promo__media { position: absolute; inset: 0; }
.ff-promo__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
}
.ff-promo__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg,
		rgba(49, 1, 20, .93) 0%,
		rgba(49, 1, 20, .80) 45%,
		rgba(49, 1, 20, .35) 100%);
}
.ff-promo__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1920px;
}
.ff-promo__eyebrow {
	font-size: clamp(.625rem, .73vw, .8125rem);
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--wp--preset--color--nude);
	margin: 0 0 clamp(.75rem, 1.1vw, 1.25rem);
}
.ff-promo__title {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: clamp(2rem, 4.8vw, 5.75rem);
	font-weight: 400;
	line-height: .9;
	text-transform: uppercase;
	margin: 0 0 clamp(.75rem, 1.3vw, 1.5rem);
	color: var(--wp--preset--color--porcelain);
}
.ff-promo__copy {
	font-size: clamp(.8125rem, 1vw, 1.1875rem);
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1.55;
	max-width: min(32rem, 100%);
	margin: 0 0 clamp(1.25rem, 2vw, 2.25rem);
}

@media (max-width: 860px) {
	.ff-promo__media::after {
		background: linear-gradient(180deg,
			rgba(49, 1, 20, .78) 0%,
			rgba(49, 1, 20, .9) 100%);
	}
}

/* The hero scrim was built for a dark portrait shot. The landscape banner is
   pale and cool, so it needs a mulberry wash weighted to the text side. */
.ff-hero__media::after {
	background:
		linear-gradient(180deg, rgba(49, 1, 20, .55) 0%, rgba(49, 1, 20, 0) 22%),
		linear-gradient(90deg,
			rgba(49, 1, 20, .93) 0%,
			rgba(49, 1, 20, .78) 38%,
			rgba(49, 1, 20, .42) 66%,
			rgba(49, 1, 20, .22) 100%);
}

@media (max-width: 1100px) {
	.ff-hero__media::after {
		background: linear-gradient(180deg,
			rgba(49, 1, 20, .72) 0%,
			rgba(49, 1, 20, .55) 45%,
			rgba(49, 1, 20, .92) 100%);
	}
}

/* Black satin hero: the fabric is already dark, so the wash only needs to
   carry the text side and lift the header, not darken the whole frame. */
.ff-hero__media img { object-position: center 55%; }
.ff-hero__media::after {
	background:
		linear-gradient(180deg, rgba(49, 1, 20, .62) 0%, rgba(49, 1, 20, 0) 26%),
		linear-gradient(90deg,
			rgba(49, 1, 20, .88) 0%,
			rgba(49, 1, 20, .62) 42%,
			rgba(49, 1, 20, .28) 72%,
			rgba(49, 1, 20, .18) 100%);
}

/* ================================================================== *
 * Hero slider — the FALAH banner layout, looping
 *
 * Built from the house banners: wordmark top-left, fabric badge top-right,
 * headline / subcopy / square CTA over a bottom scrim. Rendered as live
 * HTML rather than flat artwork so it reflows on a phone and stays
 * readable to search engines.
 * ================================================================== */

.ff-slider {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--mulberry-deep);
	color: var(--wp--preset--color--porcelain);
	height: clamp(30rem, 74vh, 48rem);
}

.ff-slider__track { position: absolute; inset: 0; }

.ff-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 900ms var(--ff-ease), visibility 0s linear 900ms;
}
.ff-slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 900ms var(--ff-ease), visibility 0s;
	z-index: 2;
}

.ff-slide__media { position: absolute; inset: 0; }
.ff-slide__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 18%;
	transform: scale(1.04);
	transition: transform 7s linear;
}
.ff-slide.is-active .ff-slide__media img { transform: scale(1); }

/* Top wash carries the wordmark and badge; bottom wash carries the copy. */
.ff-slide__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(26, 14, 10, .62) 0%, rgba(26, 14, 10, .12) 22%, rgba(26, 14, 10, 0) 38%),
		linear-gradient(0deg, rgba(26, 14, 10, .88) 0%, rgba(26, 14, 10, .62) 20%, rgba(26, 14, 10, .05) 46%, rgba(26, 14, 10, 0) 60%);
}

/* --- wordmark --- */
.ff-slide__mark {
	position: absolute;
	top: clamp(4.5rem, 8vw, 7rem);
	left: var(--ff-gutter);
	z-index: 3;
	display: inline-flex;
	flex-direction: column;
}
.ff-slide__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.375rem, 2.1vw, 2.5rem);
	letter-spacing: .09em;
	text-transform: uppercase;
	line-height: 1;
}
.ff-slide__tag {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: clamp(.6875rem, .85vw, 1rem);
	letter-spacing: .04em;
	color: rgba(251, 246, 242, .82);
	border-top: 1px solid rgba(251, 246, 242, .42);
	margin-top: .32rem;
	padding-top: .28rem;
}

/* --- fabric badge --- */
.ff-slide__badge {
	position: absolute;
	top: clamp(4.5rem, 8vw, 7rem);
	right: var(--ff-gutter);
	z-index: 3;
	font-size: clamp(.5625rem, .72vw, .8125rem);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: rgba(251, 246, 242, .88);
	border-top: 1px solid rgba(251, 246, 242, .42);
	padding-top: .35rem;
}

/* --- copy block --- */
.ff-slide__body {
	position: absolute;
	inset-inline: 0;
	bottom: clamp(3.25rem, 6vw, 5.5rem);
	z-index: 3;
}
.ff-slide__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.875rem, 3.6vw, 4.25rem);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -.01em;
	margin: 0 0 clamp(.5rem, .9vw, 1rem);
	color: var(--wp--preset--color--porcelain);
	text-wrap: balance;
}
.ff-slide__copy {
	font-size: clamp(.875rem, 1.04vw, 1.1875rem);
	font-weight: 300;
	line-height: 1.5;
	letter-spacing: .01em;
	max-width: min(38rem, 100%);
	margin: 0 0 clamp(1.25rem, 2vw, 2rem);
	color: rgba(251, 246, 242, .94);
}
.ff-slide__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(.6875rem, .78vw, .8125rem);
	letter-spacing: .16em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--porcelain);
	border: 1px solid rgba(251, 246, 242, .85);
	border-radius: 0; /* the house banners use square buttons, not pills */
	padding: .95rem 1.75rem;
	transition: background var(--ff-speed) var(--ff-ease), color var(--ff-speed) var(--ff-ease);
}
.ff-slide__cta:hover,
.ff-slide__cta:focus-visible {
	background: var(--wp--preset--color--porcelain);
	color: var(--wp--preset--color--mulberry);
}

/* --- controls --- */
.ff-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(251, 246, 242, .4);
	border-radius: 50%;
	background: rgba(26, 14, 10, .25);
	color: var(--wp--preset--color--porcelain);
	cursor: pointer;
	transition: background var(--ff-speed) var(--ff-ease), border-color var(--ff-speed) var(--ff-ease);
}
.ff-slider__arrow:hover { background: rgba(26, 14, 10, .6); border-color: rgba(251, 246, 242, .8); }
.ff-slider__arrow--prev { left: clamp(.5rem, 1.4vw, 1.75rem); }
.ff-slider__arrow--next { right: clamp(.5rem, 1.4vw, 1.75rem); }

.ff-slider__dots {
	position: absolute;
	bottom: clamp(1.25rem, 2.2vw, 2.25rem);
	inset-inline: 0;
	z-index: 5;
	display: flex;
	justify-content: center;
	gap: .5rem;
}
.ff-slider__dot {
	width: 34px;
	height: 2px;
	padding: 0;
	border: 0;
	background: rgba(251, 246, 242, .34);
	cursor: pointer;
	transition: background var(--ff-speed) var(--ff-ease);
}
.ff-slider__dot.is-active { background: var(--wp--preset--color--porcelain); }

@media (max-width: 860px) {
	.ff-slider { height: auto; aspect-ratio: 4 / 5; }
	.ff-slide__media img { object-position: center 15%; }
	.ff-slider__arrow { display: none; }
	.ff-slide__body { bottom: clamp(3rem, 9vw, 4.5rem); }
}

@media (prefers-reduced-motion: reduce) {
	.ff-slide,
	.ff-slide__media img { transition: none; }
	.ff-slide__media img { transform: none; }
}

/* ================================================================== *
 * Shop / category archive
 * ================================================================== */

.ff-archive__head {
	position: relative;
	background: var(--wp--preset--color--mulberry);
	color: var(--wp--preset--color--porcelain);
	padding-block: clamp(2.5rem, 5vw, 5.5rem);
	overflow: hidden;
}
/* Category banner image, set per term from the category thumbnail. */
.ff-archive__head {
	/* An unset custom property makes background-image invalid, so the solid
	   mulberry shows through on archives with no category image. */
	background-image: var(--ff-archive-banner);
	background-size: cover;
	background-position: center;
}
.ff-archive__head::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(49, 1, 20, .92) 0%, rgba(49, 1, 20, .72) 45%, rgba(49, 1, 20, .35) 100%);
}
.ff-archive__head > * { position: relative; z-index: 2; }

.ff-archive__crumbs {
	font-size: .75rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(251, 246, 242, .72);
	margin-bottom: clamp(.75rem, 1.4vw, 1.5rem);
}
.ff-archive__crumbs a { color: inherit; text-decoration: none; }
.ff-archive__crumbs a:hover { color: var(--wp--preset--color--nude); }

.ff-archive__title {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: clamp(2.25rem, 5vw, 5rem);
	font-weight: 400;
	line-height: .95;
	text-transform: uppercase;
	margin: 0;
	color: var(--wp--preset--color--porcelain);
}
.ff-archive__desc {
	font-size: clamp(.875rem, 1vw, 1.125rem);
	max-width: min(42rem, 100%);
	margin: clamp(.75rem, 1.2vw, 1.25rem) 0 0;
	color: rgba(251, 246, 242, .9);
}

.ff-archive__body { padding-block: clamp(2rem, 4vw, 4rem) clamp(3rem, 6vw, 6rem); }

.ff-archive__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding-bottom: clamp(1.25rem, 2vw, 2rem);
	margin-bottom: clamp(1.5rem, 2.5vw, 2.5rem);
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.ff-archive__toolbar .woocommerce-result-count {
	margin: 0;
	font-size: .8125rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.ff-archive__toolbar select {
	font-family: var(--wp--preset--font-family--body);
	font-size: .8125rem;
	letter-spacing: .06em;
	padding: .6rem 2rem .6rem .75rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
}

/* ---- product grid (product-collection / product-template) ---- */

.wp-block-woocommerce-product-collection .wc-block-product-template,
.wp-block-woocommerce-product-collection .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--ff-card-gap) clamp(1rem, 1.6vw, 2rem);
	list-style: none;
	margin: 0;
	padding: 0;
}
.wc-block-product-template .wc-block-product,
.wp-block-post-template .wc-block-product {
	margin: 0;
	padding: 0;
	max-width: none;
}
.wc-block-product .wc-block-components-product-image {
	margin: 0;
	display: block;
	overflow: hidden;
}
.wc-block-product .wc-block-components-product-image img,
.ff-grid__media img {
	width: 100%;
	aspect-ratio: 436 / 576;
	object-fit: cover;
	display: block;
	transition: transform 600ms var(--ff-ease);
}
.wc-block-product:hover .wc-block-components-product-image img { transform: scale(1.04); }

.wc-block-product .wp-block-post-title,
.ff-grid__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1rem, 1.15vw, 1.375rem);
	font-weight: 400;
	line-height: 1.25;
	margin: 1.1rem 0 .45rem;
}
.wc-block-product .wp-block-post-title a { text-decoration: none; color: inherit; }
.wc-block-product .wc-block-components-product-price,
.ff-grid__price {
	font-size: clamp(.875rem, .83vw, 1rem);
	letter-spacing: .03em;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--muted);
	margin: 0;
}

.ff-archive__pagination {
	margin-top: clamp(2.5rem, 4vw, 4rem);
	gap: .35rem;
	font-size: .8125rem;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.ff-archive__pagination a,
.ff-archive__pagination span {
	padding: .6rem .9rem;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	border: 1px solid transparent;
}
.ff-archive__pagination a:hover { border-color: var(--wp--preset--color--border); }
.ff-archive__pagination .current {
	border-color: var(--wp--preset--color--mulberry);
	color: var(--wp--preset--color--mulberry);
}

/* ================================================================== *
 * Single product
 * ================================================================== */

.ff-product { background: var(--wp--preset--color--porcelain); }

.ff-product__crumbs {
	padding-block: clamp(1.25rem, 2.2vw, 2.25rem) 0;
	font-size: .75rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.ff-product__crumbs a { color: inherit; text-decoration: none; }
.ff-product__crumbs a:hover { color: var(--wp--preset--color--mulberry); }

.ff-product__top {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 5rem);
	align-items: start;
	padding-block: clamp(1.5rem, 3vw, 3rem) clamp(2.5rem, 5vw, 5rem);
}

.ff-product__gallery img { width: 100%; height: auto; display: block; }
.ff-product__gallery .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: .5rem;
	margin: .5rem 0 0;
	padding: 0;
	list-style: none;
}
.ff-product__gallery .flex-control-thumbs img {
	cursor: pointer;
	opacity: .55;
	transition: opacity var(--ff-speed) var(--ff-ease);
}
.ff-product__gallery .flex-control-thumbs img.flex-active,
.ff-product__gallery .flex-control-thumbs img:hover { opacity: 1; }

.ff-product__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.75rem, 2.9vw, 3.25rem);
	font-weight: 400;
	line-height: 1.08;
	margin: 0 0 clamp(.75rem, 1.2vw, 1.25rem);
	color: var(--wp--preset--color--mulberry);
}
.ff-product__price,
.ff-product__price .woocommerce-Price-amount {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.25rem, 1.6vw, 1.75rem);
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--ink);
}
.ff-product__price { margin: 0 0 clamp(1rem, 1.8vw, 1.75rem); }
.ff-product__price del { opacity: .45; margin-inline-end: .5rem; }
.ff-product__price ins { text-decoration: none; color: var(--wp--preset--color--sale); }

.ff-product__excerpt {
	font-size: clamp(.9375rem, 1vw, 1.0625rem);
	line-height: 1.7;
	color: var(--wp--preset--color--ink);
	margin: 0 0 clamp(1.5rem, 2.4vw, 2.25rem);
	padding-bottom: clamp(1.5rem, 2.4vw, 2.25rem);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* ---- add to cart ---- */

.ff-product__form .quantity { display: inline-flex; margin-inline-end: .75rem; }
.ff-product__form .quantity input {
	width: 5rem;
	padding: 1.05rem .75rem;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	text-align: center;
	color: var(--wp--preset--color--ink);
}
.ff-product__form .button,
.ff-product__form button[type="submit"] {
	font-family: var(--wp--preset--font-family--body);
	font-size: .75rem;
	font-weight: 400;
	letter-spacing: .16em;
	text-transform: uppercase;
	padding: 1.1rem 2.5rem;
	border: 1px solid var(--wp--preset--color--mulberry);
	border-radius: 0;
	background: var(--wp--preset--color--mulberry);
	color: var(--wp--preset--color--porcelain);
	cursor: pointer;
	transition: background var(--ff-speed) var(--ff-ease), color var(--ff-speed) var(--ff-ease);
}
.ff-product__form .button:hover,
.ff-product__form button[type="submit"]:hover {
	background: var(--wp--preset--color--nude);
	border-color: var(--wp--preset--color--nude);
	color: var(--wp--preset--color--mulberry);
}

/* Variation selectors, for once products carry sizes. */
.ff-product__form table.variations { width: 100%; border-collapse: collapse; margin-bottom: 1.25rem; }
.ff-product__form table.variations th,
.ff-product__form table.variations td { text-align: left; padding: .4rem 0; border: 0; }
.ff-product__form table.variations label {
	font-size: .75rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.ff-product__form table.variations select {
	width: 100%;
	padding: .85rem .75rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0;
	background: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-size: .9375rem;
	color: var(--wp--preset--color--ink);
}

.ff-assurance {
	list-style: none;
	margin: clamp(1.5rem, 2.4vw, 2.25rem) 0 0;
	padding: 0;
	display: grid;
	gap: .55rem;
	font-size: .8125rem;
	letter-spacing: .04em;
	color: var(--wp--preset--color--muted);
}
.ff-assurance li { padding-left: 1.1rem; position: relative; }
.ff-assurance li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: 5px;
	height: 5px;
	background: var(--wp--preset--color--nude);
}

.ff-product__meta {
	margin-top: clamp(1.5rem, 2.4vw, 2.25rem);
	padding-top: clamp(1.25rem, 2vw, 1.75rem);
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: .8125rem;
	letter-spacing: .04em;
	color: var(--wp--preset--color--muted);
}
.ff-product__meta a { color: inherit; }

/* ---- details / tabs ---- */

.ff-product__details { padding-block: clamp(2rem, 4vw, 4rem) clamp(2.5rem, 5vw, 5rem); }
.ff-product__details .wc-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1rem, 2vw, 2.5rem);
	list-style: none;
	margin: 0 0 clamp(1.5rem, 2.4vw, 2.25rem);
	padding: 0 0 .75rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.ff-product__details .wc-tabs li a {
	font-size: .8125rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--muted);
	padding-bottom: .5rem;
}
.ff-product__details .wc-tabs li.active a {
	color: var(--wp--preset--color--mulberry);
	border-bottom: 1px solid var(--wp--preset--color--mulberry);
}
.ff-product__details .woocommerce-Tabs-panel h2 { display: none; }
.ff-product__details p { max-width: 62ch; line-height: 1.75; }

.ff-product__related .ff-section-title { margin-bottom: clamp(2rem, 3.2vw, 3.5rem); }

/* ---- responsive ---- */

@media (max-width: 1100px) {
	.wp-block-woocommerce-product-collection .wc-block-product-template,
	.wp-block-woocommerce-product-collection .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 860px) {
	.ff-product__top { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}
@media (max-width: 560px) {
	.ff-archive__toolbar { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------------------------------ *
 * WooCommerce single-product overrides
 *
 * WooCommerce ships `.woocommerce div.product div.images { width: 48% }`
 * and heavily styled tabs. Those selectors carry more weight than the
 * theme's, so these carry a body prefix to win cleanly rather than
 * reaching for !important.
 * ------------------------------------------------------------------ */

body.woocommerce .ff-product__gallery .woocommerce-product-gallery.images,
body.woocommerce-page .ff-product__gallery .woocommerce-product-gallery.images {
	width: 100%;
	float: none;
	margin-bottom: 0;
	opacity: 1;
}

body.woocommerce .ff-product__gallery .woocommerce-product-gallery__wrapper { margin: 0; }
body.woocommerce .ff-product__gallery .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	display: block;
}

/* Zoom affordance */
body.woocommerce .ff-product__gallery .woocommerce-product-gallery__trigger {
	background: var(--wp--preset--color--porcelain);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 50%;
	color: var(--wp--preset--color--mulberry);
	top: 1rem;
	right: 1rem;
}

/* The product summary column should not inherit WooCommerce's 48% either. */
body.woocommerce .ff-product__top .summary,
body.woocommerce .ff-product__summary {
	width: 100%;
	float: none;
	margin-bottom: 0;
}

/* ---- tabs ---- */

body.woocommerce .ff-product__details .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1rem, 2vw, 2.5rem);
	list-style: none;
	margin: 0 0 clamp(1.5rem, 2.4vw, 2.25rem);
	padding: 0 0 .75rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
body.woocommerce .ff-product__details .woocommerce-tabs ul.tabs::before,
body.woocommerce .ff-product__details .woocommerce-tabs ul.tabs::after { content: none; display: none; }

body.woocommerce .ff-product__details .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
}
body.woocommerce .ff-product__details .woocommerce-tabs ul.tabs li::before,
body.woocommerce .ff-product__details .woocommerce-tabs ul.tabs li::after { content: none; display: none; }

body.woocommerce .ff-product__details .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	font-family: var(--wp--preset--font-family--body);
	font-size: .8125rem;
	font-weight: 400;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--muted);
	padding: 0 0 .55rem;
	border-bottom: 1px solid transparent;
}
body.woocommerce .ff-product__details .woocommerce-tabs ul.tabs li.active a,
body.woocommerce .ff-product__details .woocommerce-tabs ul.tabs li a:hover {
	color: var(--wp--preset--color--mulberry);
	border-bottom-color: var(--wp--preset--color--mulberry);
}

body.woocommerce .ff-product__details .woocommerce-Tabs-panel > h2 { display: none; }
body.woocommerce .ff-product__details .woocommerce-Tabs-panel p {
	max-width: 62ch;
	line-height: 1.75;
	font-size: 1rem;
}

/* ---- related products grid ---- */

.ff-product__related .wc-block-product-template {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--ff-card-gap) clamp(1rem, 1.6vw, 2rem);
	list-style: none;
	margin: 0;
	padding: 0;
}
.ff-product__related .wc-block-product {
	margin: 0;
	padding: 0;
	max-width: none;
	text-align: left;
}
.ff-product__related .wc-block-product .wp-block-post-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1rem, 1.15vw, 1.375rem);
	font-weight: 400;
	margin: 1.1rem 0 .45rem;
}

@media (max-width: 1100px) {
	.ff-product__related .wc-block-product-template { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* FlexSlider (WooCommerce's gallery script) writes an inline pixel width on
   the gallery after init, which no stylesheet rule can outrank. !important is
   the only lever here, and is scoped to that one element. */
body.woocommerce .ff-product__gallery .wp-block-woocommerce-product-image-gallery,
body.woocommerce .ff-product__gallery .woocommerce-product-gallery,
body.woocommerce .ff-product__gallery .woocommerce-product-gallery__wrapper,
body.woocommerce .ff-product__gallery .woocommerce-product-gallery__image {
	width: 100% !important;
	max-width: 100% !important;
}

/* ------------------------------------------------------------------ *
 * Navigation submenu
 * ------------------------------------------------------------------ */

@media (max-width: 860px) {
	/* In the dropdown panel the submenu sits inline rather than floating. */
	}

/* ================================================================== *
 * Navigation + mega panel
 *
 * The nav is hand-written rather than core/navigation: that block's own
 * submenu styles outrank anything the theme sets, which left the dropdown
 * a white box with white text on it.
 * ================================================================== */

.ff-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(.75rem, 1.4vw, 1.6875rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ff-nav__item > a {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	font-size: clamp(.75rem, .78vw, .9375rem);
	font-weight: 500;
	letter-spacing: .03em;
	text-transform: uppercase;
	text-decoration: none;
	color: inherit;
	padding-block: .35rem;
}
.ff-nav__item > a:hover,
.ff-nav__item > a:focus-visible { color: var(--wp--preset--color--nude); }

.ff-nav__chev { transition: transform var(--ff-speed) var(--ff-ease); flex: none; }
.ff-nav__item--panel:hover .ff-nav__chev,
.ff-nav__item--panel:focus-within .ff-nav__chev { transform: rotate(180deg); }

/* The panel spans the header, so the item itself stays unpositioned and the
   panel resolves against .ff-header. */
.ff-nav__item--panel { position: static; }

.ff-mega {
	position: absolute;
	top: 100%;
	inset-inline: 0;
	z-index: 20;
	background: var(--wp--preset--color--mulberry-deep);
	border-top: 1px solid rgba(251, 246, 242, .12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 220ms var(--ff-ease), transform 220ms var(--ff-ease), visibility 0s linear 220ms;
}
.ff-nav__item--panel:hover .ff-mega,
.ff-nav__item--panel:focus-within .ff-mega,
.ff-mega:hover {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 220ms var(--ff-ease), transform 220ms var(--ff-ease), visibility 0s;
}

.ff-mega__inner {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 3vw, 3.5rem);
	padding-block: clamp(1.75rem, 2.6vw, 3rem);
	align-items: start;
}

.ff-mega__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 1.6vw, 2rem);
}

.ff-mega__card { text-decoration: none; color: inherit; display: block; }
.ff-mega__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--wp--preset--color--mulberry);
	margin-bottom: .85rem;
}
.ff-mega__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 18%;
	transition: transform 700ms var(--ff-ease);
}
.ff-mega__card:hover .ff-mega__media img { transform: scale(1.05); }

.ff-mega__name {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.0625rem, 1.2vw, 1.375rem);
	letter-spacing: .02em;
	color: var(--wp--preset--color--porcelain);
	margin-bottom: .2rem;
}
.ff-mega__card:hover .ff-mega__name { color: var(--wp--preset--color--nude); }
.ff-mega__note {
	display: block;
	font-size: .8125rem;
	line-height: 1.45;
	letter-spacing: 0;
	text-transform: none;
	color: rgba(251, 246, 242, .62);
}

.ff-mega__aside {
	border-left: 1px solid rgba(251, 246, 242, .14);
	padding-left: clamp(1.25rem, 2.4vw, 2.5rem);
}
.ff-mega__label {
	font-size: .625rem;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: rgba(251, 246, 242, .5);
	margin: 0 0 1rem;
}
.ff-mega__links { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.ff-mega__links a {
	font-size: .8125rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	text-decoration: none;
	color: rgba(251, 246, 242, .82);
}
.ff-mega__links a:hover { color: var(--wp--preset--color--nude); }

/* ---- phone: the panel becomes an inline list in the drawer ---- */

@media (max-width: 860px) {
	.ff-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.ff-nav__item > a {
		justify-content: space-between;
		padding-block: .85rem;
		border-bottom: 1px solid rgba(251, 246, 242, .12);
	}
	.ff-nav__item--panel { position: relative; }

	.ff-mega {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		background: transparent;
		border-top: 0;
		transition: none;
	}
	.ff-mega__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 1rem;
		padding-block: .75rem 1rem;
		padding-inline: 0;
	}
	.ff-mega__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
	.ff-mega__media { aspect-ratio: 3 / 4; margin-bottom: .5rem; }
	.ff-mega__name { font-size: .875rem; }
	.ff-mega__note { display: none; }
	.ff-mega__aside { border-left: 0; padding-left: 0; }
	.ff-mega__label { display: none; }
	.ff-mega__links { grid-template-columns: repeat(2, minmax(0, 1fr)); display: grid; }
	.ff-nav__chev { display: none; }
}

/* ================================================================== *
 * Cart & checkout
 *
 * WooCommerce's cart and checkout are interactive blocks with their own
 * stylesheet. These rules re-skin them to the theme without touching the
 * markup, which has to stay intact for the blocks to work.
 * ================================================================== */

.ff-checkout { background: var(--wp--preset--color--porcelain); }

.ff-checkout__head {
	background: var(--wp--preset--color--mulberry);
	color: var(--wp--preset--color--porcelain);
	padding-block: clamp(2rem, 3.6vw, 3.75rem);
}
.ff-checkout__title {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: clamp(2rem, 4vw, 4rem);
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
	margin: 0;
	color: var(--wp--preset--color--porcelain);
}
.ff-checkout__step {
	font-size: .75rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(251, 246, 242, .62);
	margin: clamp(.75rem, 1.2vw, 1.1rem) 0 0;
}

.ff-checkout__body { padding-block: clamp(2rem, 4vw, 4rem) clamp(3rem, 6vw, 6rem); }

/* ---- shared field styling ---- */

.ff-checkout .wc-block-components-text-input input[type="text"],
.ff-checkout .wc-block-components-text-input input[type="email"],
.ff-checkout .wc-block-components-text-input input[type="tel"],
.ff-checkout .wc-block-components-text-input input[type="number"],
.ff-checkout .wc-block-components-textarea,
.ff-checkout .wc-blocks-components-select__container {
	border-radius: 0;
	border-color: var(--wp--preset--color--border);
	background: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--ink);
}
.ff-checkout .wc-block-components-text-input input:focus,
.ff-checkout .wc-blocks-components-select__select:focus {
	outline: 2px solid var(--wp--preset--color--mulberry);
	outline-offset: 1px;
}
.ff-checkout .wc-block-components-text-input label,
.ff-checkout .wc-blocks-components-select__label {
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--muted);
}

/* ---- buttons ---- */

.ff-checkout .wc-block-components-button:not(.is-link),
.ff-checkout .wp-element-button {
	border-radius: 0;
	background: var(--wp--preset--color--mulberry);
	color: var(--wp--preset--color--porcelain);
	font-family: var(--wp--preset--font-family--body);
	font-size: .75rem;
	font-weight: 400;
	letter-spacing: .16em;
	text-transform: uppercase;
	padding: 1.1rem 2.25rem;
	border: 1px solid var(--wp--preset--color--mulberry);
	transition: background var(--ff-speed) var(--ff-ease), color var(--ff-speed) var(--ff-ease);
}
.ff-checkout .wc-block-components-button:not(.is-link):hover,
.ff-checkout .wp-element-button:hover {
	background: var(--wp--preset--color--nude);
	border-color: var(--wp--preset--color--nude);
	color: var(--wp--preset--color--mulberry);
}
.ff-checkout .wc-block-components-button.is-link {
	color: var(--wp--preset--color--mulberry);
	text-underline-offset: .2em;
}

/* ---- cart ---- */

.ff-checkout .wc-block-cart-items { border-collapse: collapse; width: 100%; }
.ff-checkout .wc-block-cart-items__header {
	font-size: .6875rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.ff-checkout .wc-block-cart-items__row { border-bottom: 1px solid var(--wp--preset--color--border); }
.ff-checkout .wc-block-cart-item__image img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
	width: 100%;
}
.ff-checkout .wc-block-components-product-name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.125rem;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.ff-checkout .wc-block-components-product-price { font-variant-numeric: tabular-nums; }

.ff-checkout .wc-block-components-sidebar-layout .wc-block-components-totals-wrapper,
.ff-checkout .wc-block-cart__sidebar .wc-block-components-panel {
	border-color: var(--wp--preset--color--border);
}
.ff-checkout .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block {
	background: var(--wp--preset--color--blush-sand);
	padding: clamp(1.25rem, 2vw, 2rem);
	border: 0;
	border-radius: 0;
}
.ff-checkout .wc-block-components-totals-item__label { letter-spacing: .04em; }
.ff-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--mulberry);
}

/* ---- empty cart ---- */

.ff-checkout .wp-block-woocommerce-empty-cart-block { text-align: center; padding-block: clamp(2rem, 4vw, 4rem); }
.ff-checkout .wp-block-woocommerce-empty-cart-block h2 {
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--mulberry);
}

/* ---- checkout ---- */

.ff-checkout .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
	background: var(--wp--preset--color--blush-sand);
	padding: clamp(1.25rem, 2vw, 2rem);
	border: 0;
	border-radius: 0;
}
.ff-checkout .wc-block-components-checkout-step__title,
.ff-checkout .wc-block-components-title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(1.125rem, 1.4vw, 1.5rem);
	color: var(--wp--preset--color--mulberry);
}
.ff-checkout .wc-block-components-checkout-step__description { color: var(--wp--preset--color--muted); }
.ff-checkout .wc-block-components-checkout-step { border-color: var(--wp--preset--color--border); }

.ff-checkout .wc-block-components-radio-control__option,
.ff-checkout .wc-block-components-shipping-rates-control__package {
	border-color: var(--wp--preset--color--border);
}

/* Notices */
.ff-checkout .wc-block-components-notice-banner {
	border-radius: 0;
	font-family: var(--wp--preset--font-family--body);
}

/* ---- responsive ---- */

@media (max-width: 1000px) {
	.ff-checkout .wp-block-woocommerce-cart,
	.ff-checkout .wp-block-woocommerce-checkout { max-width: none; }
}

/* Order summary product names must wrap on word boundaries, not mid-word. */
.ff-checkout .wc-block-components-product-name,
.ff-checkout .wc-block-components-order-summary-item__description {
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: none;
}
.ff-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-metadata__description { font-size: .8125rem; }

/* post-content applies the constrained layout, capping children at the
   720px contentSize from theme.json. Cart and checkout need the full
   container; .ff-shell already handles the page gutter. */
.ff-checkout .wp-block-post-content,
.ff-checkout .is-layout-constrained > .wp-block-woocommerce-cart,
.ff-checkout .is-layout-constrained > .wp-block-woocommerce-checkout,
.ff-checkout .wp-block-post-content > * {
	max-width: none;
}

/* ------------------------------------------------------------------ *
 * Variation (size) selector
 *
 * WooCommerce renders the selector as a table. Flattening it to blocks
 * puts the label above a full-width control, which reads better and
 * stacks correctly on a phone.
 * ------------------------------------------------------------------ */

body.woocommerce .ff-product__form table.variations,
body.woocommerce .ff-product__form table.variations tbody,
body.woocommerce .ff-product__form table.variations tr,
body.woocommerce .ff-product__form table.variations th,
body.woocommerce .ff-product__form table.variations td {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	text-align: left;
}

body.woocommerce .ff-product__form table.variations tr { margin-bottom: 1.25rem; }

body.woocommerce .ff-product__form table.variations th label {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: .6875rem;
	font-weight: 400;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-bottom: .5rem;
}

body.woocommerce .ff-product__form table.variations td.value select {
	width: 100%;
	max-width: 22rem;
	height: auto;
	line-height: 1.3;
	padding: .95rem 2.75rem .95rem .9rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: .9375rem;
	color: var(--wp--preset--color--ink);
	/* Native arrow is dropped with appearance:none, so one is drawn back in. */
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--wp--preset--color--white);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E6A62' stroke-width='2'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
}

/* "Clear" link that appears once a size is picked. */
body.woocommerce .ff-product__form .reset_variations {
	display: inline-block;
	margin-top: .6rem;
	font-size: .75rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
body.woocommerce .ff-product__form .reset_variations:hover { color: var(--wp--preset--color--mulberry); }

/* Price shown for the chosen variation. */
body.woocommerce .ff-product__form .woocommerce-variation-price {
	margin-bottom: 1rem;
}
body.woocommerce .ff-product__form .woocommerce-variation-price .price {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--ink);
}

/* Add to cart stays visibly inactive until a size is selected. */
body.woocommerce .ff-product__form .button.disabled,
body.woocommerce .ff-product__form button[type="submit"]:disabled,
body.woocommerce .ff-product__form .single_add_to_cart_button.disabled {
	background: var(--wp--preset--color--border);
	border-color: var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
	cursor: not-allowed;
	opacity: 1;
}

body.woocommerce .ff-product__form .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
}

/* Size guidance sits with the selector, where it is actually needed. */
.ff-product__sizehint {
	display: block;
	margin-top: .6rem;
	font-size: .8125rem;
	color: var(--wp--preset--color--muted);
}
.ff-product__sizehint a { color: var(--wp--preset--color--mulberry); }

/* ------------------------------------------------------------------ *
 * Cart count badge
 * ------------------------------------------------------------------ */

.ff-bag { position: relative; }

.ff-cart-count {
	position: absolute;
	top: -6px;
	right: -8px;
	min-width: 17px;
	height: 17px;
	padding-inline: 4px;
	border-radius: 999px;
	background: var(--wp--preset--color--nude);
	color: var(--wp--preset--color--mulberry);
	font-family: var(--wp--preset--font-family--body);
	font-size: 10px;
	font-weight: 500;
	line-height: 17px;
	letter-spacing: 0;
	text-align: center;
	font-variant-numeric: tabular-nums;
	/* Empty bag shows no badge at all rather than a zero. */
	display: none;
}
.ff-cart-count.is-filled { display: block; }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------ *
 * Store notices ("… has been added to your cart")
 *
 * WooCommerce drops the action link inline inside the message text with no
 * layout of its own, so on a narrow screen it collides with the wrapped
 * line above it. Laying the content out as a wrapping flex row lets the
 * link drop onto its own line instead of overlapping.
 * ------------------------------------------------------------------ */

body.woocommerce .wc-block-components-notice-banner,
.wc-block-components-notice-banner {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	border-radius: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: .9375rem;
	line-height: 1.5;
	padding: 1rem 1.1rem;
	margin-bottom: clamp(1.25rem, 2vw, 2rem);
	overflow-wrap: break-word;
}

.wc-block-components-notice-banner > svg {
	flex: none;
	margin: 0;
}

.wc-block-components-notice-banner__content {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .4rem 1.25rem;
	width: 100%;
	min-width: 0;
	padding: 0;
}

/* The action reads as a link, not a second primary button competing with
   "Proceed to checkout". */
.wc-block-components-notice-banner__content .button.wc-forward,
.wc-block-components-notice-banner__content a.wp-element-button {
	flex: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--mulberry);
	font-family: var(--wp--preset--font-family--body);
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: .25em;
	min-height: 0;
}
.wc-block-components-notice-banner__content .button.wc-forward:hover,
.wc-block-components-notice-banner__content a.wp-element-button:hover {
	background: none;
	color: var(--wp--preset--color--mulberry-light);
}

@media (max-width: 560px) {
	/* Below this the message almost always wraps, so give the action its own
	   line rather than letting it fight for space on the last one. */
	.wc-block-components-notice-banner__content { justify-content: flex-start; }
	.wc-block-components-notice-banner__content .button.wc-forward,
	.wc-block-components-notice-banner__content a.wp-element-button {
		flex: 1 0 100%;
		margin-top: .25rem;
	}
	.wc-block-components-notice-banner { padding: .9rem 1rem; font-size: .875rem; }
}

/* Classic notices, for anything WooCommerce still renders the old way. */
body.woocommerce .woocommerce-message,
body.woocommerce .woocommerce-info,
body.woocommerce .woocommerce-error {
	border-radius: 0;
	font-family: var(--wp--preset--font-family--body);
}
body.woocommerce .woocommerce-message .button,
body.woocommerce .woocommerce-info .button,
body.woocommerce .woocommerce-error .button {
	float: none;
	display: inline-block;
	margin-left: .5rem;
}

/* ------------------------------------------------------------------ *
 * Product collection items inside the theme's own grid
 *
 * WooCommerce sizes collection items with
 *   .wc-block-product-template.is-flex-container.is-flex-container.columns-N > li
 * (the class is repeated on purpose to raise specificity), which sets a
 * percentage width. Inside the theme's grid that percentage resolves
 * against the grid cell, shrinking each card to a quarter of its track.
 * Matching their specificity hands sizing back to the grid.
 * ------------------------------------------------------------------ */

.wp-block-woocommerce-product-collection .wc-block-product-template.is-flex-container.is-flex-container[class*="columns-"] > li,
.ff-product__related .wc-block-product-template.is-flex-container.is-flex-container[class*="columns-"] > li {
	width: auto;
	max-width: none;
	flex: initial;
}

/* The template is a grid here, not a flex row. */
.wp-block-woocommerce-product-collection .wc-block-product-template.is-flex-container,
.ff-product__related .wc-block-product-template.is-flex-container {
	display: grid;
	flex-wrap: initial;
}

@media (max-width: 560px) {
	/* Two per row on a phone — one wastes the screen on a fashion grid. */
	.ff-product__related .wc-block-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Every homepage section carries its own vertical padding, so the flow
   layout's block gap only shows a strip of page background between them. */
main.wp-block-group > *,
main.wp-block-group > * + * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* With the announcement bar moved out, the header is absolutely positioned
   and the template-part wrapper collapses to zero height — leaving the site
   wrapper's block gap as a strip of page background above the slider. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* ================================================================== *
 * Product card hover
 *
 * No borders, no lift, no overlay. The quality signal is the motion:
 * a long, slowly decelerating push on the garment with a faint tonal
 * deepening, and the caption easing up to meet it.
 *
 * The easing is an expo-out curve — it covers most of the distance
 * immediately then settles over the remaining second, which reads as
 * weight rather than speed. Short linear transitions are what make a
 * hover feel cheap.
 * ================================================================== */

:root {
	--ff-hover-ease: cubic-bezier(.16, 1, .3, 1);
	--ff-hover-slow: 1100ms;
	--ff-hover-mid: 620ms;
}

/* --- the garment --- */

body .woocommerce ul.products[class*="columns-"] li.product a img,
.wc-block-product .wc-block-components-product-image img {
	transform: scale(1);
	filter: brightness(1) saturate(1);
	transition:
		transform var(--ff-hover-slow) var(--ff-hover-ease),
		filter var(--ff-hover-mid) var(--ff-hover-ease);
	backface-visibility: hidden;
}

body .woocommerce ul.products[class*="columns-"] li.product:hover a img,
body .woocommerce ul.products[class*="columns-"] li.product:focus-within a img,
.wc-block-product:hover .wc-block-components-product-image img,
.wc-block-product:focus-within .wc-block-components-product-image img {
	transform: scale(1.055);
	filter: brightness(.94) saturate(1.06);
}

/* --- the caption eases up to meet it --- */

body .woocommerce ul.products[class*="columns-"] li.product .woocommerce-loop-product__title,
body .woocommerce ul.products[class*="columns-"] li.product .price,
.wc-block-product .wp-block-post-title,
.wc-block-product .wc-block-components-product-price {
	transition:
		transform var(--ff-hover-mid) var(--ff-hover-ease),
		color var(--ff-hover-mid) var(--ff-hover-ease);
}

body .woocommerce ul.products[class*="columns-"] li.product:hover .woocommerce-loop-product__title,
body .woocommerce ul.products[class*="columns-"] li.product:focus-within .woocommerce-loop-product__title,
.wc-block-product:hover .wp-block-post-title,
.wc-block-product:focus-within .wp-block-post-title {
	transform: translateY(-3px);
}

body .woocommerce ul.products[class*="columns-"] li.product:hover .price,
body .woocommerce ul.products[class*="columns-"] li.product:focus-within .price,
.wc-block-product:hover .wc-block-components-product-price,
.wc-block-product:focus-within .wc-block-components-product-price {
	transform: translateY(-3px);
}

/* --- motion and touch --- */

@media (prefers-reduced-motion: reduce) {
	body .woocommerce ul.products[class*="columns-"] li.product a img,
	.wc-block-product .wc-block-components-product-image img,
	body .woocommerce ul.products[class*="columns-"] li.product .woocommerce-loop-product__title,
	.wc-block-product .wp-block-post-title {
		transition: none;
	}
	body .woocommerce ul.products[class*="columns-"] li.product:hover a img,
	.wc-block-product:hover .wc-block-components-product-image img {
		transform: none;
		filter: none;
	}
}

/* A tap on a phone would otherwise leave the card stuck mid-hover. */
@media (hover: none) {
	body .woocommerce ul.products[class*="columns-"] li.product:hover a img,
	.wc-block-product:hover .wc-block-components-product-image img {
		transform: none;
		filter: none;
	}
	body .woocommerce ul.products[class*="columns-"] li.product:hover .woocommerce-loop-product__title,
	body .woocommerce ul.products[class*="columns-"] li.product:hover .price,
	.wc-block-product:hover .wp-block-post-title,
	.wc-block-product:hover .wc-block-components-product-price {
		transform: none;
	}
}

/* ------------------------------------------------------------------ *
 * Hover border
 *
 * Drawn as a pseudo-element, never on the image itself: the image is
 * scaled on hover, and a border on it would scale and clip with it.
 *
 * The block grid has a wrapper around just the image. The shortcode loop
 * does not — its link wraps title and price too — so there the border is
 * anchored to the top of the card and given the same 436:576 ratio as the
 * thumbnail, which lands it exactly over the image.
 * ------------------------------------------------------------------ */

body .woocommerce ul.products[class*="columns-"] li.product { position: relative; }

body .woocommerce ul.products[class*="columns-"] li.product::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	aspect-ratio: 436 / 576;
	border: 2px solid #FFFFFF;
	opacity: 0;
	pointer-events: none;
	z-index: 2;
	transition: opacity 320ms var(--ff-hover-ease);
}

.wc-block-product .wc-block-components-product-image { position: relative; }

.wc-block-product .wc-block-components-product-image::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid #FFFFFF;
	opacity: 0;
	pointer-events: none;
	z-index: 2;
	transition: opacity 320ms var(--ff-hover-ease);
}

body .woocommerce ul.products[class*="columns-"] li.product:hover::after,
body .woocommerce ul.products[class*="columns-"] li.product:focus-within::after,
.wc-block-product:hover .wc-block-components-product-image::after,
.wc-block-product:focus-within .wc-block-components-product-image::after {
	opacity: 1;
}

@media (hover: none) {
	body .woocommerce ul.products[class*="columns-"] li.product:hover::after,
	.wc-block-product:hover .wc-block-components-product-image::after { opacity: 0; }
}

/* ================================================================== *
 * Heading scale
 *
 * Every section heading is matched to the hero wordmark so the page has
 * one display size rather than six competing ones. The slider headline
 * is deliberately excluded — it is the one place that should dominate.
 * ================================================================== */

:root {
	/* 42px. Fixed rather than fluid so the size is exact on desktop; the
	   media query below keeps long headings from overflowing a phone. */
	--ff-heading: 2.625rem;
}

@media (max-width: 760px) {
	:root {
		--ff-heading: clamp(1.5rem, 5.6vw, 2.625rem);
	}
}

.ff-section-title,
.ff-category__title,
.ff-banner__title,
.ff-panel__title,
.ff-sale__title,
.ff-social__title,
.ff-promo__title,
.ff-archive__title,
.ff-checkout__title,
.ff-product__title,
.ff-newsletter__title {
	font-size: var(--ff-heading);
	line-height: 1.15;
}

/* The two that carry a line break need a tighter leading to stay compact. */
.ff-banner__title,
.ff-panel__title {
	line-height: 1.05;
}

/* ------------------------------------------------------------------ *
 * Wordmark
 *
 * The supplied logo is dark type on cream, so it was lifted onto
 * transparency and re-coloured; the porcelain variant is the one used
 * against the mulberry header and footer.
 * ------------------------------------------------------------------ */

.ff-wordmark,
.ff-footer__mark {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.ff-wordmark img {
	height: clamp(1.5rem, 2.3vw, 2.375rem);
	width: auto;
	display: block;
}

.ff-footer__mark img {
	height: clamp(1.375rem, 1.8vw, 1.875rem);
	width: auto;
	display: block;
}

/* ------------------------------------------------------------------ *
 * Fabric line on the product card
 *
 * Sits between the name and the price, at the price's size, so the card
 * reads name → material → price. Driven by the Fabric product attribute,
 * not hardcoded, so it updates with the product.
 * ------------------------------------------------------------------ */

.ff-grid__fabric {
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(.875rem, .83vw, 1rem);
	font-weight: 300;
	letter-spacing: .03em;
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
	margin: 0 0 .3rem;
}
.ff-grid__fabric a {
	color: inherit;
	text-decoration: none;
	pointer-events: none;
}

/* On the mulberry band the muted grey would sink into the background. */
.ff-band--dark .ff-grid__fabric { color: rgba(251, 246, 242, .62); }

/* The name already carries the card, so tighten the gap beneath it. */
.wc-block-product .wp-block-post-title { margin-bottom: .3rem; }