/* ==========================================================================
   55TH Avenue - Components
   ========================================================================== */

/* Buttons --------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--unit);
	padding: 16px 32px;
	border: 1px solid var(--color-primary);
	background: var(--color-primary);
	color: var(--color-on-primary);
	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;
	transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.btn:hover {
	background: var(--color-inverse-surface);
	border-color: var(--color-inverse-surface);
}

.btn-outline {
	background: transparent;
	color: var(--color-primary);
}

.btn-outline:hover {
	background: var(--color-surface-container-low);
	color: var(--color-primary);
}

.btn-inverse {
	background: var(--color-on-primary);
	color: var(--color-primary);
	border-color: var(--color-on-primary);
}

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

.btn-block {
	display: flex;
	width: 100%;
}

.btn-text {
	display: inline-block;
	border: none;
	background: none;
	padding: 0 0 4px;
	color: var(--color-primary);
	text-decoration: none;
	transition: color 0.3s var(--ease);
}

.btn-text:hover {
	color: var(--color-on-surface-variant);
}

/* Site header / nav ------------------------------------------------------ */

.fa-header {
	position: sticky;
	top: 0;
	z-index: 950;
	width: 100%;
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-outline-variant);
	transition: padding 0.3s var(--ease);
}

/* The WP admin toolbar is position:fixed at the true viewport top:0 with
   a much higher z-index than anything on the page, so a sticky header
   also pinned at top:0 sticks directly behind/under it instead of below
   it — every scroll, for as long as you're logged in. WordPress adds
   the .admin-bar class to <html> whenever the toolbar is showing; the
   bar itself is 32px tall at desktop widths and 46px on the toolbar's
   own mobile breakpoint (782px, not this theme's 1024px). */
.admin-bar .fa-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .fa-header {
		top: 46px;
	}
}

.fa-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 20px var(--margin-mobile) 16px;
	gap: var(--unit);
}

@media (min-width: 1024px) {
	.fa-header__bar {
		padding: 24px var(--margin-desktop) 16px;
	}
}

.fa-header__side {
	display: flex;
	align-items: center;
	gap: 20px;
	flex: 1 1 0;
}

/* Flex children default to min-width: auto, so the icon cluster's natural
   width (4 icons + gaps) never shrinks on its own however narrow the
   viewport gets — it just overflows the page instead. Tightening the gap
   below the narrowest supported width (320px) closes that gap without
   shrinking the icons themselves, since their tap targets are already
   tight (see .fa-header__icon padding) and shouldn't get smaller. */
@media (max-width: 360px) {
	.fa-header__side {
		gap: 6px;
	}
	.fa-header__bar {
		gap: 4px;
	}
	/* Giving the icon cluster flex-shrink: 0 (above) means the logo now
	   has to give up a little room instead — a smaller wordmark beats
	   icons squeezed down to an untappable 8px. */
	.fa-header__logo {
		font-size: 18px;
		letter-spacing: 0.06em;
	}
}

.fa-header__side--end {
	justify-content: flex-end;
}

.fa-header__logo {
	flex: 0 0 auto;
	font-family: var(--font-serif);
	font-size: 22px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: center;
}

@media (min-width: 1024px) {
	.fa-header__logo {
		font-size: 26px;
	}
}

/* Phones: the two header sides used to split the leftover width equally,
   so the four-icon cluster (wider than its half) spilled leftwards over the
   wordmark — at 375px the logo covered the search and account icons. Let
   the sides take their natural width and give the logo the middle, at a
   size that fits. (This sits after the base .fa-header__logo rule so it
   actually wins the cascade; the older 360px rule above never did.) */
@media (max-width: 599px) {
	.fa-header__side {
		flex: 0 0 auto;
		gap: 8px;
	}
	.fa-header__logo {
		flex: 1 1 auto;
		min-width: 0;
		font-size: 18px;
		letter-spacing: 0.06em;
		white-space: nowrap;
	}
}

@media (max-width: 360px) {
	.fa-header__side {
		gap: 4px;
	}
	.fa-header__logo {
		font-size: 15px;
		letter-spacing: 0.04em;
	}
}

