/*
 * kl-header-footer/assets/css/header-footer.css
 *
 * Every design value reads a kl-commerce token with a fallback:
 * var(--klc-color-text, #000). On kl-commerce the tokens resolve and the
 * header re-themes with the rest of the site. On any other theme the token is
 * undefined and the fallback applies, so the plugin still looks deliberate
 * instead of unstyled. That is what makes it portable without a second
 * stylesheet.
 */

.klhf-sr {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---- Announcement bar ---------------------------------------------- */

.klhf-bar {
	position: relative;
	z-index: 101;
	font-family: var(--klc-font-nav, inherit);
	font-size: var(--klc-size-xs, 0.75rem);
	letter-spacing: var(--klc-tracking-nav, 0.02em);
	text-transform: uppercase;
}

.klhf-bar[hidden] {
	display: none;
}

.klhf-bar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--klc-space-2xs, 0.5rem);
	inline-size: 100%;
	max-inline-size: var(--klc-maxw-content, 100%);
	margin-inline: auto;
	padding-block: var(--klc-space-2xs, 0.5rem);
	padding-inline: var(--klc-gutter, clamp(1rem, 4vw, 4rem));
	text-align: center;
}

.klhf-bar__text {
	flex: 1;
}

.klhf-bar__text a,
.klhf-bar__link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.klhf-bar__close {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 1.75rem;
	block-size: 1.75rem;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	opacity: 0.7;
}

.klhf-bar__close:hover {
	opacity: 1;
}

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

/*
 * --klhf-header-bg / --klhf-header-fg are set inline only when the shop has
 * asked for custom header colours. Unset, they fall through to the theme
 * tokens, which is what keeps re-theming working by default.
 */
