/* ==========================================================================
   55TH Avenue - Page layout patterns
   ========================================================================== */

/* Homepage full-bleed magazine sections (Chanel-style) --------------------- */

.fa-hero {
	position: relative;
	width: 100%;
	min-height: 600px;
	height: 88vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

@media (min-width: 1024px) {
	.fa-hero {
		height: 100vh;
	}
}

.fa-hero__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.fa-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.28) 100%);
}

.fa-hero--tone-light .fa-hero__overlay {
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.15) 100%);
}

.fa-hero__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 760px;
	padding: 0 var(--margin-mobile);
	color: var(--color-on-primary);
}

.fa-hero--tone-light .fa-hero__content {
	color: var(--color-primary);
}

.fa-hero__label {
	margin-bottom: 16px;
	opacity: 0.9;
}

.fa-hero__headline {
	margin-bottom: 32px;
	line-height: 1.1;
}

/* Text + image editorial split, asymmetric Hermès-style pages -------------- */

.fa-editorial-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	align-items: center;
}

/* Lets a .fa-editorial-split sit as a <li> inside ul.products (see
   template-parts/category-archive-content.php) and break the product
   grid's row rhythm with a full-width band, rather than just becoming an
   oddly narrow grid cell like every product card around it. */
.fa-editorial-split--grid-span {
	grid-column: 1 / -1;
	padding: var(--gutter) 0;
}

@media (min-width: 1024px) {
	.fa-editorial-split {
		grid-template-columns: 7fr 5fr;
		gap: var(--gutter);
		min-height: 640px;
	}

	.fa-editorial-split--reverse {
		grid-template-columns: 5fr 7fr;
	}

	.fa-editorial-split--reverse .fa-editorial-split__media {
		order: 2;
	}

	.fa-editorial-split--reverse .fa-editorial-split__text {
		order: 1;
	}
}

.fa-editorial-split__media {
	width: 100%;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--color-surface-container-low);
}

@media (min-width: 1024px) {
	.fa-editorial-split__media {
		aspect-ratio: auto;
		height: 640px;
	}
}

.fa-editorial-split__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scale(1);
	transition: transform 0.8s var(--ease);
}

.fa-editorial-split:hover .fa-editorial-split__media img {
	transform: scale(1.05);
}

.fa-editorial-split__text {
	padding: 0 var(--margin-mobile);
	max-width: 520px;
}

@media (min-width: 1024px) {
	.fa-editorial-split__text {
		padding: 0 var(--margin-desktop) 0 0;
	}

	.fa-editorial-split--reverse .fa-editorial-split__text {
		padding: 0 0 0 var(--margin-desktop);
	}
}

.fa-editorial-split__label {
	margin-bottom: 16px;
	color: var(--color-on-surface-variant);
}

.fa-editorial-split__heading {
	margin-bottom: 20px;
}

.fa-editorial-split__body {
	color: var(--color-on-surface-variant);
	margin-bottom: 28px;
}

/* Full-bleed banner CTA block ------------------------------------------------ */

.fa-banner {
	position: relative;
	width: 100%;
	min-height: 420px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--color-surface-container-low);
}

.fa-banner__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fa-banner__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.25);
}

.fa-banner__content {
	position: relative;
	z-index: 2;
	text-align: center;
	color: var(--color-on-primary);
	padding: 48px var(--margin-mobile);
	max-width: 640px;
}

/* Asymmetric editorial grid (Hermès category pages) ------------------------- */

.fa-asym-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--gutter);
}

.fa-asym-grid__item {
	grid-column: span 12;
}

@media (min-width: 768px) {
	.fa-asym-grid__item--w4 { grid-column: span 4; }
	.fa-asym-grid__item--w5 { grid-column: span 5; }
	.fa-asym-grid__item--w6 { grid-column: span 6; }
	.fa-asym-grid__item--w7 { grid-column: span 7; }
	.fa-asym-grid__item--w8 { grid-column: span 8; }
	.fa-asym-grid__item--offset-up { margin-top: -64px; }
	.fa-asym-grid__item--offset-down { margin-top: 64px; }
}

