/*
 * Content bands.
 *
 * Every measurement is the mockup's. Where a band's padding differs from the
 * standard 88px it is because the mockup says so, and the exception is noted.
 * Values come from tokens.css; nothing here declares a raw colour.
 */

/* ------------------------------------------------------------ band headers */

.fms-band__header--centred {
	text-align: center;
}

.fms-band__header h2 {
	margin: 0;
}

.fms-band__header .fms-eyebrow + h2 {
	margin-top: 4px;
}

.fms-band__header .fms-lead {
	max-width: var(--fms-measure);
	margin: 14px 0 0;
}

.fms-band__header--centred .fms-lead {
	margin-inline: auto;
}

/* Cards and grids that follow a header sit 52px below it. */
.fms-band__header + * {
	margin-top: 52px;
}

/* --------------------------------------------------------------------- hero
 * 64px rather than 88px: the hero carries its height through the 600px minimum,
 * not through padding.
 */

.fms-hero {
	padding-block: 64px;
}

.fms-hero__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	min-height: 600px;
}

.fms-hero__copy {
	padding-right: 72px;
}

.fms-hero__copy .fms-eyebrow {
	margin-bottom: 20px;
}

.fms-hero__title {
	margin: 0 0 24px;
	font-size: var(--fms-size-hero);
	line-height: var(--fms-leading-heading);
	text-wrap: pretty;
}

.fms-hero__lead {
	margin: 0 0 36px;
	max-width: 470px;
	text-wrap: pretty;
}

.fms-hero__cta {
	padding: 17px 42px 15px;
	font-size: var(--fms-size-nav);
	color: var(--fms-white);
}

.fms-hero__media {
	display: flex;
	align-items: center;
	justify-content: center;
}

.fms-hero__media img,
.fms-hero__media .fms-placeholder {
	width: 430px;
	max-width: 100%;
	height: 460px;
	object-fit: contain;
	border-radius: var(--fms-radius-card);
}

/* ---------------------------------------------------------------- trust bar
 * 26px, from the mockup. It is a strip, not a section.
 */

.fms-trust {
	padding-block: 26px;
}

.fms-trust__row {
	display: flex;
	justify-content: space-between;
	gap: 24px;
}

.fms-trust__item {
	display: flex;
	align-items: center;
	gap: 13px;
}

.fms-trust__item span {
	font-size: var(--fms-size-nav);
	line-height: 1;
	color: var(--fms-cream);
}

/* The designer's icons are stroked brass on every band that uses them. */
.fms-icon {
	display: block;
	flex: none;
	stroke: var(--fms-brass);
}

/* ------------------------------------------------------------- shop by goal */

.fms-goals__grid {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 20px;
}

.fms-goals__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
	color: var(--fms-ink);
}

.fms-goals__disc {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 116px;
	height: 116px;
	max-width: 100%;
	border: 1px solid var(--fms-border);
	border-radius: 50%;
	background: var(--fms-sage);
	transition: background var(--fms-transition), border-color var(--fms-transition);
}

a.fms-goals__item:hover .fms-goals__disc {
	border-color: var(--fms-brass);
	background: var(--fms-white);
}

.fms-goals__label {
	font-weight: var(--fms-weight-medium);
	font-size: var(--fms-size-nav);
	line-height: 1.4;
	text-wrap: pretty;
}

/* ---------------------------------------------------------- category cards */

.fms-cats__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	/* The mockup separates these two deliberately. */
	row-gap: 52px;
	text-align: left;
}

.fms-cats__card {
	display: block;
	color: var(--fms-ink);
}

.fms-cats__art {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border: 1px solid var(--fms-border);
	border-radius: var(--fms-radius-card);
	background: var(--fms-sage);
	transition: border-color var(--fms-transition);
}

a.fms-cats__card:hover .fms-cats__art {
	border-color: var(--fms-brass);
}

.fms-cats__art img,
.fms-cats__art .fms-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.fms-cats__name {
	margin: 20px 0 6px;
	font-size: 20px;
	line-height: 1.3;
}

.fms-cats__cta {
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-medium);
	font-size: var(--fms-size-small);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--fms-brass);
}

/* -------------------------------------------------------- botanical artwork
 * The drawn stand-in for category artwork that has not been supplied.
 */

