/* ==========================================================================
   Yazan (Astra Child) — header (Comma Football style)
   A SOLID, sticky header that compresses on scroll, with a slim announcement bar
   above it. No transparent-over-hero mode. Pairs with header.js (adds `.yz-header`,
   toggles state, rotates the announcement) and inc/header.php (body flags + bar markup).
   Animates only transform / opacity / background / box-shadow → 60fps.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Announcement bar (Comma trait) — slim dark strip, scrolls away on its own.
   -------------------------------------------------------------------------- */
/* One rule set, two custom properties. The built-in variants below and the `custom` variant (which
   sets the same properties inline from the dashboard) both flow through these fallbacks, so the
   Black/Burgundy theme switcher keeps working: --yz-ink is remapped per theme in theme-options.php. */
.yazan .yz-announce {
	position: relative;
	background-color: var(--yz-announce-bg, var(--yz-ink));
	color: var(--yz-announce-fg, var(--yz-ivory));
	padding: 9px 16px;

	/* Travel distance for the HORIZONTAL slides. The vertical ones use a percentage instead: an item
	   is as wide as the container but only 15px tall, so "off-stage" is two very different distances
	   — a percentage on X would be a 1200px whoosh on a desktop and a 350px one on a phone.

	   Scaled by --yz-motion-intensity, which inc/enqueue.php has been printing on every page load
	   since it shipped with nothing reading it. This is its first consumer. A store that switches
	   its motion module off sets it to 0, so every slide degrades to a plain fade — a state the
	   owner can also reach deliberately by picking "Fade", and one the dashboard warns about rather
	   than letting them wonder. */
	--yz-announce-slide: calc(48px * var(--yz-motion-intensity, 1));
	--yz-announce-speed: var(--mo-med);
}
.yazan .yz-announce.is-speed-fast { --yz-announce-speed: var(--mo-fast); }
.yazan .yz-announce.is-speed-slow { --yz-announce-speed: var(--mo-slow); }

/* The value names the edge the message comes FROM: `is-anim-right` starts it to the right of centre
   and travels it left; the outgoing message continues on to the opposite side.

   ⚠️ PHYSICAL IN BOTH LTR AND RTL — A DELIBERATE DEPARTURE FROM THIS THEME'S CONVENTION.
   rtl.css §2 mirrors the theme's other directional transforms, and it is right to: an underline
   growing from the start of a word and a sheen sweeping in the reading direction both express a
   READING-ORDER relationship, and neither has a direction anybody chose. This one does — the store
   owner opened a dropdown and picked "Slide in from the right". Mirroring that under an Arabic
   locale would make a setting labelled "from the right" produce a slide from the left, with no UI
   anywhere to explain it. And the bar supports a bilingual mode where one strip carries both
   scripts and dir="rtl" sits on the ITEM, so there is no single reading direction to mirror
   against. translateX is physical by definition, so leaving RTL alone IS the implementation. */
.yazan .yz-announce.is-anim-right  { --yz-anim-x: var(--yz-announce-slide); }
.yazan .yz-announce.is-anim-left   { --yz-anim-x: calc(var(--yz-announce-slide) * -1); }
.yazan .yz-announce.is-anim-top    { --yz-anim-y: calc(-100% * var(--yz-motion-intensity, 1)); }
.yazan .yz-announce.is-anim-bottom { --yz-anim-y: calc(100% * var(--yz-motion-intensity, 1)); }
.yazan .yz-announce.is-style-agate {
	--yz-announce-bg: var(--yz-agate);
	--yz-announce-fg: var(--yz-ivory);
}
.yazan .yz-announce.is-style-gold {
	--yz-announce-bg: var(--yz-gold);
	--yz-announce-fg: var(--yz-ink);
}

/* The whole strip is the link target when the owner sets one. Colour is inherited so a variant
   change never leaves the copy in the browser's default blue. */