.fa-header__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	color: var(--color-primary);
	padding: 4px;
	position: relative;
	transition: opacity 0.3s var(--ease);
	/* The logo beside these never shrinks (flex: 0 0 auto below), so at
	   narrow widths these were absorbing all the squeeze instead — down
	   to ~8px wide, well under even their own unpadded icon size. Floor
	   them at their natural, un-squished size. */
	flex-shrink: 0;
}

.fa-header__icon:hover {
	opacity: 0.6;
}

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

.fa-header__count {
	position: absolute;
	top: -4px;
	right: -6px;
	width: 16px;
	height: 16px;
	background: var(--color-primary);
	color: var(--color-on-primary);
	font-size: 10px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fa-header__count[hidden] {
	display: none;
}

/* Wishlist gets a plain presence dot instead of a count — the header
   icon just needs to say "there's something saved," not how many. */
.fa-header__dot {
	position: absolute;
	top: 0;
	right: 0;
	width: 8px;
	height: 8px;
	/* Overrides the sitewide sharp-corner reset (base.css) deliberately —
	   a presence dot reads as a dot only when round. */
	border-radius: 50% !important;
	background: var(--color-primary);
}

.fa-header__dot[hidden] {
	display: none;
}

.fa-header__hamburger {
	background: none;
	border: none;
	color: var(--color-primary);
	display: inline-flex;
	padding: 4px;
}

.fa-header__hamburger svg {
	width: 22px;
	height: 22px;
}

@media (min-width: 1024px) {
	/* Desktop has the hover-reveal category nav plus the mega menus for
	   deeper links, so the hamburger (which opens the mobile drawer) has
	   no job here — it's mobile-only. */
	.fa-header__hamburger {
		display: none;
	}
}

.fa-nav {
	display: none;
	width: 100%;
	justify-content: center;
	gap: 32px;
	padding: 0 var(--margin-mobile) 16px;
}

@media (min-width: 1024px) {
	/* Desktop: the category nav sits under the header bar, alongside the
	   wordmark, from the moment the page loads — no hover needed. Once
	   scrolling starts it's removed outright (same .is-scrolled state
	   that already hides the announcement strip, toggled in
	   assets/js/nav.js) to keep the sticky header compact, and it's back
	   as soon as the visitor scrolls near the top again. A plain display
	   toggle rather than an animated height/opacity transition: animating
	   a flex row's height clips and visibly squashes its text mid-transition,
	   which read as the header "distorting" while scrolling. */
	.fa-nav {
		display: flex;
		padding: 16px var(--margin-desktop) 20px;
	}

	.fa-header.is-scrolled .fa-nav {
		display: none;
	}

	/* ...but hovering (or keyboard-focusing into) the header while scrolled
	   brings it back, so the categories stay reachable without needing to
	   scroll all the way back to the top first. */
	.fa-header.is-scrolled:hover .fa-nav,
	.fa-header.is-scrolled:focus-within .fa-nav {
		display: flex;
	}
}

/* Mega menu: opened by clicking a top-level nav link, overlays the page
   below it (with the shared .fa-scrim) rather than navigating away
   immediately — see assets/js/nav.js. */

.fa-mega-menu {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 10;
	background: var(--color-surface-container-lowest);
	border-bottom: 1px solid var(--color-outline-variant);
	box-shadow: var(--shadow-ambient);
	padding: 48px var(--margin-desktop);
	max-height: calc(100vh - 120px);
	overflow-y: auto;
}

.fa-mega-menu.is-open {
	display: block;
}

.fa-mega-menu__close {
	position: absolute;
	top: 20px;
	right: var(--margin-desktop);
	background: none;
	border: none;
	color: var(--color-primary);
	padding: 6px;
}

.fa-mega-menu__close svg {
	width: 18px;
	height: 18px;
}

.fa-mega-menu__grid {
	display: grid;
	grid-template-columns: 220px repeat(4, 1fr);
	gap: var(--gutter);
	max-width: var(--container-max);
	margin: 0 auto;
}

.fa-mega-menu__feature {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.fa-mega-menu__feature-media {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: var(--color-surface-container-low);
	overflow: hidden;
}

.fa-mega-menu__feature-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fa-mega-menu__col {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

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

.fa-mega-menu__col a {
	padding: 8px 0;
	font-size: var(--size-body-md);
	color: var(--color-on-surface);
	transition: color 0.2s var(--ease);
}

.fa-mega-menu__col a:hover {
	color: var(--color-on-surface-variant);
}

@media (max-width: 1023px) {
	.fa-mega-menu {
		display: none !important;
	}
}

.fa-nav a {
	font-family: var(--font-sans);
	font-size: var(--size-label-caps);
	letter-spacing: var(--tracking-label-caps);
	font-weight: 600;
	text-transform: uppercase;
	color: var(--color-on-surface-variant);
	padding-bottom: 6px;
	transition: color 0.3s var(--ease);
}

.fa-nav a:hover,
.fa-nav a.is-current {
	color: var(--color-primary);
}

.fa-search-panel {
	display: none;
	width: 100%;
	border-top: 1px solid var(--color-outline-variant);
}

.fa-search-panel.is-open {
	display: block;
}

.fa-search-panel input[type="search"] {
	width: 100%;
	border: none;
	background: none;
	font-family: var(--font-serif);
	font-size: 20px;
	padding: 8px 0;
}

.fa-search-panel input[type="search"]:focus {
	outline: none;
	box-shadow: inset 0 -2px 0 var(--color-primary);
}

.fa-header.is-scrolled .fa-announcement {
	display: none;
}

.fa-announcement {
	text-align: center;
	padding: 8px var(--margin-mobile);
	font-family: var(--font-sans);
	font-size: 10px;
	letter-spacing: var(--tracking-label-caps);
	text-transform: uppercase;
	color: var(--color-on-surface-variant);
	border-bottom: 1px solid var(--color-outline-variant);
	display: none;
}

@media (min-width: 1024px) {
	.fa-announcement {
		display: block;
	}
}

/* Mobile drawer nav ------------------------------------------------------ */

.fa-mobile-nav {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: min(340px, 86vw);
	background: var(--color-surface);
	border-right: 1px solid var(--color-outline-variant);
	/* Above .fa-header's own z-index (950), same as the filter drawer —
	   otherwise the header's icons sit on top and intercept taps on this
	   drawer's own controls (its close button included) while it's open. */
	z-index: 960;
	transform: translateX(-100%);
	transition: transform 0.35s var(--ease);
	overflow-y: auto;
	padding: 32px 28px;
}

.fa-mobile-nav.is-open {
	transform: translateX(0);
}

.fa-mobile-nav__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 40px;
}

.fa-mobile-nav__close {
	background: none;
	border: none;
	color: var(--color-primary);
}

.fa-mobile-nav__close svg {
	width: 22px;
	height: 22px;
}

.fa-mobile-nav__list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.fa-mobile-nav__list a {
	display: block;
	padding: 14px 4px;
	border-bottom: 1px solid var(--color-outline-variant);
	font-family: var(--font-sans);
	font-size: var(--size-label-caps);
	letter-spacing: var(--tracking-label-caps);
	text-transform: uppercase;
	font-weight: 600;
	color: var(--color-on-surface);
}

.fa-mobile-nav__account {
	margin-top: 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.fa-mobile-nav__account a {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-sans);
	font-size: var(--size-body-md);
	color: var(--color-on-surface-variant);
}

.fa-scrim {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.3);
	z-index: 800;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s var(--ease);
}

.fa-scrim.is-visible {
	opacity: 1;
	pointer-events: auto;
}

body.fa-nav-open {
	overflow: hidden;
}

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

/* Genuinely pinned to the bottom of the viewport, sitting behind
   #fa-main (which has the higher z-index and an opaque background per
   base.css), so scrolling visually slides the page up and over it —
   the "reveal" effect chanel.com's footer uses. .fa-footer-spacer
   reserves the footer's real measured height (assets/js/footer-reveal.js)
   in normal flow so the page has exactly enough extra scroll room to
   reveal it fully, regardless of page length. Falls back to normal
   static flow with no JS (html.no-js rule, base.css) — without the
   spacer JS there'd be no reserved scroll room and a permanently fixed
   footer would just sit on top of the page. */
/* Floating WhatsApp contact button. The one deliberate exception to the
   site's sharp-corners, monochrome-only rule (see base.css): a chat
   launcher's whole job is to be instantly recognized at a glance, which
   depends on keeping WhatsApp's own circular mark and brand green rather
   than restyling it to match — the same reasoning that lets a "Powered by
   Stripe" badge or any third-party widget look like itself. z-index sits
   above ordinary content and the fixed footer (0) but below the header
   (950) and the slide-in drawers/scrim (800-960), so it's correctly
   covered while any of those are open rather than floating on top. */
.fa-whatsapp-float {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	/* base.css flattens every corner sitewide (`* { border-radius: 0
	   !important }`) as a deliberate design rule — this is the one
	   exception, so it needs to out-rank that !important, not just the
	   rule itself. */
	border-radius: 50% !important;
	background: #25d366;
	color: #ffffff;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
	transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.fa-whatsapp-float:hover {
	transform: scale(1.06);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.fa-whatsapp-float svg {
	width: 30px;
	height: 30px;
}

@media (max-width: 600px) {
	.fa-whatsapp-float {
		right: 16px;
		bottom: 16px;
		width: 52px;
		height: 52px;
	}

	.fa-whatsapp-float svg {
		width: 28px;
		height: 28px;
	}
}

.fa-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 0;
	background: var(--color-primary);
	color: var(--color-on-primary);
	padding: var(--section-gap) var(--margin-mobile) 48px;
}

@media (min-width: 1024px) {
	.fa-footer {
		padding: var(--section-gap) var(--margin-desktop) 48px;
	}
}

.fa-footer-spacer {
	display: block;
}

.fa-footer__inner {
	max-width: var(--container-max);
	margin: 0 auto;
}

.fa-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
	margin-bottom: 64px;
}

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

.fa-footer__brand {
	font-family: var(--font-serif);
	font-size: var(--size-headline-md);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 16px;
}

.fa-footer__col-title {
	font-family: var(--font-sans);
	font-size: var(--size-label-caps);
	letter-spacing: var(--tracking-label-caps);
	text-transform: uppercase;
	opacity: 0.6;
	margin-bottom: 16px;
}

.fa-footer__col a {
	display: block;
	padding: 8px 0;
	font-size: var(--size-body-md);
	color: var(--color-secondary-fixed-dim);
	transition: color 0.3s var(--ease);
}

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

.fa-footer__contrast {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 40px;
	color: var(--color-on-primary);
}

.fa-toggle {
	/* Pill-shaped by convention — every toggle switch reads this way —
	   but the sitewide "no rounded corners" rule forces border-radius to
	   0 everywhere (see the `* { border-radius: 0 !important; }` rule in
	   base.css), which would flatten it. clip-path's rounded inset isn't
	   the border-radius property, so it's unaffected and still gets the
	   pill shape. Same idea for the thumb, via clip-path: circle(). */
	position: relative;
	width: 40px;
	height: 22px;
	background: rgba(255, 255, 255, 0.3);
	border: none;
	padding: 2px;
	cursor: pointer;
	flex-shrink: 0;
	clip-path: inset(0 round 999px);
}

.fa-toggle__thumb {
	display: block;
	width: 18px;
	height: 18px;
	background: var(--color-on-primary);
	transition: transform 0.2s var(--ease);
	clip-path: circle(50%);
}

.fa-toggle[aria-checked="true"] {
	background: var(--color-on-primary);
}

.fa-toggle[aria-checked="true"] .fa-toggle__thumb {
	background: var(--color-primary);
	transform: translateX(18px);
}

.fa-footer__bottom {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-top: 32px;
	font-size: 10px;
	letter-spacing: var(--tracking-label-caps);
	text-transform: uppercase;
	color: var(--color-secondary-fixed-dim);
}

@media (min-width: 768px) {
	.fa-footer__bottom {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
}

.fa-footer__wordmark {
	display: block;
	text-align: center;
	font-family: var(--font-serif);
	font-size: var(--size-headline-lg);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-on-primary);
	margin-bottom: 56px;
}

.fa-footer__bottom-right {
	display: flex;
	align-items: center;
	gap: 20px;
}

.fa-footer__bottom-right a {
	display: inline-flex;
	color: var(--color-on-primary);
	transition: opacity 0.2s var(--ease);
}

.fa-footer__bottom-right a:hover {
	opacity: 0.7;
}

.fa-footer__bottom-right svg {
	width: 18px;
	height: 18px;
}

.fa-region-switcher {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-size: var(--size-label-md);
}

.fa-region-switcher__label {
	color: var(--color-on-primary);
	opacity: 0.6;
}

.fa-region-switcher a {
	color: var(--color-on-primary);
	opacity: 0.6;
	text-decoration: none;
	transition: opacity 0.2s var(--ease);
}

.fa-region-switcher a:hover {
	opacity: 1;
}

.fa-region-switcher a.is-active {
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 3px;
}


/* Light "services" band above the dark footer: contact / customer care /
   newsletter signup, matching the Chanel-style layout reference. -------- */

.fa-footer-services {
	/* Positioned elements always paint above unpositioned ones,
	   regardless of z-index value or DOM order — so without this, the
	   fixed (and therefore always-positioned) .fa-footer would paint
	   over this band the instant they overlap in the viewport, hiding
	   its text, even though this band comes first and should stay on
	   top until it has fully scrolled past. */
	position: relative;
	z-index: 1;
	background: var(--color-surface-container-lowest);
	border-top: 1px solid var(--color-outline-variant);
	padding: 56px var(--margin-mobile);
}

@media (min-width: 1024px) {
	.fa-footer-services {
		padding: 64px var(--margin-desktop);
	}
}

.fa-footer-services__inner {
	max-width: var(--container-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}

@media (min-width: 768px) {
	.fa-footer-services__inner {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--gutter);
	}
}

.fa-footer-services__col h3 {
	margin-bottom: 16px;
}

.fa-footer-services__col p {
	color: var(--color-on-surface-variant);
	margin-bottom: 16px;
	max-width: 320px;
}

.fa-footer-services__form-row {
	display: flex;
	border-bottom: 1px solid var(--color-outline-variant);
	max-width: 320px;
}

.fa-footer-services__form-row input {
	flex: 1;
	border: none;
	background: none;
	padding: 10px 0;
	font-size: var(--size-body-md);
}

.fa-footer-services__form-row input:focus {
	outline: none;
}

.fa-footer-services__form-row button {
	background: none;
	border: none;
	color: var(--color-primary);
	padding: 0 4px;
}

.fa-footer-services__form-row button svg {
	width: 18px;
	height: 18px;
	transform: rotate(-90deg);
}

.fa-footer-services__message {
	margin-top: 10px;
	color: var(--color-on-surface-variant);
	min-height: 1em;
}

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

/* Product card (Farfetch conventions) ------------------------------------ */

.fa-product-card {
	position: relative;
	display: flex;
	flex-direction: column;
}

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

.fa-product-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.4s var(--ease);
}