.fa-asym-grid__item img {
	width: 100%;
	display: block;
	object-fit: cover;
}

.fa-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.fa-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Shop / category toolbar & filters (Farfetch density) ----------------------- */

.fa-shop-head {
	padding: var(--section-gap) 0 48px;
	text-align: center;
	max-width: 720px;
	margin: 0 auto;
}

.fa-shop-head__title {
	margin-bottom: 20px;
}

.fa-shop-head__desc {
	color: var(--color-on-surface-variant);
}

.fa-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	row-gap: 12px;
	padding: 20px 0;
	border-top: 1px solid var(--color-outline-variant);
	border-bottom: 1px solid var(--color-outline-variant);
	margin-bottom: 48px;
}

.fa-toolbar__filter-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: none;
	color: var(--color-primary);
	/* Text + icon alone line-height to ~20px — padding brings the real
	   tap target up to 44px without changing how the label looks. */
	padding: 12px 0;
}

.fa-toolbar__filter-toggle svg {
	width: 18px;
	height: 18px;
}

.fa-toolbar__meta {
	display: flex;
	align-items: center;
	gap: 24px;
}

.fa-toolbar__sort select {
	background: none;
	border: none;
	font-size: var(--size-label-caps);
	letter-spacing: var(--tracking-label-caps);
	text-transform: uppercase;
	color: var(--color-primary);
}

.fa-shop-layout {
	display: block;
	/* Neither the pagination block below a product grid nor the "no
	   products found" notice carry their own bottom spacing, so without
	   this the page ends abruptly right into the footer. */
	padding-bottom: var(--section-gap);
}

/* Filter drawer: slides in from the left over a dimmed .fa-scrim, the
   same fixed-panel pattern as .fa-mobile-nav, rather than an inline
   sidebar that pushes the product grid over. */
.fa-filter-panel {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: min(400px, 90vw);
	background: var(--color-surface);
	border-right: 1px solid var(--color-outline-variant);
	/* Above .fa-header's own z-index (950): the header's nav <ul> spans
	   full width even where its centered links leave it visually empty,
	   so at a lower z-index it silently intercepts clicks on this panel
	   wherever the two overlap at the top of the viewport. */
	z-index: 960;
	transform: translateX(-100%);
	transition: transform 0.35s var(--ease);
	display: flex;
	flex-direction: column;
}

.fa-filter-panel.is-open {
	transform: translateX(0);
}

.fa-filter-panel__head {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 20px 28px;
	border-bottom: 1px solid var(--color-outline-variant);
}

.fa-filter-panel__close {
	background: none;
	border: none;
	color: var(--color-primary);
	padding: 4px;
}

.fa-filter-panel__close svg {
	width: 20px;
	height: 20px;
}

.fa-filter-panel__body {
	flex: 1;
	overflow-y: auto;
	padding: 0 28px;
}

.fa-filter-panel__body .fa-accordion__content {
	padding-top: 0;
}

.fa-filter-panel__foot {
	display: flex;
	gap: 12px;
	padding: 20px 28px;
	border-top: 1px solid var(--color-outline-variant);
}

.fa-filter-panel__foot .btn {
	flex: 1;
}

.fa-filter-group__options {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.fa-filter-group__options label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: var(--size-body-md);
	color: var(--color-on-surface-variant);
	cursor: pointer;
}

/* Cart line-item "Edit" drawer — same fixed-panel mechanism as
   .fa-filter-panel (see comment above it), mirrored to the right edge
   instead of the left. */
.fa-cart-edit-panel {
	position: fixed;
	top: 0;
	right: 0;
	height: 100%;
	width: min(400px, 90vw);
	background: var(--color-surface);
	border-left: 1px solid var(--color-outline-variant);
	z-index: 960;
	transform: translateX(100%);
	transition: transform 0.35s var(--ease);
	display: flex;
	flex-direction: column;
}

.fa-cart-edit-panel.is-open {
	transform: translateX(0);
}

.fa-cart-edit-panel__head {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 20px 28px;
	border-bottom: 1px solid var(--color-outline-variant);
}

