/**
 * Figma Homepage template styles.
 *
 * Mirrors "Homepage Version 1" (node 7022:686). Scoped to .fsx-page so nothing
 * here can leak into the existing front-page.php styling in theme.css.
 */

.fsx-page {
	/* Tokens lifted from Figma get_variable_defs on node 7022:686. */
	--p500: #412480;
	--p200: #a89ac5;
	--p50: #ece9f2;
	--gold500: #d6a84b;
	--gold400: #e4bc6d;
	--gold050: #fbf3de;
	--g800: #27272a;
	--g700: #3f3f46;
	--g600: #52525b;
	--g500: #71717a;
	--g300: #d4d4d8;
	--g200: #e4e4e7;
	--g50: #fafafa;
	--ink: #0e0816;
	--media: #f7f3fc;
	--shell: 1240px;

	margin: 0;
	background: #fff;
	color: var(--g800);
	font-family: "Public Sans", system-ui, -apple-system, sans-serif;
	-webkit-font-smoothing: antialiased;
}

.fsx-page * {
	box-sizing: border-box;
}

.fsx-page img {
	display: block;
	max-width: 100%;
}

.fsx-page p {
	margin: 0;
}

.fsx-page a {
	text-decoration: none;
	color: inherit;
}

.fsx-shell {
	width: 100%;
	max-width: var(--shell);
	margin: 0 auto;
	padding: 0 20px;
}

@media (min-width: 1080px) {
	.fsx-shell {
		padding: 0 28px;
	}
}

/* Shared type ------------------------------------------------------------- */

.fsx-h2 {
	margin: 0;
	font-family: "Clash Display", "Public Sans", sans-serif;
	font-weight: 600;
	font-size: 40px;
	line-height: 56px;
	color: var(--ink);
	letter-spacing: -0.01em;
}

.fsx-pill {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--p500);
	border-radius: 20px;
	padding: 4px 10px;
	font-size: 14px;
	line-height: 20px;
	color: var(--p500);
	white-space: nowrap;
}

.fsx-sechead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 40px;
}

.fsx-sechead--split {
	align-items: flex-start;
}

.fsx-seelink {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 20px;
	line-height: 30px;
	color: var(--g800);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.fsx-seelink img {
	width: 24px;
	height: 24px;
	transform: rotate(180deg);
}

.fsx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	height: 48px;
	padding: 0 17px;
	border-radius: 62px;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	white-space: nowrap;
	transform: translateY(0);
	transition:
		background-color 180ms ease,
		border-color 180ms ease,
		color 180ms ease,
		box-shadow 220ms ease,
		transform 180ms ease;
}

/* Specificity note: `.fsx-page a` sets `color: inherit` at (0,1,1), so the
   button colours have to be qualified or anchors win and render dark. */
.fsx-page .fsx-btn--solid {
	background: var(--p500);
	border: 1.2px solid rgba(255, 255, 255, 0.12);
	color: #fff;
}

.fsx-page .fsx-btn--ghost {
	border: 1.2px solid var(--p500);
	color: var(--p500);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0));
}

.fsx-btn__arrow {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #fff;
	transition:
		background-color 180ms ease,
		box-shadow 180ms ease,
		transform 180ms ease;
}

.fsx-btn__arrow img {
	width: 18px;
	height: 18px;
	transform: rotate(180deg);
	transition: filter 180ms ease;
}

.fsx-btn:hover {
	transform: translateY(-2px);
}

.fsx-page .fsx-btn--solid:hover {
	background: var(--gold500);
	border-color: rgba(79, 52, 8, 0.12);
	color: #23180a;
	box-shadow: 0 12px 28px rgba(214, 168, 75, 0.32);
}

.fsx-page .fsx-btn--solid:hover .fsx-btn__arrow {
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 4px 10px rgba(35, 24, 10, 0.12);
	transform: translateX(2px);
}

.fsx-page .fsx-btn--ghost:hover {
	background: linear-gradient(180deg, rgba(251, 243, 222, 0.95), rgba(251, 243, 222, 0.75));
	border-color: var(--gold500);
	color: #8b6518;
	box-shadow: 0 10px 24px rgba(214, 168, 75, 0.18);
}

/* Header ------------------------------------------------------------------ */

.fsx-header {
	position: sticky;
	top: 0;
	z-index: 20;
}

.fsx-announce {
	background: var(--p500);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 34px;
	padding: 6px 24px;
}

.fsx-announce p {
	font-family: Lato, "Public Sans", sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.01em;
	text-align: center;
}

.fsx-nav {
	background: #fff;
	border-bottom: 1px solid #f5f5f5;
	padding: 2px 0;
}

.fsx-nav__inner {
	max-width: 1288px;
	margin: 0 auto;
	padding: 0 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.fsx-nav__left {
	display: flex;
	align-items: center;
	gap: 20px;
	flex: 1 1 auto;
	min-width: 0;
}

/* Artwork is 2083x637 (3.27:1); the old 168x48 box left it filling only 139px
   of its width, so it read smaller than the space it occupied. */
.fsx-logolink {
	display: inline-flex;
	flex-shrink: 0;
	line-height: 0;
}

.fsx-logo {
	width: 200px;
	height: 69px;
	object-fit: contain;
	flex-shrink: 0;
}

.fsx-menu {
	display: flex;
	align-items: center;
	gap: 22px;
	padding-left: 20px;
	border-left: 1px solid var(--g300);
	align-self: stretch;
	min-width: 0;
}

.fsx-menu a {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 4px 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 24px;
	color: var(--g700);
	white-space: nowrap;
}

.fsx-menu a.is-active {
	color: var(--p500);
	border-bottom: 1px solid var(--p500);
}

.fsx-nav__right {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-shrink: 0;
}

.fsx-search {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 312px;
	height: 44px;
	padding: 0 8px 0 16px;
	border: 1px solid var(--g300);
	border-radius: 999px;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.fsx-search:focus-within {
	border-color: var(--p500);
	box-shadow: 0 0 0 3px rgba(65, 36, 128, 0.12);
}

.fsx-search input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
	color: var(--g800);
	-webkit-appearance: none;
	appearance: none;
}

.fsx-search input::placeholder {
	color: var(--g600);
}

.fsx-search input:focus {
	outline: none;
}

.fsx-search input::-webkit-search-cancel-button {
	display: none;
}

.fsx-search button {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background: none;
	cursor: pointer;
	transition: background-color 160ms ease;
}

.fsx-search button:hover {
	background: var(--p50);
}

.fsx-search button:focus-visible {
	outline: 2px solid var(--p500);
	outline-offset: 2px;
}

.fsx-search img {
	width: 22px;
	height: 22px;
}

.fsx-nav__icons {
	display: flex;
	align-items: center;
	gap: 4px;
}

.fsx-mobiletools {
	display: none;
	align-items: center;
	gap: 10px;
}

.fsx-mobilebtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1px solid #eceef2;
	border-radius: 16px;
	background: #f7f7f8;
	color: var(--p500);
	cursor: pointer;
	transition:
		background-color 160ms ease,
		border-color 160ms ease,
		box-shadow 180ms ease,
		transform 160ms ease;
}

.fsx-mobilebtn:hover {
	background: #fff;
	border-color: rgba(65, 36, 128, 0.16);
	box-shadow: 0 10px 22px rgba(16, 24, 40, 0.08);
	transform: translateY(-1px);
}

