.bw-site-header,
.bw-site-footer {
	position: relative;
	z-index: 10;
}

.bw-site-header__utility-inner,
.bw-site-header__inner,
.bw-site-header__navigation,
.bw-site-header__actions,
.bw-site-footer__legal {
	display: flex;
	align-items: center;
}

.bw-site-header__utility-inner,
.bw-site-header__inner {
	justify-content: space-between;
	gap: var(--bw-space-lg);
}

.bw-site-header__utility {
	border-bottom: 1px solid var(--bw-color-border);
}

.bw-site-header__utility-inner {
	min-height: 2.5rem;
}

.bw-site-header__inner {
	padding-block: var(--bw-space-md);
}

.bw-site-header__brand,
.bw-site-footer__brand {
	flex: 0 1 auto;
	min-width: 0;
}

.bw-site-branding__link,
.bw-site-branding__title,
.bw-site-header__account,
.bw-site-header__cart {
	color: inherit;
	text-decoration: none;
}

.bw-site-branding__link,
.bw-site-branding__logo {
	display: block;
}

.bw-site-branding__logo-frame {
	position: relative;
	display: inline-block;
}

.bw-site-branding__logo-frame > picture {
	display: block;
}

.bw-site-branding__logo--inverse {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	visibility: hidden;
	opacity: 0;
}

.bw-site-branding__logo,
.custom-logo {
	width: auto;
	max-height: 3rem;
}

.bw-site-branding__title {
	font-family: var(--bw-font-heading);
	font-weight: var(--bw-font-heading-weight);
}

.bw-site-header__navigation,
.bw-site-header__actions {
	gap: var(--bw-space-lg);
}

.bw-site-header__menu,
.bw-site-header__utility-menu,
.bw-site-footer__menu,
.bw-site-footer__legal-menu {
	display: flex;
	gap: var(--bw-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bw-site-header__menu a,
.bw-site-header__utility-menu a,
.bw-site-footer__menu a,
.bw-site-footer__legal-menu a {
	color: inherit;
}

.bw-site-header__menu-toggle {
	display: none;
	font: inherit;
}

.bw-site-header__menu-toggle:focus-visible,
.bw-site-header a:focus-visible,
.bw-site-footer a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Optional fixed header mode. Clients provide its colours and final sizing. */
.bw-site-header--transparent-over-hero {
	--bw-header-height-top: 5rem;
	--bw-header-height-scrolled: 4rem;
	--bw-header-logo-height-top: 3rem;
	--bw-header-logo-height-scrolled: 2.5rem;
	--bw-header-transition-duration: 300ms;
	--bw-header-background-top: transparent;
	--bw-header-background-scrolled: transparent;
	--bw-header-color-top: inherit;
	--bw-header-color-scrolled: inherit;
	--bw-header-border-top: transparent;
	--bw-header-border-scrolled: transparent;
	--bw-header-shadow-top: none;
	--bw-header-shadow-scrolled: none;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 100;
	background: var(--bw-header-background-top);
	color: var(--bw-header-color-top);
	border-bottom-color: var(--bw-header-border-top);
	box-shadow: var(--bw-header-shadow-top);
	transition: background-color var(--bw-header-transition-duration) ease,
		color var(--bw-header-transition-duration) ease,
		border-color var(--bw-header-transition-duration) ease,
		box-shadow var(--bw-header-transition-duration) ease,
		backdrop-filter var(--bw-header-transition-duration) ease;
}

.bw-site-header--transparent-over-hero .bw-site-header__inner {
	min-height: var(--bw-header-height-top);
	transition: min-height var(--bw-header-transition-duration) ease,
		padding var(--bw-header-transition-duration) ease;
}

.bw-site-header--transparent-over-hero .bw-site-branding__logo {
	max-height: var(--bw-header-logo-height-top);
	transition: max-height var(--bw-header-transition-duration) ease,
		opacity var(--bw-header-transition-duration) ease;
}

.bw-site-header--transparent-over-hero .has-inverse-logo .bw-site-branding__logo--default {
	opacity: 0;
}

.bw-site-header--transparent-over-hero .has-inverse-logo .bw-site-branding__logo--inverse {
	visibility: visible;
	opacity: 1;
}

.bw-site-header--transparent-over-hero.is-scrolled {
	background: var(--bw-header-background-scrolled);
	color: var(--bw-header-color-scrolled);
	border-bottom-color: var(--bw-header-border-scrolled);
	box-shadow: var(--bw-header-shadow-scrolled);
}

.bw-site-header--transparent-over-hero.is-scrolled .bw-site-header__inner {
	min-height: var(--bw-header-height-scrolled);
}

.bw-site-header--transparent-over-hero.is-scrolled .bw-site-branding__logo {
	max-height: var(--bw-header-logo-height-scrolled);
}

.admin-bar .bw-site-header--transparent-over-hero {
	top: 32px;
}

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

@media (prefers-reduced-motion: reduce) {
	.bw-site-header--transparent-over-hero,
	.bw-site-header--transparent-over-hero .bw-site-header__inner,
	.bw-site-header--transparent-over-hero .bw-site-branding__logo {
		transition-duration: 0.01ms;
	}
}

.bw-site-footer {
	padding-block: var(--bw-space-lg);
	background: var(--bw-color-surface);
	color: var(--bw-color-text);
	border-top: 1px solid var(--bw-color-border);
}

.bw-site-footer__inner {
	display: grid;
	gap: var(--bw-space-xl);
}

.bw-site-footer__columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	gap: var(--bw-space-xl);
}

.bw-site-footer__menu {
	align-items: flex-start;
	flex-direction: column;
}

.bw-site-footer__legal {
	justify-content: space-between;
	gap: var(--bw-space-md);
	flex-wrap: wrap;
}

.bw-site-footer__copyright {
	margin: 0;
}

@media (max-width: 63.99rem) {
	.bw-site-header__inner {
		flex-wrap: wrap;
	}

	.bw-site-header__menu-toggle:not([hidden]) {
		display: inline-flex;
	}

	.bw-site-header__navigation {
		align-items: stretch;
		flex: 1 0 100%;
		flex-direction: column;
		padding-block: var(--bw-space-md);
	}

	.bw-site-header__navigation[hidden] {
		display: none;
	}

	.bw-site-header__menu,
	.bw-site-header__actions,
	.bw-site-header__utility-inner,
	.bw-site-header__utility-menu {
		align-items: flex-start;
		flex-direction: column;
	}
}