/* =========================================================================
   Kashif Naseer Fabrics — main stylesheet
   A clean, modern fashion/fabrics storefront. Original work.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Design tokens
   ---------------------------------------------------------------------- */
:root {
	--knf-accent: #d23f57;
	--knf-dark: #171717;
	--knf-text: #2b2b2b;
	--knf-muted: #777777;
	--knf-line: #e7e7e7;
	--knf-bg: #ffffff;
	--knf-bg-soft: #f6f5f3;
	--knf-bg-soft-2: #efece7;

	--knf-font-head: 'Jost', 'Segoe UI', sans-serif;
	--knf-font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

	--knf-container: 1280px;
	--knf-radius: 10px;
	--knf-radius-sm: 6px;
	--knf-shadow: 0 6px 30px rgba(0, 0, 0, 0.07);
	--knf-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.06);
	--knf-trans: 0.28s ease;
	--knf-header-h: 76px;
}

/* -------------------------------------------------------------------------
   2. Base
   ---------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--knf-font-body);
	font-size: 18px;
	line-height: 1.7;
	color: var(--knf-text);
	background: var(--knf-bg);
	-webkit-font-smoothing: antialiased;
}

/* Prevent the full-bleed (100vw) hero/banner sections from causing a horizontal
   scrollbar. `clip` is used where supported so position:sticky keeps working,
   with `hidden` as the fallback. */
html {
	overflow-x: hidden;
	overflow-x: clip;
	/* Always reserve the vertical scrollbar's space. When a modal/drawer locks
	   the body with overflow:hidden the scrollbar disappears; without a reserved
	   gutter the page reclaims that width and the content (and any centred modal)
	   visibly shifts sideways. `stable` keeps the layout width constant. */
	scrollbar-gutter: stable;
}
.knf-site {
	overflow-x: hidden;
	overflow-x: clip;
}

body.knf-panel-open {
	overflow: hidden;
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--knf-font-head);
	color: var(--knf-dark);
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 0.6em;
}

a {
	color: var(--knf-dark);
	text-decoration: none;
	transition: color var(--knf-trans);
}

a:hover {
	color: var(--knf-accent);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

button {
	font-family: inherit;
	cursor: pointer;
}

.knf-icon {
	display: block;
}

.knf-container {
	width: 100%;
	max-width: var(--knf-container);
	margin: 0 auto;
	padding: 0 24px;
}

.knf-section {
	padding: 64px 0;
}

.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 1000;
	background: var(--knf-dark);
	color: #fff;
	padding: 10px 16px;
}
.skip-link:focus {
	left: 16px;
	top: 16px;
}

/* -------------------------------------------------------------------------
   3. Buttons
   ---------------------------------------------------------------------- */
.knf-btn,
.knf-home .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .woocommerce-message a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--knf-font-head);
	font-weight: 500;
	font-size: 16px;
	letter-spacing: 0.02em;
	padding: 13px 26px;
	border: 1px solid var(--knf-dark);
	border-radius: 50px;
	background: var(--knf-dark);
	color: #fff;
	transition: background var(--knf-trans), color var(--knf-trans), border-color var(--knf-trans);
	cursor: pointer;
	line-height: 1.2;
}

.knf-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background: var(--knf-accent);
	border-color: var(--knf-accent);
	color: #fff;
}

.knf-btn--light {
	background: #fff;
	color: var(--knf-dark);
	border-color: #fff;
}
.knf-btn--light:hover {
	background: var(--knf-accent);
	border-color: var(--knf-accent);
	color: #fff;
}

.knf-btn--dark {
	background: var(--knf-dark);
	color: #fff;
}

.knf-btn--outline {
	background: transparent;
	color: var(--knf-dark);
}

/* -------------------------------------------------------------------------
   3b. Announcement bar (service strip above the top bar)
   ---------------------------------------------------------------------- */
.knf-announce {
	background: var(--knf-dark);
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.knf-announce__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 52px;
	padding: 8px 0;
}
.knf-announce__item {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	text-align: center;
	line-height: 1.3;
}
.knf-announce__title {
	font-family: var(--knf-font-head);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.knf-announce__text {
	font-size: 13px;
	letter-spacing: 0.01em;
	color: rgba(255, 255, 255, 0.65);
}
@media (max-width: 600px) {
	.knf-announce__inner {
		gap: 14px;
		min-height: 0;
		padding: 9px 0;
	}
	.knf-announce__title {
		font-size: 11px;
		letter-spacing: 0.1em;
	}
	.knf-announce__text {
		font-size: 11px;
	}
}

/* -------------------------------------------------------------------------
   4. Top bar
   ---------------------------------------------------------------------- */
.knf-topbar {
	background: var(--knf-dark);
	color: rgba(255, 255, 255, 0.85);
	font-size: 15px;
}
.knf-topbar a {
	color: rgba(255, 255, 255, 0.85);
}
.knf-topbar a:hover {
	color: #fff;
}
.knf-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 44px;
	gap: 16px;
}
.knf-topbar__left {
	display: flex;
	align-items: center;
	gap: 26px;
}
.knf-topbar__item {
	position: relative;
}
/* thin separators between left items, like the reference header */
.knf-topbar__left .knf-topbar__item + .knf-topbar__item::before {
	content: "";
	position: absolute;
	left: -13px;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 13px;
	background: rgba(255, 255, 255, 0.22);
}
.knf-topbar__store {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.knf-topbar__right {
	display: flex;
	align-items: center;
	gap: 24px;
}

/* language / currency switchers */
.knf-switch {
	position: relative;
	cursor: pointer;
	outline: none;
}
.knf-switch__current {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: rgba(255, 255, 255, 0.85);
	white-space: nowrap;
}
.knf-switch:hover .knf-switch__current {
	color: #fff;
}
.knf-switch__caret {
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--knf-trans);
}
.knf-switch:hover .knf-switch__caret {
	transform: translateY(0) rotate(225deg);
}
.knf-switch__menu {
	list-style: none;
	margin: 0;
	padding: 8px 0;
	position: absolute;
	top: 100%;
	right: 0;
	min-width: 150px;
	background: #fff;
	border: 1px solid var(--knf-line);
	box-shadow: var(--knf-shadow);
	border-radius: var(--knf-radius-sm);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: all var(--knf-trans);
	z-index: 60;
}
.knf-switch:hover .knf-switch__menu,
.knf-switch:focus-within .knf-switch__menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.knf-switch__menu a {
	display: block;
	padding: 7px 16px;
	font-size: 15px;
	color: var(--knf-text);
	white-space: nowrap;
}
.knf-switch__menu a:hover {
	background: var(--knf-bg-soft);
	color: var(--knf-accent);
}

/* -------------------------------------------------------------------------
   5. Header
   ---------------------------------------------------------------------- */
.knf-header {
	background: #fff;
	border-bottom: 1px solid var(--knf-line);
	position: relative;
	z-index: 200;
}
.knf-sticky-header .knf-header.is-stuck {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	box-shadow: var(--knf-shadow-sm);
	animation: knf-slide-down 0.35s ease;
}
.knf-sticky-header .knf-header.is-stuck + .knf-content,
.knf-sticky-header .knf-header.is-stuck ~ * {
	/* spacing handled by JS body offset fallback below */
}
@keyframes knf-slide-down {
	from { transform: translateY(-100%); }
	to { transform: translateY(0); }
}

/* Transparent header overlaying the hero (front page); solid white on scroll. */
.knf-header-over .knf-header {
	position: absolute;
	left: 0;
	right: 0;
	background: transparent;
	border-bottom-color: transparent;
	box-shadow: none;
}
.knf-header-over .knf-header::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 230px;
	/* Hold a solid dark band across the whole nav row (0-96px) so white text is
	   readable over ANY hero (light wood, marble, etc.), then fade out below. */
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0px, rgba(0, 0, 0, 0.4) 80px, rgba(0, 0, 0, 0.16) 165px, rgba(0, 0, 0, 0) 230px);
	pointer-events: none;
	z-index: -1;
	transition: opacity 0.3s ease;
}
.knf-header-over .knf-header:not(.is-stuck) .knf-logo-text,
.knf-header-over .knf-header:not(.is-stuck) .knf-menu > li > a,
.knf-header-over .knf-header:not(.is-stuck) .knf-action,
.knf-header-over .knf-header:not(.is-stuck) .knf-burger {
	color: #fff;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}
.knf-header-over .knf-header:not(.is-stuck) .knf-header__brand img {
	filter: brightness(0) invert(1);
}
.knf-header-over .knf-header.is-stuck {
	background: #fff;
}
.knf-header-over .knf-header.is-stuck::before {
	opacity: 0;
}
/* Keep the announcement/top bars above the header's dark scrim so their text
   (esp. the lighter subtitle) is never dimmed by it. */
.knf-header-over .knf-announce,
.knf-header-over .knf-topbar {
	position: relative;
	z-index: 400;
}

/* Give the header more room so the logo, menu and icons aren't cramped. */
.knf-header .knf-container,
.knf-topbar .knf-container {
	max-width: 1560px;
}
.knf-header__inner {
	display: flex;
	align-items: center;
	gap: 44px;
	min-height: 92px;
}
/* Laptops: shrink the wide primary menu so the centred nav never overlaps the
   logo (desktop nav shows above 900px; below that the burger takes over).
   The `.knf-header` prefix adds weight so these beat the base menu sizes. */
@media (min-width: 901px) and (max-width: 1400px) {
	.knf-header .knf-header__inner { gap: 20px; }
	.knf-header .knf-menu { gap: 14px; }
	.knf-header .knf-menu > li > a { font-size: 14px; }
	.knf-header .knf-logo-text { font-size: 24px; }
}
@media (min-width: 901px) and (max-width: 1120px) {
	.knf-header .knf-menu { gap: 10px; }
	.knf-header .knf-menu > li > a { font-size: 13px; }
	.knf-header .knf-logo-text { font-size: 21px; }
}

.knf-header__brand {
	flex: 0 0 auto;
}
.knf-logo-text {
	font-family: var(--knf-font-head);
	font-weight: 600;
	font-size: 30px;
	letter-spacing: 0.04em;
	color: var(--knf-dark);
}
.knf-header__brand img,
.custom-logo {
	max-height: 46px;
	max-width: 180px;
	width: auto;
	object-fit: contain;
}

.knf-primary-nav {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	justify-content: center;
}
.knf-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: nowrap;
	gap: 26px;
}
.knf-menu li {
	position: relative;
}
.knf-menu > li > a {
	font-family: var(--knf-font-head);
	font-weight: 500;
	font-size: 17px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--knf-dark);
	white-space: nowrap;
}
.knf-menu > li > a:hover,
.knf-menu > li.current-menu-item > a,
.knf-menu > li.current-menu-parent > a,
.knf-menu > li.current-menu-ancestor > a {
	color: var(--knf-accent);
}
/* dropdown caret for items that have a submenu (matches the reference header) */
.knf-menu > li.menu-item-has-children > a::after {
	content: "";
	width: 6px;
	height: 6px;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--knf-trans);
}
.knf-menu > li.menu-item-has-children:hover > a::after {
	transform: translateY(1px) rotate(225deg);
}
.knf-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 10px 0;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: #fff;
	border: 1px solid var(--knf-line);
	box-shadow: var(--knf-shadow);
	border-radius: var(--knf-radius-sm);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: all var(--knf-trans);
	z-index: 50;
}
.knf-menu li:hover > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.knf-menu .sub-menu a {
	display: block;
	padding: 8px 20px;
	font-size: 16px;
	color: var(--knf-text);
}
.knf-menu .sub-menu a:hover {
	color: var(--knf-accent);
	background: var(--knf-bg-soft);
}

.knf-header__actions {
	display: flex;
	align-items: center;
	gap: 5px;
	flex: 0 0 auto;
}
.knf-action {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: none;
	background: transparent;
	color: var(--knf-dark);
	border-radius: 50%;
	transition: background var(--knf-trans), color var(--knf-trans);
}
.knf-action:hover {
	background: var(--knf-bg-soft);
	color: var(--knf-accent);
}
.knf-cart-count {
	position: absolute;
	top: 2px;
	right: 0;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	background: var(--knf-accent);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 18px;
	text-align: center;
	border-radius: 10px;
}
.knf-cart-count.is-empty {
	display: none;
}

.knf-burger {
	display: none;
	width: 42px;
	height: 42px;
	border: none;
	background: transparent;
	color: var(--knf-dark);
	align-items: center;
	justify-content: center;
}

/* -------------------------------------------------------------------------
   6. Search drawer
   ---------------------------------------------------------------------- */
