/**
 * Site chrome, v2 (2026-09-10) — the header's CTA and «منو» button, the side panel, the footer,
 * the back-to-top button, and the small shared vocabulary they and the homepage use (.iz-btn,
 * .iz-link, .iz-social). Loaded on every page, after tokens.css; the header bar's own layout is
 * still in tokens.css.
 *
 * Colour follows the owner-approved v2 direction: the eucalyptus green (--secondary-500, the vault's
 * only green approved for white text, 4.81:1) is the action colour of the chrome; teal-blue stays
 * the trust/expertise colour. The site-wide --color-cta-primary-bg token is deliberately not changed
 * here — moving every page's buttons is the full-site pass (docs/todo.md).
 *
 * Motion follows the homepage's system: strong ease-out for anything entering, the iOS drawer curve
 * for the panel, press feedback at scale(.97), hover effects behind a fine-pointer query. The global
 * reduced-motion rule in tokens.css flattens every transition here.
 */

:root {
	--iz-ease-out: cubic-bezier(.23, 1, .32, 1);
	--iz-ease-in-out: cubic-bezier(.77, 0, .175, 1);
	--iz-ease-drawer: cubic-bezier(.32, .72, 0, 1);
	--iz-ease: cubic-bezier(.25, .1, .25, 1);
	/* Three durations for the whole chrome: a hover or a close, an open, and a sheet or a height. */
	--iz-dur-1: 150ms;
	--iz-dur-2: 220ms;
	--iz-dur-3: 320ms;

	--iz-cta: var(--secondary-500);
	--iz-cta-hover: var(--secondary-600);
	--iz-cta-active: var(--secondary-700);
	--iz-line-soft: #e8efee;
	/* Caption grey. #58707a clears 4.5:1 on white, canvas and every tinted surface (4.68–5.23). */
	--iz-ink-soft: #58707a;
	/* Icon glyph sizes. Font Awesome glyphs are sized by font-size, and icon sizes are exempt from
	 * the type ladder (design-system.md, spacing standard rule 5) — but not from being one set. The
	 * chrome had eleven (12 … 32); these seven replace them. They belong in tokens.css beside
	 * --icon-stroke once the other sheets need them. */
	--iz-icon-2xs: 12px;
	--iz-icon-xs: 14px;
	--iz-icon-s: 16px;
	--iz-icon-m: 18px;
	--iz-icon-l: 20px;
	--iz-icon-xl: 24px;
	--iz-icon-2xl: 32px;
	--iz-shadow-lift: 0 2px 4px rgb(from var(--primary-700) r g b / .05), 0 14px 32px rgb(from var(--primary-700) r g b / .09);
}

/* ------------------------------------------------------------------ shared: buttons and links */
.iz-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--gap-inline);
	min-height: var(--control-min-height, 48px);
	padding: 0 var(--space-4);
	border: 1.5px solid transparent;
	border-radius: var(--radius-input);
	font: var(--text-button);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 160ms var(--iz-ease), border-color 160ms var(--iz-ease), color 160ms var(--iz-ease), transform 160ms var(--iz-ease-out);
}
.iz-btn .fa-solid { font-size: var(--iz-icon-m); transition: transform 200ms var(--iz-ease-out); }
.iz-btn:active { transform: scale(.97); }
.iz-btn:focus-visible, .iz-link:focus-visible, .iz-social:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus-ring); }
.iz-btn--primary { background: var(--iz-cta); color: #fff; }
.iz-btn--primary:active { background: var(--iz-cta-active); }
.iz-btn--secondary { border-color: var(--secondary-300); background: transparent; color: var(--secondary-700); }
.iz-btn--light { background: #fff; color: var(--secondary-800); }
.iz-btn--ghost { border-color: rgb(255 255 255 / .42); background: transparent; color: #fff; }
.iz-btn--ghost-dark { border-color: var(--color-border); background: transparent; color: var(--color-heading); }
.iz-btn--small { min-height: 40px; padding: 0 var(--space-3); font: var(--text-button-s); }
/* The visual height stays 40px; a transparent 2px above and below lifts the hit area to the 44px
 * touch floor without moving anything (a pseudo-element on the button is part of its hit target). */
.iz-btn--small { position: relative; }
.iz-btn--small::after { content: ""; position: absolute; inset: -2px 0; }
.iz-btn--block { width: 100%; }
/* The base button had no disabled look of its own, so three separate stylesheets (auth.css,
 * account.css, tests.css) each invented one to cover a real disabled control, and page-booking.php's
 * two disabled «ادامه»/«بازبینی نهایی» buttons had none at all — a disabled continue button rendered
 * fully green and clickable-looking. One definition here, solid colours rather than opacity: an
 * opacity would also dim the already-tuned disabled look tests.css layers on top (measured — it
 * takes that pairing from 4.9:1 to 2.1:1), since opacity composites the whole box a second time.
 * The page-specific rules still win where they exist (they are more specific); this is what
 * page-booking.php's two buttons, and anything else with no page-level rule, now inherit. */
.iz-btn:disabled, .iz-btn[aria-disabled="true"] {
	border-color: var(--color-border);
	background: var(--color-bg);
	color: var(--iz-ink-soft);
	cursor: not-allowed;
	pointer-events: none;
}
.iz-btn:disabled:active, .iz-btn[aria-disabled="true"]:active { transform: none; }
@media (hover: hover) and (pointer: fine) {
	.iz-btn--primary:hover { background: var(--iz-cta-hover); }
	.iz-btn--secondary:hover { border-color: var(--secondary-400); background: var(--secondary-50); }
	.iz-btn--light:hover { background: var(--secondary-50); }
	.iz-btn--ghost:hover { border-color: rgb(255 255 255 / .72); background: rgb(255 255 255 / .08); }
	.iz-btn--ghost-dark:hover { border-color: var(--secondary-300); background: var(--secondary-50); }
	.iz-btn:hover .fa-arrow-left { transform: translateX(-3px); }
}

.iz-link {
	display: inline-flex;
	align-items: center;
	gap: var(--gap-inline);
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--secondary-700);
	font: var(--text-button-s);
	text-decoration: none;
	cursor: pointer;
	border-radius: 6px;
}
.iz-link .fa-solid { font-size: var(--iz-icon-s); transition: transform 200ms var(--iz-ease-out); }
.iz-link--light { color: #fff; }
@media (hover: hover) and (pointer: fine) {
	.iz-link:hover { color: var(--secondary-800); }
	.iz-link--light:hover { color: var(--secondary-100); }
	.iz-link:hover .fa-arrow-left { transform: translateX(-4px); }
}

.iz-social {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--iz-line-soft);
	border-radius: 10px;
	color: var(--color-text);
	text-decoration: none;
	transition: background-color 160ms var(--iz-ease), color 160ms var(--iz-ease), transform 140ms var(--iz-ease-out);
}
.iz-social .fa-solid { font-size: var(--iz-icon-m); }
.iz-social:active { transform: scale(var(--iz-press, .97)); }
.iz-social--dark { border-color: rgb(255 255 255 / .16); color: var(--secondary-100); }
@media (hover: hover) and (pointer: fine) {
	.iz-social:hover { background: var(--secondary-50); color: var(--secondary-700); }
	.iz-social--dark:hover { background: rgb(255 255 255 / .08); color: #fff; }
}

/* ------------------------------------------------------------------ header v3 (2026-09-27)
 * Rebuilt with the chrome redesign (decisions.md). One bar: the phone's menu button, the logo, the
 * primary WordPress menu with its megamenus (from 1024px), then search, the mini cart and the
 * account. Every hover, open and close rides the same three durations and one ease-out, and every
 * floating surface (megamenu, mini cart, account menu) enters the same way — a short fade and a
 * 6px rise from its trigger — and leaves faster than it came. */
.site-header {
	position: relative;
	z-index: 40;
	background: var(--color-surface);
	border-bottom: 1px solid var(--iz-line-soft);
}
.site-header__bar {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	width: var(--chrome-width);
	min-height: 72px;
	margin-inline: auto;
}
.site-branding { flex: none; }
.site-branding a { color: var(--color-heading); text-decoration: none; }
.site-header__actions { display: flex; align-items: center; gap: var(--gap-inline); flex: none; margin-inline-start: auto; }

/* The homepage keeps its header in view: it is the one long page whose sections are all doors. */
body.home .site-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	background: rgb(from var(--color-surface) r g b / .88);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	backdrop-filter: saturate(160%) blur(14px);
	transition: box-shadow var(--iz-dur-3) var(--iz-ease);
}
body.home .site-header.is-scrolled { box-shadow: 0 6px 24px rgb(from var(--primary-700) r g b / .07); }

/* ---- header buttons: one family — a 40px square for icons, a pill for the account and sign-in */
.hdr-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--gap-inline);
	height: 40px;
	padding: 0 var(--space-3);
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: var(--color-heading);
	font: var(--text-button-s);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color var(--iz-dur-1) var(--iz-ease), color var(--iz-dur-1) var(--iz-ease), box-shadow var(--iz-dur-1) var(--iz-ease), transform var(--iz-dur-1) var(--iz-ease-out);
}
/* A transparent apron takes every target to 44px without growing the box. */
.hdr-btn::after { content: ""; position: absolute; inset: -2px; }
.hdr-btn .fa-solid { font-size: var(--iz-icon-l); }
.hdr-btn--icon { width: 40px; padding: 0; }
.hdr-btn:active { transform: scale(var(--iz-press)); }
.hdr-btn[aria-expanded="true"] { background: var(--iz-sunk); }
.hdr-btn--auth { background: var(--iz-cta); color: #fff; padding-inline: var(--space-3); }
.hdr-btn--auth .fa-solid { font-size: var(--iz-icon-m); }
.hdr-btn--account { padding-inline: var(--space-0) var(--space-2); box-shadow: inset 0 0 0 1px var(--iz-line-soft); }
.hdr-btn__label { max-width: 10ch; overflow: hidden; text-overflow: ellipsis; }
.hdr-btn__caret { font-size: var(--iz-icon-2xs) !important; color: var(--iz-ink-soft); transition: transform var(--iz-dur-2) var(--iz-ease-out); }
.hdr-btn[aria-expanded="true"] .hdr-btn__caret { transform: rotate(180deg); }
.site-header :is(a, button):focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus-ring); }
@media (hover: hover) and (pointer: fine) {
	.hdr-btn:hover { background: var(--iz-sunk); }
	.hdr-btn--auth:hover { background: var(--iz-cta-hover); }
	.hdr-btn--account:hover { box-shadow: inset 0 0 0 1px var(--secondary-300); background: var(--color-surface); }
}

