/*
 * FAJR Solar Kit — components (header, footer, patterns, block styles, animations).
 * Uses only the tokens from tokens.css. Light = :root, dark = [data-theme="dark"] / .fajr-scheme-dark.
 * Class hooks are BEM-ish: .fajr-<component>__<part>. Animations use transform/opacity only and are
 * disabled under prefers-reduced-motion.
 * r2 speed: blur only on header bar (+ its pill/buttons over a hero, never nested), menu sheet, hero eyebrow,
 * dashboard, Glass style; none < 760px (§20). Content visible without JS (§18); loops pause off-screen/rest (K5).
 */

/* ========== 1. Base ========== */
html { -webkit-text-size-adjust: 100%; }
body {
	background-color: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
html.fajr-theme-anim body,
html.fajr-theme-anim body * { transition: background-color .35s ease, border-color .35s ease, color .35s ease !important; }
:where(h1, h2, h3, h4, h5, h6) { font-family: var(--font-heading); letter-spacing: var(--tracking-heading); }
::selection { background: var(--sun); color: var(--sun-ink); }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--energy); outline-offset: 3px; }
.fajr-scheme-dark, .is-style-fajr-dark-section { background-color: var(--bg); color: var(--text); }
.fajr-scheme-dark :where(h1, h2, h3, h4, p, li) { color: inherit; }
.fajr-main { margin-block-start: 0 !important; }
.fajr-main > .wp-block-post-content { margin-block-start: 0; }

/* Sections from patterns sit edge to edge (no theme block-gap seams). */
:where(.wp-block-post-content, .entry-content, .wp-site-blocks, main) > :is(.fajr-section, .fajr-hero) { margin-block-start: 0 !important; margin-block-end: 0 !important; }

/* ========== 2. Utilities & block styles ========== */
.fajr-glass, .is-style-fajr-glass {
	background: var(--glass);
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
	backdrop-filter: blur(var(--glass-blur)) saturate(140%);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-md);
}
.is-style-fajr-glass, .is-style-fajr-card { padding: var(--space-6); }
.is-style-fajr-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); }

.fajr-eyebrow {
	margin: 0 0 var(--space-3);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--energy-ink);
}
.fajr-chip {
	display: inline-flex; align-items: center; gap: 8px;
	width: fit-content;
	margin: 0;
	padding: 8px 16px;
	border-radius: var(--radius-pill);
	font-size: var(--fs-sm); font-weight: 500;
	background: var(--glass-dark);
	border: 1px solid var(--glass-dark-border);
	color: #fff;
}
.fajr-chip--small { padding: 4px 10px; font-size: 12px; background: color-mix(in srgb, var(--sun) 22%, transparent); border-color: color-mix(in srgb, var(--sun) 45%, transparent); color: var(--text); backdrop-filter: none; }

