/* ==========================================================================
   Wankhede design system
   Elementor owns structure and content; this file owns the look. Every
   section block carries a wk-* class set in Elementor's "CSS Classes" field,
   and the rules below hang off those.
   ========================================================================== */

:root {
	/* Palette sampled from the approved mockup */
	--wk-green-900: #063920;   /* footer, deepest surfaces */
	--wk-green-800: #023a11;   /* primary buttons, Add to Cart */
	--wk-green-700: #14532a;   /* hovers */
	--wk-green-ink: #0d3b1c;   /* serif headings */
	--wk-cream-100: #fef3e8;   /* header, trust bar, farm + promise */
	--wk-cream-050: #fcfaf5;
	--wk-gold-500: #e9a13b;    /* bullet rings, small icons */
	--wk-gold-400: #fed594;    /* ghee banner gradient start */
	--wk-gold-200: #fee4bc;    /* ghee banner gradient end */
	--wk-paper: #fdfaf4;       /* about page ground */
	--wk-khaki-100: #f3f1d2;   /* about badge + icon discs */
	--wk-band-cream: #fbf4e9;  /* about promise card */
	--wk-brown-700: #74451a;   /* about kicker + promise heading */
	--wk-gold-100: #f6e9d0;    /* contact icon discs */
	--wk-amber-700: #af6316;   /* contact hero kicker */
	--wk-panel-line: #f3ece2;  /* contact panel hairlines */
	--wk-ink: #17181a;
	--wk-muted: #5b6068;
	--wk-line: #ededed;
	--wk-red: #e23b2b;
	--wk-white: #fff;

	/* Type */
	--wk-display: "Playfair Display", "Iowan Old Style", Georgia, serif;
	--wk-body: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;

	/* Layout */
	--wk-container: 1280px;
	--wk-gutter: 24px;
	--wk-section-y: clamp(56px, 6vw, 92px);
	--wk-radius: 14px;
	--wk-radius-pill: 999px;

	--wk-shadow-card: 0 1px 2px rgb(23 24 26 / 4%);
	--wk-shadow-lift: 0 18px 40px -18px rgb(6 57 32 / 28%);

	/* A gold hairline with a leaf sitting in the middle of it. Declared once
	   here because three headings across two pages draw the same ornament,
	   and they must not drift apart. */
	--wk-leaf-rule:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 17c0-5 2.5-8 8-9-0.5 5.5-3.5 8.5-8 9z' fill='%233f7d32'/%3E%3Cpath d='M10 17c0-3.5-1.5-6-5-7 0.4 4 2.2 6.3 5 7z' fill='%235a9c46'/%3E%3C/svg%3E")
			center / 17px no-repeat,
		linear-gradient(90deg, rgb(233 161 59 / 0%), var(--wk-gold-500))
			left center / calc(50% - 15px) 1px no-repeat,
		linear-gradient(90deg, var(--wk-gold-500), rgb(233 161 59 / 0%))
			right center / calc(50% - 15px) 1px no-repeat;

	/* The same ornament anchored to the left instead of balanced about its
	   middle, for headings whose text is left-aligned: a rule with a leaf at
	   its centre reads as a centred device however far left you start it.
	   The viewBox is cropped to the drawing's own bounds so `left` puts the
	   leaf on the text's left edge and not four transparent pixels short. */
	--wk-leaf-rule-start:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 7 15 11'%3E%3Cpath d='M10 17c0-5 2.5-8 8-9-0.5 5.5-3.5 8.5-8 9z' fill='%233f7d32'/%3E%3Cpath d='M10 17c0-3.5-1.5-6-5-7 0.4 4 2.2 6.3 5 7z' fill='%235a9c46'/%3E%3C/svg%3E")
			left center / auto 13px no-repeat,
		linear-gradient(90deg, var(--wk-gold-500), rgb(233 161 59 / 0%))
			left 27px center / calc(100% - 27px) 1px no-repeat;
}

/* --------------------------------------------------------------- base --- */

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

body {
	margin: 0;
	background: var(--wk-white);
	color: var(--wk-ink);
	font-family: var(--wk-body);
	font-size: 16px;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--wk-display);
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.01em;
	color: var(--wk-ink);
	margin: 0;
}

p {
	margin: 0;
}

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

a {
	color: inherit;
}

/* Never hide focus - the quality floor, not a nicety. */
:focus-visible {
	outline: 3px solid var(--wk-gold-500);
	outline-offset: 3px;
	border-radius: 4px;
}

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

.wk-skip-link:focus {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 9999;
	width: auto;
	height: auto;
	clip: auto;
	padding: 12px 20px;
	background: var(--wk-green-800);
	color: var(--wk-white);
	border-radius: var(--wk-radius-pill);
}

.wk-container {
	width: min(100% - (var(--wk-gutter) * 2), var(--wk-container));
	margin-inline: auto;
}

.wk-flow > * + * {
	margin-top: 1.1em;
}

/* Elementor's own container should not fight the design system. */
.wk-section > .e-con-inner,
.wk-section.e-con > .e-con-inner {
	max-width: var(--wk-container);
}

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

/* wk-btn sits on the Elementor *widget wrapper*, so only the inner <a> may
   carry padding - putting it on both doubles the pill's height. */
.wk-btn .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 28px;
	border: 0;
	border-radius: var(--wk-radius-pill);
	font-family: var(--wk-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.wk-btn {
	padding: 0;
}

.wk-btn--primary .elementor-button {
	background: var(--wk-green-800);
	color: var(--wk-white);
}

.wk-btn--primary .elementor-button:hover {
	background: var(--wk-green-700);
	color: var(--wk-white);
}

.wk-btn--ghost .elementor-button {
	background: var(--wk-white);
	color: var(--wk-ink);
}

.wk-btn--ghost .elementor-button:hover {
	background: var(--wk-cream-100);
}

.wk-btn--light .elementor-button {
	background: var(--wk-white);
	color: var(--wk-green-900);
}

.wk-btn .elementor-button:hover {
	transform: translateY(-1px);
}

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

.wk-header {
	position: sticky;
	top: 0;
	z-index: 200;
	background: var(--wk-cream-100);
	padding-block: 12px;
}

/* Both marks are home links, so Elementor now wraps them in an inline-block
   anchor. An inline-level box sits on a baseline and drags the line-box strut
   in with it, which would pad each logo from below. Zero the leading; the
   image supplies the whole height. */
.wk-header__logo,
.wk-footer__logo {
	line-height: 0;
}

.wk-header__logo img {
	height: clamp(62px, 7.2vw, 104px);
	width: auto;
}

.wk-header .wk-nav ul.hfe-nav-menu {
	gap: 6px;
}

.wk-header .wk-nav .menu-item a.hfe-menu-item {
	position: relative;
	padding: 8px 18px;
	font-family: var(--wk-body);
	font-size: 15.5px;
	font-weight: 600;
	color: var(--wk-ink);
}

.wk-header .wk-nav .menu-item a.hfe-menu-item::after {
	content: "";
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 0;
	height: 2px;
	background: var(--wk-green-800);
	transform: scaleX(0);
	transition: transform 0.22s ease;
}

.wk-header .wk-nav .menu-item a.hfe-menu-item:hover::after,
.wk-header .wk-nav .current-menu-item > a.hfe-menu-item::after,
.wk-header .wk-nav .current_page_item > a.hfe-menu-item::after {
	transform: scaleX(1);
}

/* Dropdown */
.wk-header .wk-nav .sub-menu {
	border-radius: 10px;
	overflow: hidden;
	box-shadow: var(--wk-shadow-lift);
}

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

/* Elementor's shortcode widget wraps its output in .elementor-shortcode, which
   is a block box - left alone it drops the icons onto their own line inside
   the flex row. */
.wk-cart-actions,
.wk-cart-actions .elementor-shortcode {
	display: flex;
	align-items: center;
}

.wk-cart {
	display: flex;
	align-items: center;
	gap: 2px;
}

.wk-cart__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	color: var(--wk-green-900);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.wk-cart__link:hover,
.wk-cart__link:focus-visible {
	background: rgb(6 57 32 / 8%);
	color: var(--wk-green-800);
}

.wk-cart__link .wk-icon {
	width: 23px;
	height: 23px;
}

/* Sits on the bag's top-right corner. Its own line-height, because the header
   inherits none and the digit would otherwise ride low in the disc. */
.wk-cart__count {
	position: absolute;
	top: 2px;
	right: 1px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--wk-gold-500);
	color: var(--wk-white);
	font-family: var(--wk-body);
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

/* --------------------------------------------------------------- hero --- */

.wk-hero {
	position: relative;
	min-height: clamp(520px, 46vw, 680px);
	background-color: var(--wk-cream-100);
	background-position: center bottom;
	background-size: cover;
	overflow: hidden;
}

/* Keeps the headline legible over the photograph without dulling the scene. */
/* The supplied banner already carries a light, hazy left side, so this only
   has to lift the copy area a little - a heavy wash would flatten the scene. */
.wk-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		rgb(254 243 232 / 62%) 0%,
		rgb(254 243 232 / 40%) 30%,
		rgb(254 243 232 / 8%) 55%,
		rgb(254 243 232 / 0%) 100%
	);
	pointer-events: none;
}

.wk-hero > .e-con-inner {
	position: relative;
	z-index: 1;
}

.wk-hero__title {
	font-size: clamp(2.1rem, 5vw, 4.5rem);
	line-height: 1.04;
	max-width: none;
}

.wk-hero__text {
	max-width: none;
	font-size: clamp(16.5px, 1.62vw, 22px);
	font-weight: 500;
	line-height: 1.58;
	color: #24262a;
}

.wk-hero__packs img {
	filter: drop-shadow(0 26px 34px rgb(23 24 26 / 26%));
}

/* ---------------------------------------------------------- trust bar --- */

.wk-trustbar {
	background: var(--wk-cream-100);
}

.wk-trustbar .wk-trust {
	position: relative;
}

.wk-trustbar .wk-trust:not(:last-child)::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 44px;
	background: rgb(23 24 26 / 12%);
}

.wk-trust .elementor-icon-box-title,
.wk-trust .elementor-icon-box-title span {
	font-family: var(--wk-body);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.32;
	color: var(--wk-ink);
	margin: 0;
}

.wk-trust .elementor-icon svg {
	width: 34px;
	height: 34px;
	stroke: var(--wk-green-ink);
	fill: none;
}

/* ----------------------------------------------------------- sections --- */

.wk-section {
	padding-block: var(--wk-section-y);
}

.wk-section--cream {
	background: var(--wk-cream-100);
}

.wk-section__title {
	font-size: clamp(1.75rem, 3vw, 2.45rem);
	color: var(--wk-green-ink);
	text-align: center;
}

.wk-section__lede {
	max-width: 46ch;
	margin-inline: auto;
	text-align: center;
	font-size: 15.5px;
	color: #33363a;
}

/* ------------------------------------------------------- product grid --- */

.wk-products__grid {
	gap: 18px;
}

.wk-card {
	background: var(--wk-white);
	border: 1px solid var(--wk-line);
	border-radius: var(--wk-radius);
	padding: 18px 18px 20px;
	box-shadow: var(--wk-shadow-card);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.wk-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--wk-shadow-lift);
}

.wk-card__media img {
	height: 168px;
	width: auto;
	object-fit: contain;
	margin-inline: auto;
}

.wk-card__title {
	font-family: var(--wk-body);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--wk-ink);
}

.wk-card__tagline {
	font-size: 14.5px;
	font-weight: 500;
	color: #3b3e42;
}

.wk-card__desc {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--wk-muted);
}

/* Feature bullets - gold ring markers, matching the mockup */
.wk-card__features .elementor-icon-list-item {
	font-size: 13.5px;
	font-weight: 500;
	color: #24262a;
}

.wk-card__features .elementor-icon-list-icon svg {
	width: 13px;
	height: 13px;
	fill: none;
	stroke: var(--wk-gold-500);
	stroke-width: 2.2;
}

.wk-card__avail {
	font-size: 12.5px;
	color: var(--wk-muted);
}

.wk-card__sizes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.wk-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 52px;
	padding: 6px 12px;
	border-radius: 8px;
	background: #f4f4f4;
	font-size: 12.5px;
	font-weight: 500;
	color: #2b2d31;
}

.wk-card__cta .elementor-button {
	width: 100%;
	justify-content: center;
	padding: 12px 18px;
	border-radius: 9px;
	background: var(--wk-green-800);
	color: var(--wk-white);
	font-size: 13.5px;
	font-weight: 600;
}

.wk-card__cta .elementor-button:hover {
	background: var(--wk-green-700);
}

/* ----------------------------------------------------------- the farm --- */

.wk-farm {
	background: var(--wk-cream-100);
}

/* The photograph fades to the section cream in its own pixels, so the panel has
   to stay near the image's 1.64 aspect. Stretching it to the copy column's
   height would crop the sides away - and take the fade with them. */
.wk-farm__media {
	min-height: clamp(440px, 34vw, 560px);
	background-size: cover;
	background-position: center;
	position: relative;
}

/* Insurance only, now that the blend is baked in: this just guarantees the
   last few pixels land on the exact section colour after a cover crop. */
.wk-farm__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgb(254 243 232 / 0%) 85%,
		rgb(254 243 232 / 100%) 100%
	);
}

.wk-farm__cta {
	margin-top: 8px;
}

.wk-farm__title {
	font-size: clamp(1.7rem, 2.8vw, 2.3rem);
	color: var(--wk-ink);
}

.wk-farm__text {
	max-width: 52ch;
	font-size: 15.5px;
	color: #33363a;
}

.wk-value .elementor-icon svg {
	width: 30px;
	height: 30px;
	stroke: var(--wk-green-ink);
	fill: none;
}

.wk-value .elementor-icon-box-title,
.wk-value .elementor-icon-box-title span {
	font-family: var(--wk-body);
	font-size: 14px;
	font-weight: 700;
	color: var(--wk-ink);
	margin: 0;
}

/* ------------------------------------------------ made for every home --- */

.wk-home__item {
	position: relative;
}

.wk-home__item:not(:last-child)::after {
	content: "";
	position: absolute;
	right: -12px;
	top: 4%;
	width: 1px;
	height: 92%;
	background: rgb(23 24 26 / 10%);
}

/* Icon and title share one line at a matched size, so the pair reads as a
   single label under the photograph rather than as two stacked elements. */
/* The card is a single left-aligned column: photograph, icon + title, copy,
   all off the same edge. No two-line reserve here - every title fits on one
   line from 410px up, so reserving a second line only opened ~21px of dead
   space under each title. The reserve survives at phone widths, where
   "Tradition in Every Spoon" genuinely does wrap. */
.wk-home__head .elementor-icon-box-wrapper {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 9px;
	text-align: left;
}

/* Top-aligned, the icon needs a nudge to sit on the first line optically. */
.wk-home__head .elementor-icon-box-icon {
	margin: 2px 0 0;
	flex: 0 0 auto;
}

.wk-home__head .elementor-icon {
	font-size: 17px;
	line-height: 1;
	color: var(--wk-gold-500);
}

.wk-home__head .elementor-icon-box-title,
.wk-home__head .elementor-icon-box-title span {
	margin: 0;
	font-family: var(--wk-body);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--wk-ink);
}

/* Shares the icon-box's left edge - centred copy under a left-aligned label
   read as two different alignments stacked. */
.wk-home__text,
.wk-home__text p {
	font-size: 14.5px;
	line-height: 1.6;
	text-align: left;
	color: var(--wk-muted);
}

.wk-home__media img {
	border-radius: 12px;
	aspect-ratio: 5 / 4;
	object-fit: cover;
	width: 100%;
}

/* -------------------------------------------------------- ghee banner --- */

/* The banner is a 2.77:1 painting carrying its own gold ground, so the section
   takes its ratio rather than a guessed height - anything shorter would crop
   the jar's lid and the kadai's base out of a composition that was built to
   sit whole. */
.wk-ghee {
	position: relative;
	overflow: hidden;
	background-color: #fede9b;
}

@media (min-width: 1025px) {
	.wk-ghee {
		aspect-ratio: 2089 / 753;
		min-height: 360px;
		max-height: 620px;
	}
}

/* Below the desktop breakpoint a 2.77:1 band is too thin to read, so the
   painting drops out of the background and a squarer crop of its right side -
   mat, jar, kadai, temples - sits under the copy instead. Its top edge is
   pre-blended to the section colour, which is why there is no seam. */
@media (max-width: 1024px) {
	.wk-ghee {
		background-image: none !important;
		padding-bottom: clamp(230px, 52vw, 540px) !important;
	}

	.wk-ghee::after {
		content: "";
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: clamp(230px, 52vw, 540px);
		background: url("../img/ghee-banner-strip.webp") center bottom / cover
			no-repeat;
	}
}

.wk-ghee__title {
	font-size: clamp(1.7rem, 2.9vw, 2.35rem);
	color: #1d2410;
}

.wk-ghee__text {
	max-width: 34ch;
	font-size: 15.5px;
	color: #3a3520;
}

.wk-ghee__row {
	position: relative;
	z-index: 1;
}

/* --------------------------------------------------------- promise ------ */

.wk-promise {
	background: var(--wk-cream-100);
	position: relative;
}

.wk-promise__title {
	font-size: clamp(1.6rem, 2.6vw, 2.15rem);
	color: var(--wk-ink);
	text-align: center;
}

/* The promise is the section's whole payload - at regular weight it read as a
   caption next to the display-serif heading beside it. */
.wk-promise__lines,
.wk-promise__lines p {
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.85;
	color: #2c2e31;
}

/* Bumped a step so the red line still separates from the now-bold body. */
.wk-promise__lines strong {
	color: var(--wk-red);
	font-weight: 700;
}

/* Stacked under a centred heading and a centred logo, a left-aligned block
   read as a stray column. */
@media (max-width: 1024px) {
	.wk-promise__lines,
	.wk-promise__lines p {
		font-size: 17px;
		line-height: 1.95;
		text-align: center;
	}
}

.wk-promise__logo img {
	width: clamp(96px, 10vw, 132px);
}

/* ------------------------------------------------------------- cta ------ */