.knf-search-drawer {
	position: fixed;
	inset: 0;
	z-index: 400;
	visibility: hidden;
}
.knf-search-drawer.is-open {
	visibility: visible;
}
.knf-search-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(23, 23, 23, 0.4);
	opacity: 0;
	transition: opacity var(--knf-trans);
}
.knf-search-drawer.is-open .knf-search-drawer__backdrop {
	opacity: 1;
}
.knf-search-drawer__panel {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: #fff;
	box-shadow: var(--knf-shadow);
	transform: translateY(-100%);
	transition: transform var(--knf-trans);
}
.knf-search-drawer.is-open .knf-search-drawer__panel {
	transform: translateY(0);
}
.knf-search-drawer__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 18px;
	max-width: 760px;
	margin: 0 auto;
	padding: 56px 24px 40px;
}
.knf-search-drawer__hint {
	font-family: var(--knf-font-head);
	font-size: 15px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--knf-muted);
	margin: 0;
}
.knf-search-drawer form {
	position: relative;
	margin: 0;
}
.knf-search-drawer input[type="search"],
.knf-search-drawer input[type="text"] {
	width: 100%;
	font-size: 23px;
	font-family: var(--knf-font-head);
	border: none;
	border-bottom: 2px solid var(--knf-dark);
	padding: 10px 4px;
	outline: none;
	background: transparent;
}
/* WC product-search submit button — hidden; submit via Enter (Modave look). */
.knf-search-drawer .woocommerce-product-search button[type="submit"] {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	color: var(--knf-dark);
	font-size: 0;
	padding: 8px;
	cursor: pointer;
}
.knf-search-drawer__suggest {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.knf-search-drawer__suggest-label {
	font-family: var(--knf-font-head);
	font-weight: 600;
	color: var(--knf-dark);
	margin-right: 4px;
}
.knf-search-chip {
	border: 1px solid var(--knf-line);
	border-radius: 50px;
	padding: 7px 16px;
	font-family: var(--knf-font-head);
	font-size: 14px;
	color: var(--knf-text);
	transition: border-color var(--knf-trans), background var(--knf-trans), color var(--knf-trans);
}
.knf-search-chip:hover {
	border-color: var(--knf-dark);
	background: var(--knf-bg-soft);
	color: var(--knf-accent);
}
.knf-search-drawer__close {
	position: absolute;
	top: 14px;
	right: 18px;
}

/* Shared round panel close button (search / off-canvas / quick view consistency). */
.knf-panel-close {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--knf-line);
	background: #fff;
	color: var(--knf-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background var(--knf-trans), color var(--knf-trans);
}
.knf-panel-close:hover {
	background: var(--knf-dark);
	color: #fff;
}

/* -------------------------------------------------------------------------
   7. Off-canvas mobile menu
   ---------------------------------------------------------------------- */
.knf-offcanvas {
	position: fixed;
	inset: 0;
	z-index: 500;
	visibility: hidden;
}
.knf-offcanvas.is-open {
	visibility: visible;
}
.knf-offcanvas__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	opacity: 0;
	transition: opacity var(--knf-trans);
}
.knf-offcanvas.is-open .knf-offcanvas__backdrop {
	opacity: 1;
}
.knf-offcanvas__panel {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 320px;
	max-width: 86vw;
	background: #fff;
	transform: translateX(-100%);
	transition: transform var(--knf-trans);
	display: flex;
	flex-direction: column;
}
.knf-offcanvas.is-open .knf-offcanvas__panel {
	transform: translateX(0);
}
.knf-offcanvas__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	border-bottom: 1px solid var(--knf-line);
}
.knf-offcanvas__title {
	font-family: var(--knf-font-head);
	font-weight: 600;
	font-size: 20px;
}
.knf-offcanvas__close {
	border: none;
	background: transparent;
}
.knf-offcanvas__nav {
	padding: 8px 0;
	overflow-y: auto;
	flex: 1;
}
.knf-menu--mobile {
	flex-direction: column;
	gap: 0;
}
.knf-menu--mobile li {
	border-bottom: 1px solid var(--knf-line);
}
.knf-menu--mobile a {
	display: block;
	padding: 14px 22px;
	font-family: var(--knf-font-head);
}
/* Parent rows: link sits beside a tap-target caret; the sub-menu wraps
   onto its own full-width line below and collapses when closed. */
.knf-menu--mobile li.menu-item-has-children {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}
.knf-menu--mobile li.menu-item-has-children > a {
	flex: 1 1 auto;
	min-width: 0;
}
/* The desktop hover-caret on <a> is replaced by the toggle button on mobile. */
.knf-menu--mobile li.menu-item-has-children > a::after {
	display: none;
}
.knf-submenu-toggle {
	flex: 0 0 56px;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	border-left: 1px solid var(--knf-line);
	color: var(--knf-text);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.knf-submenu-toggle::before {
	content: "";
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--knf-trans);
}
.knf-menu--mobile li.is-open > .knf-submenu-toggle::before {
	transform: translateY(2px) rotate(225deg);
}
.knf-menu--mobile .sub-menu {
	flex: 0 0 100%;
	width: 100%;
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	box-shadow: none;
	border: none;
	background: #fff;
	padding: 0;
	overflow: hidden;
	max-height: 0;
	transition: max-height var(--knf-trans);
}
.knf-menu--mobile li.is-open > .sub-menu {
	max-height: 1500px;
}
.knf-menu--mobile .sub-menu a {
	padding: 12px 22px 12px 34px;
	font-size: 15px;
}
.knf-offcanvas__foot {
	padding: 18px 22px;
	border-top: 1px solid var(--knf-line);
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.knf-offcanvas__foot a,
.knf-offcanvas__foot-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--knf-font-head);
	color: var(--knf-text);
	transition: color var(--knf-trans);
}
.knf-offcanvas__foot-link svg,
.knf-offcanvas__foot-link .knf-icon {
	color: var(--knf-accent);
}
.knf-offcanvas__foot-link:hover {
	color: var(--knf-accent);
}

/* -------------------------------------------------------------------------
   8. Hero
   ---------------------------------------------------------------------- */
.knf-hero {
	padding: 24px 0;
}
.knf-hero__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 20px;
}
.knf-hero__panel {
	position: relative;
	min-height: 460px;
	border-radius: var(--knf-radius);
	overflow: hidden;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
}
.knf-hero__panel--main {
	background-image: linear-gradient(120deg, #efe7df 0%, #d9cdbf 100%);
}
.knf-hero__panel--side {
	background-image: linear-gradient(120deg, #dfe5e8 0%, #c4cdd2 100%);
	align-items: flex-end;
}
.knf-hero__panel::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0));
}
.knf-hero__content {
	position: relative;
	z-index: 2;
	padding: 48px;
	color: #fff;
	max-width: 420px;
}
.knf-hero__content--side {
	padding: 36px;
}
.knf-hero__eyebrow {
	display: inline-block;
	font-family: var(--knf-font-head);
	font-size: 15px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin-bottom: 14px;
	color: #fff;
}
.knf-hero__title {
	font-size: clamp(34px, 5vw, 56px);
	color: #fff;
	margin-bottom: 24px;
	line-height: 1.05;
}
.knf-hero__subtitle {
	font-size: 30px;
	color: #fff;
	margin-bottom: 12px;
}
.knf-hero__link {
	color: #fff;
	font-family: var(--knf-font-head);
	border-bottom: 1px solid rgba(255, 255, 255, 0.6);
	padding-bottom: 3px;
}

/* -------------------------------------------------------------------------
   9. Features strip
   ---------------------------------------------------------------------- */
.knf-features {
	padding: 36px 0;
	border-bottom: 1px solid var(--knf-line);
}
.knf-features__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.knf-feature {
	display: flex;
	align-items: center;
	gap: 14px;
}
.knf-feature__icon {
	color: var(--knf-accent);
	flex: 0 0 auto;
}
.knf-feature__text strong {
	display: block;
	font-family: var(--knf-font-head);
	font-size: 17px;
	color: var(--knf-dark);
}
.knf-feature__text span {
	font-size: 15px;
	color: var(--knf-muted);
}

/* -------------------------------------------------------------------------
   10. Section heads + carousel nav
   ---------------------------------------------------------------------- */
.knf-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 34px;
	gap: 20px;
}
.knf-section__head--center {
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.knf-section__title {
	font-size: clamp(24px, 3vw, 34px);
	margin: 0;
}
.knf-section__tools {
	display: flex;
	align-items: center;
	gap: 20px;
}
.knf-section__link {
	font-family: var(--knf-font-head);
	font-size: 16px;
	font-weight: 500;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}
.knf-carousel__nav {
	display: flex;
	gap: 8px;
}
.knf-carousel__btn {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid var(--knf-line);
	background: #fff;
	color: var(--knf-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all var(--knf-trans);
}
.knf-carousel__btn:hover {
	background: var(--knf-dark);
	color: #fff;
	border-color: var(--knf-dark);
}
/* Mobile: stack the section header so the title sits on top and the
   "View All" link + carousel arrows drop to a tidy row below (no cramping). */
@media (max-width: 600px) {
	.knf-section__head { flex-direction: column; align-items: flex-start; gap: 14px; }
	.knf-section__head--center { align-items: center; }
	.knf-section__tools { width: 100%; justify-content: space-between; }
	.knf-section__title { font-size: 24px; }
}

/* ---------------------------------------------------------------------------
   Homepage — remove the doubled-up vertical spacing between sections.
   Elementor wraps each section in a container with its own top/bottom padding,
   which stacks on top of the theme section padding → big gaps. Drop the
   container vertical padding and give every section one tidy, smaller rhythm
   (works on mobile + desktop via clamp).
   ------------------------------------------------------------------------- */
body.home .e-con { padding-top: 0 !important; padding-bottom: 0 !important; }
body.home .knf-section,
body.home .knf-reels,
body.home .knf-store,
body.home .knf-cats,
body.home .knf-tbar,
body.home .knf-discover,
body.home .knf-ptabs,
body.home .knf-products,
body.home .knf-process { padding-top: clamp(22px, 3vw, 44px) !important; padding-bottom: clamp(22px, 3vw, 44px) !important; }
/* the hero/heritage banner stays a little taller (it's a feature banner) */
body.home .knf-heritage { padding-top: clamp(40px, 6vw, 80px) !important; padding-bottom: clamp(40px, 6vw, 80px) !important; }

.knf-carousel {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 6px;
}
.knf-carousel::-webkit-scrollbar {
	display: none;
}
.knf-carousel > * {
	scroll-snap-align: start;
}

/* -------------------------------------------------------------------------
   11. Categories carousel (circles)
   ---------------------------------------------------------------------- */
/* Show a fixed number of categories per view (5 on desktop) and scroll the
   rest with the arrows. Each cat takes an equal fraction of the row, so 5 fill
   the width exactly; with more categories the row overflows and scrolls from
   the left. `safe center` centres the row when there are too few to fill it,
   but falls back to left-aligned (and fully scrollable) once it overflows, so
   the arrows can always reach the first item. */
.knf-cats__track {
	--knf-cats-per: 5;
	justify-content: safe center;
}
.knf-cat {
	flex: 0 0 calc((100% - (var(--knf-cats-per) - 1) * 24px) / var(--knf-cats-per));
	max-width: calc((100% - (var(--knf-cats-per) - 1) * 24px) / var(--knf-cats-per));
	text-align: center;
	color: var(--knf-dark);
}
.knf-cat__circle {
	display: block;
	width: 100%;
	max-width: 175px;
	height: auto;
	aspect-ratio: 1 / 1;
	margin: 0 auto 14px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--knf-bg-soft);
	border: 1px solid var(--knf-line);
	position: relative;
	transition: transform var(--knf-trans), box-shadow var(--knf-trans);
}
@media (max-width: 1024px) {
	.knf-cats__track {
		--knf-cats-per: 3;
	}
}
@media (max-width: 600px) {
	.knf-cats__track {
		--knf-cats-per: 2;
	}
}
.knf-cat:hover .knf-cat__circle {
	transform: translateY(-4px);
	box-shadow: var(--knf-shadow);
}
.knf-cat__circle img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.knf-cat__initial {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--knf-font-head);
	font-size: 46px;
	color: var(--knf-muted);
}
.knf-cat__name {
	display: block;
	font-family: var(--knf-font-head);
	font-weight: 500;
	font-size: 17px;
}
.knf-cat__count {
	display: block;
	font-size: 14px;
	color: var(--knf-muted);
}

/* -------------------------------------------------------------------------
   12. Product cards / grids
   ---------------------------------------------------------------------- */