.fa-cart-edit-panel__close {
	background: none;
	border: none;
	color: var(--color-primary);
	padding: 4px;
}

.fa-cart-edit-panel__close svg {
	width: 20px;
	height: 20px;
}

.fa-cart-edit-panel__body {
	flex: 1;
	overflow-y: auto;
	padding: 24px 28px;
}

.fa-cart-edit-panel__media {
	width: 96px;
	height: 128px;
	object-fit: cover;
	margin-bottom: 20px;
}

.fa-cart-edit-panel__title {
	font-family: var(--font-serif);
	font-size: var(--size-headline-md);
	margin-bottom: 24px;
}

.fa-cart-edit-panel__label {
	margin-bottom: 12px;
	color: var(--color-on-surface-variant);
}

.fa-cart-edit-panel__attribute + .fa-cart-edit-panel__attribute {
	margin-top: 24px;
}

.fa-cart-edit-panel__empty {
	color: var(--color-on-surface-variant);
}

.fa-cart-edit-panel__foot {
	padding: 20px 28px;
	border-top: 1px solid var(--color-outline-variant);
}

.fa-cart-edit-panel__foot .btn {
	width: 100%;
}

.fa-qty-field {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.fa-qty-field label {
	color: var(--color-on-surface-variant);
}

.fa-qty-field__input {
	width: 56px;
	border: 1px solid var(--color-outline-variant);
	background: transparent;
	padding: 10px 4px;
	text-align: center;
	font-family: var(--font-sans);
	font-size: var(--size-body-md);
	color: var(--color-primary);
}

.fa-qty-field__input:disabled {
	color: var(--color-on-surface-variant);
	opacity: 0.5;
}

.fa-qty-field.is-loading {
	opacity: 0.5;
	pointer-events: none;
}

.fa-filter-group__options input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--color-primary);
}

.fa-filter-group__swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.fa-filter-swatch {
	width: 28px;
	height: 28px;
	border: 1px solid var(--color-outline-variant);
	cursor: pointer;
}

.fa-filter-swatch.is-selected {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.fa-filter-range {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.fa-product-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--gutter) 16px;
}

@media (min-width: 768px) {
	.fa-product-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1024px) {
	.fa-product-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--gutter);
	}
}

.fa-load-more {
	display: flex;
	justify-content: center;
	margin-top: 64px;
}

/* Gift guide ------------------------------------------------------------------ */

.fa-gift-hero {
	position: relative;
	width: 100%;
	height: 70vh;
	min-height: 480px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.fa-gift-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
	margin-bottom: 48px;
}

.fa-gift-filters button {
	background: none;
	border: none;
	padding-bottom: 6px;
	color: var(--color-on-surface-variant);
	font-size: var(--size-label-caps);
	letter-spacing: var(--tracking-label-caps);
	text-transform: uppercase;
}

.fa-gift-filters button.is-active,
.fa-gift-filters button:hover {
	color: var(--color-primary);
}

/* Sticky product info panel (PDP) ---------------------------------------------- */

.fa-pdp {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gutter);
	align-items: flex-start;
}

@media (min-width: 1024px) {
	.fa-pdp {
		grid-template-columns: 7fr 5fr;
	}
}

.fa-pdp__gallery {
	display: flex;
	flex-direction: column;
	gap: var(--unit);
}

.fa-pdp__gallery-item {
	width: 100%;
	aspect-ratio: 3 / 4;
	background: var(--color-surface-container-low);
	overflow: hidden;
}

.fa-pdp__gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fa-pdp__panel {
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding-top: 16px;
}

@media (min-width: 1024px) {
	.fa-pdp__panel {
		position: sticky;
		top: 140px;
		padding-left: var(--gutter);
	}
}

.fa-size-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

.fa-size-option {
	border: 1px solid var(--color-outline);
	padding: 12px 0;
	text-align: center;
	background: transparent;
	font-size: var(--size-label-caps);
	letter-spacing: var(--tracking-label-caps);
	text-transform: uppercase;
	transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.fa-size-option:hover {
	border-color: var(--color-primary);
	background: var(--color-surface-container-low);
}

.fa-size-option.is-selected {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-on-primary);
}