.fsx-mobilebtn.is-active {
	background: #fff;
	border-color: rgba(65, 36, 128, 0.18);
	box-shadow: 0 10px 22px rgba(16, 24, 40, 0.08);
}

.fsx-mobilebtn img {
	width: 23px;
	height: 23px;
}

/* Matches the search button beside it. The gold gradient this replaced was
   the only gold in the header and read as a different component. */
.fsx-mobilebtn--menu {
	color: var(--p500);
}

.fsx-mobilebtn--menu:hover,
.fsx-mobilebtn--menu.is-active {
	background: #fff;
	border-color: rgba(65, 36, 128, 0.18);
	box-shadow: 0 10px 22px rgba(16, 24, 40, 0.08);
}

.fsx-mobilebtn__bars {
	display: inline-flex;
	flex-direction: column;
	gap: 5px;
}

.fsx-mobilebtn__bars span {
	display: block;
	width: 22px;
	height: 2.5px;
	border-radius: 999px;
	background: currentColor;
}

.fsx-mobilepanel {
	display: none;
	border-top: 1px solid var(--g200);
	background: #fff;
	padding: 0 28px 20px;
}

.fsx-mobilepanel[hidden] {
	display: none;
}

.fsx-mobilepanel:not([hidden]) {
	display: block;
}

.fsx-mobilesearch {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
	padding: 0 14px;
	height: 48px;
	border: 1px solid var(--g300);
	border-radius: 999px;
}

.fsx-mobilesearch input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 14px;
	color: var(--g800);
}

.fsx-mobilesearch input:focus {
	outline: none;
}

.fsx-mobilesearch button {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border: 0;
	background: none;
	cursor: pointer;
}

.fsx-mobilesearch button img {
	width: 20px;
	height: 20px;
}

.fsx-mobilemenu {
	display: grid;
	gap: 6px;
	margin-top: 14px;
}

.fsx-mobilemenu a {
	display: block;
	padding: 12px 2px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--g800);
	border-bottom: 1px solid var(--g200);
}

.fsx-mobilemenu a.is-active {
	color: var(--p500);
}

.fsx-iconbtn {
	position: relative;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
}

.fsx-iconbtn img {
	width: 24px;
	height: 24px;
}

.fsx-badge {
	position: absolute;
	top: 5px;
	left: 26px;
	display: grid;
	place-items: center;
	width: 14px;
	height: 14px;
	border-radius: 90px;
	background: var(--p500);
	color: #fff;
	font-size: 9px;
	font-style: normal;
	line-height: 1;
}

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

.fsx-hero {
	padding: 24px 0 6px;
	background:
		radial-gradient(circle at 78% 42%, rgba(255, 255, 255, 0.44) 0%, rgba(255, 255, 255, 0) 28%),
		linear-gradient(106deg, #ece8f3 0%, #e8e4f0 48%, #e3deed 100%);
	overflow: hidden;
}

.fsx-hero__grid {
	display: flex;
	align-items: center;
	gap: clamp(18px, 3vw, 34px);
}

.fsx-hero__copy {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 2px 0 12px;
}

.fsx-hero__title {
	margin: 0;
	max-width: 520px;
	font-family: "Clash Display", "Public Sans", sans-serif;
	font-weight: 600;
	font-size: clamp(38px, 4.15vw, 56px);
	line-height: 0.9;
	color: var(--g800);
	letter-spacing: -0.04em;
	text-transform: none;
}

.fsx-hero__title span {
	color: var(--p500);
}

.fsx-hero__lede {
	max-width: 500px;
	font-size: 16px;
	line-height: 1.45;
	color: var(--g600);
}

.fsx-hero__actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 4px;
}

.fsx-hero__art {
	flex-shrink: 0;
	width: min(45%, 560px);
	max-width: 45%;
	align-self: flex-end;
}

.fsx-hero__art img {
	width: 100%;
	height: auto;
	object-fit: contain;
	max-height: 430px;
	margin-left: auto;
}

/* Benefit bar ------------------------------------------------------------- */

.fsx-benefits {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	background: #412480;
}

.fsx-benefits__row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	padding-top: 9px;
	padding-bottom: 9px;
}

.fsx-benefit {
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 20px;
	position: relative;
}

.fsx-benefit + .fsx-benefit::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	bottom: 9px;
	width: 1px;
	background: rgba(255, 255, 255, 0.14);
}

.fsx-benefit img {
	width: 42px;
	height: 42px;
	flex-shrink: 0;
	padding: 8px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.12);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.fsx-benefit > div {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.fsx-benefit__t {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
}

.fsx-benefit__t span {
	color: #fff;
}

.fsx-benefit__s {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.86);
}

/* Most popular ----------------------------------------------------------- */

.fsx-popular {
	padding: 32px 0 40px;
	background: #fff;
}

.fsx-popular__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-bottom: 54px;
	text-align: center;
}

.fsx-popular__head .fsx-h2 {
	font-size: clamp(26px, 3.2vw, 38px);
	line-height: 1;
}

.fsx-popular__rule {
	width: 118px;
	height: 3px;
	border-radius: 999px;
	background: var(--p500);
}

.fsx-popular__grid {
	margin-top: 0;
}

.fsx-popular__viewport {
	position: relative;
	--fsx-carousel-gutter: 64px;
	padding: 0;
}

.fsx-popular__mask {
	width: calc(100% - (var(--fsx-carousel-gutter) * 2));
	margin: 0 auto;
	overflow: hidden;
}

