/*
 * The shop: listing, facets, product page, cart.
 *
 * Same rule as blocks.css. Every measurement is the mockup's, values come from
 * tokens.css, and nothing here declares a raw colour.
 */

/* ---------------------------------------------------------------- crumbs */

.fms-crumbs {
	margin-bottom: 20px;
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-regular);
	font-size: var(--fms-size-small);
	color: var(--fms-muted);
}

/*
 * The padding is a target size, not decoration. A breadcrumb link is 19px tall
 * on its text alone, which is under the 24px minimum in WCAG 2.5.8, and a
 * breadcrumb is a navigation control rather than a link in running text, so
 * the inline exception does not cover it. `inline-block` is what lets the
 * vertical padding count; the negative margin keeps the row's height as drawn.
 */
.fms-crumbs a {
	display: inline-block;
	padding-block: 4px;
	margin-block: -4px;
	color: var(--fms-muted);
}

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

.fms-crumbs__sep {
	margin-inline: 8px;
}

/* --------------------------------------------------------- listing header
 * 28px top and 40px bottom, on the pale sage band, with a hairline under it.
 */

.fms-shop__header {
	padding-block: 28px 40px;
	border-bottom: 1px solid var(--fms-border);
}

.fms-shop__header .fms-eyebrow {
	margin-bottom: 12px;
}

.fms-shop__header h1 {
	margin: 0 0 14px;
	font-size: var(--fms-size-h1);
	line-height: var(--fms-leading-heading);
}

.fms-shop__intro {
	max-width: var(--fms-measure);
}

.fms-shop__intro p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------ two columns */

.fms-shop {
	padding-block: 44px 88px;
}

.fms-shop__grid {
	display: grid;
	grid-template-columns: var(--fms-sidebar-w) minmax(0, 1fr);
	gap: var(--fms-gap-sidebar);
	align-items: start;
}

.fms-shop__sidebar {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* ------------------------------------------------------- practitioner card */

.fms-pract {
	padding: 24px 24px 26px;
	border-top: 4px solid var(--fms-brass);
}

.fms-pract__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.fms-pract__head h2 {
	margin: 0;
	font-size: 19px;
	line-height: var(--fms-leading-heading);
}

.fms-pract p {
	margin: 0 0 18px;
	font-size: var(--fms-size-meta);
	line-height: var(--fms-leading-lead);
	color: var(--fms-muted);
}

/* The toggle is a link, so the filtered listing has a URL. It is drawn as a
 * switch and told to a screen reader as a pressed button. */
.fms-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: var(--fms-tap-min);
	padding: 12px 8px 11px 18px;
	border: 1px solid var(--fms-border);
	border-radius: var(--fms-radius-pill);
	background: var(--fms-cream);
	color: var(--fms-ink);
}

.fms-toggle:hover {
	border-color: var(--fms-brass);
	color: var(--fms-ink);
}

.fms-toggle.is-on {
	border-color: var(--fms-forest);
	background: var(--fms-forest);
	color: var(--fms-cream);
}

.fms-toggle__label {
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-medium);
	font-size: var(--fms-size-meta);
}

.fms-toggle__track {
	position: relative;
	flex: none;
	display: block;
	width: 38px;
	height: 22px;
	border-radius: var(--fms-radius-pill);
	background: var(--fms-border);
	transition: background var(--fms-transition);
}

.fms-toggle.is-on .fms-toggle__track {
	background: var(--fms-brass);
}

.fms-toggle__knob {
	position: absolute;
	top: 3px;
	left: 3px;
	display: block;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--fms-white);
	transition: left var(--fms-transition);
}

.fms-toggle.is-on .fms-toggle__knob {
	left: 19px;
}

/* ------------------------------------------------------------ refine panel */

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

.fms-refine__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 20px;
}

.fms-refine__head h2 {
	margin: 0;
	font-size: 20px;
	line-height: var(--fms-leading-heading);
}

/*
 * "Clear all" was 54 by 22, under the 24px minimum. `inline-block` plus a
 * little vertical padding takes it over, and the negative margin keeps the
 * baseline alignment with the heading beside it.
 */
.fms-refine__head a {
	display: inline-block;
	padding-block: 3px;
	margin-block: -3px;
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-medium);
	font-size: var(--fms-size-small);
	color: var(--fms-brass);
}

/* A hairline between facet groups, drawn by the group rather than between them,
 * so a group that renders nothing leaves no stray rule behind. */
.fms-facet + .fms-facet {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--fms-border);
}

.fms-facet__label {
	margin: 0 0 12px;
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-bold);
	font-size: var(--fms-size-eyebrow);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fms-muted);
}

.fms-facet__search {
	position: relative;
	margin-bottom: 14px;
}

.fms-facet__input {
	width: 100%;
	padding: 11px 38px 9px 16px;
	border: 1px solid var(--fms-border);
	border-radius: var(--fms-radius-pill);
	background: var(--fms-cream);
	font-family: var(--fms-font-body);
	font-size: var(--fms-size-meta);
	color: var(--fms-ink);
}

.fms-facet__search svg {
	position: absolute;
	top: 50%;
	right: 15px;
	transform: translateY(-50%);
	pointer-events: none;
}

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

.fms-facet__option {
	display: flex;
	align-items: center;
	gap: 11px;
	min-height: var(--fms-tap-min);
	padding: 8px 0;
	color: var(--fms-ink);
}

.fms-facet__option:hover {
	color: var(--fms-ink);
}

.fms-facet__option:hover .fms-facet__box {
	border-color: var(--fms-brass);
}

.fms-facet__box {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 19px;
	height: 19px;
	border: 1.5px solid var(--fms-border);
	border-radius: 5px;
	color: var(--fms-white);
	transition: background var(--fms-transition), border-color var(--fms-transition);
}

.fms-facet__option.is-on .fms-facet__box {
	border-color: var(--fms-forest);
	background: var(--fms-forest);
}