.fms-placeholder {
	display: block;
	width: 100%;
	height: 100%;
}

.fms-placeholder__ground {
	fill: var(--fms-sage);
}

/*
 * A fitted drawing leaves the slot's own ground showing either side of it, so
 * that ground has to be the same sage the drawing sits on.
 */
.fms-learn__art:has(.fms-placeholder--meet),
.fms-learn__thumb:has(.fms-placeholder--meet) {
	background: var(--fms-sage);
}

.fms-placeholder__stroke {
	stroke: var(--fms-forest);
	opacity: 0.55;
}

.fms-placeholder__accent {
	stroke: var(--fms-brass);
}

/* ------------------------------------------------------------- why choose */

/* 96px, not the standard 88px, and the columns stretch rather than centre so
 * the photograph runs the full height of the copy beside it. */
.fms-why {
	padding-block: 96px;
}

.fms-why__grid {
	display: grid;
	grid-template-columns: 608px 1fr;
	gap: var(--fms-gap-editorial);
	align-items: stretch;
}

.fms-why__media {
	overflow: hidden;
	min-height: 540px;
	border-radius: var(--fms-radius-card);
	background: var(--fms-cream);
}

.fms-why__media img,
.fms-why__media .fms-placeholder {
	width: 100%;
	height: 100%;
	min-height: 540px;
	object-fit: cover;
}

.fms-why__eyebrow {
	margin: 0 0 20px;
	font-size: 12px;
	color: var(--fms-cream);
}

.fms-why__copy h2 {
	margin: 0 0 20px;
	font-size: 40px;
	line-height: 1.2;
	text-wrap: pretty;
}

.fms-why__lead {
	margin: 0 0 44px;
	max-width: 520px;
	color: var(--fms-cream-82);
	text-wrap: pretty;
}

.fms-why__list {
	display: flex;
	flex-direction: column;
	gap: 36px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fms-why__item {
	padding-top: 24px;
	border-top: 1px solid var(--fms-cream-22);
}

.fms-why__title {
	margin: 0 0 10px;
	font-size: 24px;
	line-height: 1.25;
	color: var(--fms-cream);
}

.fms-why__text {
	margin: 0;
	max-width: 520px;
	font-size: var(--fms-size-lead);
	line-height: var(--fms-leading-lead);
	color: var(--fms-cream-82);
	text-wrap: pretty;
}

/* ---------------------------------------------------------------- reviews */

.fms-reviews__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--fms-gap-card);
}

.fms-reviews__card {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
	padding: 32px 34px;
}

.fms-reviews__stars {
	color: var(--fms-brass);
	font-size: 17px;
	letter-spacing: 3px;
	line-height: 1;
}

.fms-reviews__quote {
	margin: 0;
	flex: 1;
}

.fms-reviews__quote p {
	margin: 0;
	font-size: var(--fms-size-nav);
	line-height: var(--fms-leading-body);
	color: var(--fms-ink);
}

.fms-reviews__by {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.fms-reviews__name {
	font-weight: var(--fms-weight-medium);
	font-size: var(--fms-size-meta);
	color: var(--fms-ink);
}

.fms-reviews__loc {
	font-size: var(--fms-size-small);
	color: var(--fms-muted);
}

/* -------------------------------------------------------------- newsletter */

/*
 * Mockup 00's card: white, a brass rule across the top only, the wording on the
 * left and the whole form on one row to the right of it.
 */
.fms-newsletter__card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 40px;
	align-items: center;
	padding: 44px 62px;
	border-top: 3px solid var(--fms-brass);
	border-radius: var(--fms-radius-card);
	background: var(--fms-white);
}

/*
 * fms_band_header() centres, which is right everywhere else it is used and
 * wrong here. The centred variant sets `margin-inline: auto` on the heading and
 * the lead, so undoing the alignment means undoing those too.
 */
.fms-newsletter__text .fms-band__header--centred {
	margin: 0;
	text-align: left;
}

.fms-newsletter__text .fms-band__header--centred h2,
.fms-newsletter__text .fms-band__header--centred .fms-lead {
	margin-inline: 0;
}

.fms-newsletter__text .fms-band__header--centred .fms-lead {
	max-width: 520px;
	margin-bottom: 0;
}