/* The card no longer overlaps the footer at all. It and the footer are the
   same green, so its bottom edge was invisible against them and any overlap -
   however small - read as the card sinking into the footer rather than
   deliberately straddling it. It now sits whole on the cream with a clear gap
   below, and the shadow does the lifting instead. */
.wk-cta {
	position: relative;
	z-index: 5;
	margin-inline: auto;
	padding: 34px 52px;
	border-radius: var(--wk-radius-pill);
	background: var(--wk-green-900);
	box-shadow: var(--wk-shadow-lift);
}

.wk-cta__title {
	font-family: var(--wk-body);
	font-size: clamp(1.15rem, 1.8vw, 1.5rem);
	font-weight: 700;
	color: var(--wk-white);
	text-align: center;
}

.wk-cta__text {
	font-size: 14.5px;
	color: rgb(255 255 255 / 78%);
	text-align: center;
}

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

.wk-footer {
	background: var(--wk-green-900);
	color: rgb(255 255 255 / 82%);
}

.wk-footer a {
	text-decoration: none;
	color: rgb(255 255 255 / 82%);
	transition: color 0.18s ease;
}

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

.wk-footer__heading {
	font-family: var(--wk-body);
	font-size: 15px;
	font-weight: 700;
	color: var(--wk-white);
	margin-bottom: 4px;
}

/* Two problems, one plate: the badge is a detailed mark - a farm scene inside
   a ring - so below about 110px its artwork stops resolving, and its wordmark
   is dark green on a green banner, which sinks into the footer's own green.
   A white square restores the contrast the logo was drawn for.
   aspect-ratio + contain squares the plate off a mark that is 1.044:1. */
.wk-footer__logo img {
	box-sizing: content-box;
	width: clamp(112px, 11vw, 148px);
	height: auto;
	aspect-ratio: 1;
	padding: 13px;
	border-radius: 14px;
	background: var(--wk-white);
	object-fit: contain;
}

/* The logo widget centres itself inside the column, so the tagline and the
   social row have to as well - left-aligned under a centred mark they read as
   two separate blocks that missed each other. */
.wk-footer__brand {
	text-align: center;
}

.wk-footer__tagline {
	font-size: 14px;
	color: rgb(255 255 255 / 72%);
}

.wk-footer .elementor-icon-list-item {
	font-size: 14px;
}

.wk-footer__social .elementor-social-icons-wrapper {
	justify-content: center;
}

.wk-footer__social .elementor-social-icon {
	background: transparent;
	border: 1.5px solid rgb(255 255 255 / 55%);
	width: 34px;
	height: 34px;
}

.wk-footer__social .elementor-social-icon:hover {
	background: var(--wk-white);
	color: var(--wk-green-900);
}

.wk-footer__bar {
	border-top: 1px solid rgb(255 255 255 / 14%);
	margin-top: 40px;
	padding-block: 18px;
	font-size: 13.5px;
	text-align: center;
	color: rgb(255 255 255 / 70%);
}

/* Fallback chrome, only rendered when no Elementor template is assigned. */
.wk-fallback-header {
	background: var(--wk-cream-100);
	padding-block: 16px;
}

.wk-fallback-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.wk-fallback-nav {
	display: flex;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.wk-fallback-footer {
	background: var(--wk-green-900);
	color: rgb(255 255 255 / 80%);
	padding-block: 28px;
	text-align: center;
}

.wk-page,
.wk-404 {
	padding-block: var(--wk-section-y);
}

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

@media (max-width: 1024px) {
	.wk-hero__title {
		max-width: 16ch;
	}

	.wk-card__media img {
		height: 148px;
	}

	.wk-home__item:not(:last-child)::after {
		display: none;
	}
}

@media (max-width: 767px) {
	body {
		font-size: 15px;
	}

	.wk-hero {
		min-height: 0;
	}

	.wk-hero::before {
		background: linear-gradient(
			180deg,
			rgb(254 243 232 / 94%) 0%,
			rgb(254 243 232 / 80%) 48%,
			rgb(254 243 232 / 30%) 100%
		);
	}

	.wk-hero__title,
	.wk-hero__text {
		max-width: none;
	}

	.wk-trustbar .wk-trust:not(:last-child)::after {
		display: none;
	}

	/* Full-bleed on a phone, the baked-in cream fade would read as dead space,
	   so the panel zooms past it and anchors on the cow. Elementor prints the
	   cover/centre pair at four-class specificity - hence the !important. */
	.wk-farm__media {
		min-height: 300px;
		background-size: 180% auto !important;
		background-position: 0% 100% !important;
	}

	.wk-farm__media::after {
		background: linear-gradient(
			180deg,
			rgb(254 243 232 / 0%) 62%,
			rgb(254 243 232 / 100%) 100%
		);
	}

	.wk-cta {
		padding: 26px 22px;
		border-radius: 26px;
	}

	.wk-footer {
		padding-top: 84px;
	}
}

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

	.wk-card:hover,
	.wk-btn .elementor-button:hover {
		transform: none;
	}
}

/* ==========================================================================
   Elementor overrides
   Elementor prints its own selectors (.elementor-heading-title, kit
   typography) that outrank a bare .wk-* class, so the design system has to
   restate itself at matching specificity. Grouped here rather than scattered
   so the cascade stays readable.
   ========================================================================== */

/* --- Equal-width flex tracks -------------------------------------------- */
/* Percentage widths plus a flex gap overflow and drop the last item onto a
   new row. Letting the tracks flex from a zero basis keeps them on one line. */

/* Elementor's `.e-con { max-width: min(100%, var(--width)) }` is what forces
   the wrap, not the width - both have to go. */
.wk-products__grid > .e-con,
.wk-home > .e-con > .e-con,
.wk-trustbar .e-con-inner > .e-con,
.wk-promise .e-con > .e-con,
.wk-footer .e-con-inner > .e-con {
	flex: 1 1 0;
	min-width: 0;
	width: auto;
	max-width: none;
}

/* The rule above pins all five columns to an equal share, which is why the
   percentage widths set on them in Elementor have no effect on desktop. Four
   of the five hold short labels; the fifth holds a 27-character email that
   breaks after "gmail.co" at an equal share, so it grows a third again and
   the other four give up a few pixels each. Below 768px the small-screen
   block at the end of this file restacks the columns and resets this. */
@media (min-width: 768px) {
	.wk-footer .e-con-inner > .e-con:last-child {
		flex-grow: 1.35;
	}
}

/* --- Headings ------------------------------------------------------------ */

.wk-section__title .elementor-heading-title {
	font-family: var(--wk-display);
	font-size: clamp(1.75rem, 3vw, 2.45rem);
	color: var(--wk-green-ink);
}

.wk-hero__title .elementor-heading-title {
	font-family: var(--wk-display);
	font-size: clamp(2.1rem, 5vw, 4.5rem);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.018em;
	/* Near-black picks up the banner's warmth and reads brown - the brand
	   green holds its own against the golden scene. */
	color: var(--wk-green-900);
}

.wk-farm__title .elementor-heading-title,
.wk-ghee__title .elementor-heading-title,
.wk-promise__title .elementor-heading-title {
	font-family: var(--wk-display);
}

.wk-card__title .elementor-heading-title,
.wk-home__title .elementor-heading-title,
.wk-footer__heading .elementor-heading-title,
.wk-cta__title .elementor-heading-title {
	font-family: var(--wk-body);
	font-weight: 700;
	letter-spacing: 0;
}

.wk-card__title .elementor-heading-title {
	font-size: 19px;
	font-weight: 600;
	color: var(--wk-ink);
}

.wk-home__title .elementor-heading-title {
	font-size: 15.5px;
	color: var(--wk-ink);
}

.wk-footer__heading .elementor-heading-title {
	font-size: 15px;
	color: var(--wk-white);
}

/* Each column heading is a page link now, and the footer's blanket link colour
   would otherwise dim it to the same 82% white as the lines beneath it - which
   is exactly the contrast the heading exists to break. */
.wk-footer__heading .elementor-heading-title a {
	color: inherit;
}

.wk-footer__heading .elementor-heading-title a:hover {
	color: var(--wk-gold-500);
}

.wk-cta__title .elementor-heading-title {
	font-size: clamp(1.15rem, 1.8vw, 1.5rem);
	color: var(--wk-white);
}

/* --- Hero ---------------------------------------------------------------- */

.wk-hero__title {
	max-width: 15ch;
}

.wk-hero__packs .elementor-widget-image img {
	width: auto;
	max-height: clamp(240px, 27vw, 400px);
	object-fit: contain;
}

/* Three packs staged on the ledge: pouch tallest and in front, ghee jar a
   step back, butter carton lowest. The negative margins let them overlap
   the way physical packs would sit. */
.wk-hero__packs > .elementor-widget-image:nth-child(2) img {
	max-height: clamp(170px, 19vw, 288px);
	margin-left: -8%;
	margin-bottom: 0;
}

/* Hero buttons run a touch larger than the header pill, matching the mockup. */
.wk-hero .wk-btn .elementor-button {
	padding: 16px 30px;
	font-size: 15.5px;
}

.wk-hero__packs > .elementor-widget-image:last-child img {
	max-height: clamp(132px, 15vw, 214px);
	margin-left: -7%;
	margin-bottom: 0;
}

/* The headline is hand-broken into three lines, so it must not re-wrap. */
.wk-hero__title {
	max-width: none;
}

.wk-hero__text {
	max-width: none;
}

/* --- Product cards ------------------------------------------------------- */

.wk-card .elementor-widget-image img {
	height: 168px;
	width: auto;
	object-fit: contain;
	margin-inline: auto;
	display: block;
}

.wk-card__cta .elementor-button {
	width: 100%;
}

/* --- Made for every Indian home ------------------------------------------ */

.wk-home__media .elementor-widget-container,
.wk-home__media img {
	border-radius: 12px;
	width: 100%;
}

.wk-home__media img {
	aspect-ratio: 5 / 4;
	object-fit: cover;
}

/* --- Ghee banner --------------------------------------------------------- */

/* --- CTA + footer -------------------------------------------------------- */

.wk-cta__text .elementor-widget-container,
.wk-cta__text p {
	color: rgb(255 255 255 / 78%);
}

.wk-footer .elementor-icon-list-item a,
.wk-footer .elementor-icon-list-text {
	color: rgb(255 255 255 / 82%);
	font-size: 14px;
}

.wk-footer .elementor-icon-list-icon svg {
	width: 11px;
	height: 11px;
	stroke: var(--wk-gold-500);
	fill: none;
}

/* It is the brand line, not a footnote - at 14px and 72% white it was reading
   as the quietest thing in the footer. */
.wk-footer__tagline,
.wk-footer__tagline p {
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.45;
	text-align: center;
	color: rgb(255 255 255 / 92%);
}

.wk-footer__bar p {
	color: rgb(255 255 255 / 70%);
	font-size: 13.5px;
}

/* --- Trust + value icon boxes -------------------------------------------- */

.wk-trust .elementor-icon-box-title,
.wk-trust .elementor-icon-box-title span,
.wk-value .elementor-icon-box-title,
.wk-value .elementor-icon-box-title span {
	font-family: var(--wk-body);
	font-weight: 700;
	font-size: 15px;
	color: var(--wk-ink);
}

.wk-trust .elementor-icon-box-description {
	font-size: 13.5px;
	color: var(--wk-muted);
	line-height: 1.5;
}

.wk-trust .elementor-icon svg,
.wk-value .elementor-icon svg {
	width: 32px;
	height: 32px;
	stroke: var(--wk-green-ink);
	stroke-width: 1.5;
	fill: none;
}

.wk-home__icon .elementor-icon svg {
	width: 30px;
	height: 30px;
	stroke: var(--wk-gold-500);
	fill: none;
}

.wk-card__features .elementor-icon-list-icon svg {
	width: 13px;
	height: 13px;
	stroke: var(--wk-gold-500);
	fill: none;
}

/* --- Header -------------------------------------------------------------- */

.wk-header .hfe-nav-menu .menu-item a.hfe-menu-item {
	font-family: var(--wk-body);
	font-size: 15.5px;
	font-weight: 600;
	color: var(--wk-ink);
}

@media (max-width: 1024px) {
	.wk-products__grid > .e-con {
		flex: 1 1 30%;
	}

	.wk-home > .e-con > .e-con {
		flex: 1 1 44%;
	}
}

@media (max-width: 767px) {
	.wk-products__grid > .e-con,
	.wk-trustbar .e-con-inner > .e-con {
		flex: 1 1 100%;
	}

	/* Four full-width cards ran the section off the bottom of the screen once
	   the photographs moved to the top, so they pair up instead. The gap is
	   set on the property rather than Elementor's --gap variable, which the
	   generated per-element rule would win back. */
	.wk-home > .e-con {
		gap: 28px 16px;
	}

	.wk-home > .e-con > .e-con {
		flex: 0 0 calc(50% - 8px);
		min-width: 0;
		padding-inline: 0;
	}

	.wk-home__head .elementor-icon-box-title,
	.wk-home__head .elementor-icon-box-title span,
	.wk-home__head .elementor-icon {
		font-size: 15.5px;
	}

	.wk-home__head .elementor-icon-box-wrapper {
		gap: 7px;
	}

	.wk-hero__packs .elementor-widget-image img {
		max-height: 230px;
	}
}

/* The half-width cell is 153px of title at 390px wide and "Tradition in Every
   Spoon" needs 163px, so below roughly 410px it wraps and drops that card's
   copy a line under its neighbour's. Only here does reserving the second line
   buy anything - above it the reserve is pure dead space. */
@media (max-width: 479px) {
	.wk-home__head .elementor-icon-box-wrapper {
		min-height: calc(2 * 1.25 * 15.5px);
	}
}

/* ==========================================================================
   Transparent header
   On the homepage the header floats over the hero photograph with no bar of
   its own. Everywhere else it keeps the cream background, otherwise the
   navigation would sit on white with nothing to separate it.
   ========================================================================== */

.wk-header {
	background: transparent;
}

body.home .wk-header,
body.page-id-58 .wk-header,
body.wk-floating-header .wk-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 300;
	background: transparent;
}

/* Pull the hero up under the floating header. */
body.home #wk-content,
body.page-id-58 #wk-content,
body.wk-floating-header #wk-content {
	margin-top: 0;
}

body.home .wk-hero,
body.page-id-58 .wk-hero {
	padding-top: clamp(120px, 11vw, 156px);
}

/* A whisper of scrim so the logo and links stay readable whatever the
   photograph does behind them. */
body.home .wk-hero::after,
body.page-id-58 .wk-hero::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 190px;
	background: linear-gradient(
		180deg,
		rgb(254 243 232 / 72%) 0%,
		rgb(254 243 232 / 30%) 55%,
		rgb(254 243 232 / 0%) 100%
	);
	pointer-events: none;
	z-index: 0;
}

/* The about masthead is a full-bleed photograph like the homepage hero, so it
   takes the same treatment: pulled up under the floating header, with the
   scrim carrying the logo and links over whatever the picture does. */
body.wk-floating-header .wk-ahero {
	padding-top: clamp(120px, 11vw, 156px);
}

body.wk-floating-header .wk-ahero::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 190px;
	background: linear-gradient(
		180deg,
		rgb(254 243 232 / 72%) 0%,
		rgb(254 243 232 / 30%) 55%,
		rgb(254 243 232 / 0%) 100%
	);
	pointer-events: none;
	z-index: 0;
}

body.wk-floating-header .wk-chero {
	padding-top: clamp(120px, 11vw, 156px);
}

body.wk-floating-header .wk-chero::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 190px;
	background: linear-gradient(
		180deg,
		rgb(254 243 232 / 72%) 0%,
		rgb(254 243 232 / 30%) 55%,
		rgb(254 243 232 / 0%) 100%
	);
	pointer-events: none;
	z-index: 0;
}

/* The products masthead needs the same whisper of scrim the hero carries. */
body.wk-floating-header .wk-phero::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 190px;
	background: linear-gradient(
		180deg,
		rgb(254 243 232 / 72%) 0%,
		rgb(254 243 232 / 30%) 55%,
		rgb(254 243 232 / 0%) 100%
	);
	pointer-events: none;
	z-index: 1;
}

/* Inner pages keep a solid bar. */
body:not(.home):not(.wk-floating-header) .wk-header {
	position: sticky;
	top: 0;
	z-index: 300;
	background: var(--wk-cream-100);
}

.wk-cta-band {
	background: var(--wk-cream-100);
}

.wk-cta-band > .e-con-inner {
	max-width: var(--wk-container);
	width: 100%;
}

.wk-cta {
	max-width: 100%;
}

/* Footer contact lines read as blocks, not wrapped list items. */
.wk-footer .elementor-icon-list-item {
	align-items: flex-start;
}

.wk-footer .elementor-icon-list-icon {
	padding-top: 6px;
}

/* Stand the packs on the wooden ledge in the banner rather than floating them
   in the middle of the scene. */
.wk-hero__packs {
	align-self: flex-end;
	padding-bottom: clamp(10px, 3.4vw, 54px);
}

@media (max-width: 767px) {
	.wk-hero {
		background-position: 62% bottom;
	}

	.wk-hero__packs {
		padding-bottom: 0;
	}
}

/* ==========================================================================
   Mobile chrome
   The header sits over the hero, so it has to stay one tidy row: logo,
   hamburger, cart. Left to wrap it collides with the headline underneath.
   ========================================================================== */

