/* Monkey base: the component library (inc/components/*.php).
   Every number here was measured on www.monkeytronics.co.nz at 1670 px
   (Al's window) and 485 px (phone), 22-23 Oct 2026. Colours and fonts
   come from theme.json presets so a brand child theme restyles all of it.

   Layout tokens
   --mk-row     one row of the old 24-column grid: 0.0215 x the content width, plus the 11 px gap
                (41.95 at 1670, 35.9 at 1259: the old site's minmax(…, auto) rows), 35px on phones
   --mk-gutter  side gutter: 4vw, growing past 1440 px of content; 6vw on phones
   The content column is a 24-column grid with 11 px gaps; components place
   their parts with grid-column lines 1..25 and --mk-top-rows (rows below
   the padding). */

:root {
	--mk-row: calc(var(--monkey-content-w, 1440px) * 0.0215 + 11px);
	--mk-gutter: max(4vw, calc((100vw - 1440px) / 2));
	--mk-gap: 11px;
	--mk-ink: var(--wp--preset--color--ink);
	--mk-heading: var(--wp--custom--heading-color, #1d1d1d);
	--mk-grey: var(--wp--preset--color--grey);
	--mk-grey-dark: var(--wp--preset--color--grey-dark);
	--mk-accent: var(--wp--preset--color--accent);
	--mk-paper: var(--wp--preset--color--paper);
	--mk-faint: var(--wp--preset--color--grey-faint);
	--mk-line: var(--wp--preset--color--grey-light);
	--mk-brand: var(--wp--preset--color--brand);
	--mk-link: var(--wp--custom--link-color, var(--wp--preset--color--brand));
}
@media (max-width: 799px) {
	:root {
		--mk-row: 35px;
		--mk-gutter: 6vw;
	}
}

/* ---- section band and the grid inside it -------------------------------- */
.mk {
	position: relative;
	box-sizing: border-box;
	margin-top: 0;
	margin-bottom: 0;
	padding: var(--mk-pt, 3.3vw) 0 var(--mk-pb, 3.3vw);
	color: var(--mk-ink);
	background: var(--mk-paper);
	overflow: hidden;
}
.mk__inner {
	position: relative;
	display: grid;
	grid-template-columns: repeat(24, minmax(0, 1fr));
	column-gap: var(--mk-gap);
	row-gap: var(--mk-gap);
	align-items: start;
	align-content: start; /* rows never stretch into the section's minimum height; spare rows stay empty at the foot, as on the old site */
	width: var(--monkey-content-w);
	margin: 0 auto;
}
.mk .mk__inner > * {
	min-width: 0;
	margin-top: calc(var(--mk-top-rows, 0) * var(--mk-row));
}
@media (max-width: 799px) {
	.mk {
		padding: var(--mk-pt-m, 30px) 0 var(--mk-pb-m, 30px);
	}
	.mk__inner {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		width: calc(100% - 2 * var(--mk-gutter));
	}
	.mk .mk__inner > * {
		margin-top: 0;
	}
	.mk .mk__inner > * + * {
		margin-top: var(--mk-gap);
	}
}

/* tones: the old site's section themes */
.mk.mk-tone-faint, .mk.mk-bg-faint { background: var(--mk-faint); }
.mk.mk-tone-grey { color: var(--mk-grey); }
.mk.mk-tone-grey :where(h1, h2, h3, h4, p) { color: inherit; }
.mk.mk-tone-dark, .mk.mk-tone-brand { color: var(--mk-paper); }
.mk.mk-tone-brand { background: var(--mk-brand); }
.mk.mk-tone-dark :where(h1, h2, h3, h4, p), .mk.mk-tone-brand :where(h1, h2, h3, h4, p) { color: inherit; }

/* a photo behind a band (buy box, app band) */
.mk-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.mk-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--mk-bg-pos, 50% 50%);
	border-radius: 0;
}
.mk-bg__wash {
	position: absolute;
	inset: 0;
	background: var(--mk-paper);
	opacity: 0.15;
}
.mk .mk__inner { z-index: 1; }
/* a section with a minimum height centres its content in it, as the old site did */
.mk .mk__inner { min-height: calc(var(--mk-rows-total, 0) * var(--mk-row) - var(--mk-gap)); }
.mk--centred .mk__inner { min-height: max(var(--mk-min-h, 0px), calc(var(--mk-rows-total, 0) * var(--mk-row) - var(--mk-gap))); align-content: center; }
@media (max-width: 799px) {
	.mk .mk__inner, .mk--centred .mk__inner { min-height: calc(var(--mk-rows-total-m, 0) * var(--mk-row) - var(--mk-gap)); }
}

/* ---- type: the old site's sizes, fluid between 485 and 1000 px ---------- */
/* base type at :where() specificity (one class), so a component's own rule on the same element wins by order */
.mk :where(h1) { font-size: clamp(48.4px, 30.1px + 3.77vw, 67.84px); line-height: 1.056; }
.mk :where(h2) { font-size: clamp(35.44px, 24.46px + 2.264vw, 47.104px); line-height: 1.114; }
.mk :where(h3) { font-size: clamp(28.96px, 21.63px + 1.51vw, 36.736px); line-height: 1.142; }
.mk :where(h4) { font-size: clamp(22.48px, 18.82px + 0.755vw, 26.368px); line-height: 1.171; }
.mk :where(h1, h2, h3, h4) {
	margin: 32px 0;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--mk-ink);
}
.mk :where(h2) { color: var(--mk-heading); }
.mk.mk-tone-bold h2 { color: var(--mk-ink); }
.mk.mk-tone-bold :where(p), .mk.mk-tone-bold .mk-large { color: var(--mk-grey); }
.mk.mk-tone-bold .mk-ink { color: var(--mk-ink); }
.mk :where(p) {
	margin: 16px 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--mk-grey-dark);
}
.mk .mk-large { font-size: clamp(20.32px, 17.88px + 0.503vw, 22.912px); line-height: 1.5; color: var(--mk-ink); }
.mk .mk-small { font-size: clamp(13.996px, 1vw, 14.92px); line-height: 1.5; }
.mk .mk-ink { color: var(--mk-ink); }
.mk .mk-grey { color: var(--mk-grey-dark); }
.mk.mk-tone-grey .mk-grey { color: var(--mk-grey-dark); }
.mk .mk-accent { color: var(--mk-accent); }
.mk.mk-tone-grey .mk-large { color: inherit; }
.mk.mk-tone-grey .mk-ink { color: var(--mk-ink); }
.mk.mk-tone-dark .mk-large, .mk.mk-tone-dark .mk-grey, .mk.mk-tone-dark .mk-ink { color: inherit; }
/* Squarespace text margins: headings 32 px, paragraphs 16 px, collapsing; none at the block's ends */
.mk-rich > :first-child { margin-top: 0; }
.mk-rich > :last-child { margin-bottom: 0; }
.mk-rich :where(li > p) { margin: 0; }
/* an old text block: its rows as minimum height, content aligned in it, gap to the block before */
.mk-tb { display: flex; flex-direction: column; justify-content: flex-start; box-sizing: border-box; min-height: calc(var(--mk-rows, 1) * var(--mk-row) - var(--mk-gap)); margin-top: calc(var(--mk-gap-rows, 0) * var(--mk-row)); }
.mk-tb + .mk-tb { margin-top: calc(var(--mk-gap-rows, 0) * var(--mk-row) + var(--mk-gap)); }
.mk-tb--center { justify-content: center; }
.mk-tb--end { justify-content: flex-end; }
.mk-tb .mk-iconrow { margin: 0; }
.mk-rich ul, .mk-rich ol { margin: 0 0 1em; padding-left: 2em; color: var(--mk-grey-dark); }
.mk-rich li > p { margin: 0; }
.mk-rich a:not(.mk-btn) { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; }
.mk-rich blockquote { margin: 0 55px 0 40px; padding: 0; border: 0; font-style: normal; }
.mk-rich hr { height: 1px; margin: 8px 0; border: 0; background: rgba(192, 201, 203, 0.51); }
.mk-rich .mk-centre { text-align: center; } /* the old centred h1 on /report-vulnerability */
.mk-rich .mk-list--classic { padding-left: 40px; } /* the old classic-layout lists (report-vulnerability, security.txt): 40 px indent, 8 px between items */
.mk-rich .mk-list--classic li > p { margin: 8px 0; }
/* icon lines: 30 px icon, text one grid column in */
.mk-rich .mk-iconrow { position: relative; display: block; margin: 0; padding-left: calc((var(--monkey-content-w) - 253px) / 24 + 11px); min-height: 34px; font-size: clamp(20.32px, 17.88px + 0.503vw, 22.912px); line-height: 1.5; color: var(--mk-ink); }
.mk-rich .mk-iconrow > img { position: absolute; left: 9px; top: 2px; width: 31px; height: 31px; object-fit: contain; border-radius: 0; }
.mk.mk-tone-dark .mk-iconrow { color: inherit; }
.mk.mk-tone-bold .mk-iconrow { color: var(--mk-grey); }
/* two icon lines on one row: the second starts 35 % of the way across (old: 250 px of 714 at 1670; 53 % on phones) */
.mk-rich .mk-iconrow--pair { display: flex; gap: 11px; padding-left: 0; }
.mk-rich .mk-iconrow--pair > .mk-iconrow { flex: 0 0 35%; }
.mk-rich .mk-iconrow--pair > .mk-iconrow:last-child { flex: 1 1 auto; }
/* the old site's "text highlight": a hand-drawn accent stroke under a phrase */
.mk .mk-highlight {
	padding-bottom: 0.18em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M2 6 Q 50 1 98 5' fill='none' stroke='%23b2e4e3' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left bottom / 100% 0.35em;
}
html.mk-anim-ready .mk-anim .mk-highlight { background-size: 0% 0.35em; transition: background-size 1s ease 0.3s; }
html.mk-anim-ready .mk-anim.is-in .mk-highlight { background-size: 100% 0.35em; }
/* small tables (the A-E comfort-zone list): letter, term, description */
.mk-rich .mk-tr { display: grid; grid-template-columns: 49px 110px 1fr; column-gap: 11px; align-items: start; }
.mk-rich .mk-tr--rule { border-top: 1px solid rgba(192, 201, 203, 0.51); padding-top: 8px; margin-top: 8px; }
.mk-rich .mk-td > * { margin: 0; }
.mk-rich .mk-td:first-child { padding-left: 16px; } /* old: the letter sits 16 px in */
@media (max-width: 799px) {
	.mk-rich blockquote { margin: 0; }
	.mk-rich .mk-iconrow { padding-left: 52px; min-height: 30px; }
	/* the pair is a row, not an icon line: no indent of its own (it took the 52 px above and pushed
	   its second item 26 px off a 390 px screen). Each half counts its indent in its width, so the
	   second starts 53 % across; 176 px fits "Temperature" so both rows' second items line up. */
	.mk-rich .mk-iconrow--pair { padding-left: 0; }
	.mk-rich .mk-iconrow--pair > .mk-iconrow { box-sizing: border-box; flex: 0 0 max(50%, 176px); }
	.mk-rich .mk-iconrow > img { width: 30px; height: 30px; }
	/* old phone layout: letter and term on one line, the description full width under them */
	.mk-rich .mk-tr { grid-template-columns: 32px 1fr; }
	.mk-rich .mk-tr > .mk-td:nth-child(3) { grid-column: 1 / 3; margin-top: 8px; }
}