/*
 * Everything below competes with Gravity Forms' own `gravity-theme` stylesheet,
 * which loads after this file and matches at the same specificity, so each
 * selector carries `body` and the plugin's own class. The same trap as the
 * required asterisk in forms.css.
 */

/*
 * The plugin draws a label above every field and a required legend above the
 * form. The design has neither: the placeholder carries the name. The labels go
 * out of the picture rather than out of the markup, so a screen reader still
 * announces each field.
 */
body .fms-newsletter__form .gform_wrapper.gravity-theme .gform_heading {
	display: none;
}

body .fms-newsletter__form .gform_wrapper.gravity-theme .gfield_label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

body .fms-newsletter__form .gform_wrapper.gravity-theme form {
	display: flex;
	align-items: center;
	gap: 12px;
}

body .fms-newsletter__form .gform_wrapper.gravity-theme .gform-body {
	flex: 0 1 auto;
}

body .fms-newsletter__form .gform_wrapper.gravity-theme .gform_fields {
	display: flex;
	flex-wrap: nowrap;
	gap: 12px;
}

body .fms-newsletter__form .gform_wrapper.gravity-theme .gfield {
	width: auto;
}

body .fms-newsletter__form .gform_wrapper.gravity-theme .gfield--type-text input {
	width: 170px;
}

body .fms-newsletter__form .gform_wrapper.gravity-theme .gfield--type-email input {
	width: 230px;
}

body .fms-newsletter__form .gform_wrapper.gravity-theme .gform_footer {
	margin: 0;
	padding: 0;
}

body .fms-newsletter__form .gform_wrapper.gravity-theme .gform_button {
	background: var(--fms-brass);
	color: var(--fms-ink);
	white-space: nowrap;
}

body .fms-newsletter__form .gform_wrapper.gravity-theme .gform_button:hover {
	background: linear-gradient(var(--fms-white-15), var(--fms-white-15)), var(--fms-brass);
	color: var(--fms-ink);
}

/* --------------------------------------------------------------- editor ---
 * Blocks render inside the editor at a narrower width than the front end, and
 * without the theme's band padding, so a preview does not have to be pixel
 * perfect but it does have to be legible.
 */

.editor-styles-wrapper .fms-band {
	padding-block: 40px;
}

.editor-styles-wrapper .fms-hero__grid {
	min-height: 0;
}

/* ------------------------------------------------------------- breakpoints */

@media (max-width: 1100px) {
	.fms-goals__grid {
		grid-template-columns: repeat(4, 1fr);
		row-gap: 34px;
	}

	.fms-why__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.fms-why__media,
	.fms-why__media img,
	.fms-why__media .fms-placeholder {
		min-height: 340px;
	}
}

@media (max-width: 900px) {
	.fms-hero__grid {
		grid-template-columns: 1fr;
		min-height: 0;
		gap: 40px;
	}

	.fms-hero__copy {
		padding-right: 0;
	}

	.fms-cats__grid {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 34px;
	}

	.fms-reviews__grid {
		grid-template-columns: 1fr;
	}

	.fms-trust__row {
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 16px 32px;
	}
}

@media (max-width: 600px) {
	.fms-hero {
		padding-block: var(--fms-band-y-m);
	}

	.fms-hero__title {
		font-size: var(--fms-size-hero-m);
	}

	.fms-hero__media img,
	.fms-hero__media .fms-placeholder {
		width: 100%;
		height: 240px;
	}

	.fms-band__header + * {
		margin-top: 34px;
	}

	.fms-goals__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px 16px;
	}

	.fms-goals__disc {
		width: 96px;
		height: 96px;
	}

	.fms-cats__grid {
		gap: var(--fms-gap-card-m);
		row-gap: 34px;
	}

	.fms-cats__name {
		font-size: 17px;
	}

	.fms-why__item {
		gap: 16px;
	}

	body .fms-newsletter__form .gform_wrapper.gravity-theme form,
	body .fms-newsletter__form .gform_wrapper.gravity-theme .gform_fields {
		flex-wrap: wrap;
	}

	body .fms-newsletter__form .gform_wrapper.gravity-theme .gform-body,
	body .fms-newsletter__form .gform_wrapper.gravity-theme .gfield,
	body .fms-newsletter__form .gform_wrapper.gravity-theme .gfield--type-text input,
	body .fms-newsletter__form .gform_wrapper.gravity-theme .gfield--type-email input {
		width: 100%;
	}
}