.woocommerce ul.products,
.woocommerce-page ul.products,
ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}
/* WooCommerce's default layout CSS adds a clearfix ::before/::after to
   ul.products (under BOTH .woocommerce AND .woocommerce-page). In a CSS grid
   those pseudo-elements become real grid items — the ::before grabs the first
   cell and shifts every product one column right (empty cell + gap). Kill them
   on every variant; !important so it wins regardless of which body class the
   page carries (e.g. the Elementor cart has .woocommerce-page). */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after,
ul.products::before,
ul.products::after {
	content: none !important;
	display: none !important;
}
/* WC's woocommerce-layout.css floats each li.product at width:22.05% under BOTH
   .woocommerce AND .woocommerce-page. Our grid sizes the columns, so each card
   must fill its cell — override width/float on every variant with !important
   (the Elementor cart/shop body carries .woocommerce-page, which WC's rule
   targets and the plain .woocommerce override would otherwise lose to). */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
ul.products li.product {
	margin: 0;
	width: auto !important;
	float: none !important;
	text-align: left;
}
.knf-card__inner {
	height: 100%;
	display: flex;
	flex-direction: column;
}
.knf-card__media-wrap {
	position: relative;
	border-radius: var(--knf-radius);
	overflow: hidden;
	background: var(--knf-bg-soft);
}
.knf-card__link {
	display: block;
}
.knf-card__media {
	position: relative;
	aspect-ratio: 3 / 4;
	background: var(--knf-bg-soft);
}
.knf-card__media > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: opacity var(--knf-trans), transform 0.6s ease;
}
.knf-card__media-alt {
	position: absolute;
	inset: 0;
	opacity: 0;
	background: var(--knf-bg-soft);
	transition: opacity var(--knf-trans);
}
.knf-card__media-alt img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.knf-card:hover .knf-card__media-alt {
	opacity: 1;
}
.knf-card:hover .knf-card__media > img {
	transform: scale(1.04);
}

.knf-card__badges {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.knf-badge {
	font-family: var(--knf-font-head);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 5px 10px;
	border-radius: 50px;
	color: #fff;
	background: var(--knf-dark);
	text-transform: uppercase;
}
.knf-badge--sale {
	background: var(--knf-accent);
}
.knf-badge--new {
	background: #2f7d52;
}
.knf-badge--out {
	background: #777;
}

.knf-card__actions {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 12px;
	z-index: 3;
	display: flex;
	gap: 8px;
	align-items: center;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity var(--knf-trans), transform var(--knf-trans);
}
.knf-card:hover .knf-card__actions {
	opacity: 1;
	transform: translateY(0);
}
/* Action icons (wishlist + quick-view) — vertical stack, top-right of the image,
   revealed on hover (always shown on touch/mobile via the responsive rules). */
.knf-card__icons {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 4;
	display: flex;
	flex-direction: column;
	gap: 8px;
	opacity: 0;
	transform: translateX(10px);
	transition: opacity var(--knf-trans), transform var(--knf-trans);
}
.knf-card:hover .knf-card__icons {
	opacity: 1;
	transform: none;
}
.knf-card__actions .button,
.knf-card__atc {
	flex: 1;
	margin: 0 !important;
	padding: 12px 16px !important;
	font-size: 15px !important;
	border-radius: 50px !important;
	background: var(--knf-dark) !important;
	color: #fff !important;
	border: none !important;
	text-align: center;
}
.knf-card__actions .button:hover,
.knf-card__atc:hover {
	background: var(--knf-accent) !important;
}
.knf-card__wishlist,
.knf-card__qv {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--knf-shadow-sm);
	color: var(--knf-dark);
	border: none;
	cursor: pointer;
}
.knf-card__wishlist:hover,
.knf-card__qv:hover {
	color: var(--knf-accent);
}
/* Heart fills with accent on hover, and when the product is already wishlisted
   (TI WooCommerce Wishlist adds .tinvwl-product-in-list). */
.knf-card__wishlist:hover svg,
.knf-card__wishlist.is-active svg,
.knf-card__wishlist.tinvwl-product-in-list svg {
	fill: var(--knf-accent);
	stroke: var(--knf-accent);
}
.knf-card__wishlist.is-active,
.knf-card__wishlist.tinvwl-product-in-list {
	color: var(--knf-accent);
}
.knf-card .added_to_cart {
	display: none;
}

.knf-card__body {
	padding: 16px 14px 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.knf-card__cat {
	font-size: 14px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--knf-muted);
}
.knf-card__title {
	font-size: 18px;
	font-weight: 500;
	margin: 0;
	line-height: 1.35;
}
.knf-card__title a {
	color: var(--knf-dark);
}
.knf-card__title a:hover {
	color: var(--knf-accent);
}
.knf-card__price {
	font-family: var(--knf-font-head);
	font-size: 18px;
	color: #1f4e79;
}
.knf-card__price del {
	color: var(--knf-muted);
	font-weight: 400;
	margin-right: 6px;
}
.knf-card__price ins {
	text-decoration: none;
	color: var(--knf-accent);
	font-weight: 600;
}
.knf-card__rating {
	font-size: 15px;
}
/* Bottom slide-up add-to-cart removed — add-to-cart now lives as the cart icon (top-right). */
.knf-card__actions { display: none !important; }
/* Add-to-cart rendered as a compact circular icon (shares .knf-card__qv circle styling). */
.knf-card__cart { padding: 0 !important; min-width: 0; background: #fff; border: none; }
.knf-card__cart.loading { opacity: .6; pointer-events: none; }
/* Star rating — custom, independent of the WooCommerce star font. */
.knf-stars { position: relative; display: inline-block; font-size: 15px; line-height: 1; letter-spacing: 2px; font-family: Arial, Helvetica, sans-serif; white-space: nowrap; }
.knf-stars::before { content: "\2605\2605\2605\2605\2605"; color: #dcdcdc; }
.knf-stars__fill { position: absolute; left: 0; top: 0; height: 100%; overflow: hidden; white-space: nowrap; }
.knf-stars__fill::before { content: "\2605\2605\2605\2605\2605"; color: #e6b422; }
.knf-card__swatches {
	display: flex;
	gap: 6px;
	margin-top: 4px;
}
.knf-dot {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.15);
	display: inline-block;
}

/* -------------------------------------------------------------------------
   13. Promo banners
   ---------------------------------------------------------------------- */
.knf-promo__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
.knf-promo__card {
	min-height: 320px;
	border-radius: var(--knf-radius);
	display: flex;
	align-items: center;
	padding: 48px;
	background-size: cover;
	background-position: center;
}
.knf-promo__card--a {
	background-image: linear-gradient(120deg, #ece3d6, #d8c7b0);
}
.knf-promo__card--b {
	background-image: linear-gradient(120deg, #dde3e6, #c2ccd2);
}
.knf-promo__eyebrow {
	font-family: var(--knf-font-head);
	font-size: 14px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--knf-dark);
}
.knf-promo__title {
	font-size: 30px;
	margin: 8px 0 6px;
}
.knf-promo__text {
	color: var(--knf-text);
	margin: 0 0 22px;
}

/* -------------------------------------------------------------------------
   13b. Discover (2×2 product grid beside a tall promo banner)
   ---------------------------------------------------------------------- */
/* Keep the whole section compact — it's a 2-row grid + matching banner, which
   gets tall fast. Tighter than the default 64px section padding. */
.knf-discover {
	padding: 36px 0;
}
.knf-discover .knf-section__head {
	margin-bottom: 22px;
}
.knf-discover__subtitle {
	margin: 4px 0 0;
	max-width: 560px;
	color: var(--knf-muted);
	font-size: 16px;
}
.knf-discover__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	align-items: stretch;
}
.knf-discover__grid--promo-left {
	grid-template-columns: 1fr 1fr;
}
.knf-discover__grid--promo-left .knf-discover__products {
	order: 2;
}
.knf-discover__grid--promo-left .knf-discover__promo {
	order: 1;
}

/* Force the inner WooCommerce loop to 2 columns regardless of WC's default 4. */
.knf-discover__products ul.products {
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 18px 18px;
	height: 100%;
}
/* Landscape tiles (object-fit:cover by default = fills the frame, no white side
   bars) keep each row short, so the two rows — and the banner that matches their
   height (align-items:stretch) — make a compact, balanced 50/50 section. */
.knf-discover__products .knf-card__media {
	aspect-ratio: 3 / 4;
}
.knf-discover__empty {
	padding: 40px;
	text-align: center;
	color: var(--knf-muted);
	border: 1px dashed var(--knf-line);
	border-radius: var(--knf-radius);
}

/* Tall promo banner — the whole panel is the link. */
.knf-discover__promo {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 250px;
	padding: 48px 32px;
	border-radius: var(--knf-radius);
	overflow: hidden;
	text-align: center;
	color: #fff;
	background-size: cover;
	background-position: center;
}
.knf-discover__promo--placeholder {
	background-image: linear-gradient(120deg, #cdbfae, #a89684);
}
.knf-discover__promo::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.38) 100%);
	transition: background var(--knf-trans);
}
/* No hover colour shift: hold the banner-link's text tone so the global
   a:hover accent (pink) can't tint the inherited title/subtitle/eyebrow,
   and drop the extra overlay-darken on hover. */
.knf-discover__promo:hover { color: #fff; }
.knf-discover__promo--dark:hover { color: var(--knf-dark); }
.knf-discover__promo-body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	max-width: 380px;
}
.knf-discover__promo-eyebrow {
	font-family: var(--knf-font-head);
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.knf-discover__promo-title {
	font-family: var(--knf-font-head);
	font-weight: 600;
	font-size: clamp(26px, 2.6vw, 38px);
	line-height: 1.15;
	color: inherit;
}
.knf-discover__promo-text {
	font-size: 16px;
	opacity: 0.92;
}
.knf-discover__promo-btn {
	margin-top: 14px;
	pointer-events: none; /* the whole banner is already the link */
}
/* Button also keeps its resting look on hover (no accent/pink). */
.knf-discover__promo:hover .knf-discover__promo-btn {
	background: #fff;
	border-color: #fff;
	color: var(--knf-dark);
}
.knf-discover__promo--dark:hover .knf-discover__promo-btn {
	background: var(--knf-dark);
	border-color: var(--knf-dark);
	color: #fff;
}
/* Dark-text variant (for light/bright imagery). */
.knf-discover__promo--dark {
	color: var(--knf-dark);
}
.knf-discover__promo--dark::before {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.25) 100%);
}
.knf-discover__promo--dark .knf-discover__promo-btn {
	background: var(--knf-dark);
	color: #fff;
	border-color: var(--knf-dark);
}

@media (max-width: 980px) {
	.knf-discover__grid,
	.knf-discover__grid--promo-left {
		grid-template-columns: 1fr;
	}
	.knf-discover__grid--promo-left .knf-discover__products,
	.knf-discover__grid--promo-left .knf-discover__promo {
		order: 0;
	}
	.knf-discover__promo {
		min-height: 340px;
	}
}

/* -------------------------------------------------------------------------
   13c. The Process (numbered bespoke / tailoring steps)
   ---------------------------------------------------------------------- */
.knf-process {
	background: var(--knf-bg-soft);
}
.knf-process__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	padding-bottom: 20px;
}
.knf-process__title {
	margin: 0;
	font-size: clamp(28px, 4vw, 46px);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.knf-process__icon {
	flex: 0 0 auto;
	color: var(--knf-dark);
}
.knf-process__icon svg {
	display: block;
	width: 62px;
	height: 62px;
}
.knf-process__list {
	border-top: 1px solid var(--knf-line);
}
.knf-process__row {
	display: grid;
	grid-template-columns: minmax(240px, 1fr) minmax(0, 1.4fr);
	gap: 18px 48px;
	align-items: start;
	padding: 26px 0;
	border-bottom: 1px solid var(--knf-line);
}
.knf-process__main {
	display: flex;
	gap: 22px;
	align-items: baseline;
}
.knf-process__num {
	flex: 0 0 auto;
	font-family: var(--knf-font-head);
	font-size: 14px;
	letter-spacing: 0.05em;
	color: var(--knf-muted);
}
.knf-process__label {
	margin: 0;
	font-family: var(--knf-font-head);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--knf-dark);
	line-height: 1.4;
}
.knf-process__desc {
	margin: 0;
	max-width: 62ch;
	font-size: 16px;
	line-height: 1.7;
	color: var(--knf-text);
}
.knf-process__cta {
	padding-top: 24px;
}
.knf-process__cta-link {
	display: inline-block;
	font-family: var(--knf-font-head);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--knf-dark);
	border-bottom: 1px solid var(--knf-dark);
	padding-bottom: 4px;
	transition: color var(--knf-trans), border-color var(--knf-trans);
}
.knf-process__cta-link:hover {
	color: var(--knf-accent);
	border-color: var(--knf-accent);
}
@media (max-width: 768px) {
	.knf-process__row {
		grid-template-columns: 1fr;
		gap: 10px;
	}
	.knf-process__icon svg {
		width: 48px;
		height: 48px;
	}
}