@media (max-width: 767px) {
	.wk-header {
		padding-inline: 18px;
		flex-wrap: nowrap;
		gap: 8px;
	}

	.wk-header > .e-con {
		flex: 0 0 auto;
		width: auto;
		max-width: none;
	}

	/* The nav takes the slack so the logo and cart stay pinned to the edges. */
	.wk-header > .e-con:nth-child(2) {
		flex: 1 1 auto;
		align-items: flex-end;
	}

	.wk-header__logo img {
		height: 76px;
	}

	/* The hero already carries two calls to action, so the header pill is
	   redundant on a small screen and only crowds the logo. Its container
	   goes too - hiding only the button leaves an empty column holding
	   space, which is what stops the burger reaching the edge. */
	.wk-header > .e-con:last-child {
		display: none;
	}

	/* Nav takes whatever the logo does not, so the burger lands hard right. */
	.wk-header > .e-con:nth-child(2) {
		flex: 1 1 auto;
		width: auto;
		max-width: none;
		align-items: flex-end;
	}

	/* Hamburger sits hard against the right edge. HFE prints
	   `.hfe-nav-menu__toggle { margin: 0 auto }` off a four-class selector,
	   so this has to out-specify it rather than just restate the margin. */
	.wk-header .wk-nav.elementor-widget.elementor-widget-navigation-menu
		.hfe-nav-menu__toggle {
		margin: 0 0 0 auto;
	}

	/* Clear the floating header before the headline starts. */
	body.home .wk-hero,
	body.page-id-58 .wk-hero {
		padding-top: 104px;
	}

	/* Trust bars read better two-up than as a tall single column. */
	.wk-trustbar .e-con-inner > .e-con,
	.wk-promise .e-con > .e-con {
		flex: 1 1 42%;
		max-width: none;
	}

	.wk-trust .elementor-icon-box-wrapper {
		text-align: left;
	}

	/* Packs sit side by side under the copy rather than stacking full-bleed. */
	.wk-hero__packs {
		flex-direction: row;
		justify-content: center;
		align-items: flex-end;
	}

	.wk-hero__packs .elementor-widget-image {
		width: auto;
	}

	.wk-hero__packs .elementor-widget-image img {
		max-height: 190px;
	}

	.wk-hero__packs > .elementor-widget-image:last-child img {
		max-height: 118px;
	}
}

@media (max-width: 420px) {
	.wk-header .wk-btn .elementor-button {
		padding: 9px 14px;
		font-size: 12px;
	}
}

@media (max-width: 767px) {
	/* "Shop Now" must stay on one line or it breaks the header row. */
	.wk-header .wk-btn .elementor-button {
		white-space: nowrap;
	}

	.wk-header .wk-btn .elementor-button-text {
		white-space: nowrap;
	}

	/* Hero buttons sit side by side, sized to their labels. */
	.wk-hero .wk-btn {
		width: auto;
	}

	.wk-hero .wk-btn .elementor-button {
		padding: 12px 20px;
		font-size: 13.5px;
	}
}

@media (max-width: 767px) {
	/* Elementor hands every widget --container-widget-width:100% at mobile,
	   which makes flex rows wrap one item per line. These rows are meant to
	   stay side by side. */
	.wk-hero__packs,
	.wk-hero__packs > .elementor-widget-image,
	.wk-hero .wk-btn {
		--container-widget-width: auto;
	}

	.wk-hero__packs {
		flex-wrap: nowrap;
		flex-direction: row;
	}

	.wk-hero__packs > .elementor-widget-image {
		width: auto;
		max-width: none;
		flex: 0 0 auto;
	}

	.wk-hero .wk-btn {
		width: auto;
		max-width: none;
		flex: 0 0 auto;
	}

	/* The two hero buttons sit side by side when they fit and wrap when they
	   do not - forcing one line pushes "Our Story" off the screen. */
	.wk-hero .e-con:has(> .wk-btn) {
		flex-wrap: wrap;
		row-gap: 10px;
	}
}

/* ==========================================================================
   Standing the packs on the table
   The banner's table edge is a fixed 13.2% up from the image's bottom. Giving
   the hero the banner's own aspect ratio makes `cover` a 1:1 mapping, so that
   13.2% becomes a known number of vw and the packs can be planted exactly on
   the wood at any desktop width.
       2400 x 1100 banner -> 1100/2400 = 45.83% of width
       table edge = 13.2% of that = 6.05vw up from the hero's bottom
   ========================================================================== */

@media (min-width: 1025px) {
	body.home .wk-hero,
	body.page-id-58 .wk-hero {
		aspect-ratio: 2400 / 1100;
		min-height: 0;
		padding-bottom: 0;
	}

	/* `align-self: flex-end` only reaches the hero's floor if every container
	   between it and the hero is full height - otherwise it bottoms out inside
	   a shrink-wrapped parent partway up the section. */
	body.home .wk-hero > .e-con,
	body.page-id-58 .wk-hero > .e-con {
		height: 100%;
	}

	body.home .wk-hero > .e-con > .e-con-inner,
	body.page-id-58 .wk-hero > .e-con > .e-con-inner {
		height: 100%;
		align-items: center;
	}

	.wk-hero__packs {
		align-self: flex-end;
		padding-bottom: 6.05vw;
	}
}

/* ==========================================================================
   Mobile drawer
   Replaces HFE's inline accordion. The drawer itself is built by
   assets/js/menu.js; HFE's own toggle and dropdown stay hidden so the two
   never fight.
   ========================================================================== */

.wk-burger,
.wk-drawer {
	display: none;
}

.wk-drawer__list,
.wk-drawer__sublist {
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 1024px) {
	/* The drawer carries cart and checkout from here down, so the header pair
	   goes - otherwise the same two links sit in two places at once. Note the
	   whole column is hidden again at 767px by the mobile-chrome block; this
	   is the wider of the two rules and the one that matters. */
	.wk-cart-actions {
		display: none;
	}

	/* HFE's own chrome steps aside. */
	.wk-header .wk-nav .hfe-nav-menu__toggle,
	.wk-header .wk-nav nav.hfe-dropdown,
	.wk-header .wk-nav nav.hfe-dropdown-expandible {
		display: none !important;
	}

	.wk-burger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 46px;
		height: 46px;
		margin-left: auto;
		padding: 0;
		border: 0;
		border-radius: 12px;
		background: transparent;
		color: var(--wk-green-900);
		cursor: pointer;
	}

	.wk-burger__box {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 24px;
		height: 15px;
	}

	.wk-burger__bar {
		display: block;
		height: 2px;
		width: 100%;
		border-radius: 2px;
		background: currentColor;
		transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
			opacity 0.18s ease;
	}

	/* Bars fold into a cross while the drawer is open. */
	.wk-burger[aria-expanded="true"] .wk-burger__bar:nth-child(1) {
		transform: translateY(6.5px) rotate(45deg);
	}

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

	.wk-burger[aria-expanded="true"] .wk-burger__bar:nth-child(3) {
		transform: translateY(-6.5px) rotate(-45deg);
	}

	.wk-drawer {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1000;
	}

	/* `display: block` above would otherwise defeat the hidden attribute and
	   leave an invisible backdrop swallowing every click on the page. */
	.wk-drawer[hidden] {
		display: none;
	}

	.wk-drawer__backdrop {
		position: absolute;
		inset: 0;
		background: rgb(6 57 32 / 52%);
		opacity: 0;
		transition: opacity 0.32s ease;
	}

	.wk-drawer.is-open .wk-drawer__backdrop {
		opacity: 1;
	}

	.wk-drawer__panel {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: min(84vw, 360px);
		display: flex;
		flex-direction: column;
		background: var(--wk-cream-100);
		box-shadow: -24px 0 60px -24px rgb(6 57 32 / 45%);
		transform: translateX(100%);
		transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

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

	.wk-drawer__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: nowrap;
		gap: 16px;
		padding: 18px 20px 12px;
	}

	/* Written against the full ancestor chain on purpose. The drawer and its
	   logo are built by menu.js, so a single-class rule is the weakest thing on
	   the page - WooCommerce and checkout pull in core's block-library sheet,
	   which outranked it and let the logo render at its natural 320x306. */
	.wk-drawer .wk-drawer__head img.wk-drawer__logo {
		width: auto;
		height: 58px;
		max-width: 60%;
		max-height: 58px;
		object-fit: contain;
	}

	.wk-drawer__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: 42px;
		height: 42px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: rgb(6 57 32 / 8%);
		color: var(--wk-green-900);
		cursor: pointer;
		transition: background-color 0.2s ease;
	}

	.wk-drawer__close:hover {
		background: rgb(6 57 32 / 16%);
	}

	.wk-drawer__close svg {
		width: 20px;
		height: 20px;
	}

	.wk-drawer__item {
		border-top: 1px solid rgb(6 57 32 / 10%);
	}

	.wk-drawer__row {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.wk-drawer__link {
		display: block;
		flex: 1 1 auto;
		padding: 15px 20px;
		font-family: var(--wk-body);
		font-size: 16.5px;
		font-weight: 600;
		color: var(--wk-green-900);
		text-decoration: none;
	}

	.wk-drawer__link[aria-current="page"] {
		color: var(--wk-gold-500);
	}

	.wk-drawer__chevron {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 46px;
		height: 46px;
		margin-right: 8px;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--wk-green-900);
		cursor: pointer;
	}

	.wk-drawer__chevron svg {
		width: 18px;
		height: 18px;
		transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	.wk-drawer__chevron[aria-expanded="true"] svg {
		transform: rotate(180deg);
	}

	.wk-drawer__sublist {
		height: 0;
		overflow: hidden;
		background: rgb(6 57 32 / 4%);
		transition: height 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	.wk-drawer__sublist .wk-drawer__link {
		padding: 12px 20px 12px 34px;
		font-size: 15px;
		font-weight: 500;
	}

	.wk-drawer__sublist .wk-drawer__item {
		border-top: 1px solid rgb(6 57 32 / 7%);
	}

	/* Cart and checkout close the menu out. `margin-top: auto` floats them to
	   the foot of the panel on a short menu and lets them sit directly under
	   the last item on a long one. */
	.wk-drawer__actions {
		margin-top: auto;
		border-top: 1px solid rgb(6 57 32 / 14%);
	}

	.wk-drawer__actions .wk-drawer__item:first-child {
		border-top: 0;
	}

	.wk-drawer__link--action {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.wk-drawer__link--action .wk-icon {
		width: 21px;
		height: 21px;
		flex: none;
		color: var(--wk-green-800);
	}

	.wk-drawer__label {
		flex: 1 1 auto;
	}

	.wk-drawer__count {
		display: inline-block;
		min-width: 22px;
		padding: 2px 8px;
		border-radius: 999px;
		background: var(--wk-gold-500);
		color: var(--wk-white);
		font-size: 12.5px;
		font-weight: 700;
		line-height: 1.5;
		text-align: center;
	}

	/* Page must not scroll behind the drawer. */
	body.wk-drawer-open {
		overflow: hidden;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wk-drawer__panel,
	.wk-drawer__backdrop,
	.wk-drawer__sublist,
	.wk-drawer__chevron svg,
	.wk-burger__bar {
		transition: none;
	}
}

/* ==========================================================================
   Long unbroken strings
   The footer email is a single 27-character token; on a narrow screen it
   pushed the layout wider than the viewport, which is what produced the
   white gutter when swiping sideways.
   ========================================================================== */

.wk-footer .elementor-icon-list-text,
.wk-footer .elementor-icon-list-item {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* ==========================================================================
   Hero copy on phones
   The desktop clamps bottom out on a narrow screen, so the headline sat at
   its minimum and left a band of empty cream down the right. These sizes are
   tuned off the longest hand-broken line, "Pure Goodness,", so the copy fills
   the column at every phone width without re-wrapping.
   ========================================================================== */

@media (max-width: 600px) {
	/* Reclaim the nested container padding - three levels of 10-24px inline
	   padding were eating 88px of a 360px screen, which is what forced the
	   headline down to its floor. */
	body.home .wk-hero,
	body.page-id-58 .wk-hero {
		padding-inline: 18px;
	}

	.wk-hero > .e-con > .e-con-inner,
	.wk-hero .e-con-inner > .e-con {
		padding-inline: 0;
	}

	/* Sized off the longest hand-broken line ("From Our Farm") so the three
	   line breaks survive at every phone width. */
	.wk-hero__title .elementor-heading-title {
		font-size: min(11.6vw, 52px);
		line-height: 1.06;
		letter-spacing: -0.022em;
	}

	.wk-hero__text,
	.wk-hero__text p {
		font-size: clamp(16px, 4.5vw, 19px);
		font-weight: 500;
		line-height: 1.5;
	}

	/* Tighter stack: the headline, standfirst and buttons read as one block
	   rather than three islands. */
	.wk-hero .e-con-inner > .e-con:first-child {
		--gap: 16px 16px;
		--row-gap: 16px;
	}

	.wk-hero .wk-btn .elementor-button {
		padding: 15px 24px;
		font-size: 14.5px;
		font-weight: 600;
	}

	body.home .wk-hero,
	body.page-id-58 .wk-hero {
		padding-top: 96px;
	}
}

/* Tablet keeps a proportional headline rather than jumping to the desktop cap. */
@media (min-width: 601px) and (max-width: 1024px) {
	.wk-hero__title .elementor-heading-title {
		font-size: clamp(44px, 7.4vw, 66px);
	}

	.wk-hero__text,
	.wk-hero__text p {
		font-size: clamp(17px, 2.2vw, 20px);
		font-weight: 500;
	}
}

/* ==========================================================================
   Button alignment and CTA arrow
   Elementor gives every container 10px of inline padding, so a button row
   sits 10px right of the heading and body copy above it. Zeroing it on the
   hero and ghee rows lines all three flush left.
   ========================================================================== */

.wk-hero .e-con:has(> .wk-btn),
.wk-ghee .e-con:has(> .wk-btn) {
	padding-inline: 0;
}

/* Arrow inherits the label's colour and nudges forward on hover. */
.wk-btn .elementor-button-icon svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.wk-btn .elementor-button:hover .elementor-button-icon svg {
	transform: translateX(3px);
}

.wk-btn .elementor-button-content-wrapper {
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

@media (prefers-reduced-motion: reduce) {
	.wk-btn .elementor-button:hover .elementor-button-icon svg {
		transform: none;
	}
}

/* ==========================================================================
   Trust bar
   Four items were hugging the left of their 25% tracks, which pooled the
   slack into one wide gap on the right. Centring each item in its track
   distributes the space evenly and lets the labels carry more weight.
   ========================================================================== */

.wk-trustbar .e-con-inner {
	max-width: var(--wk-container);
}

.wk-trustbar .e-con-inner > .e-con {
	align-items: center;
	padding-inline: 0;
}

.wk-trust .elementor-icon-box-wrapper {
	display: flex;
	align-items: center;
	gap: 14px;
	text-align: left;
}

.wk-trust .elementor-icon-box-icon {
	margin: 0;
	flex: 0 0 auto;
}

.wk-trust .elementor-icon-box-title,
.wk-trust .elementor-icon-box-title span {
	font-family: var(--wk-body);
	font-size: clamp(15px, 1.32vw, 19px);
	font-weight: 700;
	line-height: 1.32;
	color: var(--wk-green-900);
	margin: 0;
}

/* Font Awesome renders as a glyph, so this is font-size not width/height. */
.wk-trust .elementor-icon {
	color: var(--wk-green-800);
	line-height: 1;
}

.wk-trustbar .wk-trust:not(:last-child)::after {
	right: -6%;
}

@media (max-width: 767px) {
	.wk-trust .elementor-icon-box-wrapper {
		gap: 12px;
	}

	.wk-trust .elementor-icon svg {
		width: 27px;
		height: 27px;
	}
}

/* The other Font Awesome icons need the same glyph-based sizing. */
.wk-value .elementor-icon,
.wk-home__icon .elementor-icon {
	line-height: 1;
}

.wk-value .elementor-icon {
	font-size: 26px;
	color: var(--wk-green-800);
}

.wk-home__icon .elementor-icon {
	font-size: 28px;
	color: var(--wk-gold-500);
}

.wk-card__features .elementor-icon-list-icon,
.wk-footer .elementor-icon-list-icon {
	font-size: 12px;
}

.wk-card__features .elementor-icon-list-icon i {
	color: var(--wk-gold-500);
}

.wk-footer .elementor-icon-list-icon i {
	color: var(--wk-gold-500);
}

/* ==========================================================================
   Font Awesome icons
   Elementor inlines FA as <svg class="e-font-icon-svg">, a filled path - so
   these are sized with width/height and coloured with fill, never stroke.
   ========================================================================== */

.elementor-icon svg.e-font-icon-svg {
	fill: currentColor;
	stroke: none;
	width: 1em;
	height: 1em;
}

.wk-trust .elementor-icon,
.wk-trust .elementor-icon svg {
	color: var(--wk-green-800);
}

.wk-trust .elementor-icon svg {
	width: clamp(26px, 2.4vw, 38px);
	height: clamp(26px, 2.4vw, 38px);
}

.wk-value .elementor-icon svg {
	width: 32px;
	height: 32px;
	color: var(--wk-green-800);
}

.wk-home__icon .elementor-icon svg {
	width: 34px;
	height: 34px;
	color: var(--wk-gold-500);
}

.wk-card__features .elementor-icon-list-icon svg,
.wk-footer .elementor-icon-list-icon svg {
	width: 13px;
	height: 13px;
	fill: var(--wk-gold-500);
	stroke: none;
}

.wk-btn .elementor-button-icon svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
	stroke: none;
}

/* Give the trust bar a little more vertical room now the type is larger. */
.wk-trustbar {
	padding-block: 26px;
}

@media (max-width: 767px) {
	/* Two-up on a phone: labels stay on two lines and the icons keep their
	   scale rather than shrinking to fit four across. */
	.wk-trust .elementor-icon-box-title,
	.wk-trust .elementor-icon-box-title span {
		font-size: 15px;
	}

	.wk-trustbar {
		padding-block: 22px;
	}
}

/* Elementor sets `align-items: start` on the icon-box wrapper from its own
   widget selector, which parks the icon against the first line of a two-line
   label. Centre it against the whole text block instead. */
.wk-trust.elementor-widget-icon-box .elementor-icon-box-wrapper {
	align-items: center;
}

.wk-trust.elementor-widget-icon-box .elementor-icon-box-icon {
	align-self: center;
	margin-bottom: 0;
}

.wk-trust.elementor-widget-icon-box .elementor-icon-box-content {
	align-self: center;
}

/* ==========================================================================
   Product cards
   The five cards carry different amounts of copy, so their Add to Cart
   buttons landed at different heights. Making each card a flex column and
   pushing the CTA to the bottom lines all five up on one row, whatever the
   description length.
   ========================================================================== */

.wk-products__grid > .e-con {
	display: flex;
	flex-direction: column;
}

.wk-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* Every card must actually fill the row's height before a bottom-aligned CTA
   means anything - Elementor's own align-self/height values otherwise let a
   short card shrink-wrap. */
.wk-products__grid {
	align-items: stretch;
}

.wk-products__grid > .e-con.wk-card {
	align-self: stretch;
	height: auto;
}

/* The action pair carries the auto margin, so the slack lands directly above
   it whatever mix of widgets sits higher up the card. */
.wk-card > .wk-card__cta,
.wk-card > .wk-card__actions {
	margin-top: auto;
	padding: 14px 0 0;
	width: 100%;
	max-width: none;
}

/* Breathing room between the size chips and the button. */
.wk-card__sizes {
	margin-bottom: 4px;
}

@media (max-width: 767px) {
	.wk-card__avail {
		margin-bottom: 2px;
	}

	.wk-card__sizes {
		margin-bottom: 10px;
	}

	.wk-card__cta {
		margin-top: 16px;
	}

	.wk-chip {
		padding: 7px 13px;
	}
}

/* ------------------------------------------------- the farm, small screens ---
   Stacked, the copy column owns the whole width, so it gets the same treatment
   the hero got: bigger type, one shared left edge for headline, standfirst,
   values and button, and the four values folded to a 2x2 grid - centred in
   their own cells, the way the trust bar under the hero reads - so the CTA
   stays near the fold instead of four rows below it. */

@media (max-width: 767px) {
	.wk-farm__title .elementor-heading-title {
		font-size: min(9.4vw, 40px);
		line-height: 1.08;
		letter-spacing: -0.02em;
	}

	.wk-farm__text,
	.wk-farm__text p {
		max-width: none;
		font-size: clamp(16px, 4.3vw, 19px);
		font-weight: 500;
		line-height: 1.55;
	}

	/* Elementor's default 10px on every nested container would reopen the
	   indent the copy column just closed. */
	.wk-farm__copy > .e-con,
	.wk-farm__values > .e-con {
		padding-inline: 0;
	}

	.wk-value .elementor-icon svg {
		width: 36px;
		height: 36px;
	}

	.wk-value .elementor-icon-box-title,
	.wk-value .elementor-icon-box-title span {
		font-size: 16.5px;
	}

	.wk-farm__cta {
		margin-top: 6px;
	}

	.wk-farm .wk-btn .elementor-button {
		padding: 15px 26px;
		font-size: 15px;
	}
}

/* -------------------------------------------------- footer, small screens ---
   Five columns sharing one row is what shredded the footer on a phone: the
   equal-track rule up in the Elementor overrides pins every column to
   `flex: 1 1 0`, so they kept collapsing until "Milk" wrapped one letter per
   line. That rule sits later in this file than the mobile block above, so a
   copy of these selectors up there lost the cascade outright - a media query
   adds no specificity. Hence this block, at the end, where it wins.

   Brand takes the full width; the four link lists pair up 2x2, reordered so
   the two long lists sit together and the two short ones do. In DOM order the
   five-item Products list would sit beside the one-item About Us list and
   leave a hole in the middle of the grid. */

@media (max-width: 767px) {
	.wk-footer .e-con-inner > .e-con {
		flex: 1 1 calc(50% - 14px);
		min-width: 0;
	}

	.wk-footer .e-con-inner > .e-con:first-child {
		flex: 1 1 100%;
		order: 0;
	}

	.wk-footer .e-con-inner > .e-con:nth-child(2) {
		order: 1;                       /* Products */
	}

	.wk-footer .e-con-inner > .e-con:nth-child(4) {
		order: 2;                       /* Support  */
	}

	/* About Us is a single link and Contact Us is a phone number, an email
	   address and a postal address - none of which survive half a phone width.
	   Both take the full row, which is also what closes the gap that opened
	   under the shorter of the two paired columns. */
	.wk-footer .e-con-inner > .e-con:nth-child(3) {
		flex: 1 1 100%;
		order: 3;                       /* About Us */
	}

	.wk-footer .e-con-inner > .e-con:nth-child(5) {
		flex: 1 1 100%;
		order: 4;                       /* Contact  */
	}

	/* Only the email is genuinely unbreakable; everything else now has the
	   width it needs, so the type stays readable. */
	.wk-footer .elementor-icon-list-item a,
	.wk-footer .elementor-icon-list-text {
		font-size: 14px;
		overflow-wrap: anywhere;
	}
}

/* ==========================================================================
   Products listing page
   One flourish and then quiet: the masthead runs the farm banner across the
   band and cuts a cream wedge into it on a slant, carrying the crumbs, the
   title and the standfirst. Everything below is the homepage's own furniture -
   the same cards, the same four promises - given a little more room.
   ========================================================================== */

/* ------------------------------------------------------------ masthead --- */

/* The picture carries its own cream fade down the left, so there is no panel
   and no wedge here - the copy sits straight on the photograph and the header
   floats over it, exactly as the homepage hero works. */
.wk-phero {
	position: relative;
	overflow: hidden;
	min-height: clamp(300px, 25vw, 420px);
	background-color: var(--wk-cream-100);
	background-size: cover;
}

/* Given the banner's own 2.63:1, `cover` becomes a 1:1 mapping and the whole
   scene survives - cow, farmhouse and pasture included. Shorter than this and
   cover keeps the sky and throws away everything the picture is of. The cap
   stops an ultrawide turning the masthead into a second hero. */
@media (min-width: 1025px) {
	.wk-phero {
		aspect-ratio: 2032 / 774;
		min-height: 400px;
		max-height: 560px;
	}
}

.wk-phero__copy {
	position: relative;
	z-index: 2;
}

/* The banner's own fade clears the left third at its native 2.63:1. A cover
   crop on a wider viewport slides the scene left and eats into that, so a
   matching wash tops the fade back up - light enough that it never dulls the
   pasture. */
.wk-phero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		96deg,
		rgb(254 243 232 / 82%) 0%,
		rgb(254 243 232 / 52%) 26%,
		rgb(254 243 232 / 10%) 44%,
		rgb(254 243 232 / 0%) 60%
	);
	pointer-events: none;
}

.wk-crumbs {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13.5px;
	font-weight: 500;
	color: #45484c;
}

.wk-crumbs a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	text-decoration: none;
	transition: color 0.18s ease;
}

.wk-crumbs a:hover {
	color: var(--wk-green-800);
}

/* The house is drawn, not marked up, so retyping the crumbs in the editor
   cannot lose it. */
.wk-crumbs a::before {
	content: "";
	width: 13px;
	height: 13px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23063920' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5.5 9.7V20h13V9.7'/%3E%3Cpath d='M10 20v-5.4h4V20'/%3E%3C/svg%3E")
		center / contain no-repeat;
}

.wk-crumbs__sep {
	color: rgb(23 24 26 / 34%);
}

.wk-crumbs [aria-current] {
	font-weight: 600;
	color: var(--wk-green-900);
}

.wk-phero__title .elementor-heading-title {
	font-family: var(--wk-display);
	font-size: clamp(2.15rem, 4.2vw, 3.3rem);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -0.02em;
	color: var(--wk-green-ink);
}

/* The gold rule belongs to the heading, so it is drawn off it rather than set
   as a second widget the client would have to keep in step. */
.wk-phero__title::after {
	content: "";
	display: block;
	width: min(320px, 100%);
	height: 2px;
	margin-top: 13px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--wk-gold-500), rgb(233 161 59 / 0%));
}

