/* ==========================================================================
   ZONHAN Machinery Blocks — front-end styles
   Complements theme.json; only handles structure and components that the
   block editor cannot express through presets.
   ========================================================================== */

:root {
	--zn-navy: var(--wp--preset--color--navy, #062147);
	--zn-blue: var(--wp--preset--color--blue, #0b4da2);
	--zn-amber: var(--wp--preset--color--amber, #f2b01e);
	--zn-ink: var(--wp--preset--color--ink, #0b1220);
	--zn-steel: var(--wp--preset--color--steel, #59657a);
	--zn-mist: var(--wp--preset--color--mist, #f3f5f9);
	--zn-line: var(--wp--preset--color--line, #e2e7f0);
	--zn-white: #fff;
	--zn-radius: 4px;
	--zn-radius-lg: 8px;
	--zn-ring: 0 0 0 3px rgba(11, 77, 162, .28);
	--zn-shadow-sm: 0 1px 2px rgba(11, 18, 32, .06), 0 2px 8px rgba(11, 18, 32, .05);
	--zn-shadow-md: 0 12px 32px -14px rgba(11, 18, 32, .28), 0 2px 6px rgba(11, 18, 32, .05);
	--zn-shadow-lg: 0 30px 60px -28px rgba(6, 33, 71, .45);
	--zn-ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

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

body.zn-site {
	background: var(--zn-white);
	color: var(--zn-ink);
	overflow-x: hidden;
}

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

.zn-site a { transition: color .18s var(--zn-ease), background-color .18s var(--zn-ease), border-color .18s var(--zn-ease); }

:where(.zn-site) :focus-visible {
	outline: 2px solid var(--zn-blue);
	outline-offset: 3px;
	border-radius: 2px;
}

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

.zn-site .zn-empty {
	padding: 48px 28px;
	border: 1px dashed var(--zn-line);
	border-radius: var(--zn-radius-lg);
	text-align: center;
	color: var(--zn-steel);
	background: var(--zn-mist);
}

.zn-main { display: block; }

/* Section rhythm ---------------------------------------------------------- */

.zn-section > .wp-block-heading,
.zn-section > h2 { margin-top: 0; }

.zn-section__head {
	margin-bottom: var(--wp--preset--spacing--50, 2.5rem);
	gap: 20px;
}

.zn-section__head h2 { margin: 0; }

.zn-eyebrow {
	margin: 0;
	text-transform: uppercase;
	letter-spacing: .14em;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--xs, .8125rem);
}

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

.zn-header {
	position: sticky;
	top: 0;
	z-index: 90;
	border-bottom: 1px solid var(--zn-line);
	background: var(--zn-white);
}

.admin-bar .zn-header { top: 32px; }

.zn-header__inner {
	gap: 20px;
	min-height: 64px;
}

.zn-brand {
	gap: 12px;
	flex-shrink: 0;
	text-decoration: none;
}

.zn-brand .wp-block-site-title a {
	color: var(--zn-navy);
	text-decoration: none;
	letter-spacing: -.02em;
}

.zn-brand .wp-block-site-tagline {
	margin: 0;
	color: var(--zn-steel);
	line-height: 1.2;
	letter-spacing: .04em;
	text-transform: uppercase;
	font-size: 10px;
}

.zn-brand .wp-block-site-logo img { border-radius: 2px; }

.zn-header__actions { flex-shrink: 0; }

.zn-header__actions .wp-block-button__link {
	padding: .7em 1.2em;
	font-size: .8125rem;
}

/* Navigation -------------------------------------------------------------- */

.zn-nav-wrap {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 1;
	justify-content: center;
	min-width: 0;
}

.zn-nav__list {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
	flex-wrap: nowrap;
}

.zn-nav__item { position: static; }

.zn-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 10px 12px;
	color: var(--zn-ink);
	text-decoration: none;
	font-size: .875rem;
	font-weight: 600;
	border-radius: 3px;
	white-space: nowrap;
}

.zn-nav__link .zn-icon { color: var(--zn-steel); transition: transform .2s var(--zn-ease); }

.zn-nav__link:hover,
.zn-nav__link:focus-visible { color: var(--zn-blue); background: rgba(11, 77, 162, .06); }

.zn-nav__item:hover > .zn-nav__link .zn-icon,
.zn-nav__item.is-open > .zn-nav__link .zn-icon { transform: rotate(180deg); }

/* Simple dropdown */
.zn-nav__sub {
	position: absolute;
	top: calc(100% - 8px);
	left: 0;
	min-width: 230px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: var(--zn-white);
	border: 1px solid var(--zn-line);
	border-radius: var(--zn-radius);
	box-shadow: var(--zn-shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .18s var(--zn-ease), transform .18s var(--zn-ease), visibility .18s;
	z-index: 95;
}

.zn-nav__item { position: relative; }

/* The mega item must stay static so its panel can size against the header. */
.zn-nav__item--mega { position: static; }

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

.zn-nav__sub a {
	display: block;
	padding: 9px 12px;
	border-radius: 3px;
	color: var(--zn-ink);
	text-decoration: none;
	font-size: .875rem;
	white-space: nowrap;
}

.zn-nav__sub a:hover { background: var(--zn-mist); color: var(--zn-blue); }

/* Mega menu --------------------------------------------------------------- */

.zn-mega {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	background: var(--zn-white);
	border-top: 1px solid var(--zn-line);
	border-bottom: 1px solid var(--zn-line);
	box-shadow: 0 24px 40px -28px rgba(6, 33, 71, .45);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .2s var(--zn-ease), transform .2s var(--zn-ease), visibility .2s;
	z-index: 94;
}

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

.zn-mega__inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 32px 40px 36px;
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: 32px;
}

.zn-mega__head { border-right: 1px solid var(--zn-line); padding-right: 28px; }

.zn-mega__eyebrow {
	margin: 0 0 6px;
	font-size: .6875rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--zn-steel);
	font-weight: 700;
}

.zn-mega__title {
	margin: 0 0 16px;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--zn-navy);
	line-height: 1.3;
}

.zn-mega__all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .8125rem;
	font-weight: 700;
	color: var(--zn-blue);
	text-decoration: none;
}

.zn-mega__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px 28px;
}

.zn-mega__cat {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	padding-bottom: 6px;
	margin-bottom: 6px;
	border-bottom: 1px solid var(--zn-line);
	color: var(--zn-navy);
	text-decoration: none;
	font-weight: 700;
	font-size: .875rem;
}

.zn-mega__cat:hover { color: var(--zn-blue); }

.zn-mega__cat-count {
	font-size: .6875rem;
	font-weight: 600;
	color: var(--zn-steel);
	background: var(--zn-mist);
	border-radius: 20px;
	padding: 1px 7px;
}

.zn-mega__subs {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 4px;
}

.zn-mega__subs a {
	display: block;
	color: var(--zn-steel);
	text-decoration: none;
	font-size: .8125rem;
	line-height: 1.4;
}

.zn-mega__subs a:hover { color: var(--zn-blue); }

.zn-mega__more { color: var(--zn-blue) !important; font-weight: 600; }

/* Search ------------------------------------------------------------------ */

.zn-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid transparent;
	border-radius: 3px;
	background: transparent;
	color: var(--zn-navy);
	cursor: pointer;
}

.zn-icon-btn:hover { background: var(--zn-mist); }

.zn-search {
	border-top: 1px solid var(--zn-line);
	background: var(--zn-white);
	padding: 18px 0;
}

.zn-search__inner { max-width: 1320px; margin: 0 auto; padding: 0 40px; }

.zn-search .wp-block-search__inside-wrapper,
.zn-search form { display: flex; gap: 10px; }

.zn-search input[type="search"],
.zn-site .wp-block-search__input {
	flex: 1;
	min-width: 0;
	height: 46px;
	padding: 0 14px;
	border: 1px solid var(--zn-line);
	border-radius: 3px;
	background: var(--zn-white);
	font-size: .9375rem;
	color: var(--zn-ink);
}

.zn-search input[type="search"]:focus,
.zn-site .wp-block-search__input:focus {
	outline: none;
	border-color: var(--zn-blue);
	box-shadow: var(--zn-ring);
}

.zn-site .wp-block-search__button {
	height: 46px;
	padding: 0 20px;
	border: 0;
	border-radius: 3px;
	background: var(--zn-blue);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}

.zn-site .wp-block-search__button:hover { background: var(--zn-navy); }

/* Mobile-only drawer chrome */
.zn-nav__top { display: none; }

/* Mobile toggle */
.zn-nav-toggle {
	display: none;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--zn-line);
	border-radius: 3px;
	background: var(--zn-white);
	color: var(--zn-navy);
	font-size: .8125rem;
	font-weight: 600;
	cursor: pointer;
}