.fa-size-option:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

/* Product carousels (Related / Recently Viewed / Complete the Look on the
   product page — see fa_render_product_carousel() in
   inc/template-tags.php) — a horizontally scroll-snapping row instead of
   a static grid, with a "1/N" position indicator and arrow controls kept
   in sync by assets/js/carousel.js. */
.fa-carousel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
}

.fa-carousel__controls {
	display: flex;
	align-items: center;
	gap: 16px;
}

.fa-carousel__position {
	color: var(--color-on-surface-variant);
}

.fa-carousel__arrow {
	background: none;
	border: 1px solid var(--color-outline-variant);
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-primary);
	flex-shrink: 0;
}

.fa-carousel__arrow svg {
	width: 16px;
	height: 16px;
}

.fa-carousel__arrow[data-carousel-prev] svg {
	transform: rotate(90deg);
}

.fa-carousel__arrow[data-carousel-next] svg {
	transform: rotate(-90deg);
}

.fa-carousel__arrow:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.fa-carousel__track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	list-style: none;
	padding: 0;
	margin: 0;
	scrollbar-width: none;
}

.fa-carousel__track::-webkit-scrollbar {
	display: none;
}

.fa-carousel__track > .fa-product-card {
	flex: 0 0 220px;
	scroll-snap-align: start;
}

@media (min-width: 768px) {
	.fa-carousel__track > .fa-product-card {
		flex-basis: 280px;
	}
}

/* Cart & checkout --------------------------------------------------------------- */

.fa-checkout-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--section-gap);
}

@media (min-width: 1024px) {
	.fa-checkout-layout {
		grid-template-columns: 1fr 480px;
	}
}

.fa-order-summary {
	background: var(--color-surface-container-low);
	border: 1px solid var(--color-outline-variant);
	padding: 32px;
	align-self: start;
}

@media (min-width: 1024px) {
	.fa-order-summary {
		position: sticky;
		top: 140px;
	}
}

.fa-order-summary__item {
	display: flex;
	gap: 16px;
	align-items: center;
}

.fa-order-summary__thumb {
	width: 72px;
	height: 96px;
	background: var(--color-surface-dim);
	overflow: hidden;
	flex-shrink: 0;
}

.fa-order-summary__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fa-order-summary__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* Account -------------------------------------------------------------------------- */

.fa-account-nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
	border: 1px solid var(--color-outline-variant);
}

.fa-account-nav a {
	display: block;
	padding: 16px 20px;
	border-bottom: 1px solid var(--color-outline-variant);
	font-size: var(--size-label-caps);
	letter-spacing: var(--tracking-label-caps);
	text-transform: uppercase;
}

.fa-account-nav a:last-child {
	border-bottom: none;
}

.fa-account-nav a.is-active,
.fa-account-nav a:hover {
	background: var(--color-primary);
	color: var(--color-on-primary);
}

.fa-account-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}

@media (min-width: 1024px) {
	.fa-account-layout {
		grid-template-columns: 260px 1fr;
	}
}

/* Editorial sections built from core WordPress blocks (Cover, Media & Text,
   Buttons) via the block patterns in inc/editorial-blocks.php ------------- */

.fa-block-hero.wp-block-cover {
	min-height: 88vh;
}

@media (min-width: 1024px) {
	.fa-block-hero.wp-block-cover {
		min-height: 100vh;
	}
}

/* Hero text sits on photos editors choose, some of them light, so every hero
   gets one even, full-image overlay and white text instead of relying on the
   block's own 30% tint (the Gift Guide hero measured 1.7:1 on it, DEF-024).
   The small label also gets a soft shadow, as it's the thinnest text. */
.fa-block-hero .wp-block-cover__background.has-background-dim {
	background-color: #000 !important;
	opacity: 0.5 !important;
}

.fa-block-hero .wp-block-cover__inner-container,
.fa-block-hero .wp-block-cover__inner-container a,
.fa-block-hero .wp-block-cover__inner-container h2 {
	color: #fff;
}

