/* KomKits — utility bar, header, navigation, assurance seals and footer. */

/* ---------------------------------------------------------------- topbar -- */

.kk-topbar {
	background: var(--kk-bar);
	color: #E8E4DF;
	font-size: var(--kk-step--1);
}

.kk-topbar__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--kk-gap-m);
	min-height: 2.6rem;
}

.kk-social {
	display: flex;
	gap: var(--kk-gap-s);
	margin: 0;
	padding: 0;
	list-style: none;
}

.kk-social a {
	display: block;
	color: inherit;
	opacity: .8;
	transition: opacity .2s var(--kk-ease);
}

.kk-social a:hover { opacity: 1; }
.kk-social svg { width: 15px; height: 15px; display: block; }

.kk-topbar__note { margin: 0; text-align: center; }
.kk-topbar__note .woocommerce-Price-amount { color: inherit; font-weight: 500; }

.kk-topbar__links {
	display: flex;
	justify-content: flex-end;
	gap: var(--kk-gap-m);
}

.kk-topbar__links a {
	color: inherit;
	opacity: .85;
	text-decoration: none;
}

.kk-topbar__links a:hover { opacity: 1; text-decoration: underline; }

/* ---------------------------------------------------------------- header -- */

.kk-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--kk-white);
	border-bottom: 1px solid var(--kk-rule-soft);
}

.kk-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--kk-gap-m);
	min-height: 5rem;
}

.kk-burger { display: none; }

.kk-logo { justify-self: start; }

.kk-logo a {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .15rem;
	text-decoration: none;
}

.kk-logo__mark {
	font-family: var(--kk-display);
	font-size: clamp(1.3rem, 1.1rem + .9vw, 1.85rem);
	line-height: 1;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--kk-brown);
}

.kk-logo__sub {
	font-size: .58rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--kk-muted);
}

.kk-logo img { max-height: 56px; width: auto; }

/* ------------------------------------------------------------ navigation -- */

.kk-nav { justify-self: center; }

.kk-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(1rem, .4rem + 1.6vw, 2.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.kk-nav__list > li { position: relative; }

.kk-nav__list > li > a {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: 1.6rem 0;
	color: var(--kk-text);
	font-size: var(--kk-step-0);
	text-decoration: none;
	white-space: nowrap;
	transition: color .2s var(--kk-ease);
}

.kk-nav__list > li > a:hover,
.kk-nav__list > .current-menu-item > a { color: var(--kk-gold-deep); }

.kk-nav__list svg { width: 13px; height: 13px; }

/* Submenus open on hover and on keyboard focus. */
.kk-submenu,
.kk-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 5;
	min-width: 13rem;
	margin: 0;
	padding: .55rem 0;
	background: var(--kk-white);
	border: 1px solid var(--kk-rule-soft);
	border-radius: var(--kk-radius);
	box-shadow: var(--kk-shadow);
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, .35rem);
	transition: opacity .2s var(--kk-ease), transform .2s var(--kk-ease), visibility .2s;
}

.kk-nav__list > li:hover > .kk-submenu,
.kk-nav__list > li:hover > .sub-menu,
.kk-nav__list > li:focus-within > .kk-submenu,
.kk-nav__list > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.kk-submenu a,
.kk-nav__list .sub-menu a {
	display: block;
	padding: .5rem 1.15rem;
	color: var(--kk-text);
	font-size: var(--kk-step--1);
	text-decoration: none;
	transition: background .18s var(--kk-ease), color .18s var(--kk-ease);
}

.kk-submenu a:hover,
.kk-nav__list .sub-menu a:hover { background: var(--kk-cream); color: var(--kk-gold-deep); }

/* --------------------------------------------------------------- actions -- */

.kk-header__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: .15rem;
}

/* ------------------------------------------------------------- searchbar -- */

.kk-searchbar {
	padding: var(--kk-gap-m) 0;
	background: var(--kk-cream);
	border-top: 1px solid var(--kk-rule-soft);
}

.kk-searchbar form {
	display: flex;
	gap: var(--kk-gap-xs);
}

.kk-searchbar input[type="search"],
.kk-searchbar .search-field {
	flex: 1;
	padding: .8em 1em;
	border: 1px solid var(--kk-rule);
	border-radius: var(--kk-radius);
	background: var(--kk-white);
	font-family: var(--kk-body);
	font-size: var(--kk-step-0);
	color: var(--kk-text);
}

.kk-searchbar button,
.kk-searchbar input[type="submit"] {
	padding: .8em 1.6em;
	border: 1px solid var(--kk-brown);
	border-radius: var(--kk-radius);
	background: var(--kk-brown);
	color: var(--kk-shell);
	font-family: var(--kk-body);
	font-size: var(--kk-step--1);
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
}

