/* 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; }

/*
 * Brand lockup. The artwork is stacked — emblem over wordmark — which is far
 * too tall for a header row, so the three pieces are laid out horizontally and
 * sized off a single --kk-brand-h so header and footer stay in proportion.
 */
.kk-brand a,
.kk-brand {
	display: inline-flex;
	align-items: center;
	gap: .7em;
	text-decoration: none;
}

.kk-brand__emblem {
	flex: none;
	height: var(--kk-brand-h);
	width: auto;
}

.kk-brand__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* Optical, not metric: the wordmark art carries its own baseline padding. */
	gap: .34em;
}

.kk-brand__word {
	height: calc(var(--kk-brand-h) * .58);
	width: auto;
}

/*
 * The byline is set larger relative to the wordmark than in the master artwork.
 * Held to the original ratio it renders about 4px tall here — technically
 * faithful, practically invisible.
 */
.kk-brand__byline {
	height: calc(var(--kk-brand-h) * .17);
	width: auto;
}

.kk-logo {
	justify-self: start;
	--kk-brand-h: 3rem;
}

/* ------------------------------------------------------------ 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 {
	position: relative;
	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); }

/* A drawn gold rule rather than a plain underline — the same gilding the
   emblem is drawn in, so the hover state belongs to the brand. */
.kk-nav__list > li > a::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 1.2rem;
	height: 1px;
	background: var(--kk-gild);
	scale: 0 1;
	transition: scale .25s var(--kk-ease);
}

.kk-nav__list > li > a:hover::after,
.kk-nav__list > .current-menu-item > a::after { scale: 1 1; }

.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 -- */

/*
 * One line, on a hairline rule, between the page and the footer. What was here
 * were three "Handpicked / Budget Friendly / Premium Quality" badges in beige
 * discs — a trust-seal pattern that reads as filler, and that repeated the
 * claim the home page now makes properly in its own panel.
 */
.kk-promise {
	background: var(--kk-shell);
	border-top: 1px solid var(--kk-rule-soft);
}

.kk-promise__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--kk-gap-s) var(--kk-gap-l);
	padding-block: clamp(1.75rem, 1rem + 2vw, 2.75rem);
}

.kk-promise__line {
	margin: 0;
	max-width: 46ch;
	color: var(--kk-brown);
	font-family: var(--kk-display);
	font-size: var(--kk-step-1);
}

.kk-promise__meta {
	margin: 0;
	color: var(--kk-muted);
	font-size: var(--kk-step--1);
	letter-spacing: .04em;
}

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

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

/* The gilded edge the logo card has, where the brown block begins. */
.kk-footer::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 2px;
	background: var(--kk-gild);
}

.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;
	align-items: flex-start;
	gap: .95rem;
}

.kk-footer__logo { --kk-brand-h: 3.4rem; }

.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-gold-soft);
	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-brand-h: 2.5rem; }

}

@media (max-width: 560px) {
	.kk-social { display: none; }

	/* Below this the wordmark would crowd the burger and the cart, so the
	   emblem carries the brand on its own. */
	.kk-logo { --kk-brand-h: 2.25rem; }
	.kk-logo .kk-brand__text { 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; }
}