/* Buttons (block styles) */
.wp-block-button[class*="is-style-fajr-"] > .wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; gap: .55em;
	border-radius: var(--radius-pill);
	padding: .82em 1.4em;
	border: 1px solid transparent;
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.005em;
	text-decoration: none;
	white-space: nowrap;
	transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out), background-color var(--dur) ease, color var(--dur) ease, border-color var(--dur) ease;
}
.wp-block-button[class*="is-style-fajr-"] > .wp-block-button__link:hover { transform: translateY(-1px); }
.wp-block-button[class*="is-style-fajr-"] > .wp-block-button__link:active { transform: translateY(0) scale(.98); }
.wp-block-button.is-style-fajr-sun > .wp-block-button__link { background: var(--sun); color: var(--sun-ink); }
.wp-block-button.is-style-fajr-sun > .wp-block-button__link:hover { box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--sun) 80%, transparent); }
.wp-block-button.is-style-fajr-white > .wp-block-button__link { background: #fff; color: #161815; box-shadow: var(--shadow-sm); }
.wp-block-button.is-style-fajr-white > .wp-block-button__link:hover { box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .45); }
.wp-block-button.is-style-fajr-ghost > .wp-block-button__link {
	background: var(--glass); color: var(--text); border-color: color-mix(in srgb, var(--text) 16%, transparent);
}
.wp-block-button.is-style-fajr-ghost > .wp-block-button__link:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.fajr-scheme-dark .wp-block-button.is-style-fajr-ghost > .wp-block-button__link,
.fajr-header.is-over-hero .wp-block-button.is-style-fajr-ghost > .wp-block-button__link {
	background: var(--glass-dark); border-color: var(--glass-dark-border); color: #fff;
}
.fajr-scheme-dark .wp-block-button.is-style-fajr-ghost > .wp-block-button__link:hover { background: rgba(255, 255, 255, .16); }
.wp-block-button.is-style-fajr-solid > .wp-block-button__link { background: var(--text); color: var(--bg); }
.wp-block-button.is-style-fajr-energy > .wp-block-button__link { background: var(--energy); color: #1a0e04; box-shadow: var(--energy-glow); }
.wp-block-button.is-style-fajr-energy > .wp-block-button__link:hover { box-shadow: 0 0 22px rgba(255, 122, 26, .65); }

/* Arrow-in-a-circle (inspiration #3 "Book a Free Call ↗") */
.fajr-btn-arrow { --arrow-bg: #161815; --arrow-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M9 7h8v8' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.fajr-btn-arrow > .wp-block-button__link { padding-right: .45em !important; }
.fajr-btn-arrow > .wp-block-button__link::after {
	content: ""; flex: none;
	width: 2em; height: 2em; margin: -.4em 0 -.4em .2em;
	border-radius: 50%;
	background: var(--arrow-bg) var(--arrow-img) center / 46% no-repeat;
	transition: transform var(--dur) var(--ease-out);
}
.fajr-btn-arrow > .wp-block-button__link:hover::after { transform: rotate(45deg); }
.is-style-fajr-ghost.fajr-btn-arrow { --arrow-bg: var(--text); }
[data-theme="dark"] .is-style-fajr-ghost.fajr-btn-arrow,
.fajr-scheme-dark .is-style-fajr-ghost.fajr-btn-arrow { --arrow-bg: #fff; --arrow-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M9 7h8v8' fill='none' stroke='%23161815' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.is-style-fajr-energy.fajr-btn-arrow { --arrow-bg: #1a0e04; }

/* Decorative icons: .fajr-icon.fajr-icon--{name} draws a 44px tile with a masked glyph. */
.fajr-icon { position: relative; --icon-tile: 44px; --icon-top: 0px; --icon-left: 0px; }
.fajr-icon::before {
	content: ""; display: block;
	width: var(--icon-tile); height: var(--icon-tile);
	margin-bottom: var(--space-5);
	border-radius: 14px;
	background: color-mix(in srgb, var(--sun) 26%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sun) 40%, transparent);
}
.fajr-icon::after {
	content: ""; position: absolute;
	top: calc(var(--icon-top) + var(--icon-tile) * .25); left: calc(var(--icon-left) + var(--icon-tile) * .25);
	width: calc(var(--icon-tile) * .5); height: calc(var(--icon-tile) * .5);
	background: var(--text);
	-webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
.fajr-icon--shield { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4.5 6v6c0 4.5 3.2 7.8 7.5 9 4.3-1.2 7.5-4.5 7.5-9V6L12 3Z'/%3E%3Cpath d='m8.8 12 2.2 2.2 4.4-4.4'/%3E%3C/svg%3E"); }
.fajr-icon--layers { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 9 5-9 5-9-5 9-5Z'/%3E%3Cpath d='m3 13 9 5 9-5'/%3E%3C/svg%3E"); }
.fajr-icon--tool { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 6.5a4 4 0 0 0 5 5l-8.5 8.5a2.1 2.1 0 0 1-3-3l8.5-8.5a4 4 0 0 0-2-2Z'/%3E%3Cpath d='m15 3 6 6'/%3E%3C/svg%3E"); }
.fajr-icon--support { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13v-1a8 8 0 0 1 16 0v1'/%3E%3Crect x='3' y='13' width='4' height='6' rx='1.5'/%3E%3Crect x='17' y='13' width='4' height='6' rx='1.5'/%3E%3Cpath d='M19 19c0 1.5-2 2.5-5 2.5'/%3E%3C/svg%3E"); }
.fajr-icon--bolt { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7l1-8Z'/%3E%3C/svg%3E"); }
.fajr-icon--stack { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='5' rx='1.5'/%3E%3Crect x='5' y='10' width='14' height='5' rx='1.5'/%3E%3Crect x='5' y='17' width='14' height='4' rx='1.5'/%3E%3C/svg%3E"); }
.fajr-icon--mount { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18M3 21h18'/%3E%3Crect x='8' y='6' width='9' height='11' rx='1.5'/%3E%3C/svg%3E"); }
.fajr-icon--sun { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E"); }
.fajr-icon--moon { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M20 14.6A8.2 8.2 0 0 1 9.4 4a8.2 8.2 0 1 0 10.6 10.6Z'/%3E%3C/svg%3E"); }
.fajr-icon--grid { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 6 22M12 2l6 20M7 8h10M5.5 14h13'/%3E%3C/svg%3E"); }
.fajr-icon--battery { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='4' width='12' height='18' rx='2'/%3E%3Cpath d='M10 2h4M9 14h6M9 18h6'/%3E%3C/svg%3E"); }

/* ========== 3. Header (inspiration #3) ========== */
.wp-block-template-part:has(> .fajr-header),
.fajr-header-sticky { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 100; margin: 0 !important; }
html:has(.fajr-hero) .wp-block-template-part:has(> .fajr-header) { position: fixed; left: 0; right: 0; }
@media (max-width: 600px) {
	/* Admin bar is not fixed on small screens. */
	.admin-bar .wp-block-template-part:has(> .fajr-header) { top: 0; }
}
/* Header height for hero/page offsets (kit.css, theme.css, OAX): the real values (bar + resting padding, measured
   2026-10-19 on both sites), so the first paint is final and kit.js's correction is a no-op (no shift after load). */
:root { --fajr-header-h: 92px; }
@media (max-width: 1079.98px) { :root { --fajr-header-h: 88px; } }
@media (max-width: 640px) { :root { --fajr-header-h: 76px; } }
.fajr-header { --fajr-header-pad: 14px; padding: var(--fajr-header-pad) var(--gutter); margin: 0 !important; transition: padding var(--dur) var(--ease-out); }
.fajr-header.is-scrolled { padding-top: 10px; padding-bottom: 10px; }
.fajr-header__bar {
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4);
	max-width: 1360px; margin: 0 auto !important;
	padding: 8px 8px 8px 18px;
	border-radius: var(--radius-pill);
	color: var(--text);
	--fajr-bar-bg: var(--glass); /* also used by the round buttons */
	background: var(--fajr-bar-bg);
	border: 1px solid var(--glass-border);
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%); backdrop-filter: blur(var(--glass-blur)) saturate(150%);
	box-shadow: var(--shadow-sm);
	transition: background-color var(--dur) ease, border-color var(--dur) ease, box-shadow var(--dur) ease, color var(--dur) ease;
}
[data-theme="dark"] .fajr-header__bar { border-color: rgba(255, 255, 255, .08); }
.fajr-header.is-scrolled .fajr-header__bar { box-shadow: var(--shadow-md); --fajr-bar-bg: color-mix(in srgb, var(--surface) 72%, transparent); background: var(--fajr-bar-bg); }
/* Transparent over a hero (class set by JS; :has() covers the first paint). */
html:has(.fajr-hero) .fajr-header:not(.is-scrolled) .fajr-header__bar,
.fajr-header.is-over-hero:not(.is-scrolled) .fajr-header__bar {
	--fajr-bar-bg: transparent; background: transparent; border-color: transparent; box-shadow: none; color: #fff;
	-webkit-backdrop-filter: none; backdrop-filter: none;
}
.fajr-header__bar > * { margin: 0 !important; }
/* max-content: the grid crushed the brand to 0px at 1080-1230px (ui-bugs F3). */
.fajr-header__brand { gap: 10px; min-width: max-content; }
.fajr-header__brand .wp-block-site-logo img, .fajr-header__brand .wp-block-site-logo svg { display: block; height: auto; }
.fajr-header__title { margin: 0; font-family: var(--font-heading); font-size: 1.3rem; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.fajr-header__title a { color: inherit; text-decoration: none; }
.fajr-logo-mark { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); }
:root:not([data-theme="dark"]) .fajr-header.is-scrolled .fajr-logo-mark,
html:not(:has(.fajr-hero)):not([data-theme="dark"]) .fajr-logo-mark { filter: brightness(.55) contrast(1.2); }
.fajr-logo-oax { color: currentColor; }

/* Navigation pill: one glass pill, plain text links (no per-item boxes). */
.fajr-header .fajr-header__nav { justify-self: center; font-size: var(--fs-sm); font-weight: 500; }
.fajr-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
	gap: 0;
	padding: 5px;
	border-radius: var(--radius-pill);
	background: color-mix(in srgb, var(--text) 5%, transparent);
	border: 1px solid var(--line);
}
html:has(.fajr-hero) .fajr-header:not(.is-scrolled) .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
	background: var(--glass-dark); border-color: var(--glass-dark-border);
	-webkit-backdrop-filter: blur(var(--glass-dark-blur)) saturate(140%); backdrop-filter: blur(var(--glass-dark-blur)) saturate(140%);
}
/* ui-bugs F1: core gives every nav <li> (and the chevron) background-color:inherit, which re-painted the pill as boxes. */
.fajr-header .wp-block-navigation .wp-block-navigation-item { background-color: transparent; }
.fajr-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding: 8px 14px; border-radius: var(--radius-pill); text-decoration: none; font-weight: 500; line-height: 1.2; white-space: nowrap;
	color: color-mix(in srgb, currentColor 80%, transparent);
	transition: color var(--dur-fast) ease;
}
.fajr-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.fajr-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible,
.fajr-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content,
.fajr-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > [aria-current="page"] { color: inherit; }
/* Hover/focus/current = full colour; current item = 18x2px orange underline (grows in on hover). kit.js marks it. */
.fajr-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content .wp-block-navigation-item__label { position: relative; }
.fajr-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content .wp-block-navigation-item__label::after {
	content: ""; position: absolute; left: 50%; bottom: -7px; width: 18px; height: 2px; margin-left: -9px; border-radius: 2px;
	background: var(--energy); transform: scaleX(0); transition: transform var(--dur) var(--ease-out);
}
/* Light solid bar: --energy-ink (>= 3:1). Selectors must out-rank the rule above (0,7,1). */
:root:not([data-theme="dark"]) .fajr-header.is-scrolled .fajr-header__nav .wp-block-navigation__container .wp-block-navigation-item .wp-block-navigation-item__label::after,
html:not(:has(.fajr-hero)):not([data-theme="dark"]) .fajr-header .fajr-header__nav .wp-block-navigation__container .wp-block-navigation-item .wp-block-navigation-item__label::after { background: var(--energy-ink); }
.fajr-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content .wp-block-navigation-item__label::after,
.fajr-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content .wp-block-navigation-item__label::after,
.fajr-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > [aria-current="page"] .wp-block-navigation-item__label::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .fajr-header__nav .wp-block-navigation-item__label::after { transition: none; } }
.fajr-header__nav .wp-block-navigation-submenu > .wp-block-navigation-item__content { padding-right: 6px !important; }
.fajr-header__nav .wp-block-navigation__submenu-icon { margin-right: 10px; }
.fajr-header .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
	min-width: 230px; padding: 8px;
	border-radius: 18px;
	border: 1px solid var(--line);
	background: color-mix(in srgb, var(--surface) 97%, transparent);
	box-shadow: var(--shadow-lg);
	color: var(--text);
	top: calc(100% + 10px);
}
.fajr-header .wp-block-navigation__submenu-container::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.fajr-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 10px 14px !important; border-radius: 12px; text-decoration: none; }
.fajr-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }

/* Actions */
.fajr-header__actions { justify-self: end; gap: 8px; }
.fajr-header__actions > * { margin: 0 !important; }
.fajr-header__actions .wp-block-buttons { gap: 8px; flex-wrap: nowrap; }
.fajr-header .wp-block-button[class*="is-style-fajr-"] > .wp-block-button__link { padding: .72em 1.25em; }
.fajr-header .fajr-contact-button svg { flex: none; }
.fajr-header .is-style-fajr-white > .wp-block-button__link { box-shadow: none; }
:root:not([data-theme="dark"]) .fajr-header:is(.is-scrolled) .is-style-fajr-white > .wp-block-button__link,
html:not(:has(.fajr-hero)):not([data-theme="dark"]) .fajr-header .is-style-fajr-white > .wp-block-button__link { background: var(--text); color: var(--bg); }

/* Round buttons: theme toggle + menu open/close. No blur inside the blurred bar (ui-bugs F8); frosted over a hero only. */
.fajr-theme-toggle,
.fajr-header .wp-block-navigation__responsive-container-open,
.fajr-header .wp-block-navigation__responsive-container-close {
	display: inline-grid; place-items: center;
	width: 42px; height: 42px; padding: 0;
	border-radius: 50%;
	color: inherit;
	cursor: pointer;
	/* tint over the bar colour = the old nested-blur look */
	background: color-mix(in srgb, var(--text) 6%, var(--fajr-bar-bg, transparent));
	border: 1px solid var(--line);
	transition: background-color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.fajr-theme-toggle:hover, .fajr-header .wp-block-navigation__responsive-container-open:hover { background: color-mix(in srgb, var(--text) 12%, var(--fajr-bar-bg, transparent)); }
html:has(.fajr-hero) .fajr-header:not(.is-scrolled) :is(.fajr-theme-toggle, .wp-block-navigation__responsive-container-open) {
	background: var(--glass-dark); border-color: var(--glass-dark-border); color: #fff;
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
html:has(.fajr-hero) .fajr-header:not(.is-scrolled) .wp-block-button.is-style-fajr-ghost > .wp-block-button__link { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.fajr-theme-toggle svg { transition: transform .5s var(--ease-out), opacity .3s ease; }
.fajr-theme-toggle__sun { display: none; }
[data-theme="dark"] .fajr-theme-toggle__sun { display: block; }
[data-theme="dark"] .fajr-theme-toggle__moon { display: none; }
.fajr-theme-toggle:active svg { transform: rotate(40deg) scale(.9); }
.fajr-header .wp-block-navigation__responsive-container-open svg,
.fajr-header .wp-block-navigation__responsive-container-close svg { width: 22px; height: 22px; fill: currentColor; }

/* Desktop: show the menu inline as the glass pill (overlayMenu = "always" keeps the full-screen sheet for < 1080px). */
@media (min-width: 1080px) {
	.fajr-header .wp-block-navigation__responsive-container-open.always-shown { display: none; }
	.fajr-header .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) {
		display: block; position: relative; inset: auto; width: auto; z-index: auto; background: transparent !important; color: inherit !important;
	}
	.fajr-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-close { display: none; }
	.fajr-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-close,
	.fajr-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-dialog { display: contents; }
	.fajr-nav-mobile-cta { display: none !important; }
}
/* 1080-1279px: no room for "Call us" (ui-bugs F3); the number stays in the footer and on /contact-us/. */
@media (min-width: 1080px) and (max-width: 1279.98px) { .fajr-header__actions .fajr-contact-button { display: none; } }
@media (max-width: 1079.98px) {
	.fajr-header__bar { display: flex; justify-content: space-between; padding-left: 16px; }
	.fajr-header__brand { flex: 1; }
	.fajr-header__nav { order: 3; }
	.fajr-header__actions .fajr-contact-button { display: none; }
	.fajr-header .wp-block-navigation__responsive-container:not(.is-menu-open) .fajr-nav-mobile-cta { display: none; }
}
@media (max-width: 640px) {
	.fajr-header__cta { display: none !important; }
	.fajr-header { --fajr-header-pad: 10px; padding: var(--fajr-header-pad) 12px; }
	.fajr-header__bar { padding: 6px 6px 6px 14px; }
}

/* Mobile full-screen glass sheet */
.fajr-header .wp-block-navigation__responsive-container.is-menu-open {
	--fajr-bar-bg: color-mix(in srgb, var(--bg) 70%, transparent);
	background: var(--fajr-bar-bg) !important;
	color: var(--text) !important;
	-webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%);
	padding: 20px var(--gutter) 32px;
	animation: fajr-sheet-in .35s var(--ease-out);
}
.fajr-header .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 64px !important; align-items: stretch !important; gap: 0 !important; }
.fajr-header .is-menu-open .wp-block-navigation__container { gap: 0 !important; width: 100%; align-items: stretch !important; }
.fajr-header .is-menu-open .wp-block-navigation-item { width: 100%; }
.fajr-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: block; width: 100%;
	padding: 14px 4px !important;
	font-family: var(--font-heading); font-size: clamp(1.5rem, 6vw, 2rem); font-weight: 500; letter-spacing: -.02em;
	text-decoration: none;
	border-bottom: 1px solid var(--line);
}
.fajr-header .is-menu-open .wp-block-navigation__submenu-container { padding: 4px 0 10px 12px !important; gap: 0 !important; }
.fajr-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: 1.05rem; padding: 8px 4px !important; color: var(--muted); text-decoration: none; }
/* r3 (m9): the close button sticks to the top while a tall sheet scrolls (375x667: sheet 735px). Same resting place as the
   old absolute button (18px down, one gutter in from the right); the negative bottom margin keeps it out of the flow, so
   the links start exactly where they did. Opaque tint (same colour as before) so links scrolling under it stay hidden. */
.fajr-header .is-menu-open .wp-block-navigation__responsive-container-close {
	position: sticky; top: 18px; z-index: 3; display: grid;
	margin: 18px var(--gutter) -60px auto;
	background: color-mix(in srgb, var(--text) 6%, var(--bg));
}
.fajr-header .is-menu-open .fajr-nav-mobile-cta { display: flex; margin-top: 28px; width: 100%; }
.fajr-header .is-menu-open .fajr-nav-mobile-cta .wp-block-button, .fajr-header .is-menu-open .fajr-nav-mobile-cta .wp-block-button__link { width: 100%; }
:root:not([data-theme="dark"]) .fajr-header .is-menu-open .fajr-nav-mobile-cta .wp-block-button__link { background: var(--text); color: var(--bg); }
@keyframes fajr-sheet-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
/* DO NOT REMOVE (ui-bugs F2): a backdrop-filter makes an element the containing block for position:fixed children, so the
   fixed sheet was clipped to the blurred ~56px bar (after scrolling / on pages without a hero). While the menu is open no
   ancestor of the sheet may have backdrop-filter, filter, transform, contain or will-change. The sheet has its own blur. */
html.has-modal-open .fajr-header__bar,
.fajr-header__bar:has(.wp-block-navigation__responsive-container.is-menu-open) { -webkit-backdrop-filter: none; backdrop-filter: none; }
.fajr-header .wp-block-navigation__responsive-container.is-menu-open { overscroll-behavior: contain; }
.fajr-header .is-menu-open .wp-block-navigation-item__content { box-sizing: border-box; }
/* Short phones: smaller sheet links (ui-bugs F7); kit.js resets the sheet's scroll on open. */
@media (max-height: 700px) {
	.fajr-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		font-size: clamp(1.35rem, 5.2vw, 1.75rem); padding-top: 11px !important; padding-bottom: 11px !important;
	}
}

/* ========== 4. Sections (shared) ========== */
.fajr-section { padding: clamp(44px, 5.5vw, 76px) var(--gutter); }
/* r3 (speed; r3 lab, home, Lighthouse mobile: LCP about -0.3 s, TBT about -90 ms): sections and the footer are laid out and painted only
   when they come near the viewport. A section on screen at load renders in the first frame as usual; "auto" remembers each
   real height after its first render, so scrolling back is stable. Front end only (not the editor canvas). Paint
   containment clips anything drawn outside a section's own box (keep decorations inside the section padding). */
body:not(.editor-styles-wrapper) .fajr-section:not(.fajr-hero):not(.oaxh-hero):not(:first-child),
body:not(.editor-styles-wrapper) .wp-site-blocks > footer.wp-block-template-part { content-visibility: auto; contain-intrinsic-size: auto 900px; }
/* Same for the cards of a product grid (the 20-card /products/ list starts on screen, so its section is rendered). On the
   card itself, not the grid cell: the card's own hover shadow/lift is not clipped by its containment.
   box-sizing: border-box is required (r3 QA B1). The card is height:100% of its grid cell; as content-box it was 22 px
   (phone) / 28 px (desktop) taller than the cell, so it overlapped the next row, and with "auto" Chrome remembered that
   taller size, so every skip -> render cycle grew the row again and the page shifted while scrolling (scroll CLS up to
   1.09 on /products/). As border-box the card fills its cell exactly and the row gap shows. Not scoped to the front end,
   so the editor canvas shows the same card. */
.fajr-products__grid .fajr-product-card { box-sizing: border-box; }
body:not(.editor-styles-wrapper) .fajr-products__grid .fajr-product-card { content-visibility: auto; contain-intrinsic-size: auto 300px; }
/* r3 QA B2 (load-time CLS): on the shop grids (source "archive": /products/, categories, search) the first 12 cards
   render normally from 430 px. The first frame lays on-screen cards out at the estimate (300 / 420 px), which only
   matches the real row height on phones up to ~412 px and at 1100-1920 px; elsewhere (540-1024 px, 1080x1920, 2560 px)
   row 2 jumped one frame later (/products/ CLS up to 0.023 at 768x1024, r2 0). Not below 430 px: always-rendered
   cards cost Lighthouse mobile (412 px) points and LCP. Not the home / related grids: they sit in sections further
   down, and rendering their cards early only loaded 4 lazy images on the product page. Cards 13+ keep "auto". */
@media (min-width: 430px) {
	body:not(.editor-styles-wrapper) .fajr-products--archive .fajr-products__item:nth-child(-n+12) > .fajr-product-card { content-visibility: visible; }
}
@media (min-width: 782px) {
	body:not(.editor-styles-wrapper) .fajr-section:not(.fajr-hero):not(.oaxh-hero):not(:first-child),
	body:not(.editor-styles-wrapper) .wp-site-blocks > footer.wp-block-template-part { contain-intrinsic-size: auto 640px; }
	body:not(.editor-styles-wrapper) .fajr-products__grid .fajr-product-card { contain-intrinsic-size: auto 420px; }
}
.fajr-hero + .fajr-section { padding-top: clamp(48px, 6vw, 88px); }
:is(.fajr-section, .fajr-hero):last-child { padding-bottom: clamp(56px, 7vw, 100px); }
.fajr-section__inner { width: 100%; max-width: var(--content-max) !important; margin-inline: auto !important; }
.fajr-section__inner > * + * { margin-block-start: var(--space-7); }
.fajr-section-head { max-width: 720px; }
.fajr-section-head > * { margin-block: 0; }
.fajr-section-head.is-center { margin-inline: auto; text-align: center; }
.fajr-section-title { margin: 0; font-size: var(--fs-3xl); font-weight: 600; line-height: 1.06; letter-spacing: -.03em; text-wrap: balance; }
.fajr-lead { margin: var(--space-4) 0 0 !important; font-size: var(--fs-lg); line-height: 1.6; color: var(--muted); text-wrap: pretty; max-width: 60ch; }
.fajr-section-head.is-center .fajr-lead { margin-inline: auto !important; }
.fajr-section-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-5); }
.fajr-section-row > * { margin: 0 !important; }
.fajr-split { display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: clamp(32px, 6vw, 80px); }
.fajr-split > * { margin: 0 !important; min-width: 0; }
.fajr-split__text > * + * { margin-block-start: var(--space-6); }
@media (max-width: 900px) { .fajr-split { grid-template-columns: 1fr; } }