/* -------------------------------------------------------------------------
   14. Newsletter
   ---------------------------------------------------------------------- */
.knf-news {
	background: var(--knf-bg-soft);
}
.knf-news__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 36px;
	flex-wrap: wrap;
}
.knf-news__title {
	margin: 0 0 6px;
	font-size: 28px;
}
.knf-news__text p {
	margin: 0;
	color: var(--knf-muted);
}
.knf-news__form {
	display: flex;
	gap: 10px;
	flex: 1;
	min-width: 280px;
	max-width: 520px;
}
.knf-news__form input {
	flex: 1;
	border: 1px solid var(--knf-line);
	background: #fff;
	border-radius: 50px;
	padding: 14px 22px;
	font-size: 17px;
	outline: none;
}
.knf-news__form input:focus {
	border-color: var(--knf-dark);
}

/* -------------------------------------------------------------------------
   15. Page header / breadcrumb
   ---------------------------------------------------------------------- */
.knf-page-header {
	background: var(--knf-bg-soft);
	padding: 44px 0;
	text-align: center;
	margin-bottom: 40px;
}
.knf-page-header--slim {
	padding: 18px 0;
	text-align: left;
	background: transparent;
	border-bottom: 1px solid var(--knf-line);
	margin-bottom: 30px;
}
.knf-page-header__title {
	font-size: clamp(28px, 4vw, 40px);
	margin: 0 0 10px;
}
.knf-breadcrumb {
	font-size: 15px;
	color: var(--knf-muted);
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
}
.knf-page-header--slim .knf-breadcrumb {
	justify-content: flex-start;
}
.knf-breadcrumb a {
	color: var(--knf-muted);
}
.knf-breadcrumb a:hover {
	color: var(--knf-accent);
}
.knf-bc-sep {
	color: var(--knf-line);
}
/* Breadcrumb shown OUTSIDE the page banner, top-left (above the banner). */
.knf-bc-bar {
	background: #fff;
	padding: 18px 0 6px;
}
.knf-bc-bar .knf-container {
	max-width: var(--knf-container, 1200px);
	margin: 0 auto;
	padding: 0 24px;
}
.knf-bc-bar .knf-breadcrumb {
	justify-content: flex-start;
	font-size: 14px;
	gap: 8px;
}
.knf-bc-bar--shop {
	padding-top: 22px;
}
/* Breadcrumb placed BELOW the banner (optional). */
.knf-bc-bar--after {
	padding: 14px 0;
	border-bottom: 1px solid var(--knf-line);
}

/* -------------------------------------------------------------------------
   15b. Search page (Modave-style: title banner, search box, results)
   ---------------------------------------------------------------------- */
.knf-search-title,
.knf-page-banner {
	background: var(--knf-bg-soft);
	background-size: cover;
	background-position: center;
	padding: 64px 0;
	text-align: center;
	margin-bottom: 40px;
}
.knf-search-title--image,
.knf-page-banner--image {
	position: relative;
	color: #fff;
}
.knf-search-title--image::before,
.knf-page-banner--image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.38);
}
.knf-search-title--image .knf-container,
.knf-page-banner--image .knf-container {
	position: relative;
	z-index: 1;
}
.knf-search-title__heading,
.knf-page-banner__heading {
	font-size: clamp(28px, 4vw, 44px);
	margin: 0 0 8px;
}
.knf-search-title__heading span {
	color: var(--knf-accent);
}
.knf-search-title--image .knf-search-title__heading,
.knf-search-title--image .knf-search-title__heading span,
.knf-page-banner--image .knf-page-banner__heading {
	color: #fff;
}
.knf-search-title .knf-breadcrumb,
.knf-page-banner .knf-breadcrumb {
	justify-content: center;
}

/* Centered search box + quick links */
.knf-search-box {
	margin: 0 0 48px;
}
.knf-search-box__form {
	display: flex;
	align-items: center;
	max-width: 560px;
	margin: 0 auto;
	border: 1px solid var(--knf-dark);
	border-radius: 999px;
	padding: 4px 4px 4px 22px;
	background: var(--knf-bg);
}
.knf-search-box__input {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: 0;
	background: transparent;
	font-family: var(--knf-font-body);
	font-size: 16px;
	color: var(--knf-text);
	padding: 12px 0;
}
.knf-search-box__btn {
	flex: none;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background: var(--knf-dark);
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background var(--knf-trans);
}
.knf-search-box__btn:hover {
	background: var(--knf-accent);
}
.knf-quicklink {
	margin-top: 18px;
	text-align: center;
	color: var(--knf-muted);
	font-size: 15px;
}
.knf-quicklink__label {
	font-weight: 600;
	color: var(--knf-dark);
	margin-right: 6px;
}
.knf-quicklink__link {
	color: var(--knf-text);
}
.knf-quicklink__link:hover {
	color: var(--knf-accent);
}
.knf-quicklink__sep {
	margin-right: 4px;
}

/* Results grid */
.knf-search-results {
	margin-bottom: 56px;
}
.knf-search-results__count {
	color: var(--knf-muted);
	margin: 0 0 22px;
}
@media (min-width: 1025px) {
	.knf-search-results[data-columns="3"] ul.products {
		grid-template-columns: repeat(3, 1fr);
	}
}
.knf-search-results__empty {
	text-align: center;
	padding: 40px 0 10px;
}
.knf-search-results__empty h2 {
	margin: 0 0 10px;
}
.knf-search-results__empty p {
	color: var(--knf-muted);
	margin: 0 auto;
	max-width: 480px;
}

/* Editor placeholder */
.knf-search-results--placeholder .knf-search-results__note {
	border: 2px dashed var(--knf-line);
	border-radius: var(--knf-radius);
	padding: 30px;
	text-align: center;
	color: var(--knf-muted);
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.knf-search-results--placeholder .knf-search-results__note strong {
	color: var(--knf-dark);
	font-size: 18px;
}

/* Non-product (post/page) result card */
.knf-search-post {
	display: flex;
	flex-direction: column;
}
.knf-search-post__thumb img {
	width: 100%;
	height: auto;
	border-radius: var(--knf-radius);
}
.knf-search-post__type {
	display: inline-block;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--knf-muted);
	margin: 12px 0 4px;
}
.knf-search-post__title {
	display: block;
	font-family: var(--knf-font-head);
	font-size: 18px;
	color: var(--knf-dark);
}
.knf-search-post__link:hover .knf-search-post__title {
	color: var(--knf-accent);
}
.knf-search-post__excerpt {
	color: var(--knf-muted);
	font-size: 15px;
	margin: 8px 0;
}
.knf-search-post__more {
	color: var(--knf-accent);
	font-weight: 600;
	font-size: 14px;
}

/* Search results pagination */
.knf-pagination {
	margin-top: 40px;
}
.knf-pagination ul {
	list-style: none;
	display: flex;
	justify-content: center;
	gap: 8px;
	padding: 0;
	margin: 0;
	flex-wrap: wrap;
}
.knf-pagination a,
.knf-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--knf-line);
	border-radius: var(--knf-radius-sm);
	color: var(--knf-text);
	text-decoration: none;
}
.knf-pagination a:hover,
.knf-pagination span.current {
	background: var(--knf-dark);
	border-color: var(--knf-dark);
	color: #fff;
}

/* -------------------------------------------------------------------------
   15c. Contact page (Modave-style: map + Information, Get In Touch form)
   ---------------------------------------------------------------------- */
.knf-contact-map {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 40px;
	align-items: stretch;
}
.knf-contact-map__map {
	border-radius: var(--knf-radius);
	overflow: hidden;
	background: var(--knf-bg-soft);
	min-height: var(--knf-map-h, 450px);
}
.knf-contact-map__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: var(--knf-map-h, 450px);
	border: 0;
}
.knf-contact-map__info {
	background: var(--knf-bg-soft);
	border: 1px solid var(--knf-line);
	border-radius: var(--knf-radius);
	padding: 34px 32px;
}
.knf-contact-info__title {
	font-family: var(--knf-font-head);
	font-size: 22px;
	color: var(--knf-dark);
	margin: 0 0 18px;
}
.knf-contact-info {
	list-style: none;
	margin: 0;
	padding: 0;
}
.knf-contact-info__row {
	padding: 16px 0;
	border-bottom: 1px solid var(--knf-line);
}
.knf-contact-info__row:first-child {
	padding-top: 0;
}
.knf-contact-info__row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}
.knf-contact-info__label {
	display: block;
	font-family: var(--knf-font-head);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--knf-dark);
	margin-bottom: 4px;
}
.knf-contact-info__value {
	font-size: 16px;
	line-height: 1.7;
	color: var(--knf-muted);
}
.knf-contact-info__value a {
	color: var(--knf-muted);
}
.knf-contact-info__value a:hover {
	color: var(--knf-accent);
}
.knf-contact-info__line {
	display: block;
}

/* Get In Touch form */
.knf-contact-form-section {
	background: var(--knf-bg-soft);
}
.knf-contact-form__sub {
	color: var(--knf-muted);
	font-size: 17px;
	margin: 0;
	max-width: 540px;
}
.knf-contact-form {
	max-width: 760px;
	margin: 0 auto;
}
.knf-contact-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.knf-contact-form__field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.knf-contact-form__field--full {
	grid-column: 1 / -1;
}
.knf-contact-form label {
	font-family: var(--knf-font-head);
	font-weight: 500;
	font-size: 15px;
	color: var(--knf-dark);
}
.knf-contact-form input[type="text"],
.knf-contact-form input[type="email"],
.knf-contact-form textarea {
	width: 100%;
	border: 1px solid var(--knf-line);
	border-radius: var(--knf-radius-sm);
	padding: 13px 16px;
	font-family: var(--knf-font-body);
	font-size: 16px;
	color: var(--knf-text);
	background: #fff;
	outline: none;
	transition: border-color var(--knf-trans);
}
.knf-contact-form input:focus,
.knf-contact-form textarea:focus {
	border-color: var(--knf-dark);
}
.knf-contact-form textarea {
	min-height: 160px;
	resize: vertical;
}
/* Honeypot — visually hidden but present for bots. */
.knf-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.knf-contact-form__actions {
	display: flex;
	align-items: center;
}
.knf-contact-form__submit[disabled] {
	opacity: 0.6;
	cursor: default;
	pointer-events: none;
}
.knf-contact-form__status {
	display: none;
	margin: 4px 0 0;
	font-size: 16px;
	padding: 14px 18px;
	border-radius: var(--knf-radius-sm);
	border-left: 3px solid transparent;
}
.knf-contact-form__status.is-sending,
.knf-contact-form__status.is-success,
.knf-contact-form__status.is-error {
	display: block;
}
.knf-contact-form__status.is-sending {
	color: var(--knf-muted);
	background: #fff;
	border-left-color: var(--knf-line);
}
.knf-contact-form__status.is-success {
	color: #1f5d3a;
	background: #eef7f1;
	border-left-color: #2f7d52;
}
.knf-contact-form__status.is-error {
	color: #8a2433;
	background: #fbeef0;
	border-left-color: var(--knf-accent);
}

/* -------------------------------------------------------------------------
   15d. Terms / legal page (Modave-style: sticky nav + sections)
   ---------------------------------------------------------------------- */
