/* =========================================================================
   Krieg — design system and shared UI
   White-dominant, editorial, confident. Accent used sparingly for action.

   The scale below is deliberately soft-cornered and generously spaced: this
   is a hobby shop whose products are photographed against dirt and tarmac,
   and a hard 4px-cornered grid fought those images rather than framing them.
   Every surface in the theme pulls its radius, shadow and spacing from here,
   so the whole site moves together.
   ========================================================================= */

/* -------------------------------------------------------------- 1. Tokens */

:root {
	/* Surfaces */
	--k-white: #ffffff;
	--k-paper: #fafaf9;
	--k-surface: #f4f4f2;
	--k-surface-2: #e9e9e5;

	/* Ink */
	--k-ink: #0e0e11;
	--k-ink-soft: #3f3f46;
	--k-muted: #71717a;
	--k-on-dark: #f6f6f5;
	--k-on-dark-soft: rgba(246, 246, 245, 0.68);

	/* Lines */
	--k-line: #e7e7e3;
	--k-line-strong: #d4d4ce;

	/* Accent — taken from the Krieg shield mark */
	--k-accent: #d8232a;
	--k-accent-dark: #a81b21;
	--k-accent-light: #f0464d;
	--k-accent-soft: #fef3f3;
	--k-accent-ring: rgba(216, 35, 42, 0.22);

	/* Status */
	--k-ok: #15803d;
	--k-ok-soft: #ecfdf3;
	--k-warn: #b45309;
	--k-warn-soft: #fffaeb;
	--k-wa: #25d366;
	--k-wa-dark: #1dad55;

	/* Gradients */
	--k-grad-accent: linear-gradient(135deg, #e8313a 0%, #c01b22 100%);
	--k-grad-ink: linear-gradient(140deg, #1d1d23 0%, #0b0b0e 100%);
	--k-grad-sheen: linear-gradient(
		100deg,
		rgba(255, 255, 255, 0) 30%,
		rgba(255, 255, 255, 0.45) 50%,
		rgba(255, 255, 255, 0) 70%
	);

	/* Type */
	--k-font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--k-font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;

	--k-t-display-1: clamp(2.5rem, 1.4rem + 4.4vw, 5rem);
	--k-t-display-2: clamp(1.9rem, 1.25rem + 2.4vw, 3rem);
	--k-t-h3: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem);
	--k-t-body: 1rem;
	--k-t-sm: 0.875rem;
	--k-t-xs: 0.78125rem;
	--k-t-eyebrow: 0.6875rem;

	/* Space — 4px base */
	--k-1: 4px;
	--k-2: 8px;
	--k-3: 12px;
	--k-4: 16px;
	--k-5: 24px;
	--k-6: 32px;
	--k-7: 48px;
	--k-8: 64px;
	--k-9: 96px;
	--k-10: 128px;

	/* Structure */
	--k-container: 1600px;
	--k-container-wide: 1760px;
	--k-gutter: 24px;
	--k-radius-sm: 8px;
	--k-radius: 14px;
	--k-radius-lg: 22px;
	--k-radius-xl: 30px;
	--k-radius-pill: 999px;

	/* Motion */
	--k-ease: cubic-bezier(0.22, 0.61, 0.24, 1);
	--k-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--k-fast: 170ms;
	--k-base: 280ms;
	--k-slow: 520ms;

	/* Elevation — soft, layered, never muddy */
	--k-shadow: 0 1px 2px rgba(14, 14, 17, 0.04), 0 2px 8px -4px rgba(14, 14, 17, 0.06);
	--k-shadow-md: 0 2px 6px -2px rgba(14, 14, 17, 0.06), 0 12px 28px -12px rgba(14, 14, 17, 0.14);
	--k-shadow-lift: 0 4px 10px -4px rgba(14, 14, 17, 0.08), 0 24px 48px -20px rgba(14, 14, 17, 0.22);
	--k-shadow-pop: 0 6px 14px -6px rgba(14, 14, 17, 0.1), 0 36px 64px -28px rgba(14, 14, 17, 0.3);
	--k-shadow-accent: 0 8px 24px -10px rgba(216, 35, 42, 0.55);

	--k-header-h: 92px;
	--k-header-h-stuck: 72px;
}

@media (max-width: 1023px) {
	:root {
		--k-header-h: 76px;
		--k-header-h-stuck: 68px;
	}
}

@media (max-width: 767px) {
	:root {
		--k-gutter: 18px;
		--k-header-h: 68px;
		--k-header-h-stuck: 62px;
	}
}

/* --------------------------------------------------------------- 2. Reset */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--k-white);
	color: var(--k-ink);
	font-family: var(--k-font-body);
	font-size: var(--k-t-body);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img,
svg,
video,
iframe {
	max-width: 100%;
	height: auto;
	display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--k-font-display);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0 0 var(--k-4);
	color: var(--k-ink);
	text-wrap: balance;
}

p {
	margin: 0 0 var(--k-4);
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: inherit;
	text-decoration-color: var(--k-line-strong);
	text-underline-offset: 3px;
	transition: color var(--k-fast) var(--k-ease);
}

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

ul,
ol {
	margin: 0 0 var(--k-4);
	padding-left: 1.25em;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

hr {
	border: 0;
	border-top: 1px solid var(--k-line);
	margin: var(--k-7) 0;
}

table {
	width: 100%;
	border-collapse: collapse;
}

:focus-visible {
	outline: 2px solid var(--k-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

::selection {
	background: var(--k-ink);
	color: var(--k-white);
}

/* ------------------------------------------------------------ 3. Utilities */

.k-container {
	width: 100%;
	max-width: var(--k-container);
	margin-inline: auto;
	padding-inline: var(--k-gutter);
}

.k-container--wide {
	max-width: var(--k-container-wide);
}

.k-container--narrow {
	max-width: 760px;
}

.k-section {
	padding-block: clamp(var(--k-7), 5vw, var(--k-9));
}

.k-section--tight {
	padding-block: clamp(var(--k-6), 3.5vw, var(--k-7));
}

.k-section--paper {
	background: var(--k-paper);
}

.k-section--surface {
	background: var(--k-surface);
}

.k-section--dark {
	background: var(--k-ink);
	color: var(--k-on-dark);
}

.k-section--dark h1,
.k-section--dark h2,
.k-section--dark h3 {
	color: var(--k-on-dark);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.k-skip {
	position: absolute;
	left: var(--k-4);
	top: -100px;
	z-index: 999;
	background: var(--k-ink);
	color: var(--k-white);
	padding: var(--k-3) var(--k-5);
	border-radius: var(--k-radius);
	transition: top var(--k-fast) var(--k-ease);
}

.k-skip:focus {
	top: var(--k-4);
	color: var(--k-white);
}

/* ---------------------------------------------------------- 4. Typography */

.k-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--k-2);
	font-family: var(--k-font-display);
	font-size: var(--k-t-eyebrow);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--k-accent);
	margin: 0 0 var(--k-3);
}

/* A short rule before the label, so an eyebrow reads as a marker rather than
   as a very small heading. */
.k-eyebrow::before {
	content: "";
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	flex: none;
}

.k-sechead--center .k-eyebrow::before {
	display: none;
}

.k-section--dark .k-eyebrow {
	color: #ff7b80;
}

.k-sechead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--k-5);
	margin-bottom: clamp(var(--k-6), 3.5vw, var(--k-8));
}