/* ========== 5. Hero ========== */
.fajr-hero {
	position: relative; isolation: isolate; overflow: hidden;
	display: flex; flex-direction: column; justify-content: center;
	min-height: min(100svh, 1000px);
	padding: calc(var(--fajr-header-h, 84px) + 40px) var(--gutter) 28px !important;
	background-color: #0B0D0B;
	color: #fff;
}
.fajr-hero > * { margin-block: 0 !important; }
.fajr-hero__bg { position: absolute !important; inset: 0; z-index: -2; margin: 0 !important; max-width: none !important; width: 100% !important; }
.fajr-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.fajr-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.fajr-hero--dark::before {
	background:
		radial-gradient(60% 50% at 75% 55%, rgba(255, 138, 43, .16), transparent 70%),
		linear-gradient(90deg, rgba(5, 7, 6, .88) 0%, rgba(5, 7, 6, .55) 48%, rgba(5, 7, 6, .15) 80%),
		linear-gradient(0deg, rgba(5, 7, 6, .92) 0%, rgba(5, 7, 6, 0) 38%);
}
.fajr-hero--photo::before { background: linear-gradient(0deg, rgba(8, 10, 8, .78) 0%, rgba(8, 10, 8, .25) 45%, rgba(8, 10, 8, .05) 70%), linear-gradient(90deg, rgba(8, 10, 8, .45), transparent 60%); }
.fajr-hero__inner {
	flex: 1; width: 100%; max-width: var(--content-max); margin-inline: auto !important;
	display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(24px, 4vw, 64px);
}
.fajr-hero__inner > * { margin: 0 !important; }
.fajr-hero__content > * { margin-block: 0; }
.fajr-hero__content > * + * { margin-block-start: var(--space-5); }
.fajr-hero__title {
	font-size: var(--fs-display) !important; line-height: 1.02; letter-spacing: -.04em; font-weight: 600;
	color: #fff; max-width: 13ch; text-wrap: balance;
}
.fajr-hero__lead { font-size: var(--fs-lg); line-height: 1.6; color: rgba(255, 255, 255, .78) !important; max-width: 48ch; }
.fajr-hero .fajr-eyebrow {
	display: inline-flex; align-items: center; gap: 10px; width: fit-content;
	padding: 7px 14px 7px 12px; border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16);
	color: #fff; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: var(--fs-xs);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.fajr-hero .fajr-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sun) 25%, transparent); animation: fajr-blink 2.4s ease-in-out 6; }
