/**
 * The page's frame: top bar, header, menu drawer, footer, and the layouts of ordinary pages.
 *
 * The header is one row from 640px, with the navigation in it where it fits, and two on a phone;
 * its own section below says what goes where.
 */

/* ---------------------------------------------------------------- Top bar */

.fr-top-bar {
	background: var(--fr-color-ink);
	color: var(--fr-color-bar-text);
	font-size: 13px;
}

.fr-top-bar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	min-height: 36px;
}

.fr-top-bar__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fr-space-1) var(--fr-space-4);
}

.fr-top-bar__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fr-space-1) var(--fr-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fr-top-bar a {
	color: var(--fr-color-bar-text);
	text-decoration: none;
}

.fr-top-bar a:hover {
	color: var(--fr-color-white);
	text-decoration: underline;
}

.fr-top-bar .fr-top-bar__phone {
	color: var(--fr-color-white);
	font-weight: var(--fr-weight-semibold);
}

/* Signing in, at the right of the bar when the navigation is in the header's row, in the links'
   colour. Otherwise it is in the menu drawer, with the navigation. */
.fr-top-bar__account {
	display: none;
}

.fr-top-bar .fr-account-link {
	min-height: 0;
	gap: 6px;
	color: var(--fr-color-bar-text);
	font-size: inherit;
	font-weight: inherit;
}

.fr-top-bar .fr-account-link:hover {
	color: var(--fr-color-white);
}

.fr-top-bar .fr-account-icon {
	width: 18px;
	height: 18px;
}

html[data-fr-nav="row"] .fr-top-bar__account {
	display: flex;
	align-items: center;
	align-self: stretch;
	margin-left: var(--fr-space-6);
	padding-left: var(--fr-space-6);
	border-left: var(--fr-control-hairline) solid var(--fr-color-body-line-strong);
}

/*
 * The signed-in customer's menu, opening beside the name (Focus Bookings' html-header-account.php;
 * site.js adds .is-open). The links to the left fade out, and the menu grows from nothing to its
 * own width, sliding the name left as far as it needs; the cross at its end reverses it.
 * The bar keeps to one line meanwhile: the faded links give up their room rather than wrap.
 */
html[data-fr-nav="row"] .fr-top-bar__inner {
	flex-wrap: nowrap;
}

.fr-top-bar__nav {
	min-width: 0;
	transition: opacity var(--fr-motion-settle) var(--fr-motion-ease), visibility 0s linear 0s;
}

.fr-top-bar:has(.fr-account.is-open) .fr-top-bar__nav {
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--fr-motion-quick) var(--fr-motion-ease), visibility 0s linear var(--fr-motion-quick);
}

.fr-top-bar .fr-account {
	display: flex;
	align-items: center;
}

/* Signed out: New account between two separators, then Sign in. The first separator is the
   account's own edge; New account carries the second, at the bar's full height like the first. */
.fr-top-bar .fr-account--signed-out {
	align-self: stretch;
	align-items: stretch;
	gap: var(--fr-space-6);
}

.fr-top-bar .fr-account-link--new {
	padding-right: var(--fr-space-6);
	border-right: var(--fr-control-hairline) solid var(--fr-color-body-line-strong);
}

.fr-top-bar .fr-account__menu {
	display: grid;
	grid-template-columns: 0fr;
	transition: grid-template-columns var(--fr-motion-settle) var(--fr-motion-ease);
}

.fr-top-bar .fr-account.is-open .fr-account__menu {
	grid-template-columns: 1fr;
}

.fr-top-bar .fr-account__items {
	display: flex;
	align-items: center;
	gap: var(--fr-space-6);
	min-width: 0;
	margin: 0;
	padding: var(--fr-space-1) var(--fr-space-1) var(--fr-space-1) var(--fr-space-6);
	overflow: hidden;
	list-style: none;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--fr-motion-quick) var(--fr-motion-ease), visibility 0s linear var(--fr-motion-settle);
}

.fr-top-bar .fr-account.is-open .fr-account__items {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--fr-motion-settle) var(--fr-motion-ease) var(--fr-motion-quick), visibility 0s linear 0s;
}

.fr-top-bar .fr-account.is-settling .fr-account__items {
	pointer-events: none;
}

.fr-top-bar .fr-account__sign-out {
	color: var(--fr-color-white);
}

