/* ==========================================================
   KHM Care — New Home Page
   A 1:1 rebuild of the kbeautyarabia.com home page layout
   (Shopify "Impact" theme: Muli/Mulish headings, Questrial text,
   48px gutters, pill buttons). The reference rose accent is
   replaced by the KHM logo gold. All classes are .khmh-*.
   ========================================================== */

:root {
	--khmh-text: #1c1c1c;
	--khmh-text-muted: rgba(28, 28, 28, .65);
	--khmh-accent: #86642a;                 /* KHM gold, deepened */
	--khmh-accent-light: #e7d4a9;
	--khmh-border: rgba(28, 28, 28, .12);
	--khmh-star: #f2a73b;
	--khmh-bg: #ffffff;

	--khmh-font-head: "Mulish", "Muli", sans-serif;
	--khmh-font-text: "Questrial", sans-serif;

	--khmh-gutter: 1.25rem;                 /* 20px  (mobile) */
	--khmh-section: 2.5rem;                 /* 40px  */
	--khmh-stack: 2.25rem;                  /* 36px  heading → content */
	--khmh-header-h: 72px;                  /* updated by JS */
	--khmh-ease: cubic-bezier(.75, 0, .175, 1);
}
@media (min-width: 700px) {
	:root { --khmh-gutter: 2rem; }
}
@media (min-width: 1000px) {
	:root { --khmh-gutter: 3rem; --khmh-section: 4rem; --khmh-stack: 3rem; --khmh-header-h: 140px; }
}

/* ---------- Base (zero-specificity resets) ---------- */

body.khmh-body {
	margin: 0;
	background: var(--khmh-bg);
	color: var(--khmh-text);
	font-family: var(--khmh-font-text);
	font-size: .875rem;
	line-height: 1.65;
	letter-spacing: .02em;
	-webkit-font-smoothing: antialiased;
}
body.khmh-body.khmh-locked { overflow: hidden; }

:where(.khmh-body) *,
:where(.khmh-body) *::before,
:where(.khmh-body) *::after { box-sizing: border-box; }
:where(.khmh-body) img { max-width: 100%; height: auto; display: block; }
:where(.khmh-body) a { color: inherit; text-decoration: none; }
:where(.khmh-body) button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
:where(.khmh-body) ul { list-style: none; margin: 0; padding: 0; }
:where(.khmh-body) p,
:where(.khmh-body) h1,
:where(.khmh-body) h2,
:where(.khmh-body) h3 { margin: 0; }
:where(.khmh-body) :focus-visible { outline: 2px solid var(--khmh-accent); outline-offset: 2px; }

.khmh-body [hidden] { display: none !important; }

.khmh-body .screen-reader-text,
.khmh-sr,
.khmh-hp {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0; padding: 0; margin: -1px;
}

.khmh-skip {
	position: absolute; left: 12px; top: -60px; z-index: 1000;
	background: var(--khmh-text); color: #fff !important;
	padding: 10px 16px;
}
.khmh-skip:focus { top: 12px; }

.khmh-icon { flex: none; display: block; }

@media (max-width: 999px) { .khmh-only-desktop { display: none !important; } }
@media (min-width: 1000px) { .khmh-only-mobile { display: none !important; } }

.khmh-container {
	width: 100%;
	margin-inline: auto;
	padding-inline: var(--khmh-gutter);
}
.khmh-container--blog { max-width: calc(1260px + 2 * var(--khmh-gutter)); }

/* ---------- Headings & buttons ---------- */

.khmh-h2 {
	margin-bottom: var(--khmh-stack);
	text-align: center;
	font-family: var(--khmh-font-head);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .01em;
	text-transform: uppercase;
}
@media (min-width: 1000px) { .khmh-h2 { font-size: 1.125rem; } }

.khmh-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0 3.25rem;
	border-radius: 999px;
	background: var(--khmh-text);
	color: #fff !important;
	font-family: var(--khmh-font-head);
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-align: center;
	transition: background .25s ease, color .25s ease, transform .25s ease;
}
.khmh-pill:hover { background: var(--khmh-accent); }
.khmh-pill--white { background: #fff; color: var(--khmh-text) !important; }
.khmh-pill--white:hover { background: var(--khmh-text); color: #fff !important; }
.khmh-pill--block { width: 100%; }

.khmh-center { display: flex; justify-content: center; margin-top: var(--khmh-stack); }

.khmh-iconbtn {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.25rem; height: 2.25rem;
	color: currentColor;
}
.khmh-iconbtn .khmh-icon { width: 1.5rem; height: 1.5rem; }

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

.khmh-announce {
	position: relative;
	z-index: 91;
	background: var(--khmh-accent);
	color: #fff;
}
.khmh-announce__track {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 2.5rem;
	padding: .5rem var(--khmh-gutter);
}
.khmh-announce__msg {
	grid-area: 1 / 1;
	text-align: center;
	font-family: var(--khmh-font-head);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .01em;
	text-transform: uppercase;
	line-height: 1.4;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .5s ease, transform .5s ease, visibility 0s linear .5s;
}
.khmh-announce__msg.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (max-width: 699px) { .khmh-announce__msg { font-size: .75rem; } }

/* ---------- Header (transparent over slideshow) ---------- */

.khmh-header {
	position: sticky;
	top: 0;
	z-index: 90;
	margin-bottom: calc(-1 * var(--khmh-header-h));
	color: var(--khmh-text);
	background: #fff;
	box-shadow: 0 -1px var(--khmh-border) inset;
	transition: background .3s ease, color .3s ease, box-shadow .3s ease;
}
.admin-bar .khmh-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .khmh-header { top: 0; } }

.khmh-header.is-transparent { background: transparent; color: #fff; box-shadow: 0 -1px rgba(255, 255, 255, .3) inset; }
.khmh-header--solid { margin-bottom: 0; }

/* Shade behind the transparent header so logo, menu and icons stay readable on any banner */
.khmh-header::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: -1;
	height: calc(100% + 90px);
	background: linear-gradient(180deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .42) 45%, rgba(0, 0, 0, .16) 80%, rgba(0, 0, 0, 0) 100%);
	opacity: 0; pointer-events: none;
	transition: opacity .3s ease;
}
.khmh-header.is-transparent::before { opacity: 1; }
.khmh-header.is-transparent:has(.khmh-nav__item.has-mega:hover)::before,
.khmh-header.is-transparent:has(.khmh-nav__item.has-mega:focus-within)::before { opacity: 0; }
.khmh-header.is-transparent .khmh-nav__link,
.khmh-header.is-transparent .khmh-cart-count { text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.khmh-header.is-transparent .khmh-iconbtn .khmh-icon { filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .6)); }
.khmh-header.is-transparent .khmh-logo__light { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .55)); }