.fajr-hero .wp-block-buttons { gap: 10px; margin-block-start: var(--space-6) !important; }
.fajr-hero__visual { position: relative; display: flex; justify-content: center; }
.fajr-hero__visual::before { content: ""; position: absolute; inset: 15% 10% 5%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 160, 70, .28), transparent); filter: blur(10px); z-index: -1; }
.fajr-hero__product { margin: 0 !important; width: min(100%, 560px); }
.fajr-hero__product img { width: 100%; height: auto; filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .55)); }
.fajr-hero__photo { margin: 0 !important; width: min(100%, 560px); }
.fajr-hero__photo img { width: 100%; border-radius: var(--radius-panel); box-shadow: var(--shadow-lg); border: 1px solid rgba(255, 255, 255, .14); }

.fajr-hero__strip {
	width: 100%; max-width: var(--content-max); margin: var(--space-7) auto 0 !important;
	display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-5) var(--space-7);
	padding-top: var(--space-5);
	border-top: 1px solid rgba(255, 255, 255, .14);
}
.fajr-hero__strip > * { margin: 0 !important; }
.fajr-hero__benefits { display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-7); }
.fajr-hero__benefit > * { margin: 0 !important; }
.fajr-hero__benefit-label { font-size: 12px; color: rgba(255, 255, 255, .55) !important; letter-spacing: .02em; }
.fajr-hero__benefit-text { font-size: var(--fs-sm); font-weight: 500; color: #fff; margin-top: 4px !important; }
.fajr-hero__brands { text-align: right; }
.fajr-hero__brands > * { margin: 0 !important; }
.fajr-hero__brands-label { font-size: 12px; color: rgba(255, 255, 255, .55) !important; }
.fajr-hero__brands-list { margin-top: 6px !important; font-family: var(--font-heading); font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; color: rgba(255, 255, 255, .8) !important; }

/* Photo hero (inspiration #3): text bottom-left */
.fajr-hero--photo { justify-content: flex-end; }
.fajr-hero--photo .fajr-hero__inner { flex: 0 0 auto; grid-template-columns: 1fr auto; align-items: end; }
.fajr-hero--photo .fajr-hero__title { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.4rem) !important; max-width: 15ch; }
.fajr-hero--photo .fajr-hero__lead { font-size: var(--fs-base); color: rgba(255, 255, 255, .85) !important; }
.fajr-hero--photo .fajr-hero__content > * + * { margin-block-start: var(--space-3); }
.fajr-hero--photo { min-height: min(92svh, 900px); padding-bottom: clamp(24px, 4vw, 48px) !important; }

@media (max-width: 900px) {
	.fajr-hero { min-height: auto; padding-top: calc(var(--fajr-header-h, 72px) + 32px) !important; }
	.fajr-hero__inner { grid-template-columns: 1fr; }
	.fajr-hero__visual { order: 2; }
	.fajr-hero__product, .fajr-hero__photo { width: min(100%, 420px); }
	.fajr-hero__brands { text-align: left; }
	.fajr-hero--photo { min-height: 86svh; }
	.fajr-hero--photo .fajr-hero__inner { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.fajr-hero__benefits { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
	.fajr-hero .wp-block-buttons { flex-direction: column; align-items: stretch; }
	.fajr-hero .wp-block-buttons .wp-block-button__link { width: 100%; }
}

/* ========== 6. Benefits ========== */
.fajr-benefits { padding-block: clamp(48px, 6vw, 80px); }
.fajr-benefits__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.fajr-benefit {
	margin: 0 !important; padding: 28px; --icon-top: 28px; --icon-left: 28px;
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
	transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) ease;
}
.fajr-benefit:hover { box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--energy) 30%, var(--line)); }
.fajr-benefit > * { margin: 0 !important; }
.fajr-benefit__title { font-size: 1.15rem !important; font-weight: 600; letter-spacing: -.015em; }
.fajr-benefit__text { margin-top: 8px !important; color: var(--muted); font-size: var(--fs-sm); line-height: 1.55; }
@media (max-width: 1000px) { .fajr-benefits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fajr-benefits__grid { grid-template-columns: 1fr; } }