.zn-nav-toggle[aria-expanded="true"] { background: var(--zn-mist); }

/* --------------------------------------------------------------------------
   Page bands & breadcrumbs
   -------------------------------------------------------------------------- */

.zn-pageband {
	padding-top: var(--wp--preset--spacing--50, 2.5rem);
	padding-bottom: var(--wp--preset--spacing--50, 2.5rem);
	border-bottom: 3px solid var(--zn-amber);
}

.zn-pageband--hero { padding-top: 56px; padding-bottom: 56px; }

.zn-pageband h1 {
	margin: 0;
	color: #fff;
	font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
	letter-spacing: -.03em;
}

.zn-pageband__lead { margin-top: 12px; max-width: 68ch; }

.zn-pageband__desc { max-width: 72ch; }

.zn-pageband__media img { border-radius: var(--zn-radius-lg); }

.zn-crumbs { margin-bottom: 14px; }

.zn-crumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .75rem;
	letter-spacing: .02em;
}

.zn-crumbs__item { display: inline-flex; align-items: center; gap: 8px; }

.zn-crumbs__item a { color: rgba(255, 255, 255, .72); text-decoration: none; }

.zn-crumbs__item a:hover { color: #fff; }

.zn-crumbs__item [aria-current] { color: #fff; font-weight: 600; }

.zn-crumbs__sep { opacity: .45; }

.zn-site .zn-crumbs:not(.zn-pageband .zn-crumbs) .zn-crumbs__item a { color: var(--zn-steel); }
.zn-site .zn-crumbs:not(.zn-pageband .zn-crumbs) .zn-crumbs__item [aria-current] { color: var(--zn-ink); }

/* --------------------------------------------------------------------------
   Cards (machines, solutions, posts)
   -------------------------------------------------------------------------- */

.zn-loop { margin: 0; }

.zn-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--zn-white);
	border: 1px solid var(--zn-line);
	border-radius: var(--zn-radius);
	overflow: hidden;
	transition: transform .22s var(--zn-ease), box-shadow .22s var(--zn-ease), border-color .22s var(--zn-ease);
}