.yazan .yz-announce__link {
	display: block;
	color: inherit;
	text-decoration: none;
}
.yazan .yz-announce__link:hover,
.yazan .yz-announce__link:focus-visible {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Dismiss control — logical inset so it lands correctly in RTL, and a 44px hit area even though
   the glyph is small (WCAG 2.5.8 target size; the bar itself is only ~33px tall). */
.yazan .yz-announce__close {
	position: absolute;
	inset-inline-end: 4px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-size: 18px;
	line-height: 1;
	opacity: 0.55;
	cursor: pointer;
	transition: opacity var(--mo-fast, 150ms) var(--mo-ease-out, ease);
}
.yazan .yz-announce__close:hover,
.yazan .yz-announce__close:focus-visible {
	opacity: 1;
}
/* Keep the copy clear of the close button on narrow screens. */
.yazan .yz-announce.is-dismissible .yz-announce__inner,
.yazan .yz-announce.is-dismissible .yz-announce__track {
	padding-inline-end: 32px;
}
.yazan .yz-announce__track {
	position: relative;
	height: 15px;
	max-width: var(--yz-container);
	margin-inline: auto;
}

/* Clipping so a slide reads as a masked reveal rather than copy flying across the header — and so a
   rightward transform cannot extend the document's scrollable width and put a horizontal scrollbar
   on every page of the store.

   It goes on the TRACK, never on .yz-announce. The dismiss button is 44px tall inside a bar that is
   only 9 + 15 + 9 = 33px, so clipping the wrapper would quietly shave ~5.5px off each end of the
   WCAG 2.5.8 target the comment above it exists to guarantee — and because the glyph is centred,
   nothing would look wrong.

   Gated positively on the slide classes: markup without an `is-anim-*` class (a page cached by an
   older build, the countdown layout, someone else's copy of this markup) renders exactly as it did
   before this shipped.

   `overflow: hidden` first as the universal floor, then per-axis `clip` where it is understood. A
   horizontal slide has no business clipping vertically — that is what shaves the descenders off
   Arabic copy in a 15px line box and swallows the second line of a message that wrapped on a phone.
   `clip` is the only value that permits `visible` on the other axis; a browser that does not know it
   keeps the blunt `hidden`, which is a trimmed descender rather than a scrollbar.

   All four selectors below are written out at the SAME specificity so source order decides which
   wins. The floor was first written as `[class*="is-anim-"]:not(.is-anim-fade)`, which is a
   compound heavier than the per-axis rules — it silently beat them, and both axes computed to
   `hidden`. Verified in a real browser rather than by reading: `getComputedStyle(track).overflowY`
   must report `visible` for a horizontal slide. */
.yazan .yz-announce.is-anim-right .yz-announce__track,
.yazan .yz-announce.is-anim-left .yz-announce__track,
.yazan .yz-announce.is-anim-top .yz-announce__track,
.yazan .yz-announce.is-anim-bottom .yz-announce__track {
	overflow: hidden;
}
/* `clip` + `visible` is a combination CSS preserves as specified — the spec only rewrites a
   visible/clip value when the OTHER axis is neither of the two. That is what makes a one-axis clip
   expressible at all. */
.yazan .yz-announce.is-anim-right .yz-announce__track,
.yazan .yz-announce.is-anim-left .yz-announce__track {
	overflow-x: clip;
	overflow-y: visible;
}
.yazan .yz-announce.is-anim-top .yz-announce__track,
.yazan .yz-announce.is-anim-bottom .yz-announce__track {
	overflow-y: clip;
	overflow-x: visible;
}

.yazan .yz-announce__item {
	position: absolute;
	inset-inline: 0;
	top: 0;
	text-align: center;
	font-size: 12px;
	line-height: 15px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0;
	pointer-events: none;

	/* Kept as the floor beneath the animations: if the keyframes ever fail to resolve, the bar still
	   cross-fades instead of hard-cutting. A running animation always outranks a transition, so the
	   two never compete. */
	transition: opacity var(--mo-med) var(--mo-ease-out);

	/* Longhands, not the `animation:` shorthand: with a var() inside a shorthand, one failed
	   substitution invalidates the WHOLE declaration; with longhands a bad duration only zeroes the
	   duration. No animation-name here — an item carrying neither state class runs nothing, which is
	   what keeps the resting state free of any transform. */
	animation-duration: var(--yz-announce-speed, var(--mo-med));
	animation-timing-function: var(--mo-ease-out);
	animation-fill-mode: both;
}

/* `opacity: 1` is declared in its own right and NOT left to the animation's fill. That is what makes
   `animation: none` safe in the reduced-motion block at the end of this section — kill the animation
   without it and you kill the fill that was supplying the opacity, turning an accessibility
   preference into a blank bar. It is also why the worst case for a browser that chokes on var()
   inside @keyframes is "the bar does not animate", never "the bar is empty". */
.yazan .yz-announce__item.is-active {
	opacity: 1;
	pointer-events: auto;
	animation-name: yz-announce-in;
}
.yazan .yz-announce__item.is-leaving {
	animation-name: yz-announce-out;
}

/* Two keyframe blocks driven by custom properties, rather than eight that would be five-sixths
   identical — the shape that drifts the day someone retunes the easing on one direction and forgets
   the other seven. It also stops `fade` being a special case: fade is the slide with distance 0.
   The `, 0px` fallbacks are a free safety net — anything that fails to resolve becomes a pure fade,
   which is the default anyway. */
@keyframes yz-announce-in {
	from {
		opacity: 0;
		transform: translate(var(--yz-anim-x, 0px), var(--yz-anim-y, 0px));
	}
	to {
		opacity: 1;
		transform: translate(0, 0);
	}
}
@keyframes yz-announce-out {
	from {
		opacity: 1;
		transform: translate(0, 0);
	}
	to {
		opacity: 0;
		transform: translate(calc(var(--yz-anim-x, 0px) * -1), calc(var(--yz-anim-y, 0px) * -1));
	}
}

/* Promo layout — single message + live countdown (reference's shipping timer). */
.yazan .yz-announce--promo {
	padding-block: 7px;
}
.yazan .yz-announce__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 18px;
	max-width: var(--yz-container);
	margin-inline: auto;
}
.yazan .yz-announce__msg {
	font-size: 12px;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.yazan .yz-announce__countdown {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	/* Tabular figures so the seconds don't jitter the layout as they tick. */
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}
.yazan .yz-cd__seg {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	min-width: 26px;
	line-height: 1;
}
.yazan .yz-cd__num {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.04em;
}
.yazan .yz-cd__unit {
	margin-top: 2px;
	font-size: 8.5px;
	font-style: normal;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.62;
}
/* Thin separators between segments (skip before the first). */
.yazan .yz-cd__seg + .yz-cd__seg {
	position: relative;
}
.yazan .yz-cd__seg + .yz-cd__seg::before {
	content: ":";
	position: absolute;
	inset-inline-start: -6px;
	top: 1px;
	font-size: 13px;
	opacity: 0.4;
}
/* Avoid a flash of "00 00 00 00" before JS fills in real numbers. */
.yz-js .yazan .yz-announce__countdown:not(.is-ready) {
	visibility: hidden;
}
@media (max-width: 600px) {
	.yazan .yz-announce__msg {
		font-size: 10.5px;
		letter-spacing: 0.06em;
	}
	.yazan .yz-cd__num {
		font-size: 13px;
	}
	.yazan .yz-announce__inner {
		gap: 4px 12px;
	}
	/* ~40% shorter travel on a narrow screen, mirroring how motion.css shortens --mo-rise. */
	.yazan .yz-announce {
		--yz-announce-slide: calc(28px * var(--yz-motion-intensity, 1));
	}
}

/* The global blankets in motion.css and a11y.css already collapse every duration to 0.01ms. This
   removes the TRAVEL as well, so a slide cannot flash a message in from off-stage even for a frame,
   and drops the clipping since there is no longer anything to mask.

   `animation: none` is safe ONLY because `.is-active` declares `opacity: 1` in its own right. Kill
   the animation without that and you kill the fill that was providing the opacity — which is
   exactly the "an accessibility preference blanks the page" failure a11y.css warns about.

   Note the rotation itself also stops: header.js returns early under this preference and leaves the
   first message showing. That is deliberate and should not be "fixed" — the a11y.css doctrine of
   "make motion instant, never delete it" is about DECORATIVE motion, and this motion carries a
   change of content. A bar whose text silently swaps every few seconds with no animation is a worse
   WCAG 2.2.2 outcome than a bar that holds still. */
@media (prefers-reduced-motion: reduce) {
	.yazan .yz-announce__item {
		animation: none !important;
	}
	.yazan .yz-announce__track {
		overflow: visible !important;
	}
}

/* --------------------------------------------------------------------------
   2. Base header — shared transition + smart hide/show.
   -------------------------------------------------------------------------- */
.yazan .yz-header {
	transition: transform var(--mo-med) var(--mo-ease-inout),
	            background-color var(--mo-med) ease,
	            box-shadow var(--mo-med) ease;
	will-change: transform;
}
.yazan .yz-header.is-hidden { transform: translateY(-100%); }

/* --------------------------------------------------------------------------
   3. Storefront header — solid, light, sticky; compresses (shadow) on scroll.
   Swap --yz-header-bg to #F5F1E9 (ivory) or var(--yz-ink) for a dark bar.
   -------------------------------------------------------------------------- */
.yazan.yz-comma-header .yz-header,
.yazan.yz-comma-header .yz-header > .elementor,
.yazan.yz-comma-header .yz-header .elementor-top-section {
	background-color: var(--yz-header-bg);
}
.yazan.yz-comma-header .yz-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 999;
	border-block-end: 1px solid var(--yz-hairline);
}
/* Force ink text/icons over the light bar (the demo header ships white text with high
   specificity, so !important is the pragmatic brand override). */