.fr-account__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--fr-color-bar-text);
	cursor: pointer;
}

/* Only with a pointer to hover: on a touch screen a tap would leave this look behind. */
@media (hover: hover) {
	.fr-account__close:hover {
		color: var(--fr-color-white);
	}
}

/* Its lines drawn in the button's colour: Focus Bookings' close icon carries no stroke of its own. */
.fr-account__close .fr-close-icon {
	position: static;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: butt;
}

/* At phone width the links go to the left and the number to the right. */
@media (max-width: 639px) {
	.fr-top-bar__nav {
		flex: 1;
		justify-content: space-between;
	}
}

@media (min-width: 640px) {
	.fr-top-bar {
		font-size: var(--fr-text-bar);
	}

	.fr-top-bar__inner {
		min-height: 40px;
	}

	.fr-top-bar__nav,
	.fr-top-bar__links {
		column-gap: var(--fr-space-6);
	}
}

/* ---------------------------------------------------------------- Header
 *
 * Phone (below 640px): the menu's button and the account's icon, the logo centred, then search and
 * kit list; the dates button across the width under them.
 * From 640px, one row: logo, then dates, search, kit list and menu, with the navigation and
 * signing in in the menu drawer.
 * Where the navigation fits in that row on one line: logo, the navigation, then dates, search and
 * kit list, with signing in in the top bar.
 *
 * Which of the two is decided by measuring, not by a fixed width, so it follows the menu's length
 * and the dates button's: <html data-fr-nav="row"> or "drawer". assets/js/nav-guess.js sets a
 * first guess before the page is drawn; assets/js/site.js measures and corrects it.
 */

/*
 * The header, held at the top of the window once the top bar has scrolled away. The page's colour
 * behind it, so what scrolls underneath can't be seen through. When signed in,
 * below WordPress's toolbar, except on a narrow phone, where the toolbar scrolls away too.
 */
.fr-masthead {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	background: var(--fr-color-ground);
	/* Pushed up by the footer as it comes into view (site.js sets --frt-pushed). */
	transform: translateY(calc(-1 * var(--frt-pushed, 0px)));
}

@media (max-width: 600px) {
	.fr-masthead {
		top: 0;
	}
}

.fr-header__inner {
	--frt-gutter: var(--fr-layout-gutter-narrow);
	--frt-tool: 48px;
	--frt-row-top: 10px;
	/* How far the menu's button, and on a phone the account's icon, reach in from the page's edge:
	   their boxes, less the button's pull to the left (its margin). */
	--frt-start: calc(2 * var(--frt-tool) + (28px - var(--frt-tool)) / 2);
	position: relative;
	display: grid;
	/* The logo centred, between the menu's button and the tools, as far as they leave room. */
	grid-template-columns: 1fr auto 1fr;
	grid-template-areas:
		"menu  logo  tools"
		"dates dates dates";
	align-items: center;
	padding-block: var(--frt-row-top) var(--fr-space-4);
}

/* The menu's button, at the left of the logo, its icon in line with the page's edge; on a phone
   the account's icon beside it. */
.fr-header__start {
	grid-area: menu;
	display: flex;
	align-items: center;
}

.fr-header__menu-toggle {
	width: var(--frt-tool);
	min-width: var(--frt-tool);
	height: var(--frt-tool);
	margin-left: calc((28px - var(--frt-tool)) / 2);
}

.fr-header__menu-toggle .fr-icon {
	width: 28px;
	height: 28px;
}

.fr-header__account .fr-icon-button {
	width: var(--frt-tool);
	min-width: var(--frt-tool);
	height: var(--frt-tool);
}

.fr-header__account .fr-account-icon {
	width: 28px;
	height: 28px;
}

/* From 640px signing in is in the top bar or the menu drawer. */
@media (min-width: 640px) {
	.fr-header__account {
		display: none;
	}
}

.fr-header__logo {
	grid-area: logo;
	display: block;
	height: 38px;
	color: var(--fr-color-ink);
	transition: opacity var(--fr-motion-settle) var(--fr-motion-ease), visibility 0s linear 0s;
}