.wk-phero__lede,
.wk-phero__lede p {
	max-width: 34ch;
	font-size: 15px;
	line-height: 1.62;
	color: #3a3d41;
}

/* --------------------------------------------------------- filter bar --- */

.wk-filterbar {
	background: var(--wk-white);
}

/* Both tracks size to their content; space-between on the row puts the pills
   hard left and the sort hard right. */
.wk-filters,
.wk-sort {
	width: auto;
	max-width: none;
	padding-inline: 0;
}

.wk-filter .elementor-button {
	display: inline-flex;
	align-items: center;
	padding: 11px 22px;
	border: 1px solid #e6e4e0;
	border-radius: var(--wk-radius-pill);
	background: var(--wk-white);
	color: #24262a;
	font-family: var(--wk-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease,
		border-color 0.2s ease;
}

.wk-filter .elementor-button:hover {
	border-color: var(--wk-green-800);
	color: var(--wk-green-800);
}

/* Transparent rather than none, so the pill does not resize as it activates. */
.wk-filter--active .elementor-button,
.wk-filter--active .elementor-button:hover {
	border-color: transparent;
	background: var(--wk-green-800);
	color: var(--wk-white);
}

.wk-sort__label,
.wk-sort__label p {
	font-size: 14px;
	font-weight: 500;
	color: var(--wk-muted);
	white-space: nowrap;
}

.wk-sort__select {
	appearance: none;
	min-width: 172px;
	padding: 11px 42px 11px 16px;
	border: 1px solid #e6e4e0;
	border-radius: 9px;
	background: var(--wk-white)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6068' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
		no-repeat right 14px center / 13px;
	font-family: var(--wk-body);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	color: #24262a;
	cursor: pointer;
}

.wk-sort__select:hover {
	border-color: #d5d2cd;
}

/* -------------------------------------------------------- the listing --- */

/* The packs get more room here than in the homepage strip - they are the
   reason anyone opened this page. */
.wk-plist .wk-card .elementor-widget-image img {
	height: 210px;
}

.wk-plist .wk-card__title .elementor-heading-title {
	font-size: 21px;
}

/* Elementor gives every container `display: flex`, which outranks the hidden
   attribute the filter sets - so a filtered-out card needs saying twice. */
.wk-plist .wk-card[hidden] {
	display: none !important;
}

/* Hiding four of the five cards leaves the survivor alone in a `flex: 1 1 0`
   row, which hands it the whole width - the pack balloons and the buttons run
   the width of the page. Pinning the basis to the track the card already
   occupies, and refusing to grow, keeps a filtered card the size it was,
   left-aligned under its pill. The tablet track becomes a fixed third for the
   same reason - the row of two under the row of three used to grow wider than
   the row above it. */
.wk-plist .wk-products__grid > .e-con {
	flex: 0 1 calc((100% - 4 * 18px) / 5);
}

@media (max-width: 1024px) {
	.wk-plist .wk-products__grid > .e-con {
		flex: 0 1 calc((100% - 2 * 18px) / 3);
	}
}

/* A card a row already, so a filtered one is meant to keep the full width. */
@media (max-width: 767px) {
	.wk-plist .wk-products__grid > .e-con {
		flex: 1 1 100%;
	}
}

/* The cart leads the label and the pair sits centred, rather than the icon
   drifting to one edge of a full-width pill. */
.wk-card__cta .elementor-button-content-wrapper {
	justify-content: center;
	gap: 10px;
}

.wk-card__cta .elementor-button-icon svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
	stroke: none;
}

/* ------------------------------------------------------ the four promises --- */

.wk-pledge {
	position: relative;
	overflow: hidden;
	border-radius: 18px;
}

/* Decoration, not content: drawn here so the client's four promises stay the
   only editable things in the band. */
.wk-pledge::after {
	content: "";
	position: absolute;
	right: 16px;
	bottom: 2px;
	width: 212px;
	height: 92%;
	background: url("https://sienna-wombat-141419.hostingersite.com/wp-content/uploads/2026/09/pledge-lineart.webp")
		right bottom / contain no-repeat;
	/* The drawing carries the mockup's own near-white ground, which showed as
	   a pale rectangle against the band. `darken` takes the per-channel
	   minimum, so a ground lighter than the band resolves to the band. */
	mix-blend-mode: darken;
	pointer-events: none;
}

/* The divider sits 10px inside each track's right edge, so the track needs
   real padding there - at zero the description ran to within a few pixels of
   the rule and read as though it were crossing into the next promise. */
.wk-pledge > .e-con {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	width: auto;
	max-width: none;
	padding-block: 0;
	padding-inline: 0 34px;
}

.wk-pledge > .e-con:not(:last-child)::after {
	content: "";
	position: absolute;
	right: 10px;
	top: 12%;
	width: 1px;
	height: 76%;
	background: rgb(233 161 59 / 42%);
}

.wk-pledge__item.elementor-widget-icon-box .elementor-icon-box-wrapper {
	display: flex;
	align-items: center;
	gap: 15px;
	text-align: left;
}

.wk-pledge__item.elementor-widget-icon-box .elementor-icon-box-icon {
	margin: 0;
	flex: 0 0 auto;
	align-self: center;
}

/* The gold ring is the band's one ornament - it is what tells these four apart
   from the plainer trust bar under the homepage hero. */
.wk-pledge__item .elementor-icon {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border: 1.6px solid var(--wk-gold-500);
	border-radius: 50%;
	color: var(--wk-green-900);
	line-height: 1;
}

.wk-pledge__item .elementor-icon svg.e-font-icon-svg {
	width: 26px;
	height: 26px;
	fill: currentColor;
	stroke: none;
}

.wk-pledge__item .elementor-icon-box-title,
.wk-pledge__item .elementor-icon-box-title span {
	margin: 0 0 3px;
	font-family: var(--wk-body);
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wk-green-900);
}

.wk-pledge__item .elementor-icon-box-description {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--wk-muted);
}

/* ------------------------------------------- products page, small screens --- */

@media (max-width: 1024px) {
	/* The wedge is a share of the viewport but the standfirst is a fixed
	   measure, so below about 1100px the slant starts cutting into the last
	   word of each line. The wedge takes a bigger share and the measure gives
	   a little back. */
	/* A cover crop this narrow slides the cow out of frame, so the scene is
	   anchored right and the copy leans on the wash rather than on the
	   picture's own fade. */
	.wk-phero {
		min-height: 320px;
		background-position: 78% center !important;
	}

	.wk-phero::before {
		background: linear-gradient(
			100deg,
			rgb(254 243 232 / 92%) 0%,
			rgb(254 243 232 / 74%) 34%,
			rgb(254 243 232 / 24%) 58%,
			rgb(254 243 232 / 0%) 78%
		);
	}

	.wk-phero__lede,
	.wk-phero__lede p {
		max-width: 30ch;
		font-size: 14.5px;
	}

	/* Two-up, and the drawing gives its lane back to the promises. */
	.wk-pledge::after {
		display: none;
	}

	.wk-pledge > .e-con {
		flex: 1 1 44%;
	}

	.wk-pledge > .e-con:nth-child(2n)::after {
		display: none;
	}
}

@media (max-width: 767px) {
	/* Portrait, the pasture is mostly out of frame whatever the anchor, so the
	   wash carries nearly the whole width and the picture reads as ground
	   rather than as a scene - which is what keeps the headline legible. */
	.wk-phero {
		min-height: 300px;
		background-position: 72% center !important;
	}

	.wk-phero::before {
		background: linear-gradient(
			172deg,
			rgb(254 243 232 / 94%) 0%,
			rgb(254 243 232 / 82%) 46%,
			rgb(254 243 232 / 34%) 78%,
			rgb(254 243 232 / 12%) 100%
		);
	}

	.wk-phero__title .elementor-heading-title {
		font-size: min(10.5vw, 44px);
	}

	.wk-phero__lede,
	.wk-phero__lede p {
		max-width: none;
		font-size: 15.5px;
	}

	.wk-sort {
		justify-content: flex-start;
	}

	.wk-sort__select {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* 2x2. Beside the copy the ring eats two thirds of half a phone width, so
	   it moves above it and the whole cell centres - which gives the promise
	   the full column to wrap in and lines the four rings up on a grid. */
	.wk-pledge > .e-con {
		flex: 1 1 calc(50% - 8px);
		padding-inline: 0;
	}

	.wk-pledge > .e-con::after {
		display: none;
	}

	.wk-pledge__item.elementor-widget-icon-box .elementor-icon-box-wrapper {
		flex-direction: column;
		align-items: center;
		gap: 9px;
		text-align: center;
	}

	.wk-pledge__item .elementor-icon {
		width: 48px;
		height: 48px;
	}

	.wk-pledge__item .elementor-icon svg.e-font-icon-svg {
		width: 22px;
		height: 22px;
	}

	.wk-pledge__item .elementor-icon-box-title,
	.wk-pledge__item .elementor-icon-box-title span {
		font-size: 14.5px;
	}

	.wk-pledge__item .elementor-icon-box-description {
		font-size: 13px;
		line-height: 1.45;
	}
}

/* ==========================================================================
   About page
   The mockup sets this page on warm paper rather than the homepage's white,
   and hangs a gold flourish off every section heading. Both are drawn here so
   the client's editable surface stays the words and the photographs.
   ========================================================================== */

.wk-story,
.wk-diff,
.wk-process,
.wk-apromise-wrap {
	background: var(--wk-paper);
}

/* Elementor's kit puts 10px of block padding on every container that has none
   of its own. Across five nested rows that is a hundred stray pixels down the
   page, so the columns that only exist to carry a width are zeroed here rather
   than each being given an explicit padding the client could then edit. */
.wk-ahero__copy,
.wk-story__copy,
.wk-story__media,
.wk-diff__row,
.wk-diff__col,
.wk-process__row,
.wk-process__step,
.wk-apromise > .e-con {
	padding-block: 0;
}

/* The band closes the page against the footer, so it runs to the viewport
   edges. Its padding lives here rather than in the template: that is what lets
   the promises line up on the 1280 container while the cream keeps going. */
.wk-pledge--bleed .wk-pledge__item .elementor-icon {
	border: 0;
	background: var(--wk-khaki-100);
}

/* The drawing's ground is a shade lighter than the band it sits on, so without
   a blend it prints as a pale rectangle in the corner. */
.wk-pledge--bleed::after {
	mix-blend-mode: darken;
}

.wk-pledge--bleed {
	border-radius: 0;
	padding-block: 26px;
	padding-inline:
		max(24px, calc((100% - 1280px) / 2))
		max(24px, calc((100% - 1280px) / 2 + 200px));
}

/* --- ruled section headings ---------------------------------------------- */

/* The title becomes an inline-flex box so the arrows sit against the words and
   travel with them when the client retitles a section. Zeroing the wrapper's
   line-height is what stops that box picking up a line box's leading - about
   thirty stray pixels under every heading on the page. */
.wk-rule {
	line-height: 0;
}

.wk-rule .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 13px;
	font-size: clamp(1.45rem, 2.4vw, 2rem);
	line-height: 1.2;
}

.wk-rule .elementor-heading-title::before,
.wk-rule .elementor-heading-title::after {
	content: "";
	flex: 0 0 auto;
	width: 40px;
	height: 10px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10'%3E%3Cpath d='M1 5h34M29 1.7 34.5 5 29 8.3' fill='none' stroke='%23e9a13b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
		center / contain no-repeat;
}