/* ---- buttons: the old site's three styles -------------------------------- */
.mk-btn {
	display: inline-block;
	box-sizing: border-box;
	padding: 12.8px 16px;
	border: 0;
	border-radius: 6.4px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
	letter-spacing: 0;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	background: var(--mk-brand);
	color: var(--mk-paper);
	transition: background 0.15s, color 0.15s, opacity 0.15s;
}
.mk-btn:hover { opacity: 0.85; }
.mk-btn--outline {
	padding: 11.2px 16px;
	border: 1px solid currentColor;
	background: transparent;
	color: var(--mk-ink);
}
.mk-btn--tertiary {
	border-radius: 0;
	background: var(--mk-paper);
	color: var(--mk-ink);
}
.mk.mk-tone-dark .mk-btn--outline, .mk.mk-tone-brand .mk-btn--outline { color: var(--mk-paper); }
.mk-btn--cart { padding: 12.8px 19.2px; min-width: 365px; line-height: 27px; text-align: center; }
.mk-btn.is-disabled { opacity: 0.4; pointer-events: none; }
.mk-buttons { display: flex; flex-wrap: wrap; gap: 11px; margin-top: calc(var(--mk-gap-rows, 0) * var(--mk-row) + var(--mk-gap)); }
/* an old button block was two rows tall with the button centred in it */
.mk-split .mk-buttons .mk-btn { margin-top: 13px; }
.mk-buttons--stack { flex-direction: column; align-items: flex-start; gap: 25px; }
.mk-buttons--center { justify-content: center; }
@media (max-width: 799px) {
	.mk-btn--cart { min-width: 200px; }
	.mk-buttons { margin-top: 11px; gap: 14px; }
	.mk-buttons--stack { gap: 14px; }
}

/* ---- images placed by grid rows ----------------------------------------- */
.mk-img {
	margin: 0;
	height: calc(var(--mk-img-rows, 6) * var(--mk-row) - var(--mk-gap));
	overflow: hidden;
}
.mk-img img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 0;
}
.mk-img--cover img { object-fit: cover; }
.mk-img--contain img { object-fit: contain; }
@media (max-width: 799px) {
	.mk-img { height: calc(var(--mk-img-rows-m, var(--mk-img-rows, 6)) * var(--mk-row) - var(--mk-gap)); }
}