.fms-facet__name {
	flex: 1;
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-regular);
	font-size: 14.5px;
	line-height: 1.4;
}

.fms-facet__count {
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-regular);
	font-size: var(--fms-size-small);
	color: var(--fms-muted);
}

.fms-facet__more {
	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: var(--fms-size-small);
	color: var(--fms-brass);
}

/* An option hidden by the facet search box. */
.fms-facet__list li[hidden] {
	display: none;
}

/* ------------------------------------------------------------------- price */

.fms-price__track {
	position: relative;
	height: 3px;
	margin: 4px 0 16px;
	border-radius: 3px;
	background: var(--fms-border);
}

.fms-price__range {
	position: absolute;
	top: 0;
	display: block;
	height: 3px;
	border-radius: 3px;
	background: var(--fms-brass);
}

.fms-price__knob {
	position: absolute;
	top: -6px;
	display: block;
	width: 15px;
	height: 15px;
	margin-left: -7px;
	border: 2px solid var(--fms-forest);
	border-radius: 50%;
	background: var(--fms-white);
}

/* The track is decoration until site.js gives it its knobs. */
.fms-price__track:not([data-fms-ready]) .fms-price__knob:last-of-type {
	left: 100%;
}

.fms-price__fields {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.fms-price__field {
	flex: 1;
}

.fms-price__field input {
	width: 100%;
	padding: 9px 12px 7px;
	border: 1px solid var(--fms-border);
	border-radius: var(--fms-radius-input);
	background: var(--fms-white);
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-medium);
	font-size: var(--fms-size-meta);
	color: var(--fms-ink);
}

.fms-price__to {
	flex: none;
	font-family: var(--fms-font-body);
	font-size: var(--fms-size-small);
	color: var(--fms-muted);
}

.fms-price__apply {
	width: 100%;
	min-height: var(--fms-tap-min);
	margin-top: 14px;
	padding: 11px 0 9px;
	border: 1px solid var(--fms-forest);
	border-radius: var(--fms-radius-pill);
	background: none;
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-medium);
	font-size: var(--fms-size-meta);
	color: var(--fms-forest);
	cursor: pointer;
	transition: background var(--fms-transition), color var(--fms-transition);
}

.fms-price__apply:hover {
	background: var(--fms-forest);
	color: var(--fms-cream);
}

/* --------------------------------------------------------- consult prompt */

.fms-consult {
	padding: 24px;
	border: 1px solid var(--fms-border);
	border-radius: var(--fms-radius-card);
	background: var(--fms-sage);
}

.fms-consult h2 {
	margin: 0 0 8px;
	font-size: 18px;
	line-height: 1.25;
}

.fms-consult p {
	margin: 0 0 16px;
	font-size: 14.5px;
	line-height: var(--fms-leading-lead);
	color: var(--fms-muted);
}

.fms-consult 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: var(--fms-size-meta);
	color: var(--fms-brass);
}

/* ---------------------------------------------------------------- toolbar */

.fms-shop__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 28px;
	padding: 16px 22px;
	border: 1px solid var(--fms-border);
	border-radius: var(--fms-radius-card);
	background: var(--fms-white);
}

.fms-shop__count {
	margin: 0;
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-regular);
	font-size: 14.5px;
	color: var(--fms-muted);
}

.fms-shop__count strong {
	font-weight: var(--fms-weight-medium);
	color: var(--fms-ink);
}

.fms-shop__controls {
	display: flex;
	align-items: center;
	gap: 20px;
}

/*
 * The drawer button, and the drawer's own heading and footer, only exist on
 * small screens. They are in the markup at every width so the panel is never
 * half built, which means they have to be hidden here rather than simply left
 * unstyled: an unstyled div still renders, and a stray "Filters" heading with a
 * close button above the sidebar is exactly what that looks like.
 */
.fms-shop__filter-open,
.fms-shop__drawer-head,
.fms-shop__drawer-foot {
	display: none;
}

.fms-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fms-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: var(--fms-tap-min);
	padding: 7px 14px 6px;
	border-radius: var(--fms-radius-pill);
	background: var(--fms-sage);
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-medium);
	font-size: var(--fms-size-small);
	color: var(--fms-ink);
}

.fms-chip:hover {
	background: var(--fms-forest);
	color: var(--fms-cream);
}

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

.fms-chip:hover .fms-chip__x {
	color: var(--fms-cream);
}

/* ------------------------------------------------------------------- sort */

.fms-sort {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: var(--fms-tap-min);
	padding: 0 18px;
	border: 1px solid var(--fms-border);
	border-radius: var(--fms-radius-pill);
	background: var(--fms-cream);
}

.fms-sort__label {
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-regular);
	font-size: var(--fms-size-small);
	color: var(--fms-muted);
}

.fms-sort__control {
	position: relative;
	display: flex;
	align-items: center;
}

/*
 * The select is the control, stripped of its own appearance so the pill around
 * it is what the visitor sees. It keeps its keyboard behaviour, its native
 * dropdown on touch, and its accessible name.
 */
.fms-sort__select {
	appearance: none;
	-webkit-appearance: none;
	padding: 0 20px 0 0;
	border: 0;
	background: none;
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-medium);
	font-size: var(--fms-size-meta);
	color: var(--fms-ink);
	cursor: pointer;
}

.fms-sort__caret {
	position: absolute;
	right: 0;
	font-size: 10px;
	color: var(--fms-forest);
	pointer-events: none;
}

.fms-sort__apply {
	min-height: var(--fms-tap-min);
	border: 0;
	background: none;
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-medium);
	font-size: var(--fms-size-small);
	color: var(--fms-brass);
	cursor: pointer;
}

/* ------------------------------------------------------------- pagination */

.fms-pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 44px;
}

.fms-pagination__of {
	margin: 0;
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-regular);
	font-size: var(--fms-size-meta);
	color: var(--fms-muted);
}