/* Both arrows point at the title, so the right-hand one is the same drawing
   flipped rather than a second asset. */
.wk-rule .elementor-heading-title::after {
	transform: scaleX(-1);
}

/* --- hero ---------------------------------------------------------------- */

.wk-ahero {
	position: relative;
	/* The same band as the products and contact mastheads, so the three inner
	   pages open at one height rather than this one running on to the depth of
	   the homepage hero. The photograph is cropped to suit, not the other way
	   round. */
	min-height: clamp(400px, 34vw, 520px);
	/* Background position and size come from the template: Elementor prints
	   them off a three-class selector that a wk-* class cannot outrank. */
	background-color: var(--wk-paper);
	overflow: hidden;
}

/* The copy sits on the scene's hazy left third; the wash only has to carry it
   the rest of the way, so it clears entirely before the middle of the frame. */
.wk-ahero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		96deg,
		rgb(253 250 244 / 95%) 0%,
		rgb(253 250 244 / 88%) 24%,
		rgb(253 250 244 / 46%) 45%,
		rgb(253 250 244 / 0%) 66%
	);
	pointer-events: none;
}

.wk-ahero > .e-con {
	position: relative;
	z-index: 1;
}

/* The copy stands off the page margin rather than hugging it: on the mockup it
   floats in the hazy part of the valley, which is what keeps the scene from
   reading as a backdrop pasted behind a column of text. */
.wk-ahero__copy {
	/* One measure for the whole block. The heading, the rule, the tagline, the
	   paragraph and the badge all start on the same rail and finish on the same
	   edge - the mockup centres the first three over the rest, which reads as a
	   misalignment once the column is this wide. */
	--wk-ahero-indent: clamp(0px, 7vw, 108px);
	--wk-ahero-measure: 25rem;

	/* The measure is capped on the column, not on each widget: Elementor holds
	   every widget inside a container at max-width 100% and that cannot be
	   outranked from here. Capping the column gets the same result and leaves
	   one number to change. */
	max-width: calc(var(--wk-ahero-indent) + var(--wk-ahero-measure));
	padding-left: var(--wk-ahero-indent);
	padding-right: 0;
}

.wk-ahero__copy > .elementor-widget {
	text-align: left;
}

.wk-ahero__title .elementor-heading-title {
	font-family: var(--wk-display);
	/* Matched to .wk-chero__title and .wk-phero__title. At 4.6rem this read as
	   a second homepage hero rather than as one of the inner pages. */
	font-size: clamp(2rem, 3.7vw, 3.2rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.015em;
	color: var(--wk-green-ink);
}

.wk-ahero__kicker,
.wk-ahero__kicker p {
	font-family: var(--wk-display);
	font-size: clamp(1.1rem, 1.6vw, 1.45rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--wk-brown-700);
}

/* The rule and its leaf belong to this line, so they are drawn off it instead
   of standing as a widget the client could drag away from it. */
.wk-ahero__kicker::before {
	content: "";
	display: block;
	width: 100%;
	height: 16px;
	margin: 0 0 9px;
	background: var(--wk-leaf-rule);
}

.wk-ahero__text,
.wk-ahero__text p {
	max-width: none;
	font-size: clamp(14px, 1.05vw, 15.5px);
	line-height: 1.62;
	color: #26282b;
}

/* --- hero badge ---------------------------------------------------------- */

/* The panel hugs its three lines rather than filling the measure - stretched
   to the paragraph's right edge it was mostly empty khaki. */
.wk-ahero__badge {
	width: fit-content;
	margin-top: 12px;
	padding: 20px 38px 20px 32px;
	border-radius: 12px;
	background: var(--wk-khaki-100);
}

.wk-ahero__badge .elementor-icon-box-wrapper {
	display: flex;
	align-items: center;
	gap: 20px;
	text-align: left;
}

.wk-ahero__badge .elementor-icon-box-icon {
	flex: 0 0 auto;
	margin: 0;
}

.wk-ahero__badge .elementor-icon {
	display: block;
	color: var(--wk-green-ink);
}

.wk-ahero__badge .elementor-icon svg.e-font-icon-svg {
	width: 47px;
	height: 47px;
	fill: currentColor;
	stroke: none;
}

/* A fixed size rather than the viewport clamp this used to carry: the copy
   column is a fixed 25rem measure, so type that grows with the window only
   pushes the one-line badge past the paragraph it sits under. */
.wk-ahero__badge .elementor-icon-box-title,
.wk-ahero__badge .elementor-icon-box-title span {
	margin: 0;
	font-family: var(--wk-body);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--wk-green-ink);
}

/* Three lines is the resting shape - it is what a phone and a tablet get, and
   what the badge falls back to with the stylesheet's desktop block unread. */
.wk-ahero__badge .wk-badge__line {
	display: block;
}

/* On a desktop the three promises read across in one line, bulleted between.
   The badge is then wider than the copy's 25rem measure, so it steps outside
   it on its own - widening the column instead would drag the paragraph's line
   length out with it. */
@media (min-width: 1025px) {
	/* The badge finishes on the paragraph's right edge, so everything around
	   the line is trimmed to buy the type its room: a smaller shield, a tighter
	   gap and less padding. Type alone would have had to drop to about 13px to
	   fit, which reads smaller than the paragraph above it.
	   Elementor's own `.e-con > .elementor-widget { max-width: 100% }` is what
	   pins the badge to the column, so the selector has to outrank it rather
	   than merely follow it. */
	.wk-ahero__copy.e-con > .elementor-widget.wk-ahero__badge {
		width: max-content;
		max-width: none;
		padding: 16px 18px;
	}

	.wk-ahero__badge .elementor-icon-box-wrapper {
		gap: 12px;
	}

	.wk-ahero__badge .elementor-icon svg.e-font-icon-svg {
		width: 32px;
		height: 32px;
	}

	.wk-ahero__badge .elementor-icon-box-title,
	.wk-ahero__badge .elementor-icon-box-title span {
		font-size: 14.5px;
	}

	.wk-ahero__badge .wk-badge__line {
		display: inline;
	}

	.wk-ahero__badge .wk-badge__line + .wk-badge__line::before {
		content: "\2022";
		margin: 0 5px;
		color: var(--wk-gold-500);
	}
}

/* --- our story ----------------------------------------------------------- */

/* The mockup centres this heading over its own column rather than the page,
   which is what keeps the story reading as one block beside the photograph. */
.wk-story__copy .wk-rule {
	text-align: center;
}

.wk-story__text,
.wk-story__text p {
	font-size: clamp(15px, 1.12vw, 16px);
	line-height: 1.74;
	color: #1f2124;
}

.wk-story__img img {
	width: 100%;
	aspect-ratio: 2.15 / 1;
	object-fit: cover;
	border-radius: 16px;
	display: block;
}

/* --- what makes us different --------------------------------------------- */

.wk-diff__col {
	position: relative;
}

.wk-diff__col:not(:last-child)::after {
	content: "";
	position: absolute;
	right: 0;
	top: 6px;
	bottom: 6px;
	width: 1px;
	background: rgb(233 161 59 / 34%);
}

.wk-diff__item .elementor-icon-box-icon {
	margin-bottom: 14px;
}

/* A grid box is block-level, so the icon box's text-align never reaches it -
   without the auto margins the disc sits at the left of a centred column. */
.wk-diff__item .elementor-icon {
	display: grid;
	place-items: center;
	margin-inline: auto;
	width: 86px;
	height: 86px;
	border-radius: 50%;
	background: var(--wk-khaki-100);
	color: var(--wk-green-ink);
}

.wk-diff__item .elementor-icon svg.e-font-icon-svg {
	width: 38px;
	height: 38px;
	fill: currentColor;
	stroke: none;
}

.wk-diff__item .elementor-icon-box-title {
	margin: 0 0 6px;
}

.wk-diff__item .elementor-icon-box-title,
.wk-diff__item .elementor-icon-box-title span {
	margin-top: 0;
	margin-bottom: 0;
	font-family: var(--wk-display);
	font-size: clamp(16px, 1.3vw, 18.5px);
	font-weight: 700;
	line-height: 1.3;
	color: var(--wk-green-ink);
}

.wk-diff__item .elementor-icon-box-description {
	max-width: 28ch;
	margin-inline: auto;
	font-size: 13.5px;
	line-height: 1.6;
	color: #3d3a37;
}

/* --- our careful process ------------------------------------------------- */

.wk-process__step {
	position: relative;
}

/* The connector is the sequence itself, so it is drawn between the steps
   rather than set as a widget between them - five steps stay five things to
   edit, and reordering them cannot leave an arrow behind. */
.wk-process__step:not(:last-child)::after {
	content: "";
	position: absolute;
	right: -10px;
	top: 71px;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2 10h14M11.5 5.2 16.6 10l-5.1 4.8' fill='none' stroke='%230d3b1c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
		center / contain no-repeat;
}

.wk-process__photo img {
	width: 142px;
	height: 142px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	margin-inline: auto;
}

.wk-process__title .elementor-heading-title {
	font-family: var(--wk-display);
	font-size: clamp(15.5px, 1.28vw, 18px);
	font-weight: 700;
	line-height: 1.3;
	color: var(--wk-green-ink);
}

.wk-process__text,
.wk-process__text p {
	max-width: 24ch;
	margin-inline: auto;
	font-size: 13.5px;
	line-height: 1.6;
	color: #3d3a37;
}

/* --- a promise we live by ------------------------------------------------ */

.wk-apromise {
	border-radius: 18px;
}

.wk-apromise__art img {
	width: min(100%, 370px);
	display: block;
	mix-blend-mode: darken;
}

.wk-apromise__title .elementor-heading-title {
	font-family: var(--wk-display);
	font-size: clamp(1.4rem, 2.25vw, 1.9rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--wk-brown-700);
}

/* The short gold rule belongs to the heading, not to the paragraph below it. */
.wk-apromise__title::after {
	content: "";
	display: block;
	width: 92px;
	height: 2px;
	margin-top: 14px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--wk-gold-500), rgb(233 161 59 / 15%));
}

.wk-apromise__text,
.wk-apromise__text p {
	font-size: clamp(15px, 1.18vw, 16.5px);
	line-height: 1.62;
	color: #24262a;
}

.wk-apromise__list {
	position: relative;
	padding-left: 40px;
}

.wk-apromise__list::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 4px;
	width: 1px;
	background: rgb(116 69 26 / 20%);
}

.wk-apromise__items .elementor-icon-list-item {
	margin-bottom: 14px;
}

.wk-apromise__items .elementor-icon-list-icon {
	display: flex;
	align-items: center;
}

.wk-apromise__items .elementor-icon-list-icon svg {
	width: 23px;
	height: 23px;
	fill: var(--wk-green-800);
	stroke: none;
}

.wk-apromise__items .elementor-icon-list-text {
	font-size: clamp(14.5px, 1.15vw, 16px);
	font-weight: 500;
	line-height: 1.4;
	color: var(--wk-ink);
}

/* --- about page, tablet -------------------------------------------------- */

@media (max-width: 1024px) {
	.wk-ahero::before {
		background: linear-gradient(
			96deg,
			rgb(253 250 244 / 96%) 0%,
			rgb(253 250 244 / 90%) 45%,
			rgb(253 250 244 / 55%) 78%,
			rgb(253 250 244 / 28%) 100%
		);
	}

	/* Three across, then two - the connector only runs inside a row, so it is
	   dropped rather than left pointing at the row above. */
	.wk-process__step:not(:last-child)::after {
		display: none;
	}

	.wk-diff__col:nth-child(2n)::after {
		display: none;
	}

	/* Two classes deep: the rule that strips Elementor's default container
	   padding is itself two classes, and would otherwise keep this at zero -
	   leaving the first promise sitting on the divider. */
	.wk-apromise > .wk-apromise__list {
		padding-top: 24px;
		padding-left: 0;
	}

	.wk-apromise__list::before {
		left: 0;
		right: 0;
		top: 0;
		bottom: auto;
		width: auto;
		height: 1px;
	}
}

/* --- about page, phones -------------------------------------------------- */

@media (max-width: 767px) {
	.wk-ahero {
		min-height: 0;
	}

	/* Below cover the banner is a band across the foot of the masthead rather
	   than the whole of it, and its top edge cut a hard line across the copy.
	   So on a phone the scrim stops carrying the header - the header sits on
	   paper here anyway - and instead sits on the band, anchored to the same
	   bottom edge the picture is: 210% of the screen over the banner's 2.1826:1
	   is 96.22vw of band, plus a little above it, so the paper is solid where
	   the picture starts and has cleared by the time it reaches his face. */
	body.wk-floating-header .wk-ahero::after {
		top: auto;
		bottom: 0;
		height: calc(96.22vw + 26px);
		background: linear-gradient(
			180deg,
			var(--wk-paper) 0,
			var(--wk-paper) 26px,
			rgb(253 250 244 / 0%) 112px
		);
	}

	/* Full width on a phone: the indent and the measure are both desktop
	   devices for floating the copy inside the picture. */
	.wk-ahero__copy {
		--wk-ahero-indent: 0px;
		--wk-ahero-measure: 100%;
	}

	.wk-rule .elementor-heading-title::before,
	.wk-rule .elementor-heading-title::after {
		display: none;
	}

	.wk-ahero__badge {
		padding: 18px 22px;
	}

	.wk-ahero__badge.elementor-widget-icon-box .elementor-icon-box-wrapper {
		flex-direction: row;
		align-items: center;
		text-align: left;
	}

	.wk-ahero__badge .elementor-icon-box-icon {
		margin-bottom: 0;
	}

	.wk-story__img img {
		aspect-ratio: 1.9 / 1;
	}

	.wk-diff__col::after {
		display: none;
	}

	.wk-diff__item .elementor-icon {
		width: 62px;
		height: 62px;
	}

	.wk-diff__item .elementor-icon svg.e-font-icon-svg {
		width: 27px;
		height: 27px;
	}

	.wk-diff__item .elementor-icon-box-icon {
		margin-bottom: 10px;
	}

	/* Two-up on a phone leaves a narrow column, so the copy is centred under
	   its disc rather than ragged against it. */
	.wk-diff__item .elementor-icon-box-wrapper,
	.wk-process__step {
		text-align: center;
	}

	/* One step per row, so the connector turns to point down the sequence. */
	.wk-process__step {
		padding-bottom: 26px;
	}

	/* A step has the whole width to itself on a phone, so the disc sized to fit
	   five across on a desktop sat in more margin than picture. The step is
	   scaled up as a block - disc, heading and line together - and the 10px the
	   row and the step each hold back is given to it, which is what closes the
	   gap either side. */
	.wk-process__row,
	.wk-process__step {
		padding-left: 0;
		padding-right: 0;
	}

	.wk-process__photo img {
		width: 190px;
		height: 190px;
	}

	.wk-process__title .elementor-heading-title {
		font-size: 19px;
	}

	.wk-process__text,
	.wk-process__text p {
		font-size: 14.5px;
	}

	.wk-process__step:not(:last-child)::after {
		display: block;
		right: auto;
		left: 50%;
		top: auto;
		bottom: 0;
		margin: 0 0 0 -10px;
		transform: rotate(90deg);
	}

	.wk-process__text,
	.wk-diff__item .elementor-icon-box-description {
		max-width: 30ch;
	}

	.wk-apromise__art img {
		width: min(100%, 260px);
		margin-inline: auto;
	}
}

/* ==========================================================================
   Contact page
   The masthead carries the page's one flourish and everything below it stays
   deliberately quiet. The three panels hold content and are not clickable, so
   they take a hairline and no shadow - the lift the product cards use would
   promise a click that is not there. The form fields are the page's only
   interactive surface, and the only place any state is worked.
   ========================================================================== */

.wk-contact {
	background: var(--wk-paper);
}

/* The band shares the products page's markup, so its ground is selected off
   the modifier the contact page passes rather than off a second wrapper. */
.wk-pledge-wrap:has(> .wk-pledge--disc) {
	background: var(--wk-paper);
}

/* ------------------------------------------------------------ masthead --- */

.wk-chero {
	position: relative;
	overflow: hidden;
	min-height: clamp(400px, 34vw, 520px);
	background-color: var(--wk-paper);
	background-position: center bottom;
	background-size: cover;
}

/* The supplied banner already goes hazy across its left third, so this is a
   light second coat - enough to hold the copy over a replacement photograph
   that carries no haze of its own, not enough to flatten this one. */
.wk-chero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		96deg,
		rgb(253 250 244 / 62%) 0%,
		rgb(253 250 244 / 46%) 28%,
		rgb(253 250 244 / 16%) 48%,
		rgb(253 250 244 / 0%) 66%
	);
	pointer-events: none;
}

.wk-chero > .e-con {
	position: relative;
	z-index: 2;
}

/* Sized to the band rather than to the page: at the banner's ratio the copy
   has about 200px to live in, and these three clamps are what keep the
   headline, the kicker and three lines of standfirst inside it. */