.yazan.yz-comma-header .yz-header,
.yazan.yz-comma-header .yz-header a,
.yazan.yz-comma-header .yz-header .menu-item > a,
.yazan.yz-comma-header .yz-header .elementor-nav-menu .menu-item a,
.yazan.yz-comma-header .yz-header .site-title a,
.yazan.yz-comma-header .yz-header .ast-header-account-wrap,
.yazan.yz-comma-header .yz-header .wc-block-mini-cart__button,
/* Any generic builder element / HTML-or-text widget / cart total that the demo
   header ships as WHITE — colour it ink so it reads on the light bar. Only the
   wrapper's own colour is forced; descendants that set their own colour (e.g.
   the cart-count bubble on its coloured dot) keep theirs. */
.yazan.yz-comma-header .yz-header .ast-builder-layout-element,
.yazan.yz-comma-header .yz-header .ast-builder-html-element,
.yazan.yz-comma-header .yz-header .ast-header-woo-cart .ast-woo-header-cart-total,
.yazan.yz-comma-header .yz-header .ast-header-woo-cart .woocommerce-Price-amount {
	color: var(--yz-ink) !important;
}
.yazan.yz-comma-header .yz-header svg { fill: currentColor; }

/* ---------------------------------------------------------------------------
   THE ACTION CLUSTER — theme switcher · search · cart · account/avatar.
   These four sit together at the end of the bar and now read as one control
   group: --yz-header-action (wine on the light bar, ivory on burgundy; §4
   overrides it again for the solid checkout bar) with --yz-header-action-hover
   for the hover state. The nav menus and the cart subtotal stay ink (set above).

   Everything below exists because Astra's dynamic CSS writes colour DIRECTLY on
   the inner nodes — `color` on .ast-addon-cart-wrap, `fill` on the account
   glyph's own path/circle — and a direct declaration beats anything inherited
   from the wrapper. That is why the cart and the account icon stayed black in
   every theme, including the dark ones where they disappeared, while the search
   icon (whose wrapper IS the coloured node) followed the theme fine.

   Scoped to `.yazan .yz-header` — no header-flavour class — so the desktop bar,
   the mobile bar (#ast-mobile-header lives inside the same .yz-header) and the
   checkout bar all read the same token, and the token decides the colour.
   --------------------------------------------------------------------------- */

/* Search + account wrappers: colouring these tints their SVGs via currentColor
   (§3's `svg { fill: currentColor }`). The search input + placeholder keep their
   own ink colour, set in §10. */
.yazan .yz-header .ast-header-search,
.yazan .yz-header .ast-header-search .astra-search-icon,
.yazan .yz-header .ast-header-search .search-submit,
.yazan .yz-header .ast-header-account-wrap,
.yazan .yz-header .ast-header-account-wrap a {
	color: var(--yz-header-action) !important;
}

/* Account glyph (signed-out). Astra paints `fill` on the path/circle themselves —
   `currentColor` on the parent <svg> never reaches them — so this is the only rule
   that actually recolours the person icon. It outspecifies both Astra's rule and
   its transparent-header variant, so no !important is needed. */
.yazan .yz-header .ast-header-account-wrap .ast-header-account-type-icon .ahfb-svg-iconset svg path:not(.ast-hf-account-unfill),
.yazan .yz-header .ast-header-account-wrap .ast-header-account-type-icon .ahfb-svg-iconset svg circle {
	fill: var(--yz-header-action);
}

/* Avatar (signed-in) is a raster <img> from get_avatar(), so it cannot be tinted —
   it gets a themed ring instead. Two shadow layers: a gap in the bar's own ground,
   then the ring, so the ring still reads on the light bar where the avatar itself
   is a burgundy disc. box-shadow rather than outline, to leave the focus ring
   (a11y.css) as the only outline on this control. */
.yazan .yz-header .ast-header-account-type-avatar .avatar {
	border-radius: 100%;
	box-shadow: 0 0 0 2px var(--yz-header-bg), 0 0 0 4px var(--yz-header-action);
	transition: box-shadow var(--mo-fast) ease;
}

/* Cart icon + subtotal wrapper. */
.yazan .yz-header .ast-site-header-cart .ast-addon-cart-wrap,
.yazan .yz-header .ast-site-header-cart .ast-cart-menu-wrap {
	color: var(--yz-header-action);
}
/* Count bubble: `content: attr(data-cart-total)` on the icon (bag/basket layouts) or
   a .count element (the default layout). Fill it with the icon colour and flip the
   digit to the badge foreground so it stays legible in both directions. */
.yazan .yz-header .ast-site-header-cart .ast-addon-cart-wrap i.astra-icon::after,
.yazan .yz-header .ast-site-header-cart .ast-cart-menu-wrap .count {
	background-color: var(--yz-header-action);
	border-color: var(--yz-header-action);
	color: var(--yz-header-badge-fg);
}

/* Hover — Astra sends the cart to --ast-global-color-0 (#0084d6, the starter
   template's blue) and gives the account no hover at all. Both get the brand
   hover token, so the cluster reacts as one. */