/* ----------------------------------------------------------- product cards
 * One card, six uses: the two homepage product bands, the shop and category
 * listings, search results, related products and the in body product block.
 * The measurements are the homepage mockup's. The shop listing draws the same
 * card two pixels tighter in the body padding, which is not a difference worth
 * a second component.
 */

.fms-pgrid {
	display: grid;
	gap: var(--fms-gap-card);
}

.fms-pgrid--3 { grid-template-columns: repeat(3, 1fr); }
.fms-pgrid--4 { grid-template-columns: repeat(4, 1fr); }

.fms-pcard {
	display: block;
	overflow: hidden;
	border: 1px solid var(--fms-border);
	border-radius: var(--fms-radius-card);
	background: var(--fms-white);
	box-shadow: var(--fms-shadow-card);
	color: var(--fms-ink);
	transition: border-color var(--fms-transition), box-shadow var(--fms-transition);
}

.fms-pcard:hover {
	border-color: var(--fms-brass);
	box-shadow: var(--fms-shadow-card-hover);
	color: var(--fms-ink);
}

.fms-pcard__tile {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	border-bottom: 1px solid var(--fms-border);
}

/* The mockup insets the bottle to 78% of the tile so every product sits on the
 * same optical baseline whatever the crop of its photograph. */
.fms-pcard__art {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 78%;
	height: 78%;
}

.fms-pcard__art img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.fms-pcard__lock {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	background: var(--fms-sage);
}

.fms-icon--forest {
	display: block;
	flex: none;
	stroke: var(--fms-forest);
}

.fms-pcard__lock-text {
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-medium);
	font-size: 12.5px;
	text-transform: uppercase;
	color: var(--fms-forest);
}

.fms-pcard__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	padding: 6px 13px 5px;
	border-radius: var(--fms-radius-pill);
	background: var(--fms-brass);
	color: var(--fms-white);
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-bold);
	font-size: 11px;
	text-transform: uppercase;
}

.fms-pcard__body {
	display: block;
	padding: 22px 24px 30px;
}

.fms-pcard__brand {
	display: block;
	margin-bottom: 6px;
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-bold);
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--fms-muted);
}

.fms-pcard__name {
	margin: 0 0 8px;
	font-size: 18px;
	line-height: 1.35;
	color: var(--fms-ink);
	text-wrap: pretty;
}

.fms-pcard__price {
	display: block;
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-medium);
	font-size: 16px;
	color: var(--fms-brass);
}

/* WooCommerce wraps a price in its own tags; they must not inherit a heading. */
.fms-pcard__price .woocommerce-Price-amount,
.fms-pcard__price ins,
.fms-pcard__price del {
	font-family: inherit;
	font-size: inherit;
	text-decoration-color: currentColor;
}

.fms-pcard__price del {
	margin-right: 6px;
	color: var(--fms-muted);
}

.fms-pcard__price--gated {
	color: var(--fms-muted);
}

/* The band's closing text link. 44px at the mockup's 15px keeps the target. */
.fms-band__more {
	margin: 44px 0 0;
	text-align: center;
}

.fms-band__more a {
	display: inline-flex;
	align-items: center;
	min-height: var(--fms-tap-min);
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-medium);
	font-size: 15px;
	color: var(--fms-forest);
}

.fms-band__more a:hover {
	color: var(--fms-brass);
}

/* ------------------------------------------------------ monthly promotions
 * 76px top and 80px bottom rather than the standard 88px, and a 4px brass rule
 * along the top. Both are the mockup's, and the rule is what separates this
 * band from the forest editorial band further down the page.
 */

.fms-promo {
	padding-block: 76px 80px;
	border-top: 4px solid var(--fms-brass);
}

.fms-promo__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 56px;
	margin-bottom: 44px;
}

.fms-promo__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 18px 7px;
	border-radius: var(--fms-radius-pill);
	background: var(--fms-brass);
	color: var(--fms-ink);
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-bold);
	font-size: 12px;
	text-transform: uppercase;
}

.fms-promo__title {
	margin: 20px 0 0;
	font-size: var(--fms-size-h1);
	line-height: 1.15;
	text-wrap: pretty;
}