/* ---- sliding rows (tiles, products, partners) and their pager ------------ */
.mk-track {
	display: flex;
	column-gap: var(--mk-track-gap, 0px);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.mk-track::-webkit-scrollbar { display: none; }
.mk-track > * { flex: 0 0 var(--mk-track-item, 25%); box-sizing: border-box; scroll-snap-align: start; }
.mk-pager {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	color: var(--mk-grey-dark);
}
.mk-pager button {
	width: 16px;
	height: 17px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}
.mk-pager button.is-disabled { opacity: 0.4; cursor: default; }
.mk-pager__prev svg { transform: scaleX(-1); }

/* ---- features ------------------------------------------------------------ */
.mk-features .mk__inner { row-gap: var(--mk-gap); }
.mk-features__item {
	display: flex;
	flex-direction: column;
	gap: var(--mk-gap);
}
.mk-features__icon {
	width: var(--mk-icon, 31px);
	height: var(--mk-icon, 31px);
	object-fit: contain;
	border-radius: 0;
}
.mk-features__title { margin: 0; }
.mk-features__text { margin: 0; min-height: calc(2 * var(--mk-row) - var(--mk-gap)); }
@media (max-width: 799px) {
	.mk-features .mk__inner {
		display: grid;
		grid-template-columns: repeat(var(--mk-cols-m, 2), minmax(0, 1fr));
		row-gap: var(--mk-gap-m, 11px);
	}
	.mk-features .mk__inner > * + * { margin-top: 0; }
	.mk-features__item { grid-column: auto !important; margin-top: 0; }
	.mk-features__item:nth-child(-n + 2) { margin-top: calc(2 * var(--mk-row)); }
	.mk-features[style*="--mk-cols-m:1"] .mk-features__item:nth-child(2) { margin-top: 0; }
	.mk-features__icon { width: var(--mk-icon-m, 24px); height: var(--mk-icon-m, 24px); }
	.mk-features__text { min-height: 0; }
	.mk-features[style*="--mk-cols-m:2"] .mk-features__text { max-width: 75%; min-height: calc(3 * var(--mk-row) - var(--mk-gap)); }
}

/* ---- split --------------------------------------------------------------- */
/* Split and gallery place their parts on explicit grid rows, as the old fluid
   engine did: each row is at least one row unit and grows with its content,
   and an image block stretches over its rows with the picture centred in it. */
@media (min-width: 800px) {
	.mk-split .mk__inner, .mk-gallery .mk__inner { grid-auto-rows: minmax(calc(var(--mk-row) - var(--mk-gap)), auto); }
	.mk-split .mk__inner > .mk-split__img, .mk-gallery .mk__inner > .mk-gallery__img { align-self: stretch; height: auto; margin-top: 0; }
	.mk-split .mk__inner > .mk-split__text, .mk-gallery .mk__inner > .mk-gallery__text { margin-top: 0; }
	.mk-split--behind .mk__inner > .mk-split__img { align-self: auto; height: calc(var(--mk-img-rows, 6) * var(--mk-row) - var(--mk-gap)); }
}
.mk-split__text { display: flex; flex-direction: column; align-items: flex-start; }
/* one old section (HCHO "Breathe Safe") indents its heading 40 px (its margin-left on the old site); on phones the whole block is indented */
.mk-split--inset h3 { margin-left: 40px; }
@media (max-width: 799px) {
	.mk-split--inset h3 { margin-left: 0; }
	.mk-split--inset .mk-tb { margin-left: 40px; }
}
.mk-split__eyebrow { margin: 0 0 var(--mk-gap); }
.mk-split__body:not(.mk-split__body--blocks), .mk-gallery__text, .mk-specs__heading { min-height: calc(var(--mk-text-rows, 1) * var(--mk-row) - var(--mk-gap)); }
.mk-split__body--blocks { display: block; }
.mk-split--behind .mk-split__img {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(var(--mk-pt, 3.3vw) + var(--mk-top-rows, 0) * var(--mk-row));
	margin: 0;
	z-index: 0;
}
.mk-split--behind .mk__inner { min-height: max(calc(var(--mk-img-rows, 11) * var(--mk-row)), calc(var(--mk-rows-total, 0) * var(--mk-row) - var(--mk-gap))); }
/* Phones: every part (image, each text block, the buttons) stacks in the
   order it had on the old site's phone layout, with the gap it had above it
   (--mk-order-m, --mk-gap-m from the page data); parts without a measured
   place fall back to eyebrow, image, text, buttons, 11 px apart. */
@media (max-width: 799px) {
	.mk-split .mk__inner, .mk-gallery .mk__inner { display: flex; flex-direction: column; row-gap: 0; }
	.mk-split__img { order: var(--mk-order-m, 2); }
	.mk-split__text, .mk-split__body--blocks { order: 3; display: contents; }
	.mk-split__eyebrow { order: 1; margin: 0; }
	.mk-split__body { order: 3; margin-top: var(--mk-gap); }
	.mk-split .mk-tb { order: var(--mk-order-m, 3); min-height: 0; justify-content: flex-start; }
	.mk-split .mk-buttons { order: var(--mk-order-m, 4); }
	.mk.mk-split .mk__inner > *, .mk.mk-split .mk-tb { margin-top: var(--mk-gap-m, var(--mk-gap)); }
	/* old phone layout of the behind-image split: the photo is a strip across the foot of the
	   section, 40 px above its padding, and the button sits 13 px into the strip */
	.mk-split--behind .mk__inner { padding-bottom: calc(var(--mk-img-rows-m, 4) * var(--mk-row) - var(--mk-gap) + 40px); }
	.mk-split--behind .mk-split__img { position: absolute; left: 0; right: 0; top: auto; bottom: calc(var(--mk-pb-m, 30px) + 40px); margin: 0; }
	.mk-split--behind .mk-buttons { position: relative; z-index: 1; margin-bottom: -60px; }
	.mk-split--inset .mk-buttons { align-self: center; } /* that section centres its phone button */
	.mk-gallery .mk-tb { min-height: 0; }
	.mk.mk-gallery .mk-tb { margin-top: var(--mk-gap-m, var(--mk-gap)); }
	.mk.mk-gallery .mk__inner > .mk-gallery__text { margin-top: 0; }
	.mk.mk-gallery .mk__inner > .mk-gallery__img { margin-top: var(--mk-gap-m, var(--mk-gap)); }
}

/* ---- gallery and columns ----------------------------------------------- */
.mk-gallery__img, .mk-col__img { margin: 0; }
.mk-col { display: flex; flex-direction: column; gap: var(--mk-gap); }
.mk-col__text > h3:first-child { min-height: calc(var(--mk-col-heading-rows, 1) * var(--mk-row) - var(--mk-gap) - 31px); margin-bottom: 0; }
.mk-col__text > h3:first-child + hr { margin-top: 15px; margin-bottom: 27px; }
.mk-col .mk-buttons { margin-top: 0; }

/* ---- tiles --------------------------------------------------------------- */
.mk-tiles__head {
	grid-column: 1 / 25;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding-bottom: 7px; /* old: 37 px from the heading's foot to the tiles (with the tiles' 30 px top padding) */
}
.mk-tiles__heading { margin: 0; color: var(--mk-ink); }
.mk-tiles--carousel .mk-tiles__track {
	grid-column: 1 / 25;
	--mk-track-gap: 20px;
	--mk-track-item: 31.48%;
	margin-right: calc(-1 * var(--mk-gutter));
	padding-right: var(--mk-gutter);
	scroll-padding-left: 0;
}
.mk-tile { display: block; color: inherit; text-decoration: none; }
.mk-tiles--carousel .mk-tile { padding: 30px 0 0; }
/* old: each tile fills its slot less the 20 px gap (453 px at 1670, 431 px on phones) */
.mk-tiles--carousel .mk-tile__img { width: 100%; margin-left: 0; }
.mk-tiles--carousel .mk-tile .mk-tile__title { width: 100%; margin-left: 0; }
.mk-tile__img { width: 100%; height: auto; margin: 0; aspect-ratio: 408 / 545; overflow: hidden; }
.mk-tile__img img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.mk-tile__title {
	margin: 50px 0 0;
	font-size: 19.456px;
	font-weight: 500;
	line-height: 1.114;
	letter-spacing: -0.02em;
	color: var(--mk-ink);
}
.mk-tiles--summary .mk-tiles__text { margin-bottom: 20px; } /* old: pictures 31 px under the text */
.mk-tiles--summary .mk-tiles__track {
	--mk-track-item: 25%;
	margin: 0 -13px;
	overflow: visible;
}
.mk-tiles--summary .mk-tile { padding: 0 13px; }
.mk-tiles--summary .mk-tile__img { aspect-ratio: 1; }
.mk-tiles--summary .mk-tile__title { margin-top: 15px; font-size: 30px; font-weight: 400; line-height: 1.2; letter-spacing: 0; }
@media (max-width: 799px) {
	/* old phone layout: this section keeps a 4vw gutter (19 px at 485) and one 431 px tile per view */
	.mk-tiles--carousel .mk__inner { width: calc(100% - 8vw); }
	.mk-tiles__head { padding-bottom: 7px; }
	.mk-tiles--carousel .mk-tiles__track { --mk-track-item: calc(100% - 16px); --mk-track-gap: 16px; margin-right: -4vw; padding-right: 4vw; }
	.mk-tiles--carousel .mk-tile { padding: 29px 0 0; }
	.mk-tile__title { margin-top: 55px; font-size: 18.16px; }
	.mk.mk-tiles--summary .mk__inner > .mk-tiles__text { margin-top: var(--mk-row); margin-bottom: 35px; } /* old phone rows: text one row down, pictures 46 px under it */
	.mk-tiles--summary .mk-tiles__track { --mk-track-item: 33.333%; margin: 0 -7px; }
	.mk-tiles--summary .mk-tile { padding: 0 7px; }
	.mk-tiles--summary .mk-tile__title { font-size: 22px; }
}

/* ---- specifications ------------------------------------------------------ */
.mk-specs__heading { grid-column: 1 / 21; margin: 0; align-self: start; }
.mk-specs__button { grid-column: 21 / 25; justify-self: end; padding-top: 13px; white-space: nowrap; }
.mk-specs__button--many { grid-column: 9 / 25; display: flex; gap: 11px; justify-content: flex-end; }
.mk-specs__card { margin-top: 0; }
@media (max-width: 799px) {
	/* old phone rows: heading one row down, cards 11 px apart, button block 52 px under the last card */
	.mk.mk-specs .mk__inner > .mk-specs__heading { margin-top: var(--mk-row); }
	.mk.mk-specs .mk__inner > .mk-specs__card { margin-top: 0; }
	.mk.mk-specs .mk__inner > .mk-specs__button { order: 9; align-self: center; margin-top: 41px; padding: 0; }
	.mk.mk-specs .mk__inner > .mk-specs__button--many { flex-direction: column; align-items: center; gap: 25px; }
}

/* ---- FAQ ----------------------------------------------------------------- */
.mk-faq__heading h2 { margin: 0; }
.mk-faq__heading p { margin: 0 0 var(--mk-gap); color: var(--mk-ink); }
.mk-faq__item { border-bottom: 1px solid rgba(0, 39, 46, 0.1); }
.mk-faq__item:last-child { border-bottom: 0; }
.mk-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 15px 0;
	list-style: none;
	cursor: pointer;
}
.mk-faq__q::-webkit-details-marker { display: none; }
.mk-faq__q h4 { margin: 0; line-height: 1.1; }
.mk-faq__icon { position: relative; flex: 0 0 14px; width: 14px; height: 14px; }
.mk-faq__icon::before, .mk-faq__icon::after {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: 14px;
	height: 2px;
	background: var(--mk-ink);
}
.mk-faq__icon::after { transform: rotate(90deg); }
.mk-faq__item[open] .mk-faq__icon::after { display: none; }
.mk-faq__a { padding: 0 0 30px; }
.mk-faq__a p { color: var(--mk-grey-dark); }
@media (max-width: 799px) {
	/* old phone rows: label one row down, heading 42 px under it, list 46 px under the heading */
	.mk-faq__heading { padding-top: var(--mk-row); }
	.mk-faq__heading p { margin-bottom: 42px; }
	.mk.mk-faq .mk__inner > .mk-faq__list { margin-top: 44px; }
}