.fsx-popular__track {
	display: flex;
	width: 100%;
	gap: 14px;
	will-change: transform;
	transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.fsx-popular__slide {
	flex: 0 0 calc((100% - 42px) / 4);
	min-width: 0;
}

.fsx-popular__slide .fsx-card {
	height: 100%;
	border-radius: 10px;
}

.fsx-popular__slide .fsx-card__media {
	height: 186px;
}

.fsx-popular__slide .fsx-card__body {
	padding: 12px;
	gap: 10px;
}

.fsx-popular__slide .fsx-card__meta {
	font-size: 11px;
	line-height: 16px;
}

.fsx-popular__slide .fsx-card__title {
	margin-top: 2px;
	font-size: 14px;
	line-height: 1.25;
}

.fsx-popular__slide .fsx-card__foot {
	padding-top: 8px;
}

.fsx-popular__slide .fsx-card__price {
	font-size: 16px;
	line-height: 1.1;
}

.fsx-popular__slide .fsx-cartbtn {
	width: 30px;
	height: 30px;
}

.fsx-popular__slide .fsx-cartbtn img {
	width: 14px;
	height: 14px;
}

.fsx-circlebtn {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1px solid rgba(65, 36, 128, 0.24);
	border-radius: 999px;
	background: var(--p500);
	color: #fff;
	box-shadow: 0 10px 24px rgba(14, 8, 22, 0.12);
	cursor: pointer;
	transform: translateY(-50%);
	transition:
		background-color 160ms ease,
		border-color 160ms ease,
		opacity 160ms ease,
		box-shadow 160ms ease;
}

.fsx-circlebtn:hover {
	border-color: rgba(125, 92, 20, 0.2);
	background: var(--gold500);
	box-shadow: 0 14px 26px rgba(214, 168, 75, 0.28);
}

.fsx-circlebtn:disabled {
	cursor: default;
	box-shadow: none;
	background: rgba(65, 36, 128, 0.42);
	border-color: rgba(65, 36, 128, 0.18);
}

.fsx-circlebtn.is-prev {
	left: calc((var(--fsx-carousel-gutter) - 48px) / 2);
}

.fsx-circlebtn.is-next {
	right: calc((var(--fsx-carousel-gutter) - 48px) / 2);
}

.fsx-circlebtn img {
	display: block;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.fsx-circlebtn:disabled img {
	opacity: 0.62;
}

.fsx-popular__actions {
	display: flex;
	justify-content: center;
	margin-top: 72px;
}

.fsx-popular__dots {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 4px;
}

/* The visible dot is 10px, but the button carries transparent padding out to
   a 44px touch target — background-clip keeps the fill on the dot itself. */
.fsx-popular__dot {
	width: 10px;
	height: 44px;
	padding: 17px 0;
	border: 0;
	border-radius: 999px;
	background: rgba(65, 36, 128, 0.18);
	background-clip: content-box;
	cursor: pointer;
	transition:
		width 180ms ease,
		background-color 180ms ease,
		transform 180ms ease,
		opacity 180ms ease;
}

.fsx-popular__dot:hover {
	background: rgba(65, 36, 128, 0.34);
	background-clip: content-box;
}

.fsx-popular__dot.is-active {
	width: 28px;
	background: var(--p500);
	background-clip: content-box;
}

/* Product category ------------------------------------------------------ */

.fsx-pcats {
	padding: 26px 0 56px;
	background: #f7f7fa;
}

.fsx-popular--sales {
	background: #f7f7fa;
}

.fsx-pcats__tabs .fsx-tabs {
	justify-content: center;
	gap: 12px;
	margin-bottom: 28px;
}

.fsx-pcats__tabs .fsx-tab {
	min-width: 0;
	height: 42px;
	padding: 0 22px;
	border-radius: 14px;
	border-color: rgba(65, 36, 128, 0.12);
	background: #fff;
	color: var(--g500);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.fsx-pcats__tabs .fsx-tab:hover {
	background: var(--p50);
	box-shadow: none;
}

.fsx-pcats__tabs .fsx-tab.is-active,
.fsx-pcats__tabs .fsx-tab[aria-selected="true"] {
	background: var(--p500);
	border-color: var(--p500);
	color: #fff;
	box-shadow: 0 10px 20px rgba(65, 36, 128, 0.16);
}

.fsx-pcats__grid {
	gap: 20px;
}

.fsx-pcats__mobile {
	display: none;
}

.fsx-pcats__grid .fsx-card__media {
	height: 220px;
}

.fsx-pcats__grid .fsx-card__body {
	padding: 14px;
}

.fsx-pcats__grid .fsx-card__title {
	font-size: 16px;
	line-height: 1.35;
}

.fsx-pcats__grid .fsx-card__price {
	font-size: 18px;
}

.fsx-pcats__grid .fsx-cartbtn {
	width: 34px;
	height: 34px;
}

/* Who we are -------------------------------------------------------------- */

.fsx-who {
	background: var(--p500);
	padding: 36px 0 36px;
	color: #fff;
}

.fsx-who .fsx-h2,
.fsx-who .fsx-who__lede {
	color: #fff;
}

.fsx-who .fsx-pill {
	border-color: rgba(255, 255, 255, 0.6);
	color: #fff;
}

.fsx-who__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 48px;
	margin-bottom: 30px;
}

.fsx-who__title {
	max-width: 419px;
	margin-top: 12px;
}

.fsx-who__lede {
	max-width: 565px;
	margin-top: 29px;
	font-size: 20px;
	line-height: 30px;
	color: var(--g600);
}

.fsx-statcards {
	display: flex;
	gap: 16px;
	padding-bottom: 36px;
}

.fsx-statcard {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 32px;
	background: #fff;
	border-radius: 8px;
}

.fsx-statcard__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.fsx-statcard__top img {
	width: 50px;
	height: 50px;
	flex-shrink: 0;
}

.fsx-statcard__top p {
	font-size: 20px;
	font-weight: 700;
	line-height: 30px;
	color: var(--p500);
	text-align: right;
}

.fsx-statcard__n {
	font-family: "Clash Display", "Public Sans", sans-serif;
	font-weight: 600;
	font-size: 40px;
	line-height: 56px;
	color: var(--ink);
}

.fsx-statcard__d {
	margin-top: 8px;
	font-size: 20px;
	line-height: 30px;
	color: var(--g600);
}

/* Shop by category -------------------------------------------------------- */

.fsx-cats {
	padding: 80px 0;
}

.fsx-cats__row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.fsx-cat__media {
	height: 300px;
	border-radius: 12px 12px 0 0;
	background: var(--g50);
	display: grid;
	place-items: center;
	overflow: hidden;
}

.fsx-cat__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.fsx-cat__foot {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding-top: 12px;
}

.fsx-cat__title {
	font-family: "Clash Display", "Public Sans", sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 28px;
	color: #000;
}

.fsx-cat__count {
	margin-top: 4px;
	font-size: 12px;
	font-weight: 500;
	line-height: 18px;
	color: #030303;
}

/* Figma applies `rotate-135` + `-scale-y-100` to arrow-left-02 here, which
   lands the glyph pointing up-right rather than straight across. */
.fsx-cat__arrow {
	width: 24px;
	height: 24px;
	transform: rotate(135deg) scaleY(-1);
	flex-shrink: 0;
}

/* Quality you can verify -------------------------------------------------- */

.fsx-quality {
	padding: 80px 0;
}

.fsx-quality__lede {
	max-width: 396px;
	font-size: 18px;
	line-height: 28px;
	color: var(--g600);
}

.fsx-quality__row {
	display: flex;
	gap: 24px;
}

.fsx-qcard {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
	border-top: 1px solid var(--p200);
	padding: 24px 0 12px;
}

.fsx-qcard img {
	width: 50px;
	height: 50px;
}

.fsx-qcard__t {
	font-family: "Clash Display", "Public Sans", sans-serif;
	font-weight: 600;
	font-size: 24px;
	line-height: 34px;
	color: var(--ink);
}

.fsx-qcard__d {
	margin-top: 8px;
	font-size: 18px;
	line-height: 28px;
	color: var(--g600);
}

/* Product cards ----------------------------------------------------------- */

.fsx-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.fsx-card {
	background: #fff;
	border: 1px solid rgba(65, 36, 128, 0.14);
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 4px 16px rgba(14, 8, 22, 0.04);
}

.fsx-card__media {
	position: relative;
	height: 250px;
	background: var(--media);
	overflow: hidden;
}

.fsx-badge-tag {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	line-height: 18px;
	color: #fff;
	letter-spacing: 0.01em;
}

.fsx-badge-tag--sale {
	background: var(--p500);
}

.fsx-badge-tag--oos {
	background: #000;
}

.fsx-card__media img {
	width: 100%;
	height: 100%;
	/* Portrait vial shots: cover would crop the strength band off
	   the bottom, so letterbox them instead. */
	object-fit: contain;
}

.fsx-card__body {
	border-top: 0.8px solid #e8e2f0;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex: 1 1 auto;
}

.fsx-card__meta {
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: var(--g600);
}

.fsx-card__title {
	margin-top: 8px;
	font-family: "Clash Display", "Public Sans", sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 34px;
	color: #000;
}

.fsx-card__foot {
	margin-top: auto;
	border-top: 1px solid var(--g200);
	padding-top: 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.fsx-card__price {
	font-family: "Clash Display", "Public Sans", sans-serif;
	font-weight: 600;
	font-size: 24px;
	line-height: 26px;
	color: var(--g800);
}

.fsx-cartbtn {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 66px;
	background: var(--p500);
	flex-shrink: 0;
	transition:
		background-color 180ms ease,
		border-color 180ms ease,
		box-shadow 220ms ease,
		transform 180ms ease;
}

.fsx-cartbtn img {
	width: 18px;
	height: 18px;
}

.fsx-cartbtn--arrow img {
	filter: brightness(0) invert(1);
}

.fsx-cartbtn--outline {
	background: transparent;
	border: 0.9px solid var(--p500);
}

.fsx-cartbtn:hover {
	background: var(--gold500);
	border-color: var(--gold500);
	box-shadow: 0 10px 20px rgba(214, 168, 75, 0.24);
	transform: translateY(-1px) scale(1.05);
}

.fsx-cartbtn:hover img {
	filter: brightness(0) invert(1);
}

.fsx-cartbtn--outline:hover {
	background: var(--gold050);
}

/* Best seller ------------------------------------------------------------- */

.fsx-best {
	background: var(--g50);
	padding: 80px 0;
}

.fsx-tabs {
	display: flex;
	gap: 16px;
	margin-bottom: 40px;
	flex-wrap: wrap;
}

.fsx-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 112px;
	height: 44px;
	padding: 0 16px;
	border: 1px solid var(--p500);
	border-radius: 8px;
	background: #fff;
	color: var(--p500);
	font-size: 14px;
	font-weight: 500;
	font-family: inherit;
	cursor: pointer;
	transition:
		background-color 200ms ease,
		color 200ms ease,
		border-color 200ms ease,
		box-shadow 200ms ease,
		transform 120ms ease;
}

.fsx-tab:hover {
	background: var(--gold050);
	border-color: rgba(214, 168, 75, 0.9);
	color: #8b6518;
	box-shadow: 0 6px 16px rgba(214, 168, 75, 0.14);
}

.fsx-tab:active {
	transform: translateY(1px);
}

.fsx-tab:focus-visible {
	outline: 2px solid var(--p500);
	outline-offset: 2px;
}

.fsx-tab.is-active {
	background: var(--p500);
	color: #fff;
	box-shadow: 0 2px 8px rgba(65, 36, 128, 0.24);
}

.fsx-tab.is-active:hover {
	background: var(--gold500);
	border-color: var(--gold500);
	color: #23180a;
	box-shadow: 0 12px 24px rgba(214, 168, 75, 0.24);
}

.fsx-panels {
	position: relative;
	overflow: hidden;
}

.fsx-panel:focus {
	outline: none;
}

/* Cards rise in behind a short stagger. Capped so the last card in an eight-up
   grid still lands quickly. */
.fsx-panel.is-anim .fsx-card {
	animation: fsx-card-in 320ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.fsx-panel.is-anim .fsx-card:nth-child(1) { animation-delay: 0ms; }
.fsx-panel.is-anim .fsx-card:nth-child(2) { animation-delay: 35ms; }
.fsx-panel.is-anim .fsx-card:nth-child(3) { animation-delay: 70ms; }
.fsx-panel.is-anim .fsx-card:nth-child(4) { animation-delay: 105ms; }
.fsx-panel.is-anim .fsx-card:nth-child(5) { animation-delay: 60ms; }
.fsx-panel.is-anim .fsx-card:nth-child(6) { animation-delay: 95ms; }
.fsx-panel.is-anim .fsx-card:nth-child(7) { animation-delay: 130ms; }
.fsx-panel.is-anim .fsx-card:nth-child(8) { animation-delay: 165ms; }

@keyframes fsx-card-in {
	from {
		opacity: 0;
		transform: translateY(10px) scale(0.995);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.fsx-card {
	transition:
		transform 200ms ease,
		box-shadow 200ms ease,
		border-color 200ms ease;
}

.fsx-card:hover {
	transform: translateY(-3px);
	border-color: rgba(65, 36, 128, 0.22);
	box-shadow: 0 12px 28px rgba(16, 24, 40, 0.09);
}

.fsx-cartbtn {
	transition: transform 160ms ease, background-color 160ms ease;
}

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

	.fsx-card:hover {
		transform: none;
	}
}

/* Verify every batch ------------------------------------------------------ */

.fsx-verify {
	padding: 40px 0 54px;
}

.fsx-verify__inner {
	width: 100%;
	padding: 28px;
	display: grid;
	grid-template-columns: minmax(320px, 520px) minmax(0, 1fr);
	align-items: center;
	gap: 42px;
	border: 1px solid rgba(65, 36, 128, 0.1);
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 16px 40px rgba(14, 8, 22, 0.04);
}

.fsx-verify__media {
	position: relative;
	min-width: 0;
	padding: 22px;
	border-radius: 20px;
	background: linear-gradient(135deg, #eee7f9 0%, #f6f3fb 100%);
}

.fsx-verify__art {
	width: 100%;
	max-width: 100%;
}

.fsx-verify__art img {
	width: 100%;
	height: auto;
	border-radius: 16px;
}

.fsx-verify__copy {
	min-width: 0;
	max-width: 660px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.fsx-verify__eyebrow {
	font-size: 15px;
	font-weight: 600;
	line-height: 20px;
	color: var(--p500);
}

.fsx-verify__title {
	margin: 22px 0 0;
	font-family: "Clash Display", "Public Sans", sans-serif;
	font-weight: 600;
	font-size: 34px;
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--ink);
}

/*
 * Prefixed with .fsx-page to outrank the `.fsx-page p { margin: 0 }` reset near
 * the top of this file. That reset is a class plus an element, so it is more
 * specific than a bare component class and silently won every margin this rule
 * asked for — the gap above the button stayed at zero no matter what value was
 * typed here.
 */
.fsx-page .fsx-verify__body {
	margin: 18px 0 54px;
	max-width: 620px;
	font-size: 17px;
	line-height: 1.5;
	color: var(--g600);
}

/* Stats strip ------------------------------------------------------------- */

.fsx-stats {
	padding: 40px 0;
	background: var(--p500);
	color: #fff;
}

.fsx-stats .fsx-stat__n {
	color: #fff;
}

.fsx-stats .fsx-stat__l {
	color: rgba(255, 255, 255, 0.78);
}

.fsx-stats .fsx-stat__rule {
	background: rgba(255, 255, 255, 0.3);
}

.fsx-stats__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
}

.fsx-stats__list {
	display: flex;
	align-items: center;
	gap: 64px;
}

.fsx-stat__n {
	font-family: "Clash Display", "Public Sans", sans-serif;
	font-weight: 600;
	font-size: 32px;
	line-height: 40px;
	color: var(--ink);
}

.fsx-stat__l {
	margin-top: 8px;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: var(--g500);
}

.fsx-stat__rule {
	width: 1px;
	height: 74px;
	background: var(--g200);
}

/* New arrival / coming soon ----------------------------------------------- */

.fsx-new {
	padding: 80px 0;
	background: var(--g50);
}

.fsx-soon {
	padding: 80px 0;
}

.fsx-soon__row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.fsx-wide {
	display: flex;
	border: 0.8px solid var(--p50);
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	min-height: 252px;
}

.fsx-wide__media {
	position: relative;
	width: 250px;
	flex-shrink: 0;
	background: var(--g50);
	overflow: hidden;
}

.fsx-wide__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fsx-wide__badge {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	background: #000;
	color: #fff;
	border-radius: 999px;
	padding: 6px 12px;
	font-size: 13px;
	font-weight: 500;
}

.fsx-wide__body {
	flex: 1 1 auto;
	border-left: 0.8px solid #e8e2f0;
	padding: 24px;
	display: flex;
	flex-direction: column;
}

.fsx-wide__title {
	margin-top: 8px;
	font-family: "Clash Display", "Public Sans", sans-serif;
	font-weight: 500;
	font-size: 22px;
	line-height: 30px;
	color: #000;
}

.fsx-readmore {
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--g200);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 500;
	color: var(--g800);
}

.fsx-readmore img {
	width: 20px;
	height: 20px;
	transform: rotate(180deg);
}

.fsx-readmore::first-line {
	text-decoration: underline;
}

/* FAQ --------------------------------------------------------------------- */

.fsx-faq {
	background: var(--g50);
	padding: 80px 0;
}

.fsx-faq__grid {
	display: flex;
	align-items: flex-start;
	gap: 60px;
}

.fsx-faq__aside {
	width: 402px;
	flex-shrink: 0;
}

.fsx-faq__aside .fsx-h2 {
	max-width: 363px;
}

.fsx-faq__aside .fsx-seelink {
	margin-top: 40px;
}

.fsx-faq__list {
	flex: 1 1 0;
	min-width: 0;
	border-top: 1px solid var(--g200);
}

.fsx-faq__item {
	border-bottom: 1px solid var(--g200);
	padding: 24px 0;
}

.fsx-faq__item summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	font-size: 20px;
	line-height: 30px;
	color: var(--g800);
}

.fsx-faq__item summary::-webkit-details-marker {
	display: none;
}

.fsx-faq__item summary::after {
	content: "+";
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border: 1px solid var(--g300);
	border-radius: 50%;
	font-size: 15px;
	line-height: 1;
	color: var(--g600);
}

.fsx-faq__item[open] summary {
	color: var(--p500);
}

.fsx-faq__item[open] summary::after {
	content: "\2212";
	border-color: var(--p500);
	color: var(--p500);
}

.fsx-faq__item p {
	margin-top: 12px;
	max-width: 720px;
	font-size: 16px;
	line-height: 24px;
	color: var(--g600);
}

/* Category heading on the full FAQ page. The homepage block is a flat
   five-question subset and never renders one.
   Scoped to .fsx-page because the reset there is `.fsx-page p { margin: 0 }`,
   which outranks a lone class and would flatten the spacing below. */
.fsx-page .fsx-faq__cat {
	margin: 38px 0 10px;
	font-size: 13px;
	font-weight: 700;
	line-height: 18px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--p500);
}

/* The first heading sits directly under the panel's own top edge. */
.fsx-page .fsx-faq__cat:first-child {
	margin-top: 0;
}

/* Newsletter -------------------------------------------------------------- */

.fsx-news {
	padding: 60px 0;
}

.fsx-news__banner {
	position: relative;
	overflow: hidden;
	border-radius: 20px;
	background: var(--p500);
	min-height: 369px;
	display: grid;
	place-items: center;
}

.fsx-news__art {
	position: absolute;
	top: 0;
	height: 100%;
	width: auto;
	pointer-events: none;
}

/* The vial clusters are cropped out of the Figma render, so they carry a
   slightly lighter purple than the flat banner. Fade the inner edge to hide
   the seam where the two meet. */
.fsx-news__art--l {
	left: 0;
	width: 260px;
	object-fit: cover;
	object-position: left center;
	-webkit-mask-image: linear-gradient(to left, transparent 0, #000 70px);
	mask-image: linear-gradient(to left, transparent 0, #000 70px);
}

.fsx-news__art--r {
	right: 0;
	width: 340px;
	object-fit: cover;
	object-position: right center;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 70px);
	mask-image: linear-gradient(to right, transparent 0, #000 70px);
}

/* Sits slightly left of centre, matching the Figma frame where the copy block
   clears the right-hand vial cluster. */
.fsx-news__copy {
	position: relative;
	z-index: 2;
	text-align: center;
	padding: 40px 20px;
	max-width: 600px;
	margin-right: 100px;
}

.fsx-news__title {
	font-family: "Clash Display", "Public Sans", sans-serif;
	font-weight: 600;
	font-size: 40px;
	line-height: 49px;
	color: #fff;
	letter-spacing: 0.01em;
}

.fsx-news__sub {
	margin: 20px auto 0;
	max-width: 566px;
	font-size: 18px;
	line-height: 30px;
	color: rgba(255, 255, 255, 0.85);
}

.fsx-news__form {
	margin-top: 32px;
	display: flex;
	justify-content: center;
	gap: 8px;
}

.fsx-news__form input {
	width: 314px;
	height: 48px;
	padding: 0 20px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.45);
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	font-size: 14px;
	font-family: inherit;
}

.fsx-news__form input::placeholder {
	color: rgba(255, 255, 255, 0.82);
	opacity: 1;
}

.fsx-news__form button {
	width: 122px;
	height: 48px;
	border: 0;
	border-radius: 999px;
	background: #fff;
	color: var(--p500);
	font-size: 15px;
	font-weight: 500;
	font-family: inherit;
	cursor: pointer;
}

.fsx-page .fsx-news__status {
	margin-top: 14px;
	font-size: 15px;
	line-height: 22px;
	font-weight: 500;
	color: #fff;
}

.fsx-page .fsx-news__consent {
	margin-top: 12px;
	font-size: 12px;
	line-height: 18px;
	color: rgba(255, 255, 255, 0.7);
}

.fsx-news__consent a {
	color: rgba(255, 255, 255, 0.9);
	text-decoration: underline;
}

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

.fsx-footer {
	padding: 64px 0 40px;
	/* Near-black carrying the brand purple rather than a flat #030303. */
	background: #150c26;
	color: #dfdfdf;
}

.fsx-footer__top {
	display: flex;
	gap: 40px;
}

.fsx-footer__brand {
	width: 660px;
	flex-shrink: 1;
}

.fsx-footer__brand p {
	max-width: 353px;
	font-size: 14px;
	line-height: 20px;
	color: #9a9a9a;
}

.fsx-footer__payments {
	margin-top: 32px;
}

.fsx-footer__payments-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px !important;
	font-weight: 700;
	line-height: 20px !important;
	color: #fff !important;
}

.fsx-footer__payments-title svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	color: #c9adff;
}