.fms-promo__lead {
	margin: 14px 0 0;
	max-width: 640px;
	color: var(--fms-cream-82);
}

.fms-promo__action {
	flex: none;
	text-align: right;
}

.fms-promo__note {
	margin: 14px 0 0;
	font-size: var(--fms-size-meta);
	color: var(--fms-cream-72);
}

.fms-promo__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.fms-promo__card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 20px;
	border: 1px solid var(--fms-border);
	border-radius: var(--fms-radius-card);
	background: var(--fms-white);
	box-shadow: var(--fms-shadow-card);
	transition: border-color var(--fms-transition), box-shadow var(--fms-transition);
}

.fms-promo__card:hover {
	border-color: var(--fms-brass);
	box-shadow: var(--fms-shadow-card-hover);
}

.fms-promo__art {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
}

.fms-promo__art img,
.fms-promo__art .fms-placeholder {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.fms-promo__body {
	display: block;
	min-width: 0;
}

.fms-promo__name {
	display: block;
	margin-bottom: 3px;
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-medium);
	font-size: 15px;
	line-height: 1.35;
	color: var(--fms-ink);
}

.fms-promo__off {
	display: block;
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-bold);
	font-size: 13px;
	text-transform: uppercase;
	color: var(--fms-brass);
}

/* A gated product keeps its row but says so, in muted text rather than brass,
 * the same wording the product card uses. */
.fms-promo__off--gated {
	font-weight: var(--fms-weight-regular);
	text-transform: none;
	color: var(--fms-muted);
}

.fms-promo__chevron {
	margin-left: auto;
	font-size: 18px;
	line-height: 1;
	color: var(--fms-brass);
}

/* ----------------------------------------------------- practitioner picks */

.fms-picks__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--fms-gap-card);
}

.fms-picks__card {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 32px 30px;
	border: 1px solid var(--fms-border);
	border-radius: var(--fms-radius-card);
}

.fms-picks__art {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 132px;
	height: 132px;
	margin-bottom: 22px;
}

.fms-picks__art img,
.fms-picks__art .fms-placeholder {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.fms-picks__quote {
	margin: 0 0 18px;
}

.fms-picks__quote p {
	margin: 0;
	font-size: var(--fms-size-lead);
	line-height: var(--fms-leading-lead);
	color: var(--fms-ink);
	text-wrap: pretty;
}

/* `auto` on the top margin pushes the name and rule to the bottom of the card,
 * so three cards of unequal quote length still line their footers up. */
.fms-picks__product {
	margin: auto 0 14px;
	font-size: 18px;
	line-height: 1.3;
}

.fms-picks__by {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 16px;
	border-top: 1px solid var(--fms-border);
}

.fms-picks__initials {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--fms-sage);
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-medium);
	font-size: 13px;
	color: var(--fms-ink);
}

.fms-picks__who {
	display: block;
}

.fms-picks__name {
	display: block;
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-medium);
	font-size: 13px;
	line-height: 1.4;
	color: var(--fms-forest);
}

.fms-picks__role {
	display: block;
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-regular);
	font-size: 13px;
	line-height: 1.4;
	color: var(--fms-muted);
}

/* --------------------------------------------------------- featured brands
 * The strip renders all 48 logos and JavaScript hides all but the current
 * page. With JavaScript off nothing is hidden and every brand is visible,
 * which is a better failure than an empty strip.
 */

.fms-brands__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 8px 0;
	width: 1080px;
	max-width: 100%;
	margin-inline: auto;
	transition: opacity 380ms ease;
}

.fms-brands__grid[data-fms-fade="out"] {
	opacity: 0;
}

.fms-brands__item {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 104px;
}

/*
 * A class, not the `hidden` attribute. `hidden` only sets `display: none` from
 * the user agent stylesheet, and the rule above would win, so the logo would
 * stay on screen while the script believed it had put it away.
 */
.fms-brands__item--off {
	display: none;
}

.fms-brands__mark {
	position: relative;
	display: block;
	width: 150px;
	height: 60px;
}

.fms-brands__logo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.fms-brands__logo--colour {
	opacity: 0;
	transition: opacity 220ms ease;
}