.fa-product-card__img--secondary {
	position: absolute;
	inset: 0;
	opacity: 0;
}

.fa-product-card:hover .fa-product-card__img--secondary {
	opacity: 1;
}

.fa-product-card__wishlist {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	background: none;
	border: none;
	color: var(--color-outline);
	/* 12px padding around a 20px icon reaches a 44px tap target — this
	   button sits alone in a media corner with no neighbors to crowd. */
	padding: 12px;
	transition: color 0.3s var(--ease);
}

.fa-product-card__wishlist svg {
	width: 20px;
	height: 20px;
}

.fa-product-card__wishlist:hover,
.fa-product-card__wishlist.is-active {
	color: var(--color-primary);
}

.fa-product-card__wishlist.is-active svg {
	fill: currentColor;
}

.fa-product-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	font-size: 10px;
	letter-spacing: var(--tracking-label-caps);
	text-transform: uppercase;
	color: var(--color-on-surface-variant);
	background: var(--color-surface-container-lowest);
	padding: 4px 8px;
}

/* Outlined rather than filled — reads as "unavailable," not as a Sale-style
   promotional flag. */
.fa-product-card__badge--oos {
	background: transparent;
	border: 1px solid var(--color-outline);
}

.fa-product-card__body {
	padding-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.fa-product-card__brand {
	font-size: 10px;
	letter-spacing: var(--tracking-label-caps);
	text-transform: uppercase;
	color: var(--color-on-surface-variant);
	font-weight: 600;
}

.fa-product-card__title {
	font-family: var(--font-sans);
	font-size: var(--size-body-md);
	color: var(--color-on-surface);
}

.fa-product-card__price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-top: 4px;
	font-size: var(--size-body-md);
	color: var(--color-on-surface);
}