.khmh-header__bar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	grid-template-areas: "left logo right" "nav nav nav";
	align-items: center;
	column-gap: 1.25rem;
	row-gap: 1.5rem;
	padding: 1.5rem var(--khmh-gutter);
}
.khmh-header__left { grid-area: left; display: flex; align-items: center; gap: .75rem; }
.khmh-header__right { grid-area: right; display: flex; align-items: center; justify-content: flex-end; gap: 1.125rem; }

.khmh-logo { grid-area: logo; position: relative; display: block; }
.khmh-logo img { height: 3rem; width: auto; transition: opacity .3s ease; }
.khmh-logo__dark { position: absolute; inset: 0; opacity: 0; }
.khmh-header:not(.is-transparent) .khmh-logo__light { opacity: 0; }
.khmh-header:not(.is-transparent) .khmh-logo__dark { opacity: 1; }

.khmh-cart-count {
	position: absolute; top: -2px; right: -6px;
	min-width: 1.125rem; height: 1.125rem; padding: 0 4px;
	border-radius: 999px;
	background: var(--khmh-accent); color: #fff;
	font-family: var(--khmh-font-head);
	font-size: .625rem; font-weight: 700; line-height: 1.125rem; text-align: center;
}
.khmh-cart-count.is-empty { display: none; }

/* Primary navigation */
.khmh-nav { grid-area: nav; }
.khmh-nav__list { display: flex; flex-wrap: wrap; justify-content: center; gap: .625rem 2.5rem; }
.khmh-nav__item { position: static; }
.khmh-nav__link {
	position: relative;
	display: block;
	font-size: .875rem;
	line-height: 1.6;
	letter-spacing: .02em;
}
.khmh-nav__link::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: -2px;
	height: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .25s var(--khmh-ease);
}
.khmh-nav__item:hover > .khmh-nav__link::after,
.khmh-nav__item:focus-within > .khmh-nav__link::after { transform: scaleX(1); }

/* Header turns solid while a mega menu is open */
.khmh-header.is-transparent:has(.khmh-nav__item.has-mega:hover),
.khmh-header.is-transparent:has(.khmh-nav__item.has-mega:focus-within) {
	background: #fff; color: var(--khmh-text); box-shadow: 0 -1px var(--khmh-border) inset;
}
.khmh-header.is-transparent:has(.khmh-nav__item.has-mega:hover) .khmh-logo__light,
.khmh-header.is-transparent:has(.khmh-nav__item.has-mega:focus-within) .khmh-logo__light { opacity: 0; }
.khmh-header.is-transparent:has(.khmh-nav__item.has-mega:hover) .khmh-logo__dark,
.khmh-header.is-transparent:has(.khmh-nav__item.has-mega:focus-within) .khmh-logo__dark { opacity: 1; }

.khmh-mega {
	position: absolute; left: 0; right: 0; top: 100%;
	background: #fff;
	color: var(--khmh-text);
	box-shadow: 0 1px var(--khmh-border) inset, 0 18px 30px rgba(28, 28, 28, .06);
	opacity: 0; visibility: hidden;
	transition: opacity .2s ease, visibility 0s linear .2s;
}
.khmh-nav__item:hover > .khmh-mega,
.khmh-nav__item:focus-within > .khmh-mega { opacity: 1; visibility: visible; transition-delay: .05s, 0s; }
.khmh-mega__inner {
	display: flex; justify-content: center; gap: 5rem;
	padding: 3rem var(--khmh-gutter);
}
.khmh-mega__title {
	margin-bottom: 1.25rem;
	font-family: var(--khmh-font-head);
	font-size: .75rem; font-weight: 700;
	letter-spacing: .01em; text-transform: uppercase;
}
.khmh-mega__links { display: grid; gap: .75rem 3rem; }
.khmh-mega--cat .khmh-mega__group:first-child .khmh-mega__links { grid-template-columns: repeat(3, auto); }
.khmh-mega--brands .khmh-mega__inner { flex-direction: column; align-items: center; gap: 2rem; }
.khmh-mega--brands .khmh-mega__links { grid-template-columns: repeat(6, minmax(140px, auto)); }
.khmh-mega__links a { font-size: .875rem; color: var(--khmh-text-muted); transition: color .2s ease; }
.khmh-mega__links a:hover { color: var(--khmh-text); }
.khmh-mega__all {
	font-family: var(--khmh-font-head);
	font-size: .75rem; font-weight: 700; text-transform: uppercase;
	border-bottom: 1px solid currentColor;
}

@media (max-width: 999px) {
	.khmh-header__bar { grid-template-areas: "left logo right"; padding-block: 1rem; row-gap: 0; }
	.khmh-header__right { gap: .75rem; }
	.khmh-logo img { height: 2.5rem; }
}

/* ---------- Drawers, search, overlay ---------- */

.khmh-overlay {
	position: fixed; inset: 0; z-index: 95;
	background: rgba(0, 0, 0, .3);
	opacity: 0; transition: opacity .3s ease;
}
.khmh-overlay.is-open { opacity: 1; }