.fms-brands__item:hover .fms-brands__logo--colour,
.fms-brands__item:focus-visible .fms-brands__logo--colour {
	opacity: 1;
}

.fms-brands__dots {
	display: flex;
	justify-content: center;
	/* The dots carry their own spacing: see the note on .fms-brands__dot. */
	gap: 0;
	margin-top: 44px;
}

/* No JavaScript means no pages to turn, so the row is not there at all. */
.fms-brands__dots:empty {
	display: none;
}

/*
 * The dot is 8px, as drawn. The button around it is not.
 *
 * This rule used to make the button the dot: 8 by 8, ten apart, exactly as the
 * mockup draws it. The reasoning written here was that criterion 9 asks for
 * 44px targets at 390 and not at 1440, and that 44px buttons ten apart would
 * either overlap each other or spread the row far wider than the design. Both
 * of those are still true.
 *
 * What it missed is that 44px is not the only floor. WCAG 2.5.8 sets 24px at
 * every width, and an 8px button is not a target anybody can hit. So the dot
 * keeps its 8px and the button becomes 24, which is as large as it can be here
 * without two adjacent targets overlapping, using the same `::before` pattern
 * the 600px block has always used at 44. The container's gap goes to zero to
 * pay for it, so the dots sit on a 24px pitch instead of 18.
 */
.fms-brands__dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.fms-brands__dot::before {
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--fms-border);
	transition: background var(--fms-transition);
}

.fms-brands__dot:hover::before {
	background: var(--fms-brass);
}

.fms-brands__dot[aria-selected="true"]::before {
	background: var(--fms-forest);
}

.fms-brands .fms-band__more {
	margin-top: 32px;
}

/* ------------------------------------------------------------ learn before
 * A 648px feature beside a list of four. The 648 is the mockup's, and it is
 * half the 1320 container less the 48px gap less rounding, so it is written as
 * the measurement rather than a fraction.
 */

.fms-learn__grid {
	display: grid;
	grid-template-columns: 648px 1fr;
	gap: 48px;
	align-items: stretch;
}

.fms-learn__feature {
	display: flex;
	flex-direction: column;
	color: var(--fms-ink);
}

.fms-learn__art {
	display: block;
	overflow: hidden;
	width: 100%;
	height: 400px;
	border: 1px solid var(--fms-border);
	border-radius: var(--fms-radius-card);
	background: var(--fms-white);
	box-shadow: var(--fms-shadow-card);
	transition: border-color var(--fms-transition);
}

.fms-learn__feature:hover .fms-learn__art,
.fms-learn__row:hover .fms-learn__thumb {
	border-color: var(--fms-brass);
}

.fms-learn__art img,
.fms-learn__art .fms-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.fms-learn__tag {
	display: block;
	margin: 22px 0 8px;
	font-size: 11px;
}

.fms-learn__title {
	margin: 0 0 10px;
	font-size: 26px;
	line-height: 1.25;
	text-wrap: pretty;
}

.fms-learn__excerpt {
	display: block;
	margin-bottom: 12px;
	max-width: 560px;
	font-size: var(--fms-size-lead);
	line-height: var(--fms-leading-lead);
	text-wrap: pretty;
}

.fms-learn__cta {
	display: block;
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-medium);
	font-size: var(--fms-size-meta);
	color: var(--fms-forest);
}

.fms-learn__cta--small {
	font-size: 13px;
	color: var(--fms-brass);
}

.fms-learn__list {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.fms-learn__row {
	display: flex;
	gap: 20px;
	align-items: center;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--fms-border);
	color: var(--fms-ink);
}

.fms-learn__thumb {
	flex: none;
	display: block;
	overflow: hidden;
	width: 104px;
	height: 104px;
	border: 1px solid var(--fms-border);
	border-radius: var(--fms-radius-card);
	background: var(--fms-white);
	transition: border-color var(--fms-transition);
}

.fms-learn__thumb img,
.fms-learn__thumb .fms-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.fms-learn__row-body {
	display: block;
	min-width: 0;
}

.fms-learn__row .fms-learn__tag {
	margin: 0 0 6px;
}

.fms-learn__row-title {
	margin: 0 0 8px;
	font-size: 20px;
	line-height: 1.3;
	text-wrap: pretty;
}