.fms-pagination .page-numbers {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fms-pagination .page-numbers li {
	display: block;
}

.fms-pagination .page-numbers a,
.fms-pagination .page-numbers span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--fms-border);
	border-radius: 50%;
	background: var(--fms-white);
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-medium);
	font-size: 14.5px;
	color: var(--fms-forest);
	transition: border-color var(--fms-transition), background var(--fms-transition), color var(--fms-transition);
}

.fms-pagination .page-numbers a:hover {
	border-color: var(--fms-brass);
	color: var(--fms-brass);
}

.fms-pagination .page-numbers .current {
	border-color: var(--fms-forest);
	background: var(--fms-forest);
	color: var(--fms-cream);
}

.fms-pagination .page-numbers .dots {
	border-color: transparent;
	background: none;
	color: var(--fms-muted);
}

/* ------------------------------------------------------------ empty state */

.fms-empty {
	padding: 72px 32px;
	border: 1px solid var(--fms-border);
	border-radius: var(--fms-radius-card);
	background: var(--fms-white);
	text-align: center;
}

.fms-empty h2 {
	margin: 0 0 12px;
	font-size: var(--fms-size-h3);
}

.fms-empty p {
	margin: 0 auto 20px;
	max-width: 44ch;
	color: var(--fms-muted);
}

.fms-empty p:last-child {
	margin-bottom: 0;
}

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

@media (max-width: 1100px) {
	.fms-shop__grid {
		grid-template-columns: 260px 1fr;
		gap: 28px;
	}

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

@media (max-width: 900px) {
	/*
	 * The sidebar becomes a drawer. It stays in the document, in the same place,
	 * so without JavaScript it is simply a panel above the results rather than a
	 * panel that cannot be opened.
	 */
	.fms-shop__grid {
		grid-template-columns: 1fr;
	}

	.fms-shop__sidebar {
		position: fixed;
		inset: 0;
		z-index: 80;
		display: none;
		gap: 16px;
		overflow-y: auto;
		padding: 20px;
		background: var(--fms-cream);
	}

	.fms-shop__sidebar.is-open {
		display: flex;
	}

	.fms-shop__filter-open {
		display: inline-flex;
		align-items: center;
		min-height: var(--fms-tap-min);
		padding: 11px 22px 9px;
		border: 1px solid var(--fms-forest);
		border-radius: var(--fms-radius-pill);
		background: none;
		font-family: var(--fms-font-body);
		font-weight: var(--fms-weight-medium);
		font-size: var(--fms-size-meta);
		color: var(--fms-forest);
		cursor: pointer;
	}

	.fms-shop__drawer-head {
		display: flex;
		flex: none;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		margin: -20px -20px 0;
		padding: 18px 24px;
		background: var(--fms-forest);
		color: var(--fms-cream);
	}

	.fms-shop__drawer-head h2 {
		margin: 0;
		font-size: 20px;
		color: var(--fms-cream);
	}

	.fms-shop__drawer-close {
		min-width: var(--fms-tap-min);
		min-height: var(--fms-tap-min);
		border: 0;
		background: none;
		font-size: 22px;
		line-height: 1;
		color: var(--fms-cream);
		cursor: pointer;
	}

	.fms-shop__drawer-foot {
		position: sticky;
		bottom: 0;
		display: flex;
		flex: none;
		gap: 12px;
		margin: auto -20px -20px;
		padding: 16px 24px;
		border-top: 1px solid var(--fms-border);
		background: var(--fms-white);
	}

	.fms-shop__drawer-foot > * {
		flex: 1;
	}

	.fms-shop__drawer-foot > .fms-button {
		flex: 1.4;
	}

	/* `html` as well as `body`: see the note in layout.css. */
	html.fms-filters-open,
	body.fms-filters-open {
		overflow: hidden;
	}
}

@media (max-width: 600px) {
	/*
	 * A breadcrumb link is 19px tall at this font size, and criterion 9 asks for
	 * 44px at 390px. The hit area grows around the text and the negative margin
	 * puts the text back where it was drawn, so the trail looks the same and can
	 * actually be tapped. The same trick the footer links use.
	 */
	.fms-crumbs a,
	.fms-crumbs > span:last-child {
		display: inline-flex;
		align-items: center;
		min-width: var(--fms-tap-min);
		min-height: var(--fms-tap-min);
		padding-inline: 7px;
		margin-inline: -7px;
	}

	.fms-crumbs__sep {
		margin-inline: 2px;
	}

	/* 44px here rather than the desktop 42, which is what the mobile artboard
	 * draws for every round control. */
	.fms-pagination .page-numbers a,
	.fms-pagination .page-numbers span {
		width: var(--fms-tap-min);
		height: var(--fms-tap-min);
	}

	.fms-shop__header {
		padding-block: 20px 32px;
	}

	.fms-shop__header h1 {
		font-size: var(--fms-size-h1-m);
	}

	.fms-shop {
		padding-block: 24px var(--fms-band-y-m);
	}

	.fms-shop__toolbar {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
		padding: 16px 18px;
	}

	/*
	 * The row holds active filter chips, the drawer button and the sort
	 * control. Three of those do not fit in 342px: with two facets and a price
	 * range applied, the chips took 97px, the drawer button 87, and the sort
	 * select was left 20px wide, which is not a control any more. The chips
	 * take a line of their own and the other two share the next one.
	 */
	.fms-shop__controls {
		flex-wrap: wrap;
		gap: 12px;
	}

	.fms-chips {
		flex-basis: 100%;
	}

	.fms-shop__filter-open,
	.fms-sort {
		flex: 1;
		justify-content: center;
	}

	.fms-pgrid--listing.fms-pgrid--3 {
		grid-template-columns: 1fr;
		gap: var(--fms-gap-card-m);
	}

	.fms-pagination {
		flex-direction: column-reverse;
		gap: 16px;
	}

	.fms-empty {
		padding: 44px 20px;
	}
}

/* ======================================================== single product === */

.fms-product__crumbs {
	padding-block: 22px;
	border-bottom: 1px solid var(--fms-border);
}

.fms-product__crumbs .fms-crumbs {
	margin-bottom: 0;
}

.fms-product {
	padding-block: 52px 88px;
}

.fms-product__grid {
	display: grid;
	grid-template-columns: 620px minmax(0, 1fr);
	gap: 72px;
	align-items: start;
}

/* ----------------------------------------------------------------- gallery */

.fms-product__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border: 1px solid var(--fms-border);
	border-radius: var(--fms-radius-card);
	background: var(--fms-white);
	box-shadow: var(--fms-shadow-card);
}