.fa-block-hero .fa-block-label {
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.fa-block-banner.wp-block-cover {
	min-height: 420px;
}

.wp-block-cover .fa-block-label,
.wp-block-media-text .fa-block-label {
	font-family: var(--font-sans);
	font-size: var(--size-label-caps);
	line-height: var(--lh-label-caps);
	letter-spacing: var(--tracking-label-caps);
	font-weight: 600;
	text-transform: uppercase;
	opacity: 0.9;
	margin-bottom: 16px;
}

.fa-block-label a {
	color: inherit;
	text-decoration: none;
}

.wp-block-media-text .fa-block-label {
	color: var(--color-on-surface-variant);
	opacity: 1;
}

.wp-block-cover .fa-block-headline,
.wp-block-cover .fa-block-heading {
	font-family: var(--font-serif);
	font-size: var(--size-headline-lg);
	line-height: var(--lh-headline-lg);
	font-weight: 400;
	max-width: 760px;
	margin: 0 auto 32px;
}

.fa-block-headline a {
	color: inherit;
	text-decoration: none;
}

.wp-block-media-text .fa-block-heading {
	font-family: var(--font-serif);
	font-size: var(--size-headline-md);
	line-height: var(--lh-headline-md);
	font-weight: 400;
	margin-bottom: 20px;
}

.wp-block-cover .fa-block-body {
	font-family: var(--font-sans);
	font-size: var(--size-body-lg);
	line-height: var(--lh-body-lg);
	max-width: 560px;
	margin: -12px auto 28px;
}

.wp-block-media-text .fa-block-body {
	font-family: var(--font-sans);
	font-size: var(--size-body-md);
	color: var(--color-on-surface-variant);
	margin-bottom: 28px;
}

.wp-block-media-text.fa-block-split {
	align-items: center;
	gap: var(--gutter);
	padding: var(--section-gap) var(--margin-mobile);
}

@media (min-width: 1024px) {
	.wp-block-media-text.fa-block-split {
		padding: var(--section-gap) var(--margin-desktop);
		grid-template-columns: 7fr 5fr;
	}

	.wp-block-media-text.fa-block-split.has-media-on-the-right {
		grid-template-columns: 5fr 7fr;
	}
}

.wp-block-media-text.fa-block-split .wp-block-media-text__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wp-block-media-text.fa-block-split .wp-block-media-text__content {
	padding: 32px 0;
}

@media (min-width: 1024px) {
	.wp-block-media-text.fa-block-split .wp-block-media-text__content {
		padding: 0 0 0 var(--gutter);
	}

	.wp-block-media-text.fa-block-split.has-media-on-the-right .wp-block-media-text__content {
		padding: 0 var(--gutter) 0 0;
	}
}

.fa-media-placeholder {
	width: 100%;
	height: 100%;
	min-height: 420px;
	background: var(--color-surface-container-high);
}

/* Color block feature (fa_pattern_colorblock_markup()) — a solid-fill
   panel with the image cropped and floated off one edge, not centered
   inside it. The fill stays within the monochrome palette (black) rather
   than a saturated brand color, per the site's "no accent colors" rule. */
.fa-block-colorblock {
	position: relative;
	/* z-index:0 (not just position:relative) is what actually makes this
	   element establish its own stacking context — without it, the
	   negative z-index background image below renders behind this
	   element's own background instead of in front of it, since it ends
	   up contained by whatever ancestor DOES establish a context instead
	   of this one. */
	z-index: 0;
	overflow: hidden;
	min-height: 520px;
	display: flex;
	align-items: center;
	background: var(--color-primary);
	color: var(--color-on-primary);
}

.fa-block-colorblock__text {
	position: relative;
	z-index: 1;
	padding: 64px var(--margin-mobile);
	/* This is the full text-side REGION, not the text's own reading
	   width — on mobile it's the whole section width; on desktop it's
	   everything left of where __media floats in (see the --right/--left
	   rules below). Stretching to the row's full height and centering
	   its one child (.text-inner) both ways is what puts that child in
	   the middle of this region — and so in the middle of the visible
	   background image — instead of pinned to this box's own edge. */
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fa-block-colorblock__text-inner {
	/* The actual reading-width column, centered within the wider region
	   above by that region's own flex centering — kept separate so a
	   readable line length doesn't force the whole region (and the
	   image behind it) to be that narrow too. */
	max-width: 440px;
	text-align: center;
}

/* Optional — only present when the pattern is given a background image
   (see fa_pattern_colorblock_markup()). These are children of the outer
   .fa-block-colorblock itself, not the narrower __text column, so the
   image covers the full section — including the gap that otherwise sits
   flat-black between the text column and the floated __media image —
   rather than stopping at the text's own reading-width column. Negative
   z-index keeps both behind the outer element's own children (the text
   column and the media figure); the outer element's own overflow:hidden
   clips them to the section's bounds. */
.fa-block-colorblock__text-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}

.fa-block-colorblock__text-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	z-index: -1;
}