.k-sechead--center {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.k-sechead__title {
	font-size: var(--k-t-display-2);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.025em;
	line-height: 1.02;
	margin: 0;
}

.k-sechead__lede {
	margin: var(--k-4) 0 0;
	color: var(--k-muted);
	max-width: 56ch;
	font-size: 1rem;
	line-height: 1.6;
}

.k-sechead--center .k-sechead__lede {
	margin-inline: auto;
}

.k-section--dark .k-sechead__lede {
	color: var(--k-on-dark-soft);
}

.k-textlink {
	display: inline-flex;
	align-items: center;
	gap: var(--k-2);
	font-family: var(--k-font-display);
	font-size: var(--k-t-sm);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	white-space: nowrap;
	padding: 11px var(--k-5);
	border: 1px solid var(--k-line-strong);
	border-radius: var(--k-radius-pill);
	transition: background var(--k-fast) var(--k-ease), color var(--k-fast) var(--k-ease),
		border-color var(--k-fast) var(--k-ease), box-shadow var(--k-base) var(--k-ease);
}

.k-textlink:hover {
	background: var(--k-ink);
	border-color: var(--k-ink);
	color: var(--k-white);
	box-shadow: var(--k-shadow-md);
}

.k-section--dark .k-textlink {
	border-color: rgba(255, 255, 255, 0.3);
	color: var(--k-on-dark);
}

.k-section--dark .k-textlink:hover {
	background: var(--k-white);
	border-color: var(--k-white);
	color: var(--k-ink);
}

.k-textlink .k-icon {
	transition: transform var(--k-base) var(--k-ease);
}

.k-textlink:hover .k-icon {
	transform: translateX(3px);
}

/* ------------------------------------------------------------- 5. Buttons */

.k-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--k-2);
	font-family: var(--k-font-display);
	font-size: var(--k-t-sm);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 16px var(--k-6);
	border: 1px solid transparent;
	border-radius: var(--k-radius);
	background: var(--k-grad-ink);
	color: var(--k-white);
	line-height: 1.2;
	/* An explicit box per size. Without it the height follows the tallest
	   flex child, so a button with an icon stood 3px taller than its text-only
	   neighbour and rows of buttons never lined up. */
	min-height: 52px;
	overflow: hidden;
	isolation: isolate;
	box-shadow: var(--k-shadow);
	transition: background var(--k-fast) var(--k-ease), color var(--k-fast) var(--k-ease),
		border-color var(--k-fast) var(--k-ease), transform var(--k-base) var(--k-spring),
		box-shadow var(--k-base) var(--k-ease);
}

/* Light sweeps across the face on hover. Pure decoration, no layout cost. */
.k-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--k-grad-sheen);
	opacity: 0;
	transform: translateX(-100%);
	transition: transform var(--k-slow) var(--k-ease), opacity var(--k-fast) var(--k-ease);
}

.k-btn:hover::after {
	opacity: 0.5;
	transform: translateX(100%);
}

.k-btn:hover {
	color: var(--k-white);
	transform: translateY(-2px);
	box-shadow: var(--k-shadow-md);
}

.k-btn:active {
	transform: translateY(0);
	box-shadow: var(--k-shadow);
}

.k-btn--accent {
	background: var(--k-grad-accent);
	border-color: transparent;
	box-shadow: 0 4px 14px -6px rgba(216, 35, 42, 0.5);
}

.k-btn--accent:hover {
	box-shadow: var(--k-shadow-accent);
}

.k-btn--ghost {
	background: var(--k-white);
	color: var(--k-ink);
	border-color: var(--k-line-strong);
	box-shadow: none;
}

.k-btn--ghost:hover {
	background: var(--k-ink);
	color: var(--k-white);
	border-color: var(--k-ink);
}

.k-btn--on-dark {
	background: rgba(255, 255, 255, 0.07);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: var(--k-on-dark);
	border-color: rgba(255, 255, 255, 0.3);
	box-shadow: none;
}

.k-btn--on-dark:hover {
	background: var(--k-white);
	color: var(--k-ink);
	border-color: var(--k-white);
}

/* White text on the old #2ee16f gave a contrast ratio of about 1.6:1 -
   unreadable - which is why this button carried near-black text instead. The
   green is darkened enough to carry white properly: 4.9:1 at the top of the
   gradient and 7.2:1 at the bottom, both past AA for body text, while still
   reading unmistakably as WhatsApp. */
.k-btn--wa {
	background: linear-gradient(135deg, #13833f 0%, #0b6630 100%);
	border-color: transparent;
	color: var(--k-white);
	box-shadow: 0 4px 14px -6px rgba(11, 102, 48, 0.55);
}

.k-btn--wa:hover {
	color: var(--k-white);
	box-shadow: 0 10px 26px -10px rgba(11, 102, 48, 0.7);
}

.k-btn--sm {
	padding: 10px var(--k-4);
	min-height: 40px;
	font-size: var(--k-t-xs);
	border-radius: var(--k-radius-sm);
}

.k-btn--lg {
	padding: 18px var(--k-7);
	min-height: 58px;
	font-size: 0.9375rem;
}

.k-btn--block {
	width: 100%;
}

.k-btn[disabled],
.k-btn.is-loading {
	opacity: 0.55;
	pointer-events: none;
	box-shadow: none;
}

/* --------------------------------------------------------------- 6. Forms */

.k-field {
	display: block;
	width: 100%;
	padding: 14px var(--k-4);
	background: var(--k-paper);
	border: 1px solid var(--k-line-strong);
	border-radius: var(--k-radius);
	font-size: var(--k-t-sm);
	transition: border-color var(--k-fast) var(--k-ease), box-shadow var(--k-fast) var(--k-ease),
		background var(--k-fast) var(--k-ease);
}

.k-field::placeholder {
	color: var(--k-muted);
}

.k-field:focus {
	outline: none;
	background: var(--k-white);
	border-color: var(--k-accent);
	box-shadow: 0 0 0 4px var(--k-accent-ring);
}

.k-label {
	display: block;
	font-family: var(--k-font-display);
	font-size: var(--k-t-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--k-ink-soft);
	margin-bottom: var(--k-2);
}

.k-select {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.k-select__input {
	appearance: none;
	-webkit-appearance: none;
	padding: 11px 40px 11px var(--k-4);
	background: var(--k-white);
	border: 1px solid var(--k-line-strong);
	border-radius: var(--k-radius);
	font-size: var(--k-t-sm);
	cursor: pointer;
}

.k-select__input:focus {
	outline: none;
	border-color: var(--k-ink);
}

.k-select__caret {
	position: absolute;
	right: var(--k-3);
	transform: rotate(90deg);
	pointer-events: none;
	color: var(--k-muted);
}

/* --------------------------------------------------------------- 7. Badges */

.k-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--k-font-display);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	padding: 6px 11px;
	border-radius: var(--k-radius-pill);
	background: rgba(14, 14, 17, 0.9);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--k-white);
	line-height: 1.3;
	box-shadow: 0 2px 8px -3px rgba(14, 14, 17, 0.5);
}

.k-badge--sale {
	background: var(--k-grad-accent);
	box-shadow: 0 2px 10px -3px rgba(216, 35, 42, 0.8);
}

.k-badge--out {
	background: rgba(255, 255, 255, 0.92);
	color: var(--k-ink-soft);
	box-shadow: var(--k-shadow);
}

.k-badge--new {
	background: rgba(255, 255, 255, 0.92);
	color: var(--k-ink);
	box-shadow: var(--k-shadow);
}

/* Savings flag — the single strongest number on a card for this catalogue,
   where every product carries a real regular price above its sale price. */