.fr-header__tools {
	grid-area: tools;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.fr-header__tools .fr-icon-button,
.fr-header__tools .fr-kit-list-link {
	width: var(--frt-tool);
	min-width: var(--frt-tool);
	height: var(--frt-tool);
}

.fr-header__tools .fr-icon {
	width: 28px;
	height: 28px;
}

.fr-header__dates {
	grid-area: dates;
	padding-top: var(--fr-space-3);
	transition: opacity var(--fr-motion-settle) var(--fr-motion-ease), visibility 0s linear 0s;
}

/* Gone where Focus Bookings leaves it empty: on the cart page, which shows the dates itself. */
.fr-header__dates:not(:has(*)) {
	display: none;
}

.fr-header__nav {
	display: none;
}

/* On the narrowest phones smaller boxes round the icons, so the four and the logo still fit. */
@media (max-width: 359px) {
	.fr-header__inner {
		--frt-tool: 40px;
	}
}

@media (min-width: 640px) {
	.fr-header__inner {
		--frt-gutter: var(--fr-layout-gutter);
		--frt-start: calc(var(--frt-tool) + (28px - var(--frt-tool)) / 2);
		grid-template-columns: auto auto minmax(0, 1fr) auto auto;
		grid-template-areas: "menu logo . dates tools";
		column-gap: var(--fr-space-5);
		padding-block: var(--frt-row-top);
	}

	/* Close to the logo it belongs with, not a whole column's gap away. */
	.fr-header__menu-toggle {
		margin-right: calc(var(--fr-space-2) - var(--fr-space-5));
	}

	.fr-header__dates {
		padding: 0;
	}

	/* Search opens leftwards over the dates button, which fades out while it is open. */
	.fr-header__inner:has(.fr-search.is-open) .fr-header__dates {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity var(--fr-motion-quick) var(--fr-motion-ease), visibility 0s linear var(--fr-motion-quick);
	}
}

html[data-fr-nav="row"] .fr-header__inner {
	--frt-tool: var(--fr-control-height);
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	grid-template-areas: "logo nav dates tools";
	column-gap: var(--fr-space-7);
	padding-block: var(--fr-space-5);
}

html[data-fr-nav="row"] .fr-header__logo {
	height: 48px;
}

html[data-fr-nav="row"] .fr-header__nav {
	grid-area: nav;
	display: block;
	min-width: 0;
}

/* On one line and no wider than its items, so that site.js can tell whether it fits: its width
   against the column's. */
html[data-fr-nav="row"] .fr-header__nav .fr-nav-primary {
	flex-wrap: nowrap;
	width: max-content;
}

html[data-fr-nav="row"] .fr-header__tools {
	gap: var(--fr-space-5);
}

html[data-fr-nav="row"] .fr-header__tools .fr-icon {
	width: 22px;
	height: 22px;
}

html[data-fr-nav="row"] .fr-header__tools .fr-kit-list-link {
	width: auto;
}

html[data-fr-nav="row"] .fr-header__start {
	display: none;
}

/* The main navigation, set as a small heading is, as the menu writes it (title case). */
.fr-nav-primary {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fr-space-2) clamp(16px, 1.8vw, 26px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fr-nav-primary a {
	display: inline-block;
	padding-block: var(--fr-space-2);
	font-family: var(--fr-font-heading);
	font-weight: var(--fr-weight-semibold);
	font-size: var(--fr-text-nav);
	letter-spacing: var(--fr-tracking-heading);
	line-height: 1.2;
	text-decoration: none;
	text-decoration-thickness: 2px;
	text-underline-offset: 8px;
}

.fr-nav-primary a:hover,
.fr-nav-primary .current-menu-item > a,
.fr-nav-primary .current-menu-ancestor > a,
.fr-nav-primary .current-product_cat-ancestor > a {
	color: var(--fr-color-ink);
	text-decoration-line: underline;
}

/*
 * The header's kit search, folded to its icon until pressed (assets/js/site.js adds .is-open).
 * The field lies behind the icon and grows leftwards from it, over the dates button, which fades.
 * With the navigation in the row it starts as wide as the icon, its line under the icon.
 * Otherwise its line is hidden until it opens, when it runs to the logo's left edge and the logo
 * fades out too.
 */
.fr-search {
	/* How wide the field opens where the navigation is in the row; the preview is as wide. */
	--frt-search-open: 280px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: var(--frt-tool);
	height: var(--frt-tool);
}

.fr-search .fr-search__input {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	width: var(--frt-tool);
	height: var(--frt-tool);
	min-height: 0;
	padding: 0 var(--frt-tool) 0 0;
	background: var(--fr-color-ground);
	-webkit-appearance: none;
	appearance: none;
	transition: width var(--fr-motion-settle) var(--fr-motion-ease), border-color var(--fr-motion-settle) var(--fr-motion-ease);
}

.fr-search__input::-webkit-search-cancel-button {
	display: none;
}

/* Folded, the placeholder would show in the sliver of field that's left. */
.fr-search:not(.is-open) .fr-search__input::placeholder {
	color: transparent;
}

.fr-search__submit {
	position: relative;
	z-index: 2;
}

.fr-search.is-open .fr-search__input {
	padding-left: var(--fr-space-3);
	width: var(--frt-search-open);
}

/* The field is placed against the header, so it can reach the logo's edge. */
html:not([data-fr-nav="row"]) .fr-header .fr-search {
	position: static;
}

/* From the kit list's left edge to the menu button's right edge (on a phone the account icon's),
   over the logo. */
html:not([data-fr-nav="row"]) .fr-header .fr-search .fr-search__input {
	top: var(--frt-row-top);
	right: calc(var(--frt-gutter) + var(--frt-tool));
	border-bottom-color: transparent;
}

html:not([data-fr-nav="row"]) .fr-header .fr-search.is-open .fr-search__input {
	width: calc(100% - 2 * var(--frt-gutter) - var(--frt-tool) - var(--frt-start));
	border-bottom-color: var(--fr-color-ink);
}

html:not([data-fr-nav="row"]) .fr-header__inner:has(.fr-search.is-open) .fr-header__logo {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--fr-motion-quick) var(--fr-motion-ease), visibility 0s linear var(--fr-motion-quick);
}

/*
 * What is found as words are typed (template-parts/header/search-preview.php): a panel hung from
 * the field's line and exactly as wide as the field, square, an ink outline at its sides and foot, a row for each product (its cut-out, name and price) lit under
 * the pointer, then "See all" for the results page. Under the field at its right where the
 * navigation is in the row; otherwise as wide as the opened field, under the header's first row.
 */
.fr-search-preview {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 3;
	/* Its rows are laid out by its own width (below), not the window's. */
	container-type: inline-size;
	width: var(--frt-search-open);
	max-height: calc(100dvh - 180px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--fr-space-2) 0 0;
	border: var(--fr-control-border) solid var(--fr-color-ink);
	border-top: 0;
	border-radius: 0;
	background: var(--fr-color-ground);
	color: var(--fr-color-ink);
	text-align: left;
}

.fr-search-preview[hidden] {
	display: none;
}

/* Under the opened field, from the menu button's (or account icon's) edge to the kit list's; on a
   phone, where the logo is centred, on to the page's edge, under the kit list too. */
html:not([data-fr-nav="row"]) .fr-header .fr-search-preview {
	top: calc(var(--frt-row-top) + var(--frt-tool));
	right: calc(var(--frt-gutter) + var(--frt-tool));
	left: calc(var(--frt-gutter) + var(--frt-start));
	width: auto;
}

/* Under the kit list there is no field's line to hang from, so on a phone the panel has a top
   edge of its own, laid over the field's line (as thick, focused), so the two are one rule
   running on to the corner. */
@media (max-width: 639px) {
	html:not([data-fr-nav="row"]) .fr-header .fr-search-preview {
		top: calc(var(--frt-row-top) + var(--frt-tool) - var(--fr-control-border));
		right: var(--frt-gutter);
		border-top: var(--fr-control-border) solid var(--fr-color-ink);
	}
}

.fr-search-preview__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fr-search-preview__link {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	align-items: center;
	column-gap: var(--fr-space-3);
	min-height: 72px;
	padding: var(--fr-space-2) var(--fr-space-4);
	color: var(--fr-color-ink);
	text-decoration: none;
	transition: background-color var(--fr-motion-quick) var(--fr-motion-ease);
}

.fr-search-preview__link:hover,
.fr-search-preview__link:focus-visible,
.fr-search-preview__all:hover,
.fr-search-preview__all:focus-visible {
	background: var(--fr-color-row-hover);
	color: var(--fr-color-ink);
}

/* Lit, the row shows where the arrow keys have got to; the ring would be cut by the panel's edge. */
.fr-search-preview :focus-visible {
	outline-offset: -2px;
}

/* The cut-out on the page, no plate behind it. */
.fr-search-preview__image {
	display: flex;
	width: 56px;
	height: 56px;
}

.fr-search-preview__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.fr-search-preview__name {
	display: -webkit-box;
	overflow: hidden;
	font-size: var(--fr-text-small);
	font-weight: var(--fr-weight-semibold);
	line-height: var(--fr-leading-snug);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.fr-search-preview__price {
	font-size: var(--fr-text-small);
	white-space: nowrap;
}

.fr-search-preview__all {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--fr-control-height-wide);
	margin-top: var(--fr-space-2);
	padding: 0 var(--fr-space-4);
	border-top: var(--fr-control-hairline) solid var(--fr-color-rule-soft);
	color: var(--fr-color-ink);
	font-size: var(--fr-text-small);
	font-weight: var(--fr-weight-semibold);
	text-decoration: none;
}

.fr-search-preview__none {
	margin: 0;
	padding: var(--fr-space-2) var(--fr-space-4) var(--fr-space-4);
	color: var(--fr-color-text-soft);
	font-size: var(--fr-text-small);
}

/*
 * Always open (WooCommerce's product search form, such as adding to an order's): the header's
 * field and icon across the width it is given, its line showing, the preview under it at the same
 * width, short enough to stay in a modal.
 */
.fr-search--open {
	--frt-tool: var(--fr-control-height);
	width: 100%;
}

.fr-search.fr-search--open .fr-search__input {
	width: 100%;
	border-bottom-color: var(--fr-color-ink);
}

.fr-search--open .fr-search-preview {
	left: 0;
	width: auto;
	max-height: min(60vh, 440px);
}

/* In a narrow panel the price goes under the name, leaving the name the width. */
@container (max-width: 360px) {
	.fr-search-preview__link {
		grid-template-columns: 56px minmax(0, 1fr);
		grid-template-rows: auto auto;
		row-gap: 2px;
	}

	.fr-search-preview__image {
		grid-row: span 2;
	}

	.fr-search-preview__name {
		align-self: end;
	}

	.fr-search-preview__price {
		align-self: start;
	}
}

/* ---------------------------------------------------------------- Menu drawer */

.fr-drawer {
	width: min(100vw - var(--fr-space-7), 420px);
	max-width: none;
	height: 100dvh;
	max-height: none;
	/* From the left, the side its button is on. */
	margin: 0 auto 0 0;
	padding: 0 var(--fr-space-5) var(--fr-space-8);
	border: 0;
	background: var(--fr-color-ground);
	color: var(--fr-color-ink);
	overflow-y: auto;
}

/* On a phone the menu takes the whole screen, its edges in line with the header's. */
@media (max-width: 639px) {
	.fr-drawer {
		width: 100%;
		padding-inline: var(--fr-layout-gutter-narrow);
	}
}

.fr-drawer::backdrop {
	background: var(--fr-color-scrim);
}

.fr-drawer[open] {
	animation: fr-drawer-in var(--fr-motion-settle) var(--fr-motion-ease);
}

@keyframes fr-drawer-in {
	from { transform: translateX(-32px); opacity: 0; }
}

.fr-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 64px;
	border-bottom: var(--fr-control-border) solid var(--fr-color-ink);
}