.wk-chero__title .elementor-heading-title {
	font-family: var(--wk-display);
	font-size: clamp(2rem, 3.7vw, 3.2rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.015em;
	color: var(--wk-green-ink);
}

/* The rule and its leaf belong to the title, so they are drawn above it as its
   own ::before - retyping the heading in Elementor cannot strand them.
   Left-anchored, because everything under it is ranged left. */
.wk-leaf-rule--over .elementor-heading-title::before {
	content: "";
	display: block;
	width: min(232px, 100%);
	height: 14px;
	margin-bottom: 12px;
	background: var(--wk-leaf-rule-start);
}

.wk-chero__kicker,
.wk-chero__kicker p {
	font-family: var(--wk-display);
	font-size: clamp(1.1rem, 1.6vw, 1.45rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--wk-amber-700);
}

.wk-chero__text,
.wk-chero__text p {
	max-width: 46ch;
	font-size: clamp(14px, 1.05vw, 15.5px);
	line-height: 1.62;
	color: #26282b;
}

/* ---------------------------------------------------------- the panels --- */

/* 44 + 23 + 31 plus two 18px gaps is a hair over the row, and `flex-wrap`
   breaks a line before `flex-shrink` ever gets to close a gap that small -
   which is what dropped the map onto its own row. Holding one line on the
   desktop lets the tracks give up those few pixels between them instead; the
   media queries below put the wrapping back where it is wanted. */
@media (min-width: 1025px) {
	.wk-contact__row {
		--flex-wrap: nowrap;
	}
}

/* Elementor also pins each track at `max-width: min(100%, var(--width))`. */
.wk-contact__row > .e-con,
.wk-contact__row > .e-con-inner > .e-con {
	flex-grow: 0;
	flex-shrink: 1;
	min-width: 0;
	max-width: none;
}

/* Near-invisible fill, hairline border, no shadow: in the mockup it is the
   line that draws the panel, not the ground. */
.wk-cpanel {
	background: var(--wk-cream-050);
	border: 1px solid var(--wk-panel-line);
	border-radius: 16px;
}

.wk-cpanel__title .elementor-heading-title {
	font-family: var(--wk-display);
	font-size: clamp(1.25rem, 1.75vw, 1.6rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--wk-green-ink);
}

.wk-cpanel__title .elementor-heading-title {
	display: inline-block;
}

/* inline-block above is what makes this 100% the width of the words rather
   than of the panel, so the rule always underscores the heading it belongs
   to - whatever the client retitles it to. */
.wk-cpanel__title .elementor-heading-title::after {
	content: "";
	display: block;
	width: 100%;
	height: 14px;
	margin-top: 9px;
	background: var(--wk-leaf-rule);
}

.wk-cpanel__lede,
.wk-cpanel__lede p {
	font-size: 14.5px;
	line-height: 1.55;
	color: #3a3d41;
}

/* ------------------------------------------------------------ the form --- */

/* CF7 renders each field as a paragraph, so the grid is set on their parent
   and the fields themselves only have to say how many tracks they span. */
.wk-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-top: 6px;
}

.wk-field {
	position: relative;
	margin: 0;
}

.wk-field--message {
	grid-column: 1 / -1;
}

/* CF7's own wrapper is an inline span; the control inside it needs a block to
   size against. */
.wk-field .wpcf7-form-control-wrap {
	display: block;
}

.wk-field input,
.wk-field select,
.wk-field textarea {
	width: 100%;
	box-sizing: border-box;
	min-height: 52px;
	padding: 14px 16px 14px 48px;
	border: 1px solid var(--wk-line);
	border-radius: 10px;
	background: var(--wk-white);
	font-family: var(--wk-body);
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--wk-ink);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.wk-field textarea {
	min-height: 132px;
	padding-top: 15px;
	resize: vertical;
}

.wk-field input::placeholder,
.wk-field textarea::placeholder {
	color: #6e737a;
	opacity: 1;
}

/* The empty first option is CF7's `first_as_label`, so an unanswered select
   has to look like a placeholder rather than an answer. CF7 validates
   server-side and never sets `required`, so `:invalid` would never match -
   the checked option is what actually distinguishes the two states. */
.wk-field select:has(option[value=""]:checked) {
	color: #6e737a;
}

.wk-field select {
	appearance: none;
	padding-right: 42px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6068' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
	background-size: 13px;
	cursor: pointer;
}

.wk-field input:focus,
.wk-field select:focus,
.wk-field textarea:focus {
	outline: 0;
	border-color: var(--wk-green-800);
	box-shadow: 0 0 0 3px rgb(2 58 17 / 12%);
}

/* Field glyphs, drawn rather than marked up so the CF7 template stays a plain
   list of fields the client can reorder. */
.wk-field::before {
	content: "";
	position: absolute;
	top: 26px;
	left: 17px;
	width: 18px;
	height: 18px;
	transform: translateY(-50%);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	pointer-events: none;
	z-index: 1;
}

/* The textarea's glyph sits on its first line, not halfway down the box. */
.wk-field--message::before {
	top: 27px;
}

.wk-field--name::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d3b1c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.8 20a7.2 7.2 0 0 1 14.4 0'/%3E%3C/svg%3E");
}

.wk-field--email::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d3b1c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.6' y='5' width='18.8' height='14' rx='2.2'/%3E%3Cpath d='m3.6 6.6 8.4 6 8.4-6'/%3E%3C/svg%3E");
}

.wk-field--phone::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d3b1c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.2 4.4 6.6 3.6a2 2 0 0 0-2.4 1.3l-.4 1.4c-.2.7 0 1.5.5 2A22 22 0 0 0 15.7 19.7c.5.5 1.3.7 2 .5l1.4-.4a2 2 0 0 0 1.3-2.4l-.8-2.6-3 .7-1.4-1a12 12 0 0 1-3-3l-1-1.4z'/%3E%3C/svg%3E");
}

.wk-field--subject::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d3b1c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M13.6 3v5h5'/%3E%3Cpath d='M8.5 13h6M8.5 16.5h4'/%3E%3C/svg%3E");
}

.wk-field--message::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d3b1c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 5h15a1.6 1.6 0 0 1 1.6 1.6v8a1.6 1.6 0 0 1-1.6 1.6H9.6L5 19.6v-3.4h-.5A1.6 1.6 0 0 1 2.9 14.6v-8A1.6 1.6 0 0 1 4.5 5z'/%3E%3Cpath d='M8 10.6h.01M12 10.6h.01M16 10.6h.01'/%3E%3C/svg%3E");
}

.wk-form__actions {
	margin: 16px 0 0;
}

/* CF7 emits an <input>, which cannot hold an icon element - so the paper plane
   is a background sized in em and parked just left of the centred label, which
   keeps the pair together as the type scales. */
.wk-form__submit {
	width: 100%;
	min-height: 54px;
	padding: 15px 20px;
	border: 0;
	border-radius: 10px;
	background: var(--wk-green-900)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.5 2.5 10.8 13.2'/%3E%3Cpath d='M21.5 2.5 14.7 21.5l-3.9-8.3-8.3-3.9z'/%3E%3C/svg%3E")
		no-repeat calc(50% - 4.6em) center / 17px;
	font-family: var(--wk-body);
	font-size: 15px;
	font-weight: 700;
	color: var(--wk-white);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.wk-form__submit:hover {
	background-color: var(--wk-green-700);
}

.wk-cform__note,
.wk-cform__note p {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 13px;
	color: var(--wk-muted);
}

.wk-cform__note p::before {
	content: "";
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6068' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.7 4.5 5.6v5.6c0 4.6 3.1 8.9 7.5 10.1 4.4-1.2 7.5-5.5 7.5-10.1V5.6z'/%3E%3Cpath d='m9 12 2.2 2.2L15.4 10'/%3E%3C/svg%3E")
		center / contain no-repeat;
}

/* --- CF7's own messaging ------------------------------------------------- */

.wk-cform .wpcf7-not-valid-tip {
	margin-top: 6px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--wk-red);
}

.wk-cform .wpcf7-form-control.wpcf7-not-valid {
	border-color: var(--wk-red);
}

.wk-cform .wpcf7-response-output {
	margin: 14px 0 0;
	padding: 12px 16px;
	border: 1px solid var(--wk-panel-line);
	border-radius: 10px;
	font-size: 13.5px;
	line-height: 1.5;
	color: #2c2e31;
}

.wk-cform .wpcf7 form.sent .wpcf7-response-output {
	border-color: rgb(2 58 17 / 35%);
	background: rgb(2 58 17 / 5%);
}

.wk-cform .wpcf7 form.invalid .wpcf7-response-output,
.wk-cform .wpcf7 form.failed .wpcf7-response-output {
	border-color: rgb(226 59 43 / 40%);
	background: rgb(226 59 43 / 5%);
}

/* CF7 pads the whole form block by default; the panel already owns that. */
.wk-cform .wpcf7 {
	margin: 0;
}

/* ------------------------------------------------------- get in touch --- */

.wk-ctouch__item.elementor-widget-icon-box .elementor-icon-box-wrapper {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	text-align: left;
}

.wk-ctouch__item.elementor-widget-icon-box .elementor-icon-box-icon {
	margin: 0;
	flex: 0 0 auto;
}

.wk-ctouch__item .elementor-icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--wk-gold-100);
	color: var(--wk-green-900);
	line-height: 1;
}

.wk-ctouch__item .elementor-icon svg.e-font-icon-svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
	stroke: none;
}

.wk-ctouch__item .elementor-icon-box-title,
.wk-ctouch__item .elementor-icon-box-title span {
	margin: 0 0 2px;
	font-family: var(--wk-body);
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wk-green-ink);
}

/* Postcodes, phone numbers and the like: tokens that read as one thing and
   must break as one thing. */
.wk-nowrap {
	white-space: nowrap;
}

.wk-ctouch__item .elementor-icon-box-description {
	font-size: 13.5px;
	line-height: 1.55;
	color: #33363a;
	overflow-wrap: break-word;
}

/* ----------------------------------------------------- map + sign-off --- */

/* The form's fields have to be a usable size, which makes its panel taller
   than the mockup's stylised one - so the map, not the sign-off card, takes
   up the slack that leaves in this column. A bigger map is worth having on a
   contact page; a half-empty card is not. */
.wk-cmap {
	position: relative;
	overflow: hidden;
	min-height: 210px;
	border: 1px solid var(--wk-panel-line);
	border-radius: 16px;
}

/* Elementor's own `.e-con { flex-grow: 0 }` ties this on specificity and wins
   on source order, so the growth has to be claimed from the parent. */
.wk-ccol > .wk-cmap {
	flex: 1 1 auto;
}

/* Elementor's maps widget prints no height of its own and wraps the iframe
   twice, so the widget is pinned to the panel and each wrapper handed the
   full height rather than threading flex through all three. */
.wk-cmap > .elementor-widget-google_maps {
	position: absolute;
	inset: 0;
}

.wk-cmap .elementor-widget-container,
.wk-cmap .elementor-custom-embed,
.wk-cmap iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.wk-cfarm {
	position: relative;
	overflow: hidden;
	flex: 0 0 auto;
	justify-content: center;
	background: var(--wk-band-cream);
	border: 1px solid var(--wk-panel-line);
	border-radius: 16px;
}

/* Decoration, not content: drawn here so the client's two lines stay the only
   editable things in the card. */
.wk-cfarm::after {
	content: "";
	position: absolute;
	right: 10px;
	bottom: 6px;
	width: 132px;
	height: 78%;
	background: url("https://sienna-wombat-141419.hostingersite.com/wp-content/uploads/2026/09/pledge-lineart.webp")
		right bottom / contain no-repeat;
	mix-blend-mode: darken;
	pointer-events: none;
}

.wk-cfarm__title .elementor-heading-title {
	font-family: var(--wk-display);
	font-size: clamp(1.05rem, 1.35vw, 1.25rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--wk-green-ink);
}

.wk-cfarm__text,
.wk-cfarm__text p {
	position: relative;
	z-index: 1;
	max-width: 24ch;
	font-size: 13.5px;
	line-height: 1.6;
	color: #3a3d41;
}

/* ------------------------------------------------------ the promises --- */

/* The contact mockup fills the disc where the products mockup rings it. */
.wk-pledge--disc .wk-pledge__item .elementor-icon {
	border: 0;
	background: var(--wk-gold-100);
}

/* -------------------------------------------- contact page, small screens --- */

@media (max-width: 1024px) {
	/* Shorter, but still deep enough to hold the herd and the cottage rather
	   than a band of grass. */
	.wk-chero {
		min-height: clamp(300px, 42vw, 420px);
	}

	.wk-chero::before {
		background: linear-gradient(
			100deg,
			rgb(253 250 244 / 94%) 0%,
			rgb(253 250 244 / 86%) 40%,
			rgb(253 250 244 / 46%) 66%,
			rgb(253 250 244 / 10%) 100%
		);
	}

	/* The form takes the full row; the details and the map pair up beneath it. */
	.wk-contact__row > .e-con:first-child {
		flex-basis: 100%;
	}
}

@media (max-width: 767px) {
	/* Narrower than the picture, so `cover` now crops the sides: the frame
	   shifts right to hold the nearest cow and the cottage. */
	.wk-chero {
		min-height: 340px;
		background-position: 72% bottom;
	}

	/* Elementor turns an icon-box to a stacked, centred layout on a phone.
	   These four are address lines, not features - the glyph belongs beside
	   the label, at every width. */
	.wk-ctouch__item.elementor-widget-icon-box .elementor-icon-box-wrapper {
		flex-direction: row;
		text-align: left;
	}

	.wk-ctouch__item.elementor-widget-icon-box .elementor-icon-box-icon {
		margin-bottom: 0;
	}

	.wk-chero::before {
		background: linear-gradient(
			180deg,
			rgb(253 250 244 / 95%) 0%,
			rgb(253 250 244 / 88%) 52%,
			rgb(253 250 244 / 62%) 100%
		);
	}

	.wk-chero__title .elementor-heading-title {
		font-size: min(11vw, 44px);
	}

	.wk-chero__text,
	.wk-chero__text p {
		max-width: none;
		font-size: 15px;
	}

	/* Hand-set for the desktop column width; on a phone they only strand the
	   copy mid-line. */
	.wk-chero__text br,
	.wk-cfarm__text br {
		display: none;
	}

	.wk-contact__row > .e-con,
	.wk-contact__row > .e-con-inner > .e-con {
		flex-basis: 100%;
	}

	/* Contact details lead on a phone. Someone who opens this page to ring the
	   dairy should not have to scroll a whole form to reach the number, so the
	   form falls to the end of the section. Ordering only - the DOM keeps the
	   form first, which is the order that reads correctly to a screen reader
	   and the order the desktop layout wants. */
	.wk-contact__row .wk-ctouch {
		order: 1;
	}

	.wk-contact__row .wk-ccol {
		order: 2;
	}

	.wk-contact__row .wk-cform {
		order: 3;
	}

	/* Half a phone width leaves nothing for a label beside a 52px field. */
	.wk-form__grid {
		grid-template-columns: 1fr;
	}

	/* The drawing gives most of its lane back to the copy. */
	.wk-cfarm::after {
		width: 104px;
		opacity: 0.42;
	}

	.wk-cfarm__text,
	.wk-cfarm__text p {
		max-width: 32ch;
	}
}

/* ======================================================== product page ===
   The PDP is theme templates, not Elementor: markup in theme/woocommerce/,
   hooks in inc/woocommerce.php. Everything is scoped under .wk-pdp so the
   cart, checkout and account pages keep WooCommerce's own styling.
   ======================================================================== */

/* WooCommerce's own stylesheets are loaded for the cart and checkout, and they
   reach this page too. Three of their rules have to be beaten outright rather
   than nudged, so these selectors are written long enough to outweigh them:
   div.summary floats to 48%, form.cart .button floats, and .button.alt is
   WooCommerce purple. Specificity, not !important. */
.woocommerce div.product .wk-pdp__top .wk-pdp__buy,
.woocommerce div.product .wk-pdp__top .wk-pdp__gallery {
	float: none;
	width: auto;
	margin: 0;
}

.woocommerce div.product form.cart .button,
.woocommerce div.product form.cart div.quantity {
	float: none;
}

.wk-pdp {
	padding-top: 26px;
}

.wk-pdp .wk-crumbs {
	margin-bottom: 20px;
}

/* The drawn house belongs to Home alone. */
.wk-pdp .wk-crumbs a:not(:first-of-type)::before {
	content: none;
}

.wk-pdp__top {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
	gap: clamp(30px, 4vw, 64px);
	align-items: start;
	padding-bottom: clamp(46px, 5vw, 74px);
}

/* ------------------------------------------------------------ gallery --- */

.wk-gallery {
	display: grid;
	min-width: 0;
	gap: 14px;
}

.wk-gallery--rail {
	grid-template-columns: 78px minmax(0, 1fr);
}

.wk-gallery__rail {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wk-gallery__thumb {
	display: grid;
	place-items: center;
	width: 78px;
	aspect-ratio: 1;
	padding: 7px;
	border: 1px solid var(--wk-line);
	border-radius: 10px;
	background: var(--wk-cream-050);
	cursor: pointer;
	transition: border-color 0.18s ease;
}

.wk-gallery__thumb img {
	max-height: 100%;
	width: auto;
	object-fit: contain;
}

.wk-gallery__thumb:hover {
	border-color: #cfcfcf;
}

.wk-gallery__thumb.is-current {
	border-color: var(--wk-green-800);
	box-shadow: inset 0 0 0 1px var(--wk-green-800);
}

/* A square panel for every product, whatever the packshot's own proportions -
   the packs run from 597x1040 to 1040x1040, and mixed panel heights made the
   range look unfinished.

   The image is taken out of flow to get there. A ratio box sizes itself from an
   in-flow child when that child is intrinsically taller, so the panel used to
   take its *width* from the pack's height and slide under the buy column.
   Absolutely positioned, the pack cannot influence the panel at all: the square
   is driven by width alone, and inset:0 + margin:auto centres the pack inside
   it at whatever size fits. */
.wk-gallery__stage {
	--wk-stage-pad: clamp(16px, 2.6vw, 34px);

	position: relative;
	aspect-ratio: 1;
	min-width: 0;
	border-radius: var(--wk-radius);
	background: var(--wk-cream-100);
}

.wk-gallery__img {
	position: absolute;
	inset: 0;
	margin: auto;
	width: auto;
	height: auto;
	max-width: calc(100% - 2 * var(--wk-stage-pad));
	max-height: calc(100% - 2 * var(--wk-stage-pad));
	object-fit: contain;
}

/* --------------------------------------------------------- buy column --- */

.wk-pdp .product_title {
	font-family: var(--wk-display);
	font-size: clamp(2rem, 3.1vw, 2.85rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--wk-green-ink);
}

.wk-pdp__tagline {
	margin-top: 6px;
	font-size: 15.5px;
	font-weight: 600;
	color: var(--wk-green-700);
}

.wk-pdp__points {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.4;
}

.wk-pdp__points li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.wk-pdp__tick {
	flex: none;
	width: 17px;
	height: 17px;
	color: var(--wk-gold-500);
}

.wk-pdp__excerpt {
	max-width: 46ch;
	margin-top: 15px;
	font-size: 15px;
	color: var(--wk-muted);
}

.wk-buyform {
	margin: 22px 0 0;
	padding-top: 22px;
	border-top: 1px solid var(--wk-line);
}

/* ------------------------------------------------------------- price --- */

.woocommerce div.product .wk-pdp__price .price,
.woocommerce div.product .wk-pdp__range .price {
	display: block;
	margin: 0;
	font-family: var(--wk-body);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--wk-green-ink);
}