.hdr-avatar {
	display: grid;
	place-items: center;
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--secondary-100);
	color: var(--secondary-800);
	font: var(--text-button-s);
}
.hdr-avatar .fa-solid { font-size: var(--iz-icon-s); }
.hdr-avatar img, .site-panel__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.hdr-avatar--lg { width: 44px; height: 44px; font-size: var(--text-body-size); }
.hdr-avatar--muted { background: var(--color-surface); color: var(--iz-ink-soft); box-shadow: inset 0 0 0 1px var(--iz-line-soft); }

.hdr-count {
	position: absolute;
	top: 2px;
	inset-inline-end: 0;
	display: grid;
	place-items: center;
	min-width: 18px;
	height: 18px;
	padding: 0 var(--space-0);
	border-radius: 9px;
	background: var(--iz-cta);
	color: #fff;
	/* A counter: the number rung's weight at the micro size, on one line the grid centres. */
	font: var(--text-number-weight) var(--text-micro-size)/1 var(--font-body);
	text-align: center;
	box-shadow: 0 0 0 2px var(--color-surface);
}
.hdr-count.is-bumped { animation: iz-count-bump 420ms var(--iz-ease-out); }
@keyframes iz-count-bump { 0% { transform: scale(1); } 35% { transform: scale(1.3); } 100% { transform: scale(1); } }
.hdr-count--inline { position: static; box-shadow: none; margin-inline-start: auto; }

/* ---- menu button: phones and tablets only, at the start of the bar */
.site-header__menu {
	position: relative;
	display: none;
	place-items: center;
	width: 40px;
	height: 40px;
	/* Optical: the 20px lines sit 10px inside the 40px button; this brings them to the gutter. */
	margin-inline-start: calc(-1 * var(--space-1));
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: var(--color-heading);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color var(--iz-dur-1) var(--iz-ease), transform var(--iz-dur-1) var(--iz-ease-out);
}
.site-header__menu::after { content: ""; position: absolute; inset: -2px; }
.site-header__menu:active { transform: scale(var(--iz-press)); }
.site-header__menu-lines { position: relative; width: 20px; height: 14px; }
.site-header__menu-lines i {
	position: absolute;
	inset-inline-start: 0;
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transform-origin: right center;
	transition: transform var(--iz-dur-2) var(--iz-ease-out);
}
.site-header__menu-lines i:nth-child(1) { top: 0; }
.site-header__menu-lines i:nth-child(2) { top: 6px; transform: scaleX(.65); }
.site-header__menu-lines i:nth-child(3) { top: 12px; }
@media (hover: hover) and (pointer: fine) {
	.site-header__menu:hover { background: var(--iz-sunk); }
	.site-header__menu:hover .site-header__menu-lines i:nth-child(2) { transform: none; }
}

/* ---- primary nav */
.primary-nav { flex: 1; min-width: 0; }
.primary-nav__list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.primary-nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--space-0);
	height: 40px;
	padding: 0 var(--space-2);
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--color-text);
	font: var(--text-button-s);
	text-decoration: none;
	cursor: pointer;
	transition: color var(--iz-dur-1) var(--iz-ease), background-color var(--iz-dur-1) var(--iz-ease);
}
/* The current section and an open megamenu share one mark: a 2px line under the label that grows
 * from its centre. Hover gets the same line at half strength, so the pointer always knows where it is. */
.primary-nav__link::before {
	content: "";
	position: absolute;
	inset-inline: var(--space-2);
	bottom: var(--space-0);
	height: 2px;
	border-radius: 2px;
	background: var(--secondary-500);
	transform: scaleX(0);
	transition: transform var(--iz-dur-2) var(--iz-ease-out), opacity var(--iz-dur-2) var(--iz-ease);
}
.primary-nav__item.is-current > .primary-nav__link, .primary-nav__link[aria-expanded="true"] { color: var(--color-heading); }
.primary-nav__item.is-current > .primary-nav__link::before, .primary-nav__link[aria-expanded="true"]::before { transform: scaleX(1); }
.primary-nav__trigger .fa-chevron-down { font-size: var(--iz-icon-2xs); color: var(--iz-ink-soft); transition: transform var(--iz-dur-2) var(--iz-ease-out); }
.primary-nav__trigger[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
	.primary-nav__link:hover { color: var(--color-heading); }
	.primary-nav__link:hover::before { transform: scaleX(1); opacity: .45; }
	.primary-nav__item.is-current > .primary-nav__link:hover::before, .primary-nav__link[aria-expanded="true"]:hover::before { opacity: 1; }
}

/* ---- megamenu: a full-width sheet under the bar, the container's width inside it.
 * Hidden with `hidden` (so it is out of the accessibility tree and the tab order until opened);
 * chrome.js removes the attribute, waits a frame and sets .is-open, so the entrance is a real
 * transition. On close it clears .is-open and restores `hidden` when the transition ends. */
.mega {
	position: absolute;
	inset-inline: 0;
	top: 100%;
	z-index: 41;
	padding-block: var(--space-4) var(--space-5);
	background: var(--color-surface);
	border-top: 1px solid var(--iz-line-soft);
	box-shadow: 0 24px 48px -12px rgb(from var(--primary-900) r g b / .14);
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity var(--iz-dur-1) var(--iz-ease), transform var(--iz-dur-1) var(--iz-ease);
}
.mega.is-open { opacity: 1; transform: none; transition: opacity var(--iz-dur-2) var(--iz-ease-out), transform var(--iz-dur-3) var(--iz-ease-out); }
/* A bridge over the gap between the trigger and the sheet, so the pointer never "leaves" on the way down. */
.mega::before { content: ""; position: absolute; inset-inline: 0; bottom: 100%; height: 16px; }
.primary-nav__item[data-mega] { position: static; }
.mega__inner {
	display: grid;
	grid-template-columns: minmax(200px, 240px) repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--space-2) var(--space-5);
	width: var(--chrome-width);
	margin-inline: auto;
}
.mega__inner > * { opacity: 0; transform: translateY(4px); transition: opacity var(--iz-dur-1) var(--iz-ease), transform var(--iz-dur-1) var(--iz-ease); }
.mega.is-open .mega__inner > * { opacity: 1; transform: none; transition: opacity var(--iz-dur-3) var(--iz-ease-out), transform var(--iz-dur-3) var(--iz-ease-out); }
.mega.is-open .mega__inner > :nth-child(2) { transition-delay: 30ms; }
.mega.is-open .mega__inner > :nth-child(3) { transition-delay: 60ms; }
.mega.is-open .mega__inner > :nth-child(4) { transition-delay: 90ms; }