.knf-terms {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}
.knf-terms--no-nav {
	grid-template-columns: minmax(0, 1fr);
	max-width: 860px;
}
.knf-terms__nav {
	position: sticky;
	top: 100px;
}
.knf-terms__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border-left: 2px solid var(--knf-line);
}
.knf-terms__nav li {
	margin: 0;
}
.knf-terms__navlink {
	display: block;
	padding: 10px 0 10px 18px;
	margin-left: -2px;
	border-left: 2px solid transparent;
	color: var(--knf-muted);
	font-family: var(--knf-font-head);
	font-size: 15px;
	line-height: 1.45;
	transition: color var(--knf-trans), border-color var(--knf-trans);
}
.knf-terms__navlink:hover {
	color: var(--knf-dark);
}
.knf-terms__navlink.is-active {
	color: var(--knf-accent);
	border-left-color: var(--knf-accent);
	font-weight: 600;
}
.knf-terms__heading {
	font-family: var(--knf-font-head);
	font-size: clamp(24px, 3vw, 34px);
	color: var(--knf-dark);
	margin: 0 0 24px;
}
.knf-terms__item {
	padding-bottom: 28px;
	margin-bottom: 28px;
	border-bottom: 1px solid var(--knf-line);
	scroll-margin-top: 100px;
}
.knf-terms__item:last-child {
	border-bottom: 0;
	margin-bottom: 0;
}
.knf-terms__title {
	font-family: var(--knf-font-head);
	font-size: 20px;
	color: var(--knf-dark);
	margin: 0 0 12px;
}
.knf-terms__content {
	color: var(--knf-muted);
	font-size: 16px;
	line-height: 1.8;
}
.knf-terms__content p {
	margin: 0 0 14px;
}
.knf-terms__content p:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   16. Shop layout
   ---------------------------------------------------------------------- */
.knf-shop-wrap {
	max-width: 1520px;
	padding-top: 10px;
	padding-bottom: 70px;
	padding-left: clamp(20px, 4vw, 48px);
	padding-right: clamp(20px, 4vw, 48px);
}
/* Shop top promo banner (static) */
.knf-shop-promo {
	position: relative;
	border-radius: var(--knf-radius);
	background: var(--knf-bg-soft);
	padding: clamp(30px, 4.5vw, 56px);
	margin-bottom: 32px;
	min-height: 200px;
	display: flex;
	align-items: center;
	overflow: hidden;
}
.knf-shop-promo--image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.93) 0%, rgba(255, 255, 255, 0.62) 46%, rgba(255, 255, 255, 0) 78%);
}
.knf-shop-promo__content {
	position: relative;
	z-index: 1;
	max-width: 560px;
}
.knf-shop-promo__title {
	font-family: var(--knf-font-head);
	font-size: clamp(26px, 3.2vw, 40px);
	line-height: 1.15;
	color: var(--knf-dark);
	margin: 0 0 12px;
}
.knf-shop-promo__text {
	color: var(--knf-text);
	margin: 0 0 22px;
	max-width: 480px;
	font-size: 16px;
}
.knf-shop-grid.has-sidebar {
	display: grid;
	/* Modave layout: filter sidebar on the LEFT, products on the right. The
	   sidebar is last in the DOM (after <main>), so re-order with grid order. */
	grid-template-columns: 297px minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}
.knf-shop-grid.has-sidebar .knf-shop-sidebar { order: 1; }
.knf-shop-grid.has-sidebar .knf-shop-main { order: 2; }
.knf-shop-grid.has-sidebar .knf-shop-main ul.products {
	grid-template-columns: repeat(3, 1fr);
}
@media (min-width: 1400px) {
	.knf-shop-grid.has-sidebar .knf-shop-main ul.products {
		grid-template-columns: repeat(4, 1fr);
	}
}
.knf-shop-sidebar .widget {
	margin-bottom: 32px;
}

/* ---- Modave-style filter sidebar ---- */
.knf-shop-sidebar .knf-filter {
	margin-bottom: 28px;
	padding-bottom: 26px;
	border-bottom: 1px solid var(--knf-line);
}
.knf-shop-sidebar .knf-filter:last-child {
	border-bottom: 0;
	margin-bottom: 0;
}
.knf-filter__title {
	font-family: var(--knf-font-head);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--knf-dark);
	margin: 0 0 16px;
}
.knf-shop-sidebar ul.product-categories,
.knf-shop-sidebar .woocommerce-widget-layered-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.knf-shop-sidebar ul.product-categories li,
.knf-shop-sidebar .woocommerce-widget-layered-nav-list li {
	margin: 0 0 11px;
	padding: 0;
	font-size: 15px;
	overflow: hidden;
}
.knf-shop-sidebar ul.product-categories ul {
	list-style: none;
	margin: 10px 0 0 14px;
	padding: 0;
}
.knf-shop-sidebar ul.product-categories li a,
.knf-shop-sidebar .woocommerce-widget-layered-nav-list li a {
	color: var(--knf-text);
	transition: color var(--knf-trans);
}
.knf-shop-sidebar ul.product-categories li a:hover,
.knf-shop-sidebar .woocommerce-widget-layered-nav-list li a:hover,
.knf-shop-sidebar .woocommerce-widget-layered-nav-list li.chosen a {
	color: var(--knf-accent);
}
.knf-shop-sidebar .count {
	color: var(--knf-muted);
	font-size: 13px;
	float: right;
}
.knf-shop-sidebar .woocommerce-widget-layered-nav-list li.chosen a::before {
	content: "\00d7";
	margin-right: 6px;
	color: var(--knf-accent);
	font-weight: 700;
}
.knf-shop-sidebar .price_slider_amount {
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 14px;
	color: var(--knf-muted);
}
.knf-shop-sidebar .price_slider_amount .price_label {
	order: 1;
}
.knf-shop-sidebar .price_slider_amount .button {
	order: 2;
	align-self: flex-start;
	background: var(--knf-dark);
	color: #fff;
	border: 0;
	border-radius: 50px;
	padding: 10px 26px;
	font-family: var(--knf-font-head);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background var(--knf-trans);
}
.knf-shop-sidebar .price_slider_amount .button:hover {
	background: var(--knf-accent);
}
.knf-shop-sidebar .ui-slider {
	position: relative;
	margin: 6px 0 16px;
	height: 4px;
	background: var(--knf-line);
	border-radius: 4px;
	border: 0;
}
.knf-shop-sidebar .ui-slider .ui-slider-range {
	position: absolute;
	height: 100%;
	background: var(--knf-dark);
	border-radius: 4px;
}
.knf-shop-sidebar .ui-slider .ui-slider-handle {
	position: absolute;
	top: -6px;
	width: 15px;
	height: 15px;
	margin-left: -7px;
	border-radius: 50%;
	background: var(--knf-dark);
	border: 2px solid #fff;
	box-shadow: var(--knf-shadow-sm);
	cursor: pointer;
}

/* Sidebar as a bordered "Filter Products" card (premium, like the reference) */
.knf-shop-grid.has-sidebar .knf-shop-sidebar {
	border: 1px solid var(--knf-line);
	border-radius: var(--knf-radius);
	background: #fff;
	padding: 22px 20px;
}
.knf-filters__head {
	font-family: var(--knf-font-head);
	font-size: 17px;
	font-weight: 600;
	color: var(--knf-dark);
	padding-bottom: 16px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--knf-line);
}
/* Colour swatches (circles + label) */
.knf-filter--color .woocommerce-widget-layered-nav-list {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 12px;
}
.knf-filter--color .woocommerce-widget-layered-nav-list li {
	margin: 0;
	width: 44px;
	overflow: visible;
}
.knf-filter--color .knf-cswatch-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	text-align: center;
}
.knf-filter--color .knf-cswatch {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--c, #ccc);
	border: 1px solid rgba(0, 0, 0, 0.12);
	box-shadow: 0 0 0 2px transparent;
	transition: box-shadow var(--knf-trans);
}
.knf-filter--color .knf-cswatch__name {
	font-size: 11px;
	color: var(--knf-muted);
	line-height: 1.2;
}
.knf-filter--color li.chosen .knf-cswatch {
	box-shadow: 0 0 0 2px var(--knf-dark);
}
.knf-filter--color li.chosen .knf-cswatch__name {
	color: var(--knf-dark);
}
.knf-filter--color .count {
	display: none;
}
/* Size boxes */
.knf-filter--size .woocommerce-widget-layered-nav-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.knf-filter--size .woocommerce-widget-layered-nav-list li {
	margin: 0;
}
.knf-filter--size .woocommerce-widget-layered-nav-list li a {
	display: block;
	min-width: 42px;
	text-align: center;
	padding: 8px 12px;
	border: 1px solid var(--knf-line);
	border-radius: var(--knf-radius-sm);
	font-size: 13px;
	color: var(--knf-text);
	transition: all var(--knf-trans);
}
.knf-filter--size li.chosen a,
.knf-filter--size li a:hover {
	border-color: var(--knf-dark);
	background: var(--knf-dark);
	color: #fff;
}
.knf-filter--size .count {
	display: none;
}
/* Applied filter chips above the product grid */
.knf-active-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 22px;
}
.knf-active-filters__label {
	font-size: 14px;
	color: var(--knf-muted);
}
.knf-active-filters ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.knf-active-filters li {
	margin: 0;
}
.knf-active-filters li a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--knf-bg-soft);
	border: 1px solid var(--knf-line);
	border-radius: 50px;
	padding: 6px 14px;
	font-size: 12px;
	font-family: var(--knf-font-head);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--knf-dark);
	transition: border-color var(--knf-trans);
}
.knf-active-filters li a::before {
	content: "\00d7";
	color: var(--knf-accent);
	font-weight: 700;
	font-size: 15px;
}
.knf-active-filters li a:hover {
	border-color: var(--knf-dark);
}
.knf-shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 28px;
	flex-wrap: wrap;
}
.woocommerce .knf-shop-toolbar .woocommerce-result-count {
	margin: 0;
	color: var(--knf-muted);
	font-size: 16px;
}
.woocommerce .knf-shop-toolbar .woocommerce-ordering {
	margin: 0;
}
.woocommerce .woocommerce-ordering select,
.knf-shop-toolbar select {
	border: 1px solid var(--knf-line);
	border-radius: 50px;
	padding: 10px 18px;
	font-family: var(--knf-font-head);
	background: #fff;
}

.woocommerce nav.woocommerce-pagination {
	margin-top: 48px;
	text-align: center;
}
.woocommerce nav.woocommerce-pagination ul {
	border: none;
	display: inline-flex;
	gap: 8px;
}
.woocommerce nav.woocommerce-pagination ul li {
	border: none;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	border: 1px solid var(--knf-line);
	border-radius: 50%;
	width: 44px;
	height: 44px;
	line-height: 44px;
	padding: 0;
	font-family: var(--knf-font-head);
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
	background: var(--knf-dark);
	color: #fff;
	border-color: var(--knf-dark);
}

/* -------------------------------------------------------------------------
   17. Single product
   ---------------------------------------------------------------------- */
.single-product div.product {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px;
	margin-bottom: 60px;
}
.single-product div.product .woocommerce-product-gallery {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
}
.single-product div.product .summary {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
}
.single-product .woocommerce-product-gallery__image img {
	border-radius: var(--knf-radius);
}
.single-product .product_title {
	font-size: clamp(26px, 3.4vw, 38px);
	margin-bottom: 12px;
}
.single-product .summary .price {
	font-family: var(--knf-font-head);
	font-size: 30px;
	color: var(--knf-dark);
	margin-bottom: 18px;
}
.single-product .summary .price del {
	color: var(--knf-muted);
	font-size: 23px;
	margin-right: 10px;
}
.single-product .summary .price ins {
	text-decoration: none;
	color: var(--knf-accent);
}
.woocommerce div.product form.cart {
	margin-top: 20px;
}
.woocommerce div.product form.cart .quantity {
	margin-right: 12px;
}
.woocommerce .quantity input.qty {
	width: 72px;
	height: 50px;
	border: 1px solid var(--knf-line);
	border-radius: 50px;
	text-align: center;
	font-family: var(--knf-font-head);
}
.woocommerce div.product form.cart .button.single_add_to_cart_button {
	height: 50px;
	padding: 0 36px;
}

.knf-product-usp {
	list-style: none;
	margin: 24px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--knf-line);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.knf-product-usp li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	color: var(--knf-text);
}
.knf-product-usp svg {
	color: var(--knf-accent);
	flex: 0 0 auto;
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0 0 0;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--knf-line);
	display: flex;
	gap: 8px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	border: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: none;
	border-radius: 0;
	margin: 0;
	padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: var(--knf-font-head);
	font-weight: 500;
	font-size: 18px;
	padding: 14px 18px;
	color: var(--knf-muted);
	display: inline-block;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--knf-dark);
	box-shadow: inset 0 -2px 0 var(--knf-dark);
}

.related.products > h2,
.upsells.products > h2 {
	font-size: 28px;
	margin-bottom: 28px;
}

/* -------------------------------------------------------------------------
   18. Variation swatches (single product)
   ---------------------------------------------------------------------- */