.zn-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--zn-shadow-md);
	border-color: #cfd8e6;
}

.zn-card__media { margin: 0 !important; }

.zn-card__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	transition: transform .4s var(--zn-ease);
}

.zn-card:hover .zn-card__media img { transform: scale(1.03); }

.zn-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 10px;
	padding: 18px 20px 20px;
}

.zn-card__cat,
.zn-card__cat a {
	margin: 0;
	font-size: .6875rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--zn-steel);
	text-decoration: none;
	font-weight: 700;
}

.zn-card__title {
	margin: 0 !important;
	font-size: 1.125rem !important;
	line-height: 1.25;
	letter-spacing: -.02em;
}

.zn-card__title a { color: var(--zn-navy); text-decoration: none; }

.zn-card__title a:hover { color: var(--zn-blue); }

.zn-card__text { margin: 0; }

.zn-card__date {
	margin: 0;
	color: var(--zn-steel);
	text-transform: uppercase;
	letter-spacing: .08em;
	font-weight: 600;
}

.zn-card__foot {
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--zn-line);
	gap: 10px;
}

/* Product cut-outs sit on a light plate so every machine reads at the same size. */
.zn-card:not(.zn-card--solution):not(.zn-card--post) .zn-card__media img {
	object-fit: contain;
	padding: 10px;
	mix-blend-mode: multiply;
	background: #fff;
}