.fa-product-card__price del {
	color: var(--color-on-surface-variant);
	text-decoration: line-through;
	font-size: var(--size-label-md);
}

.fa-product-card__price ins {
	text-decoration: none;
	color: var(--color-error);
}

.fa-price-percent-off {
	font-size: var(--size-label-md);
	color: var(--color-error);
}

.fa-region-price-note {
	display: block;
	font-size: var(--size-label-md);
	color: var(--color-on-surface-variant);
	margin-top: 2px;
}

.fa-price-approx {
	margin-right: 0.15em;
	color: var(--color-on-surface-variant);
}

.fa-currency-note {
	font-size: var(--size-label-md);
	color: var(--color-on-surface-variant);
	margin: 0 0 16px;
}

.fa-product-card__add-to-cart {
	width: 100%;
	margin-top: 12px;
	padding: 12px 16px;
}

.fa-product-card__add-to-cart.loading {
	opacity: 0.6;
	pointer-events: none;
}

/* WooCommerce appends a "View cart" link after every AJAX add-to-cart
   button on success (core behavior, not a theme template) — hidden
   sitewide so clicking "Add to Bag" leaves the card exactly as it was. */
.added_to_cart.wc-forward {
	display: none !important;
}

/* Forms -------------------------------------------------------------------- */