.knf-select-hidden {
	position: absolute !important;
	opacity: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
	pointer-events: none;
}
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
	padding: 8px 0;
	vertical-align: middle;
}
.woocommerce div.product form.cart .variations label {
	font-family: var(--knf-font-head);
	font-weight: 500;
	margin: 0;
}
.knf-swatch-group {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.knf-swatch {
	border: 1px solid var(--knf-line);
	background: #fff;
	border-radius: 50px;
	transition: all var(--knf-trans);
	font-family: var(--knf-font-head);
}
.knf-swatch--text {
	min-width: 48px;
	padding: 9px 16px;
	font-size: 16px;
	color: var(--knf-text);
}
.knf-swatch--text:hover {
	border-color: var(--knf-dark);
}
.knf-swatch--text.is-active {
	background: var(--knf-dark);
	color: #fff;
	border-color: var(--knf-dark);
}
.knf-swatch--color {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	padding: 0;
	position: relative;
	background: var(--knf-swatch, #ddd);
	box-shadow: inset 0 0 0 2px #fff;
}
.knf-swatch--color.is-active {
	box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--knf-dark);
}
.knf-swatch.is-disabled {
	opacity: 0.35;
	cursor: not-allowed;
	text-decoration: line-through;
}

/* -------------------------------------------------------------------------
   19. Cart / checkout (light touch)
   ---------------------------------------------------------------------- */
.woocommerce-cart .knf-shop-wrap,
.woocommerce-checkout .knf-shop-wrap,
.woocommerce-account .knf-shop-wrap {
	padding-top: 30px;
}
.woocommerce table.shop_table {
	border-radius: var(--knf-radius);
	border-color: var(--knf-line);
}
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review {
	border: 1px solid var(--knf-line);
	border-radius: var(--knf-radius);
	padding: 24px;
}
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background: var(--knf-dark);
	border-radius: 50px;
}
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: var(--knf-accent);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection {
	border: 1px solid var(--knf-line);
	border-radius: var(--knf-radius-sm);
	padding: 10px 12px;
}
/* WooCommerce notices — Modave panel look (echoes .knf-contact-form__status). */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border: none;
	border-left: 3px solid var(--knf-line);
	border-radius: var(--knf-radius-sm);
	background: var(--knf-bg-soft);
	font-family: var(--knf-font-body);
	color: var(--knf-text);
	padding: 14px 18px 14px 20px;
}
.woocommerce-message {
	background: #eef7f1;
	border-left-color: #2f7d52;
	color: #1f5d3a;
}
.woocommerce-error {
	background: #fbeef0;
	border-left-color: var(--knf-accent);
	color: #8a2433;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	/* Drop WC core's absolutely-positioned icon-font glyph: the reduced left
	   padding of the flat panel look would otherwise collide with it, and the
	   coloured left border already signals the notice state. */
	content: none;
}
.woocommerce span.onsale {
	background: var(--knf-accent);
	border-radius: 50px;
}

/* -------------------------------------------------------------------------
   20. Blog
   ---------------------------------------------------------------------- */
.knf-blog-wrap {
	padding: 10px 0 70px;
}
.knf-blog-grid {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 44px;
}
.knf-blog-grid.no-sidebar {
	grid-template-columns: 1fr;
	max-width: 820px;
	margin: 0 auto;
}
/* Cart / checkout / account: full-width single column (no empty 300px sidebar slot). */
.knf-blog-grid.knf-wc-fullwidth {
	grid-template-columns: 1fr;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}
.knf-posts {
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
}
/* Blog index + archives: wide container + premium card grid */
body.blog .knf-blog-grid.no-sidebar,
body.archive .knf-blog-grid.no-sidebar { max-width: 1200px; }
body.blog .knf-posts,
body.archive .knf-posts { grid-template-columns: repeat(3, 1fr); }
.knf-post-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--knf-line);
	border-radius: 16px;
	overflow: hidden;
	padding: 0;
	transition: box-shadow .28s, transform .28s, border-color .28s;
}
.knf-post-card:hover { box-shadow: 0 20px 46px rgba(0, 0, 0, 0.09); transform: translateY(-4px); border-color: transparent; }
.knf-post-card__thumb {
	display: block;
	margin: 0;
	border-radius: 0;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--knf-bg-soft);
}
.knf-post-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.knf-post-card:hover .knf-post-card__thumb img { transform: scale(1.05); }
.knf-post-card__thumb--ph {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
	background: linear-gradient(135deg, var(--knf-bg-soft), var(--knf-bg-soft-2));
	color: var(--knf-accent);
}
.knf-post-card__thumb--ph svg { width: 54px; height: 54px; opacity: .85; }
.knf-post-card__ph-word { font-family: var(--knf-font-head); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--knf-muted); }
.knf-post-card__body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.knf-post-card__title { font-family: var(--knf-font-head); font-size: 19px; line-height: 1.32; margin: 0 0 10px; }
.knf-post-card__title a { color: var(--knf-dark); }
.knf-post-card__title a:hover { color: var(--knf-accent); }
.knf-post-card__excerpt { color: var(--knf-muted); font-size: 14.5px; line-height: 1.65; margin: 0 0 16px; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.knf-post-card__excerpt p { margin: 0; }
.knf-post-card__more { margin-top: auto; align-self: flex-start; font-family: var(--knf-font-head); font-weight: 500; font-size: 14px; color: var(--knf-accent); display: inline-flex; align-items: center; gap: 6px; transition: gap .2s, color .2s; }
.knf-post-card__more:hover { gap: 10px; color: var(--knf-dark); }
.entry-meta {
	font-size: 15px;
	color: var(--knf-muted);
	display: flex;
	gap: 14px;
	margin-bottom: 8px;
}
.knf-post-card .entry-meta { font-size: 13px; margin: 0 0 8px; gap: 12px; }
@media (max-width: 980px) { body.blog .knf-posts, body.archive .knf-posts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { body.blog .knf-posts, body.archive .knf-posts { grid-template-columns: 1fr; } }
.knf-entry-content {
	font-size: 18px;
	line-height: 1.85;
}
.knf-entry-content h2 { font-size: 28px; margin-top: 1.4em; }
.knf-entry-content h3 { font-size: 25px; margin-top: 1.2em; }
.knf-entry-content img { border-radius: var(--knf-radius); }
.knf-entry-content blockquote {
	border-left: 3px solid var(--knf-accent);
	margin: 1.4em 0;
	padding: 6px 0 6px 22px;
	font-size: 21px;
	font-family: var(--knf-font-head);
	color: var(--knf-dark);
}

.widget-title {
	font-size: 20px;
	margin-bottom: 16px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--knf-line);
}
.widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.widget ul li {
	padding: 7px 0;
	border-bottom: 1px solid var(--knf-line);
}
.widget ul li:last-child {
	border-bottom: none;
}

/* -------------------------------------------------------------------------
   21. Footer
   ---------------------------------------------------------------------- */
.knf-footer {
	background: var(--knf-dark);
	color: rgba(255, 255, 255, 0.66);
	margin-top: 60px;
}
.knf-footer a { color: rgba(255, 255, 255, 0.66); text-decoration: none; transition: color var(--knf-trans); }
.knf-footer a:hover { color: #fff; }

/* top: 4 columns + dashed stitch divider */
.knf-footer__top {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
	gap: 44px;
	padding: 52px 0 36px;
	border-bottom: 2px dashed rgba(255, 255, 255, 0.16);
}
.knf-footer__brand-col .knf-footer__brand { margin-bottom: 0; }
.knf-footer__brand-col .custom-logo,
.knf-footer__brand-col .knf-footer__brand img { max-height: 46px; width: auto; filter: brightness(0) invert(1); }
.knf-footer__brand-col .knf-logo-text { color: #fff; }
.knf-footer__tagline {
	margin: 18px 0 0;
	line-height: 1.75;
	max-width: 290px;
	color: rgba(255, 255, 255, 0.55);
	font-size: 14.5px;
}

/* link columns */
.knf-footer__title {
	font-family: var(--knf-font-head);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 18px;
}
.knf-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 11px;
}
.knf-footer__col li { font-size: 14.5px; }
.knf-footer__col li a { transition: color var(--knf-trans), padding-left var(--knf-trans); }
.knf-footer__col li a:hover { padding-left: 5px; color: #fff; }

/* contact column */
.knf-footer__contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.knf-footer__contact li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.66); }
.knf-footer__contact li a { color: rgba(255, 255, 255, 0.66); }
.knf-footer__contact li a:hover { color: #fff; }
.knf-footer__contact svg { color: #fff; flex: 0 0 auto; margin-top: 2px; }

/* bottom bar: copyright . social . payments */
.knf-footer__bottom-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
	padding: 20px 0;
}
.knf-footer__copy { margin: 0; font-size: 13.5px; color: rgba(255, 255, 255, 0.5); }
.knf-footer__social { display: flex; gap: 9px; }
.knf-footer__social a {
	width: 38px;
	height: 38px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 50%;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	transition: all var(--knf-trans);
}
.knf-footer__social a:hover { background: var(--knf-accent); border-color: var(--knf-accent); color: #fff; transform: translateY(-2px); }
.knf-footer__pay { display: flex; gap: 7px; flex-wrap: wrap; }
.knf-footer__pay span {
	font-size: 12px;
	font-family: var(--knf-font-head);
	font-weight: 500;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.7);
	padding: 5px 10px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 5px;
}
@media (max-width: 880px) {
	.knf-footer__top { grid-template-columns: 1fr 1fr; gap: 34px; }
}
@media (max-width: 560px) {
	.knf-footer__top { grid-template-columns: 1fr; }
	.knf-footer__bottom-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 880px) {
	.knf-footer__top { grid-template-columns: 1fr 1fr; gap: 34px; }
}
@media (max-width: 560px) {
	.knf-footer__top { grid-template-columns: 1fr; }
	.knf-footer__bottom-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 760px) {
	.knf-footer__row--top,
	.knf-footer__row--bottom { flex-direction: column; align-items: flex-start; gap: 16px; }
	.knf-footer__news-form { flex: 1 1 100%; width: 100%; }
	.knf-footer__links { justify-content: flex-start; gap: 10px 18px; }
}

/* -------------------------------------------------------------------------
   21b. Homepage sections — product tabs, banner, flash, testimonials, blog, IG
   ---------------------------------------------------------------------- */

/* Hero slider (full-bleed banners, shown whole) */
.knf-hero-slider {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(-50vw + 50%);
	overflow: hidden;
	background: var(--knf-bg-soft);
}
.knf-hero-slider__track {
	display: flex;
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.knf-hero-slide {
	flex: 0 0 100%;
	min-width: 100%;
	line-height: 0;
}
.knf-hero-slide a,
.knf-hero-slide img,
.knf-hero-slide video,
.knf-hero-slide__media {
	display: block;
	width: 100%;
}
.knf-hero-slide img,
.knf-hero-slide video {
	height: auto;
}
/* Cap the banner video height so it doesn't get too tall; fill full-width. */
.knf-hero-slide video {
	max-height: min(90vh, 900px);
	object-fit: cover;
	object-position: center;
}
.knf-hero-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.85);
	color: var(--knf-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all var(--knf-trans);
	z-index: 3;
}
.knf-hero-slider__arrow:hover {
	background: var(--knf-dark);
	color: #fff;
}
.knf-hero-slider__arrow--prev { left: 18px; }
.knf-hero-slider__arrow--next { right: 18px; }
.knf-hero-slider__dots {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 9px;
	z-index: 3;
}
.knf-hero-slider__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.6);
	transition: all var(--knf-trans);
}
.knf-hero-slider__dot.is-active {
	background: #fff;
	transform: scale(1.3);
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15);
}

/* Product tabs — centered underline-style nav with a full-width divider. */
.knf-ptabs__nav {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 4px 30px;
	flex-wrap: wrap;
	margin-top: 18px;
	border-bottom: 1px solid var(--knf-line);
}
.knf-ptabs__tab {
	position: relative;
	border: none;
	background: transparent;
	font-family: var(--knf-font-head);
	font-weight: 500;
	font-size: 16px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--knf-muted);
	padding: 10px 2px 16px;
	cursor: pointer;
	transition: color var(--knf-trans);
}
.knf-ptabs__tab::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--knf-dark);
	transform: scaleX(0);
	transition: transform var(--knf-trans);
}
.knf-ptabs__tab:hover {
	color: var(--knf-dark);
}
.knf-ptabs__tab.is-active {
	color: var(--knf-dark);
}
.knf-ptabs__tab.is-active::after {
	transform: scaleX(1);
}
.knf-ptabs__panel {
	display: none;
}
.knf-ptabs__panel.is-active {
	display: block;
	margin-top: 34px;
	animation: knf-ptabs-in 0.45s ease both;
}
@keyframes knf-ptabs-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}
.knf-ptabs__more {
	text-align: center;
	margin-top: 40px;
}
.knf-ptabs__empty {
	text-align: center;
	color: var(--knf-muted);
	padding: 40px 0;
}

