/*
 * ZAD STACK — brand application layer.
 *
 * Applies the Brand Asset Kit to the live site surfaces. Every asset is
 * referenced relative to this file, so the whole kit stays portable: copy
 * assets/brand/ into any theme and the paths keep resolving.
 *
 * Depends on tokens.css for the --brand-* custom properties.
 *
 * LOAD ORDER: this file is enqueued at wp_enqueue_scripts:200 with an explicit
 * dependency on the site stylesheet, so it prints last and can correct upstream
 * rules on equal specificity. Rules that contend with an upstream declaration
 * carry a leading `body` for one extra element of specificity — belt and braces
 * against a future re-order. !important appears exactly once, on the sale-badge
 * colour, because the upstream declaration it corrects is itself !important.
 *
 * SECTIONS
 *   0. Token repair            — readable text tokens (F02)
 *   1. Arabic display type     — line-height / letter-spacing floor (F01, F04)
 *   2. First screen kit layers — hero artwork, pattern, lockup (F05, F06)
 *   3. Footer                  — key colour on the dark footer (F03)
 *   4. Basic surfaces          — search / category / date archive (F07, F08, F09)
 *   5. WooCommerce surfaces    — cart / account / tabs / notices / forms (P5)
 *   6. Empty states            — every dead end offers a next step (P7)
 *   7. Responsive
 *   8. Print
 */

/* ------------------------------------------------------------------ *
 * 0. Token repair — the tokens that are read as text must be readable
 *
 * The brand layer swapped --color-text-muted to the kit's #8A8B7C, which is
 * the kit's *line* grey, not a text grey: 2.95:1 on the paper — under the 4.5
 * body threshold and even under the 3.0 large-text threshold. Every lede
 * paragraph and secondary line on the site uses this token.
 *
 * --zad-muted-ink keeps the same olive-grey hue, darkened until it clears 4.5:1
 * on every paper value in play (#EFEDE3 5.06, #f3f0e4 5.20, #f8f6ed 5.48,
 * #E9E7DC 4.79, #F2EEDF 5.11, #e8e1ce 4.55).
 * The kit's original #8A8B7C survives as --zad-muted-line, for rules and
 * dividers, where contrast against text is not the question being asked.
 *
 * Selector: :root:root outranks the :root block that the root-owned
 * mu-plugin brand-identity.php prints inline at wp_head:100 (which lands after
 * every stylesheet). Specificity, not order — nothing there is edited.
 * ------------------------------------------------------------------ */

:root:root {
	--zad-muted-ink: #646556;
	--zad-muted-line: #8A8B7C;
	--zad-footer-key: #69c798;

	--color-text-muted: 100 101 86;
	--color-muted: 100 101 86;
}

/* ------------------------------------------------------------------ *
 * 1. Arabic display typography
 *
 * Almarai needs room under the baseline for the dots of ب/ي/ن and the tail of
 * the connected forms. Nine rule groups shipped a line-height below 1 with a
 * negative letter-spacing; at the hero's 122px that measured 37px of physical
 * line overlap.
 *
 * The rule applied here: line-height never below 1.1 for Arabic, 1.2 above
 * 64px, letter-spacing 0 (a connected script gains nothing from tracking and
 * loses the join rhythm). 1.2 is used throughout — it satisfies both floors.
 *
 * Each font-size is scaled by exactly (old line-height / 1.2), so every heading
 * block keeps the vertical footprint it had before. The page rhythm is
 * unchanged; only the collision is gone. This is the review's own prescription:
 * lower the size, not the leading.
 * ------------------------------------------------------------------ */

body .zso-home-copy h1,
body .zso-corporate-hero h1,
body .zso-section-heading h2,
body .zso-index-header h2,
body .zso-home-journal h2,
body .zso-open-standard h2,
body .zso-home-cta h2,
body .zso-product-showcase-heading h2,
body .zso-product-gallery h2,
body .zso-footer-statement h2,
body .zso-institutions h2,
body .zso-product-row h3,
body.error404 .site-content h1 {
	line-height: 1.2;
	letter-spacing: 0;
}

/* .zso-product-row h3 was at line-height 1 on a 48px Arabic title. */
body .zso-product-row h3 {
	line-height: 1.25;
}