/* -------------------------------------------- breakpoints, the new bands ---
 * These follow the same three widths as the bands above. The mockups specify
 * 1440px and 390px only, so 1100px and 900px are the two intermediate widths
 * that keep the grids from crushing between them.
 */

@media (max-width: 1100px) {
	/*
	 * The card stacks here, not at 600: the wording column plus a 560px form row
	 * runs out of room long before the phone breakpoint.
	 */
	.fms-newsletter__card {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
		padding: 36px 32px;
	}

	.fms-pgrid--4 {
		grid-template-columns: repeat(3, 1fr);
	}

	.fms-promo__grid,
	.fms-picks__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.fms-brands__grid {
		width: 100%;
		grid-template-columns: repeat(4, 1fr);
	}

	.fms-learn__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.fms-learn__art {
		height: 340px;
	}

	.fms-learn__list {
		gap: 22px;
	}
}

@media (max-width: 900px) {
	.fms-promo__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 28px;
	}

	.fms-promo__action {
		text-align: left;
	}

	.fms-picks__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	/*
	 * Product rows become a horizontal scroller rather than a narrower grid,
	 * which is what the mockup does for every product row on the site. The
	 * negative inline margin lets the row bleed to the viewport edges while its
	 * own padding keeps the first and last card off them.
	 */
	.fms-pgrid--scroll {
		display: flex;
		gap: var(--fms-gap-card-m);
		overflow-x: auto;
		margin-inline: calc(-1 * var(--fms-band-x-m));
		padding: 30px var(--fms-band-x-m) 14px;
		-webkit-overflow-scrolling: touch;
	}

	.fms-pgrid--scroll > .fms-pcard {
		flex: none;
		width: 224px;
	}

	/* The scroller carries its own top padding, so it does not also take the
	 * standard gap under a band header. */
	.fms-band__header + .fms-pgrid--scroll {
		margin-top: 0;
	}

	/* Scoped to the scroller. A listing card is the full width of the viewport at
	 * this size, and a 222px tile under a 342px card is not square. */
	.fms-pgrid--scroll .fms-pcard__tile {
		aspect-ratio: auto;
		height: 222px;
	}

	.fms-pcard__body {
		padding: 16px 18px 24px;
	}

	.fms-pcard__name {
		margin-bottom: 6px;
		font-size: 16px;
	}

	.fms-pcard__price {
		font-size: 15px;
	}

	/* -------------------------------------------------------------- promo */

	.fms-promo {
		padding-block: 44px 48px;
	}

	.fms-promo__head {
		align-items: center;
		gap: 0;
		margin-bottom: 0;
		text-align: center;
	}

	.fms-promo__copy {
		width: 100%;
	}

	.fms-promo__badge {
		padding: 7px 16px 6px;
		font-size: 11px;
	}

	.fms-promo__title {
		margin-top: 16px;
		font-size: var(--fms-size-h1-m);
	}

	.fms-promo__lead {
		margin: 12px auto 0;
	}

	.fms-promo__action {
		order: 2;
		width: 100%;
		padding-top: 14px;
		text-align: center;
	}

	.fms-promo__action .fms-button {
		width: 100%;
	}

	.fms-promo__grid {
		display: flex;
		gap: 12px;
		overflow-x: auto;
		margin-inline: calc(-1 * var(--fms-band-x-m));
		padding: 28px var(--fms-band-x-m) 8px;
		-webkit-overflow-scrolling: touch;
	}

	.fms-promo__card {
		flex: none;
		width: 270px;
		gap: 14px;
		padding: 16px 18px;
	}

	.fms-promo__art {
		width: 56px;
		height: 56px;
	}

	.fms-promo__name {
		font-size: 14px;
	}

	.fms-promo__off {
		font-size: 12px;
	}

	/* -------------------------------------------------------------- picks */

	.fms-picks__card {
		padding: 26px 24px;
	}

	.fms-picks__art {
		width: 104px;
		height: 104px;
		margin-bottom: 18px;
	}

	/* ------------------------------------------------------------- brands */

	.fms-brands__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 6px 0;
	}

	.fms-brands__item {
		height: 64px;
	}

	.fms-brands__mark {
		width: 90px;
		height: 36px;
	}

	/* Touch has no hover, so the colour version would never appear. It is shown
	 * instead of the monotone one, which is what a tap would have revealed. */
	.fms-brands__logo--colour {
		opacity: 0;
	}

	/* The dot grows into a 44px target here. The visual dot stays 7px, as drawn
	 * for mobile, and the row's gap closes because the buttons now supply it. */
	/*
	 * Eight 44px targets need 352px, and the container leaves 342. The row takes
	 * the full viewport width instead, the same bleed the product scrollers use,
	 * so every dot keeps its 44px rather than shrinking to 43.
	 */
	.fms-brands__dots {
		gap: 0;
		margin: 12px calc(-1 * var(--fms-band-x-m)) 0;
	}

	.fms-brands__dot {
		display: flex;
		align-items: center;
		justify-content: center;
		width: var(--fms-tap-min);
		height: var(--fms-tap-min);
		border-radius: 0;
		background: none;
	}

	.fms-brands__dot::before {
		content: "";
		display: block;
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: var(--fms-border);
		transition: background var(--fms-transition);
	}

	.fms-brands__dot[aria-selected="true"] {
		background: none;
	}

	.fms-brands__dot[aria-selected="true"]::before {
		background: var(--fms-forest);
	}

	/* ---------------------------------------------------------- why choose */

	.fms-why {
		padding-block: 56px;
	}

	.fms-why__copy h2 {
		margin-bottom: 16px;
		font-size: var(--fms-size-h1-m);
	}

	.fms-why__eyebrow {
		margin-bottom: 14px;
		font-size: 11px;
	}

	.fms-why__lead {
		margin-bottom: 32px;
	}

	.fms-why__list {
		gap: 26px;
	}

	.fms-why__item {
		padding-top: 20px;
	}

	.fms-why__title {
		margin-bottom: 8px;
		font-size: var(--fms-size-h3-m);
	}

	.fms-why__media,
	.fms-why__media img,
	.fms-why__media .fms-placeholder {
		min-height: 240px;
	}

	/* -------------------------------------------------------------- learn */

	.fms-learn__art {
		height: 214px;
	}

	.fms-learn__tag {
		margin: 16px 0 6px;
	}

	.fms-learn__title {
		font-size: 21px;
	}

	.fms-learn__excerpt {
		display: none;
	}

	.fms-learn__grid {
		gap: 30px;
	}

	.fms-learn__list {
		gap: 18px;
	}

	.fms-learn__row {
		gap: 16px;
		padding-bottom: 18px;
	}

	.fms-learn__thumb {
		width: 88px;
		height: 88px;
	}

	.fms-learn__row-title {
		margin-bottom: 4px;
		font-size: 16px;
	}

	.fms-learn__cta--small {
		font-size: 12px;
	}
}

