/* ==========================================================================
   Workmed — layout.css
   Topbar, header, mega-menu's, mobiel menu, footer en pre-footer CTA.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Topbar
   -------------------------------------------------------------------------- */

.topbar {
	background: var(--c-petrol);
	color: var(--c-topbar-text);
	font-size: 13px;
	line-height: 1.4;
}

.topbar__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 26px;
	padding-block: 11px;
}

.topbar__usps {
	display: flex;
	gap: 26px;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}

.topbar__usps li + li::before {
	content: "\2022";
	opacity: .35;
	margin-right: 26px;
}

.topbar__right {
	display: flex;
	gap: 26px;
	align-items: center;
	white-space: nowrap;
}

.topbar a {
	color: var(--c-topbar-text);
}

.topbar a:hover {
	color: #fff;
}

.topbar .topbar__pro {
	color: var(--c-salmon);
	font-weight: 600;
}

.topbar__mobile {
	display: none;
	margin: 0;
}

@media (max-width: 1199px) {
	.topbar__usps li:nth-child(n+3) {
		display: none;
	}
}

@media (max-width: 767px) {
	.topbar {
		font-size: 12px;
	}
	.topbar__inner {
		justify-content: center;
		padding-block: 9px;
	}
	.topbar__usps,
	.topbar__right {
		display: none;
	}
	.topbar__mobile {
		display: block;
		text-align: center;
	}
}

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

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--c-white);
	border-bottom: 1px solid var(--c-line);
}

.admin-bar .site-header {
	top: 32px;
}

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

@media (max-width: 600px) {
	.admin-bar .site-header {
		top: 0;
	}
}

.site-header__inner {
	max-width: 1440px;
	display: flex;
	align-items: center;
	gap: 32px;
	padding-block: 16px;
}

.header-actions {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-shrink: 0;
	margin-left: auto;
}

.header-cart {
	position: relative;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid var(--c-line);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--c-petrol);
	flex-shrink: 0;
}

.header-cart:hover {
	border-color: var(--c-green);
	color: var(--c-green);
}

.header-cart__count {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 10px;
	background: var(--c-salmon);
	color: var(--c-petrol);
	font-size: 11.5px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
}

.header-cart__count.is-empty {
	display: none;
}

.header-account {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 18px;
	border-radius: 22px;
	border: 1px solid var(--c-input);
	color: var(--c-petrol);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	flex-shrink: 0;
}

.header-account:hover {
	border-color: var(--c-green);
	color: var(--c-green);
}

.nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	margin-right: -8px;
	border: 0;
	background: none;
	cursor: pointer;
}

.nav-toggle__bars {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.nav-toggle__bars span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--c-petrol);
	border-radius: 1px;
}