.mega__intro { padding-inline-end: var(--space-5); border-inline-end: 1px solid var(--iz-line-soft); }
.mega__title { margin: 0 0 var(--gap-title); color: var(--color-heading); font: 600 var(--text-body-size)/var(--text-body-lh) var(--font-body); }
.mega__desc { margin: 0 0 var(--space-3); color: var(--iz-ink-soft); font: var(--text-caption); }
.mega__all {
	display: inline-flex;
	align-items: center;
	gap: var(--gap-inline);
	color: var(--secondary-700);
	font: var(--text-button-s);
	text-decoration: none;
}
.mega__all small { color: var(--iz-ink-soft); font-weight: 500; }
.mega__all .fa-solid { font-size: var(--iz-icon-xs); transition: transform var(--iz-dur-2) var(--iz-ease-out); }
.mega__heading { margin: 0 0 var(--space-1); padding-inline: var(--space-2); color: var(--iz-ink-soft); font: 600 var(--text-micro-size)/var(--text-micro-lh) var(--font-body); letter-spacing: 0; }
.mega__heading a { color: inherit; text-decoration: none; }
.mega__links, .mega__feed, .mega__chips { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.mega__links--two { grid-template-columns: 1fr 1fr; column-gap: var(--space-1); }
.mega__col:has(.mega__links--two) { grid-column: span 2; }
.mega__link, .mega__feed a {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-1) var(--space-2);
	border-radius: 12px;
	color: var(--color-text);
	text-decoration: none;
	transition: background-color var(--iz-dur-1) var(--iz-ease);
}
.mega__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--iz-sunk);
	color: var(--secondary-700);
	transition: background-color var(--iz-dur-1) var(--iz-ease), transform var(--iz-dur-2) var(--iz-ease-out);
}
.mega__icon .fa-solid { font-size: var(--iz-icon-m); }
.mega__text, .mega__feed a > span { display: grid; gap: 2px; min-width: 0; }
.mega__text b, .mega__feed b { color: var(--color-heading); font: 600 var(--text-caption-size)/var(--text-caption-lh) var(--font-body); }
.mega__text span, .mega__feed small { color: var(--iz-ink-soft); font: 500 var(--text-micro-size)/var(--text-micro-lh) var(--font-body); }
.mega__feed b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mega__feed img { flex: none; width: 48px; height: 48px; border-radius: 10px; object-fit: cover; background: var(--iz-sunk); }
.mega__link[aria-current="page"] b { color: var(--secondary-700); }
.mega__chips { display: flex; flex-wrap: wrap; gap: var(--gap-inline); padding-inline: var(--space-2); }
.mega__chips a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 var(--pad-chip-x);
	border-radius: 999px;
	background: var(--iz-sunk);
	color: var(--color-text);
	font: 500 var(--text-caption-size)/1 var(--font-body);
	text-decoration: none;
	transition: background-color var(--iz-dur-1) var(--iz-ease), color var(--iz-dur-1) var(--iz-ease);
}
.mega :is(a):focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus-ring); }
@media (hover: hover) and (pointer: fine) {
	.mega__link:hover, .mega__feed a:hover { background: var(--iz-sunk); }
	.mega__link:hover .mega__icon { background: var(--color-surface); transform: scale(1.06); }
	.mega__all:hover .fa-solid { transform: translateX(-3px); }
	.mega__chips a:hover { background: var(--secondary-100); color: var(--secondary-800); }
}

/* ---- megamenu v4: catalog / services / blog sheets (header-v4 prototype). `.mega`, `.mega__inner`,
 * `.mega__intro`, `.mega__col`, `.mega__links`, `.mega__feed` and `.mega__chips` above still style the
 * `mega--auto` fallback and are untouched. `.mega__inner`'s own `display: grid` is part of that
 * fallback's sidebar layout, so the three v4 sheets — whose own `.mega__catalog`/`.mega__services`/
 * `.mega__blog` grids do the column work — reset it back to a plain width wrapper. Everything below
 * is IRANSans on the ladder except `.mcard__title`, the card title, which takes the h4 rung on Pinar
 * per the face rule. */
.mega--catalog .mega__inner, .mega--services .mega__inner, .mega--blog .mega__inner { display: block; }
.mega__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-head); padding-bottom: var(--space-2); border-bottom: 1px solid var(--iz-line-soft); }
.mega__head .mega__title { margin: 0; color: var(--color-heading); font: 600 var(--text-body-s-size)/var(--text-micro-lh) var(--font-body); }
.mega__head .mega__title small { margin-inline-start: var(--space-1); color: var(--iz-ink-soft); font: var(--text-micro-weight) var(--text-micro-size)/var(--text-button-lh) var(--font-body); }

/* the «همهٔ …» card: always the last thing in a sheet, full width by default (services) */
.mega__allcard { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: 14px; background: var(--iz-sunk); border: 1px solid var(--iz-line-soft); color: inherit; text-decoration: none; transition: background-color var(--iz-dur-1) var(--iz-ease), border-color var(--iz-dur-1) var(--iz-ease); }
.mega__allcard-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: #fff; color: var(--secondary-700); }
.mega__allcard-icon .fa-solid { font-size: var(--iz-icon-m); line-height: 1; }
.mega__allcard-text { display: grid; min-width: 0; }
.mega__allcard-text b { color: var(--color-heading); font: 600 var(--text-button-size)/var(--text-micro-lh) var(--font-body); }
.mega__allcard-text span { color: var(--iz-ink-soft); font: 400 var(--text-micro-size)/var(--text-micro-lh) var(--font-body); }
.mega__allcard .fa-arrow-left { margin-inline-start: auto; font-size: var(--iz-icon-m); color: var(--secondary-700); transition: transform var(--iz-dur-2) var(--iz-ease-out); }
@media (hover: hover) and (pointer: fine) {
	.mega__allcard:hover { background: var(--secondary-50); border-color: var(--secondary-100); }
	.mega__allcard:hover .fa-arrow-left { transform: translateX(-4px); }
}