.zn-card__body > .wp-block-read-more,
.zn-card__body > .zn-card__more { margin-top: auto !important; }
.zn-card__more { margin: 0 !important; font-size: .8125rem; font-weight: 700; }

.zn-card__more a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--zn-blue);
	text-decoration: none;
}

.zn-card__more a::after {
	content: "→";
	transition: transform .2s var(--zn-ease);
}

.zn-card__more a:hover::after { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Specs
   -------------------------------------------------------------------------- */

.zn-specs {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 6px;
}

.zn-specs__item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-size: .8125rem;
	line-height: 1.35;
}

.zn-specs__label { color: var(--zn-steel); }

.zn-specs__value { font-weight: 700; color: var(--zn-navy); white-space: nowrap; }

.zn-specs__unit { font-weight: 500; color: var(--zn-steel); margin-left: 2px; }

.zn-specs--inline {
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 16px;
}

.zn-specs--inline .zn-specs__item {
	flex-direction: column;
	gap: 2px;
	padding: 12px 14px;
	border: 1px solid var(--zn-line);
	border-radius: var(--zn-radius);
	background: var(--zn-white);
}

/* --------------------------------------------------------------------------
   Category grid / list
   -------------------------------------------------------------------------- */

.zn-cats--grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 18px;
}

.zn-cats--grid[style*="--zn-cols"] {
	grid-template-columns: repeat(var(--zn-cols), minmax(0, 1fr));
}

.zn-cat {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: var(--zn-radius);
	overflow: hidden;
	text-decoration: none;
	color: var(--zn-ink);
	background: var(--zn-white);
	border: 1px solid var(--zn-line);
	transition: transform .22s var(--zn-ease), box-shadow .22s var(--zn-ease), border-color .22s var(--zn-ease);
}

.zn-cat:hover {
	transform: translateY(-3px);
	box-shadow: var(--zn-shadow-md);
	border-color: #cfd8e6;
}

.zn-cat__media {
	position: relative;
	display: block;
	height: 158px;
	background: #fbfcfe;
	border-bottom: 1px solid var(--zn-line);
	overflow: hidden;
}

.zn-cat__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 14px;
	mix-blend-mode: multiply;
	transition: transform .45s var(--zn-ease);
}

.zn-cat:hover .zn-cat__media img { transform: scale(1.05); }

.zn-cat__body {
	display: block;
	padding: 18px 20px 16px;
	flex: 1;
}

.zn-cat__name {
	display: block;
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.25;
	color: var(--zn-navy);
}

.zn-cat__subs {
	display: block;
	margin-top: 6px;
	font-size: .75rem;
	line-height: 1.5;
	color: var(--zn-steel);
}

.zn-cat__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 20px;
	border-top: 1px solid var(--zn-line);
	background: #fbfcfe;
}

.zn-cat__count { font-size: .75rem; font-weight: 600; color: var(--zn-steel); }

.zn-cat .zn-icon { color: var(--zn-blue); transition: transform .2s var(--zn-ease); }

.zn-cat:hover .zn-icon { transform: translateX(4px); color: var(--zn-navy); }

/* List variant (archive sidebar) */
.zn-cats--list { margin: 0; padding: 0; list-style: none; }

.zn-cats__row { border-bottom: 1px solid var(--zn-line); }

.zn-cats__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 11px 2px;
	color: var(--zn-ink);
	text-decoration: none;
	font-size: .875rem;
	font-weight: 600;
}

.zn-cats__link:hover { color: var(--zn-blue); }

.zn-cats__count {
	font-size: .6875rem;
	color: var(--zn-steel);
	background: var(--zn-mist);
	border-radius: 20px;
	padding: 1px 7px;
}