.fsx-footer__payments-copy {
	margin-top: 8px;
	font-size: 13px !important;
	line-height: 19px !important;
	color: #bdbdbd !important;
}

.fsx-payment-badges {
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 6px;
}

.fsx-payment-badge {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.fsx-payment-badge img,
.fsx-payment-badge svg {
	width: 12px;
	height: 12px;
	display: block;
}

.fsx-payment-badge--venmo { background: #008cff; }
.fsx-payment-badge--cashapp { background: #00d632; }
.fsx-payment-badge--zelle { background: #6d1ed4; }
.fsx-payment-badge--paypal { background: #003087; }
.fsx-payment-badge--revolut { background: #f3f3f3; }
.fsx-payment-badge--wise { background: #9fe870; }
.fsx-payment-badge--chime { background: #00a67e; color: #fff; font-size: 12px; font-weight: 800; line-height: 1; }
.fsx-payment-badge--monzo { background: #14233c; }
.fsx-payment-badge--n26 { background: #00a1b0; }
.fsx-payment-badge--bitcoin { background: #f7931a; }
.fsx-payment-badge--lightning { background: #f7e55a; color: #332d00; }

.fsx-footer__cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	flex: 1 1 0;
	min-width: 0;
}

.fsx-footer__h {
	font-size: 16px;
	font-weight: 600;
	line-height: 20px;
	color: #fff;
}

.fsx-footer__cols ul {
	margin: 36px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.fsx-footer__cols a {
	font-size: 14px;
	line-height: 20px;
	color: #dfdfdf;
}

.fsx-wordmark {
	margin: 40px 0 0;
	font-family: "Clash Display", "Public Sans", sans-serif;
	font-weight: 700;
	font-size: 158px;
	line-height: 158px;
	color: #474747;
	text-align: center;
	letter-spacing: 0.01em;
	white-space: nowrap;
	overflow: hidden;
}

.fsx-footer__bottom {
	margin-top: 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.fsx-footer__legal {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	font-size: 14px;
	line-height: 19px;
	color: #bdbdbd;
}

.fsx-social {
	display: flex;
	gap: 12px;
}

.fsx-social span {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #3a3a3a;
}

.fsx-mobiledock {
	display: none;
}

/* Coarse responsive fallbacks — the Figma frame is a fixed 1440 desktop. */

@media (max-width: 1100px) {
	.fsx-grid,
	.fsx-cats__row {
		grid-template-columns: repeat(2, 1fr);
	}

	.fsx-hero__grid {
		flex-direction: column;
		align-items: flex-start;
	}

	.fsx-verify__inner,
	.fsx-who__head {
		grid-template-columns: 1fr;
		align-items: flex-start;
	}

	.fsx-faq__grid {
		flex-direction: column;
		gap: 28px;
	}

	.fsx-hero {
		padding: 24px 0 8px;
	}

	.fsx-hero__copy {
		padding-bottom: 4px;
	}

	.fsx-hero__art,
	.fsx-verify__art,
	.fsx-faq__aside {
		width: 100%;
		max-width: 100%;
	}

	.fsx-statcards,
	.fsx-quality__row {
		flex-wrap: wrap;
	}

	.fsx-benefits__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.fsx-faq__aside .fsx-h2 {
		max-width: none;
	}

	.fsx-popular {
		padding: 30px 0 36px;
	}

	.fsx-pcats {
		padding: 24px 0 42px;
	}

	.fsx-verify {
		padding: 34px 0 42px;
	}

	.fsx-verify__inner {
		padding: 22px;
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.fsx-verify__media {
		padding: 18px;
	}

	.fsx-verify__title {
		font-size: 28px;
		line-height: 1.18;
	}

	.fsx-popular__slide {
		flex-basis: calc((100% - 14px) / 2);
	}

	.fsx-popular__viewport {
		padding: 0 28px;
	}

	.fsx-statcard,
	.fsx-qcard {
		flex-basis: calc(50% - 12px);
	}

	.fsx-soon__row {
		grid-template-columns: 1fr;
	}

	.fsx-pcats__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.fsx-wordmark {
		font-size: 12vw;
		line-height: 1.1;
	}

	.fsx-menu,
	.fsx-search {
		display: none;
	}
}

@media (max-width: 640px) {
	.fsx-grid,
	.fsx-cats__row {
		grid-template-columns: 1fr;
	}

	.fsx-announce {
		padding-inline: 16px;
	}

	.fsx-announce p {
		font-size: 12px;
	}

	.fsx-nav {
		padding: 8px 0;
	}

	.fsx-nav__inner {
		gap: 14px;
		padding: 0 18px;
		align-items: center;
	}

	.fsx-logo {
		width: 188px;
		height: auto;
	}

	.fsx-nav__right {
		margin-left: auto;
		gap: 10px;
	}

	.fsx-searchwrap,
	.fsx-nav__icons {
		display: none;
	}

	.fsx-mobiletools {
		display: flex;
	}

	.fsx-mobilepanel {
		padding: 0 18px 18px;
	}

	.fsx-hero__title {
		max-width: none;
		font-size: 42px;
		/* 0.96 put the leading below the type size, so ascenders and
		   descenders collided between lines. */
		line-height: 1.05;
		letter-spacing: -0.03em;
	}

	.fsx-hero__lede {
		max-width: none;
		font-size: 15px;
		line-height: 1.52;
	}

	.fsx-hero {
		padding: 20px 0 0;
		background:
			radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.46) 0%, rgba(255, 255, 255, 0) 32%),
			linear-gradient(180deg, #efedf8 0%, #f5f2fb 56%, #ece7f6 100%);
	}

	.fsx-hero__grid {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.fsx-hero__copy {
		width: 100%;
		gap: 16px;
		padding: 18px 0 0;
	}

	.fsx-pill {
		padding: 8px 18px;
		border-radius: 999px;
		font-size: 14px;
		font-weight: 700;
		line-height: 20px;
	}

	.fsx-hero__actions {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
		width: 100%;
		margin-top: 4px;
	}

	.fsx-hero__actions .fsx-btn {
		flex: none;
		width: 100%;
		height: 56px;
		padding: 0 14px;
		font-size: 16px;
		line-height: 22px;
		justify-content: center;
	}

	/* Full-bleed to the viewport edge. The shell pads 20px a side, so 34px
	   ran the artwork 14px off each edge and clipped the outer vials. */
	.fsx-hero__art {
		width: calc(100% + 40px);
		max-width: none;
		margin: 12px -20px 0;
		align-self: center;
	}

	.fsx-hero__art img {
		width: 100%;
		max-height: none;
	}

	.fsx-popular__head .fsx-h2 {
		font-size: 28px;
	}

	.fsx-popular__rule {
		width: 88px;
	}

	.fsx-popular__viewport {
		--fsx-carousel-gutter: 0px;
		padding: 0;
		isolation: isolate;
	}

	.fsx-popular__viewport::before,
	.fsx-popular__viewport::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		width: 34px;
		z-index: 1;
		pointer-events: none;
	}

	.fsx-popular__viewport::before {
		left: 0;
		background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0) 100%);
	}

	.fsx-popular__viewport::after {
		right: 0;
		background: linear-gradient(270deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0) 100%);
	}

	.fsx-popular__mask {
		width: 100%;
		overflow-x: auto;
		overflow-y: visible;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		touch-action: pan-x;
	}

	.fsx-popular__mask::-webkit-scrollbar {
		display: none;
	}

	.fsx-popular__track {
		width: max-content;
		gap: 16px;
	}

	.fsx-popular__slide {
		flex: 0 0 auto;
		scroll-snap-align: center;
	}

	.fsx-popular__slide .fsx-card {
		border-radius: 26px;
	}

	.fsx-popular__slide .fsx-card__media {
		height: 276px;
	}

	.fsx-popular__slide .fsx-card__body {
		padding: 18px;
		gap: 12px;
	}

	.fsx-popular__slide .fsx-card__title {
		font-size: 18px;
		line-height: 1.28;
	}

	.fsx-popular__slide .fsx-card__price {
		font-size: 22px;
	}

	.fsx-popular__slide .fsx-cartbtn {
		width: 36px;
		height: 36px;
	}

	.fsx-popular__slide .fsx-cartbtn img {
		width: 16px;
		height: 16px;
	}

	.fsx-popular__dots {
		display: flex;
		margin-top: 20px;
	}

	.fsx-popular__actions {
		margin-top: 26px;
	}

	.fsx-popular__actions .fsx-btn {
		flex: 0 0 auto;
		height: 42px;
		padding: 0 14px;
		font-size: 14px;
		line-height: 20px;
	}

	.fsx-popular__actions .fsx-btn__arrow {
		width: 20px;
		height: 20px;
	}

	.fsx-popular__actions .fsx-btn__arrow img {
		width: 14px;
		height: 14px;
	}

	.fsx-pcats__tabs .fsx-tabs {
		gap: 10px;
		margin-bottom: 22px;
	}

	.fsx-pcats__grid--desktop {
		display: none;
	}

	.fsx-pcats__mobile {
		display: block;
	}

	.fsx-pcats__viewport::before {
		background: linear-gradient(90deg, rgba(247, 247, 250, 0.98) 0%, rgba(247, 247, 250, 0) 100%);
	}

	.fsx-pcats__viewport::after {
		background: linear-gradient(270deg, rgba(247, 247, 250, 0.98) 0%, rgba(247, 247, 250, 0) 100%);
	}

	.fsx-pcats__slide .fsx-card {
		border-radius: 26px;
	}

	.fsx-pcats__slide .fsx-card__media {
		height: 276px;
	}

	.fsx-pcats__slide .fsx-card__body {
		padding: 18px;
		gap: 12px;
	}

	.fsx-pcats__slide .fsx-card__title {
		font-size: 18px;
		line-height: 1.28;
	}

	.fsx-pcats__slide .fsx-card__price {
		font-size: 22px;
	}

	.fsx-pcats__slide .fsx-cartbtn {
		width: 36px;
		height: 36px;
	}

	.fsx-pcats__slide .fsx-cartbtn img {
		width: 16px;
		height: 16px;
	}

	.fsx-pcats__tabs .fsx-tab {
		flex: 0 1 auto;
		width: auto;
		height: 38px;
		padding: 0 16px;
		font-size: 11px;
	}

	.fsx-pcats__grid {
		grid-template-columns: 1fr;
	}

	.fsx-pcats__grid .fsx-card__media {
		height: 190px;
	}

	.fsx-verify__inner {
		padding: 18px;
	}

	.fsx-verify__media {
		padding: 14px;
		border-radius: 18px;
	}

	.fsx-verify__title {
		font-size: 25px;
		line-height: 1.14;
	}

	.fsx-page .fsx-verify__body {
		margin: 14px 0 32px;
		font-size: 16px;
	}

	.fsx-circlebtn {
		display: none;
	}

	.fsx-faq {
		padding: 56px 0;
	}

	.fsx-faq__grid {
		gap: 22px;
	}

	.fsx-faq__aside {
		width: 100%;
	}

	.fsx-faq__aside .fsx-seelink {
		margin-top: 14px;
		font-size: 15px;
		line-height: 22px;
	}

	.fsx-faq__item {
		padding: 18px 0;
	}

	.fsx-faq__item summary {
		gap: 12px;
		font-size: 16px;
		line-height: 1.4;
	}

	.fsx-faq__item summary::after {
		width: 22px;
		height: 22px;
		font-size: 14px;
	}

	.fsx-faq__item p {
		max-width: none;
		font-size: 14px;
		line-height: 1.6;
		overflow-wrap: anywhere;
	}

	.fsx-footer {
		padding: 44px 0 calc(112px + env(safe-area-inset-bottom, 0px));
		overflow: hidden;
	}

	.fsx-footer__top {
		flex-direction: column;
		gap: 28px;
	}

	.fsx-footer__brand {
		width: 100%;
	}

	.fsx-footer__brand p {
		max-width: none;
	}


	.fsx-footer__payments {
		margin-top: 24px;
	}

	.fsx-payment-badges {
		gap: 6px;
	}

	.fsx-payment-badge {
		width: 24px;
		height: 24px;
		flex-basis: 24px;
	}

	.fsx-footer__cols {
		grid-template-columns: 1fr;
		gap: 22px;
		width: 100%;
	}

	.fsx-footer__cols ul {
		margin-top: 14px;
		gap: 10px;
	}

	.fsx-wordmark {
		margin-top: 28px;
		font-size: 54px;
		line-height: 0.94;
		text-align: left;
		white-space: normal;
		overflow: visible;
	}

	.fsx-footer__bottom {
		margin-top: 24px;
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
	}

	.fsx-footer__legal {
		gap: 10px 14px;
	}

	.fsx-social {
		gap: 10px;
	}

	.fsx-mobiledock {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 80;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		align-items: stretch;
		padding: 10px 18px calc(10px + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid rgba(65, 36, 128, 0.1);
		background: rgba(255, 255, 255, 0.96);
		backdrop-filter: blur(16px);
		box-shadow: 0 -14px 32px rgba(14, 8, 22, 0.08);
	}

	.fsx-mobiledock__item {
		appearance: none;
		border: 0;
		background: none;
		padding: 8px 6px 4px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 7px;
		color: var(--g700);
		font: inherit;
		text-decoration: none;
	}

	.fsx-mobiledock__icon {
		position: relative;
		display: grid;
		place-items: center;
		width: 24px;
		height: 24px;
		color: currentColor;
	}

	.fsx-mobiledock__icon img,
	.fsx-mobiledock__icon svg {
		width: 24px;
		height: 24px;
	}

	.fsx-mobiledock__item .fsx-badge {
		top: -3px;
		left: 14px;
		min-width: 16px;
		width: 16px;
		height: 16px;
		font-size: 9px;
		background: var(--gold500);
		color: #23180a;
	}

	.fsx-mobiledock__label {
		font-size: 13px;
		font-weight: 600;
		line-height: 1.2;
		letter-spacing: -0.01em;
	}

	.fsx-mobiledock__item.is-active {
		color: var(--p500);
	}

	.fsx-mobiledock__item:focus-visible {
		outline: 2px solid rgba(65, 36, 128, 0.28);
		outline-offset: -2px;
		border-radius: 14px;
	}

	.fsx-h2 {
		font-size: 30px;
		line-height: 40px;
	}

	.fsx-statcard,
	.fsx-qcard {
		flex-basis: 100%;
	}

	.fsx-benefits {
		padding: 14px 0 16px;
		background: linear-gradient(180deg, #4a2b8e 0%, #412480 100%);
	}

	.fsx-benefits__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
		padding-top: 0;
		padding-bottom: 0;
	}

	.fsx-benefit {
		align-items: flex-start;
		gap: 12px;
		padding: 16px 14px;
		border-radius: 20px;
		background: rgba(255, 255, 255, 0.08);
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
	}

	.fsx-benefit + .fsx-benefit::before {
		display: none;
	}

	.fsx-benefit img {
		width: 52px;
		height: 52px;
		padding: 10px;
		border-radius: 18px;
		box-shadow:
			inset 0 0 0 1px rgba(255, 255, 255, 0.1),
			0 10px 20px rgba(16, 24, 40, 0.12);
	}

	.fsx-benefit > div {
		gap: 4px;
	}

	.fsx-benefit__t {
		font-size: 17px;
		line-height: 1.15;
	}

	.fsx-benefit__s {
		font-size: 14px;
		line-height: 1.35;
	}

	.fsx-stats__row {
		flex-direction: column;
		align-items: flex-start;
	}

	.fsx-stats__list {
		gap: 24px;
	}

	.fsx-stats__row .fsx-btn {
		align-self: center;
	}
}

/* Visually hidden, still announced. */
.fsx-page .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Header search typeahead --------------------------------------------------- */

/* The panel anchors to this rather than to the form, so it can sit outside the
   form's rounded border without being clipped by it. */
.fsx-searchwrap {
	position: relative;
}

/* Wider than the field it hangs off: at 312px a range price ("$38.00 –
   $109.00") left almost nothing for the title. Anchored right so the extra
   width grows inward and cannot run off the viewport. */
.fsx-suggest {
	position: absolute;
	z-index: 40;
	top: calc(100% + 8px);
	right: 0;
	left: auto;
	width: 420px;
	max-width: min(420px, calc(100vw - 32px));
	padding: 6px;
	background: #fff;
	border: 1px solid var(--g200);
	border-radius: 14px;
	box-shadow: 0 16px 40px rgba(16, 24, 40, 0.14);
	animation: fsx-suggest-in 150ms ease both;
	max-height: 60vh;
	overflow-y: auto;
}

.fsx-suggest[hidden] {
	display: none;
}

@keyframes fsx-suggest-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
}

.fsx-suggest__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px;
	border-radius: 10px;
	text-decoration: none;
	transition: background-color 140ms ease;
}

.fsx-suggest__row.is-active {
	background: var(--p50);
}

.fsx-suggest__media {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 8px;
	background: #efeeee;
	overflow: hidden;
	display: grid;
	place-items: center;
}

.fsx-suggest__media img {
	width: 100%;
	height: 100%;
	/* Grid item: min-height:auto pins this to the image's intrinsic
	   height, which defeats height:100% and makes contain overflow. */
	min-height: 0;
	min-width: 0;
	/* Portrait vial shots: cover would crop the strength band off
	   the bottom, so letterbox them instead. */
	object-fit: contain;
}

.fsx-suggest__text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.fsx-suggest__title {
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: var(--g800);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The matched run, not a browser default yellow. */
.fsx-suggest__title mark {
	background: none;
	color: var(--p500);
	font-weight: 700;
}

.fsx-suggest__meta {
	font-size: 12px;
	line-height: 16px;
	color: var(--g500);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fsx-suggest__price {
	flex-shrink: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--g800);
	white-space: nowrap;
}

.fsx-suggest__all {
	display: block;
	width: 100%;
	margin-top: 4px;
	padding: 10px 8px;
	border: 0;
	border-top: 1px solid var(--g200);
	border-radius: 0 0 10px 10px;
	background: none;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	color: var(--p500);
	text-align: left;
	cursor: pointer;
	transition: background-color 140ms ease;
}

.fsx-suggest__all:hover {
	background: var(--p50);
}

.fsx-suggest__none {
	padding: 18px 10px;
	font-size: 14px;
	color: var(--g600);
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.fsx-suggest {
		animation: none;
	}
}

/* Checkbox ------------------------------------------------------------------
 *
 * Shared: the listing's stock filter, the checkout's opt-ins and compliance
 * boxes, and the add-on rows. These lived in figma-listing.css and were removed
 * with the category checkbox list when it became a row list — which left the
 * stock filter drawing a native checkbox.
 */

.fsx-check {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 0;
	cursor: pointer;
	user-select: none;
}

.fsx-check input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.fsx-check__box {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border: 1.5px solid var(--g300);
	border-radius: 4px;
	background: #fff;
	position: relative;
	transition: background-color 160ms ease, border-color 160ms ease;
}

.fsx-check__box::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(0.6);
	opacity: 0;
	transition: opacity 140ms ease, transform 140ms ease;
}

.fsx-check input:checked + .fsx-check__box {
	background: var(--p500);
	border-color: var(--p500);
}

.fsx-check input:checked + .fsx-check__box::after {
	opacity: 1;
	transform: rotate(45deg) scale(1);
}

.fsx-check input:focus-visible + .fsx-check__box {
	outline: 2px solid var(--p500);
	outline-offset: 2px;
}

.fsx-check__label {
	flex: 1 1 auto;
	font-size: 15px;
	line-height: 22px;
	color: var(--g700);
}

.fsx-check__label a {
	color: var(--p500);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Certificate download link. Lives here rather than with the COA page because
   the product page's Certificate of Analysis tab uses it too, and figma-home
   is the one stylesheet both of those load. */
.fsx-page .fsx-coalink {
	display: inline-block;
	padding: 6px 14px;
	border: 1.4px solid var(--p500);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	color: var(--p500);
	text-decoration: none;
	white-space: nowrap;
}

.fsx-page .fsx-coalink:hover {
	background: var(--p50);
}

/* Mobile corrections ------------------------------------------------------
   The Figma frame is a fixed 1440 desktop, so several blocks below carried
   desktop geometry all the way down to phone widths. Kept together at the end
   of the file so the phone-only overrides are readable as one set. */

/* The card cart button was a 36px target. 44px is the minimum comfortable
   touch size, and the icon inside is unchanged. */
.fsx-page .fsx-cartbtn {
	width: 44px;
	height: 44px;
}

@media (max-width: 640px) {
	/* Newsletter ---------------------------------------------------------
	   .fsx-news__copy is a 600px box pushed 100px off the right edge to clear
	   the desktop vial cluster. On a 390px screen that ran the heading, the
	   body copy and the Subscribe button off-screen, and the banner clips
	   overflow so none of it could be scrolled back into view. */
	.fsx-news {
		padding: 36px 0;
	}

	.fsx-news__banner {
		min-height: 0;
	}

	/* The side artwork is wider than the phone viewport, so it sits directly
	   behind the copy rather than beside it. This scrim buys back the
	   contrast the flat purple gave the text on desktop. */
	.fsx-news__banner::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		background: linear-gradient(
			180deg,
			rgba(43, 22, 87, 0.92) 0%,
			rgba(43, 22, 87, 0.86) 100%
		);
	}

	.fsx-news__copy {
		max-width: 100%;
		margin-right: 0;
		padding: 32px 20px;
	}

	.fsx-news__title {
		font-size: 28px;
		line-height: 34px;
	}

	.fsx-news__sub {
		margin-top: 12px;
		font-size: 15px;
		line-height: 24px;
	}

	/* Side by side, the field and button do not fit above ~360px of copy
	   width without the button shrinking below its label. */
	.fsx-news__form {
		margin-top: 22px;
		flex-direction: column;
		gap: 10px;
	}

	.fsx-news__form input,
	.fsx-news__form button {
		width: 100%;
		height: 52px;
	}

	.fsx-page .fsx-news__status {
		margin-top: 12px;
		font-size: 14px;
	}

	.fsx-page .fsx-news__consent {
		margin-top: 10px;
		font-size: 11px;
		line-height: 17px;
	}

	/* Benefits -----------------------------------------------------------
	   Two columns leaves 169px a card, which is narrower than the longest
	   label ("Independent Testing"), so the text spilled past the card edge. */
	.fsx-benefits__row {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.fsx-benefit {
		align-items: center;
	}

	/* Section headings ---------------------------------------------------
	   --split keeps a heading and its lede side by side. At phone width the
	   heading was squeezed into four lines beside a half-empty paragraph. */
	.fsx-sechead,
	.fsx-sechead--split {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		margin-bottom: 28px;
	}

	.fsx-quality {
		padding: 44px 0;
	}

	.fsx-quality__lede {
		max-width: none;
	}

	.fsx-quality__row {
		gap: 4px;
	}

	/* Remaining sub-44px controls: the category tabs and the secondary
	   buttons that sit outside the hero. */
	.fsx-tab {
		min-height: 44px;
	}

	.fsx-btn {
		min-height: 44px;
	}
}