/* Compacte desktop (1280–1439px): account als icoon, kleinere tussenruimtes. */
@media (min-width: 1280px) and (max-width: 1439px) {
	.site-header__inner {
		gap: 24px;
	}
	.primary-nav__list {
		gap: 18px;
	}
	.header-account {
		width: 46px;
		height: 46px;
		padding: 0;
		border-radius: 50%;
		justify-content: center;
	}
	.header-account__label {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Hoofdnavigatie — desktop (≥ 1280px)
   -------------------------------------------------------------------------- */

.nav-drawer {
	flex: 1;
	min-width: 0;
	display: flex;
	align-self: stretch;
}

.nav-drawer__head,
.nav-drawer__extra {
	display: none;
}

.primary-nav {
	display: flex;
	align-self: stretch;
}

.primary-nav__list {
	display: flex;
	gap: 22px;
	align-items: stretch;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 15px;
	font-weight: 500;
}

.primary-nav__item {
	display: flex;
	align-items: center;
	margin-block: -16px;
	padding-block: 16px;
}

.primary-nav__item.has-dropdown {
	position: relative;
}

.primary-nav__link {
	display: block;
	padding: 9px 0;
	color: var(--c-text);
	white-space: nowrap;
	border-bottom: 2px solid transparent;
}

.primary-nav__link:hover,
.primary-nav__item:hover > .primary-nav__link,
.primary-nav__item.is-open > .primary-nav__link {
	color: var(--c-text);
	border-bottom-color: var(--c-green);
}

.primary-nav__item.is-current > .primary-nav__link {
	color: var(--c-green);
	border-bottom-color: var(--c-green);
}

.submenu-toggle {
	display: none;
}

/* Mega-menu panel */
.mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: var(--c-white);
	border-top: 1px solid var(--c-line);
	border-bottom: 1px solid var(--c-line);
	box-shadow: var(--shadow-drop);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .16s var(--ease), transform .16s var(--ease), visibility 0s linear .16s;
	z-index: 90;
}

.has-mega:hover > .mega,
.has-mega:focus-within > .mega,
.has-mega.is-open > .mega,
.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown,
.has-dropdown.is-open > .dropdown {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

.mega__inner {
	max-width: var(--container);
	margin: 0 auto;
	padding: 32px var(--gutter) 38px;
}

.mega__cols {
	display: flex;
	gap: 40px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mega__col {
	flex: 1 1 0;
	min-width: 0;
}

.mega__heading {
	display: block;
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--c-muted-3);
	margin-bottom: 14px;
	font-weight: 500;
}

a.mega__heading:hover {
	color: var(--c-green);
}

.mega__links {
	display: flex;
	flex-direction: column;
	gap: 11px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 15px;
}

.mega__links a,
.dropdown a {
	color: var(--c-text);
}

.mega__links a:hover,
.dropdown a:hover,
.mega__links .is-current > a {
	color: var(--c-green);
}

.mega__promo {
	flex: 1.3 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	border-radius: var(--radius-sm);
	padding: 24px;
}

.mega__promo-eyebrow {
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	margin-bottom: 8px;
}

.mega__promo-title {
	font-size: 20px;
	line-height: 1.3;
	margin-bottom: 8px;
}

.mega__promo-text {
	font-size: 13.5px;
	line-height: 1.55;
}

.mega__promo-link {
	margin-top: 12px;
	font-weight: 600;
	font-size: 14px;
}

.mega__promo--sand {
	flex: 1 1 0;
	background: var(--c-sand);
	border-radius: 90px 90px var(--radius-sm) var(--radius-sm);
	padding: 24px 22px;
	text-align: center;
	align-items: center;
}

.mega__promo--sand .mega__promo-title {
	font-size: 18px;
}

.mega__promo--sand .mega__promo-text {
	font-size: 13px;
	color: var(--c-body-3);
	line-height: 1.5;
}

.mega__promo-arch {
	width: 56px;
	height: 56px;
	margin: 0 auto 14px;
	border-radius: 28px 28px 3px 3px;
	background: repeating-linear-gradient(135deg, #DDD4C4 0 5px, #EBE4D8 5px 10px);
}

.mega__promo--dark {
	background: var(--c-petrol);
	color: var(--c-on-dark);
}

.mega__promo--dark .mega__promo-eyebrow,
.mega__promo--dark .mega__promo-link {
	color: var(--c-salmon);
}

.mega__promo--dark .mega__promo-title {
	color: #fff;
}

.mega__promo--dark .mega__promo-text {
	opacity: .82;
}

.mega__promo--dark .mega__promo-link:hover {
	color: #fff;
}

.mega__promo--green {
	background: var(--c-green-tint);
}

.mega__promo--green .mega__promo-eyebrow {
	color: var(--c-green-2);
}

.mega__promo--green .mega__promo-text {
	color: var(--c-body);
}

/* Eenvoudige dropdown */
.dropdown {
	position: absolute;
	top: 100%;
	left: -18px;
	min-width: 240px;
	list-style: none;
	margin: 0;
	padding: 14px 0;
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-drop);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .16s var(--ease), transform .16s var(--ease), visibility 0s linear .16s;
	z-index: 90;
}

.dropdown a {
	display: block;
	padding: 8px 18px;
	font-size: 15px;
}

/* --------------------------------------------------------------------------
   Hoofdnavigatie — tablet & mobiel (≤ 1279px): off-canvas drawer
   -------------------------------------------------------------------------- */

@media (max-width: 1279px) {
	.site-header__inner {
		gap: 16px;
	}

	.nav-toggle {
		display: inline-flex;
	}

	.nav-drawer {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 1000;
		width: min(440px, 100%);
		flex-direction: column;
		background: var(--c-white);
		padding: 16px 24px 32px;
		overflow-y: auto;
		overscroll-behavior: contain;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform .3s var(--ease), visibility 0s linear .3s;
		box-shadow: -20px 0 60px -30px rgba(14, 53, 56, .5);
	}

	.nav-is-open .nav-drawer {
		transform: none;
		visibility: visible;
		transition-delay: 0s;
	}

	.admin-bar .nav-drawer {
		top: 46px;
	}

	.nav-drawer__head {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 14px;
		margin-bottom: 6px;
		border-bottom: 1px solid var(--c-line);
	}

	.nav-close {
		color: var(--c-petrol);
	}

	.primary-nav {
		display: block;
	}

	.primary-nav__list {
		flex-direction: column;
		gap: 0;
		font-size: 17px;
	}

	.primary-nav__item {
		flex-wrap: wrap;
		margin: 0;
		padding: 0;
		border-bottom: 1px solid var(--c-line);
	}

	.primary-nav__item.has-dropdown {
		position: static;
	}

	.primary-nav__link {
		flex: 1;
		padding: 16px 0;
		border-bottom: 0;
		font-weight: 600;
	}

	.primary-nav__link:hover,
	.primary-nav__item:hover > .primary-nav__link,
	.primary-nav__item.is-open > .primary-nav__link {
		border-bottom: 0;
		color: var(--c-green);
	}

	.submenu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		border: 1px solid var(--c-line);
		background: none;
		color: var(--c-petrol);
		cursor: pointer;
	}

	.submenu-toggle .icon {
		transition: transform .2s var(--ease);
	}

	.submenu-toggle[aria-expanded="true"] .icon {
		transform: rotate(180deg);
	}

	.mega,
	.dropdown {
		position: static;
		flex-basis: 100%;
		display: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		border: 0;
		box-shadow: none;
		background: none;
		transition: none;
	}

	.has-mega:hover > .mega,
	.has-mega:focus-within > .mega,
	.has-dropdown:hover > .dropdown,
	.has-dropdown:focus-within > .dropdown {
		display: none;
	}

	.has-mega.is-open > .mega,
	.has-dropdown.is-open > .dropdown {
		display: block;
	}

	.mega__inner {
		padding: 0 0 20px;
	}

	.mega__cols {
		flex-direction: column;
		gap: 22px;
	}

	.mega__heading {
		margin-bottom: 10px;
	}

	.mega__links {
		gap: 10px;
		font-size: 15.5px;
	}

	.mega__promo,
	.mega__promo--sand {
		padding: 20px;
		border-radius: var(--radius-sm);
		text-align: left;
		align-items: flex-start;
	}

	.mega__promo-arch {
		display: none;
	}

	.dropdown {
		padding: 0 0 14px;
		min-width: 0;
	}

	.dropdown a {
		padding: 7px 0;
	}

	.nav-drawer__extra {
		display: flex;
		flex-direction: column;
		gap: 10px;
		margin-top: 24px;
	}

	.nav-drawer__phone {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		margin-top: 8px;
		font-weight: 600;
		color: var(--c-petrol);
	}

	.nav-drawer__meta {
		margin: 0;
		text-align: center;
		font-size: 13.5px;
		color: var(--c-muted);
	}

	.nav-overlay {
		position: fixed;
		inset: 0;
		z-index: 999;
		background: rgba(14, 53, 56, .45);
		opacity: 0;
		transition: opacity .3s var(--ease);
	}

	.nav-is-open .nav-overlay {
		opacity: 1;
	}

	/* De drawer staat in de header: til de header boven de overlay uit. */
	.nav-is-open .site-header {
		z-index: 1001;
	}
}

@media (min-width: 1280px) {
	.nav-overlay {
		display: none !important;
	}
}

@media (max-width: 767px) {
	.site-header__inner {
		padding-block: 14px;
	}

	.site-header .logo {
		--mark: 42px;
		--bar: 13px;
		--word: 20px;
		--tag: 9px;
		gap: 11px;
	}

	.header-actions {
		gap: 6px;
	}

	.header-shop {
		display: none;
	}

	.header-cart,
	.header-account {
		width: 40px;
		height: 40px;
		padding: 0;
		border-radius: 50%;
		justify-content: center;
		border-color: var(--c-input);
	}

	.header-account__label {
		display: none;
	}

	.header-cart__count {
		top: -5px;
		right: -5px;
	}
}

@media (max-width: 374px) {
	.site-header .logo__tagline {
		display: none;
	}
	.site-header .logo__rule {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Pre-footer CTA
   -------------------------------------------------------------------------- */

.cta-band {
	background: var(--c-sand);
	padding-top: 14px;
	margin-top: 70px;
}

.cta-band__card {
	position: relative;
	top: -70px;
	margin-bottom: -70px;
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-bottom: 0;
	border-radius: 180px 180px 0 0;
	padding: 56px 60px;
	text-align: center;
}

.cta-band__title {
	font-size: var(--fs-h2-lg);
	line-height: 1.1;
	font-weight: 500;
	margin: 0 0 14px;
}

.cta-band__text {
	font-size: 17.5px;
	line-height: 1.6;
	color: var(--c-body);
	max-width: 520px;
	margin: 0 auto 30px;
}

.cta-band__actions {
	justify-content: center;
}

@media (max-width: 1023px) {
	.cta-band__card {
		border-radius: 140px 140px 0 0;
		padding: 52px 40px;
	}
}

@media (max-width: 767px) {
	.cta-band {
		background: transparent;
		padding: 0;
		margin-top: 0;
	}
	.cta-band__card {
		top: 0;
		margin: 0;
		background: var(--c-sand);
		border: 0;
		border-radius: 110px 110px 0 0;
		padding: 34px 24px;
	}
	.cta-band__text {
		font-size: 16px;
		margin-bottom: 22px;
	}
}

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

.site-footer {
	background: var(--c-petrol);
	color: var(--c-footer-text);
	padding: 64px 0 26px;
}

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

.site-footer a:hover {
	color: #fff;
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr;
	gap: 40px;
	padding-bottom: 48px;
}

.site-footer__tagline {
	font-size: 14.5px;
	line-height: 1.65;
	opacity: .8;
	max-width: 250px;
	margin: 16px 0 0;
}

.site-footer__contact {
	font-style: normal;
	font-size: 13.5px;
	line-height: 1.7;
	opacity: .8;
	margin-top: 14px;
}

.socials {
	display: flex;
	gap: 10px;
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
}

.socials a {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .28);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--c-white);
}

.socials a:hover {
	border-color: var(--c-green-3);
	background: rgba(255, 255, 255, .08);
	color: #fff;
}

.footer-col__title {
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--c-footer-head);
	margin: 0 0 14px;
	font-weight: 500;
}