.fa-field {
	position: relative;
}

.fa-field input:not([type="checkbox"]):not([type="radio"]),
.fa-field textarea,
.fa-field select {
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--color-outline-variant);
	padding: 12px 0;
	font-size: var(--size-body-md);
	color: var(--color-on-surface);
}

.fa-field input:focus,
.fa-field textarea:focus,
.fa-field select:focus {
	outline: none;
	border-color: var(--color-primary);
}

.fa-field label {
	display: block;
	margin-bottom: 8px;
	font-size: var(--size-label-caps);
	letter-spacing: var(--tracking-label-caps);
	text-transform: uppercase;
	color: var(--color-on-surface-variant);
}

.fa-checkbox {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
}

.fa-checkbox input {
	width: 16px;
	height: 16px;
	accent-color: var(--color-primary);
}

/* Details / accordion ------------------------------------------------------ */

.fa-accordion summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	list-style: none;
	cursor: pointer;
	padding: 20px 0;
	font-size: var(--size-label-caps);
	letter-spacing: var(--tracking-label-caps);
	text-transform: uppercase;
	font-weight: 600;
	border-bottom: 1px solid var(--color-outline-variant);
}

.fa-accordion summary::-webkit-details-marker {
	display: none;
}

.fa-accordion summary .fa-accordion__icon {
	display: inline-flex;
	transition: transform 0.3s var(--ease);
}

.fa-accordion summary .fa-accordion__icon svg {
	width: 16px;
	height: 16px;
}

.fa-accordion[open] summary .fa-accordion__icon {
	transform: rotate(180deg);
}

.fa-accordion__content {
	padding: 20px 0;
	color: var(--color-on-surface-variant);
}

/* WooCommerce's own reviews template renders its own "Reviews (n)" <h2> —
   redundant once it's nested under this accordion's own summary label. */
.fa-accordion__content--reviews .woocommerce-Reviews-title {
	display: none;
}

/* Breadcrumb / meta ---------------------------------------------------------- */

.fa-eyebrow {
	font-size: var(--size-label-caps);
	letter-spacing: var(--tracking-label-caps);
	text-transform: uppercase;
	color: var(--color-on-surface-variant);
}

.fa-divider {
	width: 100%;
	height: 1px;
	background: var(--color-outline-variant);
}