.zn-cats__children {
	margin: 0 0 8px;
	padding: 0 0 0 12px;
	list-style: none;
	display: grid;
	gap: 2px;
	border-left: 1px solid var(--zn-line);
}

.zn-cats__children a {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding: 5px 0 5px 4px;
	color: var(--zn-steel);
	text-decoration: none;
	font-size: .8125rem;
}

.zn-cats__children a:hover { color: var(--zn-blue); }

.zn-sidebar { position: sticky; top: 96px; align-self: flex-start; }

.zn-sidebar__label {
	margin: 0 0 6px;
	text-transform: uppercase;
	letter-spacing: .12em;
	font-weight: 700;
	color: var(--zn-steel);
}

.zn-sidebar__help {
	margin-top: 24px;
	padding: 20px;
	border-radius: var(--zn-radius);
}

.zn-sidebar__help p { margin-top: 0; }

/* --------------------------------------------------------------------------
   Hero card & finder
   -------------------------------------------------------------------------- */

.zn-hero { border-bottom: 3px solid var(--zn-amber); }

.zn-hero h1 { margin: 0 0 18px; max-width: 16ch; }

.zn-hero__actions { margin-top: 26px; }

.zn-hero__note {
	margin: 22px 0 0;
	letter-spacing: .04em;
	opacity: .75;
}

.zn-hero__card {
	padding: 26px !important;
	border-radius: var(--zn-radius-lg);
	box-shadow: var(--zn-shadow-lg);
	color: var(--zn-ink);
}

.zn-hero__card .zn-finder__heading { color: var(--zn-navy); }

.zn-finder-wrap { display: grid; gap: 14px; }

.zn-finder__heading { margin: 0 0 6px; font-size: 1.15rem; letter-spacing: -.02em; }

.zn-finder__intro { margin: 0; color: var(--zn-steel); font-size: .875rem; }

.zn-finder { display: grid; gap: 12px; }

.zn-finder__field { display: grid; gap: 6px; }

.zn-finder__field label {
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--zn-steel);
}

.zn-finder select {
	width: 100%;
	height: 46px;
	padding: 0 36px 0 12px;
	border: 1px solid var(--zn-line);
	border-radius: 3px;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2359657a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	appearance: none;
	font-size: .9375rem;
	color: var(--zn-ink);
	cursor: pointer;
}

.zn-finder select:focus {
	outline: none;
	border-color: var(--zn-blue);
	box-shadow: var(--zn-ring);
}

.zn-finder__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 48px;
	border: 0;
	border-radius: 3px;
	background: var(--zn-blue);
	color: #fff;
	font-size: .9375rem;
	font-weight: 650;
	cursor: pointer;
}

.zn-finder__submit:hover { background: var(--zn-navy); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.zn-form-wrap {
	padding: 26px !important;
	background: var(--zn-white);
	border: 1px solid var(--zn-line);
	border-radius: var(--zn-radius-lg);
	color: var(--zn-ink);
}

.zn-form__head { margin-bottom: 18px; }

.zn-form__title { margin: 0 0 6px; font-size: 1.15rem; letter-spacing: -.02em; color: var(--zn-navy); }

.zn-form__intro { margin: 0; color: var(--zn-steel); font-size: .875rem; }

.zn-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.zn-field { margin: 0 0 14px; display: grid; gap: 6px; }

.zn-field label {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--zn-steel);
	text-transform: uppercase;
}

.zn-field label span { color: #c0392b; }

.zn-field input:not([type="checkbox"]),
.zn-field textarea {
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--zn-line);
	border-radius: 3px;
	background: var(--zn-white);
	font: inherit;
	font-size: .9375rem;
	color: var(--zn-ink);
}

.zn-field textarea { resize: vertical; }

.zn-field input:focus,
.zn-field textarea:focus {
	outline: none;
	border-color: var(--zn-blue);
	box-shadow: var(--zn-ring);
}