.khmh-drawer {
	position: fixed; top: 0; bottom: 0; z-index: 100;
	display: flex; flex-direction: column;
	width: min(400px, 89vw);
	background: #fff;
	color: var(--khmh-text);
	transition: transform .4s var(--khmh-ease);
}
.khmh-drawer--left { left: 0; transform: translateX(-100%); }
.khmh-drawer--right { right: 0; transform: translateX(100%); }
.khmh-drawer.is-open { transform: none; }
.khmh-drawer__head {
	display: flex; align-items: center; justify-content: space-between;
	min-height: 4.5rem;
	padding: 0 var(--khmh-gutter);
	border-bottom: 1px solid var(--khmh-border);
}
.khmh-drawer--left .khmh-drawer__head { justify-content: flex-start; border-bottom: 0; }
.khmh-drawer__title { font-family: var(--khmh-font-head); font-size: 1.125rem; font-weight: 700; text-transform: uppercase; }
.khmh-drawer__body { flex: 1; overflow-y: auto; padding: 0 var(--khmh-gutter) 2rem; }
.khmh-drawer__foot { display: grid; gap: .25rem; margin-top: 2rem; }
.khmh-drawer__foot a { display: flex; align-items: center; gap: .75rem; padding: .5rem 0; }

.khmh-mnav__link,
.khmh-mnav__toggle {
	display: flex; align-items: center; justify-content: space-between; width: 100%;
	padding: .75rem 0;
	font-family: var(--khmh-font-head);
	font-size: 1.125rem; font-weight: 700;
	text-transform: uppercase; text-align: left;
}
.khmh-mnav__toggle .khmh-icon { width: 1.125rem; height: 1.125rem; transition: transform .25s ease; }
.khmh-mnav__toggle[aria-expanded="true"] .khmh-icon { transform: rotate(90deg); }
.khmh-mnav__sub { display: grid; gap: .125rem; padding: 0 0 1rem .75rem; }
.khmh-mnav__sub a { padding: .375rem 0; color: var(--khmh-text-muted); }
.khmh-mnav__sub .khmh-mnav__all { color: var(--khmh-accent); }

.khmh-search {
	position: fixed; top: 0; left: 0; right: 0; z-index: 100;
	background: #fff; color: var(--khmh-text);
	box-shadow: 0 -1px var(--khmh-border) inset;
	transform: translateY(-100%);
	transition: transform .4s var(--khmh-ease);
}
.khmh-search.is-open { transform: none; }
.khmh-search__form { display: flex; align-items: center; gap: 1rem; min-height: 5.5rem; padding: 0 var(--khmh-gutter); }
.khmh-search__form input[type="search"] {
	flex: 1; min-width: 0;
	border: 0; background: none; padding: .75rem 0;
	font-family: var(--khmh-font-head);
	font-size: 1.25rem; font-weight: 700; color: var(--khmh-text);
	-webkit-appearance: none; appearance: none; border-radius: 0;
}
.khmh-search__form input[type="search"]:focus { outline: none; }