/* Single promo banner — full bleed (edge-to-edge) */
.knf-banner {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(-50vw + 50%);
	padding: 0;
}
.knf-banner__inner {
	position: relative;
	min-height: 440px;
	border-radius: 0;
	background-size: cover;
	background-position: center;
	background-color: var(--knf-bg-soft-2);
	display: flex;
	align-items: center;
	padding: 80px 0;
	overflow: hidden;
}
.knf-banner__inner > .knf-container {
	width: 100%;
}
.knf-banner--center .knf-banner__content {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.knf-banner--right .knf-banner__content {
	margin-left: auto;
	text-align: right;
}
.knf-banner--light .knf-banner__inner::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.1));
}
.knf-banner--center.knf-banner--light .knf-banner__inner::after {
	background: rgba(0, 0, 0, 0.42);
}
.knf-banner__content {
	position: relative;
	z-index: 2;
	max-width: 480px;
}
.knf-banner--light .knf-banner__content {
	color: #fff;
}
.knf-banner--light .knf-banner__title {
	color: #fff;
}
.knf-banner__eyebrow {
	font-family: var(--knf-font-head);
	font-size: 15px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.knf-banner__title {
	font-size: clamp(28px, 4vw, 42px);
	margin: 10px 0 12px;
}
.knf-banner__text {
	margin: 0 0 22px;
	font-size: 18px;
}

/* Flash sale + countdown */
.knf-flash {
	background: var(--knf-dark);
	color: #fff;
}
.knf-flash__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	flex-wrap: wrap;
}
.knf-flash__eyebrow {
	font-family: var(--knf-font-head);
	font-size: 15px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--knf-accent);
}
.knf-flash__title {
	color: #fff;
	font-size: clamp(22px, 3vw, 32px);
	margin: 8px 0 0;
}
.knf-flash__count {
	display: flex;
	gap: 12px;
}
.knf-flash__unit {
	min-width: 64px;
	padding: 12px 8px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: var(--knf-radius-sm);
	text-align: center;
	font-family: var(--knf-font-head);
}
.knf-flash__unit span {
	display: block;
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
}
.knf-flash__unit small {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

/* Brand ticker (auto-scrolling logo marquee) */
.knf-brands {
	/* tighter than the default 64px section padding — a logo strip should be a
	   slim band, not a tall mostly-empty block */
	padding: 42px 0;
}
.knf-brands .knf-section__head {
	margin-bottom: 18px;
}
.knf-brands__viewport {
	position: relative;
	overflow: hidden;
	/* fade the logos out at both edges */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.knf-brands__track {
	display: flex;
	align-items: center;
	width: max-content;
	animation: knf-marquee 38s linear infinite;
	will-change: transform;
}
.knf-brands__track--slow {
	animation-duration: 55s;
}
.knf-brands__track--normal {
	animation-duration: 38s;
}
.knf-brands__track--fast {
	animation-duration: 22s;
}
.knf-brands__viewport:hover .knf-brands__track {
	animation-play-state: paused;
}
.knf-brands__item {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* symmetric per-item padding keeps the two copies identical, so the
	   translateX(-50%) loop lines up seamlessly (no flex `gap` on the track) */
	padding: 0 clamp(20px, 2.6vw, 40px);
	min-height: 64px;
	text-decoration: none;
}
/* NOTE: scoped under .knf-brands so it outranks Elementor's global
   `.elementor img { height:auto; max-width:100% }` (specificity 0,0,1,1),
   which would otherwise force every logo to its full natural size. */
.knf-brands .knf-brands__logo {
	/* force a uniform height so small source logos scale UP to a readable size
	   (max-height would only ever shrink large ones, leaving small logos tiny),
	   but keep it modest so several logos stay in view, like a real logo strip */
	
	width: auto;
	max-width: 170px;
	object-fit: contain;
	opacity: 0.85;
	transition: opacity var(--knf-trans), filter var(--knf-trans);
}
.knf-brands__item:hover .knf-brands__logo {
	opacity: 1;
}
.knf-brands__track.is-grayscale .knf-brands__logo {
	filter: grayscale(1);
	opacity: 0.6;
}
.knf-brands__track.is-grayscale .knf-brands__item:hover .knf-brands__logo {
	filter: grayscale(0);
	opacity: 1;
}
.knf-brands__name {
	font-family: var(--knf-font-head);
	font-weight: 600;
	font-size: 22px;
	letter-spacing: 0.04em;
	white-space: nowrap;
	color: var(--knf-dark);
	opacity: 0.8;
	transition: opacity var(--knf-trans), color var(--knf-trans);
}
.knf-brands__item:hover .knf-brands__name {
	opacity: 1;
	color: var(--knf-accent);
}
@keyframes knf-marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}
@media (prefers-reduced-motion: reduce) {
	.knf-brands__track {
		animation: none;
		width: 100%;
		flex-wrap: wrap;
		justify-content: center;
	}
	/* drop the duplicate copy when not animating */
	.knf-brands__item[aria-hidden="true"] {
		display: none;
	}
}

/* Testimonials */
.knf-tm__track {
	gap: 24px;
}
.knf-tm__card {
	flex: 0 0 360px;
	max-width: 360px;
	margin: 0;
	background: var(--knf-bg-soft);
	border-radius: var(--knf-radius);
	padding: 30px;
}
.knf-tm__stars {
	color: #f4b400;
	letter-spacing: 2px;
	margin-bottom: 14px;
}
.knf-tm__text {
	margin: 0 0 22px;
	font-size: 17px;
	line-height: 1.8;
	color: var(--knf-text);
}
.knf-tm__author {
	display: flex;
	align-items: center;
	gap: 12px;
}
.knf-tm__avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--knf-dark);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--knf-font-head);
	font-weight: 600;
}
.knf-tm__author strong {
	display: block;
	font-family: var(--knf-font-head);
}
.knf-tm__author small {
	color: var(--knf-muted);
	font-size: 15px;
}
.knf-tm__nav {
	justify-content: center;
	margin-top: 26px;
}

/* Home blog grid */
.knf-home-blog__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}
.knf-home-blog__thumb {
	display: block;
	border-radius: var(--knf-radius);
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: var(--knf-bg-soft);
}
.knf-home-blog__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}
.knf-home-blog__card:hover .knf-home-blog__thumb img {
	transform: scale(1.05);
}
.knf-home-blog__ph {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--knf-bg-soft-2);
}
.knf-home-blog__date {
	display: block;
	margin: 16px 0 8px;
	font-size: 15px;
	color: var(--knf-muted);
}
.knf-home-blog__title {
	font-size: 21px;
	margin: 0 0 12px;
	line-height: 1.35;
}
.knf-home-blog__more {
	font-family: var(--knf-font-head);
	font-size: 16px;
	font-weight: 500;
}

/* Instagram grid */
.knf-ig__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 8px;
	margin-top: 30px;
}
.knf-ig__item {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.knf-ig__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.knf-ig__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: rgba(23, 23, 23, 0.35);
	opacity: 0;
	transition: opacity var(--knf-trans);
}
.knf-ig__item:hover img {
	transform: scale(1.08);
}
.knf-ig__item:hover .knf-ig__overlay {
	opacity: 1;
}

/* -------------------------------------------------------------------------
   22. Back to top
   ---------------------------------------------------------------------- */
.knf-to-top {
	position: fixed;
	right: 24px;
	bottom: 88px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: none;
	background: var(--knf-dark);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: rotate(180deg) translateY(20px);
	opacity: 0;
	visibility: hidden;
	transition: all var(--knf-trans);
	z-index: 300;
}
.knf-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: rotate(180deg) translateY(0);
}
.knf-to-top:hover {
	background: var(--knf-accent);
}

/* Floating WhatsApp button */
.knf-whatsapp {
	position: fixed;
	right: 24px;
	bottom: 24px;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: #25d366;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
	z-index: 300;
	transition: transform var(--knf-trans), box-shadow var(--knf-trans);
	animation: knf-wa-pulse 2.6s ease-out infinite;
}
.knf-whatsapp:hover {
	transform: scale(1.08);
	color: #fff;
	box-shadow: 0 8px 26px rgba(37, 211, 102, 0.6);
}
.knf-whatsapp svg { width: 30px; height: 30px; }
@keyframes knf-wa-pulse {
	0%   { box-shadow: 0 6px 20px rgba(37,211,102,.45), 0 0 0 0 rgba(37,211,102,.5); }
	70%  { box-shadow: 0 6px 20px rgba(37,211,102,.45), 0 0 0 14px rgba(37,211,102,0); }
	100% { box-shadow: 0 6px 20px rgba(37,211,102,.45), 0 0 0 0 rgba(37,211,102,0); }
}
@media (prefers-reduced-motion: reduce) { .knf-whatsapp { animation: none; } }

/* -------------------------------------------------------------------------
   22b. Mobile bottom navigation bar (Modave-style)
   ---------------------------------------------------------------------- */
.knf-mobile-nav {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 350;
	background: #fff;
	border-top: 1px solid var(--knf-line);
	box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
	padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.knf-mobile-nav__item {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 4px 2px;
	color: var(--knf-dark);
	font-family: var(--knf-font-head);
	font-size: 13px;
	letter-spacing: 0.02em;
}
.knf-mobile-nav__item.is-active {
	color: var(--knf-accent);
	font-weight: 600;
}
/* Modave-style active tab: accent bar across the top of the active item. */
.knf-mobile-nav__item.is-active::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 28px;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: var(--knf-accent);
}
.knf-mobile-nav__icon {
	position: relative;
	display: inline-flex;
}
.knf-mobile-nav__label {
	line-height: 1;
}
.knf-mobile-nav__icon .knf-cart-count {
	top: -7px;
	right: -10px;
}

/* -------------------------------------------------------------------------
   23. Responsive
   ---------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.knf-footer__main-inner { grid-template-columns: 1fr; gap: 38px; }
	.woocommerce ul.products, ul.products { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
	.knf-primary-nav { display: none; }
	.knf-burger { display: inline-flex; }
	.knf-header__inner { justify-content: space-between; gap: 12px; min-height: auto; }
	.knf-header__brand { flex: 1; text-align: center; }
	.knf-header__brand img,
	.custom-logo { max-height: 30px; margin: 0 auto; }
	/* Slimmer icon buttons so the bar hugs the logo (less empty space). */
	.knf-action,
	.knf-burger { width: 38px; height: 38px; }
	/* mobile header keeps search + account; cart & wishlist live in the bottom bar */
	.knf-header__actions .knf-action--wishlist,
	.knf-header__actions .knf-action--cart { display: none; }
	.knf-hero__grid { grid-template-columns: 1fr; }
	.knf-features__grid { grid-template-columns: 1fr 1fr; }
	.single-product div.product { grid-template-columns: 1fr; gap: 30px; }
	.knf-shop-grid.has-sidebar { grid-template-columns: 1fr; }
	.knf-shop-grid.has-sidebar .knf-shop-sidebar { order: 1; }
	.knf-shop-grid.has-sidebar .knf-shop-main { order: 2; }
	.knf-shop-grid.has-sidebar .knf-shop-main ul.products { grid-template-columns: repeat(2, 1fr); }
	/* Collapse the filter sidebar into a tap-to-open panel (default closed) so it
	   doesn't push the product grid far down the page on small screens. */
	.knf-shop-grid.has-sidebar .knf-shop-sidebar { padding: 0; margin-bottom: 18px; }
	.knf-shop-sidebar .knf-filters__head {
		display: flex; align-items: center; justify-content: space-between; gap: 10px;
		margin: 0; padding: 15px 18px; border-bottom: 0;
		cursor: pointer; -webkit-user-select: none; user-select: none;
	}
	.knf-shop-sidebar .knf-filters__head::after {
		content: ""; flex: none; width: 9px; height: 9px; margin-right: 3px;
		border-right: 2px solid var(--knf-dark); border-bottom: 2px solid var(--knf-dark);
		transform: rotate(45deg); transition: transform 0.25s ease;
	}
	.knf-shop-sidebar.is-open .knf-filters__head { border-bottom: 1px solid var(--knf-line); }
	.knf-shop-sidebar.is-open .knf-filters__head::after { transform: rotate(-135deg); }
	.knf-shop-sidebar .knf-filter { display: none; margin: 0; padding: 18px 18px 0; border-bottom: 0; }
	.knf-shop-sidebar.is-open .knf-filter { display: block; }
	.knf-shop-sidebar.is-open .knf-filter + .knf-filter { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--knf-line); }
	.knf-shop-sidebar.is-open .knf-filter:last-child { padding-bottom: 20px; }
	.knf-blog-grid { grid-template-columns: 1fr; }
	.knf-promo__grid { grid-template-columns: 1fr; }
	.knf-contact-map { grid-template-columns: 1fr; gap: 24px; }
	.knf-contact-form__grid { grid-template-columns: 1fr; }
	.knf-terms { grid-template-columns: 1fr; gap: 28px; }
	.knf-terms__nav { position: static; top: auto; }

	/* new homepage sections on tablet */
	.knf-home-blog__grid { grid-template-columns: 1fr 1fr; }
	.knf-ig__grid { grid-template-columns: repeat(3, 1fr); }
	.knf-flash__inner { flex-direction: column; text-align: center; }
	.knf-banner__inner { padding: 56px 0; min-height: 300px; }

	/* show the fixed bottom navigation + keep content clear of it */
	.knf-mobile-nav { display: flex; }
	body { padding-bottom: 62px; }
	.knf-whatsapp { bottom: 74px; }
	.knf-to-top { bottom: 138px; }
}