/* Not in the review, found while re-measuring: the product index's status line
   mixes --zso-ink at 55% over #f8f6ed = 3.67:1 at 9.9px. Same defect class as
   F02, one component over. 68% lands it at 5.47:1. */
body .zso-product-row small {
	color: color-mix(in srgb, var(--zso-ink, #10231d) 68%, transparent);
}

/* was clamp(4.3rem, 8.5vw, 9rem) @ .82 */
body .zso-home-copy h1 {
	font-size: clamp(2.9rem, 5.8vw, 6.15rem);
}

/* was clamp(3.2rem, 7vw, 7.5rem) @ .98 */
body .zso-corporate-hero h1 {
	font-size: clamp(2.6rem, 5.7vw, 6.1rem);
}

/* was clamp(3rem, 6vw, 6.8rem) @ .94 */
body .zso-section-heading h2,
body .zso-index-header h2,
body .zso-home-journal h2 {
	font-size: clamp(2.35rem, 4.7vw, 5.3rem);
}

/* was clamp(3.4rem, 7vw, 7.4rem) @ .9 */
body .zso-open-standard h2 {
	font-size: clamp(2.55rem, 5.25vw, 5.55rem);
}

/* was clamp(3.7rem, 8vw, 8rem) @ .9 */
body .zso-home-cta h2 {
	font-size: clamp(2.78rem, 6vw, 6rem);
}

/* was clamp(3rem, 6vw, 6rem) @ .95 */
body .zso-product-showcase-heading h2,
body .zso-product-gallery h2 {
	font-size: clamp(2.4rem, 4.75vw, 4.75rem);
}

/* was clamp(2.6rem, 4vw, 4.7rem) @ .95 */
body .zso-footer-statement h2 {
	font-size: clamp(2.06rem, 3.17vw, 3.72rem);
}

/* was clamp(2.75rem, 5vw, 5.5rem) @ 1.05 */
body .zso-institutions h2 {
	font-size: clamp(2.4rem, 4.4vw, 4.8rem);
}

/* The 404 hero is Tailwind-sized: text-9xl (8rem) + leading-none + tracking-tight. */
body.error404 .site-content h1 {
	font-size: clamp(2.6rem, 5.6vw, 6.1rem);
}

/* ------------------------------------------------------------------ *
 * 2. First screen — open-source product ecosystem
 *    hero-background.svg  -> API lanes + stacked module mark
 *    pattern.svg          -> reusable module grid
 *    logo-lockup.svg      -> brand lockup + platform tagline
 * ------------------------------------------------------------------ */

.zso-home-hero {
	position: relative;
	isolation: isolate;
}

/* API lanes flowing under the first screen. Positioned low so the wordmark
   baked into the artwork stays out of frame at desktop heights; below 980px
   the wordmark-free variant is used instead (see §7). */
.zso-home-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: url("hero-background.svg");
	background-repeat: no-repeat;
	background-position: 50% 128%;
	background-size: 165% auto;
	opacity: .5;
	pointer-events: none;
}

/* Reusable module grid. The tile carries its own paper-coloured canvas, so a
   plain opacity fade keeps it as texture instead of stamping visible blocks. */
.zso-home-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: url("pattern.svg");
	background-repeat: repeat;
	background-size: 26rem 26rem;
	opacity: .3;
	pointer-events: none;
}

/* Brand lockup above the kicker — "ZAD STACK / Products that become platforms."
   The kit asset ships on its own paper canvas, so it is framed as a deliberate
   brand plate rather than left floating as an untitled lighter rectangle. */