/* ---- catalog: two list columns (start/right), one preview card (end/left) spanning both rows */
.mega__catalog { display: grid; grid-template-columns: 1fr 1fr 296px; grid-template-rows: 1fr auto; gap: 0 var(--space-5); align-items: start; }
.mega__catalog .mcard { grid-column: 3; grid-row: 1 / span 2; }
.mega__catalog .mega__allcard { grid-column: 1 / span 2; grid-row: 2; align-self: end; margin: var(--space-1) 0 0; }
.mlist { display: grid; align-content: start; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.mlist__item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); border: 1px solid var(--iz-line-soft); border-radius: 14px; background: var(--color-surface); color: var(--color-text); text-decoration: none; transition: background-color var(--iz-dur-1) var(--iz-ease), border-color var(--iz-dur-1) var(--iz-ease); }
.mlist__n { display: grid; place-items: center; flex: none; min-width: 30px; height: 34px; padding-inline: var(--space-0); text-align: center; border-radius: 9px; background: var(--iz-sunk); color: var(--iz-ink-soft); font: var(--text-number-weight) var(--text-micro-size)/var(--text-number-lh) var(--font-body); font-variant-numeric: tabular-nums; transition: background-color var(--iz-dur-1) var(--iz-ease), color var(--iz-dur-1) var(--iz-ease); }
.mlist__text { display: grid; gap: var(--space-0); min-width: 0; }
.mlist__text b { color: var(--color-heading); font: 600 var(--text-body-s-size)/var(--text-body-s-lh) var(--font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlist__text span { color: var(--iz-ink-soft); font: var(--text-micro); }
.mlist__item.is-active { background: var(--secondary-50); border-color: var(--secondary-200); }
.mlist__item.is-active .mlist__n { background: var(--secondary-100); color: var(--secondary-800); }
.mlist__item .fa-arrow-left { margin-inline-start: auto; font-size: var(--iz-icon-xs); color: var(--secondary-700); opacity: 0; transform: translateX(4px); transition: opacity var(--iz-dur-1) var(--iz-ease), transform var(--iz-dur-2) var(--iz-ease-out); }
.mlist__item.is-active .fa-arrow-left { opacity: 1; transform: none; }
/* Course rows (2026-09-29, owner): the carousel card's thumbnail and stat line in place of the
 * number. Workshop rows keep the date badge above, unchanged. */
.mlist__thumb { flex: none; width: 96px; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: var(--secondary-100); }
.mlist__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mlist__stats { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-1); }
.mlist__stats > span { display: inline-flex; align-items: center; gap: var(--space-0); }
.mlist__stats .fa-solid { font-size: var(--iz-icon-xs); color: var(--secondary-600); }

.mcard { position: relative; display: grid; gap: 0; padding: var(--space-1); border-radius: 16px; background: var(--iz-sunk); border: 1px solid var(--iz-line-soft); color: inherit; text-decoration: none; }
.mcard__media, .mcard__body, .mcard__kicker, .mcard__title, .mcard__fact, .mcard__foot { display: block; }
.mcard__media { position: relative; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: var(--secondary-100); }
.mcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--iz-dur-2) var(--iz-ease-out); }
.mcard__media img.is-active { opacity: 1; }
.mcard__body { padding: var(--space-2) var(--space-1) var(--space-0); transition: opacity var(--iz-dur-2) var(--iz-ease-out), transform var(--iz-dur-2) var(--iz-ease-out); }
.mcard__kicker { margin: 0 0 var(--gap-title); color: var(--secondary-700); font: 600 var(--text-micro-size)/var(--text-micro-lh) var(--font-body); }
.mcard__title { margin: 0; color: var(--color-heading); font: var(--text-h4); }
.mcard__fact { margin: var(--gap-title) 0 var(--space-2); color: var(--iz-ink-soft); font: var(--text-micro); }
.mcard__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-inline); }
.mcard__price { color: var(--color-heading); font: var(--text-number-s); font-variant-numeric: tabular-nums; }
.mcard__price small { margin-inline-start: var(--space-0); color: var(--iz-ink-soft); font: var(--text-micro-weight) var(--text-micro-size)/var(--text-button-lh) var(--font-body); }
.mcard__cta { display: inline-flex; flex: none; white-space: nowrap; align-items: center; gap: var(--gap-inline); height: 36px; padding: 0 var(--space-3); border-radius: 10px; background: var(--primary-700); color: #fff; font: var(--text-button-s); text-decoration: none; transition: background-color var(--iz-dur-1) var(--iz-ease); }
.mcard__cta .fa-solid { font-size: var(--iz-icon-xs); }
@media (hover: hover) and (pointer: fine) { .mcard__cta:hover { background: var(--primary-900); } }
/* the swap: the old body fades and drops 3px, the new one rises in (JS toggles .is-swapping) */
.mcard.is-swapping .mcard__body { opacity: 0; transform: translateY(3px); transition: none; }

/* ---- services (2026-09-29, owner: «like blog's, each service in a column»): the blog sheet's head
 * and its card grammar — a grey card, a media band on top, the body under it — one card per path.
 * The band is white with the path's brand illustration where an article card has its photo. */
.mega__services { display: grid; grid-template-columns: repeat(var(--svc-cols, 4), minmax(0, 1fr)); gap: var(--space-2); align-items: stretch; }
.mega__services .mega__allcard { grid-column: 1 / -1; margin: var(--space-1) 0 0; }
.svc { display: grid; grid-template-rows: auto 1fr; padding: var(--space-1); border-radius: 14px; background: var(--iz-sunk); transition: background-color var(--iz-dur-2) var(--iz-ease); }
.svc__media { display: grid; place-items: center; aspect-ratio: 16 / 7; border-radius: 9px; background: var(--color-surface); color: var(--secondary-700); }
.svc__media .fa-solid { font-size: var(--iz-icon-2xl); }
.svc__media .svc__art { font-size: calc(var(--icon-xl) * 1.5); color: var(--secondary-600); transition: transform 600ms var(--iz-ease-out); }
.svc__body { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2) var(--space-1) var(--space-0); }
.svc__title { display: inline-flex; align-items: center; align-self: start; min-height: 24px; border-radius: 6px; color: var(--color-heading); font: 600 var(--text-body-s-size)/var(--text-micro-lh) var(--font-body); text-decoration: none; transition: color var(--iz-dur-1) var(--iz-ease); }
.svc__desc { color: var(--iz-ink-soft); font: var(--text-caption); }
.svc__links { display: grid; gap: 2px; margin: var(--space-0) 0 0; padding: 0; list-style: none; }
.svc__links a { display: flex; align-items: center; gap: var(--gap-inline); min-height: 32px; padding: var(--space-0) var(--space-1); margin-inline: calc(-1 * var(--space-1)); border-radius: 8px; color: var(--color-text); font: 500 var(--text-caption-size)/var(--text-micro-lh) var(--font-body); text-decoration: none; transition: background-color var(--iz-dur-1) var(--iz-ease), color var(--iz-dur-1) var(--iz-ease); }
.svc__links a .fa-solid { flex: none; font-size: var(--iz-icon-xs); color: var(--secondary-500); }
.svc__more { display: inline-flex; align-items: center; align-self: start; gap: var(--gap-inline); min-height: 28px; margin-top: auto; padding-top: var(--space-0); border-radius: 6px; color: var(--secondary-700); font: var(--text-button-s); text-decoration: none; }
.svc__more .fa-solid { font-size: var(--iz-icon-xs); transition: transform var(--iz-dur-2) var(--iz-ease-out); }
@media (hover: hover) and (pointer: fine) {
	.svc:hover { background: var(--secondary-50); }
	.svc:hover .svc__media .svc__art { transform: scale(1.06); }
	.svc__title:hover { color: var(--secondary-800); }
	.svc__links a:hover { background: var(--color-surface); color: var(--color-heading); }
	.svc__more:hover .fa-solid { transform: translateX(-3px); }
}

/* ---- blog: categories (start/right), three article cards (end/left) spanning both rows */
.mega__blog { display: grid; grid-template-columns: 260px 1fr; grid-template-rows: 1fr auto; gap: 0 var(--space-5); align-items: start; }
.mega__blog .mposts { grid-column: 2; grid-row: 1 / span 2; align-self: start; align-content: start; } /* cards take the height their content needs (owner, 2026-10-01), not the topic column's */
.mega__blog .mega__allcard { grid-column: 1; grid-row: 2; align-self: end; margin: var(--space-1) 0 0; padding: var(--space-1) var(--space-2); gap: var(--space-1); }
.mega__blog .mega__allcard-text span { display: none; }
.mcats { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.mcats__item { display: flex; align-items: center; gap: var(--gap-inline); padding: var(--space-1) var(--space-2); border-radius: 12px; color: var(--color-heading); font: 600 var(--text-caption-size)/var(--text-micro-lh) var(--font-body); text-decoration: none; transition: background-color var(--iz-dur-1) var(--iz-ease); }
.mcats__item small { margin-inline-start: auto; color: var(--iz-ink-soft); font: var(--text-micro-weight) var(--text-micro-size)/var(--text-button-lh) var(--font-body); }
.mcats__item .fa-solid { font-size: var(--iz-icon-s); color: var(--secondary-600); }
.mcats__item.is-active { background: var(--iz-sunk); }
.mposts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.mpost { display: grid; grid-template-rows: auto 1fr; gap: 0; padding: var(--space-1); border-radius: 14px; background: var(--iz-sunk); color: inherit; text-decoration: none; transition: background-color var(--iz-dur-2) var(--iz-ease), opacity var(--iz-dur-2) var(--iz-ease-out), transform var(--iz-dur-2) var(--iz-ease-out); }
.mpost__media { position: relative; aspect-ratio: 16 / 10; border-radius: 9px; overflow: hidden; background: var(--secondary-100); }
.mpost__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--iz-ease-out); }
/* the topic rides on the image, so the text block below is only title and meta */
.mpost__cat { position: absolute; inset-inline-start: var(--space-1); bottom: var(--space-1); padding: var(--pad-chip-y) var(--space-1); border-radius: 999px; background: rgb(255 255 255 / .92); color: var(--secondary-800); font: 600 var(--text-micro-size)/var(--text-micro-lh) var(--font-body); }
.mpost__body { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2) var(--space-1) var(--space-0); }
.mpost__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--color-heading); font: var(--text-button-weight) var(--text-button-size)/var(--text-caption-lh) var(--font-body); transition: color var(--iz-dur-1) var(--iz-ease); }
.mpost__meta { display: flex; align-items: center; gap: var(--space-0); margin-top: auto; color: var(--iz-ink-soft); font: 400 var(--text-micro-size)/var(--text-micro-lh) var(--font-body); }
.mpost__meta .fa-solid { font-size: var(--iz-icon-2xs); }
.mpost__meta .fa-arrow-left { margin-inline-start: auto; font-size: var(--iz-icon-xs); color: var(--secondary-700); opacity: 0; transform: translateX(4px); transition: opacity var(--iz-dur-1) var(--iz-ease), transform var(--iz-dur-2) var(--iz-ease-out); }
.mposts.is-swapping .mpost { opacity: 0; transform: translateY(3px); transition: none; }
.mposts__set[hidden] { display: none; }
.mposts__set { display: contents; }
@media (hover: hover) and (pointer: fine) {
	.mpost:hover { background: var(--secondary-50); }
	.mpost:hover .mpost__media img { transform: scale(1.04); }
	.mpost:hover .mpost__title { color: var(--secondary-800); }
	.mpost:hover .mpost__meta .fa-arrow-left { opacity: 1; transform: none; }
}

/* The page dims a little under an open megamenu, so the sheet reads as in front of it. */
.mega-scrim {
	position: absolute;
	inset-inline: 0;
	top: 100%;
	height: 100vh;
	z-index: 39;
	background: rgb(20 46 55 / .18);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--iz-dur-2) var(--iz-ease), visibility 0s linear var(--iz-dur-2);
}
.site-header.has-mega .mega-scrim { opacity: 1; visibility: visible; transition: opacity var(--iz-dur-3) var(--iz-ease-out), visibility 0s; }