/* 74 per cent, so the bottle sits inside the tile rather than filling it. */
.fms-product__stage img {
	width: 74%;
	height: 74%;
	object-fit: contain;
}

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

.fms-product__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 16px;
}

.fms-product__thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 104px;
	height: 104px;
	padding: 12px;
	border: 1.5px solid var(--fms-border);
	border-radius: var(--fms-radius-card);
	background: var(--fms-white);
	cursor: pointer;
	transition: border-color var(--fms-transition);
}

.fms-product__thumb:hover {
	border-color: var(--fms-brass);
}

.fms-product__thumb.is-current {
	border-color: var(--fms-forest);
}

.fms-product__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ----------------------------------------------------------------- summary */

.fms-product__brand {
	margin-bottom: 12px;
	font-size: 12px;
}

.fms-product__brand a {
	color: inherit;
}

.fms-product__summary .product_title {
	margin: 0 0 16px;
	font-size: 40px;
	line-height: var(--fms-leading-heading);
	text-wrap: pretty;
}

.fms-product__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 26px;
}

.fms-product__stars .star-rating {
	font-size: 15px;
	color: var(--fms-brass);
}

.fms-product__reviews,
.fms-product__sku {
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-regular);
	font-size: var(--fms-size-meta);
	color: var(--fms-muted);
}

.fms-product__divider {
	display: block;
	width: 1px;
	height: 14px;
	background: var(--fms-border);
}

.fms-product__summary .woocommerce-product-details__short-description {
	margin-bottom: 30px;
	max-width: 640px;
	font-size: var(--fms-size-lead);
	line-height: var(--fms-leading-lead);
	text-wrap: pretty;
}

.fms-product__summary .woocommerce-product-details__short-description p:last-child {
	margin-bottom: 0;
}

.fms-product__summary .price {
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin: 0 0 30px;
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-medium);
	font-size: 34px;
	line-height: 1.1;
	color: var(--fms-brass);
}

.fms-product__summary .price del {
	font-size: 20px;
	color: var(--fms-muted);
}

.fms-product__summary .price ins {
	text-decoration: none;
}

.fms-product__summary .stock {
	margin: 0 0 16px;
	font-family: var(--fms-font-body);
	font-size: var(--fms-size-meta);
	color: var(--fms-muted);
}

.fms-product__summary .stock.out-of-stock {
	color: var(--fms-ink);
}

/*
 * The out-of-stock state on a product page: a disabled button where the form
 * would be, per the states table in DECISIONS.md. It is a paragraph, not a
 * button, because there is nothing to press and a disabled button element is
 * skipped by keyboard navigation in a way that leaves the state unannounced.
 */
.fms-button--disabled {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--fms-tap-min);
	margin: 0 0 20px;
	background: var(--fms-muted);
	color: var(--fms-cream);
	cursor: not-allowed;
}

/* -------------------------------------------------------- quantity and cart */

.fms-product__cart-row {
	display: flex;
	align-items: stretch;
	gap: 16px;
	margin-bottom: 20px;
}

.fms-qty {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 0 8px;
	border: 1px solid var(--fms-border);
	border-radius: var(--fms-radius-pill);
	background: var(--fms-white);
}

.fms-qty__step {
	flex: none;
	width: 42px;
	height: 42px;
	border: 0;
	background: none;
	font-family: var(--fms-font-body);
	font-size: 20px;
	line-height: 1;
	color: var(--fms-forest);
	cursor: pointer;
}

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

/*
 * `.fms-qty` is in the selector deliberately. base.css styles every
 * `input[type='number']` as a full width pill, and that selector scores an
 * attribute plus a type, which beats a single class. Without the extra class
 * here the field kept base.css's 26px of side padding and its 32px radius, came
 * out as a 54px white circle inside the pill, and the number in it was all but
 * invisible. Measured, not guessed.
 */
.fms-qty .fms-qty__input {
	width: 48px;
	min-height: var(--fms-tap-min);
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-medium);
	font-size: 16px;
	text-align: center;
	color: var(--fms-ink);
	appearance: textfield;
	-moz-appearance: textfield;
}

.fms-qty__input::-webkit-outer-spin-button,
.fms-qty__input::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

/*
 * Forest with white text, as drawn. It needs the extra class to beat
 * `.woocommerce .button.alt` in forms.css, which is brass: that is right for a
 * secondary action and wrong for the one button the product page is built
 * around.
 */
.fms-product__add,
.woocommerce .fms-product__add.button.alt {
	flex: 1;
	padding: 18px 0 16px;
	background: var(--fms-forest);
	font-size: var(--fms-size-nav);
	color: var(--fms-white);
}

.fms-product__add:hover,
.woocommerce .fms-product__add.button.alt:hover {
	background: linear-gradient(var(--fms-shade-22), var(--fms-shade-22)), var(--fms-forest);
	color: var(--fms-white);
}

/* --------------------------------------------------------------- subscribe */

.fms-product__subscribe {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 28px;
	padding: 22px 24px;
	border: 1px solid var(--fms-border);
	border-radius: var(--fms-radius-card);
	background: var(--fms-sage);
}

.fms-product__subscribe svg {
	margin-top: 2px;
}

.fms-product__subscribe-title {
	margin: 0 0 4px;
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-medium);
	font-size: 15.5px;
	color: var(--fms-ink);
}