/* ========== 7. Product categories ========== */
.fajr-cats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
.fajr-cat-card {
	position: relative; margin: 0 !important; overflow: hidden;
	display: flex; flex-direction: column;
	padding: 14px; border-radius: 24px;
	background: var(--surface); border: 1px solid var(--line);
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--dur) var(--ease-out), border-color var(--dur) ease;
}
.fajr-cat-card:hover, .fajr-cat-card:focus-within { box-shadow: 0 30px 60px -30px rgba(255, 122, 26, .45), var(--shadow-md); border-color: color-mix(in srgb, var(--energy) 45%, transparent); }
.fajr-cat-card__img {
	margin: 0 !important; aspect-ratio: 1 / .9; display: grid; place-items: center; overflow: hidden;
	border-radius: 16px;
	background:
		radial-gradient(70% 60% at 50% 60%, color-mix(in srgb, var(--sun) 30%, transparent), transparent 70%),
		linear-gradient(180deg, color-mix(in srgb, var(--text) 3%, var(--surface)), color-mix(in srgb, var(--text) 7%, var(--surface)));
}
.fajr-cat-card__img img { width: 78% !important; height: 78% !important; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .22)); transition: transform .6s var(--ease-out); }
.fajr-cat-card:hover .fajr-cat-card__img img { transform: translateY(-8px) scale(1.05); }
.fajr-cat-card__body { padding: 18px 8px 8px; }
.fajr-cat-card__body > * { margin: 0 !important; }
.fajr-cat-card__title { font-size: 1.2rem !important; font-weight: 600; letter-spacing: -.015em; padding-right: 44px; }
.fajr-cat-card__title a { color: inherit; text-decoration: none; }
.fajr-cat-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.fajr-cat-card__text { margin-top: 6px !important; color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; }
.fajr-cat-card::after {
	content: ""; position: absolute; right: 20px; bottom: 22px; width: 34px; height: 34px; border-radius: 50%;
	background: var(--text) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M9 7h8v8' fill='none' stroke='%23F5F4EF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 45% no-repeat;
	transition: transform var(--dur) var(--ease-out), background-color var(--dur) ease;
}
[data-theme="dark"] .fajr-cat-card::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M9 7h8v8' fill='none' stroke='%230B0D0B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.fajr-cat-card:hover::after { transform: rotate(45deg); background-color: var(--energy); }
@media (max-width: 1000px) { .fajr-cats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .fajr-cats__grid { grid-template-columns: 1fr 1fr; gap: 12px; } .fajr-cat-card { padding: 10px; border-radius: 20px; } .fajr-cat-card::after { display: none; } .fajr-cat-card__title { padding-right: 0; font-size: 1rem !important; } .fajr-cat-card__text { display: none; } }

/* ========== 8. Featured products (Woo Product Collection) ========== */
.fajr-products .wc-block-product-template, .fajr-products__grid { gap: var(--space-5) !important; }
.fajr-products .wc-block-product, .fajr-products .wp-block-post { margin: 0 !important; }
.fajr-product-card {
	position: relative; height: 100%; margin: 0 !important;
	display: flex; flex-direction: column; gap: 6px;
	padding: 14px 14px 18px; border-radius: 24px;
	background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
	text-align: left;
	transition: box-shadow var(--dur) var(--ease-out), border-color var(--dur) ease;
}
.fajr-product-card:hover { box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--energy) 35%, transparent); }
.fajr-product-card > * { margin: 0 !important; }
.fajr-product-card__img { margin-bottom: 10px !important; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--text) 3%, var(--surface)), color-mix(in srgb, var(--text) 7%, var(--surface))); }
.fajr-product-card__img img { box-sizing: border-box; width: 100%; aspect-ratio: 1; object-fit: contain !important; padding: 10%; transition: transform .6s var(--ease-out); }
.fajr-product-card:hover .fajr-product-card__img img { transform: scale(1.05); }
.fajr-product-card__cat { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--energy-ink); padding: 0 6px; }
.fajr-product-card__cat a { color: inherit; text-decoration: none; }
.fajr-product-card__title { font-size: 1.02rem !important; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; padding: 0 6px; min-height: 2.6em; }
.fajr-product-card__title a { color: inherit; text-decoration: none; }
.fajr-product-card__price { padding: 0 6px; color: var(--muted); }
.fajr-product-card__price:empty, .fajr-product-card__price .wc-block-components-product-price:empty { display: none; }
.fajr-product-card .wp-block-button, .fajr-product-card .wc-block-components-product-button { margin-top: auto !important; padding: 8px 6px 0; justify-content: flex-start; align-items: flex-start; }
.fajr-product-card .wp-block-button__link {
	border-radius: var(--radius-pill) !important; padding: .7em 1.2em !important; font-size: var(--fs-sm) !important; font-weight: 600;
	background: var(--text) !important; color: var(--bg) !important; border: 0 !important; text-decoration: none;
}
.fajr-product-card .wp-block-button__link:hover { background: var(--energy) !important; color: #1a0e04 !important; }

/* ========== 9. Energy flow ========== */
.fajr-flow__points { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.fajr-flow__point { margin: 0 !important; --icon-tile: 38px; }
.fajr-flow__point::before { margin-bottom: 12px; border-radius: 12px; }
.fajr-flow__point > * { margin: 0 !important; }
.fajr-flow__point-title { font-size: 1.02rem !important; font-weight: 600; }
.fajr-flow__point-text { margin-top: 4px !important; font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; }
.fajr-flow__panel {
	position: relative; padding: clamp(16px, 3vw, 32px);
	border-radius: var(--radius-panel);
	background:
		radial-gradient(60% 50% at 50% 50%, color-mix(in srgb, var(--energy) 10%, transparent), transparent 70%),
		var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-md);
}
.fajr-flow__panel::before {
	content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .55;
	background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
	background-size: 32px 32px;
	-webkit-mask: radial-gradient(70% 70% at 50% 50%, #000, transparent); mask: radial-gradient(70% 70% at 50% 50%, #000, transparent);
}
@media (max-width: 560px) { .fajr-flow__points { grid-template-columns: 1fr; } }

/* Diagram (fajr/energy-flow block; reusable by modules) */
.fajr-ef { position: relative; --ef-sun: #D9A400; }
[data-theme="dark"] .fajr-ef, .fajr-scheme-dark .fajr-ef { --ef-sun: var(--sun); }
.fajr-ef__svg { display: block; width: 100%; height: auto; overflow: visible; }
.fajr-ef__track { fill: none; stroke: color-mix(in srgb, var(--text) 10%, transparent); stroke-width: 8; stroke-linecap: round; }
/* r2: static dotted wire; the travelling dots (inc/blocks.php, transform) show the flow. The old stroke-dashoffset
   march re-rasterised every path of the diagram on every frame. */
.fajr-ef__flow { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 3 13; }
.fajr-ef__flow--sun { stroke: var(--ef-sun); }
.fajr-ef__flow--eco { stroke: var(--eco); }
.fajr-ef__flow--energy { stroke: var(--energy); }
.fajr-ef__flow--sky { stroke: var(--sky); }
.fajr-ef__dot { stroke: #fff; stroke-width: 1.5; }
.fajr-ef__dot--sun { fill: var(--ef-sun); } .fajr-ef__dot--eco { fill: var(--eco); } .fajr-ef__dot--energy { fill: var(--energy); } .fajr-ef__dot--sky { fill: var(--sky); }
.fajr-ef__node { color: var(--text); }
.fajr-ef__disc { fill: var(--surface); stroke: color-mix(in srgb, var(--text) 14%, transparent); stroke-width: 1.5; }
.fajr-ef__halo { fill: none; stroke: color-mix(in srgb, var(--text) 8%, transparent); stroke-width: 1; }
.fajr-ef__node--inverter .fajr-ef__disc { stroke: var(--energy); stroke-width: 2; }
.fajr-ef__node--inverter .fajr-ef__halo { stroke: var(--energy); stroke-width: 2; opacity: .5; transform-box: fill-box; transform-origin: center; animation: fajr-halo 2.4s ease-out infinite; }
.fajr-ef__label { font-family: var(--font-body); font-size: 15px; font-weight: 600; fill: var(--text); letter-spacing: -.01em; }
.fajr-ef__charge { transform-box: fill-box; transform-origin: 50% 100%; animation: fajr-charge 3.2s ease-in-out infinite; }
@keyframes fajr-halo { 0% { transform: scale(.85); opacity: .7; } 100% { transform: scale(1.25); opacity: 0; } }
@keyframes fajr-charge { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }

/* ========== 10. Orange linking steps (inspiration #2) ========== */
.fajr-steps { position: relative; max-width: 1000px; margin-inline: auto !important; display: flex; flex-direction: column; gap: clamp(44px, 6vw, 72px); }
.fajr-step {
	position: relative; z-index: 1; margin: 0 !important;
	width: min(560px, 60%);
	padding: 24px 28px 28px;
	border-radius: 22px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--surface) 82%, transparent));
	border: 1px solid var(--line);
	box-shadow: var(--shadow-md);
}
[data-theme="dark"] .fajr-step, .fajr-scheme-dark .fajr-step {
	background: linear-gradient(180deg, #1b1e1b, #121412);
	border-color: rgba(255, 255, 255, .08);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 30px 60px -30px rgba(0, 0, 0, .8);
}
.fajr-step:nth-of-type(even) { margin-left: auto !important; }
.fajr-step:first-of-type { padding-top: 52px; }
.fajr-step:first-of-type::before {
	content: ""; position: absolute; left: 18px; right: 18px; top: 16px; height: 18px; border-radius: 6px;
	background:
		radial-gradient(circle at 6px 9px, #FF5F57 4px, transparent 4.5px),
		radial-gradient(circle at 20px 9px, #FEBC2E 4px, transparent 4.5px),
		radial-gradient(circle at 34px 9px, #28C840 4px, transparent 4.5px),
		linear-gradient(90deg, transparent 50px, color-mix(in srgb, var(--text) 7%, transparent) 50px);
}
/* Lit card (kit.js): overlay that only fades (compositor). */
.fajr-step::after {
	content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0;
	border: 1px solid color-mix(in srgb, var(--energy) 60%, transparent);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--energy) 35%, transparent), 0 0 36px -8px rgba(255, 122, 26, .45);
	transition: opacity .5s ease;
}
.fajr-step.is-lit::after { opacity: 1; }
.fajr-step > * { margin: 0 !important; }
.fajr-step__num { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--energy-ink); }
.fajr-step__title { margin-top: 10px !important; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem) !important; font-weight: 500; letter-spacing: -.025em; }
.fajr-step__text { margin-top: 10px !important; color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; }
.fajr-step .wp-block-buttons { margin-top: 18px !important; }
.fajr-step:has(.fajr-step__options) { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; align-content: start; width: min(640px, 66%); }
.fajr-step:has(.fajr-step__options) > :not(.fajr-step__options) { grid-column: 1; }
.fajr-step__options { grid-column: 2; grid-row: 1 / span 3; align-self: center; list-style: none; padding: 0 !important; display: grid; gap: 8px; }
.fajr-step__options li {
	position: relative; margin: 0; padding: 11px 14px 11px 40px;
	border-radius: 12px; border: 1px solid var(--line);
	background: color-mix(in srgb, var(--text) 3%, transparent);
	font-size: var(--fs-sm); font-weight: 500;
}
.fajr-step__options li::before { content: ""; position: absolute; left: 14px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--text) 40%, transparent); }
.fajr-step__options li.is-active { border-color: color-mix(in srgb, var(--energy) 70%, transparent); background: color-mix(in srgb, var(--energy) 10%, transparent); box-shadow: 0 0 18px -6px rgba(255, 122, 26, .5); }
.fajr-step__options li.is-active::before { border-color: var(--energy); background: radial-gradient(circle, var(--energy) 0 3.5px, transparent 4px); }