.zn-field--check label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	text-transform: none;
	letter-spacing: 0;
	font-size: .8125rem;
	font-weight: 500;
	color: var(--zn-steel);
}

.zn-field--check input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--zn-blue); }

.zn-form__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.zn-form__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 6px;
}

.zn-form__note { font-size: .75rem; color: var(--zn-steel); }

.zn-alert {
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: 3px;
	font-size: .875rem;
	border: 1px solid;
}

.zn-alert--success { background: #eaf6ec; border-color: #b7dfc0; color: #1e6b2f; }

.zn-alert--error { background: #fdecea; border-color: #f3c2bd; color: #a32a1e; }

/* --------------------------------------------------------------------------
   Compare
   -------------------------------------------------------------------------- */

.zn-compare-toggle-wrap { display: inline-flex; }

.zn-compare-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border: 1px solid var(--zn-line);
	border-radius: 3px;
	background: var(--zn-white);
	color: var(--zn-steel);
	font-size: .75rem;
	font-weight: 600;
	cursor: pointer;
}

.zn-compare-toggle:hover { border-color: var(--zn-blue); color: var(--zn-blue); }

.zn-compare-toggle[aria-pressed="true"] {
	background: var(--zn-blue);
	border-color: var(--zn-blue);
	color: #fff;
}

.zn-compare-section { padding: 48px 0 64px; }

.zn-compare__empty {
	max-width: 560px;
	padding: 40px;
	border: 1px dashed var(--zn-line);
	border-radius: var(--zn-radius-lg);
	background: var(--zn-mist);
	text-align: center;
}

.zn-compare__empty h2 { margin-top: 0; }

.zn-compare__scroll { overflow-x: auto; }

.zn-compare__table {
	width: 100%;
	border-collapse: collapse;
	min-width: 640px;
	background: #fff;
}

.zn-compare__table th,
.zn-compare__table td {
	padding: 14px 16px;
	border: 1px solid var(--zn-line);
	text-align: left;
	vertical-align: top;
	font-size: .875rem;
}

.zn-compare__table thead th { background: var(--zn-mist); vertical-align: top; }

.zn-compare__table tbody th {
	width: 200px;
	background: #fbfcfe;
	font-weight: 600;
	color: var(--zn-steel);
}

.zn-compare__machine a { text-decoration: none; }

.zn-compare__thumb img {
	width: 100%;
	height: 190px;
	object-fit: contain;
	background: #fff;
	border-radius: 3px;
	display: block;
	margin-bottom: 8px;
}

.zn-compare__name {
	display: block;
	font-weight: 700;
	color: var(--zn-navy);
	font-size: 1rem;
}

.zn-compare__remove {
	display: inline-block;
	margin-top: 6px;
	font-size: .75rem;
	color: var(--zn-steel);
}

.zn-compare__unit { color: var(--zn-steel); font-weight: 400; }

.zn-compare__footer { margin-top: 16px; font-size: .8125rem; }

/* --------------------------------------------------------------------------
   Misc components
   -------------------------------------------------------------------------- */

.zn-tick-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }

.zn-tick-list li {
	position: relative;
	padding-left: 24px;
}

.zn-tick-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .35em;
	width: 14px;
	height: 8px;
	border-left: 2px solid var(--zn-amber);
	border-bottom: 2px solid var(--zn-amber);
	transform: rotate(-45deg);
}

.zn-factcard,
.zn-faq,
.zn-service-card { border-radius: var(--zn-radius); }

.zn-service-card { background: var(--zn-white); height: 100%; }

.zn-service-card h3 { margin-top: 0; }

.zn-faq { padding: 4px 0; border-bottom: 1px solid var(--zn-line); }

.zn-faq summary {
	cursor: pointer;
	padding: 16px 0;
	font-weight: 650;
	color: var(--zn-navy);
	font-size: 1rem;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 16px;
}

.zn-faq summary::-webkit-details-marker { display: none; }

.zn-faq summary::after {
	content: "+";
	color: var(--zn-amber);
	font-size: 1.25rem;
	line-height: 1;
}