.yazan .yz-header .ast-site-header-cart .ast-site-header-cart-li:hover .ast-addon-cart-wrap,
.yazan .yz-header .ast-site-header-cart .ast-site-header-cart-li:hover .ast-addon-cart-wrap .astra-icon,
.yazan .yz-header .ast-site-header-cart .ast-site-header-cart-li:hover .ast-cart-menu-wrap,
.yazan .yz-header .ast-site-header-cart .ast-site-header-cart-li:hover .ast-woo-header-cart-info-wrap,
.yazan .yz-header .ast-header-account-wrap:hover,
.yazan .yz-header .ast-header-account-wrap a:hover {
	color: var(--yz-header-action-hover) !important;
}
.yazan .yz-header .ast-site-header-cart .ast-site-header-cart-li:hover .ast-addon-cart-wrap i.astra-icon::after,
.yazan .yz-header .ast-site-header-cart .ast-site-header-cart-li:hover .ast-cart-menu-wrap .count {
	background-color: var(--yz-header-action-hover);
	border-color: var(--yz-header-action-hover);
	color: var(--yz-header-badge-fg);
}
/* Hover hangs off the WRAP, not off `a`: .ast-header-account-type-icon is a class on
   the anchor itself, so `a:hover .ast-header-account-type-icon` matches nothing. */
.yazan .yz-header .ast-header-account-wrap:hover .ast-header-account-type-icon .ahfb-svg-iconset svg path:not(.ast-hf-account-unfill),
.yazan .yz-header .ast-header-account-wrap:hover .ast-header-account-type-icon .ahfb-svg-iconset svg circle {
	fill: var(--yz-header-action-hover);
}
.yazan .yz-header .ast-header-account-wrap:hover .avatar {
	box-shadow: 0 0 0 2px var(--yz-header-bg), 0 0 0 4px var(--yz-header-action-hover);
}

/* Darken a white/monochrome logo so it reads on the light bar (body.yz-darken-logo). */
.yazan.yz-darken-logo .yz-header .custom-logo-link img,
.yazan.yz-darken-logo .yz-header .site-logo-img img,
.yazan.yz-darken-logo .yz-header .elementor-widget-theme-site-logo img,
.yazan.yz-darken-logo .yz-header .site-branding img {
	filter: brightness(0);
}
/* Compressed state: drop the hairline for a soft shadow. */
.yazan.yz-comma-header .yz-header.is-scrolled {
	border-block-end-color: transparent;
	box-shadow: 0 6px 24px rgba(20, 18, 16, 0.07);
}

/* Astra's "Transparent Header" pins #masthead with `position:absolute` and a transparent
   background via ID selectors (specificity 1,0,0) that outrank the `.yz-header` rules above
   (0,3,0) — so the header floats over the page and never sticks. Override with matching ID
   specificity (+ !important) so the Comma-style SOLID, STICKY bar wins site-wide. This also
   neutralises the leftover transparent-header mode the child theme explicitly doesn't want. */
.yazan.yz-comma-header #masthead,
.yazan.yz-solid-header #masthead {
	position: -webkit-sticky !important;
	position: sticky !important;
	inset-block-start: 0;
	left: auto;
	right: auto;
	z-index: 999;
}
.yazan.yz-comma-header #masthead {
	background-color: var(--yz-header-bg) !important; /* solid, not see-through */
}
.yazan.yz-solid-header #masthead {
	background-color: rgba(20, 18, 16, 0.98) !important;
}

/* --------------------------------------------------------------------------
   4. Checkout / cart header — solid dark, always legible (distraction-free).
   -------------------------------------------------------------------------- */
.yazan.yz-solid-header .yz-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 999;
	background-color: rgba(20, 18, 16, 0.98);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: 0 1px 0 rgba(245, 241, 233, 0.06);
}
.yazan.yz-solid-header .yz-header,
.yazan.yz-solid-header .yz-header a,
.yazan.yz-solid-header .yz-header .menu-item > a,
.yazan.yz-solid-header .yz-header .site-title a {
	color: var(--yz-ivory);
}
.yazan.yz-solid-header .yz-header svg { fill: currentColor; }
/* Dark bar → the action cluster inverts, exactly as it does under the burgundy
   theme. Overriding the tokens (rather than the rules) keeps §3 as the single place
   the cluster is painted. --yz-header-bg is redefined here only as the ground for the
   avatar ring's gap; declared on descendants, it cannot reach the bar's own
   background rule, which lives on .yz-header above these nodes. */
.yazan.yz-solid-header .yz-header .ast-site-header-cart,
.yazan.yz-solid-header .yz-header .ast-header-search,
.yazan.yz-solid-header .yz-header .ast-header-account-wrap {
	--yz-header-action: var(--yz-ivory);
	--yz-header-action-hover: var(--yz-gold);
	--yz-header-badge-fg: #141210;
	--yz-header-bg: #141210;
}
/* The dark bar was never visible on /cart/ (Agent 3, 2026-09-26). Astra's builder paints
   `.ast-primary-header-bar` (and the mobile `.main-header-bar`) WHITE from its own dynamic CSS, on top
   of #masthead's dark fill, while the rules above still turned the menu and icons ivory: on the black
   theme the nav, search and bag icon were ivory on white (axe color-contrast 1.12:1 on every /cart/
   view), and on burgundy the subtotal stayed ink on the dark bar. Let the bar show the masthead's
   dark ground, whiten the logo (header.css §5 forces it black with !important) and lift the subtotal
   to ivory, so the "solid dark, always legible" bar is what the shopper actually sees, in both themes. */
.yazan.yz-solid-header .yz-header .ast-primary-header-bar,
.yazan.yz-solid-header .yz-header .ast-mobile-header-wrap .main-header-bar,
.yazan.yz-solid-header .yz-header .ast-mobile-header-wrap .ast-primary-header-bar {
	background-color: transparent !important;
}
.yazan.yz-solid-header.yz-invert-logo .yz-header .custom-logo,
.yazan.yz-solid-header.yz-invert-logo .yz-header .custom-logo-link img,
.yazan.yz-solid-header.yz-invert-logo .yz-header .site-logo-img img {
	filter: brightness(0) invert(1) !important;
}
.yazan.yz-solid-header .yz-header .ast-header-woo-cart .ast-woo-header-cart-total,
.yazan.yz-solid-header .yz-header .ast-header-woo-cart .woocommerce-Price-amount {
	color: var(--yz-ivory) !important;
}