/* Mini cart — covers both the Cerla theme template and WooCommerce's default markup */
.khmh-minicart .cart-icon-big,
.khmh-minicart .free-order { display: none; }
.khmh-minicart .cart_list,
.khmh-minicart .woocommerce-mini-cart { margin: 0; padding: 0; list-style: none; }
.khmh-minicart .mini_cart_item {
	position: relative;
	display: block;
	min-height: 7rem;
	padding: 1.25rem 2rem 1.25rem 6.25rem;
	border-bottom: 1px solid var(--khmh-border);
	line-height: 1.5;
}
.khmh-minicart .mini_cart_item img {
	position: absolute; left: 0; top: 1.25rem;
	width: 5rem !important; height: 5rem !important; max-width: none;
	object-fit: contain;
}
.khmh-minicart .mini_cart_item .product-name,
.khmh-minicart .mini_cart_item > a:not(.remove):not(.product-image) {
	display: block;
	font-family: var(--khmh-font-head); font-size: .8125rem; font-weight: 700; text-transform: uppercase;
}
.khmh-minicart .mini_cart_item .quantity { margin-top: .375rem; color: var(--khmh-text-muted); }
.khmh-minicart .mini_cart_item .price { color: var(--khmh-accent); font-family: var(--khmh-font-head); font-weight: 700; }
.khmh-minicart .mini_cart_item .remove {
	position: absolute; right: 0; top: 1.125rem;
	width: 1.5rem; height: 1.5rem;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 0; color: var(--khmh-text-muted) !important; background: none !important;
}
.khmh-minicart .mini_cart_item .remove::before { content: "\00d7"; font-size: 1.375rem; line-height: 1; }
.khmh-minicart .total-cart,
.khmh-minicart .woocommerce-mini-cart__total {
	display: flex; justify-content: space-between; align-items: center;
	margin: 0; padding: 1.25rem 0;
	font-family: var(--khmh-font-head); font-weight: 700; text-transform: uppercase;
}
.khmh-minicart .buttons,
.khmh-minicart .woocommerce-mini-cart__buttons { display: grid; gap: .75rem; margin: 0; }
.khmh-minicart .buttons .button {
	display: flex; align-items: center; justify-content: center;
	min-height: 3rem; margin: 0;
	border-radius: 999px;
	background: #fff; color: var(--khmh-text);
	box-shadow: 0 0 0 1px var(--khmh-text) inset;
	font-family: var(--khmh-font-head);
	font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.khmh-minicart .buttons .checkout { order: -1; background: var(--khmh-text); color: #fff; }
.khmh-minicart .buttons .button:hover { background: var(--khmh-accent); box-shadow: none; color: #fff; }
.khmh-minicart .empty {
	display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
	padding: 4rem 0; text-align: center;
	font-family: var(--khmh-font-head); font-size: 1rem; font-weight: 700; text-transform: uppercase;
}
.khmh-minicart .empty .go-shop {
	display: inline-flex; align-items: center; min-height: 3rem; padding: 0 2.5rem;
	border-radius: 999px; background: var(--khmh-text); color: #fff;
	font-size: .75rem; letter-spacing: .1em;
}
.khmh-minicart .empty .go-shop i { display: none; }

/* ---------- Slideshow ---------- */

.khmh-hero {
	position: relative;
	display: grid;
	overflow: hidden;
	width: 100%;  /* keeps min-height from widening the slider on phones */
	aspect-ratio: var(--khmh-hero-ratio, 2 / 1);
	min-height: calc(var(--khmh-header-h) + 12rem);
	max-height: 100vh;
	background: #efe9df;
	color: #fff;
}
.khmh-hero__slide {
	grid-area: 1 / 1;
	position: relative;
	opacity: 0;
	visibility: hidden;
	transition: opacity .8s ease, visibility 0s linear .8s;
}
.khmh-hero__slide.is-active { opacity: 1; visibility: visible; transition-delay: 0s; z-index: 1; }
.khmh-hero__slide picture { display: contents; }
.khmh-hero__img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; object-position: center; }

/* Darker gradient behind slide text (as on the reference). The shade under the header lives on the header itself. */
.khmh-hero__slide::before { content: none; }
.khmh-hero__slide.has-text::before {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(180deg, rgba(54, 54, 54, 0) 35%, rgba(4, 4, 4, .5) 100%);
}
.khmh-hero__link { position: absolute; inset: 0; z-index: 2; }

.khmh-hero__content {
	position: absolute; left: 0; bottom: 0; z-index: 3;
	display: grid; justify-items: start; gap: .25rem;
	max-width: 760px;
	padding: 0 var(--khmh-gutter) 4rem;
}
.khmh-hero__sub {
	font-family: var(--khmh-font-head);
	font-size: .9375rem; font-weight: 700;
	text-transform: uppercase;
	opacity: .75;
}
.khmh-hero__title {
	font-family: var(--khmh-font-head);
	font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	font-weight: 700; line-height: 1.3;
	text-transform: uppercase;
}
.khmh-hero__content .khmh-pill { margin-top: 1.5rem; min-height: 3.2rem; padding: 0 2rem; }

.khmh-hero__dots {
	position: absolute; right: var(--khmh-gutter); bottom: 4rem; z-index: 3;
	display: flex; align-items: center; gap: 1.125rem;
}
.khmh-hero__dot {
	width: .625rem; height: .625rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, .75);
	transition: background .2s ease, box-shadow .2s ease;
}
.khmh-hero__dot.is-active { background: transparent; box-shadow: 0 0 0 2px #fff inset; }

@media (max-width: 699px) {
	/* Wide desktop banners on phones: show them whole, header sits above instead of over them */
	.khmh-header:not(.khmh-header--overlay-mobile) { margin-bottom: 0; }
	.khmh-hero:not(.khmh-hero--overlay-mobile) { min-height: 0; }
	.khmh-hero:not(.khmh-hero--overlay-mobile) .khmh-hero__slide::before { background: none; }
	.khmh-hero:not(.khmh-hero--overlay-mobile) .khmh-hero__slide.has-text::before { background: linear-gradient(180deg, rgba(54, 54, 54, 0) 30%, rgba(4, 4, 4, .5) 100%); }
	.khmh-hero:not(.khmh-hero--overlay-mobile) .khmh-hero__sub { font-size: .6875rem; }
	.khmh-hero:not(.khmh-hero--overlay-mobile) .khmh-hero__title { font-size: 1rem; }
	.khmh-hero:not(.khmh-hero--overlay-mobile) .khmh-hero__content { padding-bottom: 1.75rem; }
	.khmh-hero:not(.khmh-hero--overlay-mobile) .khmh-hero__content .khmh-pill { display: none; }
	.khmh-hero__content { padding-bottom: 2.5rem; }
	.khmh-hero__content .khmh-pill { min-height: 2.75rem; padding: 0 1.5rem; font-size: .6875rem; }
	.khmh-hero__dots { left: 0; right: 0; bottom: 1rem; justify-content: center; gap: .75rem; }
	.khmh-hero__slide.has-text .khmh-hero__content { padding-bottom: 2.75rem; }
}

/* ---------- Text with icons ---------- */

.khmh-trust { border-bottom: 1px solid var(--khmh-border); }
.khmh-trust__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	padding-block: 3.5rem 4.25rem;
}
.khmh-trust__item { display: grid; justify-items: center; align-content: start; text-align: center; padding: 0 1rem; }
.khmh-trust__icon { color: var(--khmh-accent); margin-bottom: 1.5rem; }
.khmh-trust__icon .khmh-icon { width: 2.25rem; height: 2.25rem; stroke-width: 1.25; }
.khmh-trust__title {
	margin-bottom: .75rem;
	font-family: var(--khmh-font-head);
	font-size: .8125rem; font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.khmh-trust__text { font-size: .875rem; }
@media (max-width: 999px) {
	.khmh-trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; padding-block: 2.5rem; }
}

/* ---------- Sections ---------- */

.khmh-section { padding-block: var(--khmh-section); }
.khmh-section--bordered { border-top: 1px solid var(--khmh-border); }

/* ---------- Tabs ---------- */

.khmh-tabs { display: flex; justify-content: center; gap: 2.5rem; margin-bottom: var(--khmh-stack); padding-top: .75rem; }
.khmh-tab {
	position: relative;
	padding-bottom: .25rem;
	font-family: var(--khmh-font-head);
	font-size: 1.125rem; font-weight: 600;
	letter-spacing: .01em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--khmh-text);
}
.khmh-tab::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0;
	height: 1px; background: currentColor;
	transform: scaleX(0); transform-origin: left;
	transition: transform .3s var(--khmh-ease);
}
.khmh-tab.is-active::after { transform: scaleX(1); }
@media (max-width: 699px) {
	.khmh-tabs { gap: 1.5rem; }
	.khmh-tab { font-size: 1rem; }
}