/* ----------------------------------------------------------- mobile menu -- */

.kk-mobile-nav {
	background: var(--kk-white);
	border-bottom: 1px solid var(--kk-rule-soft);
}

.kk-mobile-nav ul {
	margin: 0;
	padding: var(--kk-gap-s) 1.125rem;
	list-style: none;
}

.kk-mobile-nav li + li { border-top: 1px solid var(--kk-rule-soft); }

.kk-mobile-nav a {
	display: block;
	padding: .75rem .25rem;
	color: var(--kk-text);
	text-decoration: none;
}

.kk-mobile-nav .kk-submenu,
.kk-mobile-nav .sub-menu {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	box-shadow: none;
	border: 0;
	padding: 0 0 .4rem .9rem;
	min-width: 0;
}

.kk-mobile-nav .kk-submenu a { padding: .45rem .25rem; color: var(--kk-muted); }
.kk-mobile-nav svg { display: none; }

/* ------------------------------------------------------------- assurance -- */

.kk-assurance {
	padding-block: var(--kk-section);
	background: var(--kk-shell);
}

.kk-assurance__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--kk-gap-l);
	justify-items: center;
}

.kk-seal {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--kk-gap-s);
	text-align: center;
}

.kk-seal__disc {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .3rem;
	width: clamp(7.5rem, 5.5rem + 8vw, 10.5rem);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--kk-gold-soft);
	color: var(--kk-brown);
	box-shadow: inset 0 0 0 1px rgba(65, 54, 45, .14);
}

.kk-seal__label {
	max-width: 8.5rem;
	font-family: var(--kk-display);
	font-size: clamp(.72rem, .6rem + .5vw, .95rem);
	hyphens: none;
	text-wrap: balance;
	line-height: 1.15;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.kk-seal__leaf { width: 20px; height: 20px; opacity: .75; }

.kk-seal__note {
	margin: 0;
	max-width: 15ch;
	color: var(--kk-muted);
	font-size: var(--kk-step--1);
}

/* ---------------------------------------------------------------- footer -- */

.kk-footer {
	background: var(--kk-brown);
	color: #E9E1D6;
	font-size: var(--kk-step--1);
}

.kk-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1.2fr 1fr;
	gap: var(--kk-gap-l);
	padding-block: var(--kk-section);
}

.kk-footer__brand {
	display: flex;
	flex-direction: column;
	gap: .3rem;
}

.kk-footer__mark {
	font-family: var(--kk-display);
	font-size: var(--kk-step-2);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--kk-white);
}

.kk-footer__sub {
	font-size: .6rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	opacity: .7;
}

.kk-footer__title {
	margin: 0 0 var(--kk-gap-s);
	color: var(--kk-white);
	font-family: var(--kk-display);
	font-size: var(--kk-step-1);
	font-weight: 400;
}

.kk-footer__col ul {
	display: flex;
	flex-direction: column;
	gap: .55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kk-footer__col a {
	color: inherit;
	opacity: .82;
	text-decoration: none;
	transition: opacity .2s var(--kk-ease);
}

.kk-footer__col a:hover { opacity: 1; text-decoration: underline; }
.kk-footer__contact li { opacity: .82; }

.kk-footer__base {
	border-top: 1px solid rgba(255, 255, 255, .14);
}

.kk-footer__base-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--kk-gap-s);
	padding-block: var(--kk-gap-m);
}

.kk-footer__base p { margin: 0; opacity: .72; }

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 1024px) {
	.kk-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
	.kk-topbar__inner { grid-template-columns: 1fr; justify-items: center; gap: .3rem; padding-block: .5rem; }
	.kk-topbar__links { justify-content: center; }

	.kk-header__inner { grid-template-columns: auto 1fr auto; min-height: 4rem; }
	.kk-burger { display: inline-flex; }
	.kk-nav { display: none; }
	.kk-logo { justify-self: center; }
	.kk-logo a { align-items: center; }
	/* Keep the descriptor on one line so the header does not grow a second row. */
	.kk-logo__sub { font-size: .5rem; letter-spacing: .16em; white-space: nowrap; }

	.kk-assurance__grid { grid-template-columns: 1fr; gap: var(--kk-gap-m); }
}

@media (max-width: 560px) {
	.kk-social { display: none; }
	.kk-footer__grid { grid-template-columns: 1fr; gap: var(--kk-gap-m); }
	.kk-footer__base-inner { flex-direction: column; align-items: flex-start; }
}