/* ---- buy box ------------------------------------------------------------- */
.mk-buy__render { grid-column: 1 / 13; }
.mk-buy__meta { grid-column: 14 / 23; display: flex; flex-direction: column; align-items: flex-start; }
.mk-buy__logo { width: 231px; height: auto; margin: 15px 0 0; border-radius: 0; } /* old: the logo fills a 231 px block (48 px tall for AirSmart, 18 px for Sensor Node) */
.mk-buy__name { margin: 30px 0 0; }
.mk-buy__price { margin: 54px 0 0; font-size: 17.728px; line-height: 1.5; color: var(--mk-grey-dark); }
.mk-buy__price ins { text-decoration: none; }
.mk-buy__form { display: flex; align-items: stretch; gap: 6px; margin-top: 11px; }
.mk-qty { display: flex; align-items: center; width: 161px; height: 54px; }
.mk-qty button { width: 40px; height: 54px; padding: 0; border: 0; background: none; font-size: 22px; line-height: 1; color: var(--mk-ink); cursor: pointer; }
.mk-qty__input { width: 60px; height: 54px; padding: 0; border: 0; background: transparent; font: inherit; font-size: 16px; text-align: center; color: var(--mk-ink); -moz-appearance: textfield; }
.mk-qty__input::-webkit-outer-spin-button, .mk-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
@media (max-width: 799px) {
	/* old phone layout (485): logo 200 x 24 one row down; name across; price, quantity and button
	   centred in a 200 px column on the left; the render 282 x 164 on the right, running 15 px short
	   of the screen edge */
	.mk.mk-buy_box .mk__inner { display: grid; grid-template-columns: 200px minmax(0, 1fr); grid-template-rows: auto auto auto auto; column-gap: 0; row-gap: 0; align-items: start; }
	.mk.mk-buy_box .mk__inner > * { margin-top: 0; }
	.mk-buy__meta { display: contents; }
	.mk.mk-buy_box .mk-buy__logo { grid-column: 1; grid-row: 1; width: auto; height: 24px; margin: var(--mk-row) 0 0; }
	.mk.mk-buy_box .mk-buy__name { grid-column: 1 / 3; grid-row: 2; margin: 1px 0 0; }
	.mk.mk-buy_box .mk-buy__price { grid-column: 1; grid-row: 3; width: 200px; margin: 11px 0 0; text-align: center; }
	.mk.mk-buy_box .mk-buy__form { grid-column: 1; grid-row: 4; flex-direction: column; align-items: center; width: 200px; margin-top: 11px; }
	/* below 485 px the 282 px render ran over the quantity and Add to Cart (390: device from 111 px,
	   button to 204); it shrinks so the device (6.4 % into the render) starts where the button ends
	   (181 px into the column, less the 4 px they shared at 485), centred where it was, same height */
	.mk.mk-buy_box .mk__inner > .mk-buy__render { --mk-buy-w: min(282px, calc((100vw - 192px - var(--mk-gutter)) / 0.9358)); --mk-buy-h: calc(var(--mk-buy-w) * 164 / 282); grid-column: 2; grid-row: 3 / 5; order: 0; width: var(--mk-buy-w); height: var(--mk-buy-h); justify-self: end; margin: calc(29px + (164px - var(--mk-buy-h)) / 2) calc(15px - var(--mk-gutter)) calc((164px - var(--mk-buy-h)) / 2) 0; }
	.mk-btn--cart { min-width: 162px; }
}

/* ---- product carousel ---------------------------------------------------- */
.mk-shop__text { grid-column: 1 / 25; min-height: calc(var(--mk-text-rows, 1) * var(--mk-row) - var(--mk-gap)); text-align: center; }
.mk-shop__text h2 { margin-bottom: 0.36em; }
.mk-shop__row { grid-column: 1 / 25; position: relative; }
.mk-shop__row .mk-pager { margin: 0 0 15px; }
.mk-shop__track { --mk-track-item: 20%; margin: 0 -14.5px; }
.mk-shop__item { display: block; padding: 0 14.5px; color: inherit; text-decoration: none; text-align: center; }
.mk-shop__img { position: relative; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; }
.mk-shop__img img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.mk-shop__mark { position: absolute; top: 15px; right: 0; padding: 6px 8px; background: #222; color: #fff; font-size: 14px; line-height: 1; text-transform: uppercase; }
/* old: a name wider than its box breaks inside the word ("Maintena / nce Kit" on phones) rather than running into the next product */
.mk .mk-shop__item .mk-shop__name { margin: 15px 0 0; font-size: 30px; font-weight: 400; line-height: 1.2; overflow-wrap: break-word; color: var(--mk-ink); }
.mk-shop__price { margin: 2px 0 0; font-size: 14px; line-height: 1.5; color: var(--mk-grey-dark); }
.mk-shop__price del { opacity: 0.6; }
.mk-shop__price ins { text-decoration: none; }
.mk-product_carousel .mk-buttons { grid-column: 1 / 25; margin-top: var(--mk-gap); }
@media (max-width: 799px) {
	.mk.mk-product_carousel .mk__inner > .mk-shop__text { margin-top: var(--mk-row); }
	.mk-shop__text h2 { margin-bottom: 32px; }
	/* old (485): three per view, 145 px items 136.5 px wide; name stays 30 px on 36 px lines, price 14 px */
	.mk-shop__track { --mk-track-item: 33.333%; margin: 0 -5px; }
	.mk-shop__track > * { min-width: 0; }
	.mk-shop__item { padding: 0 5px; }
	/* below 485 px (no old measurement) the name scales with its box (29.33vw - 6.67 px, 136 px at 485)
	   so "AirSmart" (4.24 em) keeps one line, as at 485: 23.8 px at 390, 21.9 at 360; 30 px from 485 up.
	   "Maintenance" still breaks inside the word, as on the old site at 485 */
	.mk .mk-shop__item .mk-shop__name { font-size: min(30px, calc(6.49vw - 1.475px)); }
}

/* ---- partners ------------------------------------------------------------ */
.mk-partners__text { min-height: calc(var(--mk-text-rows, 1) * var(--mk-row) - var(--mk-gap)); text-align: center; }
.mk-partners__text h4 { margin-bottom: var(--mk-gap); }
.mk-partners__text h2 { margin-bottom: 32px; }
.mk-partners__text p { margin-bottom: 13px; }
.mk-partners__row .mk-pager { margin: 0 0 15px; }
.mk-partners__track { --mk-track-item: 25%; margin: 0 -0.96%; }
/* slots 336 px apart with a 310 px circle in each at 1670 (padding is a percentage of the track) */
.mk-partners__item { display: block; padding: 0 1%; }
.mk-partners__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 1px solid var(--mk-line);
	background: var(--mk-paper);
	overflow: hidden;
}
.mk-partners__logo img { width: 70%; height: 60%; object-fit: contain; border-radius: 0; }
.mk-partners__col { margin-top: var(--mk-gap); }
@media (max-width: 799px) {
	.mk-partners__track { --mk-track-item: 33.333%; }
	.mk-partners__col { margin-top: 35px; }
	.mk-partners__col h3 { margin-bottom: 11px; }
}

/* ---- app band ------------------------------------------------------------ */
.mk-app__logo img { height: 65px; width: auto; margin-top: 4px; border-radius: 0; }
.mk-app__text { margin-top: calc(2 * var(--mk-row)); }
.mk-app__text h2 { margin-bottom: 11px; }
.mk-app__text h4 { max-width: 75%; margin-bottom: 11px; opacity: 0.8; }
.mk-app__text h3 { max-width: 83%; margin-top: 26px; opacity: 0.8; }
.mk-app__text h3 a { color: inherit; text-decoration: underline; }
.mk-app__text .mk-iconrow + .mk-iconrow { margin-top: var(--mk-gap); } /* old: one icon line per grid row, 45 px apart */
.mk-app__badges { display: flex; gap: var(--mk-gap); }
.mk.mk-app_band .mk__inner > .mk-app__badges { margin-top: 59px; } /* old: badges 72 px under the closing line */
/* each badge fills four grid columns (231 px at 1670, 200 px on phones) */
.mk-app__badge { display: flex; align-items: center; justify-content: center; width: calc(50% - 5.5px); }
.mk-app__badge img { width: 100%; height: auto; border-radius: 0; }
@media (max-width: 799px) {
	.mk-app__logo img { height: 37px; }
	.mk-app__text { margin-top: var(--mk-gap); }
	.mk-app__text h4, .mk-app__text h3 { max-width: 62%; }
	/* old phone layout: icon lines start 99 px under the sub-line, badges 79 px under the closing line */
	.mk-app__text h4 { margin-bottom: 133px; }
	.mk.mk-app_band .mk__inner > .mk-app__badges { margin-top: 84px; }
}