.fajr-steps__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.fajr-wire { fill: none; stroke: var(--energy); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .95; }
/* Glow = wide faint stroke (no SVG blur filter). */
.fajr-wire__glow { fill: none; stroke: var(--energy); stroke-width: 8; opacity: .18; stroke-linecap: round; stroke-linejoin: round; }
.fajr-wire__spark { fill: none; stroke: #FFE7C2; stroke-width: 3; stroke-linecap: round; opacity: 0; }
.fajr-wire__dot { fill: var(--energy); }
.fajr-wire__pulse { fill: var(--energy); opacity: .5; transform-box: fill-box; transform-origin: center; animation: fajr-pulse 1.8s ease-out infinite; }
.fajr-wire__dot { animation: fajr-blink 1.8s ease-in-out infinite; }
.fajr-steps:not(.is-inview) .fajr-steps__wires * { animation-play-state: paused !important; }
@keyframes fajr-pulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes fajr-blink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

@media (max-width: 760px) {
	.fajr-steps { padding-left: 30px; gap: 28px; }
	.fajr-step, .fajr-step:has(.fajr-step__options) { width: 100%; margin-left: 0 !important; display: block; }
	.fajr-step__options { margin-top: 16px !important; }
	.fajr-step { padding: 20px 20px 22px; }
	.fajr-step:first-of-type { padding-top: 46px; }
}

/* ========== 11. Calculator teaser (dashboard, inspiration #4) ========== */
.fajr-dash {
	position: relative; isolation: isolate;
	padding: clamp(18px, 3vw, 28px); border-radius: var(--radius-panel);
	background: var(--glass);
	border: 1px solid var(--glass-border);
	-webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
	box-shadow: var(--shadow-lg);
}
.fajr-dash::before {
	content: ""; position: absolute; inset: -12% -8%; z-index: -1; border-radius: 40px; filter: blur(40px); opacity: .8;
	background: radial-gradient(40% 50% at 25% 30%, color-mix(in srgb, var(--sky) 45%, transparent), transparent 70%), radial-gradient(40% 50% at 80% 70%, color-mix(in srgb, var(--sun) 55%, transparent), transparent 70%);
}
.fajr-dash > * { margin: 0 !important; }
.fajr-dash__head { gap: 12px; align-items: center; }
.fajr-dash__head > * { margin: 0 !important; }
.fajr-dash__title { font-family: var(--font-heading); font-weight: 600; font-size: 1.1rem; letter-spacing: -.015em; }
.fajr-dash__tiles { margin-top: 18px !important; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fajr-dash__tile { margin: 0 !important; padding: 16px; --icon-tile: 34px; --icon-top: 16px; --icon-left: 16px; border-radius: 18px; background: color-mix(in srgb, var(--surface) 80%, transparent); border: 1px solid var(--line); }
.fajr-dash__tile::before { margin-bottom: 12px; border-radius: 10px; }
.fajr-dash__tile.fajr-icon--battery::before { background: color-mix(in srgb, var(--eco) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eco) 40%, transparent); }
.fajr-dash__tile.fajr-icon--bolt::before { background: color-mix(in srgb, var(--sky) 20%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sky) 40%, transparent); }
.fajr-dash__tile > * { margin: 0 !important; }
.fajr-dash__label { font-size: 12px; color: var(--muted); }
.fajr-dash__value { margin-top: 2px !important; font-family: var(--font-heading); font-size: clamp(1.05rem, .9rem + .7vw, 1.45rem); font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.fajr-dash__sub { font-size: 12px; color: var(--eco); font-weight: 600; }
.fajr-dash__chart {
	margin-top: 12px !important; padding: 14px 16px; min-height: 170px;
	display: flex; gap: 16px; align-items: flex-start;
	border-radius: 18px; background-color: color-mix(in srgb, var(--surface) 80%, transparent); border: 1px solid var(--line);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23F3C93A' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23F3C93A' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 120 L60 118 C110 112 140 30 200 22 C260 30 290 112 340 118 L400 120 Z' fill='url(%23g)'/%3E%3Cpath d='M60 118 C110 112 140 30 200 22 C260 30 290 112 340 118' fill='none' stroke='%23E0A800' stroke-width='2.5'/%3E%3Cpath d='M0 92 C40 90 60 70 90 74 S150 88 200 86 S260 70 300 52 S360 40 400 70' fill='none' stroke='%233B82F6' stroke-width='2.5' stroke-dasharray='6 5'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 70%;
}
.fajr-dash__chart > * { margin: 0 !important; }
.fajr-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--muted); }
.fajr-legend::before { content: ""; width: 10px; height: 10px; border-radius: 3px; }
.fajr-legend--sun::before { background: #F3C93A; }
.fajr-legend--sky::before { background: #3B82F6; }
.fajr-dash__caption { margin-top: 12px !important; font-size: 12px; line-height: 1.5; color: var(--muted); }
@media (max-width: 520px) { .fajr-dash__tiles { grid-template-columns: 1fr; } .fajr-dash__tile { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 12px; } .fajr-dash__tile::before { grid-row: span 2; margin: 0; } .fajr-dash__tile::after { top: calc(50% - 8.5px); } .fajr-dash__sub { grid-column: 3; grid-row: 1 / span 2; } }

/* ========== 12. OAX promo ========== */
.fajr-oax-promo__panel {
	position: relative; overflow: hidden; isolation: isolate;
	padding: clamp(28px, 5vw, 64px) !important; border-radius: var(--radius-panel);
	background: radial-gradient(50% 70% at 85% 30%, rgba(255, 138, 43, .22), transparent 70%), radial-gradient(40% 60% at 10% 100%, rgba(243, 227, 90, .10), transparent 70%), #0B0D0B;
	border: 1px solid rgba(255, 255, 255, .08);
}
.fajr-oax-promo__panel::after {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 1;
	background: linear-gradient(90deg, transparent, rgba(255, 138, 43, .9), transparent);
}
.fajr-oax-promo__logo { margin: 0 !important; }
.fajr-oax-promo__logo img { width: 112px; height: auto; }
.fajr-oax-promo__facts { font-family: var(--font-heading); font-weight: 600; font-size: 1.05rem; color: var(--sun) !important; }
.fajr-oax-promo__img { margin: 0 !important; }
.fajr-oax-promo__img img { width: 100%; height: auto; border-radius: 20px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); border: 1px solid rgba(255, 255, 255, .1); }
.fajr-oax-promo .wp-block-buttons { gap: 10px; }

/* ========== 13. Latest posts ========== */
.fajr-posts .wp-block-post-template { gap: var(--space-5) !important; }
.fajr-post-card {
	height: 100%; margin: 0 !important; overflow: hidden; display: flex; flex-direction: column;
	border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
	transition: box-shadow var(--dur) var(--ease-out), border-color var(--dur) ease;
}
.fajr-post-card:hover { box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--energy) 30%, transparent); }
.fajr-post-card > * { margin: 0 !important; }
.fajr-post-card__img { overflow: hidden; }
.fajr-post-card__img img { transition: transform .7s var(--ease-out); }
.fajr-post-card:hover .fajr-post-card__img img { transform: scale(1.04); }
.fajr-post-card__body { padding: 20px 22px 24px; }
.fajr-post-card__body > * { margin: 0 !important; }
.fajr-post-card__date { font-size: 13px; color: var(--muted); }
.fajr-post-card__title { margin-top: 8px !important; font-size: 1.15rem !important; font-weight: 600; line-height: 1.3; letter-spacing: -.015em; }
.fajr-post-card__title a { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--dur) var(--ease-out); }
.fajr-post-card__title a:hover { background-size: 100% 1px; }
.fajr-post-card__excerpt { margin-top: 10px !important; font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; }
.fajr-post-card__excerpt .wp-block-post-excerpt__more-text { display: none; }