.fr-drawer__title {
	margin: 0;
	font-size: var(--fr-text-item);
}

/* On a phone, where the menu is the whole screen, only its cross, in the top right corner and
   laid over the end of the first item's row (its target the row's height square): the title is
   left for screen readers, and the rule under it goes. The items start half an item's height
   lower than the cross. Below any notch. */
@media (max-width: 639px) {
	.fr-drawer {
		padding-top: calc(env(safe-area-inset-top) + var(--fr-space-6));
	}

	.fr-drawer__head {
		position: absolute;
		top: env(safe-area-inset-top);
		right: var(--fr-layout-gutter-narrow);
		z-index: 1;
		min-height: 0;
		border-bottom: 0;
	}

	.fr-drawer__close {
		width: 52px;
		height: 52px;
		/* The cross where it was in its 44px box. */
		margin-right: calc((var(--fr-control-height) - 52px) / 2);
	}

	.fr-drawer__title {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

.fr-drawer__nav {
	padding-block: var(--fr-space-4);
}

.fr-nav-primary--stacked {
	flex-direction: column;
	gap: 0;
}

.fr-nav-primary--stacked a {
	display: flex;
	align-items: center;
	min-height: 52px;
	font-size: 16px;
}

.fr-nav-primary--stacked li + li {
	border-top: var(--fr-control-hairline) solid var(--fr-color-rule-soft);
}

/* On a phone the menu's items are set as its title was (a heading 2 at --fr-text-item, bold),
   the first half an item's height below the cross's top. */
@media (max-width: 639px) {
	.fr-drawer__nav {
		padding-top: 0;
	}

	.fr-nav-primary--stacked a {
		font-size: var(--fr-text-item);
		font-weight: var(--fr-weight-bold);
	}
}

/* Signed in, the account's pages are listed under the name in the drawer. */
.fr-drawer__account .fr-account__items {
	display: flex;
	flex-direction: column;
	gap: var(--fr-space-3);
	margin: var(--fr-space-4) 0 0;
	padding: 0;
	list-style: none;
}

.fr-drawer__account .fr-account__sign-out {
	font-weight: var(--fr-weight-semibold);
}

.fr-drawer__account {
	padding-block: var(--fr-space-4);
	border-block: var(--fr-control-border) solid var(--fr-color-ink);
}

.fr-drawer__help {
	display: flex;
	flex-direction: column;
	gap: var(--fr-space-3);
	padding-top: var(--fr-space-5);
}

.fr-drawer__help-links {
	display: flex;
	flex-direction: column;
	gap: var(--fr-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fr-drawer__phone {
	font-weight: var(--fr-weight-semibold);
}

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

/* The ribbing over the footer is deeper than the header's. */
.fr-knurl.fr-footer__band {
	height: var(--fr-motif-knurl-height-footer-narrow);
}

@media (min-width: 640px) {
	.fr-knurl.fr-footer__band {
		height: var(--fr-motif-knurl-height-footer);
	}
}

.fr-footer {
	background: var(--fr-color-ink);
	color: var(--fr-color-footer-text);
	font-size: var(--fr-text-small);
}

.fr-footer__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--fr-space-6) var(--fr-space-4);
	padding-block: 36px var(--fr-space-7);
}

.fr-footer__logo {
	grid-column: 1 / -1;
	display: block;
	height: 36px;
	color: var(--fr-color-white);
	justify-self: start;
}

.fr-footer__group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.fr-footer__heading {
	margin: 0;
	color: var(--fr-color-white);
	font-family: var(--fr-font-body);
	font-size: var(--fr-text-small);
	font-weight: var(--fr-weight-semibold);
	letter-spacing: 0;
	line-height: var(--fr-leading-body);
}

.fr-footer__address {
	font-style: normal;
}

.fr-footer__links {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fr-footer a {
	color: var(--fr-color-footer-text);
}

.fr-footer a:hover {
	color: var(--fr-color-white);
}

.fr-footer__company {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0 var(--fr-space-6);
	padding-bottom: var(--fr-space-7);
	color: var(--fr-color-on-dark-mark);
	font-size: 13px;
}

/* The rule above the company's details, as wide as the text rather than the gutters. */
.fr-footer__company::before {
	content: "";
	flex: 0 0 100%;
	margin-bottom: var(--fr-space-5);
	border-top: var(--fr-control-hairline) solid var(--fr-color-body-line);
}

.fr-footer__company p {
	margin: 0;
}

/* The VAT number never breaks across lines. */
.fr-footer__vat {
	white-space: nowrap;
}

@media (min-width: 1024px) {
	.fr-footer__grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: var(--fr-space-7);
		padding-block: var(--fr-space-9);
	}

	.fr-footer__logo {
		grid-column: auto;
		height: 42px;
	}
}

/* ---------------------------------------------------------------- Pages */

.fr-main {
	display: block;
}

.fr-page {
	padding-block: var(--fr-space-8) var(--fr-space-10);
}

.fr-page__header {
	margin-bottom: var(--fr-space-7);
}

.fr-page__title {
	margin: 0;
	font-size: var(--fr-text-title);
}

.fr-page__empty {
	max-width: var(--fr-layout-measure);
	color: var(--fr-color-text-soft);
}

.fr-post-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fr-post-list__item {
	padding-block: var(--fr-space-3);
	border-top: var(--fr-control-hairline) solid var(--fr-color-rule-soft);
}

.fr-shop {
	padding-block: var(--fr-space-7) var(--fr-space-10);
}