.wk-pdp .woocommerce-variation-availability {
	margin-top: 4px;
	font-size: 13px;
	color: var(--wk-muted);
}

.wk-pdp .woocommerce-variation-description {
	display: none;
}

/* ------------------------------------------------------- size chooser --- */

.woocommerce div.product form.cart table.variations {
	width: 100%;
	margin: 20px 0 0;
	border: 0;
	background: none;
}

.woocommerce div.product form.cart table.variations tr,
.woocommerce div.product form.cart table.variations tbody {
	display: block;
	border: 0;
	background: none;
}

.woocommerce div.product form.cart table.variations th.label,
.woocommerce div.product form.cart table.variations td.value {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
}

.woocommerce div.product form.cart table.variations th.label label {
	font-size: 13px;
	font-weight: 600;
	color: var(--wk-ink);
}

.woocommerce div.product form.cart table.variations td.value {
	margin-top: 9px;
}

/* One size is always selected, so there is nothing to clear. */
.wk-pdp .reset_variations {
	display: none !important;
}

/* The select stays in the DOM and stays authoritative - pdp.js moves it out of
   sight once the chips are on screen, and without the script it is the visible
   control. */
.wk-pdp .wk-offscreen,
.woocommerce div.product form.cart .variations select.wk-offscreen {
	position: absolute;
	/* WooCommerce gives .variations select a min-width of 75%, which a width of
	   1px cannot beat on its own - left alone it pushes a horizontal scrollbar
	   onto every wide viewport. */
	min-width: 0;
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.wk-sizes__set {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	border: 0;
}

.wk-size__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.wk-size {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 66px;
	padding: 10px 16px;
	border: 1px solid #e2e2e2;
	border-radius: 9px;
	background: var(--wk-white);
	font-size: 14px;
	font-weight: 600;
	color: #2b2d31;
	cursor: pointer;
	transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.wk-size:hover {
	border-color: var(--wk-green-700);
}

.wk-size__input:checked + .wk-size {
	border-color: var(--wk-green-800);
	background: var(--wk-green-800);
	color: var(--wk-white);
}

.wk-size__input:focus-visible + .wk-size {
	outline: 3px solid var(--wk-gold-500);
	outline-offset: 3px;
}

/* ---------------------------------------------------------- pack band ---
   The printed pouch carries a green strip of pack facts across its foot. This
   is that strip, and it restates whichever size is selected. */

.wk-band {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 16px;
	padding: 12px 16px;
	border-radius: 10px;
	background: linear-gradient(100deg, var(--wk-green-900), var(--wk-green-700));
	color: #eef1e9;
	font-size: 13px;
	line-height: 1.5;
}

.wk-band__net b {
	font-weight: 700;
	color: var(--wk-white);
}

.wk-band__shelf {
	margin-left: auto;
	padding-left: 12px;
	border-left: 1px solid rgb(255 255 255 / 22%);
	color: rgb(238 241 233 / 82%);
}

.wk-veg {
	display: inline-flex;
	flex: none;
	width: 20px;
	height: 20px;
	color: #1a7f37;
}

.wk-band .wk-veg {
	padding: 2px;
	border-radius: 4px;
	background: var(--wk-white);
}

/* ---------------------------------------------------- quantity, buying --- */

.wk-qty {
	margin-top: 20px;
}

.wk-qty__label {
	display: block;
	margin-bottom: 9px;
	font-size: 13px;
	font-weight: 600;
}

.wk-qty__box {
	display: inline-flex;
	align-items: center;
	overflow: hidden;
	border: 1px solid #e2e2e2;
	border-radius: 9px;
}

.wk-qty__btn {
	width: 42px;
	height: 46px;
	border: 0;
	background: transparent;
	color: var(--wk-ink);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.wk-qty__btn:hover {
	background: var(--wk-cream-100);
}

.wk-pdp .quantity {
	margin: 0;
}

.woocommerce div.product form.cart .quantity input.qty {
	width: 54px;
	height: 46px;
	padding: 0;
	border: 0;
	border-inline: 1px solid #e2e2e2;
	border-radius: 0;
	background: var(--wk-white);
	font-family: var(--wk-body);
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	appearance: textfield;
}

.wk-pdp .quantity input.qty::-webkit-outer-spin-button,
.wk-pdp .quantity input.qty::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.woocommerce div.product form.cart .single_add_to_cart_button,
.wk-pdp .wk-buynow {
	display: block;
	width: 100%;
	margin-top: 14px;
	padding: 15px 22px;
	border-radius: 10px;
	font-family: var(--wk-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
	border: 1px solid var(--wk-green-800);
	background: var(--wk-green-800);
	color: var(--wk-white);
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover {
	background: var(--wk-green-700);
	border-color: var(--wk-green-700);
	color: var(--wk-white);
}

.wk-pdp .wk-buynow {
	margin-top: 10px;
	border: 1px solid var(--wk-green-800);
	background: var(--wk-cream-100);
	color: var(--wk-green-800);
}

.wk-pdp .wk-buynow:hover {
	background: var(--wk-gold-200);
}

.woocommerce div.product form.cart .single_add_to_cart_button.disabled,
.woocommerce div.product form.cart .single_add_to_cart_button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.wk-pdp__delivery {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-top: 16px;
	font-size: 13.5px;
	color: var(--wk-muted);
}

.wk-pdp__delivery .wk-icon {
	flex: none;
	width: 19px;
	height: 19px;
	color: var(--wk-green-700);
}

/* ------------------------------------------------- story, disclosures --- */

.wk-pdp__info {
	padding: clamp(44px, 5vw, 72px) 0;
	border-top: 1px solid var(--wk-line);
	background: var(--wk-cream-050);
}

.wk-pdp__info-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(28px, 4vw, 64px);
	align-items: start;
}

.wk-pdp__story h2,
.wk-pdp__more-title {
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	color: var(--wk-green-ink);
}

.wk-pdp__story h2 {
	margin-bottom: 14px;
}

.wk-pdp__story p {
	max-width: 62ch;
	color: #3a3d42;
}

.wk-disc {
	border-bottom: 1px solid var(--wk-line);
}

.wk-disc:first-child {
	border-top: 1px solid var(--wk-line);
}

.wk-disc summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 0;
	font-size: 14.5px;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

.wk-disc summary::-webkit-details-marker {
	display: none;
}

.wk-disc summary::after {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--wk-green-800);
	border-bottom: 2px solid var(--wk-green-800);
	transform: translateY(-3px) rotate(45deg);
	transition: transform 0.2s ease;
}

.wk-disc[open] summary::after {
	transform: translateY(2px) rotate(-135deg);
}

.wk-disc__body {
	padding-bottom: 18px;
	font-size: 14.5px;
	color: var(--wk-muted);
}

.wk-disc__body > * + * {
	margin-top: 8px;
}

.wk-spec {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 9px 20px;
	margin: 0;
}

.wk-spec dt {
	font-weight: 600;
	color: var(--wk-ink);
}

.wk-spec dd {
	margin: 0;
}

.wk-spec__veg {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.wk-spec__veg .wk-veg {
	width: 16px;
	height: 16px;
}

/* ---------------------------------------------------- rest of the range --- */

.wk-pdp__more {
	padding: clamp(44px, 5vw, 72px) 0;
}

.wk-pdp__more-title {
	margin-bottom: 22px;
}

.wk-more {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wk-more__card a {
	display: grid;
	align-content: start;
	gap: 4px;
	height: 100%;
	padding: 16px;
	border: 1px solid var(--wk-line);
	border-radius: var(--wk-radius);
	background: var(--wk-white);
	text-decoration: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wk-more__card a:hover {
	border-color: #dcdcdc;
	box-shadow: var(--wk-shadow-lift);
}

.wk-more__media {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	padding: 14px;
	border-radius: 10px;
	background: var(--wk-cream-100);
}

.wk-more__media {
	position: relative;
}

/* Absolutely placed inside the padded square so a tall jar shrinks to fit
   rather than overflowing and being clipped. */
.wk-more__media img {
	position: absolute;
	inset: 14px;
	width: calc(100% - 28px);
	height: calc(100% - 28px);
	max-height: none;
	object-fit: contain;
}

.wk-more__name {
	margin-top: 12px;
	font-family: var(--wk-display);
	font-size: 19px;
	font-weight: 700;
	color: var(--wk-green-ink);
}

.wk-more__tag {
	font-size: 13px;
	color: var(--wk-muted);
}

.wk-more__price .price,
.wk-more__price {
	margin-top: 4px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--wk-ink);
}

/* --------------------------------------------------- sticky buy bar --- */

.wk-stickybar {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 60;
	display: none;
	align-items: center;
	gap: 12px;
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--wk-line);
	background: var(--wk-white);
	box-shadow: 0 -8px 24px -16px rgb(6 57 32 / 40%);
}

.wk-stickybar.is-shown {
	display: flex;
}

.wk-stickybar__name {
	font-family: var(--wk-display);
	font-size: 17px;
	font-weight: 700;
	color: var(--wk-green-ink);
}

.wk-stickybar__price {
	font-size: 14px;
	font-weight: 600;
}

.wk-stickybar__price .price {
	font-size: 14px;
}

.wk-stickybar__cta {
	margin-left: auto;
	padding: 11px 20px;
	border: 0;
	border-radius: 9px;
	background: var(--wk-green-800);
	color: var(--wk-white);
	font-family: var(--wk-body);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

/* The bar's second face: the add-to-cart confirmation. Both faces ship in the
   markup and only the class decides which one is up, so the swap costs no
   layout work and nothing flashes before the script runs. */

.wk-stickybar__done,
.wk-stickybar__cta--view {
	display: none;
}

.wk-stickybar.is-added .wk-stickybar__name,
.wk-stickybar.is-added .wk-stickybar__price,
.wk-stickybar.is-added [data-wk-jump] {
	display: none;
}

.wk-stickybar.is-added .wk-stickybar__done {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--wk-green-ink);
}

.wk-stickybar.is-added .wk-stickybar__done .wk-pdp__tick {
	color: var(--wk-green-800);
}

.wk-stickybar.is-added .wk-stickybar__cta--view {
	display: inline-flex;
}

/* The confirmation is the only feedback left once the notice above is hidden,
   so it does not wait on the scroll position the way the buy face does. */
.wk-stickybar.is-added {
	display: flex;
}

/* ----------------------------------------------- product page, tablet --- */

@media (max-width: 1023px) {
	.wk-pdp__top,
	.wk-pdp__info-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Written as specifically as the float reset further up, which carries a
	   margin: 0 that would otherwise cancel the centring. */
	.woocommerce div.product .wk-pdp__top .wk-pdp__gallery {
		width: 100%;
		max-width: 480px;
		margin-inline: auto;
	}

	.wk-more {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.wk-stickybar {
		display: none !important;
	}
}

/* Below that the bar is carrying the message, so the notice at the top of the
   page would only say it twice - and say it a screen away from the button
   that was pressed. pdp.js marks the one it took over; an error notice is
   never marked, and never hidden. */
@media (max-width: 899px) {
	.woocommerce-message.wk-hoisted {
		display: none;
	}
}

/* ------------------------------------------------ product page, phone --- */

@media (max-width: 767px) {
	.wk-pdp {
		padding-top: 18px;
	}

	/* Stage above the rail, and the rail scrolls sideways. */
	.wk-gallery--rail {
		display: flex;
		flex-direction: column-reverse;
		gap: 12px;
	}

	.wk-gallery__rail {
		flex-direction: row;
		overflow-x: auto;
		padding-bottom: 4px;
		scrollbar-width: thin;
	}

	.wk-gallery__thumb {
		width: 64px;
	}

	.wk-pdp__price .price,
	.wk-pdp__range .price {
		font-size: 26px;
	}

	.wk-band__shelf {
		margin-left: 0;
		padding-left: 0;
		border-left: 0;
		flex-basis: 100%;
	}
}

/* ==========================================================================
   Card actions
   One job, one button: the product page, where the details and all three
   sizes are. It carries the filled green pill the Add to Cart button below
   it used to - the card ends on a single loud action rather than a quiet
   outline above a shout.
   ========================================================================== */

.wk-card__view .elementor-button {
	display: flex;
	width: 100%;
	justify-content: center;
	gap: 8px;
	padding: 12px 18px;
	border: 1px solid transparent;
	border-radius: 9px;
	background: var(--wk-green-800);
	color: var(--wk-white);
	font-size: 13.5px;
	font-weight: 600;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.wk-card__view .elementor-button:hover {
	border-color: var(--wk-green-700);
	background: var(--wk-green-700);
	transform: none;
}

/* Font Awesome comes through as a filled path, so it needs `fill`, not the
   `stroke` the hand-drawn SVGs use - left to the earlier white-button rule it
   painted white on white and vanished. */
.wk-card__view .elementor-button-icon svg {
	width: 13px;
	height: 13px;
	fill: currentColor;
	stroke: none;
	transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.wk-card__view .elementor-button:hover .elementor-button-icon svg {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.wk-card__view .elementor-button:hover .elementor-button-icon svg {
		transform: none;
	}
}

/* Kept for the home strip's Choose Size button, which still uses the class. */
.wk-card__cta .elementor-button.is-busy {
	opacity: 0.62;
	pointer-events: none;
}

/* ==========================================================================
   Toast
   The add happens without a page load, so the confirmation has to come from
   somewhere. Bottom centre, out of the way of the card the customer just
   used, and it announces itself to a screen reader through role="status".
   ========================================================================== */

.wk-toast {
	position: fixed;
	left: 50%;
	bottom: 26px;
	z-index: 900;
	max-width: min(92vw, 420px);
	padding: 13px 22px;
	border-radius: var(--wk-radius-pill);
	background: var(--wk-green-900);
	box-shadow: var(--wk-shadow-lift);
	color: var(--wk-white);
	font-family: var(--wk-body);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.35;
	text-align: center;
	opacity: 0;
	transform: translate(-50%, 14px);
	transition: opacity 0.26s ease, transform 0.26s ease;
	pointer-events: none;
}

.wk-toast.is-open {
	opacity: 1;
	transform: translate(-50%, 0);
}

.wk-toast--error {
	background: var(--wk-red);
}

@media (prefers-reduced-motion: reduce) {
	.wk-toast {
		transition: opacity 0.01ms;
		transform: translate(-50%, 0);
	}
}


/* ==========================================================================
   Support pages
   FAQs, Shipping & Delivery, Returns & Refunds and Privacy Policy are one
   layout wearing four sets of words: the products masthead, trimmed, over a
   single column of prose, closed by the same four promises the contact page
   ends on. Nothing here is page-specific - adding a fifth policy page is a
   template change and not a CSS edit.
   ========================================================================== */

/* ------------------------------------------------------------ masthead --- */

/* The listing page's banner is sized to be the page's one flourish. On a page
   of text that is too much picture before the first sentence, so this variant
   drops the fixed ratio and takes about a third off the height. */
.wk-phero--doc {
	min-height: clamp(260px, 20vw, 340px);
}

@media (min-width: 1025px) {
	.wk-phero--doc {
		aspect-ratio: auto;
		min-height: 340px;
		max-height: 400px;
	}
}

/* Portrait, the standfirst on these pages runs to three lines where the
   listing page's runs to two, so it reaches down into the thin end of the
   masthead's wash and sits on lit grass. The wash holds its strength lower
   for this variant; the picture still reads, the sentence stays legible. */
@media (max-width: 767px) {
	.wk-phero--doc::before {
		background: linear-gradient(
			172deg,
			rgb(254 243 232 / 95%) 0%,
			rgb(254 243 232 / 90%) 58%,
			rgb(254 243 232 / 62%) 84%,
			rgb(254 243 232 / 26%) 100%
		);
	}
}

/* --------------------------------------------------------------- prose --- */

.wk-doc {
	background: var(--wk-white);
}

/* The measure is capped on the container, not on the widgets: Elementor holds
   every widget at max-width 100% from a selector no wk-* rule can outrank, so
   a cap set on the text widget itself would do nothing. 72ch is about 12 words
   a line at this size - long enough not to look like a list, short enough to
   read. */
.wk-doc__body {
	max-width: 72ch;
	margin-inline: auto;
}

/* Both of these exist only to carry a width and a gap, and the Default Kit
   gives every container 10px of block padding - four sections deep that is
   ~80px of stray height on a page that is otherwise nothing but rhythm. */
.wk-doc__body,
.wk-doc__block {
	padding-block: 0;
}

/* --------------------------------------------------------- section head --- */

/* The contact panels' leaf-ruled heading, one step larger. inline-block is
   what keeps the rule the width of the words rather than of the column, so it
   follows whatever the client retitles a section to. */
.wk-doc__title .elementor-heading-title {
	display: inline-block;
	font-family: var(--wk-display);
	font-size: clamp(1.3rem, 1.9vw, 1.7rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--wk-green-ink);
}

.wk-doc__title .elementor-heading-title::after {
	content: "";
	display: block;
	width: 100%;
	height: 14px;
	margin-top: 9px;
	background: var(--wk-leaf-rule);
}

/* ---------------------------------------------------------- paragraphs --- */

.wk-doc__p,
.wk-doc__p p {
	font-size: 15.5px;
	line-height: 1.72;
	color: #3a3d41;
}

/* A policy clause is often two or three paragraphs inside one text widget, so
   the rhythm has to come from the paragraphs and not from the widget gap. */
.wk-doc__p p + p {
	margin-top: 12px;
}

.wk-doc__p strong {
	color: var(--wk-green-ink);
	font-weight: 600;
}

/* Links inside prose have to announce themselves - the only other green text
   on the page is the headings. */
.wk-doc__p a,
.wk-faq .elementor-tab-content a {
	color: var(--wk-green-800);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: rgb(2 58 17 / 35%);
	transition: text-decoration-color 0.18s ease;
}

.wk-doc__p a:hover,
.wk-faq .elementor-tab-content a:hover {
	text-decoration-color: currentcolor;
}

/* -------------------------------------------------------------- lists --- */

/* The check-circle icon list, quietened: at prose size the solid gold disc
   the product cards use pulls harder than the sentence beside it. */
.wk-doc__list .elementor-icon-list-items {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.wk-doc__list .elementor-icon-list-item {
	align-items: flex-start;
	font-size: 15.5px;
	line-height: 1.62;
	color: #3a3d41;
}

.wk-doc__list .elementor-icon-list-icon {
	/* The glyph is optically a shade above the first line's centre; a hair of
	   top padding drops it onto the baseline of the words. */
	padding-top: 4px;
}

.wk-doc__list .elementor-icon-list-icon svg {
	width: 15px;
	height: 15px;
	fill: var(--wk-gold-500);
}

/* --------------------------------------------------------------- FAQs --- */

/* Elementor's accordion, reskinned as the contact page's panels: hairline over
   near-white, no shadow. Every rule hangs off the widget element itself -
   .elementor-widget-container was removed in Elementor 4 and any rule written
   through it matches nothing. */
.wk-faq .elementor-accordion {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.wk-faq .elementor-accordion-item {
	border: 1px solid var(--wk-panel-line);
	border-radius: var(--wk-radius);
	background: var(--wk-cream-050);
	overflow: hidden;
	transition: border-color 0.18s ease, background 0.18s ease;
}

.wk-faq .elementor-accordion-item:hover {
	border-color: rgb(233 161 59 / 45%);
}

/* An open question reads as the one being answered: cream ground, gold edge. */
.wk-faq .elementor-accordion-item:has(.elementor-tab-title.elementor-active) {
	border-color: rgb(233 161 59 / 62%);
	background: var(--wk-cream-100);
}

.wk-faq .elementor-tab-title {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 15px 20px;
	border: 0;
	background: none;
	cursor: pointer;
}

.wk-faq .elementor-accordion-title {
	flex: 1 1 auto;
	font-family: var(--wk-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--wk-green-ink);
	text-decoration: none;
}

/* The +/- goes to the right of the question, where a reader looks for it.
   The disc has to be written out to Elementor's own depth. The widget sets
   `.elementor-accordion .elementor-tab-title .elementor-accordion-icon` -
   three classes - to display:inline-block and width:1.5em, and the same
   selector sizes the glyph at 1em. A two-class rule here lost every one of
   those, so the disc was really 28x26 with an 18.7px glyph sitting on a text
   baseline: too big, and off centre both ways. Matching their specificity
   puts the grid centring back. */
.wk-faq .elementor-accordion .elementor-tab-title .elementor-accordion-icon {
	order: 2;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgb(233 161 59 / 16%);
	color: var(--wk-gold-500);
	transition: background 0.18s ease;
}

.wk-faq .elementor-tab-title.elementor-active .elementor-accordion-icon {
	background: var(--wk-gold-500);
	color: var(--wk-white);
}

/* display:block on the glyph as well: as an inline box it would drag the
   line-box strut in with it and sit a couple of pixels high inside the disc,
   which is the other half of what looked misaligned. */
.wk-faq .elementor-accordion .elementor-tab-title .elementor-accordion-icon svg {
	display: block;
	width: 10px;
	height: 10px;
	fill: currentcolor;
}

.wk-faq .elementor-tab-content {
	padding: 0 20px 17px;
	border: 0;
	font-size: 15.5px;
	line-height: 1.7;
	color: #3a3d41;
}

.wk-faq .elementor-tab-content p + p {
	margin-top: 11px;
}

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

@media (max-width: 1024px) {
	.wk-doc__body {
		max-width: none;
	}
}

@media (max-width: 767px) {
	.wk-doc__p,
	.wk-doc__p p,
	.wk-doc__list .elementor-icon-list-item,
	.wk-faq .elementor-tab-content {
		font-size: 15px;
	}

	.wk-faq .elementor-tab-title {
		padding: 13px 15px;
		gap: 11px;
	}

	.wk-faq .elementor-accordion-title {
		font-size: 15.5px;
	}

	.wk-faq .elementor-tab-content {
		padding: 0 15px 15px;
	}
}

/* ================================== cart, checkout and account pages ===
   These are WooCommerce block pages. They render straight into the theme's
   bare page wrapper, so without this they run edge to edge on every screen
   and their buttons keep WordPress's default slate .wp-element-button.
   ======================================================================= */

.woocommerce-cart .wk-page,
.woocommerce-checkout .wk-page,
.woocommerce-account .wk-page,
.woocommerce-order-received .wk-page {
	width: min(100% - (var(--wk-gutter) * 2), var(--wk-container));
	margin-inline: auto;
	padding-block: clamp(26px, 4vw, 56px);
}

/* Nothing inside may break the gutter - the blocks carry alignwide, and their
   tables and grids will happily push past it otherwise. */
.woocommerce-cart .wk-page .alignwide,
.woocommerce-checkout .wk-page .alignwide,
.woocommerce-cart .wk-page .alignfull,
.woocommerce-checkout .wk-page .alignfull {
	max-width: 100%;
	margin-inline: 0;
}

.woocommerce-cart .wk-page,
.woocommerce-checkout .wk-page {
	overflow-x: clip;
}

.woocommerce-cart .wc-block-cart-items,
.woocommerce-checkout .wc-block-components-form {
	max-width: 100%;
}

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

/* Beats .wp-element-button (one class) on specificity, in both the anchor and
   the button flavours the blocks emit. */
.wc-block-components-button.wp-element-button,
a.wc-block-components-button.wp-element-button,
button.wc-block-components-button.wp-element-button {
	background-color: var(--wk-green-800);
	border-color: var(--wk-green-800);
	border-radius: 10px;
	color: var(--wk-white);
	font-family: var(--wk-body);
	font-size: 15px;
	font-weight: 600;
	transition: background-color 0.2s ease;
}

.wc-block-components-button.wp-element-button:hover,
a.wc-block-components-button.wp-element-button:hover,
button.wc-block-components-button.wp-element-button:hover {
	background-color: var(--wk-green-700);
	border-color: var(--wk-green-700);
	color: var(--wk-white);
}

.wc-block-components-button.wp-element-button:disabled,
.wc-block-components-button.wp-element-button.wc-block-components-button--disabled {
	opacity: 0.5;
}

/* The outline flavour - "Continue shopping" and friends. */
.wc-block-components-button.outlined {
	border-color: var(--wk-green-800);
	color: var(--wk-green-800);
}

/* ------------------------------------------------------ small print --- */

.woocommerce-cart .wc-block-cart__submit-button,
.woocommerce-checkout .wc-block-components-checkout-place-order-button {
	padding-block: 15px;
}

.woocommerce-cart .wc-block-components-product-name,
.woocommerce-checkout .wc-block-components-product-name {
	color: var(--wk-green-ink);
	font-weight: 600;
}

.woocommerce-cart h2,
.woocommerce-checkout h2,
.woocommerce-cart .wc-block-cart__totals-title {
	font-family: var(--wk-display);
	color: var(--wk-green-ink);
}

/* Focus rings on shop pages match the rest of the site. */
.woocommerce-cart :focus-visible,
.woocommerce-checkout :focus-visible {
	outline: 3px solid var(--wk-gold-500);
	outline-offset: 2px;
}

@media (max-width: 767px) {
	.woocommerce-cart .wk-page,
	.woocommerce-checkout .wk-page {
		width: min(100% - 32px, var(--wk-container));
	}
}

/* ======================================= store notices ===
   The classic WooCommerce notice the PDP shows after an add to cart. Its
   "View cart" link keeps the plugin's own grey .button, which reads as a
   disabled control next to the green Add to Cart it just came from.

   woocommerce.css loads before this file but matches with `.woocommerce
   a.button` (two classes and an element), so a notice-scoped selector on
   its own would only tie. The body carries .woocommerce on every shop
   page, so leading with it wins outright.
   ========================================================================== */

.woocommerce .woocommerce-message a.button,
.woocommerce .woocommerce-info a.button,
.woocommerce .woocommerce-error a.button {
	padding: 11px 20px;
	border: 1px solid var(--wk-green-800);
	border-radius: 10px;
	background: var(--wk-green-800);
	color: var(--wk-white);
	font-family: var(--wk-body);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.woocommerce .woocommerce-message a.button:hover,
.woocommerce .woocommerce-info a.button:hover,
.woocommerce .woocommerce-error a.button:hover {
	background: var(--wk-green-700);
	border-color: var(--wk-green-700);
	color: var(--wk-white);
}

/* ==========================================================================
   Footer list markers
   The columns carried the same gold check mark the product cards use, which
   read as a claim rather than a list - a phone number is not something the
   footer is vouching for. They are plain round dots now: fa-circle, shrunk
   to bullet size.

   Two traps here. The widget writes --e-icon-list-icon-size: 14px into the
   page CSS, and Elementor's own widget-icon-list.min.css - which loads after
   this file - reads it at the same specificity, so the size has to be set one
   class deeper to stick. And the items align to flex-start, so the address
   would otherwise centre its dot against all three lines. Giving the marker a
   box exactly one line tall, pinned to the top of the item, lands it on the
   middle of the first line whether the line is one or three.
   ========================================================================== */

.wk-footer .elementor-widget-icon-list .elementor-icon-list-icon {
	align-self: flex-start;
	display: flex;
	align-items: center;
	/* The text sits at 14px/1.75, so this is one line box of it. */
	font-size: 14px;
	height: 1.75em;
	padding-top: 0;
}

.wk-footer .elementor-widget-icon-list .elementor-icon-list-icon svg {
	width: 6px;
	height: 6px;
	fill: var(--wk-gold-500);
	stroke: none;
}

/* ==========================================================================
   Product cards, second pass: seven products, two packs per card.
   Four to a row on desktop, two on a tablet, and on a phone one card per row
   with a down arrow between them - the same sequence device the Our Careful
   Process steps use. These rules sit last so they win over the five-across
   tracks above.
   ========================================================================== */

.wk-products .wk-products__grid {
	justify-content: center;
	row-gap: 22px;
}

.wk-products .wk-products__grid > .e-con.wk-card {
	position: relative;
	flex: 0 1 calc((100% - 3 * 18px) / 4);
	max-width: calc((100% - 3 * 18px) / 4);
	min-width: 0;
}

/* Two packs side by side, each taking half the card. */
.wk-card__packs {
	padding: 0;
	gap: 6px;
	min-height: 150px;
}

.wk-card__packs > .elementor-widget-image {
	flex: 1 1 0;
	min-width: 0;
	width: auto;
}

.wk-card .wk-card__packs .elementor-widget-image img,
.wk-plist .wk-card .wk-card__packs .elementor-widget-image img {
	width: 100%;
	height: 190px;
	object-fit: contain;
	object-position: bottom center;
}

.wk-plist .wk-card .wk-card__packs .elementor-widget-image img {
	height: 220px;
}

/* The arrow lives in the gap above every card that has a visible card before
   it. Home is static, so a sibling selector is enough; the listing filters and
   sorts, so products.js marks the followers with wk-card--follow instead. */
@media (max-width: 767px) {
	.wk-products .wk-products__grid {
		row-gap: 56px;
	}

	.wk-products .wk-products__grid > .e-con.wk-card {
		flex: 1 1 100%;
		max-width: none;
	}

	.wk-card .wk-card__packs .elementor-widget-image img,
	.wk-plist .wk-card .wk-card__packs .elementor-widget-image img {
		height: 240px;
	}

	.wk-products:not(.wk-plist) .wk-card ~ .wk-card::before,
	.wk-plist .wk-card.wk-card--follow::before {
		content: "";
		position: absolute;
		left: 50%;
		top: -42px;
		width: 26px;
		height: 26px;
		transform: translateX(-50%);
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2v14M5.2 11.5 10 16.6l4.8-5.1' fill='none' stroke='%230d3b1c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
			center / contain no-repeat;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.wk-products .wk-products__grid > .e-con.wk-card {
		flex: 0 1 calc((100% - 18px) / 2);
		max-width: calc((100% - 18px) / 2);
	}
}

/* ==========================================================================
   Hero packs, second pass: cow-milk 1 L, ghee 500 g and butter 500 g.
   The new cut-outs are wider than the old ones, so tablet and phone get their
   own sizes - scaled off the viewport so the row of three always fits its
   container instead of running off the left edge.
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1024px) {
	.wk-hero__title {
		max-width: none;
	}

	.wk-hero__title .elementor-heading-title {
		font-size: clamp(36px, 5.3vw, 58px);
	}

	.wk-hero__packs .elementor-widget-image img {
		max-height: 26vw;
	}

	.wk-hero__packs > .elementor-widget-image:nth-child(2) img {
		max-height: 19.5vw;
	}

	.wk-hero__packs > .elementor-widget-image:last-child img {
		max-height: 13vw;
	}
}

@media (max-width: 767px) {
	.wk-hero__packs {
		max-width: 100%;
		justify-content: center;
		overflow: visible;
	}

	.wk-hero__packs .elementor-widget-image img {
		max-height: 42vw;
	}

	.wk-hero__packs > .elementor-widget-image:nth-child(2) img {
		max-height: 35vw;
		margin-left: -6%;
	}

	.wk-hero__packs > .elementor-widget-image:last-child img {
		max-height: 25vw;
		margin-left: -6%;
	}
}

/* ==========================================================================
   Empty cart
   A short invitation and one button, then the same tile the product pages use
   for "More from the dairy": a cream square holding the whole pack, the name
   in the display face, the price, one outline button. Four across, two on a
   phone. The block's own grid is reset rather than fought - it sizes images
   to their natural width, which is what made the packs fill the page.
   ========================================================================== */

.wk-emptycart {
	padding-block: clamp(8px, 2vw, 24px) 0;
}

.wk-emptycart .wc-block-cart__empty-cart__title {
	margin: 0;
	font-size: clamp(1.7rem, 3.2vw, 2.3rem);
}

.wk-emptycart .wc-block-cart__empty-cart__title::before {
	display: none;
}

.wk-emptycart__lede {
	max-width: 34ch;
	margin: 10px auto 22px;
	color: var(--wk-muted);
	font-size: 16px;
	line-height: 1.55;
}

.wk-emptycart__cta .wp-block-button__link {
	padding: 13px 30px;
	border-radius: 10px;
	background: var(--wk-green-800);
	color: var(--wk-white);
	font-family: var(--wk-body);
	font-size: 15px;
	font-weight: 600;
}

.wk-emptycart__cta .wp-block-button__link:hover {
	background: var(--wk-green-700);
}

.wk-emptycart__more {
	margin: clamp(36px, 5vw, 60px) 0 18px;
	padding-top: clamp(26px, 3.5vw, 40px);
	border-top: 1px solid var(--wk-line);
	font-family: var(--wk-display);
	font-size: clamp(1.25rem, 2vw, 1.55rem);
	color: var(--wk-green-ink);
	text-align: left;
}

.wk-emptycart .wc-block-grid__products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wk-emptycart .wc-block-grid__product {
	display: flex;
	flex-direction: column;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 16px;
	border: 1px solid var(--wk-line);
	border-radius: var(--wk-radius);
	background: var(--wk-white);
	text-align: left;
}

.wk-emptycart .wc-block-grid__product-link {
	display: flex;
	flex-direction: column;
	gap: 4px;
	color: inherit;
	text-decoration: none;
}

.wk-emptycart .wc-block-grid__product-image {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	margin: 0 0 10px;
	padding: 14px;
	border-radius: 10px;
	background: var(--wk-cream-100);
}

.wk-emptycart .wc-block-grid__product-image img {
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
}

.wk-emptycart .wc-block-grid__product-title {
	font-family: var(--wk-display);
	font-size: 18px;
	font-weight: 600;
	color: var(--wk-green-ink);
}

.wk-emptycart .wc-block-grid__product-price {
	margin: 2px 0 14px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--wk-ink);
}

.wk-emptycart .wc-block-grid__product-add-to-cart {
	margin-top: auto;
}

.wk-emptycart .wc-block-grid__product-add-to-cart .wp-block-button__link {
	display: block;
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--wk-green-800);
	border-radius: 9px;
	background: transparent;
	color: var(--wk-green-800);
	font-family: var(--wk-body);
	font-size: 14px;
	font-weight: 600;
	text-align: center;
}

.wk-emptycart .wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
	background: var(--wk-green-800);
	color: var(--wk-white);
}

@media (max-width: 900px) {
	.wk-emptycart .wc-block-grid__products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}
}

@media (max-width: 480px) {
	.wk-emptycart .wc-block-grid__product {
		padding: 12px;
	}

	.wk-emptycart .wc-block-grid__product-title {
		font-size: 16px;
	}
}

/* WooCommerce's grid sizes each product from `.has-N-columns` with a flex
   basis and max-width of its own; the grid above owns the columns, so those
   are cancelled at higher specificity. */
.wk-emptycart .wc-block-grid.wc-block-grid .wc-block-grid__products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}

.wk-emptycart .wc-block-grid.wc-block-grid .wc-block-grid__products > .wc-block-grid__product {
	flex: none !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0;
	margin: 0 !important;
	padding: 16px;
}

@media (max-width: 900px) {
	.wk-emptycart .wc-block-grid.wc-block-grid .wc-block-grid__products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}
}

@media (max-width: 480px) {
	.wk-emptycart .wc-block-grid.wc-block-grid .wc-block-grid__products > .wc-block-grid__product {
		padding: 12px;
	}
}

.wk-emptycart .wc-block-grid.wc-block-grid .wc-block-grid__product .wc-block-grid__product-price {
	text-align: left;
}

.wk-emptycart .wc-block-grid.wc-block-grid .wc-block-grid__product .wc-block-grid__product-add-to-cart {
	width: 100%;
	text-align: left;
}

.wk-emptycart .wc-block-grid.wc-block-grid .wc-block-grid__product .wc-block-grid__product-add-to-cart .wp-block-button__link {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

.wk-emptycart .wc-block-grid__product .wc-block-grid__product-price,
.wk-emptycart .wc-block-grid__product .wc-block-grid__product-title,
.wk-emptycart .wc-block-grid__product .wc-block-grid__product-add-to-cart {
	text-align: left !important;
	justify-content: flex-start;
}

.wk-emptycart .wc-block-grid__product .wc-block-grid__product-price {
	display: block !important;
	width: 100%;
	margin-inline: 0 !important;
	padding-inline: 0 !important;
}