/* Reduced motion stops the strip turning its own pages. The dots still work, so
 * nothing becomes unreachable; it simply stops moving on its own. */
@media (prefers-reduced-motion: reduce) {
	.fms-brands__grid {
		transition: none;
	}
}


/* ================================================== shipping information === */

/*
 * Added by the task update of 10 September, and not drawn by any mockup, so it
 * borrows the "why choose" band's rhythm rather than inventing one: three
 * columns of title and copy on a sage ground, with one way out to the shipping
 * page. No icons; see the note at the top of blocks/shipping-info.php.
 */

.fms-ship__row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--fms-gap-card);
	margin-top: 44px;
}

.fms-ship__item {
	padding: 32px;
	border: 1px solid var(--fms-border);
	border-radius: var(--fms-radius-card);
	background: var(--fms-white);
}

.fms-ship__title {
	margin: 0 0 12px;
	font-size: var(--fms-size-h4);
	line-height: var(--fms-leading-heading);
	color: var(--fms-ink);
}

.fms-ship__copy {
	margin: 0;
	font-size: var(--fms-size-meta);
	line-height: var(--fms-leading-body);
	color: var(--fms-muted);
}

/*
 * The way out uses `.fms-band__more`, the component every other band already
 * uses, rather than a second one of its own. A parallel version was written
 * first and was 21px tall, which is under the 24px floor: reusing the existing
 * one gets the 44px target for free and keeps one way of drawing this link.
 */

@media (max-width: 900px) {
	.fms-ship__row {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--fms-gap-card-m);
	}
}