/* ---- text band, form embed, prose ---------------------------------------- */
.mk-form__text { text-align: center; }
.mk-form__text h3 { margin: 0 0 calc(2 * var(--mk-row) - 42px); }
.mk-form__frame iframe { display: block; width: 100%; height: var(--mk-frame-h, 750px); border: 0; transition: height 0.5s ease; } /* Zoho resizes it by postMessage (monkey.js) */
@media (max-width: 799px) {
	.mk.mk-form_embed .mk__inner > .mk-form__text { margin-top: 99px; } /* old phone layout: heading three rows down */
}
/* Prose (privacy policy): blocks on the old grid rows (24 Oct 2026). Rows
   grow with their content as the old fluid engine's did; the contents
   list is sticky inside its rows; lists 40 px in, items 8 px apart;
   indented paragraphs 40 px in. Phones stack by order_m with gap_m. */
.mk-prose__blk > :first-child { margin-top: 0; }
.mk-prose__blk > :last-child { margin-bottom: 0; }
.mk-prose__blk ul, .mk-prose__blk ol { padding-left: 40px; }
.mk-prose__blk li > p { margin: 8px 0; }
.mk-prose__blk ol a { color: var(--mk-accent); text-decoration: none; }
.mk-prose__anchor { height: 0; }
.mk-rich .mk-indent { margin-left: 40px; }
@media (min-width: 800px) {
	.mk-prose .mk__inner { grid-auto-rows: minmax(calc(var(--mk-row) - var(--mk-gap)), auto); }
	.mk-prose__blk--sticky { position: sticky; top: 120px; align-self: start; }
}
@media (max-width: 799px) {
	.mk-prose .mk__inner { row-gap: 0; }
	.mk.mk-prose .mk__inner > .mk-prose__blk, .mk.mk-prose .mk__inner > .mk-prose__anchor { order: var(--mk-order-m, 0); margin-top: var(--mk-gap-m, 0px); }
	.mk.mk-prose .mk__inner > .mk-prose__blk { min-height: calc(var(--mk-rows-m, 1) * 35px - 11px); } /* the old phone rows: 24 px plus the 11 px gap, a minimum the block grows past */
}

/* ---- footer -------------------------------------------------------------- */
.mk-footer .mk__inner { row-gap: 0; }
.mk.mk-footer p { margin: 0; line-height: 24px; color: rgba(253, 255, 255, 0.5); }
.mk-footer__group { display: flex; flex-direction: column; }
.mk-footer__group[data-col="1"] { grid-column: 1 / 9; }
.mk-footer__group[data-col="2"] { grid-column: 9 / 13; }
.mk-footer__group[data-col="3"] { grid-column: 13 / 17; }
.mk.mk-footer .mk-footer__label { margin: var(--mk-row) 0 0; min-height: 31px; font-size: 13.996px; line-height: 21px; }
.mk-footer__links { display: grid; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }
.mk-footer__group[data-col="1"] .mk-footer__links { grid-template-columns: 1fr 1fr; column-gap: 11px; grid-auto-flow: column; grid-template-rows: repeat(4, auto); }
.mk-footer__links li { min-height: calc(var(--mk-row) - var(--mk-gap)); margin: var(--mk-gap) 0 0; }
.mk-footer__links a { color: var(--mk-paper); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mk-footer__links a:hover { opacity: 0.7; }
.mk-footer__brand { grid-column: 17 / 25; display: flex; flex-direction: column; }
.mk-footer__logo { display: block; width: 236px; height: 49px; margin: 33px 0 0 28px; }
.mk-footer__logo img { width: 100%; height: 100%; object-fit: contain; object-position: left; border-radius: 0; }
.mk.mk-footer .mk-footer__blurb { margin: calc(var(--mk-row) + 2px) 0 0; }
.mk-footer__row { display: flex; align-items: center; justify-content: space-between; margin-top: calc(var(--mk-row) + 11px); margin-bottom: calc(var(--mk-row) - 20px); }
.mk-footer__button { margin-left: 12px; }
.mk-footer__social { display: flex; gap: 9px; }
.mk-footer__social a { display: block; width: 32px; height: 32px; color: var(--mk-paper); }
.mk-footer__social svg { width: 32px; height: 32px; }
@media (max-width: 799px) {
	.mk-footer { padding-top: 9px; }
	.mk-footer__group[data-col="1"] .mk-footer__links { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
	.mk-footer__links li { min-height: 24px; }
	.mk.mk-footer .mk-footer__label { margin-top: 35px; min-height: 24px; font-size: 14.92px; }
	.mk-footer__logo { width: 282px; height: 59px; margin: 35px 0 0; }
	.mk.mk-footer .mk-footer__blurb { margin-top: 35px; }
	.mk-footer__row { margin: 35px 0 46px; }
	.mk-footer__button { margin-left: 7px; }
}

/* ---- the local catalogue page -------------------------------------------- */
.mk-cat__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
	box-sizing: border-box;
	width: 100%;
	padding: 10px var(--mk-gutter);
	background: var(--wp--preset--color--warning);
	color: #1d1d1b;
	font-size: 14px;
	line-height: 1.4;
}
.mk-cat__bar strong { font-size: 16px; }
.mk-cat__bar a { color: inherit; }
.mk-cat__bar details { width: 100%; }
.mk-cat__bar summary { cursor: pointer; }
.mk-cat__bar pre { max-height: 360px; margin: 8px 0 0; padding: 10px; overflow: auto; background: rgba(255, 255, 255, 0.6); font-size: 12px; line-height: 1.4; }
.mk-cat__nav { display: flex; gap: 6px; }
.mk-cat__nav a, .mk-cat__nav span { padding: 4px 10px; border: 1px solid #1d1d1b; border-radius: 4px; text-decoration: none; }
.mk-cat__nav span { opacity: 0.35; }
.mk-cat__index { padding: 24px var(--mk-gutter); background: var(--mk-faint); }
.mk-cat__index ul { columns: 3; margin: 0; padding-left: 1.2em; }

/* ---- the local brand page (style guide) --------------------------------- */
.mk-sg__swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mk-sg__chip { display: block; height: 64px; border: 1px solid var(--mk-line); }
.mk-sg__swatch p { margin: 8px 0 0; }
.mk-sg__note { margin-top: -0.5em; }
.mk-sg__grid { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); column-gap: 11px; }
.mk-sg__cell { height: 48px; background: rgba(0, 39, 46, 0.08); font-size: 11px; line-height: 48px; text-align: center; }
.mk-sg__logos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.mk-sg__logo { padding: 24px; border: 1px solid var(--mk-line); }
.mk-sg__logo.is-dark { background: var(--mk-brand); color: var(--mk-paper); }
.mk-sg__logo.is-dark p { color: inherit; }
.mk-sg__logo img { display: block; height: 64px; width: auto; border-radius: 0; }
.mk-sg__logo p { margin: 12px 0 0; }
@media (max-width: 799px) {
	.mk-sg__swatches { grid-template-columns: repeat(2, 1fr); }
	.mk-sg__logos { grid-template-columns: 1fr; }
}

/* ---- scroll-in animations (the old site's global animations) ------------- */
/* Squarespace: type "scale", style "fade", 0.65 s ease, delays staggered by
   4 ms per element. Text and buttons scale from 0.9 and fade; images fade.
   assets/js/monkey.js adds mk-anim-ready to <html> and is-in when an element
   enters the view; without JavaScript everything is simply visible. */
html.mk-anim-ready .mk-anim { opacity: 0; transition: opacity 0.65s ease, transform 0.65s ease; transition-delay: var(--mk-anim-delay, 0s); }
html.mk-anim-ready .mk-anim--scale { transform: scale(0.9); }
html.mk-anim-ready .mk-anim.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	html.mk-anim-ready .mk-anim { opacity: 1; transform: none; transition: none; }
}

/* ---- blog: list and post (inc/blog.php, measured 24 Oct 2026) ------------- */
/* List: 4vw padding all round (the content cap grows the side gutter), four
   square pictures a row, 150 px column gap, 100 px row gap; the title 20 px
   under its picture, centred, in h3 size, inside 10 % side margins. The
   Older / Newer line sits one row gap plus 6vw under the last row, 3vw
   above the 4vw bottom padding; then an empty 6vw band. */