@media (max-width: 600px) {
	.knf-section { padding: 44px 0; }
	.woocommerce ul.products, ul.products { grid-template-columns: repeat(2, 1fr); gap: 18px; }
	.knf-features__grid { grid-template-columns: 1fr; }
	.knf-footer__links { grid-template-columns: 1fr 1fr; }
	/* keep the top bar tidy on phones: phone + currency only */
	.knf-topbar__inner { justify-content: space-between; }
	.knf-topbar__left .knf-topbar__item:not(:first-child) { display: none; }
	.knf-topbar__left .knf-topbar__item + .knf-topbar__item::before { display: none; }
	.knf-topbar__right .knf-switch:first-child { display: none; }
	.knf-card__actions, .knf-card__icons { opacity: 1; transform: none; }
	.knf-hero__content { padding: 28px; }
	.knf-news__inner { flex-direction: column; align-items: flex-start; }
	.knf-home-blog__grid { grid-template-columns: 1fr; }
	.knf-tm__card { flex-basis: 82%; max-width: 82%; }
	.knf-flash__count { flex-wrap: wrap; justify-content: center; }
	.knf-contact-map__info { padding: 26px 22px; }
	.knf-contact-map__map iframe { min-height: 300px; }
	.knf-contact-form__actions { flex-direction: column; align-items: stretch; }
	.knf-contact-form__submit { width: 100%; }
}

/* -------------------------------------------------------------------------
   24. RTL
   ---------------------------------------------------------------------- */
.rtl .knf-topbar__right { flex-direction: row-reverse; }
.rtl .knf-card__body { text-align: right; }
.rtl .knf-hero__panel::after { background: linear-gradient(270deg, rgba(0,0,0,0.28), rgba(0,0,0,0)); }
.rtl .knf-card__price del { margin-right: 0; margin-left: 6px; }
.rtl .knf-entry-content blockquote { border-left: none; border-right: 3px solid var(--knf-accent); padding: 6px 22px 6px 0; }

/* -------------------------------------------------------------------------
   25. Misc: 404, search form, full-width, comments
   ---------------------------------------------------------------------- */
.knf-404 {
	padding: 90px 0;
	text-align: center;
}
.knf-404__code {
	font-family: var(--knf-font-head);
	font-size: clamp(80px, 16vw, 160px);
	font-weight: 700;
	line-height: 1;
	color: var(--knf-bg-soft-2);
}
.knf-404__title {
	font-size: 32px;
	margin: 8px 0 12px;
}
.knf-404__text {
	color: var(--knf-muted);
	max-width: 460px;
	margin: 0 auto 28px;
}
.knf-404__actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	margin-bottom: 30px;
	flex-wrap: wrap;
}
.knf-404__search {
	max-width: 420px;
	margin: 0 auto;
}

.knf-searchform {
	position: relative;
	display: flex;
}
.knf-searchform__input {
	flex: 1;
	border: 1px solid var(--knf-line);
	border-radius: 50px;
	padding: 12px 50px 12px 20px;
	font-size: 17px;
	outline: none;
	width: 100%;
}
.knf-searchform__input:focus {
	border-color: var(--knf-dark);
}
.knf-searchform__btn {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border: none;
	background: transparent;
	color: var(--knf-dark);
	display: flex;
	align-items: center;
	justify-content: center;
}

.knf-fullwidth {
	min-height: 40vh;
}

.knf-comments {
	margin-top: 50px;
	padding-top: 30px;
	border-top: 1px solid var(--knf-line);
}
.knf-comments .comments-title {
	font-size: 27px;
	margin-bottom: 24px;
}
.knf-comments .comment-list {
	list-style: none;
	margin: 0 0 30px;
	padding: 0;
}
.knf-comments .comment-list ol.children {
	list-style: none;
	padding-left: 28px;
}
.knf-comments .comment-body {
	padding: 18px 0;
	border-bottom: 1px solid var(--knf-line);
}
.knf-comments .comment-author img {
	border-radius: 50%;
	margin-right: 12px;
}
.knf-comments .comment-respond {
	background: var(--knf-bg-soft);
	border-radius: var(--knf-radius);
	padding: 28px;
}
.knf-comments .comment-form input[type="text"],
.knf-comments .comment-form input[type="email"],
.knf-comments .comment-form input[type="url"],
.knf-comments .comment-form textarea {
	width: 100%;
	border: 1px solid var(--knf-line);
	border-radius: var(--knf-radius-sm);
	padding: 12px 14px;
	font-family: inherit;
}

/* Generic post navigation */
.post-navigation,
.posts-navigation {
	margin: 40px 0;
	padding-top: 24px;
	border-top: 1px solid var(--knf-line);
	display: flex;
	justify-content: space-between;
	gap: 20px;
	font-family: var(--knf-font-head);
}
.page-links {
	margin-top: 20px;
	font-family: var(--knf-font-head);
}
.nav-links {
	display: flex;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 40px;
}
.nav-links .page-numbers {
	min-width: 44px;
	height: 44px;
	line-height: 44px;
	text-align: center;
	border: 1px solid var(--knf-line);
	border-radius: 50%;
	font-family: var(--knf-font-head);
	padding: 0 6px;
}
.nav-links .page-numbers.current,
.nav-links .page-numbers:hover {
	background: var(--knf-dark);
	color: #fff;
	border-color: var(--knf-dark);
}

/* ===== Appointment page — Contact Form 7 ===== */
.knf-appt-form{max-width:760px;margin:0 auto}
.knf-appt-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.knf-appt-f{margin:0 0 18px}
.knf-appt-f label{display:block;font-family:var(--knf-font-head);font-size:13px;font-weight:500;color:var(--knf-dark);margin-bottom:7px}
.knf-appt-f label span{color:var(--knf-accent)}
.knf-appt-form input[type=text],
.knf-appt-form input[type=email],
.knf-appt-form input[type=tel],
.knf-appt-form input[type=date],
.knf-appt-form select,
.knf-appt-form textarea{width:100%;padding:12px 14px;border:1px solid var(--knf-line);border-radius:var(--knf-radius-sm,8px);background:#fff;font-family:var(--knf-font-body);font-size:14px;color:var(--knf-dark);transition:border-color .2s}
.knf-appt-form input:focus,.knf-appt-form select:focus,.knf-appt-form textarea:focus{outline:none;border-color:var(--knf-accent)}
.knf-appt-form textarea{resize:vertical;min-height:110px}
.knf-appt-form .wpcf7-form-control-wrap{display:block}
.knf-appt-submit{margin-top:8px;text-align:center}
.knf-appt-form input[type=submit]{-webkit-appearance:none;appearance:none;cursor:pointer;background:var(--knf-dark);color:#fff;border:0;font-family:var(--knf-font-head);font-weight:500;letter-spacing:.02em;padding:14px 44px;border-radius:50px;font-size:15px;transition:background .2s,transform .2s}
.knf-appt-form input[type=submit]:hover{background:var(--knf-accent);transform:translateY(-2px)}
.knf-appt-form .wpcf7-spinner{margin:0 0 0 12px}
.knf-appt-form .wpcf7-not-valid-tip{color:var(--knf-accent);font-size:12px;margin-top:5px}
.knf-appt-form .wpcf7-not-valid{border-color:var(--knf-accent)!important}
.wpcf7-response-output{max-width:760px;margin:20px auto 0!important;border-radius:var(--knf-radius-sm,8px);font-size:14px;padding:12px 16px!important}
.wpcf7 form.invalid .wpcf7-response-output,.wpcf7 form.unaccepted .wpcf7-response-output{border-color:var(--knf-accent);background:#fdeef0;color:var(--knf-accent)}
.wpcf7 form.sent .wpcf7-response-output{border-color:#1d9e74;background:#eafbf3;color:#1d7a59}
@media(max-width:640px){.knf-appt-row{grid-template-columns:1fr}}
/* ===== Appointment — stitch checkbox grid + store location ===== */
.knf-appt-checks{display:block;margin-top:4px}
.knf-appt-checks .wpcf7-checkbox{display:grid;grid-template-columns:repeat(3,1fr);gap:11px 18px}
.knf-appt-checks .wpcf7-list-item{margin:0}
.knf-appt-checks .wpcf7-list-item label{display:flex;align-items:center;gap:9px;font-family:var(--knf-font-body);font-size:13.5px;color:var(--knf-dark);cursor:pointer;font-weight:400}
.knf-appt-checks input[type=checkbox]{width:16px;height:16px;accent-color:var(--knf-accent);margin:0;flex:0 0 auto}
@media(max-width:640px){.knf-appt-checks .wpcf7-checkbox{grid-template-columns:1fr 1fr}}

.knf-appt-store{position:relative;max-width:763px;margin:52px auto 0;border:1px solid var(--knf-line);border-radius:var(--knf-radius,12px);padding:44px 34px 34px;text-align:center;background:#fff;box-shadow:0 16px 44px rgba(0,0,0,.05);overflow:hidden}
.knf-appt-store::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--knf-accent,#1c207a),#4a4fc0)}
.knf-appt-store h3{font-family:var(--knf-font-head);font-size:22px;letter-spacing:.06em;text-transform:uppercase;color:var(--knf-dark);margin:0 0 16px}
.knf-appt-store h3::before{content:"";display:block;width:30px;height:30px;margin:0 auto 14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24' fill='none' stroke='%231c207a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center/30px no-repeat}
.knf-appt-store p{margin:6px 0;font-size:14.5px;color:#555;line-height:1.6}
.knf-appt-store__addr{color:var(--knf-dark);font-family:var(--knf-font-head);font-size:16px}
.knf-appt-store a{color:#555;text-decoration:none}
.knf-appt-store a:hover{color:var(--knf-accent)}
.knf-appt-store__social{display:flex;justify-content:center;gap:14px;margin-top:22px}
.knf-appt-store__social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--knf-line);border-radius:50%;color:var(--knf-dark);background:#fff;transition:background .2s,color .2s,border-color .2s,transform .2s}
.knf-appt-store__social a:hover{background:var(--knf-accent);color:#fff;border-color:var(--knf-accent);transform:translateY(-2px)}
.knf-appt-store__social svg{width:17px;height:17px}

/* ===== Book an Appointment page — compact spacing + aligned blocks =====
   This page is a full-width Elementor template (not body.home), so it never
   got the homepage's container-padding reset — Elementor container padding was
   stacking on top of each section's own padding, making big empty gaps. Kill
   the container vertical padding, give every block one tidy compact rhythm, and
   line them all up to the booking card's width. */
body.knf-appt-page .e-con{padding-top:0!important;padding-bottom:0!important}
body.knf-appt-page .knf-book{margin-top:clamp(16px,2.4vw,30px)!important;margin-bottom:clamp(16px,2.4vw,30px)!important}
body.knf-appt-page .knf-why-sec,
body.knf-appt-page .knf-home-products,
body.knf-appt-page .knf-section{padding-top:clamp(22px,3vw,40px)!important;padding-bottom:clamp(22px,3vw,40px)!important}
/* Wider content blocks, roughly aligned down the page (the card has no side
   padding, so its container is set a touch narrower than the products grid). */
body.knf-appt-page .knf-why-sec>.knf-container{max-width:1240px}
body.knf-appt-page .knf-home-products>.knf-container{max-width:1260px}
body.knf-appt-page .knf-book{max-width:1240px}