.footer-col__list {
	display: flex;
	flex-direction: column;
	gap: 9px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 14.5px;
	line-height: 1.45;
}

.site-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding-top: 22px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	font-size: 13px;
}

.site-footer__bottom p {
	margin: 0;
	opacity: .7;
}

.footer-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	list-style: none;
	margin: 0;
	padding: 0;
	opacity: .7;
}

@media (max-width: 1023px) {
	.site-footer__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 36px 28px;
	}
	.site-footer__brand {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 0 40px;
		align-items: start;
	}
	.site-footer__brand .logo {
		grid-row: span 3;
	}
	.site-footer__tagline {
		max-width: 420px;
		margin-top: 0;
	}
}

@media (max-width: 767px) {
	.site-footer {
		padding: 32px 0 26px;
	}
	.site-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: 26px 22px;
		padding-bottom: 28px;
	}
	.site-footer__brand {
		display: block;
	}
	.site-footer .logo {
		--mark: 44px;
		--bar: 14px;
		--word: 21px;
		--tag: 9.5px;
	}
	.site-footer__tagline {
		font-size: 14px;
		margin-top: 14px;
	}
	.footer-col__list {
		font-size: 14px;
		gap: 8px;
	}
	.site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		font-size: 12.5px;
	}
}

/* --------------------------------------------------------------------------
   Generieke pagina's (page.php, index.php, single.php, 404, zoeken)
   -------------------------------------------------------------------------- */