.fms-product__subscribe-copy {
	margin: 0;
	font-family: var(--fms-font-body);
	font-size: 14.5px;
	line-height: var(--fms-leading-lead);
	color: var(--fms-muted);
}

/* ------------------------------------------------------------------- trust */

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

.fms-product__trust li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--fms-font-body);
	font-size: var(--fms-size-nav);
	line-height: 1.4;
	color: var(--fms-ink);
}

/* --------------------------------------------------------------- variations */

.fms-product__summary .variations {
	margin: 0 0 24px;
	border: 0;
}

.fms-product__summary .variations th,
.fms-product__summary .variations td {
	display: block;
	padding: 0;
	border: 0;
	text-align: left;
}

.fms-product__summary .variations .label label {
	display: block;
	margin-bottom: 12px;
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-bold);
	font-size: var(--fms-size-eyebrow);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fms-muted);
}

.fms-product__summary .variations select {
	width: 100%;
	max-width: 320px;
	min-height: var(--fms-tap-min);
	margin-bottom: 16px;
	padding: 12px 16px 10px;
	border: 1.5px solid var(--fms-border);
	border-radius: var(--fms-radius-pill);
	background: var(--fms-white);
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-medium);
	font-size: 14.5px;
	color: var(--fms-ink);
}

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

.fms-tabs {
	padding-block: 64px 76px;
	border-top: 1px solid var(--fms-border);
	border-bottom: 1px solid var(--fms-border);
}

.fms-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 36px;
	margin: 0 0 44px;
	padding: 0;
	border-bottom: 1px solid var(--fms-border);
	list-style: none;
}

.fms-tabs__list li::before,
.fms-tabs__list li::after {
	content: none;
}

.fms-tabs__list a {
	display: block;
	padding: 0 0 16px;
	border-bottom: 3px solid transparent;
	font-family: var(--fms-font-heading);
	font-weight: var(--fms-weight-semibold);
	font-size: 21px;
	line-height: var(--fms-leading-heading);
	color: var(--fms-muted);
	transition: color var(--fms-transition), border-color var(--fms-transition);
}

.fms-tabs__list a:hover {
	color: var(--fms-ink);
}

.fms-tabs__list li.active a {
	border-bottom-color: var(--fms-brass);
	color: var(--fms-ink);
}

.fms-tabs__body {
	display: grid;
	grid-template-columns: var(--fms-measure) minmax(0, 1fr);
	gap: 64px;
	align-items: start;
}

/*
 * WooCommerce's own stylesheet used to hide the inactive panels, and it is no
 * longer loaded. Its script still does the switching, with an inline style that
 * beats this rule, so all this has to do is stop every panel showing at once in
 * the moment before the script runs.
 */
.fms-tabs__panels .wc-tab:not(:first-of-type) {
	display: none;
}

/* WooCommerce prints an h2 of the tab title inside the panel, which repeats the
 * tab that is already selected right above it. */
.fms-tabs__panels h2 {
	display: none;
}

.fms-tabs__panels p,
.fms-tabs__panels li {
	font-size: var(--fms-size-lead);
	line-height: var(--fms-leading-lead);
	text-wrap: pretty;
}

.fms-tabs__panels p {
	margin: 0 0 18px;
}

.fms-tabs__panels ul,
.fms-tabs__panels ol {
	margin: 0 0 18px;
	padding-left: 20px;
}

.fms-tabs__panels li::marker {
	color: var(--fms-brass);
}

/* The additional information tab is a table of attributes. The mockup draws it
 * as a label and a value on a hairline row. */
.fms-tabs__panels .woocommerce-product-attributes {
	width: 100%;
	border: 0;
	border-collapse: collapse;
}

.fms-tabs__panels .woocommerce-product-attributes th,
.fms-tabs__panels .woocommerce-product-attributes td {
	padding: 14px 0;
	border: 0;
	border-bottom: 1px solid var(--fms-border);
	font-family: var(--fms-font-body);
	font-size: 16px;
	text-align: left;
	vertical-align: baseline;
}

.fms-tabs__panels .woocommerce-product-attributes th {
	font-weight: var(--fms-weight-regular);
	color: var(--fms-ink);
}

.fms-tabs__panels .woocommerce-product-attributes td {
	font-weight: var(--fms-weight-medium);
	color: var(--fms-muted);
	text-align: right;
}

.fms-tabs__panels .woocommerce-product-attributes td p {
	margin: 0;
	font-size: inherit;
}

.fms-tabs__note {
	padding: 30px 28px;
	border: 1px solid var(--fms-border);
	border-radius: var(--fms-radius-card);
	background: var(--fms-sage);
}

.fms-tabs__note .fms-eyebrow {
	margin-bottom: 10px;
}

.fms-tabs__note p {
	margin: 0 0 18px;
	font-size: 15.5px;
	line-height: var(--fms-leading-lead);
	text-wrap: pretty;
}

.fms-tabs__note 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: 14.5px;
	color: var(--fms-brass);
}

/* ------------------------------------------------------------------ related */

.fms-related .fms-band__header {
	text-align: left;
}

.fms-related .fms-band__header h2 {
	margin-bottom: 8px;
}

.fms-related .fms-band__header .fms-lead {
	margin: 0;
	margin-inline: 0;
}

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

/* ============================================================ gated page === */

.fms-gate__badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 22px;
	padding: 8px 18px 7px;
	border-radius: var(--fms-radius-pill);
	background: var(--fms-brass);
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-bold);
	font-size: 11.5px;
	text-transform: uppercase;
	color: var(--fms-white);
}

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

.fms-gate__heading {
	margin: 0 0 20px;
	font-size: var(--fms-size-h3);
	line-height: var(--fms-leading-heading);
}

.fms-gate__paths {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 24px;
}

.fms-gate__path {
	display: flex;
	flex-direction: column;
	padding: 30px 28px;
	border: 1px solid var(--fms-border);
	border-top: 4px solid var(--fms-brass);
	border-radius: var(--fms-radius-card);
	background: var(--fms-white);
	box-shadow: var(--fms-shadow-card);
}