/* ---------- Product grid & card ---------- */

.khmh-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 3rem 6rem;
}
@media (max-width: 1399px) { .khmh-grid { column-gap: 3rem; } }
@media (max-width: 999px) { .khmh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 2rem; } }
@media (max-width: 699px) { .khmh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem .75rem; } }

.khmh-card { position: relative; display: grid; align-content: start; }
.khmh-card__figure { position: relative; }
.khmh-card__media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; }
.khmh-card__img {
	position: absolute; inset: 0;
	width: 100% !important; height: 100% !important;
	object-fit: contain;
	transition: opacity .4s ease;
}
.khmh-card__img--hover { opacity: 0; }
.khmh-card__media.has-hover:hover .khmh-card__img:not(.khmh-card__img--hover) { opacity: 0; }
.khmh-card__media.has-hover:hover .khmh-card__img--hover { opacity: 1; }

.khmh-card__label {
	position: absolute; top: 0; left: .75rem; z-index: 2;
	font-family: var(--khmh-font-head);
	font-size: .6875rem; font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--khmh-text-muted);
}
.khmh-card__label.is-sale { color: var(--khmh-accent); }

.khmh-card__wish {
	position: absolute; left: .75rem; bottom: -.5rem; z-index: 2;
	display: inline-flex;
	color: var(--khmh-accent);
	transition: transform .2s ease;
}
.khmh-card__wish .khmh-icon { width: 1.25rem; height: 1.25rem; }
.khmh-card__wish:hover { transform: scale(1.1); }
.khmh-card__wish:hover .khmh-icon { fill: currentColor; }

.khmh-card__info {
	display: grid;
	justify-items: center;
	gap: .75rem;
	padding-top: 2.25rem;
	text-align: center;
}
.khmh-card__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	font-family: var(--khmh-font-head);
	font-size: .8125rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .01em;
	text-transform: uppercase;
}
.khmh-card__title:hover { text-decoration: underline; text-underline-offset: 3px; }
.khmh-card__price {
	font-family: var(--khmh-font-head);
	font-size: .8125rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--khmh-accent);
}
.khmh-card__price del { margin-right: .5rem; color: var(--khmh-text-muted); font-weight: 600; }
.khmh-card__price ins { text-decoration: none; background: none; }
.khmh-card__price .woocommerce-Price-currencySymbol { margin-right: 1px; }