.k-badge--save {
	background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
	color: var(--k-white);
	box-shadow: 0 2px 10px -3px rgba(21, 128, 61, 0.7);
}

/* ------------------------------------------------- 8. Announcement + header */

.k-announce {
	position: relative;
	background: var(--k-grad-ink);
	color: var(--k-on-dark);
	font-size: var(--k-t-xs);
	text-align: center;
	padding: 10px var(--k-gutter);
	overflow: hidden;
}

/* A slow sheen across the bar. It reads as motion without animating layout. */
.k-announce::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--k-grad-sheen);
	opacity: 0.12;
	transform: translateX(-100%);
	animation: k-sheen 7s var(--k-ease) infinite;
	pointer-events: none;
}

@keyframes k-sheen {
	0%,
	60% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(100%);
	}
}

.k-announce__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--k-3);
	flex-wrap: wrap;
}

.k-announce__label {
	font-family: var(--k-font-display);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	background: var(--k-grad-accent);
	color: var(--k-white);
	padding: 4px 10px;
	border-radius: var(--k-radius-pill);
	line-height: 1.4;
	box-shadow: 0 2px 10px -3px rgba(216, 35, 42, 0.7);
}

.k-announce a {
	display: inline-block;
	padding-block: 3px;
	color: var(--k-white);
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.45);
	text-underline-offset: 3px;
	font-weight: 600;
}

.k-announce a:hover {
	color: var(--k-white);
	text-decoration-color: var(--k-white);
}

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

.k-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.86);
	-webkit-backdrop-filter: saturate(180%) blur(18px);
	backdrop-filter: saturate(180%) blur(18px);
	border-bottom: 1px solid var(--k-line);
	transition: box-shadow var(--k-base) var(--k-ease), background var(--k-base) var(--k-ease);
}

/* Browsers without backdrop-filter get a solid bar rather than a see-through one. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.k-header {
		background: var(--k-white);
	}
}

.k-header.is-stuck {
	background: rgba(255, 255, 255, 0.94);
	box-shadow: var(--k-shadow-md);
}

.k-header__bar {
	display: flex;
	align-items: center;
	gap: var(--k-3);
	height: var(--k-header-h);
	transition: height var(--k-base) var(--k-ease);
}

.k-header.is-stuck .k-header__bar {
	height: var(--k-header-h-stuck);
}

/* ------------------------------------------------- Brand lockup (left, big) */

.k-header__brand {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	margin-right: var(--k-5);
	transition: transform var(--k-base) var(--k-spring);
}

.k-header__brand:hover {
	transform: scale(1.03);
}

.k-header__brand img {
	height: 72px;
	width: auto;
	max-width: none;
	transition: height var(--k-base) var(--k-ease);
}

.k-header.is-stuck .k-header__brand img {
	height: 56px;
}

@media (max-width: 1279px) {
	.k-header__brand {
		margin-right: var(--k-4);
	}

	.k-header__brand img {
		height: 60px;
	}

	.k-header.is-stuck .k-header__brand img {
		height: 52px;
	}
}

@media (max-width: 1023px) {
	.k-header__brand {
		margin-right: 0;
	}

	.k-header__brand img {
		height: 54px;
	}

	.k-header.is-stuck .k-header__brand img {
		height: 48px;
	}
}

@media (max-width: 479px) {
	.k-header__brand img {
		height: 46px;
	}

	.k-header.is-stuck .k-header__brand img {
		height: 42px;
	}
}

.k-header__brandtext {
	font-family: var(--k-font-display);
	font-size: clamp(1.15rem, 0.9rem + 0.9vw, 1.6rem);
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	background: var(--k-grad-ink);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.k-header__right {
	display: flex;
	align-items: center;
	gap: var(--k-1);
	margin-left: auto;
	flex: 0 0 auto;
}

/* ------------------------------------------------------ Header help line */

.k-callout {
	display: none;
	align-items: center;
	gap: var(--k-3);
	padding: 8px var(--k-4) 8px var(--k-3);
	margin-right: var(--k-2);
	border-radius: var(--k-radius-pill);
	text-decoration: none;
	border: 1px solid var(--k-line);
	background: var(--k-white);
	transition: border-color var(--k-fast) var(--k-ease), box-shadow var(--k-fast) var(--k-ease),
		transform var(--k-fast) var(--k-ease);
}

@media (min-width: 1200px) {
	.k-callout {
		display: inline-flex;
	}
}

.k-callout:hover {
	color: inherit;
	border-color: var(--k-accent);
	box-shadow: 0 6px 18px -10px rgba(216, 35, 42, 0.6);
	transform: translateY(-1px);
}

.k-callout__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--k-accent-soft);
	color: var(--k-accent);
	flex: 0 0 auto;
}

.k-callout__text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.k-callout__label {
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--k-muted);
}

.k-callout__num {
	font-family: var(--k-font-display);
	font-size: var(--k-t-sm);
	font-weight: 700;
	color: var(--k-ink);
	white-space: nowrap;
}

/* ------------------------------------------------------------ Icon buttons */

.k-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: transparent;
	border: 0;
	border-radius: var(--k-radius);
	color: var(--k-ink);
	position: relative;
	text-decoration: none;
	transition: background var(--k-fast) var(--k-ease), color var(--k-fast) var(--k-ease),
		transform var(--k-fast) var(--k-spring);
}

.k-iconbtn:hover {
	background: var(--k-surface);
	color: var(--k-ink);
	transform: translateY(-1px);
}

.k-iconbtn:active {
	transform: translateY(0);
}

.k-iconbtn--wa {
	color: var(--k-wa-dark);
}

.k-iconbtn--wa:hover {
	background: rgba(37, 211, 102, 0.12);
	color: var(--k-wa-dark);
}

/* WhatsApp lives in the floating button on small screens; one is enough. */
@media (max-width: 767px) {
	.k-header__wa {
		display: none;
	}
}

.k-iconbtn--cart:hover {
	background: var(--k-accent-soft);
	color: var(--k-accent);
}

/* This badge was hiding the icon it belongs to. With box-sizing:
   content-box the 19px min-width, 5px side padding and 2px border added up to
   a 33x23 badge, and at top:3px/right:1px on a 44px button it sat squarely
   over the 20px cart glyph - measured at 70% coverage, which is why the cart
   looked like it had no icon at all.

   It is a corner badge now: border-box, 18px, tucked into the top-right so it
   clips the handle of the cart rather than replacing the whole thing. */
.k-cartcount {
	position: absolute;
	/* The icon button is 44px with a 20px glyph centred in it, so its box
	   overhangs the layout's right edge by 12px to put the *glyph* on that
	   edge. A badge pinned to the box therefore sat 4px outside the content
	   column - measured against the panel below it - and because it is the
	   rightmost thing you can see, that 4px is what read as the header and
	   the page not lining up. Inset by the same 12px, it cannot. */
	top: 0;
	right: 12px;
	box-sizing: border-box;
	display: grid;
	place-items: center;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border: 2px solid var(--k-white);
	border-radius: var(--k-radius-pill);
	background: var(--k-grad-accent);
	color: var(--k-white);
	font-family: var(--k-font-display);
	font-size: 0.625rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	text-align: center;
	box-shadow: 0 2px 8px -2px rgba(216, 35, 42, 0.75);
	animation: k-pop var(--k-base) var(--k-spring);
}