/* ---- dropdowns: the mini cart and the account menu */
.hdr-pop { position: relative; }
.hdr-pop[hidden] { display: none; }
.hdr-drop {
	position: absolute;
	top: calc(100% + var(--space-2));
	inset-inline-end: 0;
	z-index: 42;
	width: 340px;
	max-width: calc(100vw - 2 * var(--space-2));
	padding: var(--space-1);
	border-radius: 16px;
	background: var(--color-surface);
	box-shadow: 0 0 0 1px var(--iz-line-soft), 0 24px 48px -12px rgb(from var(--primary-900) r g b / .2);
	opacity: 0;
	transform: translateY(-6px) scale(.98);
	transform-origin: top left;
	transition: opacity var(--iz-dur-1) var(--iz-ease), transform var(--iz-dur-1) var(--iz-ease);
}
.hdr-drop.is-open { opacity: 1; transform: none; transition: opacity var(--iz-dur-2) var(--iz-ease-out), transform var(--iz-dur-3) var(--iz-ease-out); }
.hdr-drop::before { content: ""; position: absolute; inset-inline: 0; bottom: 100%; height: 14px; }
/* The head's inline padding is a row's, so the title starts where the rows' content does. */
.hdr-drop__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-1); }
.hdr-drop__head p { margin: 0; color: var(--color-heading); font: 600 var(--text-body-s-size)/var(--text-body-s-lh) var(--font-body); }

/* account menu */
.acct-drop { width: 280px; }
.acct-drop__who { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-0); padding: var(--space-2); border-radius: 12px; background: var(--iz-sunk); }
.acct-drop__who p { display: grid; gap: 2px; min-width: 0; margin: 0; }
.acct-drop__who b { overflow: hidden; color: var(--color-heading); font: 600 var(--text-body-s-size)/var(--text-body-s-lh) var(--font-body); text-overflow: ellipsis; white-space: nowrap; }
.acct-drop__who span { color: var(--iz-ink-soft); font: var(--text-micro); }
.acct-drop__group { display: grid; margin: 0; padding: var(--space-0) 0; list-style: none; }
.acct-drop__group + .acct-drop__group { border-top: 1px solid var(--iz-line-soft); }
.acct-drop__group a, .acct-drop__out {
	display: flex;
	align-items: center;
	gap: var(--gap-inline);
	min-height: 40px;
	padding: 0 var(--space-2);
	border-radius: 10px;
	color: var(--color-text);
	font: 500 var(--text-caption-size)/var(--text-caption-lh) var(--font-body);
	text-decoration: none;
	transition: background-color var(--iz-dur-1) var(--iz-ease), color var(--iz-dur-1) var(--iz-ease);
}
.acct-drop__group a .fa-solid, .acct-drop__out .fa-solid { font-size: var(--iz-icon-m); color: var(--iz-ink-soft); transition: color var(--iz-dur-1) var(--iz-ease); }
.acct-drop__group a[aria-current="page"] { background: var(--iz-sunk); color: var(--color-heading); font-weight: 600; }
.acct-drop__group a[aria-current="page"] .fa-solid { color: var(--secondary-600); }
.acct-drop__out { margin-top: var(--space-0); border-top: 1px solid var(--iz-line-soft); border-radius: 0 0 10px 10px; padding-top: var(--space-0); color: var(--color-error, #b3261e); }
.acct-drop__out .fa-solid { color: inherit; }
.hdr-drop a:focus-visible, .hdr-drop button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus-ring); }
@media (hover: hover) and (pointer: fine) {
	.acct-drop__group a:hover { background: var(--iz-sunk); color: var(--color-heading); }
	.acct-drop__group a:hover .fa-solid { color: var(--secondary-600); }
	.acct-drop__out:hover { background: rgb(179 38 30 / .06); }
}

/* mini cart */
.mini-cart { width: 360px; }
.mini-cart__body { transition: opacity var(--iz-dur-2) var(--iz-ease); }
.mini-cart__body[aria-busy="true"] { opacity: .55; pointer-events: none; }
.mini-cart__notice {
	display: flex;
	align-items: center;
	gap: var(--gap-inline);
	margin: 0 0 var(--space-1);
	padding: var(--space-1) var(--space-2);
	border-radius: 12px;
	background: var(--surface-green);
	color: var(--secondary-800);
	font: 500 var(--text-caption-size)/var(--text-caption-lh) var(--font-body);
	animation: iz-notice-in var(--iz-dur-3) var(--iz-ease-out);
}
.mini-cart__notice .fa-solid { flex: none; font-size: var(--iz-icon-m); color: var(--secondary-600); }
.mini-cart__notice.is-error { background: rgb(179 38 30 / .07); color: #8c1d18; }
@keyframes iz-notice-in { from { opacity: 0; transform: translateY(-4px); } }
.mini-cart__lines { display: grid; max-height: min(320px, 50vh); margin: 0; padding: 0; overflow-y: auto; list-style: none; overscroll-behavior: contain; }
.mini-cart__line {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-1);
	border-radius: 12px;
	transition: background-color var(--iz-dur-1) var(--iz-ease), opacity var(--iz-dur-2) var(--iz-ease), transform var(--iz-dur-2) var(--iz-ease);
}
.mini-cart__line.is-leaving { opacity: 0; transform: translateX(-12px); }
.mini-cart__thumb { flex: none; width: 52px; height: 52px; border-radius: 10px; object-fit: cover; background: var(--iz-sunk); }
.mini-cart__text { flex: 1; display: grid; gap: var(--gap-title); min-width: 0; }
.mini-cart__text b { display: -webkit-box; overflow: hidden; color: var(--color-heading); font: 600 var(--text-caption-size)/var(--text-caption-lh) var(--font-body); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mini-cart__price { color: var(--iz-ink-soft); font: 500 var(--text-caption-size)/var(--text-number-lh) var(--font-body); font-variant-numeric: tabular-nums; }
.mini-cart__remove {
	position: relative;
	display: grid;
	place-items: center;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	color: var(--iz-ink-soft);
	transition: background-color var(--iz-dur-1) var(--iz-ease), color var(--iz-dur-1) var(--iz-ease);
}
/* The same transparent apron the header buttons have: a 44px target, a 36px box. */
.mini-cart__remove::after { content: ""; position: absolute; inset: calc(-1 * var(--space-0)); }
.mini-cart__remove .fa-solid { font-size: var(--iz-icon-m); }
.mini-cart__foot { display: grid; gap: var(--space-1); margin-top: var(--space-1); padding: var(--space-2) var(--space-1) var(--space-0); border-top: 1px solid var(--iz-line-soft); }
.mini-cart__total { display: flex; align-items: center; justify-content: space-between; margin: 0 0 var(--space-0); color: var(--iz-ink-soft); font: 500 var(--text-caption-size)/var(--text-caption-lh) var(--font-body); }
.mini-cart__total b { color: var(--color-heading); font: var(--text-number-s); font-variant-numeric: tabular-nums; }
.mini-cart__note { margin: 0; color: var(--iz-ink-soft); font: var(--text-micro); text-align: center; }
.mini-cart__empty { display: grid; justify-items: center; gap: var(--space-stack); padding: var(--space-4) var(--space-2) var(--space-3); text-align: center; }
.mini-cart__empty-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--iz-sunk); color: var(--iz-ink-soft); font-size: var(--iz-icon-xl); }
.mini-cart__empty p { display: grid; gap: var(--gap-title); margin: 0; }
.mini-cart__empty b { color: var(--color-heading); font: 600 var(--text-body-s-size)/var(--text-body-s-lh) var(--font-body); }
.mini-cart__empty span { color: var(--iz-ink-soft); font: var(--text-caption); }
@media (hover: hover) and (pointer: fine) {
	.mini-cart__line:hover { background: var(--iz-sunk); }
	.mini-cart__remove:hover { background: rgb(179 38 30 / .08); color: #b3261e; }
}

/* A cart link being added through AJAX shows it is working. */
a.is-adding { pointer-events: none; opacity: .7; }

/* ---- breakpoints */
@media (max-width: 1023px) {
	.primary-nav { display: none; }
	.site-header__menu { display: grid; }
	.site-header__bar { gap: var(--space-1); min-height: 64px; }
	.site-branding { margin-inline-start: var(--space-0); }
	.hdr-btn__label, .hdr-btn--account .hdr-btn__caret { display: none; }
	.hdr-btn--account { padding: 0; width: 40px; box-shadow: none; }
	/* Below the primary nav's breakpoint the auth button shows its label and drops its icon —
	 * the burger already carries the icon-only affordance, so the CTA reads as words. */
	.hdr-btn--auth .fa-solid { display: none; }
	.hdr-btn--auth { padding-inline: var(--space-2); }
}
@media (max-width: 767px) {
	.site-header__bar { min-height: 56px; }
	.site-header__search { display: none; }
	.site-branding img, .site-branding .custom-logo { max-height: 32px; width: auto; }
	/* A dropdown on a phone is a sheet under the bar, the screen's width less a gutter. */
	.hdr-pop { position: static; }
	.hdr-drop { inset-inline: var(--space-3); width: auto; top: calc(100% + var(--space-1)); transform-origin: top center; }
}

/* ------------------------------------------------------------------ side panel */
/* A sheet, rebuilt 2026-09-26 (decisions.md; markup in template-parts/chrome/panel.php). One idea per
 * band, top to bottom: the logo and close; who you are; search; five pages as a plain list; three
 * offerings as a quieter row of grey tiles; and, pinned, the one green thing the menu wants noticed.
 * Inner surfaces are white or --iz-sunk only — the tinted tiles it had were against the owner's
 * direction of 2026-09-19. */
/* The page under the sheet does not scroll. (Not `scrollbar-gutter: stable` to stop the page behind
 * re-centring by half a desktop scrollbar as it opens: the gutter also moves the fixed sheet in off
 * the screen edge, leaving a 15px grey strip beside it — measured 2026-09-26, and worse.) */
html:has(.site-panel:popover-open), html:has(.site-panel.is-open) { overflow: hidden; }

.site-panel {
	position: fixed;
	inset-block: 0;
	/* The inline-start edge: the right, in this RTL-only site — the side the header's logo is on. */
	inset-inline: 0 auto;
	z-index: 100;
	/* 88% of the viewport leaves a strip of page to tap to close; 400px is enough for any label and
	 * keeps the lines of a wide screen from running long. `%` rather than `vw`: a fixed box resolves
	 * it against the viewport without a scrollbar in it. */
	width: min(88%, 400px);
	height: auto;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--iz-sunk);
	color: var(--color-text);
	/* The second shadow is a 32px strip of the sheet's own grey past its outer (screen) edge. It is
	 * off-screen, except while a finger pulls the sheet the wrong way: chrome.js lets it give by at
	 * most 24px, damped, and this fills what would otherwise be a gap of page at the screen edge. */
	box-shadow: -16px 0 48px rgb(from var(--primary-900) r g b / .16), 32px 0 0 var(--iz-sunk);
	display: none;
	flex-direction: column;
	overflow: hidden;
	/* The list scrolls vertically inside the sheet; a sideways drag is chrome.js's, to close it. The
	 * rule is repeated on the body's children below because Chrome turns every pan back on for the
	 * contents of a scroll container — without it, a sideways drag over the list was taken by the
	 * browser (pointercancel after the first move) and the sheet never followed the finger. */
	touch-action: pan-y pinch-zoom;
	/* `transform` has no logical form, so this says "off the right edge" outright. Closing is quicker
	 * than opening (220 against 380ms) and on an ease-out, never an ease-in. */
	transform: translateX(100%);
	transition: transform 220ms var(--iz-ease-out), overlay 220ms allow-discrete, display 220ms allow-discrete;
}
/* Two rules, not one list: a browser without :popover-open drops the whole rule it appears in. */
.site-panel.is-open { display: flex; transform: none; transition: transform 380ms var(--iz-ease-drawer), overlay 380ms allow-discrete, display 380ms allow-discrete; }
.site-panel:popover-open { display: flex; transform: none; transition: transform 380ms var(--iz-ease-drawer), overlay 380ms allow-discrete, display 380ms allow-discrete; }
@starting-style {
	.site-panel:popover-open { transform: translateX(100%); }
	.site-panel.is-open { transform: translateX(100%); }
}
/* chrome.js sets the transform inline while a finger drags the sheet (and the release transition
 * inline for the spring back); this only keeps the drag from selecting the text under it and from
 * lighting a row's press state as the finger crosses it. */