.fms-gate__path svg {
	margin-bottom: 18px;
}

.fms-gate__path h3 {
	margin: 0 0 10px;
	font-size: 21px;
	line-height: 1.25;
}

.fms-gate__path p {
	margin: 0 0 22px;
	font-size: 15.5px;
	line-height: var(--fms-leading-lead);
	color: var(--fms-muted);
	text-wrap: pretty;
}

/* `auto` pushes the button to the bottom, so two cards with unequal copy still
 * line their buttons up. */
.fms-gate__path .fms-button {
	margin-top: auto;
	align-self: flex-start;
}

.fms-gate__already {
	margin: 0 0 40px;
	font-size: var(--fms-size-nav);
	line-height: var(--fms-leading-lead);
	color: var(--fms-muted);
}

.fms-gate__already a {
	font-weight: var(--fms-weight-medium);
	color: var(--fms-brass);
}

.fms-gate__steps {
	padding: 34px 36px;
	border-radius: var(--fms-radius-card);
	background: var(--fms-forest);
}

.fms-gate__steps .fms-eyebrow {
	margin-bottom: 22px;
	font-size: 11.5px;
}

.fms-gate__steps ol {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fms-gate__steps li {
	display: flex;
	align-items: flex-start;
	gap: 18px;
}

.fms-gate__number {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1.5px solid var(--fms-brass);
	border-radius: 50%;
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-medium);
	font-size: var(--fms-size-meta);
	color: var(--fms-brass);
}

.fms-gate__step {
	display: block;
}

.fms-gate__step-title {
	display: block;
	margin-bottom: 4px;
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-medium);
	font-size: 16px;
	color: var(--fms-white);
}

.fms-gate__step-copy {
	display: block;
	font-family: var(--fms-font-body);
	font-size: var(--fms-size-nav);
	line-height: var(--fms-leading-lead);
	color: var(--fms-cream-78);
	text-wrap: pretty;
}

/* ------------------------------------------- the withheld image and notices */

.fms-product__withheld {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	padding: 64px;
	border: 1px solid var(--fms-border);
	border-radius: var(--fms-radius-card);
	background: var(--fms-sage);
	text-align: center;
}

.fms-product__withheld svg {
	margin-bottom: 28px;
}

.fms-product__withheld-title {
	margin: 0 0 10px;
	font-family: var(--fms-font-heading);
	font-weight: var(--fms-weight-semibold);
	font-size: var(--fms-size-h4);
	line-height: 1.25;
	color: var(--fms-ink);
}

.fms-product__withheld-copy {
	margin: 0;
	max-width: 380px;
	font-family: var(--fms-font-body);
	font-size: 15.5px;
	line-height: var(--fms-leading-lead);
	color: var(--fms-muted);
}

.fms-product__compliance {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 16px;
	padding: 16px 20px;
	border: 1px solid var(--fms-border);
	border-radius: var(--fms-radius-card);
	background: var(--fms-white);
	color: var(--fms-brass);
}

.fms-product__compliance svg {
	flex: none;
}

.fms-product__compliance p {
	margin: 0;
	font-family: var(--fms-font-body);
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--fms-muted);
}

.fms-gate__withheld {
	padding-block: 64px 72px;
	border-top: 1px solid var(--fms-border);
	border-bottom: 1px solid var(--fms-border);
}

.fms-gate__withheld-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
}

.fms-gate__notice {
	padding: 36px 34px;
	border: 1px solid var(--fms-border);
	border-radius: var(--fms-radius-card);
	background: var(--fms-sage);
}

.fms-gate__notice-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.fms-gate__notice-head h3 {
	margin: 0;
	font-size: var(--fms-size-h4);
	line-height: var(--fms-leading-heading);
}

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

.fms-gate__notice p {
	margin: 0 0 18px;
	font-size: 16px;
	line-height: var(--fms-leading-lead);
	color: var(--fms-muted);
	text-wrap: pretty;
}

.fms-gate__notice p:last-child {
	margin-bottom: 0;
}

.fms-gate__notice 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: var(--fms-size-nav);
	color: var(--fms-brass);
}

/* -------------------------------------------- breakpoints, product and gate */

@media (max-width: 1100px) {
	.fms-product__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.fms-product__stage {
		max-width: 620px;
	}

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

@media (max-width: 600px) {
	.fms-product__crumbs {
		padding-block: 14px;
	}

	.fms-product {
		padding-block: 24px var(--fms-band-y-m);
	}

	.fms-product__summary .product_title {
		font-size: var(--fms-size-h1-m);
	}

	/*
	 * Three standalone controls that measured under 44px at this width: the
	 * brand link above the title, the quantity buttons once the pill starts
	 * flexing, and the tab links. Each grows its hit area without moving what is
	 * drawn. Inline links inside a sentence are left alone: they cannot be 44px
	 * without breaking the line, which is why WCAG's own target size criterion
	 * excludes them, and PROJECT-BRIEF.md records that reading of criterion 9.
	 */
	.fms-product__brand a {
		display: inline-flex;
		align-items: center;
		min-height: var(--fms-tap-min);
	}

	.fms-qty__step {
		width: var(--fms-tap-min);
		height: var(--fms-tap-min);
	}

	.fms-tabs__list a {
		display: flex;
		align-items: center;
		min-height: var(--fms-tap-min);
		padding-bottom: 12px;
	}

	.fms-product__thumb {
		width: 78px;
		height: 78px;
		padding: 8px;
	}

	.fms-product__thumbs {
		gap: 10px;
	}

	.fms-product__summary .price {
		font-size: var(--fms-size-h2-m);
	}

	.fms-product__cart-row {
		flex-direction: column;
		gap: 12px;
	}

	.fms-qty {
		justify-content: space-between;
	}

	.fms-tabs {
		padding-block: 40px 44px;
	}

	.fms-tabs__list {
		gap: 20px;
		margin-bottom: 28px;
		overflow-x: auto;
		flex-wrap: nowrap;
	}

	.fms-tabs__list a {
		font-size: 18px;
		white-space: nowrap;
	}

	.fms-tabs__note {
		padding: 24px 22px;
	}

	.fms-gate__paths,
	.fms-gate__withheld-grid {
		grid-template-columns: 1fr;
	}

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

	.fms-gate__withheld {
		padding-block: 40px 44px;
	}

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

	.fms-product__withheld {
		padding: 32px;
	}

	.fms-product__withheld svg {
		width: 54px;
		height: 54px;
		margin-bottom: 18px;
	}
}

/* ================================================================= cart === */

.fms-cart__header {
	padding-block: 44px 0;
}

.fms-cart__title {
	margin: 0 0 40px;
	font-size: 40px;
	line-height: var(--fms-leading-heading);
}

/*
 * Scoped to the band, because the header's cart link is also `.fms-cart` and
 * this file loads after layout.css. Unscoped, the 88px landed on the link and
 * pushed its icon out of line with the login button on every page of the site.
 */
.fms-band.fms-cart {
	padding-block: 0 88px;
}

.fms-cart__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 400px;
	gap: 40px;
	align-items: start;
}