@keyframes k-pop {
	from {
		transform: scale(0.4);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}

.k-cartcount.is-empty {
	display: none;
}

/* ------------------------------------------------------------ Menu burger */

.k-burger {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 20px;
	height: 16px;
}

.k-burger i {
	display: block;
	height: 2px;
	width: 100%;
	background: currentColor;
	border-radius: 2px;
	transition: transform var(--k-base) var(--k-ease), opacity var(--k-fast) var(--k-ease);
}

.k-burger i:nth-child(2) {
	width: 72%;
}

.k-header__menubtn[aria-expanded="true"] .k-burger i:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.k-header__menubtn[aria-expanded="true"] .k-burger i:nth-child(2) {
	opacity: 0;
}

.k-header__menubtn[aria-expanded="true"] .k-burger i:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ----------------------------------------------------------- 9. Navigation */

.k-nav {
	display: none;
}

@media (min-width: 1024px) {
	.k-nav {
		display: block;
		flex: 1 1 auto;
		min-width: 0;
	}

	.k-header__menubtn {
		display: none;
	}
}

.k-nav__list {
	display: flex;
	align-items: center;
	gap: var(--k-1);
	list-style: none;
	margin: 0;
	padding: 0;
}

.k-nav__list a {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px var(--k-4);
	font-family: var(--k-font-display);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.015em;
	text-decoration: none;
	border-radius: var(--k-radius-pill);
	white-space: nowrap;
	transition: background var(--k-fast) var(--k-ease), color var(--k-fast) var(--k-ease);
}

/* An underline that grows from the centre, rather than a block that pops in. */
.k-nav__list > li > a::before {
	content: "";
	position: absolute;
	left: var(--k-4);
	right: var(--k-4);
	bottom: 4px;
	height: 2px;
	border-radius: 2px;
	background: var(--k-accent);
	transform: scaleX(0);
	transition: transform var(--k-base) var(--k-ease);
}

.k-nav__list > li > a:hover::before,
.k-nav__list > li.current-menu-item > a::before,
.k-nav__list > li.current-menu-parent > a::before,
.k-nav__list > li.current-product-ancestor > a::before {
	transform: scaleX(1);
}

.k-nav__list a:hover,
.k-nav__list .current-menu-item > a {
	background: var(--k-surface);
	color: var(--k-ink);
}

.k-nav__item--has-children > a::after {
	content: "";
	width: 5px;
	height: 5px;
	border-right: 1.75px solid currentColor;
	border-bottom: 1.75px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--k-base) var(--k-ease);
}

.k-nav__item--has-children:hover > a::after,
.k-nav__item--has-children:focus-within > a::after {
	transform: translateY(1px) rotate(225deg);
}

.k-nav__item {
	position: relative;
}

.k-nav__sub {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	min-width: 248px;
	background: var(--k-white);
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius-lg);
	box-shadow: var(--k-shadow-pop);
	padding: var(--k-2);
	margin: 0;
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px) scale(0.98);
	transform-origin: top left;
	transition: opacity var(--k-fast) var(--k-ease), transform var(--k-base) var(--k-spring),
		visibility var(--k-fast);
}

.k-nav__item:hover > .k-nav__sub,
.k-nav__item:focus-within > .k-nav__sub,
.k-nav__sub.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

.k-nav__sub a {
	display: block;
	padding: 11px var(--k-4);
	font-size: var(--k-t-sm);
	font-weight: 500;
	border-radius: var(--k-radius-sm);
}

.k-nav__sub a:hover {
	background: var(--k-accent-soft);
	color: var(--k-accent);
	padding-left: calc(var(--k-4) + 4px);
}

/* Mobile drawer */

.k-drawer {
	position: fixed;
	inset: 0 auto 0 0;
	width: min(410px, 90vw);
	background: var(--k-white);
	border-radius: 0 var(--k-radius-xl) var(--k-radius-xl) 0;
	box-shadow: var(--k-shadow-pop);
	z-index: 200;
	transform: translateX(-100%);
	transition: transform var(--k-base) var(--k-ease);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overscroll-behavior: contain;
}

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

.k-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--k-4) var(--k-5);
	border-bottom: 1px solid var(--k-line);
	position: sticky;
	top: 0;
	background: var(--k-white);
}

.k-drawer__title {
	font-family: var(--k-font-display);
	font-size: var(--k-t-xs);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--k-muted);
	margin: 0;
}

.k-drawer__body {
	padding: var(--k-5);
	flex: 1;
}

.k-drawer__foot {
	padding: var(--k-5);
	border-top: 1px solid var(--k-line);
	display: grid;
	gap: var(--k-3);
	background: var(--k-paper);
}

.k-drawer__menu,
.k-drawer__menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.k-drawer__menu > li {
	border-bottom: 1px solid var(--k-line);
}

.k-drawer__menu a {
	display: block;
	padding: var(--k-4) 0;
	font-family: var(--k-font-display);
	font-size: 1.0625rem;
	font-weight: 700;
	text-decoration: none;
	transition: color var(--k-fast) var(--k-ease), transform var(--k-fast) var(--k-ease);
}

.k-drawer__menu a:hover {
	color: var(--k-accent);
	transform: translateX(4px);
}

.k-drawer__menu ul a {
	padding: 10px 0 10px var(--k-4);
	font-size: var(--k-t-sm);
	font-weight: 400;
	color: var(--k-ink-soft);
}

.k-drawer__toggle {
	position: absolute;
	right: 0;
	top: 8px;
	width: 36px;
	height: 36px;
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius);
	background: var(--k-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.k-drawer__menu > li {
	position: relative;
}

.k-drawer__toggle .k-icon {
	transform: rotate(90deg);
	transition: transform var(--k-fast) var(--k-ease);
}

.k-drawer__toggle[aria-expanded="true"] .k-icon {
	transform: rotate(-90deg);
}

.k-drawer__menu li > ul {
	display: none;
	padding-bottom: var(--k-3);
}

.k-drawer__menu li.is-open > ul {
	display: block;
}

.k-overlay {
	position: fixed;
	inset: 0;
	background: rgba(10, 10, 13, 0.5);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	z-index: 150;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--k-base) var(--k-ease), visibility var(--k-base);
}

.k-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

body.k-locked {
	overflow: hidden;
}

/* ------------------------------------------------------------- 10. Search */

.k-searchpanel {
	position: fixed;
	inset: 0 0 auto 0;
	background: var(--k-white);
	z-index: 210;
	border-bottom: 1px solid var(--k-line);
	border-radius: 0 0 var(--k-radius-xl) var(--k-radius-xl);
	box-shadow: var(--k-shadow-pop);
	transform: translateY(-100%);
	transition: transform var(--k-base) var(--k-ease);
	max-height: 100vh;
	overflow-y: auto;
}

.k-searchpanel.is-open {
	transform: translateY(0);
}

.k-searchpanel__inner {
	padding-block: var(--k-6) var(--k-7);
}

.k-searchform {
	display: flex;
	align-items: center;
	gap: var(--k-3);
	border-bottom: 2px solid var(--k-ink);
	padding-bottom: var(--k-3);
	transition: border-color var(--k-fast) var(--k-ease);
}

.k-searchform:focus-within {
	border-bottom-color: var(--k-accent);
}

.k-searchform input[type="search"] {
	flex: 1;
	border: 0;
	background: transparent;
	font-family: var(--k-font-display);
	font-size: clamp(1.25rem, 1rem + 1.4vw, 2rem);
	font-weight: 600;
	padding: var(--k-2) 0;
}

.k-searchform input[type="search"]:focus {
	outline: none;
}

.k-searchform input::-webkit-search-cancel-button {
	display: none;
}

.k-searchresults {
	margin-top: var(--k-5);
	min-height: 24px;
}