.mk-blog, .mk-blog__tail, .mk-post, .mk-post__nav, .mk-plist, .mk-pdp, .mk-reviews, .mk-cart, main > .woocommerce { margin-top: 0; margin-bottom: 0; } /* core puts a 24 px block gap before each child of main; the old bands abut */
body main .wp-block-post-content > .woocommerce { max-width: none !important; margin-left: calc(-1 * var(--wp--style--root--padding-left, 0px)) !important; margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px)) !important; } /* the cart shortcode's wrapper bleeds like an alignfull block; core's auto margins and WooCommerce's 1000 px cap are both !important or heavier */
.mk-blog {
	box-sizing: border-box;
	padding: 4vw; /* the old list is not capped at 1440 px: 4vw all round at any width */
	color: var(--mk-heading);
	background: var(--mk-paper);
}
.mk-blog__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: 150px;
	row-gap: 100px;
}
.mk-blog__item { text-align: center; }
.mk-blog__pic { display: block; line-height: 0; }
.mk-blog__img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; } /* height: auto, or the attribute height wins over the ratio */
.mk-blog__text { margin: 0 10%; padding-top: 20px; } /* padding, so the title's top margin does not collapse into it */
.mk-blog__title { margin: 10px 0 11px; /* the old title sat 10 px into its box, 11 px above its foot */ font-size: clamp(28.96px, 21.63px + 1.51vw, 36.736px); line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; color: var(--mk-heading); }
.mk-blog__title a { color: inherit; text-decoration: none; }
.mk-blog__nav { grid-column: 1 / -1; display: flex; justify-content: space-between; margin: 6vw 0 3vw; font-size: 16px; line-height: 24px; }
.mk-blog__newer, .mk-blog__older { flex: 1 1 50%; }
.mk-blog__older { text-align: right; }
.mk-blog__link { display: inline-flex; align-items: center; color: inherit; text-decoration: none; }
.mk-blog__caret { width: 9px; height: 16px; stroke-width: 1; }
.mk-blog__older .mk-blog__caret { margin-left: 12px; }
.mk-blog__newer .mk-blog__caret { margin-right: 12px; }
.mk-blog__empty { grid-column: 1 / -1; margin: 0; }
.mk-blog__tail { height: 6vw; background: var(--mk-paper); }
@media (max-width: 799px) {
	.mk-blog { padding: 4vw 6vw; }
	.mk-blog__grid { display: block; }
	.mk-blog__item { margin-bottom: 30px; }
	.mk-blog__text { padding-top: 24px; }
	.mk-blog__nav { margin: 6vw 0 3vw; }
}

/* Post: the column is 75 % of the content width (1141 of 1521 at 1655),
   centred; h1 centred with 16 px under it; blocks 17 px apart (none
   above the first); the old paragraph and heading margins; an image
   block N/12 of the row wide, offset by the spacer columns before it. */
.mk-post {
	box-sizing: border-box;
	padding: 4vw 4vw 0; /* not capped at 1440 px either: the column is 75 % of (100vw - 8vw) */
	background: var(--mk-paper);
	color: var(--mk-grey-dark);
}
.mk-post__inner { width: 75%; margin: 0 auto; }
.mk-post__title { margin: 0 0 16px; text-align: center; font-size: clamp(48.4px, 30.1px + 3.77vw, 67.84px); line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; color: var(--mk-heading); }
.mk-post__body { margin-bottom: 3vw; }
.mk-post .mk-blk { padding: 17px 0; }
.mk-post .mk-blk:first-child { padding-top: 0; }
.mk-post .mk-blk--text > :first-child { margin-top: 0; }
.mk-post .mk-blk--text > :last-child { margin-bottom: 0; }
.mk-post p { margin: 16px 0; font-size: 16px; line-height: 24px; color: var(--mk-grey-dark); }
.mk-post p.mk-large { font-size: clamp(20.32px, 17.88px + 0.503vw, 22.912px); line-height: 1.5; color: var(--mk-ink); }
.mk-post p.mk-small { font-size: clamp(13.996px, 1vw, 14.92px); line-height: 1.5; }
.mk-post h2, .mk-post h3, .mk-post h4 { margin: 32px 0; font-weight: 500; letter-spacing: -0.02em; }
.mk-post h2 { font-size: clamp(35.44px, 24.46px + 2.264vw, 47.104px); line-height: 1.114; color: var(--mk-heading); }
.mk-post h3 { font-size: clamp(28.96px, 21.63px + 1.51vw, 36.736px); line-height: 1.142; color: var(--mk-ink); }
.mk-post h4 { font-size: clamp(22.48px, 18.82px + 0.755vw, 26.368px); line-height: 1.171; color: var(--mk-ink); }
.mk-post ul, .mk-post ol { margin: 16px 0; padding-left: 40px; color: var(--mk-grey-dark); }
.mk-post li > p { margin: 8px 0; }
.mk-post a { color: var(--mk-link); text-decoration: underline; text-decoration-thickness: 1px; }
.mk-post .mk-blk--img { box-sizing: border-box; width: calc((100% + 34px) * var(--mk-span, 12) / 12 - 34px); margin: 0 0 0 calc((100% + 34px) * var(--mk-off, 0) / 12); }
.mk-post .mk-blk__pic { margin: 0 auto; } /* capped at the picture's own width (inline max-width), centred */
.mk-post .mk-blk--img img { display: block; width: 100%; height: auto; }
.mk-post .mk-blk--img figcaption p { margin: 16px 0; font-size: 16px; line-height: 24px; color: var(--mk-grey-dark); }
.mk-post__tags { margin: 0; font-size: 16px; line-height: 24px; color: var(--mk-heading); }
.mk-post__tags a { margin-right: 22px; color: inherit; text-decoration: none; }
/* Comments: 3vw under the body or the tags (the old margins collapsed to
   50 px); "Comments (N)" 20 px into the box in h3 size (ink) with the sort
   menu on the right; the writing box 20 px under: 140 px input, a 66 px
   foot with the two 12 px actions at the right, 3 px corners. */