.zso-home-copy::before {
	content: "";
	display: block;
	flex: 0 0 auto;
	width: min(17rem, 62%);
	aspect-ratio: 4 / 1;
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
	border: 1px solid var(--zso-line, rgba(16, 35, 29, .22));
	background-image: url("logo-lockup.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* Ecosystem rail closing the first screen. */
.zso-home-copy::after {
	content: "OPEN SOURCE · STACKED MODULES · APIs · REUSABLE PLATFORMS";
	flex: 0 0 auto;
	margin-top: clamp(1.25rem, 3vw, 2rem);
	padding-top: 1.1rem;
	border-top: 1px solid var(--zso-line, rgba(16, 35, 29, .22));
	color: color-mix(in srgb, var(--zso-ink, #10231d) 58%, transparent);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .62rem;
	font-weight: 800;
	letter-spacing: .12em;
	line-height: 1.9;
}

/* ------------------------------------------------------------------ *
 * 3. Footer — the key colour has to survive the dark ground
 *
 * --color-primary (#1C4A34) sits on --color-text (#16261C) in the footer:
 * 1.56:1. It carries the top signature line, every column heading and the
 * subscribe button, i.e. the footer's whole navigational skeleton, at 10.6px.
 * --zad-footer-key is the mint the site already uses for mono kickers on ink
 * (.zso-company-band p, .zso-featured-notes span): 7.70:1 on the same ground.
 * ------------------------------------------------------------------ */

body .zso-site-footer .zso-footer-statement > p:first-child,
body .zso-site-footer .zso-footer-main nav strong {
	color: var(--zad-footer-key);
}

body .zso-site-footer .zso-footer-form button {
	background: var(--zad-footer-key);
	color: rgb(var(--color-text));
}

/* ------------------------------------------------------------------ *
 * 4. Basic surfaces — search · category archive · date archive
 *
 * zadstack_site_template() routes front-page / zad_project / woocommerce / 404
 * / single / page, and nothing else. Search and the taxonomy + date archives
 * fall through to the base theme's search.php / archive.php, which speak a
 * different visual language and lose their horizontal padding to
 * `.zadstack-presentation .site-content > .max-w-6xl { padding: 0 }`.
 *
 * .zad-basic-surface is added to <body> by inc/brand-surfaces.php on exactly
 * those routes (never on a WooCommerce archive, which has its own template).
 * The UI strings are translated in the same file.
 * ------------------------------------------------------------------ */

body.zad-basic-surface .site-content > .max-w-6xl {
	max-width: 90rem;
	margin-inline: auto;
	padding: clamp(3rem, 6vw, 5.5rem) clamp(1.25rem, 5vw, 6rem) clamp(5rem, 9vw, 8rem);
}

body.zad-basic-surface .site-main {
	color: rgb(var(--color-text));
}

/* Page header, in the site's own register: mono eyebrow over a display title. */
body.zad-basic-surface .page-header {
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
	padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
	border-bottom: 2px solid rgb(var(--color-text));
}

body.zad-basic-surface .page-header .page-title {
	font-size: clamp(2.35rem, 4.7vw, 5.3rem);
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: 0;
}

body.zad-basic-surface .page-header .page-title .text-primary {
	color: var(--zso-blue, #235aaf);
}

body.zad-basic-surface .archive-description {
	max-width: 46rem;
	color: rgb(var(--color-text-muted));
	line-height: 1.85;
}

/* Result rows, not bordered cards: index language, matching .zso-journal-row. */
body.zad-basic-surface .post-list {
	display: block;
	border-top: 2px solid rgb(var(--color-text));
}

body.zad-basic-surface .post-list .entry {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 8rem;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
	margin: 0;
	padding: clamp(1.75rem, 3vw, 2.5rem) 0;
	border: 0;
	border-bottom: 1px solid var(--zso-line, rgba(16, 35, 29, .22));
	background: transparent;
}

body.zad-basic-surface .post-list .entry > .entry-header,
body.zad-basic-surface .post-list .entry > .entry-summary,
body.zad-basic-surface .post-list .entry > .entry-footer {
	grid-column: 1;
}

/* A 1024px app icon was being painted at the full 1416px container width inside
   a result list. Pin it to a fixed plate in the second column instead. */
body.zad-basic-surface .post-list .entry .post-thumbnail {
	grid-column: 2;
	grid-row: 1 / span 4;
	margin: 0;
	border: 1px solid var(--zso-line, rgba(16, 35, 29, .22));
}

body.zad-basic-surface .post-list .entry .post-thumbnail img {
	display: block;
	width: 100%;
	height: 8rem;
	object-fit: contain;
	background: rgb(var(--color-surface-alt));
}

body.zad-basic-surface .post-list .entry-title {
	margin-bottom: .75rem;
	font-size: clamp(1.5rem, 2.6vw, 2.4rem);
	font-weight: 900;
	line-height: 1.3;
	letter-spacing: 0;
}

body.zad-basic-surface .post-list .entry-meta {
	color: rgb(var(--color-text-muted));
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .68rem;
	letter-spacing: .06em;
}

/* The byline prints an empty author name linked to /author/, which 404s, on a
   site that speaks in one corporate voice. Hidden rather than half-fixed. */
body.zad-basic-surface .post-list .entry-meta .byline {
	display: none;
}

body.zad-basic-surface .post-list .entry-summary {
	max-width: 46rem;
	color: rgb(var(--color-text-muted));
	line-height: 1.85;
}

body.zad-basic-surface .post-list .entry-footer {
	margin-top: 1.25rem;
}

body.zad-basic-surface .post-list .read-more {
	min-height: 2.75rem;
	align-items: center;
	color: rgb(var(--color-primary));
	font-weight: 900;
	text-decoration: underline;
	text-underline-offset: .3rem;
}

/* An RTL row cannot use a right-pointing arrow, and it belongs after the label. */
body.zad-basic-surface .post-list .read-more span[aria-hidden] {
	order: -1;
	transform: scaleX(-1);
}

/* Pagination. `mt-12` and the arbitrary variants in the `class` argument are
   destroyed by sanitize_html_class(), so the spacing is restated here. */
body.zad-basic-surface .navigation.pagination {
	margin-top: clamp(3rem, 6vw, 4.5rem);
	padding-top: 2rem;
	border-top: 1px solid var(--zso-line, rgba(16, 35, 29, .22));
}

body.zad-basic-surface .navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

body.zad-basic-surface .navigation.pagination .page-numbers {
	display: inline-flex;
	min-width: 2.75rem;
	min-height: 2.75rem;
	align-items: center;
	justify-content: center;
	padding: 0 .85rem;
	border: 1px solid var(--zso-line, rgba(16, 35, 29, .22));
	font-weight: 800;
}

body.zad-basic-surface .navigation.pagination .page-numbers.current {
	background: rgb(var(--color-primary));
	border-color: rgb(var(--color-primary));
	color: #fff;
}

/* ------------------------------------------------------------------ *
 * 5. WooCommerce surfaces
 *
 * The site's language is: square corners, 1–2px rules, warm paper, no shadow.
 * .zso-store already corrects the shop grid and the buttons; the cart, the
 * account form, the product tabs, the notices and the form fields were still
 * shipping WooCommerce defaults (pill buttons, rounded grey tabs, a blue
 * #2196F3 notice rail, 1330px-wide inputs).
 * ------------------------------------------------------------------ */

body.woocommerce-page .zso-store .woocommerce-info,
body.woocommerce-page .zso-store .woocommerce-message,
body.woocommerce-page .zso-store .woocommerce-error,
body.woocommerce-page .zso-store .woocommerce-noreviews,
body.woocommerce-page .zso-store .woocommerce-no-products-found > .woocommerce-info {
	display: block;
	margin: 0 0 2rem;
	padding: 1.25rem 1.5rem;
	border: 1px solid rgb(var(--color-text));
	border-top-width: 2px;
	border-radius: 0;
	background: rgb(var(--color-surface));
	color: rgb(var(--color-text));
	font-size: .95rem;
	line-height: 1.7;
	list-style: none;
}

/* The default rail and the ::before glyph, which rendered as an empty square. */
body.woocommerce-page .zso-store .woocommerce-info::before,
body.woocommerce-page .zso-store .woocommerce-message::before,
body.woocommerce-page .zso-store .woocommerce-error::before,
body.woocommerce-page .zso-store .woocommerce-noreviews::before {
	content: none;
}

/* Product title was rendering at 16px — under its own tab headings. */
body.woocommerce-page .zso-store .product_title,
body.woocommerce-page .zso-store .entry-summary .product_title {
	margin-bottom: 1.25rem;
	font-size: clamp(2rem, 3.6vw, 3.4rem);
	font-weight: 900;
	line-height: 1.25;
	letter-spacing: 0;
}

/* Sale badge: the box was narrower than the Arabic word, clipping it, and its
   ink-on-blue read 2.55:1. White on #2B4FE8 is 6.20:1. */
body.woocommerce-page .zso-store .onsale,
body .zso-store .onsale,
body.woocommerce-page .zso-store .wc-block-grid__product-onsale {
	display: inline-flex;
	width: auto;
	min-width: 0;
	min-height: 0;
	align-items: center;
	padding: .35rem .8rem;
	border-radius: 0;
	background: rgb(var(--color-secondary));
	font-size: .7rem;
	font-weight: 900;
	line-height: 1.4;
	white-space: nowrap;
}

/* site.css sets `.zso-store .onsale { color: rgb(var(--color-text)) !important }`
   — ink on #2B4FE8 is 2.55:1. White on the same blue is 6.20:1. Overriding an
   !important declaration takes an !important; this is the only one in the file. */
body.woocommerce-page .zso-store .onsale,
body .zso-store .onsale,
body.woocommerce-page .zso-store .wc-block-grid__product-onsale {
	color: #fff !important;
}

/* The WooCommerce archive title rendered at 16px, in English, with no hero. */
body .zso-store > .page-title,
body .zso-store .woocommerce-products-header .page-title {
	margin-bottom: clamp(2rem, 4vw, 3rem);
	padding-bottom: clamp(1.25rem, 2.5vw, 2rem);
	border-bottom: 2px solid rgb(var(--color-text));
	font-size: clamp(2.2rem, 4.2vw, 4.4rem);
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: 0;
}

/* Tabs — square, rule-based, no rounded grey shoulders. */
body.woocommerce-page .zso-store .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0 0 2rem;
	padding: 0;
	border-bottom: 2px solid rgb(var(--color-text));
}

body.woocommerce-page .zso-store .woocommerce-tabs ul.tabs::before,
body.woocommerce-page .zso-store .woocommerce-tabs ul.tabs::after,
body.woocommerce-page .zso-store .woocommerce-tabs ul.tabs li::before,
body.woocommerce-page .zso-store .woocommerce-tabs ul.tabs li::after {
	display: none;
}

body.woocommerce-page .zso-store .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

body.woocommerce-page .zso-store .woocommerce-tabs ul.tabs li a {
	display: inline-flex;
	min-height: 2.75rem;
	align-items: center;
	padding: 0 1.1rem;
	color: rgb(var(--color-text-muted));
	font-weight: 800;
}

body.woocommerce-page .zso-store .woocommerce-tabs ul.tabs li.active a {
	background: rgb(var(--color-text));
	color: rgb(var(--color-background));
}

body.woocommerce-page .zso-store .woocommerce-tabs .panel > h2:first-child {
	font-size: clamp(1.4rem, 2.2vw, 1.9rem);
	font-weight: 900;
	line-height: 1.3;
}

/* Forms — a 1330px input is not a usable line length. */
body.woocommerce-page .zso-store .woocommerce-form,
body.woocommerce-page .zso-store form.login,
body.woocommerce-page .zso-store form.register,
body.woocommerce-page .zso-store form.lost_reset_password {
	max-width: 30rem;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border: 1px solid rgb(var(--color-border));
	border-top: 2px solid rgb(var(--color-text));
	border-radius: 0;
	background: rgb(var(--color-surface));
}

body.woocommerce-page .zso-store .form-row {
	margin: 0 0 1.25rem;
	padding: 0;
}

body.woocommerce-page .zso-store .form-row label {
	display: block;
	margin-bottom: .4rem;
	font-size: .85rem;
	font-weight: 800;
}

body.woocommerce-page .zso-store input.input-text,
body.woocommerce-page .zso-store .woocommerce-Input--text,
body.woocommerce-page .zso-store input[type="email"],
body.woocommerce-page .zso-store input[type="password"],
body.woocommerce-page .zso-store input[type="tel"],
body.woocommerce-page .zso-store input[type="text"],
body.woocommerce-page .zso-store textarea,
body.woocommerce-page .zso-store select {
	width: 100%;
	max-width: 28rem;
	min-height: 2.75rem;
	padding: .55rem .75rem;
	border: 1px solid rgb(var(--color-text));
	border-radius: 0;
	background: rgb(var(--color-background));
	color: rgb(var(--color-text));
	font-family: inherit;
	font-size: 1rem;
}

/* The remember-me box measured 13×13. 24px is the WCAG 2.2 AA floor. */
body.woocommerce-page .zso-store .woocommerce-form__input-checkbox {
	width: 1.25rem;
	height: 1.25rem;
	margin: 0 0 0 .5rem;
	accent-color: rgb(var(--color-primary));
	vertical-align: middle;
}

body.woocommerce-page .zso-store .woocommerce-form__label-for-checkbox {
	display: inline-flex;
	min-height: 2.75rem;
	align-items: center;
	gap: .25rem;
}

/* The sort control on /shop/ was an unstyled 227×19 select. */
body.woocommerce-page .zso-store .woocommerce-ordering select,
body.woocommerce-page .zso-store select.orderby {
	min-height: 2.75rem;
	max-width: 20rem;
	border: 1px solid rgb(var(--color-text));
	border-radius: 0;
	background: rgb(var(--color-background));
	font-weight: 700;
}

/* Price. #958E09 is in neither the kit nor the --zso-* set, and it read 2.91:1
   on the paper — on the single most important number in the store. The brand
   green is 8.61:1; only the struck-through original price stays muted. */
/* WooCommerce ships this as
   `.woocommerce:where(body:not(...)) ul.products li.product .price` — :where()
   is weightless, so that is a (0,4,2) selector. Matched here through .zso-store
   to clear it without !important. */
body.woocommerce-page .zso-store ul.products li.product .price,
body.woocommerce-page .zso-store div.product .price,
body.woocommerce-page .zso-store .price,
body.woocommerce-page .zso-store .woocommerce-Price-amount {
	color: rgb(var(--color-primary));
	font-weight: 800;
}

body.woocommerce-page .zso-store ul.products li.product .price del,
body.woocommerce-page .zso-store div.product .price del,
body.woocommerce-page .zso-store .price del,
body.woocommerce-page .zso-store .price del .woocommerce-Price-amount {
	color: rgb(var(--color-text-muted));
	font-weight: 400;
}

body.woocommerce-page .zso-store .woocommerce-result-count {
	color: rgb(var(--color-text-muted));
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .72rem;
}

/* Buttons on the surfaces .zso-store's rules do not reach. */
body.woocommerce-page .zso-store .button,
body.woocommerce-page .zso-store button.button,
body.woocommerce-page .zso-store .woocommerce-button,
body.woocommerce-page .zso-store .wc-block-components-button {
	min-height: 2.75rem;
	align-items: center;
	border-radius: 0;
	font-weight: 900;
}

body.woocommerce-page .zso-store .wc-block-components-text-input input,
body.woocommerce-page .zso-store .wc-block-components-text-input {
	border-radius: 0;
}

/* ------------------------------------------------------------------ *
 * 6. Empty states — every dead end names its next step
 *
 * The markup for these CTAs is emitted by inc/brand-surfaces.php through
 * render_block / woocommerce_no_products_found / get_search_form / wp_footer.
 * No page content and no template is edited.
 * ------------------------------------------------------------------ */

.zad-nextstep {
	display: flex;
	flex-wrap: wrap;
	gap: .85rem;
	align-items: center;
	justify-content: center;
	margin: 2rem auto 0;
	padding-top: 1.75rem;
	border-top: 1px solid var(--zso-line, rgba(16, 35, 29, .22));
}

/* Drawing for the dead ends that have no artwork of their own — an empty tray
   with an API lane that stops at its edge. Generated art (z_image_turbo, seed
   4410) with its canvas knocked out to alpha, so it sits on the paper as line
   work rather than as a plate. The cart keeps its own icon and gets no art.
   Fixed height + contain: this is a full-width flex row, and a width with a
   flex-basis of 100% would not have constrained it. */
.zad-nextstep--art::before {
	content: "";
	flex: 0 0 100%;
	height: clamp(6rem, 14vw, 9rem);
	margin-bottom: 1.5rem;
	background-image: url("empty-state.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: .92;
}

.zad-nextstep p {
	width: 100%;
	margin: 0 0 .35rem;
	color: rgb(var(--color-text-muted));
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-align: center;
}

.zad-nextstep a {
	display: inline-flex;
	min-height: 2.75rem;
	align-items: center;
	padding: 0 1.25rem;
	border: 2px solid rgb(var(--color-primary));
	color: rgb(var(--color-primary));
	font-weight: 900;
	text-decoration: none;
}

.zad-nextstep a.is-primary {
	background: rgb(var(--color-primary));
	color: #fff;
}

.zad-nextstep a:hover {
	background: rgb(var(--color-text));
	border-color: rgb(var(--color-text));
	color: rgb(var(--color-background));
}

/* Empty cart: the block ships a title, a dotted rule and a "new in store" grid
   with no way back to the store. The CTA is appended; the suggestion grid is
   pulled back onto the container's own axis. */
body .wp-block-woocommerce-empty-cart-block {
	max-width: 60rem;
	margin-inline: auto;
}

body .wp-block-woocommerce-empty-cart-block > .wp-block-heading {
	text-align: center;
}

body .wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
	justify-content: center;
}

/* 404 search band, printed just above the site footer. */
.zad-404-search {
	border-top: 1px solid rgb(var(--color-border));
	background: rgb(var(--color-background));
}

.zad-404-search > div {
	max-width: 90rem;
	margin-inline: auto;
	padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 5vw, 6rem);
}

.zad-404-search p {
	margin-bottom: 1rem;
	color: rgb(var(--color-primary));
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .72rem;
	font-weight: 900;
	letter-spacing: .1em;
}

.zad-404-search .search-form,
.zad-basic-surface .search-form {
	max-width: 34rem;
}

.zad-404-search .search-field,
.zad-basic-surface .search-field {
	min-height: 2.75rem;
	border: 1px solid rgb(var(--color-text));
	border-radius: 0;
}

.zad-404-search .search-submit,
.zad-basic-surface .search-submit {
	min-height: 2.75rem;
	border-radius: 0;
	font-weight: 900;
}

/* ------------------------------------------------------------------ *
 * 7. Responsive
 * ------------------------------------------------------------------ */

@media (max-width: 980px) {

	/* At tablet heights the artwork's baked-in wordmark entered the frame,
	   half-cropped, behind the <h1>. Swap to the wordmark-free variant. */
	.zso-home-hero::before {
		background-image: url("hero-background-plain.svg");
		background-position: 50% 108%;
		background-size: 210% auto;
	}

	body .zso-corporate-hero h1 {
		font-size: clamp(2.45rem, 11.4vw, 4.1rem);
	}

	body .zso-institutions h2 {
		font-size: clamp(2.2rem, 10.5vw, 3.5rem);
	}
}

@media (max-width: 900px) {

	body.zad-basic-surface .post-list .entry {
		grid-template-columns: minmax(0, 1fr);
	}

	body.zad-basic-surface .post-list .entry .post-thumbnail {
		grid-column: 1;
		grid-row: auto;
		order: -1;
		max-width: 12rem;
		margin-bottom: 1.25rem;
	}
}

@media (max-width: 640px) {

	.zso-home-hero::before {
		background-position: 50% 100%;
		background-size: 300% auto;
		opacity: .42;
	}

	.zso-home-copy::before {
		width: min(13rem, 72%);
	}

	.zso-home-copy::after {
		font-size: .58rem;
		letter-spacing: .1em;
	}

	/* was clamp(4rem, 20vw, 5.2rem) @ .88 */
	body .zso-home-copy h1 {
		font-size: clamp(2.9rem, 14.6vw, 3.8rem);
	}

	/* was clamp(3.2rem, 16vw, 4.5rem) @ .94 */
	body .zso-section-heading h2,
	body .zso-index-header h2,
	body .zso-home-journal h2 {
		font-size: clamp(2.5rem, 12.5vw, 3.5rem);
	}

	/* was clamp(3.6rem, 17vw, 5rem) @ .9 */
	body .zso-open-standard h2 {
		font-size: clamp(2.7rem, 12.75vw, 3.75rem);
	}

	/* was clamp(4rem, 19vw, 5.8rem) @ .9 */
	body .zso-home-cta h2 {
		font-size: clamp(3rem, 14.25vw, 4.35rem);
	}

	body.zad-basic-surface .page-header .page-title {
		font-size: clamp(2.2rem, 11vw, 3.2rem);
	}

	body.woocommerce-page .zso-store .woocommerce-tabs ul.tabs li a {
		padding: 0 .75rem;
		font-size: .9rem;
	}
}

/* ------------------------------------------------------------------ *
 * 8. Print — drop the decorative layers, keep the lockup.
 * ------------------------------------------------------------------ */

@media print {

	.zso-home-hero::before,
	.zso-home-hero::after {
		display: none;
	}

	.zso-home-copy::after {
		border-top-color: var(--zad-muted-line);
		color: #16261C;
	}

	.zad-nextstep,
	.zad-404-search {
		display: none;
	}
}