.k-searchresults__status {
	font-size: var(--k-t-sm);
	color: var(--k-muted);
}

.k-searchlist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--k-1);
}

.k-searchlist a {
	display: flex;
	align-items: center;
	gap: var(--k-4);
	padding: var(--k-3);
	border-radius: var(--k-radius);
	text-decoration: none;
	transition: background var(--k-fast) var(--k-ease);
}

.k-searchlist a:hover,
.k-searchlist a:focus-visible {
	background: var(--k-paper);
}

.k-searchlist img {
	width: 62px;
	height: 62px;
	object-fit: cover;
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius-sm);
	flex: none;
	background: var(--k-surface);
}

.k-searchlist__cat {
	font-family: var(--k-font-display);
	font-size: 0.625rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--k-muted);
	display: block;
}

.k-searchlist__name {
	font-weight: 500;
	font-size: var(--k-t-sm);
	display: block;
	margin-top: 2px;
}

.k-searchlist__price {
	margin-left: auto;
	font-family: var(--k-font-display);
	font-weight: 700;
	font-size: var(--k-t-sm);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.k-searchlist__price del {
	color: var(--k-muted);
	font-weight: 400;
	margin-right: 6px;
}

/* --------------------------------------------------------------- 17. Footer */

.k-footer {
	position: relative;
	background: var(--k-grad-ink);
	color: var(--k-on-dark-soft);
	font-size: var(--k-t-sm);
	overflow: hidden;
}

/* A single soft accent bloom, so the footer is not a flat black slab. */
.k-footer::before {
	content: "";
	position: absolute;
	top: -180px;
	left: 50%;
	width: 880px;
	height: 460px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgba(216, 35, 42, 0.17) 0%, transparent 68%);
	pointer-events: none;
}

.k-footer > * {
	position: relative;
	z-index: 1;
}

.k-footer a {
	color: var(--k-on-dark-soft);
	text-decoration: none;
	transition: color var(--k-fast) var(--k-ease);
}

.k-footer a:hover {
	color: var(--k-white);
}

.k-footer__promise {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--k-4);
	padding-block: var(--k-6);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	text-align: center;
}

.k-footer__promise span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--k-2);
	font-family: var(--k-font-display);
	font-size: var(--k-t-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.82);
}

.k-footer__promise span::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--k-accent);
	flex: 0 0 auto;
}

.k-footer__main {
	display: grid;
	gap: var(--k-7);
	padding-block: clamp(var(--k-7), 5vw, var(--k-9));
}

@media (min-width: 768px) {
	.k-footer__main {
		grid-template-columns: 1.7fr 1fr 1fr 1.4fr;
		gap: var(--k-6);
	}
}

.k-footer__title {
	font-family: var(--k-font-display);
	font-size: var(--k-t-xs);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--k-white);
	margin: 0 0 var(--k-5);
}

/* The mark is a JPEG on a white ground. Rather than let that read as a stray
   white rectangle on the dark footer, it is framed as a deliberate chip. */
.k-footer__brand {
	display: inline-block;
	background: var(--k-white);
	border-radius: var(--k-radius-lg);
	padding: var(--k-3) var(--k-4);
	margin-bottom: var(--k-5);
	box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.8);
}

.k-footer__brand img {
	height: 72px;
	max-height: none;
	width: auto;
	margin: 0;
	display: block;
}

.k-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--k-3);
}

.k-footer__list a {
	display: inline-block;
	padding-block: 3px;
	transition: color var(--k-fast) var(--k-ease), transform var(--k-fast) var(--k-ease);
}

.k-footer__list a:hover {
	transform: translateX(3px);
}

.k-footer__contact li {
	display: flex;
	align-items: flex-start;
	gap: var(--k-3);
	line-height: 1.55;
}

.k-footer__contact .k-icon {
	flex: none;
	margin-top: 3px;
	color: var(--k-accent);
}

.k-social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--k-2);
	margin-top: var(--k-5);
	list-style: none;
	padding: 0;
}

.k-social a {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--k-radius);
	transition: background var(--k-fast) var(--k-ease), border-color var(--k-fast) var(--k-ease),
		transform var(--k-base) var(--k-spring);
}

.k-social a:hover {
	background: var(--k-grad-accent);
	border-color: transparent;
	color: var(--k-white);
	transform: translateY(-3px);
}

.k-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--k-4);
	padding-block: var(--k-5);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: var(--k-t-xs);
}

.k-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--k-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ------------------------------------------------- Reassurance row (shared)

   Used beside the buy box, in the cart and on the checkout. One component so
   the three surfaces cannot drift apart, and so every claim on it is edited
   in a single place (inc/content.php -> 'assure').                          */

.k-trustbox {
	display: grid;
	gap: var(--k-3);
	margin: 0;
	padding: var(--k-4) var(--k-5);
	list-style: none;
	background: var(--k-paper);
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius);
}

.k-trustbox li {
	display: flex;
	align-items: center;
	gap: var(--k-3);
	font-size: var(--k-t-sm);
	color: var(--k-ink-soft);
	line-height: 1.4;
}

.k-trustbox .k-icon {
	flex: none;
	color: var(--k-ok);
}

.k-trustbox--row {
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	align-items: center;
}

@media (max-width: 767px) {
	.k-trustbox--row {
		grid-auto-flow: row;
	}
}

/* ------------------------------------------------------- 18. Floating chat */

.k-float {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 90;
	display: grid;
	gap: var(--k-2);
}

.k-float a {
	position: relative;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: linear-gradient(140deg, #2ee16f 0%, #1dad55 100%);
	color: #04300f;
	box-shadow: 0 12px 30px -10px rgba(37, 211, 102, 0.75);
	transition: transform var(--k-base) var(--k-spring), box-shadow var(--k-base) var(--k-ease);
}

/* A slow ring so the button is noticed once, not constantly demanding. */
.k-float a::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var(--k-wa);
	animation: k-ring 2.8s var(--k-ease) infinite;
}

@keyframes k-ring {
	0% {
		transform: scale(1);
		opacity: 0.7;
	}
	70%,
	100% {
		transform: scale(1.5);
		opacity: 0;
	}
}

.k-float a:hover {
	transform: translateY(-4px) scale(1.05);
	color: #04300f;
	box-shadow: 0 18px 40px -12px rgba(37, 211, 102, 0.85);
}

@media (max-width: 767px) {
	body.k-has-stickybuy .k-float {
		bottom: 84px;
	}
}

/* ------------------------------------------------ 19. Breadcrumbs + paging */

/* The breadcrumb sat flush against the bottom of the header - measured at a
   0px gap on single product pages, which have no page-head band above them to
   provide it, and 0px again below it before the gallery. Pages that do have a
   page-head already space the row, so the margin is cleared there rather than
   doubled onto what is already 48px. */
.k-crumbs {
	margin-block: var(--k-5) var(--k-4);
	font-size: var(--k-t-xs);
	color: var(--k-muted);
}

.k-pagehead .k-crumbs {
	margin-block: 0;
}

.k-crumbs ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--k-2);
}

.k-crumbs li + li::before {
	content: "/";
	margin-right: var(--k-2);
	color: var(--k-line-strong);
}

.k-crumbs a {
	text-decoration: none;
}

.k-crumbs [aria-current="page"] {
	color: var(--k-ink);
}

.k-pagination {
	display: flex;
	justify-content: center;
	gap: var(--k-2);
	margin-top: var(--k-8);
	flex-wrap: wrap;
}