.zn-faq[open] summary::after { content: "–"; }

.zn-faq p { margin: 0 0 16px; color: var(--zn-steel); }

.zn-cta-inline { padding: 36px 40px !important; border-radius: var(--zn-radius-lg); }

.zn-cta-inline h2 { margin-top: 0; }

.zn-step__num {
	text-transform: uppercase;
	letter-spacing: .12em;
	font-weight: 700;
	margin: 0 0 6px;
}

.zn-step { height: 100%; }

.zn-points__num {
	text-transform: uppercase;
	letter-spacing: .12em;
	font-weight: 700;
	margin: 0 0 10px;
}

.zn-quote-band { padding-top: 56px; padding-bottom: 56px; }

.zn-quote-band .zn-form-wrap { border: 0; }

.zn-inquiry-section .zn-form-wrap { box-shadow: var(--zn-shadow-md); }

.zn-related { padding-top: 56px; padding-bottom: 64px; }

.zn-related .zn-loop { margin-top: 24px; }

.zn-404 {
	padding-top: 96px;
	padding-bottom: 96px;
	text-align: center;
}

.zn-404__code {
	font-size: 4rem;
	font-weight: 800;
	line-height: 1;
	margin: 0 0 8px;
	letter-spacing: -.04em;
}

.zn-404 .wp-block-search { max-width: 440px; margin: 24px auto; }

.zn-404__actions { justify-content: center; margin-top: 8px; }

.zn-post-nav {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	padding: 24px 40px;
	border-top: 1px solid var(--zn-line);
	margin-top: 24px;
}

.zn-post-hero img { border-radius: var(--zn-radius-lg); margin-bottom: 8px; }

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

.zn-table th,
.zn-table td {
	padding: 11px 14px;
	border: 1px solid var(--zn-line);
	text-align: left;
}

.zn-table thead th { background: var(--zn-mist); font-weight: 650; color: var(--zn-navy); }

.zn-table tbody tr:nth-child(even) { background: #fbfcfe; }

.zn-single-body .wp-block-table { margin: 32px 0; }

.zn-single-body h2 { margin-top: 40px; }

.zn-single-body > p:first-child { font-size: 1.0625rem; }

.zn-single-top { padding-top: 30px; padding-bottom: 56px; }

.zn-single-top__cat,
.zn-single-top__cat a {
	margin: 0 0 8px;
	font-size: .6875rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--zn-steel);
	font-weight: 700;
	text-decoration: none;
}

.zn-single-top h1 {
	margin: 0 0 12px;
	font-size: clamp(2.25rem, 1.7rem + 2.2vw, 3.5rem);
	letter-spacing: -.035em;
}

.zn-single-top__lead { margin: 0 0 20px; max-width: 46ch; }

.zn-single-top .zn-specs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	padding: 18px 0;
	border-top: 1px solid var(--zn-line);
	border-bottom: 1px solid var(--zn-line);
	margin-bottom: 22px;
}

.zn-single-top .zn-specs__item { flex-direction: column; gap: 4px; }

.zn-single-top .zn-specs__value { font-size: 1.25rem; }

.zn-single-top__actions { margin-top: 4px; }

.zn-single-top__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--zn-radius-lg);
	box-shadow: var(--zn-shadow-md);
	background: #fff;
}

.zn-archive .wp-block-post-template { margin: 0; }

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

.zn-footer { margin-top: 0; }

.zn-footer a {
	color: rgba(255, 255, 255, .78);
	text-decoration: none;
}