.khmh-rating { display: flex; align-items: center; gap: .5rem; font-size: .75rem; color: var(--khmh-text-muted); }
.khmh-stars {
	--percent: calc(var(--rating) / 5 * 100%);
	display: inline-block;
	font-family: Arial, sans-serif;
	font-size: .8125rem; line-height: 1; letter-spacing: 2px;
}
.khmh-stars::before {
	content: "★★★★★";
	background: linear-gradient(90deg, var(--khmh-star) var(--percent), #e2ddd5 var(--percent));
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent;
}
@media (max-width: 699px) {
	.khmh-card__info { padding-top: 1.75rem; gap: .5rem; }
	.khmh-card__title { font-size: .75rem; }
	.khmh-card__price { font-size: .75rem; }
	.khmh-card__wish { left: .25rem; }
	.khmh-card__label { left: .25rem; }
}

/* ---------- Instagram ---------- */

.khmh-insta { padding-top: var(--khmh-section); }
.khmh-insta__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.khmh-insta__item { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #f3f1ee; }
.khmh-insta__item img { width: 100%; height: 100% !important; object-fit: cover; transition: transform .6s ease, opacity .3s ease; }
.khmh-insta__item:hover img { transform: scale(1.03); opacity: .92; }
.khmh-insta__type { position: absolute; top: .75rem; right: .75rem; color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
.khmh-insta__type .khmh-icon { width: 1.375rem; height: 1.375rem; }
@media (max-width: 699px) { .khmh-insta__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Blog posts ---------- */

.khmh-section--bordered .khmh-h2 { margin-top: 1.5rem; }
.khmh-blog { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 3.75rem; }
.khmh-post { position: relative; display: grid; align-content: start; justify-items: start; }
.khmh-post__media { display: block; width: 100%; aspect-ratio: 1.8 / 1; overflow: hidden; border-radius: .75rem; margin-bottom: 1.75rem; background: #f3f1ee; }
.khmh-post__media img { width: 100%; height: 100% !important; object-fit: cover; transition: transform .6s ease; }
.khmh-post:hover .khmh-post__media img { transform: scale(1.04); }
.khmh-post__title {
	margin-bottom: 1rem;
	font-family: var(--khmh-font-head);
	font-size: .8125rem;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.khmh-post__excerpt { margin-bottom: 1.5rem; font-size: .875rem; line-height: 1.65; }
.khmh-post__more { font-size: .75rem; letter-spacing: .02em; text-transform: uppercase; color: var(--khmh-accent); }
.khmh-post__more:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 999px) {
	.khmh-blog {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 72%;
		gap: 1.5rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		margin-inline: calc(-1 * var(--khmh-gutter));
		padding-inline: var(--khmh-gutter);
		scroll-padding-inline: var(--khmh-gutter);
	}
	.khmh-blog::-webkit-scrollbar { display: none; }
	.khmh-post { scroll-snap-align: start; }
}
@media (max-width: 699px) { .khmh-blog { grid-auto-columns: 84%; } }

/* ---------- Image with text ---------- */

.khmh-story { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.khmh-story__copy {
	display: grid; justify-items: start; align-content: center;
	max-width: calc(26.5rem + 10rem);
	padding: 3rem var(--khmh-gutter) 3rem 10rem;
}
.khmh-eyebrow {
	margin-bottom: .75rem;
	font-family: var(--khmh-font-head);
	font-size: .75rem; font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--khmh-accent);
}
.khmh-story__title {
	margin-bottom: 1.5rem;
	font-family: var(--khmh-font-head);
	font-size: 1.125rem; font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
}
.khmh-story__copy > p { margin-bottom: 1.25rem; font-size: .875rem; line-height: 1.65; }
.khmh-story__copy > p:last-child { margin-bottom: 0; }
.khmh-story__media { align-self: stretch; min-height: 38rem; position: relative; }
.khmh-story__media img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; object-position: 72% center; }
@media (max-width: 1199px) { .khmh-story__copy { padding-left: var(--khmh-gutter); max-width: 34rem; margin-left: auto; margin-right: 2rem; } }
@media (max-width: 999px) {
	.khmh-story { grid-template-columns: 1fr; }
	.khmh-story__media { order: -1; min-height: 0; aspect-ratio: 1.25 / 1; }
	.khmh-story__copy { margin: 0; max-width: none; padding: var(--khmh-section) var(--khmh-gutter); }
}

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

.khmh-footer {
	background: var(--khmh-accent);
	color: #fff;
	padding-block: 3.5rem 3rem;
}
.khmh-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 249px 250px 288px;
	column-gap: 4rem;
	row-gap: 3rem;
}
.khmh-footer__logo { width: 11.25rem; height: auto; margin-bottom: 2rem; filter: brightness(0) invert(1); }
.khmh-footer__brand > p { max-width: 24rem; margin-bottom: 1.5rem; font-size: .875rem; line-height: 1.65; }
.khmh-footer__caps { text-transform: uppercase; }
.khmh-footer__mail { text-decoration: underline; text-underline-offset: 3px; }
.khmh-footer__title {
	margin-bottom: 1.5rem;
	font-family: var(--khmh-font-head);
	font-size: .875rem; font-weight: 700;
	text-transform: uppercase;
}
.khmh-footer__col ul { display: grid; gap: .75rem; }
.khmh-footer__col a { font-size: .875rem; transition: opacity .2s ease; }
.khmh-footer__col a:hover { text-decoration: underline; text-underline-offset: 3px; }
.khmh-footer__news > p:not(.khmh-footer__title) { margin-bottom: 1.5rem; font-size: .875rem; }

.khmh-news { display: grid; gap: 1.25rem; }
.khmh-news input[type="email"] {
	width: 100%; height: 2.875rem;
	padding: 0 .875rem;
	border: 1px solid rgba(255, 255, 255, .9); border-radius: 0;
	background: transparent; color: #fff;
	font-family: var(--khmh-font-text); font-size: .875rem; letter-spacing: .02em;
	-webkit-appearance: none; appearance: none;
}
.khmh-news input[type="email"]::placeholder { color: rgba(255, 255, 255, .75); }
.khmh-news input[type="email"]:focus { outline: none; border-color: #fff; box-shadow: 0 0 0 1px #fff inset; }
.khmh-news .khmh-pill { min-height: 3.2rem; }
.khmh-news__msg { margin-top: 1rem; font-weight: 700; }

.khmh-social { display: flex; gap: 2rem; margin-top: 3.25rem; }
.khmh-social a { display: inline-flex; opacity: 1; transition: opacity .2s ease; }
.khmh-social a:hover { opacity: .7; }
.khmh-social svg { width: 1.25rem; height: 1.25rem; }

.khmh-footer__bottom {
	display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
	margin-top: 4.5rem;
}
.khmh-footer__copy {
	font-family: var(--khmh-font-head);
	font-size: .75rem; font-weight: 700;
	text-transform: uppercase;
	opacity: .85;
}
.khmh-pay { display: flex; flex-wrap: wrap; gap: .875rem; }
.khmh-pay svg { display: block; width: 2.375rem; height: 1.5rem; }

@media (max-width: 1199px) {
	.khmh-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
	.khmh-footer { padding-top: 2.5rem; }
	.khmh-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; row-gap: 2.5rem; }
	.khmh-footer__brand, .khmh-footer__news { grid-column: 1 / -1; }
	.khmh-social { margin-top: 2.5rem; }
	.khmh-footer__bottom { flex-direction: column; align-items: flex-start; margin-top: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
	.khmh-body *, .khmh-body *::before, .khmh-body *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================
   Carousel (Most Loved Skincare Sets)
   ========================================================== */

.khmh-carousel { position: relative; --khmh-col-gap: 6rem; }
@media (max-width: 1399px) { .khmh-carousel { --khmh-col-gap: 3rem; } }
@media (max-width: 999px) { .khmh-carousel { --khmh-col-gap: 2rem; } }
@media (max-width: 699px) { .khmh-carousel { --khmh-col-gap: .75rem; } }

.khmh-scroller {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 3 * var(--khmh-col-gap)) / 4);
	column-gap: var(--khmh-col-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}
.khmh-scroller::-webkit-scrollbar { display: none; }
.khmh-scroller__item { min-width: 0; scroll-snap-align: start; }
@media (max-width: 999px) { .khmh-scroller { grid-auto-columns: calc((100% - 2 * var(--khmh-col-gap)) / 3); } }
@media (max-width: 699px) {
	.khmh-scroller {
		grid-auto-columns: calc((100% - var(--khmh-col-gap)) / 2.2);
		margin-inline: calc(-1 * var(--khmh-gutter));
		padding-inline: var(--khmh-gutter);
		scroll-padding-inline: var(--khmh-gutter);
	}
}

.khmh-carousel__arrow {
	position: absolute; z-index: 3;
	top: var(--khmh-arrow-top, 30%);
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.75rem; height: 2.75rem;
	margin-top: -1.375rem;
	border-radius: 50%;
	background: var(--khmh-text);
	color: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
	transition: opacity .25s ease, background .2s ease, transform .2s ease;
}
.khmh-carousel__arrow .khmh-icon { width: 1.125rem; height: 1.125rem; }
.khmh-carousel__arrow:hover { background: var(--khmh-accent); }
.khmh-carousel__arrow.is-prev { left: -1.375rem; }
.khmh-carousel__arrow.is-next { right: -1.375rem; }
.khmh-carousel__arrow[disabled] { opacity: 0; pointer-events: none; }
@media (max-width: 999px) { .khmh-carousel__arrow { display: none; } }

/* ==========================================================
   Mobile — matches the reference phone layout
   ========================================================== */

@media (max-width: 999px) {
	.khmh-header__bar { padding-block: .75rem; column-gap: .5rem; }
	.khmh-header__left { margin-left: -.375rem; }
	.khmh-header__right { gap: .5rem; margin-right: -.375rem; }
	.khmh-iconbtn { width: 2rem; height: 2rem; }
	.khmh-iconbtn .khmh-icon { width: 1.375rem; height: 1.375rem; }
	.khmh-logo img { height: 2.125rem; }
}

@media (max-width: 699px) {
	/* Trust strip: 2 × 2 like the reference */
	.khmh-trust__grid { row-gap: 2rem; padding-block: 2.5rem; }
	.khmh-trust__item { padding: 0 .5rem; }
	.khmh-trust__icon { margin-bottom: 1rem; }
	.khmh-trust__icon .khmh-icon { width: 1.75rem; height: 1.75rem; }
	.khmh-trust__title { font-size: .75rem; margin-bottom: .5rem; }
	.khmh-trust__text { font-size: .8125rem; }

	/* Product cards */
	.khmh-card__title { font-size: .6875rem; }
	.khmh-card__price { font-size: .75rem; }
	.khmh-card__info { padding-top: 1.5rem; }

	/* Instagram: 3 columns, 2 rows */
	.khmh-insta__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
	.khmh-insta__item:nth-child(n+7) { display: none; }
	.khmh-insta__type { top: .375rem; right: .375rem; }
	.khmh-insta__type .khmh-icon { width: 1rem; height: 1rem; }

	/* Image with text: image first, centred copy */
	.khmh-story__copy { justify-items: center; text-align: center; padding: 2.5rem var(--khmh-gutter) 3rem; }

	/* Footer: single column, bottom row centred */
	.khmh-footer__grid { grid-template-columns: 1fr; row-gap: 2.5rem; }
	.khmh-footer__brand > p { max-width: none; }
	.khmh-social { justify-content: center; }
	.khmh-footer__bottom { flex-direction: column; align-items: center; gap: 1.25rem; text-align: center; }
	.khmh-pay { justify-content: center; }
}

/* ==========================================================
   Shop / category / brand pages
   ========================================================== */

.khmh-archive-head {
	display: grid; justify-items: center; gap: .375rem;
	padding: 1.125rem var(--khmh-gutter);
	border-bottom: 1px solid var(--khmh-border);
	text-align: center;
}
.khmh-archive-title {
	margin: 0;
	font-family: var(--khmh-font-head);
	font-size: 1.125rem; font-weight: 700; line-height: 1.4;
	letter-spacing: .01em; text-transform: uppercase;
}
.khmh-crumbs { font-size: .75rem; color: var(--khmh-text-muted); }
.khmh-crumbs a:hover { color: var(--khmh-text); text-decoration: underline; text-underline-offset: 3px; }
.khmh-crumbs span { margin: 0 .25rem; }

.khmh-toolbar {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	align-items: stretch;
	border-bottom: 1px solid var(--khmh-border);
	font-family: var(--khmh-font-head);
	font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.khmh-toolbar > * { display: flex; align-items: center; min-height: 3.5rem; }
.khmh-toolbar__views { gap: .5rem; padding: 0 var(--khmh-gutter); border-right: 1px solid var(--khmh-border); }
.khmh-toolbar__view { display: inline-flex; padding: .25rem; color: rgba(28, 28, 28, .35); transition: color .2s ease; }
.khmh-toolbar__view:hover { color: var(--khmh-text); }
.khmh-toolbar__view.is-active { color: var(--khmh-text); }
.khmh-toolbar__view .khmh-icon { width: 1.5rem; height: 1.5rem; }
.khmh-toolbar__count { justify-content: center; margin: 0; color: var(--khmh-accent); }

.khmh-toolbar__sort { position: relative; border-left: 1px solid var(--khmh-border); }
.khmh-toolbar__sort select {
	-webkit-appearance: none; appearance: none;
	height: 100%; min-width: 11.5rem;
	padding: 0 2.5rem 0 1.5rem;
	border: 0; border-radius: 0; background: transparent;
	color: var(--khmh-text-muted);
	font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer;
}
.khmh-toolbar__sort select:focus-visible { outline: 2px solid var(--khmh-accent); outline-offset: -2px; }
.khmh-toolbar__sort > .khmh-icon { position: absolute; right: 1rem; top: 50%; width: 1rem; height: 1rem; margin-top: -.5rem; pointer-events: none; color: var(--khmh-text-muted); }
.khmh-toolbar__filter {
	justify-content: center; gap: .5rem; min-width: 8rem; padding: 0 1.5rem;
	border-left: 1px solid var(--khmh-border);
	color: var(--khmh-text-muted);
	font: inherit; letter-spacing: inherit; text-transform: inherit;
	transition: color .2s ease, background .2s ease;
}
.khmh-toolbar__filter:hover { color: var(--khmh-text); background: rgba(28, 28, 28, .03); }
.khmh-toolbar__badge {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 1.25rem; height: 1.25rem; padding: 0 5px; border-radius: 999px;
	background: var(--khmh-accent); color: #fff; font-size: .6875rem; line-height: 1;
}

.khmh-archive { padding: 3rem var(--khmh-gutter) 4rem; }
.khmh-archive__grid { row-gap: 4.5rem; }

/* View: 2 columns / list (desktop) */
@media (min-width: 700px) {
	.khmh-archive__grid[data-view="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.khmh-archive__grid[data-view="list"] { grid-template-columns: 1fr; row-gap: 1.5rem; }
	.khmh-archive__grid[data-view="list"] .khmh-card { grid-template-columns: 12rem minmax(0, 1fr); align-items: center; column-gap: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--khmh-border); }
	.khmh-archive__grid[data-view="list"] .khmh-card__info { justify-items: start; padding-top: 0; text-align: left; }
}

/* Pagination */
.khmh-pager { margin-top: 4.5rem; }
.khmh-pager ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .25rem; }
.khmh-pager a,
.khmh-pager span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 2.5rem; height: 2.5rem; padding: 0 .5rem;
	font-family: var(--khmh-font-head); font-size: .875rem; font-weight: 700;
	color: var(--khmh-text-muted);
	border-bottom: 2px solid transparent;
	transition: color .2s ease, border-color .2s ease;
}
.khmh-pager a:hover { color: var(--khmh-text); }
.khmh-pager .current { color: var(--khmh-text); border-bottom-color: var(--khmh-text); }
.khmh-pager .dots { min-width: 1.5rem; }
.khmh-pager .khmh-icon { width: 1.125rem; height: 1.125rem; }

.khmh-empty { display: grid; justify-items: center; gap: 1rem; padding: 4rem 0; text-align: center; }
.khmh-empty__title { font-family: var(--khmh-font-head); font-size: 1.125rem; font-weight: 700; text-transform: uppercase; }

/* Category SEO text stays on the page, below the products */
.khmh-archive-desc { border-top: 1px solid var(--khmh-border); padding: 3.5rem var(--khmh-gutter) 4.5rem; }
.khmh-prose { max-width: 62rem; margin-inline: auto; font-size: .9375rem; line-height: 1.8; }
.khmh-prose h1, .khmh-prose h2, .khmh-prose h3, .khmh-prose h4 { margin: 2rem 0 .75rem; font-family: var(--khmh-font-head); font-weight: 700; line-height: 1.35; color: var(--khmh-text); }
.khmh-prose h1, .khmh-prose h2 { font-size: 1.375rem; }
.khmh-prose h3 { font-size: 1.125rem; }
.khmh-prose p, .khmh-prose ul, .khmh-prose ol { margin: 0 0 1.125rem; }
.khmh-prose ul, .khmh-prose ol { padding-left: 1.5rem; list-style: revert; }
.khmh-prose a { color: var(--khmh-accent); text-decoration: underline; text-underline-offset: 3px; }
.khmh-prose img { max-width: 100%; height: auto; border-radius: .5rem; }
.khmh-prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.25rem; font-size: .875rem; }
.khmh-prose th, .khmh-prose td { padding: .5rem .75rem; border: 1px solid var(--khmh-border); text-align: left; }
.khmh-prose > :first-child { margin-top: 0; }

/* Filter drawer */
.khmh-drawer--filter { width: min(420px, 92vw); }
.khmh-filter { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.khmh-filter .khmh-drawer__body { padding-top: 1rem; }
.khmh-filter__group { margin: 0 0 1.75rem; padding: 0; border: 0; }
.khmh-filter__group legend { padding: 0; margin-bottom: .875rem; font-family: var(--khmh-font-head); font-size: .8125rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.khmh-check { display: flex; align-items: center; gap: .75rem; padding: .375rem 0; cursor: pointer; font-size: .875rem; }
.khmh-check input { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--khmh-accent); flex: none; }
.khmh-check small { color: var(--khmh-text-muted); }
.khmh-filter__list { max-height: 22rem; overflow-y: auto; padding-right: .5rem; }
.khmh-filter__price { display: flex; align-items: center; gap: .625rem; }
.khmh-filter__price input {
	width: 100%; min-width: 0; height: 2.75rem; padding: 0 .75rem;
	border: 1px solid var(--khmh-border); border-radius: 0; background: #fff;
	font: inherit; color: var(--khmh-text);
}
.khmh-filter__price label { flex: 1; min-width: 0; }
.khmh-filter__price input:focus { outline: none; border-color: var(--khmh-text); }
.khmh-filter__cur { font-size: .8125rem; color: var(--khmh-text-muted); }
.khmh-filter__foot { display: grid; gap: .75rem; padding: 1rem var(--khmh-gutter) 1.25rem; border-top: 1px solid var(--khmh-border); background: #fff; }
.khmh-filter__clear { justify-self: center; font-size: .8125rem; text-decoration: underline; text-underline-offset: 3px; color: var(--khmh-text-muted); }
.khmh-pill--small { min-height: 2.25rem; padding: 0 1.25rem; }

@media (max-width: 999px) {
	.khmh-archive__grid { row-gap: 3rem; }
	.khmh-toolbar__sort select { min-width: 9rem; }
}
@media (max-width: 699px) {
	.khmh-archive { padding-block: 2rem 3rem; }
	.khmh-archive__grid { row-gap: 2.5rem; }
	.khmh-toolbar { grid-template-columns: minmax(0, 1fr) auto auto; font-size: .6875rem; }
	.khmh-toolbar__views { display: none; }
	.khmh-toolbar__count { justify-content: flex-start; padding-left: var(--khmh-gutter); }
	.khmh-toolbar__sort select { min-width: 0; width: 7.5rem; padding: 0 1.75rem 0 1rem; }
	.khmh-toolbar__sort > .khmh-icon { right: .5rem; }
	.khmh-toolbar__filter { min-width: 0; padding: 0 1.125rem; }
	.khmh-toolbar > * { min-height: 3rem; }
	.khmh-pager a, .khmh-pager span { min-width: 2.125rem; height: 2.25rem; }
	.khmh-archive-desc { padding-block: 2.5rem 3rem; }
}

/* Wrapper around the header/footer when they are placed on a theme page: no box of its own, so sticky works against the page. */
.khmh-scope { display: contents; }