.k-pagination .page-numbers {
	min-width: 44px;
	height: 44px;
	padding: 0 var(--k-3);
	display: inline-grid;
	place-items: center;
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius);
	font-family: var(--k-font-display);
	font-size: var(--k-t-sm);
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--k-fast) var(--k-ease), background var(--k-fast) var(--k-ease),
		transform var(--k-fast) var(--k-ease), box-shadow var(--k-base) var(--k-ease);
}

.k-pagination .page-numbers:hover {
	border-color: var(--k-ink);
	color: var(--k-ink);
	transform: translateY(-2px);
	box-shadow: var(--k-shadow);
}

.k-pagination .page-numbers.current {
	background: var(--k-grad-accent);
	border-color: transparent;
	color: var(--k-white);
	box-shadow: var(--k-shadow-accent);
}

.k-pagination .dots {
	border-color: transparent;
}

/* -------------------------------------------------------- 21. Motion guard */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.k-tile:hover .k-tile__media img,
	.k-postcard:hover .k-postcard__media img {
		transform: none;
	}
}

/* Entrance animation, applied only by script and only when motion is allowed */
.k-reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 560ms var(--k-ease), transform 560ms var(--k-ease);
}

.k-reveal.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.k-reveal {
		opacity: 1;
		transform: none;
	}
}

/* ------------------------------------------- Product grid and product card
   Cards appear on the home page rails as well as in shop archives, so they
   live in the shared base rather than in shop.css. */
/* --------------------------------------------------------- 3. Product grid */

ul.products,
.k-productgrid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--k-4);
}

@media (min-width: 640px) {
	ul.products,
	.k-productgrid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--k-5);
	}
}

@media (min-width: 1024px) {
	ul.products,
	.k-productgrid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.k-shoplayout--sidebar ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

ul.products::before,
ul.products::after {
	content: none;
}

/* ----------------------------------------------------------- 4. Product card */

.k-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--k-white);
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius-lg);
	overflow: hidden;
	transition: border-color var(--k-base) var(--k-ease), box-shadow var(--k-base) var(--k-ease),
		transform var(--k-base) var(--k-ease);
}

.k-card:hover {
	border-color: transparent;
	box-shadow: var(--k-shadow-pop);
	transform: translateY(-6px);
}

.k-card__frame {
	position: relative;
	padding: var(--k-3) var(--k-3) 0;
}

.k-card__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--k-radius);
	background: var(--k-surface);
}

.k-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms var(--k-ease), opacity var(--k-base) var(--k-ease);
}

.k-card:hover .k-card__media img.k-card__img--main {
	transform: scale(1.07);
}

.k-card__img--alt {
	position: absolute;
	inset: 0;
	opacity: 0;
}

.k-card:hover .k-card__img--alt {
	opacity: 1;
}

.k-card__flags {
	position: absolute;
	top: var(--k-5);
	left: var(--k-5);
	z-index: 2;
	display: grid;
	gap: 6px;
	justify-items: start;
}

.k-card__body {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: var(--k-4);
	flex: 1;
}

.k-card__cat {
	font-family: var(--k-font-display);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--k-muted);
	text-decoration: none;
}

.k-card__title {
	font-family: var(--k-font-body);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: 0;
	margin: 0;
	flex: 1;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.k-card__title a {
	text-decoration: none;
	background-image: linear-gradient(var(--k-accent), var(--k-accent));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size var(--k-base) var(--k-ease), color var(--k-fast) var(--k-ease);
}

.k-card:hover .k-card__title a {
	background-size: 100% 1px;
}

.k-card__price {
	font-family: var(--k-font-display);
	font-size: 1.1rem;
	font-weight: 800;
	letter-spacing: -0.015em;
	font-variant-numeric: tabular-nums;
	display: flex;
	align-items: baseline;
	gap: var(--k-2);
	flex-wrap: wrap;
	margin-top: 2px;
}

.k-card__price del,
.woocommerce-Price-amount del {
	color: var(--k-muted);
	font-weight: 400;
	font-size: var(--k-t-sm);
	text-decoration: line-through;
	text-decoration-color: var(--k-line-strong);
}

.k-card__price ins {
	text-decoration: none;
	color: var(--k-accent);
}

/* The saving, stated in rupees rather than left as a percentage to work out. */
.k-card__save {
	font-family: var(--k-font-display);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--k-ok);
	background: var(--k-ok-soft);
	border-radius: var(--k-radius-pill);
	padding: 4px 9px;
	line-height: 1.4;
	white-space: nowrap;
}

.k-card__save .woocommerce-Price-amount {
	font-weight: 700;
}

.k-card__urgent {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	font-size: var(--k-t-xs);
	font-weight: 600;
	color: var(--k-warn);
}

.k-pulse {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	flex: 0 0 auto;
	animation: k-pulse 1.9s var(--k-ease) infinite;
}

@keyframes k-pulse {
	0%,
	100% {
		opacity: 1;
		box-shadow: 0 0 0 0 currentColor;
	}
	70% {
		opacity: 0.75;
		box-shadow: 0 0 0 6px transparent;
	}
}

.k-card__stock {
	font-size: var(--k-t-xs);
	color: var(--k-ok);
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.k-card__stock--out {
	color: var(--k-muted);
}

/* Add to cart is always visible. It is the primary shopping action on the
   card, and hiding it behind :hover makes it unreachable on touch. */
.k-card__cta {
	margin-top: var(--k-3);
}

.k-card__cta .button,
.k-card__cta .k-btn {
	position: relative;
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	gap: var(--k-2);
	padding: 13px var(--k-4);
	border: 1px solid var(--k-ink);
	border-radius: var(--k-radius);
	background: var(--k-ink);
	color: var(--k-white);
	font-family: var(--k-font-display);
	font-size: var(--k-t-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.2;
	min-height: 44px;
	text-decoration: none;
	transition: background var(--k-fast) var(--k-ease), border-color var(--k-fast) var(--k-ease),
		box-shadow var(--k-base) var(--k-ease), transform var(--k-fast) var(--k-ease);
}

.k-card__cta .button:hover,
.k-card__cta .k-btn:hover {
	background: var(--k-grad-accent);
	border-color: transparent;
	color: var(--k-white);
	box-shadow: var(--k-shadow-accent);
}

.k-card__cta .button:active,
.k-card__cta .k-btn:active {
	transform: translateY(1px);
}

.k-card__cta .button.added {
	background: var(--k-ok);
	border-color: var(--k-ok);
}

.k-card__cta .k-btn--ghost {
	background: transparent;
	color: var(--k-ink);
	border-color: var(--k-line-strong);
}

.k-card__cta .k-btn--ghost:hover {
	background: var(--k-ink);
	border-color: var(--k-ink);
	color: var(--k-white);
}

.k-card__price--ask {
	font-size: var(--k-t-sm);
	font-weight: 500;
	color: var(--k-muted);
}

.k-card .added_to_cart {
	display: none;
}

.k-card .add_to_cart_button.loading::after {
	content: "";
	width: 14px;
	height: 14px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: k-spin 700ms linear infinite;
	margin-left: var(--k-2);
}

@keyframes k-spin {
	to {
		transform: rotate(360deg);
	}
}


/* ------------------------------------------------------ Page shell + misc */

.k-page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.k-main {
	flex: 1;
}

.k-main:focus {
	outline: none;
}

.k-section--flush {
	padding-block: 0;
}

.k-builder {
	width: 100%;
}

/* Split section heading: text left, link right, stacking on small screens. */
.k-sechead--split {
	flex-direction: row;
	align-items: flex-end;
	text-align: left;
}

@media (max-width: 639px) {
	.k-sechead--split {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--k-3);
	}
}

.k-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--k-3);
}