.zn-footer a:hover { color: #fff; }

.zn-footer .wp-block-site-title a { color: #fff; }

.zn-footer__grid { gap: 40px 32px; }

.zn-footer__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }

.zn-footer__list li { margin: 0; }

.zn-footer__rule { margin: 40px 0 22px !important; width: 100% !important; max-width: none; }

.zn-footer__legal p { margin: 0; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
	.zn-mega__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.zn-cats--grid { gap: 14px; }
}

@media (max-width: 1024px) {
	.zn-cats--grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.zn-hero__card { padding: 20px !important; }
}

@media (max-width: 980px) {
	.zn-nav-toggle { display: inline-flex; }

	.zn-brand .wp-block-site-tagline { display: none; }

	.zn-nav-wrap { justify-content: flex-end; gap: 4px; }

	.zn-nav {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: min(86vw, 360px);
		padding: 18px 20px 40px;
		background: var(--zn-white);
		border-right: 1px solid var(--zn-line);
		box-shadow: var(--zn-shadow-lg);
		transform: translateX(-102%);
		visibility: hidden;
		transition: transform .28s var(--zn-ease), visibility .28s;
		overflow-y: auto;
		z-index: 120;
	}

	.zn-nav.is-open { transform: translateX(0); visibility: visible; }

	.zn-nav__list { flex-direction: column; align-items: stretch; gap: 0; }

	.zn-nav__item { border-bottom: 1px solid var(--zn-line); position: static; }

	.zn-nav__link {
		justify-content: space-between;
		padding: 14px 2px;
		font-size: 1rem;
	}

	.zn-nav__sub {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		padding: 0 0 10px 12px;
		min-width: 0;
		display: none;
	}

	.zn-nav__item.is-open > .zn-nav__sub { display: block; }

	.zn-nav__item.has-children:hover > .zn-nav__sub { display: none; }

	.zn-nav__item.is-open.has-children:hover > .zn-nav__sub { display: block; }

	.zn-mega { display: none; }

	.zn-header__actions .zn-btn-quote { display: none; }

	.zn-header__inner { min-height: 56px; gap: 8px; }

	.zn-search__inner { padding: 0 20px; }

	body.zn-nav-open { overflow: hidden; }

	body.zn-nav-open .zn-header { z-index: 130; }

	.zn-nav__top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 12px;
		margin-bottom: 6px;
		border-bottom: 1px solid var(--zn-line);
	}

	.zn-nav__title {
		font-size: .6875rem;
		font-weight: 700;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: var(--zn-steel);
	}

	.zn-nav__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		border: 1px solid var(--zn-line);
		border-radius: 3px;
		background: #fff;
		color: var(--zn-navy);
		cursor: pointer;
		font-size: 18px;
		line-height: 1;
	}

	/* The scrim lives inside the header so it shares the header's stacking
	   context: the drawer can then sit above it without z-index guesswork. */
	body.zn-nav-open .zn-header::after {
		content: "";
		position: fixed;
		inset: 0;
		background: rgba(6, 33, 47, .45);
		z-index: 1;
	}

	body.zn-nav-open .zn-nav { z-index: 2; }
}

@media (max-width: 781px) {
	.zn-form__grid { grid-template-columns: 1fr; }

	.zn-single-top .zn-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.zn-cta-inline { padding: 24px !important; }

	.zn-quote-band { padding-top: 40px; padding-bottom: 40px; }

	.zn-sidebar { position: static; }

	.zn-cats--grid { grid-template-columns: 1fr !important; }

	.zn-hero { padding-top: 40px !important; padding-bottom: 44px !important; }

	.zn-mega__inner { grid-template-columns: 1fr; }

	.zn-comparison__table { min-width: 520px; }
}

@media (max-width: 600px) {
	.zn-header { position: sticky; }

	.zn-pageband { padding-top: 28px; padding-bottom: 28px; }

	.zn-cat { min-height: 168px; }

	.zn-form-wrap { padding: 18px !important; }
}

/* --------------------------------------------------------------------------
   Editor preview helpers
   -------------------------------------------------------------------------- */

.editor-styles-wrapper .zn-mega,
.block-editor-block-preview__content .zn-mega {
	display: none;
}

.zn-site .wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border: 1px solid currentColor;
	color: inherit;
}

.zn-site .zn-hero .wp-block-button.is-style-outline .wp-block-button__link,
.zn-site .zn-quote-band .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: rgba(255, 255, 255, .55);
	color: #fff;
}

.zn-site .wp-block-button__link { text-decoration: none; }

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