/* ========== 14. CTA band ========== */
.fajr-cta {
	position: relative; overflow: hidden; isolation: isolate; text-align: center;
	padding: clamp(40px, 7vw, 88px) clamp(20px, 5vw, 64px) !important;
	border-radius: var(--radius-panel);
	background: radial-gradient(60% 80% at 50% 0%, rgba(255, 138, 43, .25), transparent 70%), radial-gradient(40% 60% at 100% 100%, rgba(96, 165, 250, .12), transparent 70%), #0B0D0B;
	border: 1px solid rgba(255, 255, 255, .08);
}
/* Static energy line + light band (transform/opacity, 4 passes). */
.fajr-cta::before {
	content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 2px; z-index: 1;
	background: linear-gradient(90deg, transparent, var(--energy) 22%, var(--energy) 78%, transparent);
	box-shadow: 0 0 18px rgba(255, 122, 26, .8);
}
.fajr-cta::after {
	content: ""; position: absolute; left: 10%; top: 0; width: 16%; height: 2px; z-index: 2; pointer-events: none;
	background: linear-gradient(90deg, transparent, #FFE7C2, transparent); opacity: 0;
	animation: fajr-shine 4s linear 4;
}
.fajr-cta > * { margin-inline: auto !important; }
.fajr-cta__title { margin: 0 auto !important; max-width: 20ch; font-size: var(--fs-3xl) !important; line-height: 1.06; letter-spacing: -.03em; text-wrap: balance; }
.fajr-cta__text { margin-top: var(--space-4) !important; max-width: 52ch; color: var(--muted); font-size: var(--fs-lg); }
.fajr-cta .wp-block-buttons { margin-top: var(--space-6) !important; justify-content: center; gap: 10px; }
@keyframes fajr-shine { 0% { transform: translateX(0); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateX(400%); opacity: 0; } }

/* ========== 15. Spec tiles ========== */
.fajr-specs__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.fajr-spec {
	position: relative; overflow: hidden; margin: 0 !important; padding: 28px 28px 26px;
	border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line);
	transition: box-shadow var(--dur) var(--ease-out), border-color var(--dur) ease;
}
.fajr-spec::before { content: ""; position: absolute; left: 28px; top: 0; width: 36px; height: 3px; border-radius: 0 0 3px 3px; background: var(--energy); box-shadow: var(--energy-glow); }
.fajr-spec:hover { box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--energy) 35%, transparent); }
.fajr-spec > * { margin: 0 !important; }
.fajr-spec__value { font-family: var(--font-heading); font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.75rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; }
.fajr-spec__label { margin-top: 8px !important; color: var(--muted); font-size: var(--fs-sm); }
@media (max-width: 860px) { .fajr-specs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .fajr-spec { padding: 22px 18px 20px; } .fajr-spec::before { left: 18px; } }

/* ========== 16. Testimonials (empty template) ========== */
.fajr-testimonials__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.fajr-testimonial { margin: 0 !important; padding: 28px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line); }
.fajr-testimonial__quote { margin: 0; padding: 0; border: 0; font-size: var(--fs-lg); }
.fajr-testimonial__quote cite { display: block; margin-top: 16px; font-size: var(--fs-sm); font-style: normal; color: var(--muted); }
@media (max-width: 860px) { .fajr-testimonials__grid { grid-template-columns: 1fr; } }