.mk-comments { margin-top: 3vw; padding-top: 20px; }
.mk-comments__head { display: flex; justify-content: space-between; align-items: flex-start; }
.mk-post .mk-comments__count { margin: 0; /* outranks the post's 32 px heading margins */ font-size: clamp(28.96px, 21.63px + 1.51vw, 36.736px); line-height: 1.142; font-weight: 500; letter-spacing: -0.02em; color: var(--mk-ink); }
.mk-comments__sort { width: 130px; font: inherit; font-size: 16px; color: #000; background: transparent; border: 0; appearance: none; text-align: right; } /* the old menu showed as plain text */
.mk-comments__list { margin: 20px 0 0; padding: 0; list-style: none; }
.mk-comments__new { display: block; margin: 20px 0 15px; border: 1px solid var(--mk-line); border-radius: 3px; background: var(--mk-paper); }
.mk-comments__input { display: block; box-sizing: border-box; width: 100%; height: 140px; padding: 15px; border: 0; border-radius: 3px 3px 0 0; font: inherit; font-size: 16px; color: #000; background: transparent; resize: vertical; }
.mk-comments__btns { box-sizing: border-box; height: 66px; padding: 10px; text-align: right; font-size: 12px; line-height: 30px; border-radius: 0 0 3px 3px; } /* same white as the input above it, as the old box */
.mk-comments__preview { display: inline; margin-right: 10px; color: var(--mk-grey-dark); }
.mk-comments__post { display: inline-block; padding: 0 14px; height: 36px; font: inherit; font-size: 12px; font-weight: 500; line-height: 36px; text-transform: uppercase; color: var(--mk-paper); background: var(--mk-ink); border: 0; border-radius: 3px; cursor: pointer; vertical-align: middle; }
/* Previous / next band: full width, 3vw 4vw padding; each side at most
   half, the title in h3 size on 1.0 line height, the caret 18 px wide
   with 25 px to the title. "Previous" and "Next" are for screen readers. */
.mk-post__nav { display: flex; justify-content: space-between; box-sizing: border-box; padding: 3vw 4vw; background: var(--mk-paper); color: var(--mk-heading); }
.mk-post__nav-link { display: flex; align-items: center; max-width: 50%; color: inherit; text-decoration: none; }
.mk-post__nav-link--next { margin-left: auto; text-align: right; }
.mk-post__nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mk-post__nav-title { margin: 0; font-size: clamp(28.96px, 21.63px + 1.51vw, 36.736px); line-height: 1; font-weight: 500; letter-spacing: -0.02em; color: inherit; }
.mk-post__nav-caret { flex: 0 0 18px; width: 18px; height: 32px; stroke-width: 1; }
.mk-post__nav-link--prev .mk-post__nav-caret { margin-right: 25px; }
.mk-post__nav-link--next .mk-post__nav-caret { margin-left: 25px; }
@media (max-width: 799px) {
	.mk-post { padding: 6vw 6vw 0; }
	.mk-post__inner { width: 100%; }
	.mk-post .mk-blk--img { width: 100%; margin-left: 0; } /* the old columns stack full width on phones */
	.mk-post__tags { margin: 0 0 20px; }
	.mk-comments { margin-top: 30px; }
	.mk-comments__head { display: block; } /* the old phone layout put the sort menu under the heading */
	.mk-comments__sort { display: block; width: auto; margin-top: 6px; text-align: left; }
	.mk-post__nav { padding: 3vw 6vw; }
}

/* ---- shop: list, product, reviews, cart (inc/shop.php, 24 Oct 2026) ---- */
/* List: 220 px category column, 40 px gap, four products a row (2vw / 4vw
   gaps), 18 px above and below, 4vw sides (not capped at 1440). */
.mk-plist { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 40px; box-sizing: border-box; padding: 18px 4vw; background: var(--mk-paper); color: var(--mk-grey-dark); }
.mk-plist__head { grid-column: 1 / -1; height: 0; margin: 0 0 30px; overflow: hidden; } /* the old header kept its 30 px margin on desktop with the title hidden */
.mk-plist__head h2 { margin: 0 0 10px; font-size: clamp(35.44px, 24.46px + 2.264vw, 47.104px); line-height: 1.114; font-weight: 500; letter-spacing: -0.02em; color: var(--mk-heading); }
.mk-plist__nav ul { list-style: none; margin: 0 0 16px; padding: 0; }
.mk-plist__nav a { display: block; padding: 6px 0; font-size: 16px; line-height: 24px; color: var(--mk-grey-dark); text-decoration: none; }
.mk-plist__nav li:first-child a { padding-top: 0; }
.mk-plist__select-wrap { display: none; }
.mk-plist__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 2vw; row-gap: 4vw; }
.mk-plist__link { display: block; color: inherit; text-decoration: none; }
.mk-plist__pic { aspect-ratio: 3 / 2; overflow: hidden; }
.mk-plist__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mk-plist__meta { display: flex; flex-direction: column; align-items: center; row-gap: 4px; margin-top: 2vw; text-align: center; } /* the old link's 1vw gap plus the meta's 1vw margin */
.mk-plist__title { margin: 0; font-size: clamp(22.48px, 18.82px + 0.755vw, 26.368px); line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; color: var(--mk-ink); }
.mk-plist__price { margin: 8px 0 0; font-size: 16px; line-height: 24px; color: var(--mk-grey-dark); }
.mk-plist__status { font-size: 16px; line-height: 24px; color: var(--mk-ink); } /* always present: empty it still takes the 4 px gap */
.mk-plist__status--sale { line-height: 19px; color: var(--mk-accent); }
.mk-plist__empty { grid-column: 1 / -1; margin: 0; }
@media (max-width: 799px) {
	.mk-plist { display: block; padding: 18px 6vw; }
	.mk-plist__head { height: auto; margin: 0; overflow: visible; }
	.mk-plist__nav { display: none; }
	.mk-plist__select-wrap { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; column-gap: 11px; min-height: 48px; margin: 9px 0 18px; background: var(--mk-paper); } /* the old menu row stuck to the top while the list scrolled */
	.mk-plist__select-wrap label { font-size: 16px; line-height: 22.4px; font-weight: 500; color: var(--mk-grey-dark); }
	.mk-plist__select { flex: 1 1 auto; height: 41px; padding: 9px 34px 5px 8px; font: inherit; font-size: 16px; color: rgba(0, 39, 46, 0.55); background: transparent; border: 0; border-bottom: 1px solid var(--mk-grey-dark); border-radius: 0; } /* the old menu: text and caret over a bottom rule */
	.mk-plist__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 30px; row-gap: 30px; }
	.mk-plist__pic { aspect-ratio: 1 / 1; }
}

/* Product: breadcrumb 50 px under the header, two columns 3vw apart 22 px
   under it; gallery square, meta rows 11 px apart; 50 px below. */