.site-panel.is-dragging { user-select: none; -webkit-user-select: none; }
.site-panel.is-dragging :is(a, button):active { transform: none; }

/* A plain scrim, no blur: a backdrop-filter over a whole page is the most expensive thing a phone
 * can be asked to animate, and the sheet is what is being read, not what is behind it. */
.site-panel::backdrop {
	background: rgb(20 46 55 / 0);
	transition: background-color 220ms var(--iz-ease-out), overlay 220ms allow-discrete, display 220ms allow-discrete;
}
.site-panel:popover-open::backdrop { background: rgb(20 46 55 / .36); transition-duration: 320ms, 380ms, 380ms; }
@starting-style {
	.site-panel:popover-open::backdrop { background: rgb(20 46 55 / 0); }
}
/* The fallback's scrim, for browsers without popover. */
.site-panel-scrim { position: fixed; inset: 0; z-index: 99; background: rgb(20 46 55 / .36); }

/* ---- v4 drawer (2026-09-27, wireframes/prototypes/header-v4.html): the sheet is the sunk grey,
 * every block on it a white card. Head: logo, search toggle, close. */
.site-panel__head {
	display: flex;
	align-items: center;
	gap: var(--space-0);
	flex: none;
	min-height: 64px;
	padding-inline: var(--space-4) var(--space-2);
}
.site-panel__logo { display: block; margin-inline-end: auto; }
.site-panel__logo img { display: block; width: 108px; height: auto; }
.site-panel__btn {
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: var(--color-heading);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color var(--iz-dur-1) var(--iz-ease), transform var(--iz-dur-1) var(--iz-ease-out);
}
.site-panel__btn .fa-solid { font-size: var(--iz-icon-l); }
.site-panel__btn[aria-expanded="true"], .site-panel__btn:active { background: var(--color-surface); }
.site-panel :is(a, button, input):focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus-ring); }
@media (hover: hover) and (pointer: fine) { .site-panel__btn:hover { background: var(--color-surface); } }

/* ---- body: the one part that scrolls */
.site-panel__body {
	flex: 1;
	/* A one-column grid so the blocks are parted by `gap`, not by margins on each of them. Rows are
	 * `max-content`: the rows card clips its own overflow, so an `auto` row would let this box, whose
	 * height is fixed, squeeze the card instead of scrolling. */
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-auto-rows: max-content;
	align-content: start;
	gap: var(--gap-list);
	min-height: 0;
	padding: var(--space-0) var(--space-2) var(--space-3);
	overflow-y: auto;
	overscroll-behavior: contain;
}
/* Hidden for every pointer, not only touch: a mouse's 15px bar beside an expanded group read as a second scrollbar. The body still scrolls by wheel, trackpad, touch and keyboard. */
.site-panel__body { scrollbar-width: none; }
.site-panel__body::-webkit-scrollbar { display: none; }
.site-panel__body > * { touch-action: pan-y pinch-zoom; }

/* ---- search: hidden until the head's button, then a field with the keyboard already in it */
/* The field is the kit's `.iz-search` (input plus a real submit at the inline end); the panel only
 * lets it fill the row. */
.site-panel__search .iz-search { flex: none; }

/* ---- the «you» card */
.site-panel__me {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2);
	border-radius: 14px;
	background: var(--color-surface);
	color: inherit;
	text-decoration: none;
	box-shadow: 0 1px 2px rgb(from var(--primary-700) r g b / .05);
	transition: transform var(--iz-dur-1) var(--iz-ease-out);
}
.site-panel__me:active { transform: scale(var(--iz-press-lg)); }
.site-panel__avatar {
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--secondary-100);
	color: var(--secondary-800);
	font: var(--text-button-s);
}
.site-panel__avatar .fa-solid { font-size: var(--iz-icon-l); }
.site-panel__me-text { display: grid; min-width: 0; }
.site-panel__me-text b { overflow: hidden; color: var(--color-heading); font: 600 var(--text-button-size)/var(--text-caption-lh) var(--font-body); text-overflow: ellipsis; white-space: nowrap; }
.site-panel__me-text span { color: var(--iz-ink-soft); font: 400 var(--text-micro-size)/var(--text-micro-lh) var(--font-body); }
.site-panel__me > .fa-arrow-left { margin-inline-start: auto; font-size: var(--iz-icon-m); color: var(--iz-ink-soft); }