/* --------------------------------------------------------------------------
   5. Logo — entrance animation + shrink on scroll. Whiten only over a dark bar.
   Targets Astra's logo and HFE's Site Logo widget.
   -------------------------------------------------------------------------- */
.yazan .yz-header .custom-logo-link img,
.yazan .yz-header .site-logo-img img,
.yazan .yz-header .elementor-widget-theme-site-logo img,
.yazan .yz-header .site-branding img {
	transition: transform var(--mo-med) var(--mo-ease-out), filter var(--mo-med) ease;
	animation: yz-logo-in var(--mo-slow) var(--mo-ease-out) both;
	transform-origin: center;
	max-height: 46px;
	width: auto;
}

/* Render the YAZAN mark in BLACK (the source PNG is gold; brightness(0) recolours it to solid
   black while preserving its shape + transparency). Also overrides Astra's transparent-header
   logo tint. */
.yazan .yz-header .custom-logo,
.yazan .yz-header .custom-logo-link img,
.yazan .yz-header .site-logo-img img {
	filter: brightness(0) !important;
}
@keyframes yz-logo-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}
.yazan .yz-header.is-scrolled .custom-logo-link img,
.yazan .yz-header.is-scrolled .site-logo-img img,
.yazan .yz-header.is-scrolled .elementor-widget-theme-site-logo img,
.yazan .yz-header.is-scrolled .site-branding img {
	transform: scale(0.88);
}
/* Whiten a monochrome logo for the dark checkout bar (body.yz-invert-logo, see inc/header.php). */
.yazan.yz-invert-logo .yz-header .custom-logo-link img,
.yazan.yz-invert-logo .yz-header .site-logo-img img,
.yazan.yz-invert-logo .yz-header .elementor-widget-theme-site-logo img,
.yazan.yz-invert-logo .yz-header .site-branding img {
	filter: brightness(0) invert(1);
}

/* --------------------------------------------------------------------------
   6. Menu hover — hairline underline growing from the start edge (currentColor,
   so it inherits ink on the light bar / ivory on the dark bar). Base uppercase +
   tracking come from main.css.
   -------------------------------------------------------------------------- */
.yazan .yz-header .menu-item > a { position: relative; }
.yazan .yz-header .menu-item > a::after {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	bottom: 2px;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left; /* mirrored to right under [dir="rtl"] in rtl.css */
	transition: transform 300ms var(--mo-ease-out);
}
.yazan .yz-header .menu-item > a:hover::after,
.yazan .yz-header .menu-item.current-menu-item > a::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   8. Compact bar (Comma-style slim header).
   Astra drives the primary-bar height with 70px `min-height` on the bar and 70px
   `line-height`/`min-height` on the menu items and the cart/account items — NOT padding.
   Retarget those exact values to a slim ~56px strip (Comma-style). One knob: --yz-header-h.
   High specificity + !important overrides Astra's inline dynamic CSS.
   -------------------------------------------------------------------------- */
.yazan { --yz-header-h: 56px; }

/* The bar itself. */
.yazan .ast-primary-header-bar,
.yazan .ast-primary-header-bar .site-primary-header-wrap {
	min-height: var(--yz-header-h) !important;
}

/* Crowding guard. Astra lays the bar out as `grid-template-columns: auto auto`
   with `flex-wrap: nowrap` on both sections and no 1fr / min-width:0 anywhere,
   so once the logo + six tracked uppercase menu items + the icon cluster exceed
   the container the row simply overflows to the right. The account icon is the
   last child (and Astra gives it padding-right:0), so it is what gets shoved
   past the viewport edge — the header is full-bleed by design, which is kept,
   but "full-bleed" should not mean "allowed to overflow".

   Giving the left track minmax(0, 1fr) and both sections min-width:0 lets the
   NAV absorb the pressure instead of the cluster. Started roughly ≤1280px and
   got worse after theme-switcher.js began injecting a fourth cluster item. */