@media (min-width: 1024px) {
	.fa-block-colorblock__text {
		padding: 80px var(--margin-desktop);
	}

	/* .fa-block-colorblock__media is ~42% wide, floated off one edge —
	   these give .text the complementary ~58% region on the OTHER edge
	   (a real width, not just a margin push), so its centered inner
	   content lands in the middle of the visible photo instead of at
	   this box's own edge. */
	.fa-block-colorblock--right .fa-block-colorblock__text {
		width: 58%;
	}

	.fa-block-colorblock--left .fa-block-colorblock__text {
		width: 58%;
		margin-left: 42%;
	}
}

.fa-block-colorblock .fa-block-label,
.fa-block-colorblock .fa-block-heading {
	color: var(--color-on-primary);
}

.fa-block-colorblock .fa-block-body {
	color: var(--color-inverse-primary);
	margin: 0 0 28px;
	max-width: none;
}

.fa-block-colorblock__media {
	display: none;
}

@media (min-width: 1024px) {
	.fa-block-colorblock__media {
		display: block;
		position: absolute;
		top: 50%;
		width: 42%;
		max-width: 520px;
		transform: translateY(-50%);
	}

	.fa-block-colorblock--right .fa-block-colorblock__media {
		right: -32px;
	}

	.fa-block-colorblock--left .fa-block-colorblock__media {
		left: -32px;
	}

	.fa-block-colorblock__media img {
		width: 100%;
		display: block;
		aspect-ratio: 3 / 4;
		object-fit: cover;
	}
}

/* Mixed aspect-ratio row (fa_pattern_mixedgrid_markup()) — a tall
   portrait beside two stacked squares, rather than forcing every image
   in the row into the same crop. Degrades to a single stacked column on
   mobile instead of just shrinking the asymmetric grid in place. */
.fa-block-mixedgrid {
	display: flex;
	flex-direction: column;
	gap: var(--gutter);
	padding: var(--section-gap) var(--margin-mobile);
	max-width: var(--container-max);
	margin: 0 auto;
}

@media (min-width: 1024px) {
	.fa-block-mixedgrid {
		flex-direction: row;
		padding: var(--section-gap) var(--margin-desktop);
	}
}

.fa-block-mixedgrid__portrait {
	flex: 1.2;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--color-surface-container-low);
}

.fa-block-mixedgrid__squares {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--gutter);
}

@media (min-width: 1024px) {
	.fa-block-mixedgrid__squares {
		grid-template-columns: 1fr;
		grid-template-rows: repeat(2, 1fr);
	}
}

.fa-block-mixedgrid__square {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--color-surface-container-low);
}

.fa-block-mixedgrid__portrait img,
.fa-block-mixedgrid__square img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Buttons block, restyled to match .btn */
.wp-block-buttons {
	margin-top: 0;
}

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 32px !important;
	border: 1px solid var(--color-primary);
	background: var(--color-primary);
	color: var(--color-on-primary) !important;
	font-family: var(--font-sans);
	font-size: var(--size-label-caps);
	letter-spacing: var(--tracking-label-caps);
	font-weight: 600;
	text-transform: uppercase;
	transition: background 0.3s var(--ease), color 0.3s var(--ease);
}