.page-header {
	background: var(--c-sand);
	padding: 30px 0 64px;
}

.page-header .breadcrumb {
	margin-bottom: 48px;
}

.page-header__title {
	font-size: var(--fs-h1);
	line-height: 1.08;
	letter-spacing: -.02em;
	margin: 0;
	max-width: 820px;
}

.page-header__intro {
	margin: 18px 0 0;
	max-width: 640px;
}

.page-body {
	padding-block: var(--section-y);
}

.page-body--with-sidebar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 64px;
}

.post-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px;
}

.post-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--c-line);
	border-radius: 200px 200px var(--radius) var(--radius);
	padding: 28px 26px 26px;
	background: var(--c-white);
	color: var(--c-text);
	transition: background-color .2s, border-color .2s;
}

.post-card:hover {
	background: var(--c-sand-hover);
	border-color: var(--c-input);
	color: var(--c-text);
}

.post-card__media {
	height: 220px;
	margin-bottom: 22px;
	--arch: 150px;
	--arch-foot: 8px;
}

.post-card__meta {
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--c-muted-2);
	margin-bottom: 8px;
}

.post-card__title {
	font-size: 21px;
	line-height: 1.3;
	font-weight: 600;
	margin: 0 0 10px;
}

.post-card__excerpt {
	font-size: 15px;
	line-height: 1.6;
	color: var(--c-body);
	margin: 0 0 16px;
	flex: 1;
}