.yazan .ast-primary-header-bar .ast-builder-grid-row {
	grid-template-columns: minmax(0, 1fr) auto;
}
.yazan .ast-primary-header-bar .ast-builder-grid-row > .site-header-section {
	min-width: 0;
}
.yazan .ast-primary-header-bar.main-header-bar {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
/* Menu items + cart/account: their 70px line-height is the main height driver. */
.yazan .ast-primary-header-bar .main-header-menu > .menu-item,
.yazan .ast-primary-header-bar .main-header-menu > .menu-item > .menu-link,
.yazan .ast-primary-header-bar .ast-header-woo-cart,
.yazan .ast-primary-header-bar .ast-header-account {
	line-height: var(--yz-header-h) !important;
	min-height: var(--yz-header-h) !important;
}

/* …and the account element needs the flex centring its three cluster siblings
   already get from elsewhere (theme slot: theme-switcher.css; search: §7 below;
   cart: Astra's own dynamic CSS). Without it, the rule above leaves an 18px
   inline-flex SVG baseline-aligned inside a 56px line box, so the person icon
   rode ~4-5px above the optical centre of the other three — the "floating" icon.
   line-height:1 neutralises that inherited line box; min-height above is left
   alone so the bar keeps its height. */
.yazan .ast-primary-header-bar .ast-header-account,
.yazan .ast-primary-header-bar .ast-header-account-wrap,
.yazan .ast-primary-header-bar .ast-header-account-inner-wrap,
.yazan .ast-primary-header-bar .ast-header-account-link {
	display: flex;
	align-items: center;
	line-height: 1;
}
.yazan .ast-primary-header-bar .ast-header-account .ahfb-svg-iconset,
.yazan .ast-primary-header-bar .ast-header-account svg {
	display: block;
}
/* Slim logo (keeps within the shorter bar; scroll-shrink in section 5 still scales it). */
.yazan .ast-primary-header-bar .custom-logo-link img,
.yazan .ast-primary-header-bar .site-logo-img img,
.yazan .ast-primary-header-bar .site-branding img,
.yazan .yz-header .custom-logo-link img,
.yazan .yz-header .site-logo-img img,
.yazan .yz-header .site-branding img {
	/* Proportional scaling to a fixed height. width:auto + max-width:none override Astra's inline
	   `width:120px; max-width:120px` (which would otherwise stretch the tall mark wide on load). */
	height: auto !important;
	max-height: 44px !important;
	width: auto !important;
	max-width: none !important;
}
/* Compress a touch more once scrolled (Comma compresses to a thinner bar). */
.yazan .yz-header.is-scrolled { --yz-header-h: 48px; }

/* --------------------------------------------------------------------------
   9. Mobile — light off-canvas drawer (Comma-style: one ivory panel, bold tracked
   uppercase ink links, hairline dividers) + full open animations. Drawer is
   appended to <body>, so the body flag reaches it.
   -------------------------------------------------------------------------- */
/* One cohesive LIGHT surface. Astra ships the inner white on `.active` and paints each row's ground
   on the LINK itself (`.ast-theme-transparent-header .main-header-menu .menu-link` → #ffffff), so we
   set the brand ivory with !important across the inner (incl. .active), the content, and every menu
   container/row — otherwise the header and rows split into different whites. */
.yazan .ast-mobile-popup-drawer .ast-mobile-popup-inner,
.yazan .ast-mobile-popup-drawer.active .ast-mobile-popup-inner,
.yazan .ast-mobile-popup-drawer .ast-mobile-popup-content,
.yazan .ast-mobile-popup-drawer .main-header-menu,
.yazan .ast-mobile-popup-drawer .ast-nav-menu,
.yazan .ast-mobile-popup-drawer .sub-menu,
.yazan .ast-mobile-popup-drawer .menu,
.yazan .ast-mobile-popup-drawer .menu-item,
.yazan .ast-mobile-popup-drawer .menu-link,
.yazan .ast-mobile-popup-drawer .ast-menu-toggle {
	background-color: var(--yz-ivory) !important;
}
/* Text / links / close / account label / toggle arrows → ink. */
.yazan .ast-mobile-popup-drawer .menu-item a,
.yazan .ast-mobile-popup-drawer .menu-link,
.yazan .ast-mobile-popup-drawer .ast-mobile-popup-close,
.yazan .ast-mobile-popup-drawer .menu-toggle-close,
.yazan .ast-mobile-popup-drawer .ast-builder-layout-element,
.yazan .ast-mobile-popup-drawer .ast-builder-layout-element a,
.yazan .ast-mobile-popup-drawer .ast-header-account-wrap,
.yazan .ast-mobile-popup-drawer .ast-header-account-link,
.yazan .ast-mobile-popup-drawer .ast-menu-toggle {
	color: var(--yz-ink) !important;
	fill: currentColor;
}
/* Account icon: Astra fills its SVG explicitly with --ast-global-color-2 (#000000, ink) — legible on
   the light panel; pin it to the brand ink token for consistency. */
.yazan .ast-mobile-popup-content .ast-header-account-wrap .ast-header-account-type-icon .ahfb-svg-iconset svg path:not( .ast-hf-account-unfill ),
.yazan .ast-mobile-popup-content .ast-header-account-wrap .ast-header-account-type-icon .ahfb-svg-iconset svg circle {
	fill: var(--yz-ink) !important;
}

/* --- Account identity block (avatar + name), drawer only ------------------ */

/* Lay the account element out as one row so the name sits beside the photo instead of stacking
   under it. Astra ships no flex here; the element is a plain block wrapper. */
.yazan .ast-mobile-popup-content .ast-header-account {
	display: flex;
	align-items: center;
	gap: 14px;
}

/* Keep the photo circular at whatever size the option filter sets. Astra only ever writes `width`
   (see yazan_account_avatar_size() in inc/header.php), so a non-square source would letterbox —
   aspect-ratio + object-fit make it crop instead. */
.yazan .ast-mobile-popup-content .ast-header-account-type-avatar .avatar {
	aspect-ratio: 1;
	height: auto;
	object-fit: cover;
	border-radius: 100%;
}

/*
 * yazan_account_drawer_identity() prints this into EVERY header row Astra builds, because the
 * astra_header_account action is shared. Hidden by default and revealed only inside the drawer —
 * scoping by ancestor rather than by hook order is what keeps the desktop bar untouched.
 */
.yazan .yz-account-id {
	display: none;
}
.yazan .ast-mobile-popup-content .yz-account-id {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0; /* Lets the long-name truncation below actually engage inside a flex row. */
	text-decoration: none;
	line-height: 1.25;
}
.yazan .ast-mobile-popup-content .yz-account-id__name {
	font-family: var(--yz-font-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--yz-ink);
	/* Arabic display names run long; one clean line beats a wrap that shoves the menu down. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.yazan .ast-mobile-popup-content .yz-account-id__sub {
	font-family: var(--yz-font-body);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--yz-muted);
}

/* Same press feedback the drawer's other tap targets already use. */
.yazan .ast-mobile-popup-content .yz-account-id:active {
	transform: scale( 0.97 );
}

/* Comma-style rows: bold tracked uppercase, tall touch rows, hairline dividers. */
.yazan .ast-mobile-popup-drawer .main-header-menu .menu-link {
	font-family: var(--yz-font-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding-block: 19px;
}
.yazan .ast-mobile-popup-drawer .menu-item {
	border-block-end: 1px solid var(--yz-hairline, rgba(20, 18, 16, 0.10));
}
/* Sub-menu = a clearly RECESSED nested panel: deeper indent, quieter/smaller text, a faint ink
   ground and an agate rail down the leading edge so it reads as a child group, not a peer of the
   top-level rows. (Background sits on the LINK because that's what paints each row — see the ivory
   note above.) */
.yazan .ast-mobile-popup-drawer .sub-menu .menu-link {
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.1em;
	padding-block: 15px;
	padding-inline-start: 42px;
	background-color: rgba(20, 18, 16, 0.045) !important;
	box-shadow: inset 3px 0 0 0 rgba(140, 47, 36, 0.55);
	color: var(--yz-muted, #6E6A63) !important;
}
.yazan .ast-mobile-popup-drawer .sub-menu .menu-link:hover,
.yazan .ast-mobile-popup-drawer .sub-menu .menu-link:active {
	color: var(--yz-ink) !important;
	background-color: rgba(20, 18, 16, 0.07) !important;
}
/* Expanded parent row: mark it agate so it's obvious which group is open. */
.yazan .ast-mobile-popup-drawer .menu-item.ast-submenu-expanded > .menu-link {
	color: var(--yz-accent, #8C2F24) !important;
}
/* Hover / current row: subtle ink wash + an agate "you are here" marker down the leading edge. */
.yazan .ast-mobile-popup-drawer .menu-link:hover,
.yazan .ast-mobile-popup-drawer .menu-item:hover > .menu-link,
.yazan .ast-mobile-popup-drawer .ast-menu-toggle:hover {
	background-color: rgba(20, 18, 16, 0.04) !important;
}
.yazan .ast-mobile-popup-drawer .menu-item.current-menu-item > .menu-link,
.yazan .ast-mobile-popup-drawer .menu-item.current-menu-ancestor > .menu-link {
	background-color: rgba(20, 18, 16, 0.04) !important;
	box-shadow: inset 3px 0 0 0 var(--yz-accent, #8C2F24);
}
/* The toggle is a <button>, so it carries the browser's default button chrome — a box border shows
   once we give it a background. Strip the native button styling; keep only our chevron. */
.yazan .ast-mobile-popup-drawer .ast-menu-toggle {
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	box-shadow: none;
	/* ⚠️ NOT `outline: none`. This rule is the BASE state, not `:focus`, so removing the outline here
	   removed the keyboard focus indicator from the submenu toggle entirely — the one control a
	   keyboard user must find to open a submenu on mobile, with nothing to replace it. The native
	   button chrome this rule exists to strip is the border and the box-shadow above; the outline was
	   never part of it. a11y.css supplies the `:focus-visible` ring. */
}
/* Arrow rotation is Astra's (`.ast-submenu-expanded > .ast-menu-toggle{transform:rotateX(180deg)}`);
   give it a smooth ease so the chevron turns rather than snaps. */
.yazan .ast-mobile-popup-drawer .ast-menu-toggle {
	transition: transform var(--mo-fast) var(--mo-ease-out);
}
/* Keyboard users still need a visible focus ring even though we cleared the resting outline. */
.yazan .ast-mobile-popup-drawer .ast-menu-toggle:focus-visible {
	outline: 2px solid var(--yz-accent, #8C2F24);
	outline-offset: -2px;
}

/* ---- Interaction & motion ---------------------------------------------- */
/* Press feedback — fires on tap: the row presses in a hair and washes ink. */
.yazan .ast-mobile-popup-drawer .menu-link,
.yazan .ast-mobile-popup-drawer .ast-menu-toggle,
.yazan .ast-mobile-popup-drawer .ast-header-account-link {
	transition: background-color var(--mo-fast) ease,
	            color var(--mo-fast) ease,
	            transform var(--mo-fast) var(--mo-ease-out);
}
.yazan .ast-mobile-popup-drawer .menu-link:active,
.yazan .ast-mobile-popup-drawer .ast-menu-toggle:active,
.yazan .ast-mobile-popup-drawer .ast-header-account-link:active {
	transform: scale(0.97);
	background-color: rgba(20, 18, 16, 0.08) !important;
}

/* Premium slide: replace Astra's 0.2s ease-in on the inner with the signature decelerate — used for
   both the open slide-in and the close slide-out. */
.yazan .ast-mobile-popup-drawer .ast-mobile-popup-inner {
	transition: transform var(--mo-med) var(--mo-ease-out),
	            opacity var(--mo-med) var(--mo-ease-out) !important;
}
/* Staggered reveal on OPEN + coordinated fade on CLOSE. Items TRANSITION between a hidden rest state
   and the open state, so removing `.active` (close) animates them out as well as in. Guarded by
   `html.yz-js` so a no-JS load — where the popup can't open at all — never leaves the menu hidden.
   Stagger delays live only on the `.active` (open) side, so closing fades everything together and
   stays snappy rather than replaying the cascade in reverse. */
html.yz-js .yazan .ast-mobile-popup-drawer .ast-header-account,
html.yz-js .yazan .ast-mobile-popup-drawer .ast-nav-menu > .menu-item {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity var(--mo-med) var(--mo-ease-out),
	            transform var(--mo-med) var(--mo-ease-out);
}
/* Same `html.yz-js` prefix as the hidden state above, so `.active` wins the tie and reveals the
   rows — without it the hidden rule (higher specificity via .yz-js) kept every item at opacity:0
   even while open, and the menu rendered empty. */
html.yz-js .yazan .ast-mobile-popup-drawer.active .ast-header-account,
html.yz-js .yazan .ast-mobile-popup-drawer.active .ast-nav-menu > .menu-item {
	opacity: 1;
	transform: none;
}
/* The drawer cascade, expressed in the motion system's stagger token rather than nine hardcoded
   milliseconds. Those nine literals were the only stagger on the site that did not move when
   `--mo-stagger` changed — and because the token now scales with the store's motion-intensity
   setting, they were also the only stagger that ignored "motion: off". `calc()` on the child index
   gives the same cascade from one line per depth. */
.yazan .ast-mobile-popup-drawer.active .ast-header-account            { transition-delay: calc(var(--mo-stagger) * 0.7); }
.yazan .ast-mobile-popup-drawer.active .ast-nav-menu > .menu-item:nth-child(1) { transition-delay: calc(var(--mo-stagger) * 1.3); }
.yazan .ast-mobile-popup-drawer.active .ast-nav-menu > .menu-item:nth-child(2) { transition-delay: calc(var(--mo-stagger) * 1.9); }
.yazan .ast-mobile-popup-drawer.active .ast-nav-menu > .menu-item:nth-child(3) { transition-delay: calc(var(--mo-stagger) * 2.5); }
.yazan .ast-mobile-popup-drawer.active .ast-nav-menu > .menu-item:nth-child(4) { transition-delay: calc(var(--mo-stagger) * 3.1); }
.yazan .ast-mobile-popup-drawer.active .ast-nav-menu > .menu-item:nth-child(5) { transition-delay: calc(var(--mo-stagger) * 3.7); }
.yazan .ast-mobile-popup-drawer.active .ast-nav-menu > .menu-item:nth-child(6) { transition-delay: calc(var(--mo-stagger) * 4.3); }
.yazan .ast-mobile-popup-drawer.active .ast-nav-menu > .menu-item:nth-child(7) { transition-delay: calc(var(--mo-stagger) * 4.9); }
.yazan .ast-mobile-popup-drawer.active .ast-nav-menu > .menu-item:nth-child(n+8) { transition-delay: calc(var(--mo-stagger) * 5.3); }

/* --------------------------------------------------------------------------
   10. Header search — HIDDEN behind a magnifier icon (Astra native slide-out).
   The field stays hidden until the icon is clicked, then slides open; this
   keeps the header compact and balanced. We keep Astra's native `search`
   element (cluster slot + live product search); only the icon shows at rest.
   Markup: .ast-header-search > .ast-search-menu-icon.slide-search
   (hidden .search-form + toggle .ast-search-icon > a.astra-search-icon).
   Results land in .ast-live-search-results.
   -------------------------------------------------------------------------- */

/* Align the search element to the same slim height as the rest of the cluster. */
.yazan .ast-primary-header-bar .ast-header-search {
	display: flex;
	align-items: center;
	min-height: var(--yz-header-h) !important;
}
.yazan .yz-header .ast-header-search .ast-search-menu-icon {
	display: flex;
	align-items: center;
}

/* Trigger icon — match the cart/account icon weight. Colour is forced ink/ivory
   by sections 3 & 4; size + hover live here. */
.yazan .yz-header .ast-header-search .astra-search-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	opacity: 0.92;
	transition: opacity var(--mo-med) var(--mo-ease-out);
}
.yazan .yz-header .ast-header-search .astra-search-icon:hover,
.yazan .yz-header .ast-header-search .astra-search-icon:focus-visible {
	opacity: 1;
}
.yazan .yz-header .ast-header-search .astra-search-icon .ast-icon svg,
.yazan .yz-header .ast-header-search .astra-search-icon svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* Slide-out field (revealed on click) — a premium dropping panel. */
.yazan .yz-header .ast-header-search .ast-search-menu-icon.ast-dropdown-active .search-form {
	background: var(--yz-header-bg);
	border: 1px solid var(--yz-hairline);
	border-radius: var(--yz-radius, 0);
	box-shadow: 0 12px 30px rgba(20, 18, 16, 0.10);
	padding: 6px 8px;
}
.yazan .yz-header .ast-header-search .search-field {
	background: transparent;
	color: var(--yz-ink);
	border: 0;
	font-size: 13px;
	letter-spacing: 0.04em;
}
.yazan .yz-header .ast-header-search .search-field::placeholder {
	color: var(--yz-ink);
	opacity: 0.5;
	font-size: 12px;
	letter-spacing: 0.04em;
}
.yazan .yz-header .ast-header-search .search-submit,
.yazan .yz-header .ast-header-search .search-submit svg {
	fill: currentColor;
	color: var(--yz-ink);
}

/* Live-search results (AJAX product suggestions) — same square, hairline panel. */
.yazan .ast-header-search .ast-live-search-results,
.yazan .ast-live-search-results {
	background: var(--yz-header-bg);
	border: 1px solid var(--yz-hairline);
	border-radius: var(--yz-radius, 0);
	box-shadow: 0 16px 40px rgba(20, 18, 16, 0.12);
}
.yazan .ast-live-search-results .ast-search-item,
.yazan .ast-live-search-results a {
	color: var(--yz-ink);
}
.yazan .ast-live-search-results .ast-search-item {
	border-block-end: 1px solid var(--yz-hairline);
	transition: background-color var(--mo-med) var(--mo-ease-out);
}
.yazan .ast-live-search-results .ast-search-item:hover,
.yazan .ast-live-search-results .ast-search-item:focus-within {
	background-color: rgba(154, 123, 63, 0.06); /* faint aged-gold wash */
}
.yazan .ast-live-search-results .ast-search--posttype-heading {
	color: var(--yz-ink);
	opacity: 0.55;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 10.5px;
}

/* Dark checkout/cart bar — invert the icon + field so search stays legible. */
.yazan.yz-solid-header .yz-header .ast-header-search .astra-search-icon,
.yazan.yz-solid-header .yz-header .ast-header-search .search-field,
.yazan.yz-solid-header .yz-header .ast-header-search .search-submit {
	color: var(--yz-ivory);
}
.yazan.yz-solid-header .yz-header .ast-header-search .ast-search-menu-icon.ast-dropdown-active .search-form {
	background: rgba(20, 18, 16, 0.98);
	border-color: rgba(245, 241, 233, 0.14);
}
.yazan.yz-solid-header .yz-header .ast-header-search .search-field::placeholder {
	color: var(--yz-ivory);
	opacity: 0.55;
}

/* --------------------------------------------------------------------------
   DASHBOARD HEADER SETTINGS (inc/header-settings.php — /dashboard/header)
   Each rule is keyed on a body class that is only printed when the owner changed the default,
   so an untouched header is exactly the header above.
   -------------------------------------------------------------------------- */

/* Logo tone. Default ("dark") keeps the rules above: black on the Black theme, white on
   Burgundy. "Original" shows the file's own colours in every theme; "Light" is always white.
   Out-specifies both header.css §5 and theme-burgundy.css (both 0,3,1-0,4,2 + !important). */
html .yazan.yz-logo--original .yz-header .custom-logo,
html .yazan.yz-logo--original .yz-header .custom-logo-link img,
html .yazan.yz-logo--original .yz-header .site-logo-img img,
html .yazan.yz-logo--original .yz-header .site-branding img,
html[data-yz-theme] .yazan.yz-logo--original .yz-header .custom-logo-link img,
html[data-yz-theme] .yazan.yz-logo--original .yz-header .site-logo-img img {
	filter: none !important;
}
html .yazan.yz-logo--light .yz-header .custom-logo,
html .yazan.yz-logo--light .yz-header .custom-logo-link img,
html .yazan.yz-logo--light .yz-header .site-logo-img img,
html .yazan.yz-logo--light .yz-header .site-branding img,
html[data-yz-theme] .yazan.yz-logo--light .yz-header .custom-logo-link img,
html[data-yz-theme] .yazan.yz-logo--light .yz-header .site-logo-img img {
	filter: brightness(0) invert(1) !important;
}

/* Not sticky: the bar scrolls away with the page. Beats §3's `#masthead{position:sticky!important}`. */
.yazan.yz-header--static.yz-comma-header #masthead,
.yazan.yz-header--static.yz-solid-header #masthead,
.yazan.yz-header--static.yz-comma-header .yz-header {
	position: relative !important;
}
/* Never slide out of view (header.js also stops adding the class; this covers a stale one). */
.yazan.yz-header--no-autohide .yz-header.is-hidden { transform: none; }