/* ---- the rows card: one white card, rows parted by hairlines, a chevron square at the end */
.site-panel__card { border-radius: 14px; background: var(--color-surface); overflow: hidden; box-shadow: 0 1px 2px rgb(from var(--primary-700) r g b / .05); }
.pnav { display: grid; margin: 0; padding: 0; list-style: none; }
.pnav > li + li { border-top: 1px solid var(--iz-line-soft); }
.pnav__row {
	display: flex;
	align-items: center;
	gap: var(--gap-inline);
	width: 100%;
	min-height: 52px;
	padding-block: var(--space-1);
	padding-inline: var(--space-3) var(--space-2);
	border: 0;
	background: transparent;
	color: var(--color-heading);
	font: var(--text-button);
	text-align: start;
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color var(--iz-dur-1) var(--iz-ease);
}
.pnav__row > .fa-solid:first-child { flex: none; font-size: var(--iz-icon-m); color: var(--secondary-600); }
.pnav__row > span:not(.pnav__chev) { flex: 1; }
.pnav__row:active { background: var(--iz-sunk); }
.pnav__row[aria-current="page"] { color: var(--secondary-800); }
.pnav__count { flex: none; color: var(--iz-ink-soft); font: var(--text-micro-weight) var(--text-micro-size)/1 var(--font-body); }
.pnav__chev {
	display: grid;
	place-items: center;
	flex: none;
	width: 30px;
	height: 30px;
	margin-inline-start: auto;
	border-radius: 9px;
	background: var(--iz-sunk);
	color: var(--iz-ink-soft);
	transition: transform var(--iz-dur-2) var(--iz-ease-out), background-color var(--iz-dur-1) var(--iz-ease);
}
.pnav__row .pnav__count + .pnav__chev { margin-inline-start: 0; }
.pnav__caret { font-size: var(--iz-icon-xs); }
.pnav__toggle[aria-expanded="true"] .pnav__chev { transform: rotate(180deg); background: var(--secondary-100); color: var(--secondary-800); }

/* the expanded region: a grey inset, animated with grid rows so no height is measured */
.pnav__sub { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--iz-dur-3) var(--iz-ease-out); }
.pnav__sub.is-collapsing, .pnav__sub.is-expanding-start { grid-template-rows: 0fr; }
.pnav__sub > ul { display: grid; gap: var(--space-1); min-height: 0; overflow: hidden; margin: 0; padding: var(--space-0) var(--space-2) var(--space-2); list-style: none; background: var(--color-surface); }
.pnav__sub .pnav__icon { background: var(--iz-sunk); }
.pnav__item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-1) var(--space-2);
	border: 1px solid color-mix(in srgb, var(--iz-line-soft) 55%, transparent);
	border-radius: 10px;
	color: inherit;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}
.pnav__item:active { background: var(--secondary-100); }
.pnav__item img { flex: none; width: 44px; height: 44px; border-radius: 9px; object-fit: cover; background: var(--secondary-100); }
.pnav__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 11px; background: var(--color-surface); color: var(--secondary-700); }
.pnav__icon .fa-solid { font-size: var(--iz-icon-l); }
.pnav__text { display: grid; min-width: 0; }
.pnav__text b { overflow: hidden; color: var(--color-heading); font: 600 var(--text-caption-size)/var(--text-caption-lh) var(--font-body); text-overflow: ellipsis; white-space: nowrap; }
.pnav__text span { color: var(--iz-ink-soft); font: 400 var(--text-micro-size)/var(--text-micro-lh) var(--font-body); }
.pnav__item[aria-current="page"] b { color: var(--secondary-800); }
.pnav__all {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--gap-inline);
	min-height: 40px;
	margin-top: 0;
	border-radius: 10px;
	background: var(--iz-sunk);
	color: var(--secondary-700);
	font: var(--text-button-s);
	text-decoration: none;
}
.pnav__all .fa-solid { font-size: var(--iz-icon-xs); }
.pnav__sub2 { margin: 0; padding: 0 0 var(--space-0) var(--space-6); list-style: none; }
.pnav__sub2 a { display: block; padding: var(--space-1); color: var(--iz-ink-soft); font: 500 var(--text-caption-size)/var(--text-eyebrow-lh) var(--font-body); text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
	.pnav__row:hover { background: var(--secondary-100); }
	.pnav__item:hover, .pnav__all:hover { background: var(--secondary-100); }
	.pnav__item:hover { border-color: var(--secondary-200); }
	.pnav__item:hover .pnav__icon { background: var(--color-surface); }
}

/* ---- foot: pinned, so the booking action is never under the fold */
.site-panel__foot {
	flex: none;
	padding: var(--space-2) var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom));
	background: var(--iz-sunk);
	border-top: 1px solid var(--iz-line-soft);
}
.site-panel__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--gap-inline);
	height: 48px;
	border-radius: 12px;
	background: var(--iz-cta);
	color: #fff;
	font: var(--text-button);
	text-decoration: none;
	transition: background-color var(--iz-dur-1) var(--iz-ease);
}
.site-panel__cta .fa-solid { font-size: var(--iz-icon-m); }
.site-panel__cta:active { background: var(--iz-cta-active); }
.site-panel__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-inline); margin-top: var(--space-1); }
.site-panel__meta:not(:has(.site-panel__socials)) { justify-content: center; }
.site-panel__contact {
	display: inline-flex;
	align-items: center;
	gap: var(--gap-inline);
	min-height: 44px;
	padding: var(--space-0);
	color: var(--iz-ink-soft);
	font: 500 var(--text-caption-size)/1 var(--font-body);
	text-decoration: none;
}
.site-panel__contact .fa-solid { font-size: var(--iz-icon-s); }
/* 36px squares 8px apart, each with a 4px apron: 44px targets that meet and do not overlap. */
.site-panel__socials { display: flex; gap: var(--gap-inline); }
.site-panel__socials a::after { content: ""; position: absolute; inset: calc(-1 * var(--space-0)); }
.site-panel__socials a { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--color-surface); color: var(--iz-ink-soft); text-decoration: none; }
.site-panel__socials .fa-solid { font-size: var(--iz-icon-m); }
@media (hover: hover) and (pointer: fine) { .site-panel__contact:hover, .site-panel__socials a:hover { color: var(--secondary-700); } }


/* The head and foot draw their hairlines only while there is something under them: the head's
 * once the list has scrolled, the foot's until it reaches the end. A sheet whose content fits —
 * most of them — shows neither. Without scroll-driven animations both lines simply stay drawn. */
@supports (animation-timeline: scroll()) {
	.site-panel { timeline-scope: --iz-panel-scroll; }
	.site-panel__body { scroll-timeline: --iz-panel-scroll block; }
	.site-panel__head { animation: iz-panel-head linear both; animation-timeline: --iz-panel-scroll; animation-range: 0 16px; }
	.site-panel__foot { box-shadow: none; animation: iz-panel-foot linear both; animation-timeline: --iz-panel-scroll; animation-range: calc(100% - 16px) 100%; }
	@keyframes iz-panel-head { from { box-shadow: 0 1px 0 transparent; } to { box-shadow: 0 1px 0 var(--iz-line-soft); } }
	@keyframes iz-panel-foot { from { box-shadow: 0 -1px 0 var(--iz-line-soft); } to { box-shadow: 0 -1px 0 transparent; } }
}
@supports not (animation-timeline: scroll()) {
	.site-panel__head { box-shadow: 0 1px 0 var(--iz-line-soft); }
}

@media (max-width: 767px) {
	/* The header's own height and gutter, and its logo's size: the sheet opens over the header, and
	 * the mark does not move while it does. */
	.site-panel__head { min-height: 56px; padding-inline: var(--space-3) var(--space-1); }
	.site-panel__logo img { width: 96px; }
}

/* Rows settle in 32ms apart as the sheet arrives — on the way in only. On the way out nothing
 * moves: they wait, still visible, until the sheet is gone, then reset for next time. */
.site-panel .site-panel__cascade { opacity: 0; transform: translateX(12px); transition: opacity 0s linear 220ms, transform 0s linear 220ms; }
.site-panel:popover-open .site-panel__cascade { opacity: 1; transform: none; transition: opacity 240ms var(--iz-ease-out), transform 300ms var(--iz-ease-out); transition-delay: calc(70ms + var(--i, 0) * 32ms); }
.site-panel.is-open .site-panel__cascade { opacity: 1; transform: none; transition: opacity 240ms var(--iz-ease-out), transform 300ms var(--iz-ease-out); transition-delay: calc(70ms + var(--i, 0) * 32ms); }
/* The rows were display:none a moment ago, so they have no "before" to transition from. */
@starting-style {
	.site-panel:popover-open .site-panel__cascade { opacity: 0; transform: translateX(12px); }
	.site-panel.is-open .site-panel__cascade { opacity: 0; transform: translateX(12px); }
}

/* ------------------------------------------------------------------ footer */
/* v3.1, 2026-09-30 (decisions.md): a brand-green band (`--secondary-600`, the CTA green one step
 * darker so small text passes AA) over a darker bottom strip (`--secondary-700`) — two tones of one
 * colour for depth instead of a picture or a glow. White 5.8:1 and --secondary-100 4.9:1 on the
 * band; 7.4 and 6.2:1 on the strip. Headings are small IRANSans labels with a short rule under
 * them; the support column is a translucent panel, the one focal point. No entrance motion: the
 * footer is seen on every page. */