.pagination,
.nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 48px;
}

.page-numbers {
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border-radius: 22px;
	border: 1px solid var(--c-line);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--c-text);
	font-weight: 600;
	font-size: 15px;
}

a.page-numbers:hover {
	border-color: var(--c-green);
	color: var(--c-green);
}

.page-numbers.current {
	background: var(--c-petrol);
	border-color: var(--c-petrol);
	color: #fff;
}

.widget {
	margin-bottom: 32px;
}

.widget__title {
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--c-muted-2);
	margin-bottom: 14px;
}

.widget ul {
	list-style: none;
	padding: 0;
}

.widget li {
	padding: 8px 0;
	border-bottom: 1px solid var(--c-line);
}

.search-form {
	display: flex;
	gap: 10px;
}

.search-form label {
	flex: 1;
	margin: 0;
}

.error-404 {
	text-align: center;
	padding-block: 96px;
}

.error-404__arch {
	width: 200px;
	height: 240px;
	margin: 0 auto 32px;
	--arch: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--c-sand);
	font-size: 54px;
	font-weight: 800;
	color: var(--c-green);
}

.comments-area {
	margin-top: 64px;
	padding-top: 40px;
	border-top: 1px solid var(--c-line);
}

.comment-list {
	list-style: none;
	padding: 0;
}

.comment-body {
	padding: 22px 0;
	border-bottom: 1px solid var(--c-line);
}

@media (max-width: 1023px) {
	.post-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.page-body--with-sidebar {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

@media (max-width: 767px) {
	.page-header {
		padding: 20px 0 36px;
	}
	.page-header .breadcrumb {
		margin-bottom: 26px;
	}
	.post-list {
		grid-template-columns: 1fr;
		gap: 14px;
	}
	.post-card {
		border-radius: 160px 160px var(--radius-sm) var(--radius-sm);
	}
	.error-404 {
		padding-block: 56px;
	}
}

.page-figure {
	--arch: 400px;
	height: clamp(240px, 40vw, 420px);
	margin-bottom: 48px;
}

.single-post--narrow {
	max-width: 860px;
	margin-inline: auto;
	width: 100%;
}

.post-navigation .nav-links {
	justify-content: space-between;
	margin-top: 56px;
}

.post-navigation a {
	display: flex;
	flex-direction: column;
	font-weight: 600;
	color: var(--c-text);
}

.post-navigation .eyebrow {
	margin-bottom: 4px;
}

.error-404__lead {
	max-width: 560px;
	margin: 0 auto 32px;
}

.error-404__search {
	max-width: 480px;
	margin: 0 auto 28px;
}

.error-404__actions {
	justify-content: center;
}

.content-none {
	text-align: center;
	max-width: 640px;
	margin-inline: auto;
	padding-top: 56px;
}

@media (max-width: 767px) {
	.page-figure {
		--arch: 200px;
		margin-bottom: 32px;
	}
	.search-form {
		flex-direction: column;
	}
}

.header-shop.is-current {
	background: var(--c-petrol);
	border-color: var(--c-petrol);
}