.wp-block-button__link:hover {
	background: var(--color-inverse-surface);
	border-color: var(--color-inverse-surface);
}

.fa-btn-inverse .wp-block-button__link {
	background: var(--color-on-primary);
	color: var(--color-primary) !important;
	border-color: var(--color-on-primary);
}

.fa-btn-inverse .wp-block-button__link:hover {
	background: var(--color-surface-container-low);
}

.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--color-primary) !important;
}

.is-style-outline .wp-block-button__link:hover {
	background: var(--color-surface-container-low);
}

/* Passwordless sign-in / register (woocommerce/myaccount/form-login.php) ---- */

.fa-auth {
	max-width: 400px;
	margin: 0 auto;
	padding: 80px var(--margin-mobile) 120px;
	text-align: center;
}

.fa-auth__eyebrow {
	color: var(--color-on-surface-variant);
	margin-bottom: 12px;
}

.fa-auth__title {
	margin-bottom: 40px;
}

.fa-auth__step .fa-field {
	text-align: left;
	margin-bottom: 28px;
}

.fa-auth__submit {
	width: 100%;
}

.fa-auth__code-copy {
	color: var(--color-on-surface-variant);
	margin-bottom: 28px;
}

.fa-auth__error {
	color: var(--color-error, #a4231f);
	font-size: var(--size-label-md);
	margin: -16px 0 20px;
	text-align: left;
}

.fa-auth__links {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 24px;
}

/* Contact Us (page-contact.php) --------------------------------------------- */

.fa-contact {
	display: grid;
	grid-template-columns: 1fr;
	gap: 56px;
}

@media (min-width: 1024px) {
	.fa-contact {
		grid-template-columns: 7fr 5fr;
	}
}

.fa-contact__form .fa-field {
	margin-bottom: 24px;
}

.fa-contact__message {
	margin-top: 16px;
	color: var(--color-on-surface-variant);
}

.fa-contact__message.is-error {
	color: var(--color-error);
}

.fa-contact__info {
	padding: 40px;
	background: var(--color-surface-container-low);
	align-self: start;
}

/* Two-column "index on the left, sections on the right" layout shared by
   FAQ, Privacy Policy, Terms of Service, Shipping & Returns and Refund and
   Returns Policy — see fa_render_policy_layout() in inc/policy-content.php. */

.fa-policy {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}

@media (min-width: 1024px) {
	.fa-policy {
		grid-template-columns: 4fr 6fr;
		gap: var(--gutter);
		align-items: start;
	}

	/* top matches exactly where this lands in normal flow (header height
	   + this section's top padding), so it locks in place on the very
	   first pixel of scroll instead of visibly sliding to catch up —
	   while still correctly (and safely) releasing before the footer,
	   which a plain `position: fixed` can't do without extra JS. */
	.fa-policy__aside {
		position: sticky;
		top: 283px;
	}
}

.fa-policy__title {
	margin-bottom: 32px;
}

.fa-policy__toc {
	display: flex;
	flex-direction: column;
}

.fa-policy__toc a {
	padding: 12px 0;
	color: var(--color-on-surface-variant);
	transition: color 0.3s var(--ease);
}

.fa-policy__toc a:hover {
	color: var(--color-primary);
}

.fa-policy__section {
	padding-bottom: 40px;
	margin-bottom: 40px;
	scroll-margin-top: 152px;
}

.fa-policy__section:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
}

.fa-policy__section-title {
	color: var(--color-on-surface-variant);
	margin-bottom: 16px;
}

.fa-policy__content p {
	font-size: var(--size-body-md);
	color: var(--color-on-surface-variant);
	margin-bottom: 16px;
}

.fa-policy__content p:last-child {
	margin-bottom: 0;
}

.fa-policy__content ul {
	margin: 0 0 16px 20px;
	color: var(--color-on-surface-variant);
	font-size: var(--size-body-md);
}

.fa-policy__content li {
	margin-bottom: 8px;
}

.fa-policy__content .fa-accordion:first-of-type summary {
	padding-top: 0;
}