.fms-cart__items {
	overflow: hidden;
	border: 1px solid var(--fms-border);
	border-radius: var(--fms-radius-card);
	background: var(--fms-white);
	box-shadow: var(--fms-shadow-card);
}

.fms-cart__row {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 26px 28px;
	border-bottom: 1px solid var(--fms-border);
}

.fms-cart__art {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
	overflow: hidden;
	border-radius: 12px;
	background: var(--fms-cream);
}

.fms-cart__art a,
.fms-cart__art img,
.fms-cart__art .fms-placeholder {
	display: block;
	max-width: 70%;
	max-height: 70%;
	object-fit: contain;
}

.fms-cart__body {
	display: block;
	flex: 1;
	min-width: 0;
}

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

.fms-cart__name {
	margin: 0 0 6px;
	font-size: 19px;
	line-height: 1.25;
}

.fms-cart__name a {
	color: var(--fms-ink);
}

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

.fms-cart__unit,
.fms-cart__body .variation,
.fms-cart__body .backorder_notification {
	display: block;
	margin: 0;
	font-family: var(--fms-font-body);
	font-size: var(--fms-size-meta);
	color: var(--fms-muted);
}

.fms-cart__body .variation {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
}

.fms-cart__body .variation dt,
.fms-cart__body .variation dd {
	margin: 0;
}

/* The quantity pill is a touch smaller in the cart than on a product page. */
.fms-cart__qty {
	flex: none;
}

.fms-cart__qty .fms-qty {
	gap: 2px;
	padding: 0 6px;
	background: var(--fms-cream);
}

.fms-cart__qty .fms-qty__step {
	width: 36px;
	height: 38px;
	font-size: 18px;
}

.fms-cart__qty .fms-qty__input {
	width: 34px;
	min-height: 38px;
	font-size: var(--fms-size-nav);
}

.fms-cart__line {
	flex: none;
	min-width: 92px;
	text-align: right;
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-medium);
	font-size: 17px;
	color: var(--fms-brass);
}

.fms-cart__remove {
	flex: none;
}

.fms-cart__remove .remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--fms-tap-min);
	height: var(--fms-tap-min);
	font-size: 16px;
	line-height: 1;
	color: var(--fms-muted);
}

.fms-cart__remove .remove:hover {
	color: var(--fms-ink);
}

.fms-cart__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 28px;
}

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

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

.fms-cart__update {
	min-height: var(--fms-tap-min);
	padding: 11px 22px 9px;
	border: 1.5px solid var(--fms-forest);
	border-radius: var(--fms-radius-pill);
	background: none;
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-medium);
	font-size: var(--fms-size-meta);
	color: var(--fms-forest);
	cursor: pointer;
	transition: background var(--fms-transition), color var(--fms-transition);
}

.fms-cart__update:hover:not(:disabled) {
	background: var(--fms-forest);
	color: var(--fms-cream);
}

/* Disabled until a quantity actually changes, so the button is never a lie. */
.fms-cart__update:disabled {
	border-color: var(--fms-border);
	color: var(--fms-muted);
	cursor: default;
}

.fms-cart__note {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-top: 20px;
	padding: 22px 26px;
	border: 1px solid var(--fms-border);
	border-radius: var(--fms-radius-card);
	background: var(--fms-sage);
}

.fms-cart__note svg {
	margin-top: 1px;
}

.fms-cart__note-title {
	margin: 0 0 4px;
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-medium);
	font-size: 15.5px;
	color: var(--fms-ink);
}

.fms-cart__note-copy {
	margin: 0;
	font-family: var(--fms-font-body);
	font-size: 14.5px;
	line-height: var(--fms-leading-lead);
	color: var(--fms-muted);
}

/* --------------------------------------------------------- order summary */

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

.fms-summary__title {
	margin: 0 0 24px;
	font-size: var(--fms-size-h4);
	line-height: var(--fms-leading-heading);
}

.fms-summary__rows {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.fms-summary__row,
.fms-summary__total,
.fms-summary .woocommerce-shipping-totals {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	font-family: var(--fms-font-body);
	font-size: var(--fms-size-nav);
	color: var(--fms-ink);
}

.fms-summary__row--credit span:last-child,
.fms-summary .woocommerce-shipping-totals .woocommerce-Price-amount {
	color: var(--fms-brass);
}

/*
 * The shipping row carries more than a figure: a method list, a destination and
 * the address calculator. It stacks, and its own label sits above rather than
 * beside, which is why it overrides the flex row it inherits.
 */
.fms-summary__shipping {
	display: block;
}

.fms-summary__shipping-label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-medium);
	font-size: var(--fms-size-nav);
	color: var(--fms-ink);
}