.site-footer {
	position: relative;
	background: var(--secondary-600);
	color: var(--secondary-100);
	--footer-rule: rgb(255 255 255 / .16);
	/* White at .7 on the green. */
	--color-focus-ring: rgb(255 255 255 / .7);
}
.site-footer__inner { width: var(--chrome-width); margin-inline: auto; }
.site-footer ul { margin: 0; padding: 0; list-style: none; }

.site-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, .9fr) minmax(0, 1.2fr);
	gap: var(--space-6) var(--space-5);
	padding-block: var(--space-7) var(--space-6);
}

/* Brand */
.site-footer__brand { display: grid; align-content: start; justify-items: start; gap: var(--space-2); max-width: 38ch; }
.site-footer__logo { display: inline-block; margin-block-end: var(--space-2); border-radius: 6px; transition: opacity var(--iz-dur-1) var(--iz-ease); }
.site-footer__logo img { display: block; height: 56px; width: auto; }
.site-footer__who { display: grid; gap: var(--gap-title); margin: 0; }
.site-footer__who strong { color: #fff; font: var(--text-body); font-weight: 700; }
.site-footer__who span { color: var(--secondary-100); font: var(--text-caption); font-weight: 500; }
.site-footer__desc { margin: 0; color: var(--secondary-100); font: var(--text-caption); }
.site-footer__socials { display: flex; flex-wrap: wrap; gap: var(--gap-inline); margin: var(--space-1) 0 0; }

/* Column headings: a label with a short rule under it. The button is the phone accordion. */
.site-footer__col { display: grid; align-content: start; gap: var(--space-3); }
/* Doubled class: home.css sets every `body.home h2` in the display face. */
.site-footer .site-footer__heading { margin: 0; color: #fff; font: var(--text-eyebrow); }
.site-footer__heading-text { display: grid; justify-items: start; gap: var(--space-1); }
.site-footer__heading-text::after { content: ""; width: 20px; height: 2px; border-radius: 2px; background: var(--secondary-300); }
.site-footer__heading button { display: none; }

.site-footer__links { display: grid; gap: var(--space-0); }
.site-footer__links a, .site-footer__legal a {
	display: inline-flex;
	align-items: center;
	gap: var(--gap-inline);
	min-height: 32px;
	color: var(--secondary-100);
	font: var(--text-body-s);
	text-decoration: none;
	transition: color var(--iz-dur-1) var(--iz-ease), transform 140ms var(--iz-ease-out);
}
.site-footer__links--icons .fa-solid { width: 1.25em; color: var(--secondary-200); font-size: var(--iz-icon-s); }

/* Support: the one panel. */
.site-footer__reach {
	align-self: start;
	padding: var(--space-4);
	border: 1px solid var(--footer-rule);
	border-radius: var(--radius-card);
	background: rgb(255 255 255 / .06);
}
.site-footer__note { margin: 0; color: var(--secondary-100); font: var(--text-caption); }
.site-footer__cta { width: 100%; }
.site-footer__reach .site-footer__links { padding-block-start: var(--space-1); border-block-start: 1px solid var(--footer-rule); }

/* Bottom strip */
.site-footer__bottom { background: var(--secondary-700); padding-block: var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom)); }
.site-footer__bottom-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); }
.site-footer__copyright { margin: 0; color: var(--secondary-100); font: var(--text-caption); }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); }
.site-footer__legal a { font: var(--text-caption); }
.site-footer__top {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	margin-inline-start: auto;
	border-radius: 999px;
	color: var(--secondary-100);
	font: var(--text-caption);
	text-decoration: none;
	transition: color var(--iz-dur-1) var(--iz-ease), transform 140ms var(--iz-ease-out);
}
.site-footer__top-icon {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 1px solid rgb(255 255 255 / .3);
	border-radius: 50%;
	color: #fff;
	overflow: hidden;
	transition: border-color var(--iz-dur-1) var(--iz-ease), background-color var(--iz-dur-1) var(--iz-ease);
}
.site-footer__top-icon .fa-solid { font-size: var(--iz-icon-xs); transition: transform var(--iz-dur-2) var(--iz-ease-out); }

@media (hover: hover) and (pointer: fine) {
	.site-footer__links a:hover, .site-footer__legal a:hover, .site-footer__top:hover { color: #fff; }
	.site-footer__links a:hover { transform: translateX(-3px); }
	.site-footer__top:hover .site-footer__top-icon { border-color: rgb(255 255 255 / .55); background: rgb(255 255 255 / .1); }
	.site-footer__top:hover .fa-solid { transform: translateY(-2px); }
	.site-footer__logo:hover { opacity: .85; }
}
:is(.site-footer__links a, .site-footer__legal a, .site-footer__top):active { transform: scale(var(--iz-press)); }
.site-footer a:focus-visible, .site-footer__heading button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus-ring); border-radius: 6px; }
.site-footer__top:focus-visible { box-shadow: none; }
.site-footer__top:focus-visible .site-footer__top-icon { box-shadow: 0 0 0 3px var(--color-focus-ring); }

@media (max-width: 1023px) {
	.site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.site-footer__brand { grid-column: 1 / -1; max-width: 60ch; }
}
@media (max-width: 767px) {
	.site-footer__grid { grid-template-columns: 1fr; gap: 0; padding-block: var(--space-6) var(--space-5); }
	.site-footer__brand { padding-block-end: var(--space-4); }
	.site-footer__logo img { height: 48px; }
	/* One accordion per menu column (chrome.js hides each list below 768px until opened). */
	.site-footer__col--menu { gap: 0; border-block-end: 1px solid var(--footer-rule); }
	.site-footer__col--menu:first-of-type { border-block-start: 1px solid var(--footer-rule); }
	.site-footer__col--menu .site-footer__heading-text { display: none; }
	.site-footer__heading button {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		min-height: 56px;
		padding: 0;
		border: 0;
		background: transparent;
		color: #fff;
		font: inherit;
		cursor: pointer;
	}
	.site-footer__heading button .fa-solid { font-size: var(--iz-icon-xs); color: var(--secondary-200); transition: transform var(--iz-dur-2) var(--iz-ease-out); }
	.site-footer__heading button[aria-expanded="true"] .fa-solid { transform: rotate(180deg); }
	.site-footer__col--menu .site-footer__links { padding-block-end: var(--space-2); }
	.site-footer__links[hidden] { display: none; }
	.site-footer__links { gap: 0; }
	.site-footer__links a, .site-footer__legal a { min-height: 44px; }
	.site-footer__reach { margin-block-start: var(--space-5); }
	.site-footer__bottom-inner { gap: 0 var(--space-3); }
	.site-footer__legal { order: -1; flex-basis: 100%; }
	.site-footer__top-label { display: none; }
	.site-footer__top-icon { width: 44px; height: 44px; }
}

/* ------------------------------------------------------------------ back to top */
/* The floating button comes in once the page is long enough to need it and steps aside while the
 * footer's own «بازگشت به بالا» is on screen (chrome.js) — at 390px it used to sit on the legal
 * links. Leaving is quicker than arriving. */
.to-top {
	position: fixed;
	inset-block-end: calc(var(--space-4) + env(safe-area-inset-bottom));
	inset-inline-end: var(--space-4);
	z-index: 30;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 1px solid var(--color-border);
	border-radius: 12px;
	background: var(--color-surface);
	box-shadow: var(--shadow-card);
	color: var(--secondary-700);
	font-size: var(--iz-icon-l);
	text-decoration: none;
	opacity: 0;
	transform: translateY(12px) scale(.95);
	pointer-events: none;
	transition: opacity 160ms var(--iz-ease-out), transform 160ms var(--iz-ease-out), background-color 160ms var(--iz-ease);
}
.to-top.is-shown { opacity: 1; transform: none; pointer-events: auto; transition-duration: 220ms, 220ms, 160ms; }
.to-top.is-shown:active { transform: scale(var(--iz-press)); transition-duration: 160ms; }
.to-top:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus-ring); opacity: 1; transform: none; pointer-events: auto; }
@media (hover: hover) and (pointer: fine) { .to-top:hover { background: var(--secondary-50); } }
@media (max-width: 767px) {
	.to-top { inset-block-end: calc(var(--space-3) + env(safe-area-inset-bottom)); inset-inline-end: var(--space-3); }
	/* Course detail pages carry a fixed buy bar along the bottom on phones. */
	body.single-courses .to-top { bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* Back-to-top moves focus to the header without drawing a ring around the whole bar. */
#site-top:focus { outline: none; }

/* The fallback logo (no Customizer logo set): the vault's desktop-header version. */
.site-branding__logo { display: inline-flex; align-items: center; border-radius: 8px; }
.site-branding__logo img { display: block; height: 44px; width: auto; }
@media (max-width: 767px) { .site-branding__logo img { height: 38px; } }