.mk-pdp { box-sizing: border-box; padding: 50px 4vw; background: var(--mk-paper); color: var(--mk-grey-dark); }
.mk-pdp__nav { display: flex; column-gap: 8px; font-size: 16px; line-height: 24px; color: rgba(29, 29, 29, 0.9); }
.mk-pdp__nav a { color: inherit; text-decoration: none; }
.mk-pdp__wrap { display: flex; column-gap: 3vw; margin-top: 22px; }
.mk-pdp__gallery { position: relative; flex: 0 0 50%; aspect-ratio: 1 / 1; overflow: hidden; }
.mk-pdp__slide { position: absolute; inset: 0; margin: 0; opacity: 0; }
.mk-pdp__slide.is-current { opacity: 1; }
.mk-pdp__img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mk-pdp__ctrl { position: absolute; top: 50%; display: flex; align-items: center; justify-content: center; width: 53px; height: 53px; margin-top: -26.5px; padding: 0; border: 0; background: transparent; color: #000; cursor: pointer; }
.mk-pdp__ctrl--prev { left: 25px; }
.mk-pdp__ctrl--next { right: 25px; }
.mk-pdp__caret { width: 12px; height: 21px; stroke-width: 1; }
.mk-pdp__count { position: absolute; top: 18px; right: 20px; font-size: 12px; color: var(--mk-paper); }
.mk-pdp__meta { display: flex; flex: 1 1 auto; flex-direction: column; align-self: flex-start; row-gap: 11px; min-width: 0; }
.mk-pdp__title { margin: 0; font-size: clamp(35.44px, 24.46px + 2.264vw, 47.104px); line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; color: var(--mk-heading); }
.mk-pdp__summary a { font-size: 16px; line-height: 24px; text-transform: capitalize; color: var(--mk-grey-dark); text-decoration: underline; }
.mk-pdp__price { margin: 0 0 5px; padding-bottom: 32px; font-size: clamp(22.48px, 18.82px + 0.755vw, 26.368px); line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; color: var(--mk-grey-dark); } /* 32 px: the old page kept an empty payment-messaging slot under the price */
.mk-pdp__price del { text-decoration: line-through; opacity: 0.6; }
.mk-pdp__price ins { text-decoration: none; }
.mk-pdp__desc { margin: 0 0 5px; color: var(--mk-heading); }
.mk-pdp__desc p { margin: 16px 0; font-size: 16px; line-height: 24px; color: var(--mk-heading); }
.mk-pdp__desc p:first-child { margin-top: 0; }
.mk-pdp__desc p:last-child { margin-bottom: 0; }
.mk-pdp__desc a { color: var(--mk-link); text-decoration: none; }
.mk-pdp__buy { display: flex; align-items: center; column-gap: 11px; }
.mk-pdp .mk-qty { display: flex; align-items: center; justify-content: center; width: 80px; height: 55px; box-sizing: border-box; }
.mk-pdp .mk-qty__input { width: 33px; height: 27px; }
.mk-pdp .mk-qty__dec, .mk-pdp .mk-qty__inc { width: 17px; }
.mk-pdp__btn { display: inline-block; box-sizing: border-box; min-width: 264px; height: 55px; padding: 0 20px; font: inherit; font-size: 16px; line-height: 55px; text-align: center; text-transform: uppercase; color: var(--mk-paper); background: var(--mk-ink); border: 0; border-radius: 6.4px; cursor: pointer; }
.mk-pdp__btn.is-disabled { opacity: 0.5; cursor: default; }
.mk-pdp__buy--variable .variations { margin: 0 0 11px; }
.mk-pdp__buy--variable table, .mk-pdp__buy--variable td, .mk-pdp__buy--variable th { border: 0; padding: 0; }
.mk-pdp__buy--variable select { height: 41px; padding: 9px 34px 5px 8px; font: inherit; font-size: 16px; color: var(--mk-ink); background: transparent; border: 1px solid var(--mk-line); }
.mk-pdp__buy--variable .reset_variations { display: none; }
.mk-pdp__buy--variable .woocommerce-variation-add-to-cart { display: flex; align-items: center; column-gap: 11px; }
.mk-pdp__buy--variable .single_add_to_cart_button { display: inline-block; box-sizing: border-box; min-width: 264px; height: 55px; padding: 0 20px; font: inherit; font-size: 16px; line-height: 55px; text-transform: uppercase; color: var(--mk-paper); background: var(--mk-ink); border: 0; border-radius: 6.4px; cursor: pointer; }
.mk-pdp__buy--variable .quantity input { width: 80px; height: 55px; font: inherit; font-size: 16px; text-align: center; color: var(--mk-ink); background: transparent; border: 1px solid var(--mk-line); }
@media (max-width: 799px) {
	.mk-pdp { padding: 24px 6vw 20px; }
	.mk-pdp__nav { display: none; }
	.mk-pdp__wrap { flex-direction: column; row-gap: 22px; margin-top: 0; }
	.mk-pdp__gallery { flex: 0 0 auto; width: 100%; }
	.mk-pdp__ctrl { width: 50px; height: 50px; margin-top: -25px; }
	.mk-pdp__ctrl--prev { left: 7px; }
	.mk-pdp__ctrl--next { right: 7px; }
	.mk-pdp__desc { order: 9; margin: 5px 0 0; }
	.mk-pdp .mk-qty { width: 147px; height: 48px; }
	.mk-pdp .mk-qty__input { width: 51px; }
	.mk-pdp__btn, .mk-pdp__buy--variable .single_add_to_cart_button { flex: 1 1 auto; min-width: 0; height: 48px; line-height: 48px; }
}

/* Reviews: 32 px above, 144 below; h2 grey-dark; 304 px name column. */
.mk-reviews { box-sizing: border-box; padding: 32px 4vw 144px; background: var(--mk-paper); color: var(--mk-grey-dark); font-size: 16px; line-height: 24px; }
.mk-reviews__title { margin: 32px 0 22px; font-size: clamp(35.44px, 24.46px + 2.264vw, 47.104px); line-height: 1.114; font-weight: 500; letter-spacing: -0.02em; color: var(--mk-grey-dark); }
.mk-stars { display: inline-flex; column-gap: 7px; }
.mk-star { width: 20px; height: 20px; fill: none; stroke: var(--mk-grey-dark); stroke-width: 1.5; } /* an empty star is outlined, as the old site drew it */
.mk-star.is-on { fill: var(--mk-grey-dark); }
.mk-reviews__avg { display: flex; align-items: center; column-gap: 11px; margin-bottom: 15px; line-height: 22px; }
.mk-reviews__num { font-size: 18px; font-weight: 700; }
.mk-reviews__tab { display: block; width: fit-content; margin: 30px 0 12px; padding: 1px 0; line-height: 19px; font-weight: 700; border-bottom: 2px solid var(--mk-grey-dark); } /* the old active tab's underline bar */
.mk-reviews__rule { height: 0; margin: 8px -2px 8px 0; border: 1px inset var(--mk-grey-dark); }
.mk-review { display: grid; grid-template-columns: 304px minmax(0, 1fr); padding: 21px 0 20px; }
.mk-review__name { padding-bottom: 11px; font-weight: 700; }
.mk-review__text { margin-top: 8px; }
.mk-review__text p { margin: 0; }
.mk-review__product { display: flex; align-items: center; column-gap: 11px; margin-top: 22px; line-height: 19px; color: inherit; text-decoration: none; }
.mk-review__product span { text-decoration: underline; }
.mk-review__pic { width: 33px; height: 33px; object-fit: cover; }
@media (max-width: 799px) {
	.mk-reviews { padding: 32px 6vw 100px; }
	.mk-review { grid-template-columns: 82px minmax(0, 1fr); } /* the old phone layout kept the two columns, the first 82 px */
}

/* Cart (empty): 4vw above, column capped at 1440, band fills the window. */
.mk-cart { box-sizing: border-box; min-height: calc(100vh - var(--monkey-header-h) - 358px); padding: 4vw max(4vw, calc((100% - 1440px) / 2)) 0; background: var(--mk-paper); color: var(--mk-grey-dark); }
.mk-cart__title { margin: 0; font-size: 24px; line-height: 24px; font-weight: 500; letter-spacing: -0.02em; color: var(--mk-heading); }
.mk-cart__empty { margin: 27px 0 22px; font-size: 16px; line-height: 22px; color: var(--mk-grey-dark); }
.mk-cart__continue { display: inline-block; padding: 11.2px 16px; font-size: 16px; text-transform: uppercase; color: var(--mk-ink); text-decoration: none; border: 1px solid var(--mk-ink); border-radius: 6.4px; }
@media (max-width: 799px) {
	.mk-cart { min-height: 0; padding: 4vw 4vw 0; }
}

/* Checkout and order-received pages are WooCommerce blocks straight inside
   <main>, with no theme section around them, so without this the footer
   starts flush against the last block (the address boxes looked cut off,
   Al, 28 Oct 2026). Same 4vw as the cart's foot. */
body.woocommerce-checkout main { padding-bottom: 4vw; }

/* Cart with items (woocommerce/cart/cart.php, measured 24 Oct 2026). */
.mk-cart--full { display: flex; flex-direction: column; padding-bottom: 4vw; }
.mk-cart--full .mk-cart__title { margin: 0 0 10px; }
.mk-cart__row { display: flex; align-items: flex-start; padding: 22px 0; border-bottom: 1px solid rgba(100, 100, 100, 0.2); }
.mk-cart__pic { flex: 0 0 132px; width: 132px; height: 132px; line-height: 0; }
.mk-cart__img { display: block; width: 132px; height: 132px; object-fit: cover; }
.mk-cart__info { flex: 0 1 760px; min-width: 0; margin-left: 22px; }
.mk-cart__name { display: block; font-size: 16px; line-height: 22px; font-weight: 500; color: var(--mk-grey-dark); text-decoration: none; }
.mk-cart__variant { margin: 6px 0 0; font-size: 14px; line-height: 22px; color: var(--mk-grey-dark); }
.mk-cart--full .mk-qty { display: flex; align-items: flex-start; flex: 0 0 93px; width: 93px; height: 35px; margin-left: 55px; }
.mk-cart--full .mk-qty__dec, .mk-cart--full .mk-qty__inc { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: -7px; padding: 0; border: 0; background: transparent; color: var(--mk-grey-dark); cursor: pointer; }
.mk-cart--full .mk-qty__dec { margin-right: 0; }
.mk-cart--full .mk-qty__inc { margin-left: 0; }
.mk-cart--full .mk-qty__input { width: 35px; height: 22px; padding: 0; border: 0; background: transparent; font: inherit; font-size: 16px; line-height: 22px; text-align: center; color: var(--mk-grey-dark); -moz-appearance: textfield; }
.mk-cart--full .mk-qty__input::-webkit-outer-spin-button, .mk-cart--full .mk-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mk-cart__price { flex: 0 0 334px; margin: 0; font-size: 16px; line-height: 22px; text-align: right; color: var(--mk-grey-dark); }
.mk-cart__remove-col { flex: 0 0 22px; margin-left: 22px; line-height: 0; }
.mk-cart__remove { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: -7px; color: var(--mk-grey-dark); }
.mk-cart__summary { align-self: flex-end; width: 468px; margin-top: 27px; }
.mk-cart__subtotal { display: flex; justify-content: space-between; align-items: center; line-height: 22px; color: var(--mk-grey-dark); }
.mk-cart__subtotal span { font-size: 16px; font-weight: 500; }
.mk-cart__subtotal p, .mk-cart__subtotal p * { margin: 0; font-size: 22px; line-height: 22px; font-weight: 500; }
.mk-cart__checkout { display: block; box-sizing: border-box; width: 100%; margin-top: 33px; padding: 12.8px 16px; font-size: 16px; line-height: 19.4px; text-align: center; text-transform: uppercase; color: var(--mk-paper); background: var(--mk-ink); border-radius: 6.4px; text-decoration: none; }
.mk-cart__update.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 799px) {
	.mk-cart--full { min-height: calc(100vh + 4vw); padding: 4vw 4vw 0; } /* the old cart box ran a window height past its top; the summary bar sticks to the window's foot */
	.mk-cart__row { position: relative; display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; column-gap: 15px; align-items: start; padding: 22px 0; } /* picture down the left; name and variant, then quantity and price, in the column beside it */
	.mk-cart__pic { grid-row: 1 / 3; }
	.mk-cart__pic, .mk-cart__img { width: 90px; height: 90px; }
	.mk-cart__info { grid-column: 2 / 4; margin-left: 0; padding-right: 40px; }
	.mk-cart--full .mk-qty { grid-column: 2; margin: 35px 0 0 9px; }
	.mk-cart__price { grid-column: 3; flex: none; margin-top: 35px; }
	.mk-cart__remove-col { position: absolute; top: 21px; right: 0; margin: 0; }
	.mk-cart__summary { position: sticky; bottom: 0; width: auto; align-self: stretch; margin: auto -4vw 0; padding: 27px 4vw 16px; background: var(--mk-paper); } /* at the foot of the first window, then stuck to the window's foot while the page scrolls */
	.mk-cart__checkout { margin-top: 22px; }
}