.k-footer__list a,
.k-footer__legal a {
	text-decoration: none;
}

.k-drawer__title--spaced {
	margin-top: var(--k-6);
}

.k-searchlist__info {
	min-width: 0;
}

/* Placeholder used where a product has no photograph. */
.k-placeholder {
	display: grid;
	place-content: center;
	justify-items: center;
	gap: var(--k-2);
	width: 100%;
	height: 100%;
	min-height: 160px;
	background: var(--k-surface);
	color: var(--k-muted);
	text-align: center;
	padding: var(--k-4);
}

.k-placeholder svg {
	width: 40px;
	height: 40px;
}

.k-placeholder em {
	font-style: normal;
	font-size: var(--k-t-xs);
	letter-spacing: 0.04em;
}

/* Checkbox control */
.k-check {
	display: flex;
	align-items: center;
	gap: var(--k-2);
	font-size: var(--k-t-sm);
	cursor: pointer;
}

.k-check input {
	width: 17px;
	height: 17px;
	accent-color: var(--k-accent);
	flex: none;
}

.k-chip--clear {
	border-style: dashed;
	color: var(--k-muted);
}

.k-empty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--k-3);
	justify-content: center;
}

.k-pagelinks {
	display: flex;
	gap: var(--k-2);
	margin-top: var(--k-5);
	font-family: var(--k-font-display);
	font-size: var(--k-t-sm);
}

/* --------------------------------------- Cart / checkout / account pages */

/*
 * These are ordinary pages holding a WooCommerce shortcode, so they bypass
 * the shop wrapper that archives use. The container is reset here so their
 * forms get the full page width instead of a reading column.
 */
.k-shoppage {
	width: 100%;
	max-width: none;
}

.k-shop-main--flush {
	padding-block: 0;
}

/* ------------------------------------------- WooCommerce "alt" button colour

   WooCommerce paints every .button.alt — Proceed to checkout, View cart,
   Place order — in its own purple, from a selector carrying three classes and
   an element. A plain .checkout-button rule cannot reach that, so the brand
   colour is restated here at a specificity that can, without !important.    */

body.woocommerce a.button.alt,
body.woocommerce button.button.alt,
body.woocommerce input.button.alt,
body.woocommerce #respond input#submit.alt,
body.woocommerce-page a.button.alt,
body.woocommerce-page button.button.alt,
body.woocommerce-page input.button.alt {
	background: var(--k-grad-accent);
	border-color: transparent;
	color: var(--k-white);
	text-shadow: none;
}

body.woocommerce a.button.alt:hover,
body.woocommerce button.button.alt:hover,
body.woocommerce input.button.alt:hover,
body.woocommerce #respond input#submit.alt:hover,
body.woocommerce-page a.button.alt:hover,
body.woocommerce-page button.button.alt:hover,
body.woocommerce-page input.button.alt:hover {
	background: var(--k-grad-accent);
	color: var(--k-white);
	box-shadow: var(--k-shadow-accent);
}

/* The quieter grey WooCommerce gives a plain .button is left alone except
   where the theme has already styled the control as one of its own. */
body.woocommerce a.button.k-btn,
body.woocommerce button.button.k-btn,
body.woocommerce input.button.k-btn {
	background: var(--k-grad-ink);
	color: var(--k-white);
}

body.woocommerce .k-btn--ghost.button {
	background: var(--k-white);
	color: var(--k-ink);
	border-color: var(--k-line-strong);
}

/* ------------------------------------------------- Simple Chat Button plugin

   The site runs the Simple Chat Button plugin as well as this theme's own
   WhatsApp button, so two identical green circles stack in the same corner.
   The plugin's sits at z-index 999999999 and is pinned to the bottom of the
   viewport, which on a phone puts it directly over the sticky Add to cart
   bar on every product page.

   The theme's own button is kept: it reads the same number from
   inc/content.php, matches the brand, and already lifts itself clear of the
   buy bar. The plugin's is hidden rather than removed, so deactivating this
   theme restores it. Deactivating the plugin outright is the tidier fix and
   also saves its script and stylesheet on every page.                       */

#simple-chat-button--container {
	display: none !important;
}

/* ------------------------------------------------- One page, one left edge

   The header, the hero and every section now share a single .k-container, so
   the logo, the hero headline, every section heading, every grid and the
   footer all begin on the same vertical line. Previously the header and hero
   sat in a wider container and started 53px to the left of everything beneath
   them, which read as a drift down the whole page.

   Section headings are all left-aligned (--split) for the same reason: a
   centred heading above a left-aligned grid breaks that line.               */

.k-sechead__text {
	min-width: 0;
}

/* With every heading left-aligned the "View all" link needs to stay on the
   heading's baseline, and drop below it rather than squeeze on small screens. */
.k-sechead__link {
	flex: none;
}

@media (max-width: 767px) {
	.k-sechead {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--k-4);
	}

	/* Footer and legal links sat at 22px: below a comfortable tap target. */
	.k-footer__list a,
	.k-footer__legal a,
	.k-footer__contact a {
		padding-block: 6px;
	}

	.k-footer ul {
		gap: var(--k-1);
	}
}

/* --------------------------------------------- Optical alignment of icons

   An icon button centres a 20px glyph inside a 44px box, so its glyph sat
   12px inside the container edge while every piece of text on the page
   started flush on that edge. Pulling the outermost buttons out by exactly
   half their slack puts the burger and the cart optically on the same line
   as the content below them. The pull stays inside the gutter, so nothing
   overflows.                                                                */

.k-header__menubtn {
	margin-left: -12px;
}

.k-header__right > :last-child {
	margin-right: -12px;
}

/* =========================================================================
   Cart drawer

   Slides in from the right when something is added from a product card, and
   when the header cart icon is used. It shares the theme's overlay, scroll
   lock and Escape handling with the menu and search panels.
   ========================================================================= */

.k-cartpanel {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(440px, 94vw);
	z-index: 200;
	display: flex;
	flex-direction: column;
	background: var(--k-white);
	border-radius: var(--k-radius-xl) 0 0 var(--k-radius-xl);
	box-shadow: var(--k-shadow-pop);
	transform: translateX(100%);
	transition: transform var(--k-base) var(--k-ease);
	overscroll-behavior: contain;
}

.k-cartpanel.is-open {
	transform: translateX(0);
}

.k-cartpanel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--k-3);
	padding: var(--k-5) var(--k-5) var(--k-4);
	border-bottom: 1px solid var(--k-line);
	flex: none;
}

.k-cartpanel__title {
	display: flex;
	align-items: center;
	gap: var(--k-3);
	margin: 0;
	font-family: var(--k-font-display);
	font-size: 1.125rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}

.k-cartpanel__count {
	display: inline-grid;
	place-items: center;
	min-width: 26px;
	height: 26px;
	padding: 0 8px;
	border-radius: var(--k-radius-pill);
	background: var(--k-grad-accent);
	color: var(--k-white);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
}

/* An empty cart has no number worth showing. */
.k-cartpanel__count.is-empty {
	display: none;
}

.k-cartpanel__body {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--k-4) var(--k-5);
}

.k-cartpanel__foot {
	flex: none;
	display: grid;
	gap: var(--k-3);
	padding: var(--k-5);
	border-top: 1px solid var(--k-line);
	background: var(--k-paper);
}

.k-cartpanel__foot[hidden] {
	display: none;
}