.klhf-header {
	position: relative;
	z-index: 100;
	background-color: var(--klhf-header-bg, var(--klc-color-bg, #fff));
	color: var(--klhf-header-fg, var(--klc-color-text, #000));
	border-block-end: var(--klc-border-width, 1px) solid var(--klc-color-border, #e5e5e5);
	transition:
		background-color var(--klc-duration-base, 250ms) var(--klc-ease, ease),
		color var(--klc-duration-base, 250ms) var(--klc-ease, ease),
		border-color var(--klc-duration-base, 250ms) var(--klc-ease, ease);
}

.klhf-header--sticky {
	position: sticky;
	inset-block-start: 0;
}

/*
 * Transparent mode keeps the header in the flow and pulls the page up under it
 * with a negative margin, rather than taking it out of the flow.
 *
 * That difference is the whole behaviour: the announcement bar stays a normal
 * block above the header, so both are visible at the top of the page and the
 * bar scrolls away on its own, while sticky pins the header at the top once it
 * gets there. Position fixed cannot do this — it detaches the header from the
 * bar, which is why the two were fighting.
 *
 * The height comes from JS, which measures the header and writes
 * --klhf-header-h. The 4rem fallback matches the CSS min-block-size below, so
 * the layout is right before the script runs and with no script at all.
 */
.klhf-header--transparent {
	margin-block-end: calc(-1 * var(--klhf-header-h, 4rem));
	background-color: transparent;
	border-block-end-color: transparent;
	color: var(--klc-color-on-media, #fff);
}

.klhf-header--transparent.is-scrolled {
	background-color: var(--klhf-header-bg, var(--klc-color-bg, #fff));
	color: var(--klhf-header-fg, var(--klc-color-text, #000));
	border-block-end-color: var(--klc-color-border, #e5e5e5);
}

.klhf-header--glass.is-scrolled {
	background-color: color-mix(in srgb, var(--klhf-header-bg, var(--klc-color-bg, #fff)) 82%, transparent);
	backdrop-filter: saturate(140%) blur(12px);
	-webkit-backdrop-filter: saturate(140%) blur(12px);
}

.klhf-header__inner {
	display: flex;
	align-items: center;
	gap: var(--klc-space-sm, 1rem);
	inline-size: 100%;
	max-inline-size: var(--klc-maxw-content, 100%);
	margin-inline: auto;
	padding-block: var(--klc-space-2xs, 0.5rem);
	padding-inline: var(--klc-gutter, clamp(1rem, 4vw, 4rem));
	min-block-size: 4rem;
}

.klhf-header__brand {
	flex: 1;
}

@media (min-width: 1024px) {

	.klhf-header__brand {
		flex: none;
	}
}

.klhf-logo {
	display: inline-flex;
	align-items: center;
	color: inherit;
	text-decoration: none;
}

.klhf-logo__img {
	display: block;
	block-size: auto;
	inline-size: var(--klhf-logo-w, 140px);
	max-inline-size: 100%;
}

/*
 * With no image the site name stands in for the logo, so the same control has
 * to move it. Pixels of width mean nothing to a line of text, so it is scaled
 * from that number and clamped — a shop that types 400 gets a big wordmark,
 * not a broken header.
 */
.klhf-logo__text {
	font-family: var(--klc-font-heading, inherit);
	font-weight: var(--klc-weight-heading, 600);
	font-size: clamp(0.9rem, calc(var(--klhf-logo-w, 140px) / 8), 3rem);
	line-height: 1.1;
	letter-spacing: var(--klc-tracking-heading, 0);
	white-space: nowrap;
}

/* Two logos, one shown at a time. */
.klhf-logo__img--light {
	display: none;
}

.klhf-header--has-light-logo.klhf-header--transparent:not(.is-scrolled) .klhf-logo__img--dark {
	display: none;
}

.klhf-header--has-light-logo.klhf-header--transparent:not(.is-scrolled) .klhf-logo__img--light {
	display: block;
}

/* ---- Primary nav --------------------------------------------------- */

.klhf-nav {
	display: none;
}

@media (min-width: 1024px) {

	.klhf-nav {
		display: block;
		flex: 1;
	}
}

.klhf-nav__list {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--klc-space-md, 1.5rem);
	margin: 0;
	padding-inline-start: 0;
	list-style: none;
}

.klhf-nav__list li {
	position: relative;
}

.klhf-nav__list a {
	display: block;
	padding-block: var(--klc-space-2xs, 0.5rem);
	color: inherit;
	font-family: var(--klc-font-nav, inherit);
	font-weight: var(--klc-weight-nav, 500);
	font-size: var(--klc-size-sm, 0.875rem);
	letter-spacing: var(--klc-tracking-nav, 0.02em);
	text-transform: uppercase;
	text-decoration: none;
}

.klhf-nav__list a:hover,
.klhf-nav__list .current-menu-item > a {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/* One level of submenu. */
.klhf-nav__list .sub-menu {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 0;
	z-index: 10;
	min-inline-size: 12rem;
	margin: 0;
	padding: var(--klc-space-2xs, 0.5rem);
	background-color: var(--klhf-header-bg, var(--klc-color-bg, #fff));
	color: var(--klhf-header-fg, var(--klc-color-text, #000));
	border: var(--klc-border-width, 1px) solid var(--klc-color-border, #e5e5e5);
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--klc-duration-fast, 150ms) var(--klc-ease, ease), visibility 0s linear var(--klc-duration-fast, 150ms);
}

.klhf-nav__list li:hover > .sub-menu,
.klhf-nav__list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

.klhf-nav__list .sub-menu a {
	padding-block: var(--klc-space-3xs, 0.25rem);
	text-transform: none;
	letter-spacing: 0;
}

/* ---- Actions ------------------------------------------------------- */

.klhf-header__actions {
	display: flex;
	align-items: center;
	gap: var(--klc-space-2xs, 0.5rem);
	margin-inline-start: auto;
}

.klhf-action {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	color: inherit;
	text-decoration: none;
}

.klhf-cart__count {
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	min-inline-size: 1.05rem;
	padding-inline: 0.2rem;
	background-color: var(--klc-color-accent, #000);
	color: var(--klc-color-bg, #fff);
	border-radius: var(--klc-radius-pill, 999px);
	font-family: var(--klc-font-nav, inherit);
	font-size: 0.625rem;
	line-height: 1.05rem;
	text-align: center;
}

.klhf-header--transparent:not(.is-scrolled) .klhf-cart__count {
	background-color: var(--klc-color-on-media, #fff);
	color: var(--klc-color-text, #000);
}

.klhf-cart__count[data-count="0"] {
	display: none;
}

/* ---- Search overlay -------------------------------------------------- */

/*
 * The background lives on the fixed layer itself, and the height is stated
 * rather than inferred from inset.
 *
 * iOS shrinks the visual viewport when the keyboard opens but leaves the
 * layout viewport alone. A fixed element sized only by `inset: 0` can end up
 * with no height at that moment — the panel keeps painting its children, which
 * overflow, while the box that carried the background has collapsed. The
 * result is text floating over the page with nothing behind it. dvh tracks the
 * viewport that is actually visible, and vh is the fallback for browsers
 * without it.
 */
.klhf-search {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 300;
	block-size: 100vh;
	block-size: 100dvh;
	background-color: var(--klc-color-bg, #fff);
	color: var(--klc-color-text, #000);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	opacity: 0;
	transition: opacity var(--klc-duration-base, 250ms) var(--klc-ease, ease);
}

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

.klhf-search.is-open {
	opacity: 1;
}

.klhf-search__sheet {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-block-size: 100%;
}

.klhf-search__close {
	position: fixed;
	inset-block-start: var(--klc-space-sm, 1rem);
	inset-inline-end: var(--klc-gutter, clamp(1rem, 4vw, 4rem));
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	padding: 0;
	background: none;
	border: 0;
	color: var(--klc-color-muted, #6b6b6b);
	cursor: pointer;
	transition: color var(--klc-duration-fast, 150ms) var(--klc-ease, ease);
}

.klhf-search__close:hover {
	color: var(--klc-color-text, #000);
}

/*
 * Sits a little above centre. Optically centred beats mathematically centred
 * once a keyboard covers the lower half of a phone screen.
 */
.klhf-search__body {
	inline-size: 100%;
	max-inline-size: 46rem;
	margin-inline: auto;
	margin-block: auto;
	padding-inline: var(--klc-gutter, clamp(1rem, 4vw, 4rem));
	padding-block: var(--klc-space-2xl, 6rem) var(--klc-space-xl, 4rem);
	transform: translateY(0.75rem);
	transition: transform var(--klc-duration-base, 250ms) var(--klc-ease, ease);
}

.klhf-search.is-open .klhf-search__body {
	transform: translateY(0);
}

.klhf-search__label,
.klhf-search__shortcuts-label {
	margin: 0 0 var(--klc-space-2xs, 0.5rem);
	font-family: var(--klc-font-nav, inherit);
	font-weight: var(--klc-weight-nav, 500);
	font-size: var(--klc-size-xs, 0.75rem);
	letter-spacing: var(--klc-tracking-nav, 0.02em);
	text-transform: uppercase;
	color: var(--klc-color-muted, #6b6b6b);
}

.klhf-search__form {
	display: flex;
	align-items: center;
	gap: var(--klc-space-2xs, 0.5rem);
	padding-block-end: var(--klc-space-2xs, 0.5rem);
	border-block-end: var(--klc-border-width, 1px) solid var(--klc-color-text, #000);
}

.klhf-search__input {
	flex: 1;
	inline-size: 100%;
	min-inline-size: 0;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	font-family: var(--klc-font-heading, inherit);
	font-weight: var(--klc-weight-heading, 600);
	font-size: var(--klc-size-h4, 1.563rem);
	line-height: 1.3;
	letter-spacing: var(--klc-tracking-heading, 0);
}

@media (min-width: 768px) {

	.klhf-search__input {
		font-size: var(--klc-size-h3, 1.953rem);
	}
}

.klhf-search__input:focus {
	outline: none;
}

.klhf-search__input::placeholder {
	color: var(--klc-color-muted, #6b6b6b);
	opacity: 1;
}

/* The browser's own clear button fights the hairline. */
.klhf-search__input::-webkit-search-cancel-button,
.klhf-search__input::-webkit-search-decoration {
	appearance: none;
	-webkit-appearance: none;
}

.klhf-search__submit {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
}

.klhf-search__shortcuts {
	margin-block-start: var(--klc-space-lg, 2.5rem);
}

.klhf-search__shortcuts-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--klc-space-2xs, 0.5rem);
	margin: 0;
	padding-inline-start: 0;
	list-style: none;
}

.klhf-search__shortcuts-list a {
	display: block;
	padding-block: var(--klc-space-3xs, 0.25rem);
	padding-inline: var(--klc-space-2xs, 0.5rem);
	border: var(--klc-border-width, 1px) solid var(--klc-color-border, #e5e5e5);
	color: inherit;
	font-family: var(--klc-font-nav, inherit);
	font-size: var(--klc-size-sm, 0.875rem);
	text-decoration: none;
	transition:
		border-color var(--klc-duration-fast, 150ms) var(--klc-ease, ease),
		background-color var(--klc-duration-fast, 150ms) var(--klc-ease, ease),
		color var(--klc-duration-fast, 150ms) var(--klc-ease, ease);
}

.klhf-search__shortcuts-list a:hover {
	background-color: var(--klc-color-accent, #000);
	border-color: var(--klc-color-accent, #000);
	color: var(--klc-color-bg, #fff);
}

/* The drawer keeps a plain inline field — no overlay inside an overlay. */
.klhf-drawer__search {
	margin-block-end: var(--klc-space-md, 1.5rem);
}

.klhf-drawer__search .klhf-search__form {
	border-block-end-color: var(--klc-color-border, #e5e5e5);
}

.klhf-drawer__search .klhf-search__input {
	font-family: var(--klc-font-nav, inherit);
	font-weight: var(--klc-weight-nav, 500);
	font-size: var(--klc-size-sm, 0.875rem);
}

/* ---- Burger and drawer --------------------------------------------- */

.klhf-burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
}

@media (min-width: 1024px) {

	.klhf-burger {
		display: none;
	}
}

.klhf-burger__box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	inline-size: 20px;
}

.klhf-burger__line {
	display: block;
	block-size: 1.5px;
	background-color: currentColor;
}

.klhf-drawer {
	position: fixed;
	inset: 0;
	z-index: 200;
}

.klhf-drawer[hidden] {
	display: none;
}

.klhf-drawer__scrim {
	position: absolute;
	inset: 0;
	background-color: var(--klc-color-scrim, rgba(0, 0, 0, 0.32));
	opacity: 0;
	transition: opacity var(--klc-duration-base, 250ms) var(--klc-ease, ease);
}

.klhf-drawer.is-open .klhf-drawer__scrim {
	opacity: 1;
}

.klhf-drawer__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: min(86vw, 22rem);
	padding: var(--klc-space-sm, 1rem);
	background-color: var(--klc-color-bg, #fff);
	color: var(--klc-color-text, #000);
	overflow-y: auto;
	transform: translateX(-100%);
	transition: transform var(--klc-duration-base, 250ms) var(--klc-ease, ease);
}

[dir="rtl"] .klhf-drawer__panel {
	transform: translateX(100%);
}

.klhf-drawer.is-open .klhf-drawer__panel {
	transform: translateX(0);
}

.klhf-drawer__head {
	display: flex;
	justify-content: flex-end;
	margin-block-end: var(--klc-space-sm, 1rem);
}

.klhf-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
}

.klhf-drawer__list,
.klhf-drawer__list .sub-menu {
	margin: 0;
	padding-inline-start: 0;
	list-style: none;
}

.klhf-drawer__list a {
	display: block;
	padding-block: var(--klc-space-xs, 0.75rem);
	border-block-end: var(--klc-border-width, 1px) solid var(--klc-color-border, #e5e5e5);
	color: inherit;
	font-family: var(--klc-font-nav, inherit);
	font-size: var(--klc-size-sm, 0.875rem);
	letter-spacing: var(--klc-tracking-nav, 0.02em);
	text-transform: uppercase;
	text-decoration: none;
}

.klhf-drawer__list .sub-menu a {
	padding-inline-start: var(--klc-space-sm, 1rem);
	text-transform: none;
	letter-spacing: 0;
	color: var(--klc-color-muted, #6b6b6b);
}

.klhf-drawer__empty {
	font-size: var(--klc-size-sm, 0.875rem);
	color: var(--klc-color-muted, #6b6b6b);
}

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

.klhf-footer {
	margin-block-start: var(--klc-space-2xl, 6rem);
	padding-block: var(--klc-space-xl, 4rem) var(--klc-space-md, 1.5rem);
	background-color: var(--klhf-footer-bg, var(--klc-color-bg, #fff));
	color: var(--klhf-footer-fg, var(--klc-color-text, #000));
	border-block-start: var(--klc-border-width, 1px) solid
		color-mix(in srgb, currentColor 16%, transparent);
}

.klhf-footer__inner {
	inline-size: 100%;
	max-inline-size: var(--klc-maxw-content, 100%);
	margin-inline: auto;
	padding-inline: var(--klc-gutter, clamp(1rem, 4vw, 4rem));
}

/*
 * auto-fit on the link columns: the brand block is wide, the aside is medium,
 * and however many widget columns are filled share what is left. A block that
 * did not render simply is not in the grid, so nothing leaves a gap.
 */
.klhf-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--klc-space-lg, 2.5rem);
	padding-block-end: var(--klc-space-lg, 2.5rem);
}

@media (min-width: 768px) {

	.klhf-footer__top {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {

	.klhf-footer__top {
		grid-template-columns: minmax(0, 2.1fr) repeat(auto-fit, minmax(9rem, 1fr));
		gap: var(--klc-space-xl, 4rem);
	}

	.klhf-footer__brand {
		grid-row: span 1;
	}

	.klhf-footer__aside {
		min-inline-size: 14rem;
	}
}

.klhf-footer__logo {
	display: block;
	block-size: auto;
	inline-size: var(--klhf-logo-w, 140px);
	max-inline-size: 100%;
}

.klhf-footer__name {
	display: block;
	font-family: var(--klc-font-heading, inherit);
	font-weight: var(--klc-weight-heading, 600);
	font-size: clamp(0.9rem, calc(var(--klhf-logo-w, 140px) / 8), 3rem);
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: var(--klc-tracking-heading, 0);
}

.klhf-footer__tagline {
	margin-block: var(--klc-space-3xs, 0.25rem) 0;
	font-family: var(--klc-font-nav, inherit);
	font-size: var(--klc-size-xs, 0.75rem);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.7;
}

.klhf-footer__about,
.klhf-footer__contact-intro {
	margin-block: var(--klc-space-sm, 1rem) 0;
	max-inline-size: 46ch;
	font-size: var(--klc-size-sm, 0.875rem);
	line-height: var(--klc-leading-body, 1.6);
	opacity: 0.8;
}

.klhf-footer__about p,
.klhf-footer__contact-intro p {
	margin: 0;
}

.klhf-footer__heading,
.klhf-widget__title {
	margin-block: 0 var(--klc-space-2xs, 0.5rem);
	font-family: var(--klc-font-nav, inherit);
	font-weight: var(--klc-weight-nav, 500);
	font-size: var(--klc-size-sm, 0.875rem);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.klhf-footer__contact {
	margin-block-start: var(--klc-space-lg, 2.5rem);
}

.klhf-contact {
	margin: 0;
	padding-inline-start: 0;
	list-style: none;
	font-size: var(--klc-size-sm, 0.875rem);
	line-height: var(--klc-leading-body, 1.6);
	opacity: 0.85;
}

.klhf-contact li + li {
	margin-block-start: var(--klc-space-3xs, 0.25rem);
}

.klhf-contact a {
	color: inherit;
	text-decoration: none;
}

.klhf-contact a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ---- Map ------------------------------------------------------------ */

.klhf-map {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: var(--klc-space-2xs, 0.5rem);
	margin-block-start: var(--klc-space-lg, 2.5rem);
	padding: var(--klc-space-md, 1.5rem);
	min-block-size: 12rem;
	background-color: color-mix(in srgb, currentColor 6%, transparent);
	border: var(--klc-border-width, 1px) solid color-mix(in srgb, currentColor 18%, transparent);
	overflow: hidden;
}

.klhf-map.is-loaded {
	padding: 0;
	min-block-size: 0;
	aspect-ratio: 16 / 9;
}

.klhf-map iframe {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	border: 0;
}

.klhf-map__load {
	display: inline-flex;
	align-items: center;
	gap: var(--klc-space-2xs, 0.5rem);
	padding-block: var(--klc-space-2xs, 0.5rem);
	padding-inline: var(--klc-space-sm, 1rem);
	background: none;
	border: var(--klc-border-width, 1px) solid currentColor;
	color: inherit;
	font-family: var(--klc-font-nav, inherit);
	font-size: var(--klc-size-sm, 0.875rem);
	letter-spacing: var(--klc-tracking-nav, 0.02em);
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background-color var(--klc-duration-fast, 150ms) var(--klc-ease, ease),
		border-color var(--klc-duration-fast, 150ms) var(--klc-ease, ease),
		color var(--klc-duration-fast, 150ms) var(--klc-ease, ease);
}

/*
 * Both sides of the swap are named. Filling the background with currentColor
 * paints it in the same colour the label inherits, so the text vanishes into
 * it — and no blend mode reliably rescues that, it just moves the problem.
 */
.klhf-map__load:hover {
	background-color: var(--klc-color-accent, #000);
	color: var(--klc-color-bg, #fff);
	border-color: var(--klc-color-accent, #000);
}

/* On a dark footer the accent would disappear into the panel, so invert. */
.klhf-footer[style*="--klhf-footer-bg"] .klhf-map__load:hover {
	background-color: var(--klhf-footer-fg, #fff);
	color: var(--klhf-footer-bg, #111);
	border-color: var(--klhf-footer-fg, #fff);
}

.klhf-map__note {
	margin: 0;
	font-size: var(--klc-size-xs, 0.75rem);
	opacity: 0.6;
}

/* ---- Social --------------------------------------------------------- */

.klhf-social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--klc-space-2xs, 0.5rem);
	margin-block: var(--klc-space-lg, 2.5rem) 0;
	padding-inline-start: 0;
	list-style: none;
}

.klhf-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	color: inherit;
	border: var(--klc-border-width, 1px) solid color-mix(in srgb, currentColor 22%, transparent);
	transition: border-color var(--klc-duration-fast, 150ms) var(--klc-ease, ease);
}

.klhf-social a:hover {
	border-color: currentColor;
}

/* ---- Widget columns -------------------------------------------------- */

.klhf-widget ul {
	margin: 0;
	padding-inline-start: 0;
	list-style: none;
}

.klhf-widget li {
	margin-block-end: var(--klc-space-2xs, 0.5rem);
}

.klhf-widget a {
	color: inherit;
	font-size: var(--klc-size-sm, 0.875rem);
	text-decoration: none;
	opacity: 0.8;
	transition: opacity var(--klc-duration-fast, 150ms) var(--klc-ease, ease);
}

.klhf-widget a:hover {
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ---- Newsletter and payments ----------------------------------------- */

.klhf-footer__news-text {
	margin-block: 0 var(--klc-space-sm, 1rem);
	font-size: var(--klc-size-sm, 0.875rem);
	line-height: var(--klc-leading-body, 1.6);
	opacity: 0.8;
}

/*
 * Whatever form plugin is used, keep it inside the footer's own look. Selectors
 * stay generic so Contact Form 7, MC4WP and Fluent Forms all land in the same
 * place without a plugin-specific block each.
 */
.klhf-footer__news-form input[type="email"],
.klhf-footer__news-form input[type="text"] {
	inline-size: 100%;
	padding-block: var(--klc-space-2xs, 0.5rem);
	padding-inline: var(--klc-space-2xs, 0.5rem);
	background-color: color-mix(in srgb, currentColor 8%, transparent);
	border: var(--klc-border-width, 1px) solid color-mix(in srgb, currentColor 22%, transparent);
	border-radius: 0;
	color: inherit;
	font-family: var(--klc-font-body, inherit);
	font-size: var(--klc-size-sm, 0.875rem);
}

.klhf-footer__news-form input::placeholder {
	color: inherit;
	opacity: 0.55;
}

.klhf-footer__news-form input:focus {
	outline: none;
	border-color: currentColor;
}

/*
 * Not currentColor. The footer's text colour is also what a button would
 * inherit for its own label, so painting the background with it produces a
 * black box with black text inside — invisible, and it looks like the label
 * is missing rather than hidden.
 */
.klhf-footer__news-form input[type="submit"],
.klhf-footer__news-form button[type="submit"],
.klhf-footer__news-form button {
	display: inline-block;
	inline-size: auto;
	margin-block-start: var(--klc-space-2xs, 0.5rem);
	padding-block: var(--klc-space-2xs, 0.5rem);
	padding-inline: var(--klc-space-md, 1.5rem);
	background-color: var(--klc-color-accent, #000);
	color: var(--klc-color-bg, #fff);
	border: var(--klc-border-width, 1px) solid var(--klc-color-accent, #000);
	border-radius: 0;
	font-family: var(--klc-font-button, inherit);
	font-weight: var(--klc-weight-button, 500);
	font-size: var(--klc-size-sm, 0.875rem);
	letter-spacing: var(--klc-tracking-button, 0.04em);
	text-transform: uppercase;
	cursor: pointer;
	transition: opacity var(--klc-duration-fast, 150ms) var(--klc-ease, ease);
}

/* A dark footer needs the button to invert, or it disappears into the panel. */
.klhf-footer[style*="--klhf-footer-bg"] .klhf-footer__news-form input[type="submit"],
.klhf-footer[style*="--klhf-footer-bg"] .klhf-footer__news-form button {
	background-color: var(--klhf-footer-fg, #fff);
	color: var(--klhf-footer-bg, #111);
	border-color: var(--klhf-footer-fg, #fff);
}

.klhf-footer__news-form input[type="submit"]:hover,
.klhf-footer__news-form button:hover {
	opacity: 0.8;
}

/* Contact Form 7 wraps everything in <p> and ships its own message colours. */
.klhf-footer__news-form .wpcf7 p,
.klhf-footer__news-form form p {
	margin: 0;
}

.klhf-footer__news-form .wpcf7-response-output {
	margin: var(--klc-space-2xs, 0.5rem) 0 0;
	padding: var(--klc-space-2xs, 0.5rem);
	border-width: var(--klc-border-width, 1px);
	border-color: color-mix(in srgb, currentColor 30%, transparent);
	font-size: var(--klc-size-xs, 0.75rem);
}

.klhf-footer__news-form .wpcf7-not-valid-tip {
	margin-block-start: 0.3em;
	font-size: var(--klc-size-xs, 0.75rem);
	color: inherit;
	opacity: 0.8;
}

.klhf-footer__news-form .wpcf7-spinner {
	margin-inline-start: var(--klc-space-2xs, 0.5rem);
}

.klhf-footer__news-form label {
	display: block;
	margin-block-end: var(--klc-space-3xs, 0.25rem);
	font-size: var(--klc-size-xs, 0.75rem);
	opacity: 0.7;
}

.klhf-footer__news-form input[type="checkbox"] {
	inline-size: auto;
	margin-inline-end: 0.4em;
	accent-color: currentColor;
}

.klhf-footer__pay {
	margin-block-start: var(--klc-space-lg, 2.5rem);
}

.klhf-footer__pay-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--klc-space-3xs, 0.25rem);
}

.klhf-pay {
	padding-block: 0.3rem;
	padding-inline: var(--klc-space-2xs, 0.5rem);
	background-color: color-mix(in srgb, currentColor 8%, transparent);
	border: var(--klc-border-width, 1px) solid color-mix(in srgb, currentColor 18%, transparent);
	font-family: var(--klc-font-nav, inherit);
	font-size: 0.625rem;
	letter-spacing: 0.08em;
	opacity: 0.85;
}

/* ---- Bottom bar ------------------------------------------------------ */

.klhf-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--klc-space-2xs, 0.5rem);
	padding-block-start: var(--klc-space-md, 1.5rem);
	border-block-start: var(--klc-border-width, 1px) solid
		color-mix(in srgb, currentColor 16%, transparent);
	font-size: var(--klc-size-xs, 0.75rem);
	opacity: 0.75;
}

.klhf-footer__copy {
	margin: 0;
}

.klhf-footer__copy a {
	color: inherit;
}

.klhf-footer__legal-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--klc-space-sm, 1rem);
	margin: 0;
	padding-inline-start: 0;
	list-style: none;
}

.klhf-footer__legal-list a {
	color: inherit;
	text-decoration: none;
}

.klhf-footer__legal-list a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ---- Back to top ----------------------------------------------------- */

.klhf-totop {
	position: fixed;
	inset-block-end: var(--klc-space-sm, 1rem);
	inset-inline-end: var(--klc-space-sm, 1rem);
	z-index: 90;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	padding: 0;
	background-color: var(--klc-color-accent, #000);
	color: var(--klc-color-bg, #fff);
	border: 0;
	border-radius: var(--klc-radius-none, 0);
	cursor: pointer;
	opacity: 0;
	transform: translateY(0.5rem);
	transition:
		opacity var(--klc-duration-base, 250ms) var(--klc-ease, ease),
		transform var(--klc-duration-base, 250ms) var(--klc-ease, ease);
}

.klhf-totop[hidden] {
	display: none;
}

.klhf-totop.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ---- Reduced motion ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

	.klhf-header,
	.klhf-drawer__panel,
	.klhf-drawer__scrim,
	.klhf-search__sheet,
	.klhf-search__body,
	.klhf-totop,
	.klhf-nav__list .sub-menu {
		transition: none;
	}
}