.fms-summary__shipping-body {
	display: block;
}

.fms-summary .woocommerce-shipping-methods {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fms-summary .woocommerce-shipping-methods label {
	display: block;
	font-family: var(--fms-font-body);
	font-size: var(--fms-size-nav);
	color: var(--fms-ink);
}

.fms-summary .woocommerce-shipping-methods label .woocommerce-Price-amount {
	font-weight: var(--fms-weight-medium);
	color: var(--fms-brass);
}

.fms-summary__shipping-note,
.fms-summary__shipping-items {
	display: block;
	font-family: var(--fms-font-body);
	font-size: var(--fms-size-small);
	line-height: var(--fms-leading-lead);
	color: var(--fms-muted);
}

.fms-summary .shipping-calculator-button {
	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: var(--fms-size-small);
	color: var(--fms-brass);
}

.fms-summary .shipping-calculator-form {
	margin-top: 10px;
}

.fms-summary .shipping-calculator-form .form-row {
	margin-bottom: 10px;
}

.fms-summary .shipping-calculator-form label {
	display: block;
	margin-bottom: 4px;
	font-family: var(--fms-font-body);
	font-size: var(--fms-size-small);
	color: var(--fms-muted);
}

.fms-summary .woocommerce-shipping-methods li {
	margin-bottom: 6px;
}

.fms-summary .woocommerce-shipping-destination {
	margin: 6px 0 0;
	font-size: var(--fms-size-small);
	color: var(--fms-muted);
}

.fms-summary__total {
	margin-top: 6px;
	padding-top: 18px;
	border-top: 1px solid var(--fms-border);
	font-weight: var(--fms-weight-medium);
	font-size: 20px;
}

.fms-summary__total span:last-child {
	color: var(--fms-brass);
}

.fms-summary__coupon {
	display: flex;
	gap: 10px;
	margin-top: 22px;
}

.fms-summary__code {
	flex: 1;
	min-width: 0;
	min-height: var(--fms-tap-min);
	padding: 13px 18px 11px;
	border: 1px solid var(--fms-border);
	border-radius: var(--fms-radius-pill);
	background: var(--fms-cream);
	font-family: var(--fms-font-body);
	font-size: 14.5px;
	color: var(--fms-ink);
}

.fms-summary__apply {
	flex: none;
	min-height: var(--fms-tap-min);
	padding: 12px 22px 10px;
	border: 1.5px solid var(--fms-forest);
	border-radius: var(--fms-radius-pill);
	background: var(--fms-white);
	font-family: var(--fms-font-body);
	font-weight: var(--fms-weight-medium);
	font-size: var(--fms-size-meta);
	color: var(--fms-forest);
	cursor: pointer;
	transition: background var(--fms-transition), color var(--fms-transition);
}

.fms-summary__apply:hover {
	background: var(--fms-forest);
	color: var(--fms-cream);
}

.fms-summary__go {
	margin-top: 22px;
}

.fms-summary__checkout,
.woocommerce .fms-summary__checkout.button.alt {
	width: 100%;
	padding: 18px 0 16px;
	background: var(--fms-forest);
	font-size: var(--fms-size-nav);
	color: var(--fms-white);
}

.fms-summary__checkout:hover,
.woocommerce .fms-summary__checkout.button.alt:hover {
	background: linear-gradient(var(--fms-shade-22), var(--fms-shade-22)), var(--fms-forest);
	color: var(--fms-white);
}

/* ----------------------------------------------------- cross sells, if any */

.fms-cart__summary .cross-sells {
	margin-top: 24px;
}

.fms-cart__summary .cross-sells h2 {
	margin: 0 0 16px;
	font-size: var(--fms-size-h4);
}

/* ============================================================ breakpoints */

@media (max-width: 1100px) {
	.fms-cart__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}
}

@media (max-width: 600px) {
	.fms-cart__header {
		padding-block: 24px 0;
	}

	.fms-cart__title {
		margin-bottom: 24px;
		font-size: var(--fms-size-h1-m);
	}

	.fms-cart {
		padding-bottom: var(--fms-band-y-m);
	}

	/*
	 * The row becomes two lines: image and details on the first, then the
	 * quantity, the line total and remove on the second. At 390 the six part
	 * row cannot stay on one line without the name being three words wide.
	 */
	.fms-cart__row {
		flex-wrap: wrap;
		gap: 14px 16px;
		padding: 20px 18px;
	}

	.fms-cart__art {
		width: 72px;
		height: 72px;
	}

	.fms-cart__body {
		flex: 1 1 60%;
	}

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

	/*
	 * Three targets in the row measured under 44px at this width: the image
	 * link, the product name and the two quantity buttons. Each grows its hit
	 * area without moving what is drawn, which is the same treatment the
	 * breadcrumb and the brand link got.
	 */
	.fms-cart__art a {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: var(--fms-tap-min);
		min-height: var(--fms-tap-min);
		max-width: 100%;
		max-height: 100%;
	}

	.fms-cart__name a {
		display: inline-flex;
		align-items: center;
		min-height: var(--fms-tap-min);
	}

	.fms-cart__qty {
		order: 3;
	}

	.fms-cart__qty .fms-qty__step {
		width: var(--fms-tap-min);
		height: var(--fms-tap-min);
	}

	.fms-cart__qty .fms-qty__input,
	.fms-qty .fms-qty__input {
		width: var(--fms-tap-min);
		min-height: var(--fms-tap-min);
	}

	.fms-cart__line {
		order: 4;
		flex: 1;
		min-width: 0;
	}

	.fms-cart__remove {
		order: 5;
	}

	.fms-cart__actions {
		flex-wrap: wrap;
		padding: 18px;
	}

	.fms-cart__update {
		flex: 1;
	}

	.fms-summary {
		padding: 24px 22px;
	}

	.fms-summary__coupon {
		flex-wrap: wrap;
	}

	.fms-summary__apply {
		flex: 1;
	}
}