/* ========== 17. Footer ========== */
.fajr-footer { padding: var(--space-5) var(--gutter) var(--space-5) !important; margin-block-start: 0 !important; }
.wp-block-template-part:has(> .fajr-footer) { margin-block-start: 0 !important; }
.fajr-footer__panel { padding: clamp(32px, 5vw, 56px) clamp(22px, 4vw, 48px) 24px !important; border-radius: var(--radius-panel); background: var(--surface); border: 1px solid var(--line); max-width: 1360px !important; margin-inline: auto !important; }
.fajr-footer__grid { display: grid; grid-template-columns: minmax(220px, 1.6fr) repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-6); }
.fajr-footer__grid > * { margin: 0 !important; min-width: 0; }
@media (max-width: 720px) { .fajr-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-5); } .fajr-footer__brand { grid-column: 1 / -1; } }
.fajr-footer__col:not(:has(*)) { display: none; }
.fajr-footer__logo { gap: 10px; }
.fajr-footer__title { margin: 0; font-family: var(--font-heading); font-size: 1.35rem; font-weight: 600; letter-spacing: -.02em; }
.fajr-footer__title a { color: inherit; text-decoration: none; }
.fajr-footer__about { margin-top: 16px !important; max-width: 36ch; color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; }
.fajr-footer__heading { margin: 0 0 14px !important; font-family: var(--font-body); font-size: 12px !important; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.fajr-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fajr-footer__links li { margin: 0; line-height: 1.4; }
.fajr-footer__links a, .fajr-contact-info a { color: var(--text); text-decoration: none; font-size: var(--fs-sm); }
.fajr-footer__links a:hover, .fajr-contact-info a:hover { color: var(--energy-ink); }
.fajr-contact-info { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: var(--fs-sm); }
.fajr-contact-info li { display: grid; gap: 2px; }
.fajr-contact-info__label { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.fajr-contact-info--empty { font-size: 13px; color: var(--muted); font-style: italic; }
.fajr-footer__bottom { margin-top: var(--space-7) !important; padding-top: var(--space-4); border-top: 1px solid var(--line); align-items: center; }
.fajr-footer__bottom > * { margin: 0 !important; }
.fajr-footer__copy { font-size: 13px; color: var(--muted); }

/* ========== 18. Motion: reveal, tilt, float ========== */
/* Reveal (perf-lab F1): visible by default; kit.js hides only below-the-fold elements (.is-pending) until they scroll in. */
@media screen and (prefers-reduced-motion: no-preference) {
	.fajr-js .fajr-reveal.is-pending:not(.is-revealed) { opacity: 0; transform: translate3d(0, 22px, 0); }
	.fajr-js .fajr-reveal.is-revealing { transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); transition-delay: var(--fajr-delay, 0ms); }
}
@media (prefers-reduced-motion: no-preference) {
	.fajr-float img { animation: fajr-float 7s ease-in-out 3; }
}
/* K4: hero content is never hidden. */
:is(.fajr-hero, .oaxh-hero, .fajr-hero--page) .fajr-reveal,
:is(.fajr-hero, .oaxh-hero, .fajr-hero--page).fajr-reveal { opacity: 1 !important; transform: none !important; animation: none !important; }
/* Hover tilt: transform only while tilting (no permanent layer per card). */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
	.fajr-tilt { transition: transform .45s var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) ease; }
	.fajr-tilt.is-tilting {
		transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
		transition-duration: .12s, var(--dur), var(--dur);
	}
}
@keyframes fajr-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
/* K5: .is-offscreen (kit.js) pauses everything inside. Infinite loops run only while kit.js reports them on screen
   (.is-inview): never before or without kit.js, never after their rest. New loop containers: add data-fajr-anim. */
.is-offscreen::before, .is-offscreen::after, .is-offscreen *, .is-offscreen *::before, .is-offscreen *::after,
:is([data-fajr-anim], .fajr-ef, .oaxh-flow__track, .fsc-head, .fsc-links, .fsc-flow-host):not(.is-inview) *,
:is([data-fajr-anim], .fajr-ef, .oaxh-flow__track, .fsc-head, .fsc-links, .fsc-flow-host):not(.is-inview) *::before,
:is([data-fajr-anim], .fajr-ef, .oaxh-flow__track, .fsc-head, .fsc-links, .fsc-flow-host):not(.is-inview) *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
	.fajr-ef__dot, .fajr-wire__spark, .fajr-wire__pulse { display: none; }
	.fajr-ef__flow { stroke-dasharray: none; opacity: .7; }
}

/* ========== 19. Editor tweaks ========== */
.editor-styles-wrapper .fajr-hero { min-height: 640px; }
.editor-styles-wrapper .wp-block-template-part:has(> .fajr-header) { position: relative; top: 0; }
.editor-styles-wrapper .fajr-header__bar { background: #2b2d29; color: #fff; }

/* Products: two per row on phones */
@media (max-width: 600px) {
	.fajr-products .wc-block-product-template { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
	.fajr-products .wc-block-product-template > li { width: auto !important; max-width: none !important; margin: 0 !important; }
	.fajr-product-card { padding: 10px 10px 14px; border-radius: 20px; }
	.fajr-product-card__title { font-size: .9rem !important; min-height: 0; }
	.fajr-product-card__cat { font-size: 10px; }
	.fajr-product-card .wp-block-button__link { padding: .6em 1em !important; font-size: 13px !important; }
}
.fajr-steps { margin-top: var(--space-8) !important; }

/* Mobile sheet refinements */
.fajr-header .is-menu-open :is(li:has(> .fajr-nav-mobile-cta), .fajr-nav-mobile-cta) { order: 99; }
.fajr-header .is-menu-open .wp-block-navigation__submenu-container {
	position: static !important; background: transparent !important; border: 0 !important; box-shadow: none !important;
	-webkit-backdrop-filter: none !important; backdrop-filter: none !important; min-width: 0 !important; width: 100%; align-items: flex-start !important;
}
.fajr-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { justify-content: flex-start; }
.fajr-header .is-menu-open .wp-block-navigation-item__content:focus-visible { outline: 2px solid var(--energy); outline-offset: -2px; border-radius: 10px; }
.fajr-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { width: 100%; }
.fajr-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { width: 100%; text-align: left; }
/* ui-bugs F4: no ring on tap-open (core focuses the first link); keyboard keeps :focus-visible above. */
.fajr-header .is-menu-open .wp-block-navigation-item__content:focus:not(:focus-visible) { outline: none; }
.fajr-header .is-menu-open .wp-block-navigation-submenu { flex-direction: column; align-items: stretch !important; }
.fajr-header .is-menu-open .wp-block-navigation__submenu-container { width: 100% !important; align-self: stretch; left: 0 !important; }
@media (max-width: 600px) { .fajr-ef__label { font-size: 23px; } .fajr-ef__dot { r: 6px; } }

/* 2026-10-13 (task E): the dashboard glow (.fajr-dash::before, inset -8%) overflowed the viewport when the teaser stacks (~768px). */
.fajr-calc-teaser { overflow-x: clip; }
/* 2026-10-13 (task E): green sub-labels were 3.3:1 on white in light mode -> darker green (AA). */
:root:not([data-theme="dark"]) .fajr-dash__sub { color: #1D7443; }
/* 2026-10-13 (task D, QA M1): header ghost pill ("Call us") on the light scrolled bar: dark text instead of white-on-grey (was 2.07:1). */
:root:not([data-theme="dark"]) .fajr-header.is-scrolled .wp-block-button.is-style-fajr-ghost > .wp-block-button__link,
html:not(:has(.fajr-hero)):not([data-theme="dark"]) .fajr-header .wp-block-button.is-style-fajr-ghost > .wp-block-button__link {
	background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--text); border-color: color-mix(in srgb, var(--text) 22%, transparent);
}
/* 2026-10-13 (task D, QA minor): focus ring >= 3:1 on light backgrounds (--energy is 2.6:1 there); dark areas keep their own --energy-ink. */
:root:not([data-theme="dark"]) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: var(--energy-ink); }

/* ========== 20. Phones (< 760px) and Save-Data (html.fajr-lite): no blur, no ambient loops ========== */
@media (max-width: 759.98px) {
	.fajr-glass, .is-style-fajr-glass, .fajr-header__bar, .fajr-dash, .fajr-hero .fajr-eyebrow,
	.fajr-header :is(.fajr-theme-toggle, .wp-block-navigation__responsive-container-open, .wp-block-navigation__container, .wp-block-button__link),
	.fajr-header .wp-block-navigation__responsive-container.is-menu-open { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
	.fajr-glass, .is-style-fajr-glass { background: color-mix(in srgb, var(--surface) 90%, transparent); }
	/* Bar + sheet lie over scrolling text: without blur any translucency shows it through (ghost text), so solid. */
	.fajr-header__bar, .fajr-header.is-scrolled .fajr-header__bar { --fajr-bar-bg: var(--surface); background: var(--fajr-bar-bg); }
	.fajr-header .wp-block-navigation__responsive-container.is-menu-open { --fajr-bar-bg: var(--bg); background: var(--fajr-bar-bg) !important; }
	.fajr-dash { background: color-mix(in srgb, var(--surface) 86%, transparent); }
}
@media (max-width: 759.98px) {
	.fajr-hero .fajr-eyebrow::before, .fajr-float img, .fajr-cta::after, .fajr-ef__halo, .fajr-ef__charge, .fajr-wire__dot { animation: none !important; }
	.fajr-ef__dot, .fajr-wire__spark, .fajr-wire__pulse { display: none; }
	.fajr-ef__flow { stroke-dasharray: none; opacity: .7; }
}
.fajr-lite .fajr-hero .fajr-eyebrow::before, .fajr-lite .fajr-float img, .fajr-lite .fajr-cta::after,
.fajr-lite .fajr-ef__halo, .fajr-lite .fajr-ef__charge, .fajr-lite .fajr-wire__dot { animation: none !important; }
.fajr-lite :is(.fajr-ef__dot, .fajr-wire__spark, .fajr-wire__pulse) { display: none; }
.fajr-lite .fajr-ef__flow { stroke-dasharray: none; opacity: .7; }