.k-cartpanel__totals {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--k-3);
	font-family: var(--k-font-display);
}

.k-cartpanel__totals span {
	font-size: var(--k-t-xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--k-muted);
}

.k-cartpanel__totals strong {
	font-size: 1.375rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.k-cartpanel__note {
	margin: 0;
	font-size: var(--k-t-xs);
	color: var(--k-muted);
}

/* ------------------------------------------------------------- Cart lines */

.k-cartlines {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--k-3);
}

.k-cartline {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr) auto;
	gap: var(--k-4);
	align-items: start;
	padding: var(--k-3);
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius);
	background: var(--k-white);
	transition: opacity var(--k-base) var(--k-ease), transform var(--k-base) var(--k-ease);
	animation: k-line-in var(--k-base) var(--k-ease) both;
}

@keyframes k-line-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.k-cartline.is-going {
	opacity: 0.4;
	transform: translateX(10px);
	pointer-events: none;
}

.k-cartline__media img {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: var(--k-radius-sm);
	background: var(--k-surface);
}

.k-cartline__info {
	min-width: 0;
}

.k-cartline__name {
	margin: 0;
	font-size: var(--k-t-sm);
	font-weight: 600;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.k-cartline__name a {
	text-decoration: none;
}

.k-cartline__meta {
	margin: 4px 0 0;
	font-size: var(--k-t-xs);
	color: var(--k-muted);
}

.k-cartline__meta p {
	margin: 0;
}

.k-cartline__qty {
	margin: 6px 0 0;
	font-size: var(--k-t-xs);
	color: var(--k-muted);
	display: flex;
	align-items: center;
	gap: 6px;
	font-variant-numeric: tabular-nums;
}

.k-cartline__end {
	display: grid;
	justify-items: end;
	gap: var(--k-2);
}

.k-cartline__total {
	font-family: var(--k-font-display);
	font-size: var(--k-t-sm);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.k-cartline__remove {
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border: 1px solid var(--k-line);
	border-radius: 50%;
	background: var(--k-white);
	color: var(--k-muted);
	transition: border-color var(--k-fast) var(--k-ease), color var(--k-fast) var(--k-ease),
		background var(--k-fast) var(--k-ease);
}

.k-cartline__remove:hover {
	border-color: var(--k-accent);
	background: var(--k-accent-soft);
	color: var(--k-accent);
}

/* ------------------------------------------------------------ Empty state */

.k-cartpanel__empty {
	text-align: center;
	padding: var(--k-8) var(--k-4);
	display: grid;
	gap: var(--k-3);
	justify-items: center;
}

.k-cartpanel__emptyicon {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--k-surface);
	color: var(--k-muted);
}

.k-cartpanel__emptytitle {
	margin: 0;
	font-family: var(--k-font-display);
	font-size: 1.0625rem;
	font-weight: 700;
}

.k-cartpanel__emptytext {
	margin: 0 0 var(--k-3);
	font-size: var(--k-t-sm);
	color: var(--k-muted);
	max-width: 30ch;
}

/* =========================================================================
   Add-to-cart button: icon, loading and confirmed states
   ========================================================================= */

.k-card__cta .button .k-atc__icon,
.k-card__cta .button .k-atc__done {
	display: inline-flex;
	flex: none;
}

.k-card__cta .button .k-atc__done {
	display: none;
}

.k-card__cta .button .k-atc__label {
	transition: opacity var(--k-fast) var(--k-ease);
}

/* While WooCommerce is posting, the label steps back and the spinner that
   already existed carries the state. */
.k-card__cta .button.loading .k-atc__icon {
	display: none;
}

.k-card__cta .button.loading .k-atc__label {
	opacity: 0.6;
}

/* Confirmed: the tick replaces the cart for a couple of seconds. */
.k-card__cta .button.is-done {
	background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
	border-color: transparent;
	box-shadow: 0 6px 18px -8px rgba(21, 128, 61, 0.7);
}

.k-card__cta .button.is-done .k-atc__icon {
	display: none;
}

.k-card__cta .button.is-done .k-atc__done {
	display: inline-flex;
	animation: k-tick var(--k-base) var(--k-spring) both;
}

/* WooCommerce's own stylesheet draws a checkmark on any .button.added
   through ::after, using its icon webfont. This theme already puts a tick in
   .k-atc__done and turns the button green, so after an add the button carried
   *two* ticks. Its selector is .woocommerce a.button.added::after at (0,3,1),
   so the body prefix here is what makes (0,3,2) and wins. */
body.woocommerce a.button.added::after,
body.woocommerce button.button.added::after,
body.woocommerce input.button.added::after,
body.woocommerce-page a.button.added::after,
body.woocommerce-page button.button.added::after,
body.woocommerce-page input.button.added::after {
	content: none;
	display: none;
}

@keyframes k-tick {
	from {
		transform: scale(0.4);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}

@media (max-width: 479px) {
	.k-cartpanel {
		width: 100%;
		border-radius: 0;
	}

	.k-cartline {
		grid-template-columns: 60px minmax(0, 1fr) auto;
		gap: var(--k-3);
	}

	.k-cartline__media img {
		width: 60px;
		height: 60px;
	}
}

/* ------------------------------------- Add-to-cart button on WooCommerce pages

   WooCommerce paints a.button its own light grey from a selector that needs an
   ancestor carrying .woocommerce. On the home page the product rails have no
   such ancestor, so the theme's dark button showed; on the shop and category
   archives body.woocommerce is present and WooCommerce won. The same card was
   therefore dark in one place and grey in another. Restated here above
   WooCommerce's weight so the card reads the same everywhere.               */

body.woocommerce .k-card__cta a.button,
body.woocommerce .k-card__cta button.button,
body.woocommerce-page .k-card__cta a.button,
body.woocommerce-page .k-card__cta button.button {
	/*
	 * WooCommerce also forces display: inline-block from that same selector.
	 * That quietly killed the flex layout underneath: the gap between the
	 * icon and the label collapsed to nothing and justify-content stopped
	 * applying, so the pair sat jammed together against the left edge of the
	 * button instead of centred. The layout is restated here with the colour.
	 */
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--k-2);
	text-align: center;
	background: var(--k-ink);
	border-color: var(--k-ink);
	color: var(--k-white);
}

body.woocommerce .k-card__cta a.button:hover,
body.woocommerce .k-card__cta button.button:hover,
body.woocommerce-page .k-card__cta a.button:hover,
body.woocommerce-page .k-card__cta button.button:hover {
	background: var(--k-grad-accent);
	border-color: transparent;
	color: var(--k-white);
}

/* The confirmed state has to outrank the two rules above as well. */
body.woocommerce .k-card__cta a.button.is-done,
body.woocommerce .k-card__cta button.button.is-done,
body.woocommerce-page .k-card__cta a.button.is-done,
body.woocommerce-page .k-card__cta button.button.is-done {
	background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
	border-color: transparent;
	color: var(--k-white);
}

/* WooCommerce draws an icon on every notice from its own webfont, positioned
   for its own padding. This theme gives notices a left bar and its own
   spacing, so the glyph landed on top of the first word of the message.
   Dropping it also drops WooCommerce's ::before clearfix, which nothing here
   relies on - no notice in this theme contains a floated child. */
body.woocommerce .woocommerce-message::before,
body.woocommerce .woocommerce-info::before,
body.woocommerce .woocommerce-error::before,
body.woocommerce-page .woocommerce-message::before,
body.woocommerce-page .woocommerce-info::before,
body.woocommerce-page .woocommerce-error::before {
	content: none;
	display: none;
}