/*! Alef Blocks 0.38.39 — generated, do not edit. */

/* --- audio --- */
/*
 * alef/audio — every visual value is a token (Alef_Blocks\Styles), with a neutral fallback.
 */

.alef-audio {
	margin: 0 0 24px;
	padding: var(--alef-audio-padding, 16px);
	background: var(--alef-audio-bg, #f7f7f8);
	border: 1px solid var(--alef-audio-border-color, #e3e6e8);
	border-radius: var(--alef-audio-radius, 8px);
}

.alef-audio__head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0 0 10px;
}

.alef-audio__title {
	font-size: var(--alef-audio-title-size, 1em);
	font-weight: 700;
	color: var(--alef-audio-title-color, inherit);
	margin: 0;
}

.alef-audio__duration {
	font-size: 0.85em;
	color: var(--alef-muted, #5c6971);
}

/* The player is the browser's native one; we only make its width full. */
.alef-audio__player {
	display: block;
	width: 100%;
}

.alef-audio-editor__empty {
	margin: 0;
	opacity: 0.7;
	font-size: 0.9em;
}

/* --- blog --- */
/**
 * alef/blog — a featured-posts slider + category tabs + a grid, and a horizontal strip layout.
 *
 * Rules:
 *  - Colours are always `var(--alef-…, neutral-fallback)`. No brand colour here.
 *  - Horizontal scrolling uses native `scroll-snap`; swipe/scroll works without JS too.
 *  - Image selectors are `… img`, not `… > img`, because alef-image-optim rewrites the output to
 *    `<picture><img></picture>` and the direct child is no longer an img.
 */

.alef-blog {
	--ab-gap: var(--alef-blog-gap, 20px);
	--ab-radius: var(--alef-blog-radius, var(--alef-radius, 10px));
	--ab-border: var(--alef-blog-border-color, var(--alef-border-color, #e3e6e8));
	--ab-surface: var(--alef-blog-card-bg, var(--alef-surface, #ffffff));
	--ab-muted: var(--alef-blog-meta-color, var(--alef-muted, #5c6971));
	--ab-accent: var(--alef-blog-accent, var(--alef-accent, #7c3aed));
}

.alef-blog__heading {
	margin: 0 0 var(--ab-gap);
}

/* ------------------------------------------------------------ featured posts */

.alef-blog__featured {
	position: relative;
	margin-bottom: calc(var(--ab-gap) * 1.6);
}

.alef-blog__featured-track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.alef-blog__featured-track::-webkit-scrollbar {
	display: none;
}

.alef-blog__slide {
	flex: 0 0 100%;
	min-width: 0;
	scroll-snap-align: start;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp(16px, 3vw, 36px);
	background: var(--ab-surface);
	border: 1px solid var(--ab-border);
	border-radius: var(--ab-radius);
	overflow: hidden;
}

/* The image side: the value comes from PHP (1 or 2) and already accounts for the page direction. */
.alef-blog__slide-media {
	order: var(--ab-media-order, 2);
	display: block;
	align-self: stretch;
	min-height: 100%;
}

.alef-blog__slide-media img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: var(--alef-blog-featured-height, 300px);
	object-fit: cover;
}

.alef-blog__slide-body {
	order: 1;
	min-width: 0;
	padding: clamp(16px, 3vw, 32px);
}

.alef-blog__slide-title {
	margin: 0.35em 0 0;
	font-size: var(--alef-blog-featured-title-size, clamp(1.15rem, 2.4vw, 1.75rem));
	line-height: 1.7;
}

.alef-blog__slide-excerpt {
	margin: 0.7em 0 0;
	color: var(--alef-blog-excerpt-color, inherit);
	line-height: 2.05;
}

/* ------------------------------------------------------- arrows and dots */

.alef-blog__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--ab-border);
	border-radius: 50%;
	background: var(--ab-surface);
	color: inherit;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
}

.alef-blog__nav:hover,
.alef-blog__nav:focus-visible {
	border-color: var(--ab-accent);
	color: var(--ab-accent);
}

.alef-blog__nav[disabled] {
	opacity: 0.35;
	cursor: default;
	box-shadow: none;
}

/* Logical properties: in RTL they swap by themselves and "previous" always stays at the line's start, with no
separate RTL stylesheet. */
.alef-blog__nav--prev {
	inset-inline-start: -8px;
}

.alef-blog__nav--next {
	inset-inline-end: -8px;
}

/* No arrows on mobile — swiping is more natural and an arrow would sit on the image. */
@media (max-width: 767px) {
	.alef-blog__nav {
		display: none;
	}
}

.alef-blog__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 14px;
}

.alef-blog__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ab-border);
	cursor: pointer;
}

.alef-blog__dot[aria-current="true"] {
	background: var(--ab-accent);
	transform: scale(1.25);
}

/* ------------------------------------------------------------------ tabs */

.alef-blog__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: var(--ab-gap);
	padding-bottom: 2px;
}

.alef-blog__tab {
	padding: var(--alef-blog-tab-padding-y, 8px) var(--alef-blog-tab-padding-x, 16px);
	border: 1px solid var(--ab-border);
	border-radius: var(--alef-blog-tab-radius, 999px);
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.9em;
	line-height: 1.8;
	cursor: pointer;
	white-space: nowrap;
}

.alef-blog__tab:hover,
.alef-blog__tab:focus-visible {
	border-color: var(--ab-accent);
	color: var(--ab-accent);
}

.alef-blog__tab[aria-pressed="true"] {
	background: var(--ab-accent);
	border-color: var(--ab-accent);
	color: var(--alef-blog-tab-active-color, #ffffff);
}

/* Mobile: the tab bar scrolls horizontally instead of wrapping onto several lines. */
@media (max-width: 575px) {
	.alef-blog__tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.alef-blog__tabs::-webkit-scrollbar {
		display: none;
	}
}

/* ------------------------------------------------------------------ grid */

.alef-blog__grid {
	display: grid;
	grid-template-columns: repeat(var(--ab-cols, 3), minmax(0, 1fr));
	gap: var(--ab-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.alef-blog__item {
	margin: 0;
	list-style: none;
}

.alef-blog__empty {
	margin: var(--ab-gap) 0 0;
	color: var(--ab-muted);
	text-align: center;
}

/* ------------------------------------------------------------ horizontal strip */

.alef-blog__strip {
	position: relative;
}

.alef-blog__strip-track {
	display: flex;
	gap: var(--ab-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.alef-blog__strip-track::-webkit-scrollbar {
	display: none;
}

.alef-blog__strip-track > .alef-blog__item {
	flex: 0 0 calc((100% - (var(--ab-strip, 3) - 1) * var(--ab-gap)) / var(--ab-strip, 3));
	min-width: 0;
	scroll-snap-align: start;
}

/* ------------------------------------------------------------------ card */

.alef-blog__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--ab-surface);
	border: 1px solid var(--ab-border);
	border-radius: var(--ab-radius);
	overflow: hidden;
}

.alef-blog__thumb {
	display: block;
}

.alef-blog__thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--alef-blog-thumb-ratio, 16 / 10);
	object-fit: cover;
}

.alef-blog__card-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: var(--alef-blog-card-padding, 16px);
}

.alef-blog__card-title {
	margin: 0.3em 0 0;
	font-size: var(--alef-blog-card-title-size, 1.02rem);
	line-height: 1.9;
}

.alef-blog__excerpt {
	margin: 0.55em 0 0;
	font-size: 0.9em;
	line-height: 2;
	color: var(--alef-blog-excerpt-color, inherit);
}

/* The meta always sticks to the card's bottom so cards in one row have aligned meta lines. */
.alef-blog__meta {
	margin: auto 0 0;
	padding-top: 0.7em;
	font-size: 0.8em;
	color: var(--ab-muted);
}

.alef-blog__sep {
	margin: 0 0.45em;
	opacity: 0.6;
}

.alef-blog__cat a,
.alef-blog__meta a {
	color: inherit;
	text-decoration: none;
}

.alef-blog__cat {
	margin: 0;
	font-size: 0.78em;
	font-weight: 600;
	color: var(--ab-accent);
}

.alef-blog__card-title a,
.alef-blog__slide-title a {
	color: inherit;
	text-decoration: none;
}

.alef-blog__card-title a:hover,
.alef-blog__slide-title a:hover,
.alef-blog__cat a:hover {
	text-decoration: underline;
}

.alef-blog__more {
	margin-top: 0.8em;
	font-size: 0.85em;
	font-weight: 600;
	color: var(--ab-accent);
	text-decoration: none;
}

.alef-blog__btn {
	display: inline-block;
	margin-top: 1.2em;
	padding: var(--alef-blog-btn-padding-y, 10px) var(--alef-blog-btn-padding-x, 22px);
	border-radius: var(--alef-blog-btn-radius, 6px);
	background: var(--alef-blog-btn-bg, var(--ab-accent));
	color: var(--alef-blog-btn-color, #ffffff);
	font-size: 0.92em;
	font-weight: 600;
	text-decoration: none;
}

.alef-blog__btn:hover,
.alef-blog__btn:focus-visible {
	filter: brightness(0.92);
	color: var(--alef-blog-btn-color, #ffffff);
}

/* Screen-reader-only text — the theme may lack this class, so we define it ourselves (a duplicate definition in the
theme is harmless). */
.alef-blog .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 1024px) {
	.alef-blog__grid {
		grid-template-columns: repeat(var(--ab-cols-t, 2), minmax(0, 1fr));
	}

	.alef-blog__strip-track > .alef-blog__item {
		flex-basis: calc((100% - (var(--ab-strip-t, 2) - 1) * var(--ab-gap)) / var(--ab-strip-t, 2));
	}
}

@media (max-width: 767px) {
	/* The featured slide on mobile is one column: image on top, text below. */
	.alef-blog__slide {
		grid-template-columns: 1fr;
	}

	.alef-blog__slide-media {
		order: 1;
	}

	.alef-blog__slide-body {
		order: 2;
	}

	.alef-blog__slide-media img {
		min-height: 0;
		aspect-ratio: var(--alef-blog-thumb-ratio, 16 / 10);
	}

	.alef-blog__grid {
		grid-template-columns: repeat(var(--ab-cols-m, 1), minmax(0, 1fr));
	}

	.alef-blog__strip-track > .alef-blog__item {
		flex-basis: calc((100% - (var(--ab-strip-m, 1) - 1) * var(--ab-gap)) / var(--ab-strip-m, 1));
	}
}

@media (prefers-reduced-motion: reduce) {
	.alef-blog__featured-track,
	.alef-blog__strip-track {
		scroll-behavior: auto;
	}

	.alef-blog__dot[aria-current="true"] {
		transform: none;
	}
}

/* --------------------------------------------------------- editor preview */

.alef-blog-editor {
	border: 1px dashed #949494;
	border-radius: 6px;
	padding: 14px;
}

.alef-blog-editor__label {
	margin: 0 0 6px;
	font-size: 11px;
	color: #757575;
}

.alef-blog-editor__summary {
	margin: 0;
	font-size: 13px;
	line-height: 2;
}

.alef-blog-editor__picked {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
	font-size: 12px;
}

.alef-blog-editor__picked li {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 3px 0;
	border-bottom: 1px solid #f0f0f1;
}

.alef-blog-editor__picked li span {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.alef-blog-editor__results {
	max-height: 190px;
	overflow-y: auto;
	margin: 6px 0 0;
	border: 1px solid #dcdcde;
	border-radius: 4px;
}

.alef-blog-editor__results button {
	display: block;
	width: 100%;
	padding: 6px 8px;
	border: 0;
	border-bottom: 1px solid #f0f0f1;
	background: transparent;
	font: inherit;
	font-size: 12px;
	text-align: start;
	cursor: pointer;
}

.alef-blog-editor__results button:hover {
	background: #f0f0f1;
}

/* --- callout --- */
/*
 * alef/callout — replaces the .highlight-box that used to be repeated in each article's raw HTML. Four variants, each
 * with its own colour token.
 */

.alef-callout {
	background: var(--alef-callout-bg, #f7f7f8);
	border-inline-start: var(--alef-callout-bar-width, 4px) solid var(--alef-callout-bar-color, #9aa1a8);
	border-radius: var(--alef-callout-radius, 6px);
	padding: var(--alef-callout-padding, 16px 18px);
	margin: 0 0 24px;
	color: var(--alef-callout-text, inherit);
}

.alef-callout__title {
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--alef-callout-title-color, inherit);
}

.alef-callout__body > :last-child {
	margin-bottom: 0;
}

.alef-callout--info {
	--alef-callout-bg: var(--alef-callout-info-bg, #eef4fb);
	--alef-callout-bar-color: var(--alef-callout-info-bar, #3b82c4);
}

.alef-callout--tip {
	--alef-callout-bg: var(--alef-callout-tip-bg, #eef8f0);
	--alef-callout-bar-color: var(--alef-callout-tip-bar, #3f9b57);
}

.alef-callout--warning {
	--alef-callout-bg: var(--alef-callout-warning-bg, #fdf3ea);
	--alef-callout-bar-color: var(--alef-callout-warning-bar, #d4802a);
}

.alef-callout--note {
	--alef-callout-bg: var(--alef-callout-note-bg, #f4f2f8);
	--alef-callout-bar-color: var(--alef-callout-note-bar, #7c3aed);
}

/* --- carousel --- */
/**
 * alef/carousel — a discrete carousel with native scroll-snap.
 * It works fully without JS too (manual scrolling/touch swipe); view.js only adds autoplay. The track's direct
 * children = the slides (any block).
 */
.alef-carousel__track {
	--ac-items: var(--ac-d, 3);
	display: flex;
	gap: var(--ac-gap, 10px);
	min-height: 56px;
	align-items: stretch;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.alef-carousel__track::-webkit-scrollbar {
	display: none;
}

.alef-carousel__track > * {
	flex: 0 0 calc((100% - (var(--ac-items) - 1) * var(--ac-gap, 10px)) / var(--ac-items));
	height: var(--ac-h, auto);
	min-width: 0;
	scroll-snap-align: start;
	margin: 0;
}

@media (max-width: 1024px) {
	.alef-carousel__track {
		--ac-items: var(--ac-t, 2);
	}
}

@media (max-width: 767px) {
	.alef-carousel__track {
		--ac-items: var(--ac-m, 1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.alef-carousel__track {
		scroll-behavior: auto;
	}
}

/* editor preview */
.alef-carousel-editor-preview {
	border: 1px dashed #999;
	border-radius: 6px;
	padding: 12px;
}
.alef-carousel-editor-preview > .alef-carousel-editor-label {
	font-size: 11px;
	color: #757575;
	margin-bottom: 8px;
}

/* --- comparison-table --- */
/*
 * alef/comparison-table
 * Until 2026-07-27 AhanToday's brand colour (#ed2124) was hard-coded here — both a breach of the "nothing
 * site-specific inside Alef" rule and the reason every change to the table's look needed a code edit. Everything
 * is a token now.
 *
 * ── The "clipped bottom corners" bug (fixed 2026-07-27) ────────────────────────────
 * The root cause: `border-collapse: collapse`. In that mode borders belong to the table, not the cells, and per the
 * standard the browser does not clip those collapsed borders to the table's border-radius — the radius applies
 * but the border line runs under it, and the corners (especially the two bottom ones, which the coloured header
 * does not cover) look "cut". `overflow: hidden` was no fix either: it is unreliable on <table> and killed
 * horizontal scrolling too.
 *
 * The fix: `border-collapse: separate; border-spacing: 0`.
 *   • The outer border → on the <table> itself (so the radius really clips it).
 *   • Inner borders → only `border-bottom` + `border-inline-start` on the cells; with this combination no line is
 *     drawn twice.
 *   • The first cell of each row gets no side border and the last row no bottom border — the table's outer border
 *     is already there.
 *   • The four corner cells get their own radius too, or the header's background sticks out of the table's
 *     rounded corner.
 * Every corner property is logical (border-start-start-radius…) so it lands right in RTL by itself.
 */

.alef-comparison-table {
	margin: 0 0 24px;
	overflow-x: auto;
}

.alef-comparison-table table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: var(--alef-comparison-table-border-width, 1px) solid var(--alef-comparison-table-border-color, #d8dcdf);
	border-radius: var(--alef-comparison-table-radius, 8px);
}

.alef-comparison-table th,
.alef-comparison-table td {
	border-block-end: var(--alef-comparison-table-border-width, 1px) solid var(--alef-comparison-table-border-color, #d8dcdf);
	border-inline-start: var(--alef-comparison-table-border-width, 1px) solid var(--alef-comparison-table-border-color, #d8dcdf);
	padding: var(--alef-comparison-table-cell-padding-y, 8px) var(--alef-comparison-table-cell-padding-x, 10px);
	text-align: var(--alef-comparison-table-cell-align, center);
}

/* The first cell's side edge and the last row's bottom edge = the table's outer border. */
.alef-comparison-table tr > *:first-child {
	border-inline-start: 0;
}

.alef-comparison-table tbody tr:last-child > * {
	border-block-end: 0;
}

/*
 * Corners: the inner radius is slightly smaller than the outer one so the border line and the background look
 * concentric. :has() detects a table without <thead> — the same technique alef/modal uses; browser support is
 * complete today.
 */
.alef-comparison-table thead tr:first-child > *:first-child,
.alef-comparison-table table:not(:has(thead)) tbody tr:first-child > *:first-child {
	border-start-start-radius: calc(var(--alef-comparison-table-radius, 8px) - var(--alef-comparison-table-border-width, 1px));
}

.alef-comparison-table thead tr:first-child > *:last-child,
.alef-comparison-table table:not(:has(thead)) tbody tr:first-child > *:last-child {
	border-start-end-radius: calc(var(--alef-comparison-table-radius, 8px) - var(--alef-comparison-table-border-width, 1px));
}

.alef-comparison-table tbody tr:last-child > *:first-child {
	border-end-start-radius: calc(var(--alef-comparison-table-radius, 8px) - var(--alef-comparison-table-border-width, 1px));
}

.alef-comparison-table tbody tr:last-child > *:last-child {
	border-end-end-radius: calc(var(--alef-comparison-table-radius, 8px) - var(--alef-comparison-table-border-width, 1px));
}

.alef-comparison-table th {
	background: var(--alef-comparison-table-head-bg, #3f4b50);
	color: var(--alef-comparison-table-head-color, #fff);
	font-weight: var(--alef-comparison-table-head-weight, 700);
	font-size: var(--alef-comparison-table-head-size, 1em);
}

/*
 * The body is one step smaller than the article text. A comparison table is scannable data by nature, not
 * narrative text; at full size a six-column table is unreadable on mobile and rows get needlessly tall.
 */
.alef-comparison-table tbody {
	font-size: var(--alef-comparison-table-body-size, 0.95em);
}

/* When zebra is off its value stays transparent and has no effect. */
.alef-comparison-table tbody tr:nth-child(even) td {
	background: var(--alef-comparison-table-zebra-bg, transparent);
}

/*
 * The first column is the row's label (the criterion's name), not data — so its alignment is set separately and
 * defaults to "start", while the other columns are centred.
 */
.alef-comparison-table tr > *:first-child {
	text-align: var(--alef-comparison-table-first-col-align, start);
}

.alef-comparison-table tbody td:first-child {
	font-weight: var(--alef-comparison-table-first-col-weight, 400);
}

.alef-comparison-table caption {
	caption-side: top;
	text-align: start;
	font-size: 0.9em;
	color: var(--alef-comparison-table-caption-color, var(--alef-muted, #5c6971));
	padding-block-end: 8px;
}

.alef-comparison-table-editor table {
	width: 100%;
	border-collapse: collapse;
	margin: 10px 0;
}

.alef-comparison-table-editor th,
.alef-comparison-table-editor td {
	border: 1px solid #e3e6e8;
	padding: 6px;
	vertical-align: top;
}

.alef-comparison-table-editor__actions {
	display: flex;
	gap: 8px;
}

/* --- cta --- */
/*
 * alef/cta — the call-to-action box at the end of an article.
 */

.alef-cta {
	background: var(--alef-cta-bg, #f7f7f8);
	border: var(--alef-cta-border-width, 1px) solid var(--alef-cta-border-color, #e3e6e8);
	border-radius: var(--alef-cta-radius, 8px);
	padding: var(--alef-cta-padding, 20px 22px);
	margin: 0 0 28px;
	color: var(--alef-cta-text, inherit);
}

.alef-cta__title {
	font-weight: 700;
	font-size: var(--alef-cta-title-size, 1.1em);
	color: var(--alef-cta-title-color, inherit);
	margin: 0 0 8px;
}

.alef-cta__text {
	margin: 0 0 16px;
	line-height: 1.9;
}

.alef-cta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--alef-cta-actions-gap, 12px);
}

.alef-cta__button {
	display: inline-block;
	background: var(--alef-cta-button-bg, var(--alef-accent, #7c3aed));
	color: var(--alef-cta-button-text, #fff);
	border-radius: var(--alef-cta-button-radius, 6px);
	padding: var(--alef-cta-button-padding, 10px 20px);
	font-weight: 700;
	text-decoration: none;
	line-height: 1.6;
}

.alef-cta__button:hover,
.alef-cta__button:focus-visible {
	background: var(--alef-cta-button-bg-hover, var(--alef-cta-button-bg, var(--alef-accent, #7c3aed)));
	filter: brightness(0.94);
	color: var(--alef-cta-button-text, #fff);
}

.alef-cta__phones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--alef-cta-actions-gap, 12px);
}

/* Numbers stay LTR even in RTL text — otherwise the digit order looks swapped. */
.alef-cta__phone {
	direction: ltr;
	unicode-bidi: isolate;
	color: var(--alef-cta-phone-color, var(--alef-accent, #7c3aed));
	font-weight: 700;
	text-decoration: none;
}

.alef-cta__phone:hover,
.alef-cta__phone:focus-visible {
	text-decoration: underline;
}

.alef-cta-editor__row {
	border: 1px solid #e3e6e8;
	border-radius: 6px;
	padding: 10px 12px;
	margin-bottom: 10px;
}

/* --- divider --- */
/*
 * alef/divider
 * Every visual value is a token (Alef_Blocks\Styles) and the fallback inside var() is deliberately neutral — no
 * site-specific colour is written here.
 *
 * Why an <hr> with border:0 and a background instead of border-top? The default "fade" style is a gradient, and a
 * gradient can only be drawn on a background, not a border. The line's height is its thickness, so thickness is
 * controlled with height, not border-width.
 */

.alef-divider {
	border: 0;
	display: block;
	height: var(--alef-divider-thickness, 1px);
	width: var(--alef-divider-width, 100%);
	max-width: 100%;
	margin-block: var(--alef-divider-space-above, 28px) var(--alef-divider-space-below, 28px);
	margin-inline: auto;
	background: var(--alef-divider-style, linear-gradient(to right, transparent, var(--alef-divider-color, #e3e6e8), transparent));
}

/*
 * A variant is a per-instance override: an author can pick another style for one divider without changing the global
 * setting. The values are deliberately the same as the `divider-style` token's map, so the output is identical.
 */
.alef-divider--fade {
	background: linear-gradient(to right, transparent, var(--alef-divider-color, #e3e6e8), transparent);
}

.alef-divider--solid {
	background: var(--alef-divider-color, #e3e6e8);
}

/*
 * "Dotted": a small circle repeated with background-size. border-style: dotted cannot do this, because the browser
 * decides the dot spacing in that mode and it cannot be adjusted.
 */
.alef-divider--dotted-center {
	background: radial-gradient(circle, var(--alef-divider-color, #e3e6e8) 45%, transparent 50%) 0 0 / 6px 100% repeat-x;
}

/* A fixed-height box, the line centred: spacing inside the box (padding), so it never collapses with a neighbour's
margin; the colour stays on the line (content-box). */
.alef-divider.alef-divider--box {
	box-sizing: content-box;
	margin-block: 0;
	padding-block: calc((var(--ad-box) - var(--alef-divider-thickness, 1px)) / 2);
	background-clip: content-box;
}

@media (max-width: 767px) {
	.alef-divider.alef-divider--m {
		height: var(--ad-th-m, var(--alef-divider-thickness, 1px));
	}

	.alef-divider.alef-divider--box.alef-divider--m {
		padding-block: calc((var(--ad-box-m, var(--ad-box)) - var(--ad-th-m, var(--alef-divider-thickness, 1px))) / 2);
	}
}

/* Editor: without this a 1-pixel line is practically unselectable. */
.alef-divider-editor {
	padding: 6px 0;
}

/* --- faq --- */
/*
 * alef/faq
 *
 * The structure deliberately matches the site's own Kadence accordion: the **heading** is the coloured box and the
 * **answer** a separate panel below it. The previous version made the whole <details> one coloured box, and that is
 * why it never looked like the rest of the site.
 *
 * Every value comes from a token; the fallback inside var() is deliberately neutral — each site's brand colour
 * comes from the database settings, not this file.
 */

.alef-faq {
	margin: 0 0 24px;
	display: flex;
	flex-direction: column;
	gap: var(--alef-faq-gap, 10px);
}

.alef-faq__item {
	box-shadow: var(--alef-faq-shadow, none);
	border-radius: var(--alef-faq-radius, 6px);
}

/* -- heading: the coloured bar ----------------------------------------------- */

.alef-faq__item summary {
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 700;
	list-style: none;
	background: var(--alef-faq-bg, #f2f2f2);
	color: var(--alef-faq-title-color, #555555);
	border: 1px solid var(--alef-faq-border-color, var(--alef-faq-bg, #f2f2f2));
	border-radius: var(--alef-faq-radius, 6px);
	padding: var(--alef-faq-header-padding-y, 13px) var(--alef-faq-header-padding-x, 20px);
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.alef-faq__item summary::-webkit-details-marker {
	display: none;
}

.alef-faq__item[open] summary {
	background: var(--alef-faq-bg-open, var(--alef-faq-bg, #f2f2f2));
	color: var(--alef-faq-title-color-open, var(--alef-faq-title-color, #555555));
	border-color: var(--alef-faq-border-color-open, var(--alef-faq-bg-open, var(--alef-faq-bg, #f2f2f2)));
	border-end-start-radius: 0;
	border-end-end-radius: 0;
}

.alef-faq__item summary:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* The question text takes the remaining space so the icon always sticks to the end. */
.alef-faq__question {
	flex: 1 1 auto;
}

/* -- icon: two bars that turn + into − (Kadence's basic style) ------- */

.alef-faq__icon {
	flex: 0 0 auto;
	position: relative;
	width: 16px;
	height: 16px;
	color: var(--alef-faq-icon-color, currentColor);
}

.alef-faq__icon::before,
.alef-faq__icon::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 50%;
	width: 100%;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.1333s ease-in-out;
}

.alef-faq__icon::before {
	transform: translateY(-50%);
}

/* The vertical bar flattens when open → + becomes −. */
.alef-faq__icon::after {
	transform: translateY(-50%) rotate(90deg);
}

.alef-faq__item[open] .alef-faq__icon {
	color: var(--alef-faq-icon-color-open, var(--alef-faq-icon-color, currentColor));
}

.alef-faq__item[open] .alef-faq__icon::after {
	transform: translateY(-50%) rotate(0deg);
}

/* The arrow style, for when the owner does not want +. */
.alef-faq[data-icon="chevron"] .alef-faq__icon::before {
	transform: translateY(-50%) rotate(45deg) translate(3px, 3px);
	width: 60%;
}

.alef-faq[data-icon="chevron"] .alef-faq__icon::after {
	transform: translateY(-50%) rotate(-45deg) translate(-3px, 3px);
	width: 60%;
	inset-inline-start: auto;
	inset-inline-end: 0;
}

.alef-faq[data-icon="none"] .alef-faq__icon {
	display: none;
}

/* -- answer panel ------------------------------------------------------------- */

.alef-faq__answer {
	background: var(--alef-faq-answer-bg, #ffffff);
	color: var(--alef-faq-answer-color, #18272e);
	line-height: 1.9;
	padding: var(--alef-faq-header-padding-y, 13px) var(--alef-faq-header-padding-x, 20px);
	border: 1px solid var(--alef-faq-border-color, #e3e6e8);
	border-top: 0;
	border-end-start-radius: var(--alef-faq-radius, 6px);
	border-end-end-radius: var(--alef-faq-radius, 6px);
}

.alef-faq__answer > :first-child { margin-top: 0; }
.alef-faq__answer > :last-child  { margin-bottom: 0; }

/*
 * view.js handles the height animation (a native <details> cannot animate height). This class is added only when
 * JS is present, so the accordion works fully without JS too — just without the smoothness.
 */
.alef-faq__panel {
	overflow: hidden;
}

.alef-faq--animating .alef-faq__panel {
	transition: height 0.45s ease;
}

@media (prefers-reduced-motion: reduce) {
	.alef-faq__item summary,
	.alef-faq__icon::before,
	.alef-faq__icon::after,
	.alef-faq--animating .alef-faq__panel {
		transition: none;
	}
}

/* -- editor ------------------------------------------------------------- */

.alef-faq-editor__row {
	border: 1px solid #e3e6e8;
	border-radius: 6px;
	padding: 10px 12px;
	margin-bottom: 10px;
}

.alef-faq-editor__title {
	font-weight: 700;
	margin: 0 0 10px;
}

/* --- footnotes --- */
/*
 * alef/footnotes — every visual value is a token (Alef_Blocks\Styles), with a neutral fallback.
 */

.alef-footnotes {
	margin-block: var(--alef-footnotes-space-above, 32px) 24px;
	padding-block-start: 16px;
	border-block-start: 1px solid var(--alef-footnotes-border-color, #e3e6e8);
	font-size: var(--alef-footnotes-text-size, 0.9em);
	color: var(--alef-footnotes-text-color, #3f4b50);
}

.alef-footnotes__title {
	font-size: var(--alef-footnotes-title-size, 1.1em);
	font-weight: 700;
	margin: 0 0 10px;
}

/*
 * `persian` is one of CSS's standard counter styles and gives Persian digits (۱، ۲، ۳ …). A browser that does not
 * know it silently falls back to decimal — a cosmetic loss, not a break. Each item's number is set explicitly with
 * the value attribute on the <li>, so if the footnotes' order differs from their numbers the right number shows.
 */
.alef-footnotes__list {
	margin: 0;
	padding-inline-start: 24px;
	list-style-type: persian;
	line-height: 1.9;
}

.alef-footnotes__list > li::marker {
	color: var(--alef-footnotes-marker-color, #5c6971);
}

.alef-footnotes__list > li + li {
	margin-block-start: 8px;
}

/* The back link must be visible but must not break the footnote text. */
.alef-footnotes__back {
	margin-inline-start: 6px;
	text-decoration: none;
	color: var(--alef-footnotes-marker-color, #5c6971);
}

.alef-footnotes__back:hover,
.alef-footnotes__back:focus-visible {
	text-decoration: underline;
}

/* The in-text reference — the output of Footnotes_Block::reference(). */
.alef-fnref {
	line-height: 0;
	font-size: 0.75em;
}

.alef-fnref a {
	text-decoration: none;
	color: var(--alef-footnotes-marker-color, #5c6971);
	padding-inline: 2px;
}

.alef-fnref a:hover,
.alef-fnref a:focus-visible {
	text-decoration: underline;
}

/* Do not put the jump target under the sticky header. */
.alef-footnotes__list > li:target {
	scroll-margin-block-start: 80px;
}

.alef-footnotes-editor__row {
	border: 1px solid #e3e6e8;
	border-radius: 6px;
	padding: 10px 12px;
	margin-bottom: 10px;
}

/* --- form --- */
/**
 * alef/form — label over field, one column. Sizes in rem (the form reads the same inside any text size).
 */
.alef-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.alef-form .alef-form__field {
	display: flex;
	flex-direction: column;
	margin: 0;
}

.alef-form__field > label {
	font-size: .9rem;
	line-height: 1.8;
}

.alef-form__req {
	color: var(--af-accent, #c00);
}

.alef-form__field > input,
.alef-form__field > textarea {
	width: 100%;
	padding: 5px 10px;
	font: inherit;
	font-size: .875rem;
	line-height: 1.6;
	color: inherit;
	background: #fff;
	border: 1px solid #a0aec0;
	border-radius: 3px;
}

.alef-form__field > textarea {
	resize: vertical;
}

.alef-form__submit {
	align-self: flex-start;
	padding: 8px 16px;
	font: inherit;
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1.8;
	color: #fff;
	background: var(--af-accent, #333);
	border: 0;
	border-radius: 3px;
	cursor: pointer;
}

.alef-form__submit:disabled {
	opacity: .6;
}

.alef-form__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.alef-form__msg {
	margin: 0;
}

.alef-form__msg.is-error {
	color: var(--af-accent, #c00);
}

/* Section title between groups of fields (`type: heading`). */
.alef-form__heading {
	margin: 8px 0 0;
	font-weight: 700;
}

/* Radio group / single checkbox: the whole option is the click target. */
.alef-form fieldset.alef-form__field {
	min-width: 0;
	padding: 0;
	border: 0;
}

.alef-form__field > legend {
	padding: 0;
	font-size: .9rem;
	line-height: 1.8;
}

.alef-form__options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.alef-form__option {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .875rem;
	line-height: 1.6;
	cursor: pointer;
}

.alef-form__option > input {
	width: auto;
	margin: 0;
	accent-color: var(--af-accent, #333);
}

@media (max-width: 767px) {
	.alef-form__field > legend {
		font-size: .8rem;
	}

	.alef-form__field > label {
		font-size: .8rem;
	}
}

/* --- gallery --- */
/**
 * alef/gallery — a native grid + a `<dialog>` lightbox.
 *
 * ⚠ Breakpoints are applied on the consuming rule itself, not by redefining the variable inside a media query:
 * the values sit inline on the element, and inline beats any sheet rule, so a redefinition has no effect.
 */

.alef-gallery {
	--ag-gap: 16px;
	--ag-cols: 3;
}

/* ⚠ The class is repeated on purpose (specificity 0,2,0).
The theme has `.single-content h2 + * { margin-top: 0 }` — specificity 0,1,2 — and the gallery sits right after an
`<h2>`, so its top spacing became zero. Unlike the `<ul>` case (solved by changing the tag), there is no way out
here: **any** element in that position gets this rule. Kadence itself did the same.
The measured spacing of the Kadence version: `padding: 10px 0` and `margin: 24px 0 16px`. */
.alef-gallery.alef-gallery {
	padding-block: var( --ag-pad-y, 0 );
	padding-inline: var( --ag-pad-x, 0 );
	margin-block: var( --ag-mt, 0 ) var( --ag-mb, 0 );
}

/* ⚠ The container is a `<div role="list">`, not a `<ul>`. This site's theme gives every `ul` inside
`.single-content` a `padding: 2em` (34px) that silently came off the gallery's width. Raising specificity is not
an answer for a generic block — on the next theme another selector wins. No `ul` removes that attack surface
entirely. */
.alef-gallery .alef-gallery__list {
	display: grid;
	grid-template-columns: repeat( var( --ag-cols ), minmax( 0, 1fr ) );
	gap: var( --ag-gap );
	margin: 0;
	padding: 0;
	list-style: none;
}

.alef-gallery .alef-gallery__item {
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

.alef-gallery__figure {
	margin: 0;
	display: block;
}

/* Radius, shadow and clipping all on this one element. `overflow:hidden` clips the image to the rounded corner,
but the shadow renders outside it (box-shadow is not clipped by the element's own overflow) — so both work
together. */
.alef-gallery__media {
	display: block;
	line-height: 0;
	border-radius: var( --ag-radius, 0 );
	box-shadow: var( --ag-shadow, none );
	overflow: hidden;
}

.alef-gallery__figure img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	border-radius: inherit;
}

/* A fixed ratio only when requested — otherwise the height comes from the image itself and nothing is
cropped. */
.alef-gallery[ style*="--ag-ratio" ] .alef-gallery__figure img {
	aspect-ratio: var( --ag-ratio );
	object-fit: var( --ag-fit, cover );
	height: auto;
}

.alef-gallery__caption {
	margin: .4em 0 0;
	font-size: var( --ag-cap-fs, .85em );
	font-weight: var( --ag-cap-fw, inherit );
	line-height: 1.5;
	color: var( --ag-cap-c, inherit );
	text-align: center;
}

.alef-gallery--cap-box .alef-gallery__caption {
	margin: 0;
	padding: 10px;
	line-height: inherit;
	background: var( --ag-cap-bg );
}

/* Grayscale until hovered — only where hovering exists and the screen is wide (a phone would never show colour). */
@media ( hover: hover ) and ( min-width: 768px ) {
	.alef-gallery--gray img {
		filter: grayscale( 1 );
		transition: filter .4s, transform .4s;
	}
	.alef-gallery--gray .alef-gallery__item:hover img {
		filter: none;
		transform: scale( 1.04 );
	}
}

/* 991/767 are deliberate: they sit exactly on Kadence's md and sm boundaries, so a migrated gallery has the same
column count as before at every width. */
@media ( max-width: 991px ) {
	.alef-gallery .alef-gallery__list {
		grid-template-columns: repeat( var( --ag-cols-t, var( --ag-cols ) ), minmax( 0, 1fr ) );
	}
}

@media ( max-width: 767px ) {
	.alef-gallery.alef-gallery {
		padding-block: var( --ag-pad-y-m, var( --ag-pad-y, 0 ) ) var( --ag-pad-b-m, var( --ag-pad-y-m, var( --ag-pad-y, 0 ) ) );
		padding-inline: var( --ag-pad-x-m, var( --ag-pad-x, 0 ) );
		margin-block: var( --ag-m-m, var( --ag-mt, 0 ) ) var( --ag-mb-m, var( --ag-m-m, var( --ag-mb, 0 ) ) );
	}
	.alef-gallery .alef-gallery__list {
		grid-template-columns: repeat( var( --ag-cols-m, var( --ag-cols ) ), minmax( 0, 1fr ) );
		gap: var( --ag-gap-m, var( --ag-gap ) );
	}
}

/* ── masonry: CSS columns ──────────────────────────────────────────────────
Natural heights, filled down each column; `break-inside` keeps an image whole. The row gap is the item's bottom
margin, and the list's negative bottom margin cancels the last one. */
.alef-gallery--masonry .alef-gallery__list {
	--ag-g: var( --ag-gap );
	display: block;
	columns: var( --ag-cols );
	column-gap: var( --ag-g );
	margin-bottom: calc( -1 * var( --ag-g ) );
}

.alef-gallery--masonry .alef-gallery__item {
	break-inside: avoid;
	margin-bottom: var( --ag-g );
}

/* view.js placement (shortest column, document order): absolute items, the list keeps the height. */
.alef-gallery--masonry .alef-gallery__list.is-placed {
	position: relative;
	columns: auto;
	margin-bottom: 0;
}
.alef-gallery--masonry .is-placed > .alef-gallery__item {
	position: absolute;
	margin: 0;
}

@media ( max-width: 991px ) {
	.alef-gallery--masonry .alef-gallery__list {
		columns: var( --ag-cols-t, var( --ag-cols ) );
	}
}

@media ( max-width: 767px ) {
	.alef-gallery--masonry .alef-gallery__list {
		--ag-g: var( --ag-gap-m, var( --ag-gap ) );
		columns: var( --ag-cols-m, var( --ag-cols ) );
	}
	.alef-gallery__media {
		border-radius: var( --ag-radius-m, var( --ag-radius, 0 ) );
	}
}

/* ── lightbox ──────────────────────────────────────────────────────────────
A native `<dialog>`: the top layer means no z-index is needed, Escape and the focus trap are native, and
`::backdrop` is itself the overlay. */

.alef-gallery__lb {
	max-width: 100vw;
	max-height: 100vh;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: hidden;
}

.alef-gallery__lb::backdrop {
	background: rgba( 0, 0, 0, .82 );
}

.alef-gallery__lb[ open ] {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	justify-items: center;
	gap: 8px;
	padding: max( 12px, env( safe-area-inset-top ) ) 12px 12px;
	box-sizing: border-box;
}

.alef-gallery__lb-img {
	grid-column: 2;
	max-width: 100%;
	max-height: 88vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 4px;
}

.alef-gallery__lb-nav,
.alef-gallery__lb-close {
	appearance: none;
	border: 0;
	cursor: pointer;
	color: #fff;
	background: rgba( 0, 0, 0, .45 );
	border-radius: 999px;
	line-height: 1;
	transition: background .15s ease-in-out;
}

.alef-gallery__lb-nav {
	width: 44px;
	height: 44px;
	font-size: 30px;
	/* In RTL "previous" is on the right; with explicit columns the direction comes out right by itself. */
	grid-row: 1;
}

.alef-gallery__lb-prev { grid-column: 1; }
.alef-gallery__lb-next { grid-column: 3; }

.alef-gallery__lb-close {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-end: 10px;
	width: 40px;
	height: 40px;
	font-size: 26px;
}

.alef-gallery__lb-nav:hover,
.alef-gallery__lb-close:hover { background: rgba( 0, 0, 0, .75 ); }

.alef-gallery__lb-nav:focus-visible,
.alef-gallery__lb-close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.alef-gallery__lb-count {
	grid-column: 2;
	grid-row: 2;
	margin: 0;
	color: #fff;
	font-size: .85rem;
	opacity: .8;
}

/* A single-image gallery needs no arrows. */
.alef-gallery__lb[ data-single ] .alef-gallery__lb-nav { display: none; }

@media ( max-width: 600px ) {
	.alef-gallery__lb-nav { width: 38px; height: 38px; font-size: 26px; }
	.alef-gallery__lb-img { max-height: 78vh; }
}

/* Lock the background scroll while the lightbox is open. */
body:has( .alef-gallery__lb[ open ] ) { overflow: hidden; }

/* ── carousel layout (replacing Kadence's fluidcarousel) ─────────────────────────
A fixed height, a free width from the image's own ratio, horizontal scrolling with native scroll-snap. Step-by-step
autoplay is in `view.js`, but it is fully usable **without it** too: the user can swipe/scroll. */

.alef-gallery--carousel .alef-gallery__list {
	display: flex;
	grid-template-columns: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* The scrollbar is hidden on purpose — the Kadence version had none either. Scrolling with swipe, the mouse wheel
	and the keyboard still works. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.alef-gallery--carousel .alef-gallery__list::-webkit-scrollbar { display: none; }

.alef-gallery--carousel .alef-gallery__item {
	flex: 0 0 auto;
	scroll-snap-align: start;
	height: var( --ag-height, auto );
	max-width: 100%;
}

.alef-gallery--carousel .alef-gallery__figure,
.alef-gallery--carousel .alef-gallery__media {
	height: 100%;
}

.alef-gallery--carousel .alef-gallery__figure img {
	height: 100%;
	width: auto;
	max-width: none;
	object-fit: cover;
}

@media ( max-width: 767px ) {
	/* On mobile Kadence limited the slide width to a fraction of the container, not the image's natural ratio —
	measured: 273px inside a 342px container. */
	.alef-gallery--carousel .alef-gallery__item {
		max-width: var( --ag-item-max-m, 100% );
	}
	.alef-gallery--carousel .alef-gallery__figure img {
		width: 100%;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.alef-gallery--carousel .alef-gallery__list { scroll-behavior: auto; }
}

/* ── scroller layout ───────────────────────────────────────────────────────
One horizontal row holding every image, instead of a grid whose last row is left half-filled (9 certificates in 6
columns = a row of 6 + an orphan row of 3).

Each item's width is **exactly the grid's arithmetic** — `(100% − (n−1)×gap) / n` — so switching grid → scroller
does not change the images' size or spacing one bit; the second row just stands beside instead of coming down.

⚠ Why `proximity` and not `mandatory`: the last "page" is usually incomplete (9 images, 6 in view). With mandatory
the browser throws back from a snap point beyond the scroll end and **the end of the list becomes practically
unreachable**. proximity gives the same sense of alignment without that trap. */

.alef-gallery--scroller .alef-gallery__list {
	display: flex;
	grid-template-columns: none;
	align-items: flex-start;
	gap: var( --ag-gap );
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	/* The scrollbar is hidden on purpose — the "there is more" cue is the buttons and the edge fade, not a grey bar
	under the images. Scrolling with swipe, the mouse wheel, shift+wheel and the keyboard still works. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.alef-gallery--scroller .alef-gallery__list::-webkit-scrollbar { display: none; }

.alef-gallery--scroller .alef-gallery__item {
	flex: 0 0 calc( ( 100% - ( var( --ag-cols ) - 1 ) * var( --ag-gap ) ) / var( --ag-cols ) );
	scroll-snap-align: start;
}

@media ( max-width: 991px ) {
	.alef-gallery--scroller .alef-gallery__item {
		flex-basis: calc( ( 100% - ( var( --ag-cols-t, var( --ag-cols ) ) - 1 ) * var( --ag-gap ) ) / var( --ag-cols-t, var( --ag-cols ) ) );
	}
}

@media ( max-width: 767px ) {
	.alef-gallery--scroller .alef-gallery__list { gap: var( --ag-gap-m, var( --ag-gap ) ); }
	.alef-gallery--scroller .alef-gallery__item {
		flex-basis: calc( ( 100% - ( var( --ag-cols-m, var( --ag-cols ) ) - 1 ) * var( --ag-gap-m, var( --ag-gap ) ) ) / var( --ag-cols-m, var( --ag-cols ) ) );
	}
}

/* ── edge fade ───────────────────────────────────────────────────────────
The strongest "there is more" cue: the edge image itself is half faded, so the eye understands the frame goes on
without reading any button.

⚠ `mask-image`, not a gradient in the background colour over the edge: the block does not know this area's
background colour (the theme/section decides it) and any guess would show on the first non-white background. A
mask makes the content itself transparent, so it is right on any background.

The directions are deliberately **physical** (`-l`/`-r`), not logical: `view.js` knows which direction the strip
runs and decides there — so neither `:dir()` nor two mirrored versions of this rule are needed. */

.alef-gallery[ data-ag-nav ] .alef-gallery__list {
	--ag-fade-l: 0px;
	--ag-fade-r: 0px;
	-webkit-mask-image: linear-gradient( to right, transparent 0, #000 var( --ag-fade-l ), #000 calc( 100% - var( --ag-fade-r ) ), transparent 100% );
	mask-image: linear-gradient( to right, transparent 0, #000 var( --ag-fade-l ), #000 calc( 100% - var( --ag-fade-r ) ), transparent 100% );
}

.alef-gallery[ data-ag-fade-l ] .alef-gallery__list { --ag-fade-l: var( --ag-fade, 48px ); }
.alef-gallery[ data-ag-fade-r ] .alef-gallery__list { --ag-fade-r: var( --ag-fade, 48px ); }

/* ── previous/next buttons ────────────────────────────────────────────────────
Deliberately faint and small: their job is to hint, not to draw attention. Until there is somewhere to go they are
not visible at all (`[disabled]` → `opacity:0`), so at the start of the list only one button shows — which itself
says which side the list continues on. */

.alef-gallery__viewport {
	position: relative;
}

.alef-gallery__nav {
	position: absolute;
	inset-block-start: 50%;
	transform: translateY( -50% );
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: var( --ag-nav-size, 36px );
	block-size: var( --ag-nav-size, 36px );
	padding: 0;
	appearance: none;
	border: 1px solid rgba( 0, 0, 0, .08 );
	border-radius: 999px;
	background: rgba( 255, 255, 255, .92 );
	color: #2b2b2b;
	cursor: pointer;
	opacity: .6;
	box-shadow: 0 1px 6px rgba( 0, 0, 0, .14 );
	transition: opacity .18s ease-out, background-color .18s ease-out, box-shadow .18s ease-out;
}

.alef-gallery__nav--prev { inset-inline-start: var( --ag-nav-inset, 0px ); }
.alef-gallery__nav--next { inset-inline-end: var( --ag-nav-inset, 0px ); }

.alef-gallery__nav:hover {
	opacity: 1;
	background: #fff;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, .2 );
}

.alef-gallery__nav:focus-visible {
	opacity: 1;
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Reaching the end = the button fades, but keeps its space (not `display`) so the row does not jump on
click. */
.alef-gallery__nav[ disabled ] {
	opacity: 0;
	pointer-events: none;
}

.alef-gallery__chev {
	inline-size: 55%;
	block-size: 55%;
	display: block;
}

/* The arrow in the SVG points physically left; in RTL it is mirrored. The result: the start-side button always
points to the start and the end-side button always to the end. */
.alef-gallery__nav--next .alef-gallery__chev { transform: scaleX( -1 ); }

[ dir="rtl" ] .alef-gallery__nav--prev .alef-gallery__chev { transform: scaleX( -1 ); }
[ dir="rtl" ] .alef-gallery__nav--next .alef-gallery__chev { transform: none; }

/* On touch the buttons stay: the edge fade alone did not say "there are more images" (the owner's team read the
certificate strip as two static images). No hover there, so they are drawn at full strength. */
@media ( hover: none ) and ( pointer: coarse ) {
	.alef-gallery__nav { opacity: .9; }
}

@media ( prefers-reduced-motion: reduce ) {
	.alef-gallery--scroller .alef-gallery__list { scroll-behavior: auto; }
	.alef-gallery__nav { transition: none; }
}

/* ── back to a grid below a breakpoint ──────────────────────────────────────
A grid with an orphan row on desktop does not necessarily have one on mobile (9 images in 3 columns = 3 full rows).
`--from-md` means "be a strip only from tablet up", `--from-lg` "only from desktop up".

`view.js` needs no notice: with `overflow: visible`, `scrollWidth − clientWidth` becomes zero and the same "nothing
to scroll" logic hides the buttons by itself. */

@media ( max-width: 767px ) {
	.alef-gallery--from-md .alef-gallery__list {
		display: grid;
		grid-template-columns: repeat( var( --ag-cols-m, var( --ag-cols ) ), minmax( 0, 1fr ) );
		overflow-x: visible;
		-webkit-mask-image: none;
		mask-image: none;
	}
	.alef-gallery--from-md .alef-gallery__item { flex-basis: auto; }
	.alef-gallery--from-md .alef-gallery__nav { display: none; }
}

@media ( max-width: 991px ) {
	.alef-gallery--from-lg .alef-gallery__list {
		display: grid;
		grid-template-columns: repeat( var( --ag-cols-t, var( --ag-cols ) ), minmax( 0, 1fr ) );
		overflow-x: visible;
		-webkit-mask-image: none;
		mask-image: none;
	}
	.alef-gallery--from-lg .alef-gallery__item { flex-basis: auto; }
	.alef-gallery--from-lg .alef-gallery__nav { display: none; }
}

@media ( max-width: 767px ) {
	.alef-gallery--from-lg .alef-gallery__list {
		grid-template-columns: repeat( var( --ag-cols-m, var( --ag-cols ) ), minmax( 0, 1fr ) );
	}
}

/* --- heading --- */
/**
 * alef/heading — a heading with an optional icon.
 *
 * ⚠ **This sheet declares no base typography property.** The desktop values come as real properties inline on the
 * element itself and are not printed at all when not set — so the theme's heading style stays untouched and wins.
 *
 * The first version had `font-size: var(--ah-fs, inherit)` here. For an `h2` without a size this meant "inherit
 * from the parent" and switched the theme's style off: measured **19px → 17px**. `inherit`, `unset` and `revert` all
 * have the same problem; the only right way is **not printing the declaration**.
 *
 * Mobile values cannot be inline (inline beats a media query), so they come from variables and each rule is locked
 * behind a modifier class, so no declaration is active while no variable is set.
 */

/* Only with an icon does the layout change — a heading without an icon must stay a plain text block so its
`text-align` and natural line breaking are kept. */
.alef-heading--has-icon {
	display: flex;
	align-items: center;
	gap: var(--ah-icon-gap, 8px);
}

.alef-heading--icon-right {
	flex-direction: row-reverse;
}

.alef-heading__icon {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--ah-icon-color, currentColor);
	line-height: 0;
}

.alef-heading__icon svg {
	width: var(--ah-icon-size, 1em);
	height: var(--ah-icon-size, 1em);
	display: block;
}

.alef-heading__link {
	color: inherit;
	text-decoration: none;
}

.alef-heading__link:hover {
	text-decoration: underline;
}

/* Plain links inside `content` (not the `link` attribute) have the browser's default underline unless this class
switches it off explicitly — Kadence controlled the same thing with `linkStyle:"none"` (`class-heading-block.php`).
⚠ `!important` is deliberate: Kadence's theme has a global rule
(`.inner-link-style-normal a:not(.button){text-decoration:underline}`) with exactly the same specificity (0,2,1),
and since it loads after this sheet it wins the tie without important — the global header's phone number stayed
underlined although this class was on it (measured). The third instance of this pattern in one session (after the
heading's margin-top) — if it happens again, the root fix is making the pack's handle depend on the theme's CSS
handles, not adding one more important. */
.alef-heading--content-links-plain .alef-heading__text a {
	text-decoration: none !important;
}

/* The base class is repeated so the specificity reaches (0,2,1) and beats the theme's link colour rule
(`.entry-content a`) — otherwise the declaration applies but does not win. */
.alef-heading.alef-heading--link-c .alef-heading__text a,
.alef-heading.alef-heading--link-c a.alef-heading__link {
	color: var(--ah-link-c);
}

.alef-heading.alef-heading--ml { margin-left: var(--ah-ml); }
.alef-heading.alef-heading--mr { margin-right: var(--ah-mr); }

/* ⚠ **The desktop values are sheet rules too, not inline.** An inline declaration beats any sheet rule — even
inside a media query — so while the desktop `font-size` was inline, the mobile block below never won and every
mobile override was dead. Each rule is behind a guard class, so when no value is set no declaration is active and
the theme's heading style stays untouched. **The order of these two blocks matters.** */
/* ⚠ The base class is deliberately repeated so the specificity is an equal (0,2,0). With one class (0,1,0) the
theme's own rules like `.entry-content p` (0,1,1) won, and `margin-bottom` on mobile stayed 32px instead of 2px
(measured). */
/* ⚠ `!important` on these two is deliberate: Kadence's theme `.single-content h1:first-child` (and its h2..h6 and
last-child siblings) has exactly the same specificity (0,2,0) and loads after this sheet, so without important it
wins the specificity tie on load order — on the page's first heading a set margin-top silently became zero
(measured on the gallery page: 48px lost). None of this block's other properties has such a theme counterpart. */
.alef-heading.alef-heading--fs    { font-size: var(--ah-fs); }
.alef-heading.alef-heading--lh    { line-height: var(--ah-lh); }
.alef-heading.alef-heading--mt    { margin-top: var(--ah-mt) !important; }
.alef-heading.alef-heading--mb    { margin-bottom: var(--ah-mb) !important; }
.alef-heading.alef-heading--pad   { padding: var(--ah-pad); }
.alef-heading.alef-heading--align { text-align: var(--ah-align); }
.alef-heading.alef-heading--align.alef-heading--has-icon { justify-content: var(--ah-justify); }

@media (max-width: 767px) {
	/* The same rule as above; and since it comes after the desktop block, it wins at equal specificity. */
	.alef-heading.alef-heading--fs-m    { font-size: var(--ah-fs-m); }
	.alef-heading.alef-heading--lh-m    { line-height: var(--ah-lh-m); }
	.alef-heading.alef-heading--mt-m    { margin-top: var(--ah-mt-m) !important; }
	.alef-heading.alef-heading--mb-m    { margin-bottom: var(--ah-mb-m) !important; }
	.alef-heading.alef-heading--pad-m   { padding: var(--ah-pad-m); }
	.alef-heading.alef-heading--align-m { text-align: var(--ah-align-m); }
	.alef-heading.alef-heading--align-m.alef-heading--has-icon { justify-content: var(--ah-justify-m); }
	.alef-heading.alef-heading--icon-m .alef-heading__icon svg {
		width: var(--ah-icon-size-m);
		height: var(--ah-icon-size-m);
	}
}

/* --- info-box --- */
/**
 * alef/info-box — an information card.
 *
 * ⚠ **No declaration without a guard class.** Every property whose value comes from the block is locked behind a
 * modifier class, so when nothing is set no declaration is active and the theme's inherited style stays untouched.
 * (The first version of `alef/heading` had `font-size: var(--x, inherit)` and switched off the theme's style for a
 * heading without a size: measured 19px → 17px.)
 *
 * ⚠ **The order of the desktop and mobile blocks matters, and both are sheet rules.** Neither is inline, because an
 * inline declaration beats any sheet rule — even inside `@media` — and then every mobile override would be dead.
 *
 * ⚠ The base class is **deliberately repeated** in the valued rules so the specificity is an equal (0,2,0); with one
 * class (0,1,0), the theme's own rules like `.entry-content p` (0,1,1) won.
 */

.alef-info-box {
	position: relative;
}

.alef-info-box__inner {
	display: flex;
	flex-direction: column;
	gap: var(--ib-media-gap, 10px);
	/* min-, not height: a card with a negative margin made its own height smaller than the content and the
	background was cut to 8px (574's first button on mobile); equal-height columns still fill. */
	min-height: 100%;
	color: inherit;
	text-decoration: none;
	background: var(--ib-bg, transparent);
	border-style: solid;
	border-width: 0;
	border-color: var(--ib-border-c, transparent);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* The horizontal layout — the equivalent of Kadence's `kt-blocks-info-box-media-align-left/right`.
⚠ **`__body` must get `flex-grow`.** Without it the text column shrinks to its own content and the space beside the
media is left empty — text that fit on one line in Kadence wrapped early here (measured on the «LC» card in 1595's
sidebar: the real text width 240px instead of 280px). The vertical layout (the default without these classes) stays
untouched, since growing along the column means nothing there. */
.alef-info-box--horizontal > .alef-info-box__inner > .alef-info-box__body {
	flex: 1 1 auto;
}

.alef-info-box--horizontal > .alef-info-box__inner {
	flex-direction: row;
	/* ⚠ The default is `center`, not `flex-start` — Kadence's own rule:
	`.wp-block-kadence-infobox .kt-blocks-info-box-media-align-left{align-items:center}`.
	`--ib-valign` has a value only when the card has an explicit `mediaVAlign` (Kadence's
	`kb-info-box-vertical-media-align-*` class). */
	align-items: var(--ib-valign, center);
}

.alef-info-box--horizontal-reverse > .alef-info-box__inner {
	flex-direction: row-reverse;
	align-items: var(--ib-valign, center);
}

/* ⚠ **Vertical layout: the media must be as wide as its own content, not the whole card.**
Its parent (`__inner`) is a flex column; without this, the default `align-items` (`stretch`) stretches the icon to
the card's full width (measured: 70px → 202px). Kadence makes the icon `inline-block`, which shrinks to its content.
`horizontal`/`horizontal-reverse` are deliberately excluded, since there `align-items: var(--ib-valign)` on the
parent does the same job and this rule would sit on top of it. */
.alef-info-box:not(.alef-info-box--horizontal):not(.alef-info-box--horizontal-reverse) > .alef-info-box__inner > .alef-info-box__media {
	align-self: center;
}

/* A rounded stacked card clips to its own corners: a full-width media box (white JPEG) otherwise pokes its square
corners through the rounded border (the mobile bar's price modal). Horizontal cards are left alone — some push
their media outside the frame on purpose (negative media margins on 1595). */
.alef-info-box--r:not(.alef-info-box--horizontal):not(.alef-info-box--horizontal-reverse) > .alef-info-box__inner {
	overflow: clip;
}

/* `align: left|right` moves the vertical media too — physical sides, as text-align (auto margins beat align-self). */
.alef-info-box--media-left > .alef-info-box__inner > .alef-info-box__media  { margin-right: auto; }
.alef-info-box--media-right > .alef-info-box__inner > .alef-info-box__media { margin-left: auto; }

.alef-info-box__media {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ib-media-bg, transparent);
	border-radius: var(--ib-media-r, 0);
	padding: var(--ib-media-pad, 0);
	/* ⚠ Kadence builds the media↔text gap with a `margin` on the media itself, not a `gap` on the container — and
	sometimes negative (the «تماس مستقیم» card: `0 50px 0 -5px`). Without this the migration put the icon onto the
	text. */
	margin: var(--ib-media-mar, 0);
}

.alef-info-box__img {
	display: block;
	height: auto;
	max-width: 100%;
	border-radius: inherit; /* the media box's radius (Kadence rounded the image itself) */
}

.alef-info-box__img--w {
	width: var(--ib-img-w);
}

/* alef-image-optim wraps the image in <picture>: pass the radius through it */
.alef-info-box__media > picture {
	border-radius: inherit;
}

.alef-info-box__icon {
	display: inline-flex;
	color: var(--ib-icon-c, currentColor);
	line-height: 0;
}

.alef-info-box__icon svg {
	width: var(--ib-icon-size, 1em);
	height: var(--ib-icon-size, 1em);
	display: block;
}

.alef-info-box__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	line-height: 1;
}

.alef-info-box__body {
	min-width: 0;
}

/* ⚠ **`margin: 10px 0` is deliberate and comes from Kadence's base sheet.** Without it every card gets exactly
20px shorter (measured: 32px vs 52px) and the whole page slides up. */
.alef-info-box .alef-info-box__body .alef-info-box__title {
	color: var(--ib-title-c, inherit);
	margin-top: 10px;
	margin-bottom: 10px;
}

.alef-info-box__text {
	color: var(--ib-text-c, inherit);
}

.alef-info-box__more {
	display: inline-block;
}

/* ── desktop values ─────────────────────────────────────────────────────── */
.alef-info-box.alef-info-box--align    { text-align: var(--ib-align); }
.alef-info-box.alef-info-box--pad > .alef-info-box__inner { padding: var(--ib-pad); }
/* ⚠ **The margin sits on `__inner`, not the root — on purpose.** Kadence does exactly the same (each block's
inline CSS is printed on `.kt-blocks-info-box-link-wrap`, not on `.wp-block-kadence-infobox`). On the root,
`alef/section`'s flex-column margin reset (`.alef-section__col--flex.alef-section__col--flex > *`) — also (0,2,0)
and later in the pack — eats the vertical margin and the cards stick together. Kadence does not have this problem
because its margin is one level deeper than `> *`. The padding was already on this `__inner`, so the two are now
in one place. */
.alef-info-box.alef-info-box--mar > .alef-info-box__inner { margin: var(--ib-mar); }
.alef-info-box.alef-info-box--r > .alef-info-box__inner   { border-radius: var(--ib-radius); }
.alef-info-box.alef-info-box--bw > .alef-info-box__inner  { border-width: var(--ib-border-w); }
.alef-info-box.alef-info-box--tfs .alef-info-box__title   { font-size: var(--ib-title-fs); }
.alef-info-box.alef-info-box--tlh .alef-info-box__title   { line-height: var(--ib-title-lh); }
.alef-info-box.alef-info-box--xfs .alef-info-box__text    { font-size: var(--ib-text-fs); }
.alef-info-box.alef-info-box--tfw .alef-info-box__title   { font-weight: var(--ib-title-fw); }
.alef-info-box.alef-info-box--xfw .alef-info-box__text    { font-weight: var(--ib-text-fw); }
/* An explicit padding/margin overrides the title's default `margin: 10px 0` (above) — the base class is repeated so
its weight (0,2,1) beats that rule. */
.alef-info-box.alef-info-box--tpad .alef-info-box__title  { padding: var(--ib-title-pad); }
.alef-info-box.alef-info-box--tmar .alef-info-box__title  { margin: var(--ib-title-mar); }
.alef-info-box.alef-info-box--xpad .alef-info-box__text   { padding: var(--ib-text-pad); }
.alef-info-box.alef-info-box--xmar .alef-info-box__text   { margin: var(--ib-text-mar); }

/* ── hover state: only when a value exists ─────────────────────────────────────── */
.alef-info-box__inner:hover { background: var(--ib-bg-h, var(--ib-bg, transparent)); }
.alef-info-box__inner:hover .alef-info-box__title { color: var(--ib-title-c-h, var(--ib-title-c, inherit)); }
.alef-info-box__inner:hover .alef-info-box__text  { color: var(--ib-text-c-h, var(--ib-text-c, inherit)); }

/* ── mobile: the same rules, after the desktop block ───────────────────────────── */
@media (max-width: 767px) {
	.alef-info-box.alef-info-box--align-m  { text-align: var(--ib-align-m); }
	.alef-info-box.alef-info-box--pad-m > .alef-info-box__inner { padding: var(--ib-pad-m); }
	.alef-info-box.alef-info-box--mar-m > .alef-info-box__inner { margin: var(--ib-mar-m); }
	.alef-info-box.alef-info-box--r-m > .alef-info-box__inner   { border-radius: var(--ib-radius-m); }
	.alef-info-box.alef-info-box--bw-m > .alef-info-box__inner  { border-width: var(--ib-border-w-m); }
	.alef-info-box.alef-info-box--tfs-m .alef-info-box__title   { font-size: var(--ib-title-fs-m); }
	.alef-info-box.alef-info-box--xfs-m .alef-info-box__text    { font-size: var(--ib-text-fs-m); }
	.alef-info-box.alef-info-box--mr-m .alef-info-box__media    { border-radius: var(--ib-media-r-m); }
	.alef-info-box__img.alef-info-box__img--w                   { width: var(--ib-img-w-m); }
	.alef-info-box--m-vertical > .alef-info-box__inner           { flex-direction: column; }
	.alef-info-box--m-vertical > .alef-info-box__inner > .alef-info-box__media { align-self: center; }
	.alef-info-box .alef-info-box__media[style*="--ib-media-mar-m"] { margin: var(--ib-media-mar-m); }
}

/* --- key-facts --- */
.alef-key-facts {
	background: var(--alef-key-facts-bg, #f6f7f8);
	border-radius: 8px;
	padding: 20px 20px 20px 44px;
	margin: 0 0 24px;
}

/* When this block is the content's last element, themes usually zero the last child's bottom margin (in Kadence:
`.single-content ul:last-child`) and the box sticks to the footer. The selector is element+class so its specificity
beats that rule without !important. */
ul.alef-key-facts:last-child {
	margin-bottom: 40px;
}

.alef-key-facts li {
	margin-bottom: 10px;
	line-height: 1.8;
}

.alef-key-facts li:last-child {
	margin-bottom: 0;
}

.alef-key-facts cite {
	font-style: normal;
	color: #5c6971;
	font-size: 0.9em;
}

.alef-key-facts-editor__row {
	border: 1px solid #e3e6e8;
	border-radius: 6px;
	padding: 10px 12px;
	margin-bottom: 10px;
}

.alef-key-facts-editor__title {
	font-weight: 700;
	margin: 0 0 10px;
}

/* --- list --- */
/*
 * alef/list
 * Every visual value is a token (Alef_Blocks\Styles) with a neutral fallback.
 *
 * ── The problem this block solves ──────────────────────────────────────────
 * core/list leaves the spacing between items to the theme, and the site's theme makes it nearly zero; the result in
 * Persian text (which needs more line height) is a dense, unscannable mass. Here the spacing between items is a
 * separate token with a generous default (10px), independent of the line-height inside an item.
 */

.alef-list {
	margin: 0 0 24px;
	padding-inline-start: var(--alef-list-indent, 22px);
	line-height: var(--alef-list-line-height, 1.9);
	list-style-type: var(--alef-list-marker-style, disc);
}

/*
 * The numbered list has its own marker token, or choosing "circle" for bulleted lists would turn the numbers into
 * circles too. `persian` is one of CSS's standard counter styles: ۱، ۲، ۳ … .
 */
ol.alef-list {
	list-style-type: var(--alef-list-marker-style-ordered, decimal);
}

/*
 * The marker-to-text gap: with list-style-position: outside the marker sits outside the item's border-box edge, so
 * the <li>'s own padding opens exactly that gap and the following lines keep their hanging indent.
 */
.alef-list > li {
	padding-inline-start: var(--alef-list-marker-gap, 4px);
}

.alef-list > li + li {
	margin-block-start: var(--alef-list-item-gap, 10px);
}

.alef-list > li::marker {
	color: var(--alef-list-marker-color, inherit);
	font-size: var(--alef-list-marker-size, 1em);
}

/* A nested list must not take the block's outer spacing again. */
.alef-list .alef-list {
	margin-block: var(--alef-list-item-gap, 10px) 0;
}

.alef-list-editor__row {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin-bottom: 6px;
}

.alef-list-editor__row .components-base-control {
	flex: 1 1 auto;
	margin-bottom: 0;
}

/* --- map --- */
/* alef/map — one lazy iframe; `--amap-w` caps the width, the column caps it on phones. */
.alef-map {
	display: block;
	width: min(100%, var(--amap-w, 100%));
	height: var(--amap-h, 300px);
	border: 0;
}

/* --- marquee-gallery --- */
/**
 * alef/marquee-gallery — an infinite marquee in pure CSS.
 *
 * The technique: two identical copies of the images inside a track with width:max-content; translateX(0 → -50%)
 * moves exactly one "copy", so the loop is seamless.
 * The arithmetic: spacing is a margin-right on each item, not a flex gap — with gap the total width would be
 * 2×copy + (2n-1)×gap and -50% would be off by half a gap (a visible jump).
 * direction:ltr is deliberate (the site is RTL) so the translateX direction stays stable.
 */
.alef-marquee {
	overflow: hidden;
	direction: ltr;
	container-type: inline-size;
}

.alef-marquee__track {
	display: flex;
	width: max-content;
	animation: alef-marquee var(--am-speed, 30s) linear infinite;
}

.alef-marquee__item {
	--am-items: var(--am-items-d, 6);
	--am-g: var(--am-gap, 66px);
	flex: 0 0 auto;
	box-sizing: border-box;
	width: calc((100cqw - var(--am-items) * var(--am-g)) / var(--am-items));
	aspect-ratio: 1;
	margin: 0 var(--am-g) 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.alef-marquee__item img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.alef-marquee--circle .alef-marquee__item img {
	border-radius: 50%;
	object-fit: cover;
}

@media (max-width: 1024px) {
	.alef-marquee__item {
		--am-items: var(--am-items-t, 4);
	}
}

@media (max-width: 767px) {
	.alef-marquee__item {
		--am-items: var(--am-items-m, 3);
		--am-g: var(--am-gap-m, 20px);
	}
}

@keyframes alef-marquee {
	from { transform: translateX(-50%); }
	to   { transform: translateX(0); }
}

/* Accessibility + deterministic visual QA (qa-visual runs with reducedMotion) */
@media (prefers-reduced-motion: reduce) {
	.alef-marquee__track {
		animation: none;
	}
}

/* A simple static preview in the editor (no animation) */
.alef-marquee-editor-preview {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: center;
}
.alef-marquee-editor-preview img {
	width: 90px;
	height: 90px;
	object-fit: contain;
	background: #f6f7f7;
	border-radius: 4px;
}
.alef-marquee-editor-preview--circle img {
	border-radius: 50%;
	object-fit: cover;
}

/* --- menu --- */
/**
 * alef/menu — a plain link list. Selectors start at `.alef-menu >` (0,2,x) so the theme's `.entry-content ul/li/a`
 * (0,1,1) cannot pad, bullet or underline a menu placed in post content; the list reset repeats the class (0,3,0)
 * because the RTL sheet's `.rtl .single-content ul { padding-right: 2em }` is (0,2,1).
 * Replaces core/navigation (≈21KB of CSS, mostly for its overlay menu) and
 * core/social-links (≈12KB, a colour rule for every service) where only a list of links is needed.
 */
.alef-menu.alef-menu > .alef-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.alef-menu > .alef-menu__list {
	display: flex;
	flex-direction: column;
	align-items: var(--amn-justify, flex-start);
	gap: var(--amn-gap, 0);
}

.alef-menu--horizontal > .alef-menu__list {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: var(--amn-justify, flex-start);
}

.alef-menu > .alef-menu__list > li {
	display: flex; /* no line box around the link: an icon-only item is as tall as its icon */
	margin: 0;
}

.alef-menu > .alef-menu__list a {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: var(--amn-c, inherit);
	font-size: var(--amn-fs, inherit);
	line-height: var(--amn-lh, inherit);
	text-decoration: none;
}

.alef-menu > .alef-menu__list svg {
	width: var(--amn-icon, 1.2em);
	height: var(--amn-icon, 1.2em);
	flex: none;
}

/* variant "buttons": a row of outlined buttons that invert on hover; `.is-primary` items are filled (in-page jump
   links such as «جدول قیمت · سوالات متداول» — Kadence's small button preset: 0.9em, padding .4em 1em) */
.alef-menu--buttons > .alef-menu__list a {
	padding: 0.4em 1em;
	font-size: var(--amn-fs, 0.9em);
	line-height: var(--amn-lh, 1.6);
	background: var(--amn-bg, transparent);
	border: 2px solid var(--amn-c, currentColor);
	border-radius: var(--amn-radius, 8px);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.alef-menu--buttons > .alef-menu__list > .is-primary > a,
.alef-menu--buttons > .alef-menu__list a:hover,
.alef-menu--buttons > .alef-menu__list a:focus-visible {
	background: var(--amn-c, currentColor);
	color: var(--amn-bg, #fff);
}

.alef-menu--buttons > .alef-menu__list > .is-primary > a {
	border-width: 1px;
}

/* variant "cta": calls to action in the theme's button size (inherited font, weight 500, .4em 1em). Outline items
   are 1px borders whose padding gives the border back (Kadence's outline button: 2px smaller than the filled one);
   `.is-primary` is filled. `--grow`: items share the row (full-width buttons that wrap on phones). */
.alef-menu--cta > .alef-menu__list a {
	justify-content: center;
	padding: calc(0.4em - 2px) calc(1em - 2px);
	font-weight: 500;
	line-height: var(--amn-lh, 1.6);
	color: var(--amn-c, currentColor);
	border: 1px solid var(--amn-c, currentColor);
	border-radius: calc(var(--amn-radius, 8px) - 1px);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.alef-menu--cta > .alef-menu__list > .is-primary > a {
	padding: 0.4em 1em;
	background: var(--amn-c, currentColor);
	color: var(--amn-bg, #fff);
	border: 0;
	border-radius: var(--amn-radius, 8px);
}

.alef-menu--cta > .alef-menu__list a:hover,
.alef-menu--cta > .alef-menu__list a:focus-visible {
	background: color-mix(in srgb, var(--amn-c, currentColor) 85%, #000);
	color: var(--amn-bg, #fff);
}

.alef-menu--grow > .alef-menu__list > li {
	flex: 1 0 auto; /* never shrink: a label that no longer fits wraps the item to the next row (Kadence's full width) */
}

.alef-menu--grow > .alef-menu__list a {
	width: 100%;
}

@media (max-width: 767px) {
	.alef-menu.alef-menu--fs-m > .alef-menu__list a {
		font-size: var(--amn-fs-m);
	}

	.alef-menu.alef-menu--py-m > .alef-menu__list a {
		padding-block: var(--amn-py-m);
	}
}

/* scrollMobile: a horizontal row stays one line on phones and scrolls sideways (chips), scrollbar hidden */
@media (max-width: 767px) {
	.alef-menu--scroll-m > .alef-menu__list {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.alef-menu--scroll-m > .alef-menu__list::-webkit-scrollbar {
		display: none;
	}

	.alef-menu--scroll-m > .alef-menu__list > li {
		flex: 0 0 auto;
	}
}

.alef-menu__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- modal --- */
/**
 * alef/modal — a modal on a native <dialog>.
 *
 * Why <dialog>: it renders in the browser's top layer (above everything, no z-index), has native Escape and focus
 * trapping, and ::backdrop is itself the overlay — so the old modal's whole z-index/overlay/aria machinery (Kadence
 * Pro, 18KB) goes away. Locking the body scroll is pure CSS too: body:has([open]).
 */
dialog.alef-modal {
	border: none;
	padding: 0;
	background: transparent;
	width: 100%;
	max-width: min(var(--am-maxw, 640px), var(--am-fit, 92vw));
	overflow: visible;
}

dialog.alef-modal::backdrop {
	background: rgba(0, 0, 0, var(--am-overlay, 0.6));
}

.alef-modal__content {
	background: var(--am-bg, var(--global-palette9, #fff));
	border: var(--am-bw, 0) solid var(--am-bc, transparent);
	border-radius: var(--am-br, 0);
	padding: var(--am-pad, 16px);
	max-height: 85dvh;
	overflow: auto;
}

/* Vertical placement — the dialog is centred with auto margins; top/bottom override the margin */
dialog.alef-modal--top {
	margin-top: 6dvh;
	margin-bottom: auto;
}

dialog.alef-modal--bottom {
	margin-bottom: 0;
	margin-top: auto;
	max-width: var(--am-fit, 100vw);
}

dialog.alef-modal--bottom .alef-modal__content {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	max-height: 90dvh;
}

.alef-modal__close {
	position: absolute;
	top: 8px;
	inset-inline-end: 8px;
	z-index: 1;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	cursor: pointer;
	color: var(--am-close-color, currentColor);
	padding: 0;
}

.alef-modal__close--outside {
	top: -44px;
	inset-inline-end: 0;
	color: var(--am-close-color, #fff);
}

.alef-modal__close svg {
	width: 24px;
	height: 24px;
}

/* layer "page": a non-modal dialog that is itself the full-screen overlay (only modal dialogs get ::backdrop), with
   a z-index — fixed page UI above it (a mobile bar) stays visible and clickable. A click on the overlay targets the
   dialog, so view.js's backdrop rule closes it. */
dialog.alef-modal.alef-modal--page[open] {
	position: fixed;
	inset: 0;
	z-index: var(--am-z, 1100);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	max-width: none;
	max-height: none;
	margin: 0;
	background: rgba(0, 0, 0, var(--am-overlay, 0.6));
	animation: alef-modal-backdrop-in 0.25s ease-out;
}

dialog.alef-modal.alef-modal--page.alef-modal--top {
	justify-content: flex-start;
	padding-top: 6dvh;
}

dialog.alef-modal.alef-modal--page.alef-modal--bottom {
	justify-content: flex-end;
}

dialog.alef-modal--page > .alef-modal__content {
	width: 100%;
	max-width: min(var(--am-maxw, 640px), var(--am-fit, 92vw));
	animation: alef-modal-in 0.25s ease-out;
}

/* Lock the page scroll while a modal is open — pure CSS, no JS */
body:has(dialog.alef-modal[open]) {
	overflow: hidden;
}

/* the fade-up entrance animation */
dialog.alef-modal[open] {
	animation: alef-modal-in 0.25s ease-out;
}

dialog.alef-modal[open]::backdrop {
	animation: alef-modal-backdrop-in 0.25s ease-out;
}

@keyframes alef-modal-in {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes alef-modal-backdrop-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	dialog.alef-modal[open],
	dialog.alef-modal[open]::backdrop,
	dialog.alef-modal--page > .alef-modal__content {
		animation: none;
	}
}

/* Editor preview: the dialog does not open, show a simple frame */
.alef-modal-editor-preview {
	border: 1px dashed #999;
	border-radius: 6px;
	padding: 12px;
}
.alef-modal-editor-preview > .alef-modal-editor-label {
	font-size: 11px;
	color: #757575;
	margin-bottom: 8px;
}

/* --- quick-answer --- */
/* alef/quick-answer — every visual value is a token (Alef_Blocks\Styles). */

.alef-quick-answer {
	background: var(--alef-quick-answer-bg, #f4f2f8);
	border-inline-start: var(--alef-quick-answer-bar-width, 4px) solid var(--alef-quick-answer-bar-color, var(--alef-accent, #7c3aed));
	border-radius: var(--alef-quick-answer-radius, 8px);
	padding: 16px 20px;
	margin: 0 0 24px;
	color: var(--alef-quick-answer-text-color, inherit);
}

.alef-quick-answer p {
	margin: 0;
	font-size: var(--alef-quick-answer-font-size, 1.05em);
	line-height: 1.9;
}

/* --- quote --- */
/*
 * alef/quote — a pull quote and a quotation with attribution (cite).
 *
 * ── Why the first design was thrown away ─────────────────────────────────────────────
 * The first version was a box with a grey background and a side bar — exactly the visual language of
 * `alef/callout`, `alef/quick-answer` and `alef/key-facts`. In an article full of boxes, one more box does not
 * "stand out"; it is invisible. The owner rightly said he had not noticed it at all.
 *
 * ── The current design ─────────────────────────────────────────────────────────────
 * The emphasis comes from **typography**, not a box:
 *   • no background and no frame — it sits on the article's own ground
 *   • larger text with more open line height: a "breath" in the wall of text
 *   • a large decorative quotation mark in the background at low opacity
 *   • a short thick line above the text as a visual signature (not a whole frame)
 * The result: in a fast scroll it stands apart from normal paragraphs at once, but is not mistaken for an info box
 * because it has no box shape.
 *
 * All spacing is logical (inline-start/end) so both RTL and LTR are right.
 */

.alef-quote {
	position: relative;
	margin: 40px 0;
	padding: 0;
	border: 0;
	background: none;
}

/* The visual signature: a short thick line above the quote. */
.alef-quote::after {
	content: "";
	display: block;
	inline-size: var(--alef-quote-rule-width, 56px);
	block-size: var(--alef-quote-rule-height, 3px);
	background: var(--alef-quote-rule-color, var(--alef-accent, #7c3aed));
	border-radius: 3px;
	margin-block-end: 18px;
	order: -1;
}

.alef-quote {
	display: flex;
	flex-direction: column;
}

/* The decorative quotation mark — large, faint, behind the text. */
.alef-quote::before {
	content: "”";
	position: absolute;
	inset-block-start: var(--alef-quote-mark-top, -28px);
	inset-inline-start: var(--alef-quote-mark-inset, -8px);
	font-family: Georgia, "Times New Roman", serif;
	font-size: var(--alef-quote-mark-size, 120px);
	line-height: 1;
	color: var(--alef-quote-mark-color, currentColor);
	opacity: var(--alef-quote-mark-opacity, 0.07);
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

.alef-quote__body {
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 0;
	border: 0;
	quotes: none;
	font-size: var(--alef-quote-text-size, 1.28em);
	line-height: var(--alef-quote-line-height, 2);
	font-weight: var(--alef-quote-text-weight, 600);
	color: var(--alef-quote-text-color, inherit);
	letter-spacing: -0.01em;
}

.alef-quote__body > :first-child { margin-top: 0; }
.alef-quote__body > :last-child { margin-bottom: 0; }

.alef-quote__cite {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 10px;
	margin-block-start: 16px;
	font-size: var(--alef-quote-cite-size, 0.82em);
	font-weight: 400;
	line-height: 1.8;
	color: var(--alef-quote-cite-color, #5c6971);
}

.alef-quote__cite::before {
	content: "";
	inline-size: 18px;
	block-size: 1px;
	background: currentColor;
	opacity: 0.5;
	align-self: center;
}

.alef-quote__name {
	font-style: normal;
	font-weight: 700;
	color: var(--alef-quote-name-color, inherit);
}

.alef-quote__link { text-decoration: none; }
.alef-quote__link:hover .alef-quote__name,
.alef-quote__link:focus-visible .alef-quote__name {
	text-decoration: underline;
}

.alef-quote__role { opacity: 0.9; }

/*
 * pull: a sentence from the article itself. Larger, with no attribution.
 * cite: a quotation from outside — a little smaller, since the attribution comes below it.
 */
.alef-quote--pull .alef-quote__body {
	font-size: var(--alef-quote-pull-text-size, 1.42em);
}

.alef-quote--cite .alef-quote__body {
	font-weight: var(--alef-quote-cite-text-weight, 500);
}

@media (max-width: 640px) {
	.alef-quote { margin: 32px 0; }
	.alef-quote::before {
		font-size: calc(var(--alef-quote-mark-size, 120px) * 0.6);
		inset-block-start: -18px;
	}
	.alef-quote--pull .alef-quote__body {
		font-size: var(--alef-quote-pull-text-size-mobile, 1.18em);
	}
	.alef-quote--cite .alef-quote__body { font-size: 1.1em; }
}

/* --- reels --- */
/**
 * alef/reels — a story strip + a full-screen player.
 * The thumbnail strip is pure CSS (flex + overflow-x + scroll-snap); only the player needs view.js (a few lines of
 * vanilla). The brand colour comes from --ar-accent (a block attribute).
 * direction:ltr on the strip is deliberate, so the order of the stories matches the order of the progress segments
 * in the player (the site is RTL).
 *
 * The buttons (ctrl/close/nav) deliberately set padding/transition/appearance explicitly — the site has an old,
 * over-broad global style (`select, button {...}`, from another form widget, unscoped) that affected the
 * background/padding/transition of every <button>, these included (oval buttons, a white icon invisible on a
 * near-white background, flicker on hover). Our class selector won on width/background/border-radius through
 * specificity, but we had set nothing for padding/transition, so those fell to the global style — they are pinned
 * explicitly here.
 */
.alef-reels__strip {
	list-style: none;
	display: flex;
	gap: 16px;
	margin: 0;
	padding: 4px;
	overflow-x: auto;
	overflow-y: visible;
	direction: ltr;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	touch-action: pan-x;
}

.alef-reels__strip::-webkit-scrollbar {
	display: none;
}

@media (pointer: fine) {
	.alef-reels__strip {
		cursor: grab;
		user-select: none;
	}

	/* Above the thumb's own cursor:pointer (both have equal specificity, this one must stay second/win) — we want the
	drag hand over the whole strip, even over the thumbs themselves, not the link/select pointer. */
	.alef-reels__strip .alef-reels__thumb,
	.alef-reels__strip .alef-reels__thumb img {
		cursor: inherit;
	}

	.alef-reels__strip.is-dragging {
		cursor: grabbing;
		scroll-snap-type: none;
	}
}

.alef-reels__strip li {
	flex: 0 0 auto;
	scroll-snap-align: start;
	margin: 0;
}

.alef-reels__thumb {
	position: relative;
	display: block;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	border-radius: 50%;
	/* The site's old global style injects a red 30px-blur box-shadow into every <button> on hover; the strip's tight
	height (overflow) clips it and shows a cut edge instead of a soft fade — deliberately switched off. */
	box-shadow: none !important;
}

.alef-reels__views {
	position: absolute;
	bottom: 6px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 3px;
	padding: 1px 7px;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.65);
	color: #fff;
	font-size: 10px;
	line-height: 1.6;
	white-space: nowrap;
	pointer-events: none;
}

.alef-reels__views-icon {
	width: 10px;
	height: 10px;
	fill: currentColor;
	flex: none;
}

.alef-reels__thumb img {
	display: block;
	width: 98px;
	height: 98px;
	object-fit: cover;
	border-radius: 50%;
	/* Without this, on mousedown+move the browser "drags out" the <img> itself (native image drag), so drag-to-scroll
	worked only in the empty space between stories, not on the circles themselves. */
	-webkit-user-drag: none;
	user-drag: none;
	-webkit-user-select: none;
	user-select: none;
	/* The ring around the thumb (story style). Default = Instagram's multicolour gradient.
	Why this technique and not `border: Npx solid <colour>`: a plain border takes no gradient. So the border becomes
	 **transparent** and two background layers are used — the solid `padding-box` layer makes the white gap between the
	ring and the image, and the `border-box` gradient shows from under the transparent border and becomes the ring
	itself. It also works with border-radius:50%, unlike border-image-based solutions. The geometry is exactly as
	before (a 4px ring + a 3px gap).
	Adjustable in: Alef → Blocks → block appearance → «ریلز / استوری». */
	border: var(--alef-reels-ring-width, 4px) solid transparent;
	padding: var(--alef-reels-ring-gap, 3px);
	background:
		linear-gradient(var(--alef-reels-ring-gap-color, #ffffff), var(--alef-reels-ring-gap-color, #ffffff)) padding-box,
		var(--alef-reels-ring, conic-gradient(from 215deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75)) border-box;
	transition: transform 0.2s ease;
}

.alef-reels__thumb:hover img,
.alef-reels__thumb:focus-visible img {
	transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
	.alef-reels__thumb img {
		transition: none;
	}
	.alef-reels__thumb:hover img {
		transform: none;
	}
}

/* -- the player (a <template> clone, attached to body by view.js) -------- */

.alef-reels__viewer {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(0, 0, 0, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	direction: ltr;
}

.alef-reels__stage {
	position: relative;
	width: min(92vw, 56vh);
	aspect-ratio: 9 / 16;
	max-height: 92vh;
	background: #000;
	border-radius: 12px;
	overflow: hidden;
}

.alef-reels__stage video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.alef-reels__progress {
	position: absolute;
	top: 8px;
	left: 8px;
	right: 8px;
	display: flex;
	gap: 4px;
	z-index: 2;
}

.alef-reels__seg {
	flex: 1;
	height: 3px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.35);
	overflow: hidden;
}

.alef-reels__seg-fill {
	display: block;
	width: 100%;
	height: 100%;
	background: #fff;
	transform: scaleX(0);
	transform-origin: left;
}

.alef-reels__seg.is-done .alef-reels__seg-fill {
	transform: scaleX(1);
}

.alef-reels__seg.is-active .alef-reels__seg-fill {
	animation: alef-reels-progress var(--dur, 5s) linear forwards;
}

/* When the video pauses (a click on the video or the play/pause button), the progress animation must stop too, or
the segment finishes before the real video. */
.alef-reels__viewer.is-paused .alef-reels__seg.is-active .alef-reels__seg-fill {
	animation-play-state: paused;
}

@keyframes alef-reels-progress {
	to { transform: scaleX(1); }
}

.alef-reels__title {
	position: absolute;
	top: 20px;
	left: 12px;
	right: 12px;
	z-index: 2;
	color: #fff;
	font-size: 13px;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
	direction: rtl;
}

.alef-reels__close,
.alef-reels__nav {
	position: absolute;
	z-index: 3;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	padding: 0;
	box-sizing: border-box;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: none;
}

.alef-reels__close:hover,
.alef-reels__nav:hover {
	box-shadow: none !important;
}

.alef-reels__close .alef-reels__icon,
.alef-reels__nav .alef-reels__icon {
	width: 20px;
	height: 20px;
}

.alef-reels__close {
	top: 12px;
	/* Deliberately on the left — the story title is RTL and fills from the right, so buttons on that side would land
	on the title text. */
	left: 12px;
}

.alef-reels__nav {
	top: 50%;
	/* !important because a global site rule puts a "lift" transform on buttons' hover/focus that conflicts with our
	vertical-centring transform (one property, last one wins — not combinable) and makes the ‹/› buttons jump on
	hover/click. */
	transform: translateY(-50%) !important;
}

.alef-reels__nav--prev { left: 8px; }
.alef-reels__nav--next { right: 8px; }

.alef-reels__nav[disabled] {
	opacity: 0.3;
	cursor: default;
}

/* The stage's top-left corner: play/pause + mute/unmute next to the close button — deliberately left, not right,
because the RTL title fills from the right (explained above). */
.alef-reels__controls {
	position: absolute;
	top: 12px;
	left: 60px;
	z-index: 3;
	display: flex;
	gap: 8px;
}

.alef-reels__ctrl {
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 32px;
	height: 32px;
	padding: 0;
	box-sizing: border-box;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: none;
}

.alef-reels__ctrl:hover {
	box-shadow: none !important;
}

.alef-reels__icon {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.alef-reels__ctrl .alef-reels__icon--off { display: none; }

.alef-reels__viewer.is-paused .alef-reels__ctrl--play .alef-reels__icon--on { display: none; }
.alef-reels__viewer.is-paused .alef-reels__ctrl--play .alef-reels__icon--off { display: block; }

.alef-reels__ctrl--mute.is-muted .alef-reels__icon--on { display: none; }
.alef-reels__ctrl--mute.is-muted .alef-reels__icon--off { display: block; }

body.alef-reels-open {
	overflow: hidden;
}

/* editor preview */
.alef-reels-editor-note {
	border: 1px dashed #949494;
	border-radius: 6px;
	padding: 16px;
	background: #f6f7f7;
}

/* --- related-content --- */
/*
 * alef/related-content — two modes: a single line mid-text, and a list at the end of the article.
 */

.alef-related--inline {
	background: var(--alef-related-inline-bg, #f7f7f8);
	border-inline-start: var(--alef-related-inline-bar-width, 3px) solid var(--alef-related-inline-bar-color, var(--alef-accent, #7c3aed));
	border-radius: var(--alef-related-radius, 6px);
	padding: var(--alef-related-inline-padding, 10px 14px);
	margin: 0 0 24px;
	line-height: 1.8;
}

.alef-related__label {
	font-weight: 700;
	color: var(--alef-related-label-color, inherit);
}

.alef-related--list {
	background: var(--alef-related-list-bg, transparent);
	border: var(--alef-related-list-border-width, 1px) solid var(--alef-related-list-border-color, #e3e6e8);
	border-radius: var(--alef-related-radius, 6px);
	padding: var(--alef-related-list-padding, 18px 20px);
	margin: 32px 0 24px;
}

.alef-related__title {
	font-weight: 700;
	font-size: var(--alef-related-title-size, 1em);
	color: var(--alef-related-title-color, inherit);
	margin: 0 0 12px;
}

.alef-related__list {
	margin: 0;
	padding-inline-start: var(--alef-related-indent, 20px);
	list-style: var(--alef-related-marker, disc);
}

.alef-related__item {
	margin: var(--alef-related-item-gap, 8px) 0;
	line-height: 1.7;
}

.alef-related a {
	color: var(--alef-related-link-color, var(--alef-accent, #7c3aed));
	text-decoration: none;
}

.alef-related a:hover,
.alef-related a:focus-visible {
	text-decoration: underline;
}

.alef-related-editor__row {
	border: 1px solid #e3e6e8;
	border-radius: 6px;
	padding: 10px 12px;
	margin-bottom: 10px;
}

.alef-related-editor__hint {
	margin: 10px 0 0;
	opacity: 0.7;
	font-size: 0.9em;
}

/* --- section --- */
/**
 * alef/section + alef/section-column — a multi-column layout with native grid.
 *
 * ⚠ **This block's non-negotiable contract: no per-instance `<style>` is ever printed.** Every value is an inline
 * CSS variable on the element itself and this fixed sheet consumes it. The reason is a number, not taste: the
 * matching Kadence block generated and inlined a unique selector per instance, which made 59.7 % of the site's
 * HTML `<style>` (`docs/reports/asset-baseline.md`). If the renderer ever starts printing `<style>`, the block's
 * whole reason to exist is gone.
 *
 * The breakpoints are **1024 and 767** — exactly Kadence's md/sm boundary, so a migrated page changes its column
 * count at no width.
 */

/* ⚠ **Every variable this block reads gets a default here.** CSS variables **inherit**; so a section inside
another section inherits every undeclared variable from its parent and `var(--x, fallback)` never reaches the
fallback. On the contact page a nested row inherited its parent's padding and its content width fell from 498 to
284. Declaring explicitly cuts the inheritance.
 **Whenever you add a variable, put its default here too.** */
.alef-section {
	--as-cols: 1;
	--as-cols-t: var(--as-cols);
	--as-cols-m: 1;
	--as-gap: 2rem;
	--as-gap-m: var(--as-gap);
	--as-colgap-m: var(--as-gap-m);
	--as-rowgap-m: var(--as-gap-m);
	--as-tpl: repeat(var(--as-cols), minmax(0, 1fr));
	--as-tpl-t: repeat(var(--as-cols-t), minmax(0, 1fr));
	--as-pad: 0;
	--as-pad-m: var(--as-pad);
	--as-mar: 0;
	--as-mar-m: var(--as-mar);
	--as-bg: transparent;
	--as-bw: 0;
	--as-bc: transparent;
	--as-br: 0;
	--as-maxw: none;
	--as-minh: auto;
	--as-ov: 0;
	--as-ov-color: #000;
	--as-z: auto;
	--as-edge-pad: 0;
	position: relative;
	margin: var(--as-mar, 0);
	padding: var(--as-pad, 0);
	background-color: var(--as-bg, transparent);
	border: var(--as-bw, 0) solid var(--as-bc, transparent);
	border-radius: var(--as-br, 0);
	min-height: var(--as-minh, auto);
}

/* A layer only on opt-in — a needless `z-index` on every section creates a new stacking context and can push
things above it (menu, modal) underneath. */
.alef-section--has-z {
	z-index: var(--as-z, auto);
}

/* ⚠ The background image is **not** here — it is the element's own inline property. The reason is documented
in `class-section-block.php`: `url()` inside a custom property resolves relative to the sheet that consumes it,
and this sheet lives in `uploads/alef-blocks/`. A separate layer was not needed either: the element's own
background sits under both pseudo-elements, so the overlay still lies between the image and the content. */
.alef-section--has-overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.alef-section--has-overlay::after {
	background: var(--as-ov-color, #000);
	opacity: var(--as-ov, 0);
	z-index: 1;
}

/* ⚠ The mobile background is a **separate layer**, not the same property overridden inside a media query — for
the same reason as above: it cannot be a CSS variable (url breaks in the export), and a real inline value cannot
be put behind a media query. Its layer is hidden by default and only covers the desktop background below 768px. */
.alef-section__bg-m {
	display: none;
}

@media (max-width: 767px) {
	/* The desktop image lies fully under the mobile layer — without this, phones download both (the home hero: 41 +
	57 KB). Only `!important` beats the inline declaration; a background not rendered is not fetched. */
	.alef-section--has-mobile-bg {
		background-image: none !important;
	}

	.alef-section--has-mobile-bg > .alef-section__bg-m {
		display: block;
		position: absolute;
		inset: 0;
		z-index: 0;
	}
}

.alef-section__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: var(--as-tpl, repeat(var(--as-cols), minmax(0, 1fr)));
	gap: var(--as-gap);
	max-width: var(--as-maxw, none);
	margin-inline: auto;
	width: 100%;
	/* The equivalent of `.kt-row-has-bg > .kt-row-column-wrap` in Kadence's sheet: a row with a background must not
	have its content touching the edge. The default is zero so sections without a background stay untouched; the
	value comes from the `edgePadding` attribute. */
	padding-inline: var(--as-edge-pad, 0);
}

@media (max-width: 1024px) {
	.alef-section__inner {
		grid-template-columns: var(--as-tpl-t, repeat(var(--as-cols-t), minmax(0, 1fr)));
	}
}

@media (max-width: 767px) {
	.alef-section__inner {
		grid-template-columns: repeat(var(--as-cols-m), minmax(0, 1fr));
		/* ⚠ On mobile the horizontal and vertical gaps are not necessarily the same — row `1296_82d8b1-ae` has
		`column-gap:0` and `row-gap:1rem` on mobile (read from the generated CSS). Both default to `--as-gap-m`, so a
		single `gap` still works as before. */
		column-gap: var(--as-colgap-m);
		row-gap: var(--as-rowgap-m);
	}

	/* Kadence's `first-row` layout: **two columns, and the first item full width.**
	Kadence's own rule is `nth-child(3n+1 of *:not(style))`; the `of S` was only needed because Kadence prints
	`<style>` next to the columns. This block prints no `<style>` (the contract at the top of this file), so a plain
	`nth-child` is enough — and its browser support is far wider. */
	/* The equivalent of Kadence's `collapseOrder: right-to-left`: on mobile the second column comes first. Kadence
	builds it with `order` on `nth-child`; here no `flex-direction` is needed since the grid is one column and
	`order` is enough. */
	.alef-section--reverse-m > .alef-section__inner > *:nth-child(1) { order: 2; }
	.alef-section--reverse-m > .alef-section__inner > *:nth-child(2) { order: 1; }

	.alef-section--first-row-m > .alef-section__inner > *:nth-child(3n + 1) {
		grid-column: 1 / -1;
	}
	.alef-section {
		padding: var(--as-pad-m, var(--as-pad, 0));
		margin: var(--as-mar-m, var(--as-mar, 0));
	}
}

/* -- column -------------------------------------------------------------- */

/* ⚠ **The default is `block`, not `flex`.** A Kadence column is `display:block` too (measured). Flexing
unconditionally has a hidden side effect: a child with `margin-inline: auto` is **not stretched** in a flex
container (auto margins cancel stretch alignment) and falls to its intrinsic width. On the contact page that
shrank the Google map from 403px to 300px (the iframe's intrinsic width) and changed the page height by 10 %.
Flex is turned on only when the column really needs it. */
.alef-section__col {
	/* The same rule as above: a nested column must not inherit its parent column's variables. */
	--asc-valign: flex-start;
	--asc-halign: stretch;
	--asc-gap: 0;
	--asc-span: 1;
	--asc-pad: 0;
	--asc-pad-m: var(--asc-pad);
	--asc-mar: 0;
	--asc-mar-m: var(--asc-mar);
	--asc-bg: transparent;
	--asc-bw: 0;
	--asc-bc: transparent;
	--asc-br: 0;
	--asc-sticky-top: 20px;
	--asc-minh: auto;
	display: block;
	grid-column: span var(--asc-span, 1);
	padding: var(--asc-pad, 0);
	margin: var(--asc-mar, 0);
	background-color: var(--asc-bg, transparent);
	border: var(--asc-bw, 0) solid var(--asc-bc, transparent);
	border-radius: var(--asc-br, 0);
	min-height: var(--asc-minh, auto);
	min-width: 0; /* بدون این، فرزندِ عریض (جدول) ستون گرید را می‌کشد */
}

/* ⚠ **`flow-root`, not `block`.** Kadence's inner column (`.kt-inside-inner-col`) is in practice
`display:flex`, and a flex container **does not collapse its children's margins**; a `block` column does, and a
child's top/bottom margin sticks out of its height.

This happened on the home page's «مراحل خرید» row: the cards have `margin-top:50px` and their icon
`margin-top:-75px`; the cards rendered **exactly in the right place** but the section's height went 557 → 294
and the next section came up 260px and landed on them. (Measured; the cards themselves had zero difference in
the diff — only the parent box was shorter.)

`flow-root` makes a BFC and keeps the margins, but unlike `flex` it keeps block layout — so the recorded
`margin-inline:auto` trap (the Google map that fell from 403 to 300px in a flex container) does not repeat. */
.alef-section__col {
	display: flow-root;
}

/* ⚠ **Zeroing children's margins is only for the flex column, not every column.** Kadence prints this rule
exactly for the column that has an alignment (`justifyContent`) — 1 column of 43 on the whole home page. It was
tempting to apply it to every column, but that would have been an unmeasured change on all 61 pages. Without it
the sticky footer bar's column got 15px taller and the phone icon stuck out of the bar. */
/* ⚠ The class is repeated on purpose so the specificity is an equal (0,2,0) — exactly the weight of Kadence's
generated rule (`.kadence-columnXXX > .kt-inside-inner-col > *`). With one class (0,1,0) this rule would weigh
the same as the site's own hand-written rule, which loads later, wins, and keeps its 15px margin.

⚠ **The trigger is `--halign`, not `--flex`.** Kadence prints this reset only for a column that has
`justifyContent` — not for a column that only has `verticalAlignment`. But `--flex` is added even when only
`valign` is set, so this rule reached columns Kadence never zeroed and ate the default margins of the heading/
paragraph inside them: on 1595 column `325ea8-b8` has only `verticalAlignment:"middle"`, and in the 2026-08-21
version its heading had `margin-bottom:14px` and the intro paragraph 32px — after the migration both became zero.
`--halign` comes exactly when `justifyContent` has a value, i.e. Kadence's own condition — and `--halign-m` for
the mobile value (not `--flex-m`, which a mobile vertical alignment alone also sets: element 1296's image columns
lost Kadence's 8.5px figure margins and the bar came out 9px shorter). */
.alef-section__col--halign.alef-section__col--halign > *,
.alef-section__col--halign-m.alef-section__col--halign-m > *,
.alef-section__col--horizontal.alef-section__col--horizontal > *,
.alef-section__col--horizontal-reverse.alef-section__col--horizontal-reverse > * {
	margin-top: 0;
	margin-bottom: 0;
}

/* ⚠ **`var(--asc-valign, center)` alone is not safe — CSS variables inherit.** If a parent column set
`--asc-valign`, the child column inherits it and the fallback inside `var()` never runs. That is exactly what
happened in the global header: the horizontal phone-number column had no `--asc-valign` but inherited
`flex-start`, so «تماس جهت مشاوره» and the number lost their vertical centring (measured against the 2026-08-21
version: `align-items` went from `center` to `flex-start`).
So the default comes in the rule itself and the variable is read only behind the guard class — the same pattern
as `Props::gated` in the other blocks. */
.alef-section__col--flex {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
}

.alef-section__col--horizontal {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}

.alef-section__col--horizontal-reverse {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: flex-start;
}

/* ⚠ **The gap is for all three flex layouts, not only `--flex`.** The first version put this declaration only in
`.alef-section__col--flex`; the header column is `--horizontal-reverse`, so `--asc-gap` was printed but read
nowhere and «تماس جهت مشاوره» touched the phone icon (measured: a 6px gap in the 2026-08-21 version vs −10px, an
overlap).
Rows and columns have separate gaps — Kadence had `row-gap:0` and `column-gap:1rem` on that same column. When
`--asc-rowgap` is not set, `--asc-gap` stays, so the previous behaviour is untouched. */
.alef-section__col--flex,
.alef-section__col--horizontal,
.alef-section__col--horizontal-reverse {
	gap: var(--asc-rowgap, var(--asc-gap, 0)) var(--asc-gap, 0);
}

/* Same reason as `--asc-valign`: the variable inherits, so the default is in the rule and the variable is read
only behind the guard class. */
.alef-section__col--flex.alef-section__col--halign {
	align-items: var(--asc-halign);
}

/* The block's own explicit value — only with the guard class, so unwanted inheritance does not interfere. */
.alef-section__col--flex.alef-section__col--valign {
	justify-content: var(--asc-valign);
}

.alef-section__col--horizontal.alef-section__col--valign,
.alef-section__col--horizontal-reverse.alef-section__col--valign {
	align-items: var(--asc-valign);
}

.alef-section__col--horizontal.alef-section__col--halign,
.alef-section__col--horizontal-reverse.alef-section__col--halign {
	justify-content: var(--asc-halign);
}

.alef-section__col--sticky {
	position: sticky;
	top: var(--asc-sticky-top, 20px);
	align-self: start;
}

/* ⚠ Behind the guard class, because `text-align` inherits: an empty declaration on a column that set nothing
would switch off the alignment inherited from the parent. */
.alef-section__col--ta {
	text-align: var(--asc-ta);
}

/* With a link: the whole column is clickable, with no change to the text's look. */
a.alef-section__col {
	color: inherit;
	text-decoration: none;
}

@media (max-width: 767px) {
	.alef-section__col {
		padding: var(--asc-pad-m, var(--asc-pad, 0));
		margin: var(--asc-mar-m, var(--asc-mar, 0));
	}

	/* ⚠ **A mobile-only alignment must be a class, not a variable.** Kadence stores `justifyContent` responsively
	(`["","","center"]`) and at that breakpoint makes the column's inner box flex. If only the variable changed here,
	the column would stay `flow-root` on mobile and an `inline-block` child would both get baseline spacing and keep
	its vertical margin — the sticky footer bar got 19px taller and the phone icon stuck out of the bar. */
	.alef-section__col--flex-m {
		display: flex;
		flex-direction: column;
		justify-content: var(--asc-valign-m, var(--asc-valign, flex-start));
		align-items: var(--asc-halign-m, var(--asc-halign, stretch));
		gap: var(--asc-gap-m, var(--asc-gap, 0));
	}
}

/* Hiding at each breakpoint — the equivalent of Kadence's `kvs-*`. */
@media (min-width: 1025px) {
	.alef-section__col--hide-d { display: none; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.alef-section__col--hide-t { display: none; }
}
@media (max-width: 767px) {
	.alef-section__col--hide-m { display: none; }
}

/* editor preview */
.alef-section-editor-label {
	font-size: 11px;
	color: #757575;
	margin-bottom: 6px;
}

/* --- show-more --- */
/**
 * alef/show-more — clipping long content + an open/close button. Pure CSS, zero JavaScript.
 *
 * The state lives on a hidden checkbox and reaches the content and buttons through the sibling selector (~). That is
 * why the markup order is mandatory: input → content → actions.
 *
 * Colours come from the central tokens and the fallbacks are **neutral**, not any site's brand colour (an Alef family
 * rule). A site with no tokens set gets a clean grey button.
 */
.alef-showmore {
	display: block;
}

/* The checkbox must not be seen but must stay focusable — so no display:none. */
.alef-showmore__state {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * Clipping uses overflow:hidden, not display:none — the clipped text stays whole in the DOM and the accessibility
 * tree. On purpose: the content is neither hidden from crawlers nor lost to screen-reader users.
 */
.alef-showmore__content {
	max-height: var(--asm-h, 250px);
	overflow: hidden;
	position: relative;
}

.alef-showmore__state:checked ~ .alef-showmore__content {
	max-height: none;
	overflow: visible;
}

/* An optional fade at the cut edge — off by default, since the Kadence version had a sharp cut. */
.alef-showmore--fade .alef-showmore__content::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 5em;
	background: linear-gradient(to bottom, transparent, var(--alef-showmore-fade-to, #ffffff));
	pointer-events: none;
}
.alef-showmore--fade .alef-showmore__state:checked ~ .alef-showmore__content::after {
	display: none;
}

.alef-showmore__actions {
	display: flex;
	justify-content: var(--asm-align, center);
	margin-top: var(--alef-showmore-gap, 1em);
}

.alef-showmore__btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--asm-btn-w, auto);
	cursor: pointer;
	user-select: none;
	text-align: center;
	font-size: var(--alef-showmore-btn-size, 0.9rem);
	line-height: var(--alef-showmore-btn-line, 1.6);
	padding: var(--alef-showmore-btn-padding-y, 6px) var(--alef-showmore-btn-padding-x, 14px);
	border-radius: var(--alef-showmore-btn-radius, 7px);
	transition: background-color .15s ease, color .15s ease;
}

/* "More": a filled button. "Less": an outlined button — the Kadence version's pattern. */
.alef-showmore__btn--more {
	background: var(--alef-showmore-btn-bg, #444444);
	color: var(--alef-showmore-btn-text, #ffffff);
	border: var(--alef-showmore-btn-border-width, 0) solid transparent;
}
.alef-showmore__btn--less {
	background: transparent;
	color: var(--alef-showmore-btn-bg, #444444);
	border: 1px solid var(--alef-showmore-btn-bg, #444444);
	/* The border sits inside the padding, so both buttons have the same outer size (as in Kadence). */
	padding: calc(var(--alef-showmore-btn-padding-y, 6px) - 1px) calc(var(--alef-showmore-btn-padding-x, 14px) - 1px);
}

.alef-showmore__btn--more:hover {
	background: var(--alef-showmore-btn-bg-hover, var(--alef-showmore-btn-bg, #444444));
}
.alef-showmore__btn--less:hover {
	background: color-mix(in srgb, var(--alef-showmore-btn-bg, #444444) 8%, transparent);
}

/* Only one of the two buttons is visible at a time. */
.alef-showmore__btn--less,
.alef-showmore__state:checked ~ .alef-showmore__actions .alef-showmore__btn--more {
	display: none;
}
.alef-showmore__state:checked ~ .alef-showmore__actions .alef-showmore__btn--less {
	display: inline-flex;
}

/* The checkbox is hidden, so the focus ring must appear on the visible button — otherwise a keyboard user cannot
tell where they are. */
.alef-showmore__state:focus-visible ~ .alef-showmore__actions .alef-showmore__btn {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

@media (max-width: 767px) {
	.alef-showmore__btn {
		width: var(--asm-btn-w-m, var(--asm-btn-w, auto));
	}
}

/* editor preview */
.alef-showmore-editor-preview {
	border: 1px dashed #999;
	border-radius: 6px;
	padding: 12px;
}
.alef-showmore-editor-label {
	font-size: 11px;
	color: #757575;
	margin-bottom: 8px;
}

/* --- slider --- */
/**
 * alef/slider — a single-slide slider with a crossfade. Pure CSS, zero JavaScript.
 *
 * Why a fade and not translateX: with a horizontal slide, going back from the last slide to the first either has a
 * visible "jump" or needs the first slide copied at the end of the track (what the marquee does, impossible here:
 * the children are arbitrary blocks, and cutting the first child out of the rendered HTML string is fragile). A
 * fade loops naturally — and on an RTL site it has no direction problem either.
 *
 * Layout: all slides sit on top of each other in one grid cell. Deliberately not position:absolute — absolute
 * would make the container's height zero; this way height = the tallest slide and fixed from the start (zero CLS,
 * no height computation in JS the way Splide did).
 *
 * The only thing built in PHP is @keyframes (percentages cannot come from a CSS variable). Each slide's delay is
 * computed right here with calc(), so the generated CSS stays minimal.
 */
.alef-slider {
	display: grid;
}

.alef-slider > * {
	grid-area: 1 / 1;
	min-width: 0;
	margin: 0;
	animation-duration: calc(var(--as-n) * var(--as-auto));
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-fill-mode: both;
}

/*
 * The delay of slide k (1-based) = (k - 1 - n) × each slide's duration — always negative, i.e. the animation is
 * in the right place from the very first frame and nothing jumps at load. For k=1 the value -n×auto is one full
 * period, equivalent to zero.
 */
.alef-slider > *:nth-child(1)  { animation-delay: calc((0  - var(--as-n)) * var(--as-auto)); }
.alef-slider > *:nth-child(2)  { animation-delay: calc((1  - var(--as-n)) * var(--as-auto)); }
.alef-slider > *:nth-child(3)  { animation-delay: calc((2  - var(--as-n)) * var(--as-auto)); }
.alef-slider > *:nth-child(4)  { animation-delay: calc((3  - var(--as-n)) * var(--as-auto)); }
.alef-slider > *:nth-child(5)  { animation-delay: calc((4  - var(--as-n)) * var(--as-auto)); }
.alef-slider > *:nth-child(6)  { animation-delay: calc((5  - var(--as-n)) * var(--as-auto)); }
.alef-slider > *:nth-child(7)  { animation-delay: calc((6  - var(--as-n)) * var(--as-auto)); }
.alef-slider > *:nth-child(8)  { animation-delay: calc((7  - var(--as-n)) * var(--as-auto)); }
.alef-slider > *:nth-child(9)  { animation-delay: calc((8  - var(--as-n)) * var(--as-auto)); }
.alef-slider > *:nth-child(10) { animation-delay: calc((9  - var(--as-n)) * var(--as-auto)); }
.alef-slider > *:nth-child(11) { animation-delay: calc((10 - var(--as-n)) * var(--as-auto)); }
.alef-slider > *:nth-child(12) { animation-delay: calc((11 - var(--as-n)) * var(--as-auto)); }
.alef-slider > *:nth-child(13) { animation-delay: calc((12 - var(--as-n)) * var(--as-auto)); }
.alef-slider > *:nth-child(14) { animation-delay: calc((13 - var(--as-n)) * var(--as-auto)); }
.alef-slider > *:nth-child(15) { animation-delay: calc((14 - var(--as-n)) * var(--as-auto)); }
.alef-slider > *:nth-child(16) { animation-delay: calc((15 - var(--as-n)) * var(--as-auto)); }
.alef-slider > *:nth-child(17) { animation-delay: calc((16 - var(--as-n)) * var(--as-auto)); }
.alef-slider > *:nth-child(18) { animation-delay: calc((17 - var(--as-n)) * var(--as-auto)); }
.alef-slider > *:nth-child(19) { animation-delay: calc((18 - var(--as-n)) * var(--as-auto)); }
.alef-slider > *:nth-child(20) { animation-delay: calc((19 - var(--as-n)) * var(--as-auto)); }

/* Pause: on hover (optional) and whenever focus is inside the slider — without the latter, tabbing to a link that
is fading out is unusable. */
.alef-slider[data-pause="1"]:hover > *,
.alef-slider:focus-within > * {
	animation-play-state: paused;
}

/*
 * Reduced motion: the animation is off and only the first slide is visible. The others are not removed from the
 * layout (visibility:hidden), so the container's height does not change and the page does not jump.
 */
@media (prefers-reduced-motion: reduce) {
	.alef-slider > * {
		animation: none;
		opacity: 0;
		visibility: hidden;
	}
	.alef-slider > *:first-child {
		opacity: 1;
		visibility: visible;
	}
}

/* editor preview */
.alef-slider-editor-preview {
	border: 1px dashed #999;
	border-radius: 6px;
	padding: 12px;
}
.alef-slider-editor-label {
	font-size: 11px;
	color: #757575;
	margin-bottom: 8px;
}

/* --- sources --- */
/* alef/sources — every visual value is a token (Alef_Blocks\Styles). */

.alef-sources__title {
	margin: 0 0 10px;
}

.alef-sources {
	padding-inline-start: 22px;
	line-height: 2;
	color: var(--alef-sources-color, #3f4b50);
	font-size: var(--alef-sources-font-size, 0.8em);
	list-style: var(--alef-sources-marker, decimal);
}

.alef-sources a {
	color: var(--alef-sources-color, #3f4b50);
	text-decoration: none;
}

.alef-sources a:hover,
.alef-sources a:focus-visible {
	text-decoration: underline;
}

.alef-sources-editor__row {
	border: 1px solid #e3e6e8;
	border-radius: 6px;
	padding: 10px 12px;
	margin-bottom: 10px;
}

.alef-sources-editor__title {
	font-weight: 700;
	margin: 0 0 10px;
}

/* --- tabs --- */
/**
 * alef/tabs — tabs with radios + CSS. Zero JavaScript.
 *
 * ⚠ `nth-of-type` everywhere, not `nth-child`. Kadence blocks inject `<style>` in the middle of content and
 * `nth-child` counts those too — this really broke once on this page's slider. `input`/`label`/`section` with
 * nth-of-type are immune to any other injected tag.
 *
 * ⚠ The mobile breakpoint is applied on the consuming rule itself, not by redefining the variable inside a media
 * query: the values sit inline on the element and inline beats any sheet rule, so a redefinition had no effect.
 */

.alef-tabs {
	--at-tab-gap: 10px;
	--at-tab-line: 1.402;
}

/* The radio must stay focusable, so it is clipped, not display:none. */
.alef-tabs__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.alef-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
	/* Eats the last trailing gap so the group lands exactly in the middle. */
	margin-inline-start: var( --at-nav-inset, calc( -1 * var( --at-tab-gap ) ) );
}

.alef-tabs--start .alef-tabs__nav { justify-content: flex-start; }
.alef-tabs--end .alef-tabs__nav   { justify-content: flex-end; }

.alef-tabs__tab {
	/* Each tab's width = one full column minus the gap; the gap itself is a margin, not `gap`, so each tab's share
	of the width stays exactly `100%/cols`. */
	flex: 0 0 calc( 100% / var( --at-cols, 4 ) - var( --at-tab-gap ) );
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	cursor: pointer;
	margin-inline-end: var( --at-tab-gap );
	margin-block-end: var( --at-nav-gap, 5px );
	padding: var( --at-tab-py, 8px ) var( --at-tab-px, 0px );
	border: var( --at-tab-bw, 3px ) solid var( --at-tab-border, var( --alef-tabs-border, #e5e5e5 ) );
	border-radius: var( --at-tab-radius, 10px );
	color: var( --at-tab-color, var( --alef-tabs-color, #3a3a3a ) );
	background: var( --at-tab-bg, transparent );
	font-size: var( --at-tab-size, 20px );
	line-height: var( --at-tab-line );
	transition: .2s ease-in-out;
	-webkit-tap-highlight-color: transparent;
}

.alef-tabs__title { display: block; }

/* ── active state ───────────────────────────────────────────────────────────
Ten tabs are supported; more has not come up in practice, and a rule generated per instance is needless extra
bytes. */
.alef-tabs > .alef-tabs__radio:nth-of-type(1):checked ~ .alef-tabs__nav > .alef-tabs__tab:nth-of-type(1),
.alef-tabs > .alef-tabs__radio:nth-of-type(2):checked ~ .alef-tabs__nav > .alef-tabs__tab:nth-of-type(2),
.alef-tabs > .alef-tabs__radio:nth-of-type(3):checked ~ .alef-tabs__nav > .alef-tabs__tab:nth-of-type(3),
.alef-tabs > .alef-tabs__radio:nth-of-type(4):checked ~ .alef-tabs__nav > .alef-tabs__tab:nth-of-type(4),
.alef-tabs > .alef-tabs__radio:nth-of-type(5):checked ~ .alef-tabs__nav > .alef-tabs__tab:nth-of-type(5),
.alef-tabs > .alef-tabs__radio:nth-of-type(6):checked ~ .alef-tabs__nav > .alef-tabs__tab:nth-of-type(6),
.alef-tabs > .alef-tabs__radio:nth-of-type(7):checked ~ .alef-tabs__nav > .alef-tabs__tab:nth-of-type(7),
.alef-tabs > .alef-tabs__radio:nth-of-type(8):checked ~ .alef-tabs__nav > .alef-tabs__tab:nth-of-type(8),
.alef-tabs > .alef-tabs__radio:nth-of-type(9):checked ~ .alef-tabs__nav > .alef-tabs__tab:nth-of-type(9),
.alef-tabs > .alef-tabs__radio:nth-of-type(10):checked ~ .alef-tabs__nav > .alef-tabs__tab:nth-of-type(10) {
	color: var( --at-tab-color-a, var( --alef-tabs-color-active, #111111 ) );
	background: var( --at-tab-bg-a, #ffffff );
	border-color: var( --at-tab-border-a, var( --alef-tabs-border-active, #111111 ) );
}

/* hover shows only on an inactive tab — not because of order but specificity: the active rule above has four
classes and two pseudo-classes and beats this one. */
.alef-tabs__tab:hover {
	color: var( --at-tab-color-h, var( --at-tab-color, var( --alef-tabs-color, #3a3a3a ) ) );
	background: var( --at-tab-bg-h, var( --at-tab-bg, transparent ) );
	border-color: var( --at-tab-border-h, var( --at-tab-border, #e5e5e5 ) );
}

/* A keyboard user must see where they are; the radio itself is clipped, so the ring sits on the title. */
.alef-tabs > .alef-tabs__radio:nth-of-type(1):focus-visible ~ .alef-tabs__nav > .alef-tabs__tab:nth-of-type(1),
.alef-tabs > .alef-tabs__radio:nth-of-type(2):focus-visible ~ .alef-tabs__nav > .alef-tabs__tab:nth-of-type(2),
.alef-tabs > .alef-tabs__radio:nth-of-type(3):focus-visible ~ .alef-tabs__nav > .alef-tabs__tab:nth-of-type(3),
.alef-tabs > .alef-tabs__radio:nth-of-type(4):focus-visible ~ .alef-tabs__nav > .alef-tabs__tab:nth-of-type(4),
.alef-tabs > .alef-tabs__radio:nth-of-type(5):focus-visible ~ .alef-tabs__nav > .alef-tabs__tab:nth-of-type(5),
.alef-tabs > .alef-tabs__radio:nth-of-type(6):focus-visible ~ .alef-tabs__nav > .alef-tabs__tab:nth-of-type(6),
.alef-tabs > .alef-tabs__radio:nth-of-type(7):focus-visible ~ .alef-tabs__nav > .alef-tabs__tab:nth-of-type(7),
.alef-tabs > .alef-tabs__radio:nth-of-type(8):focus-visible ~ .alef-tabs__nav > .alef-tabs__tab:nth-of-type(8),
.alef-tabs > .alef-tabs__radio:nth-of-type(9):focus-visible ~ .alef-tabs__nav > .alef-tabs__tab:nth-of-type(9),
.alef-tabs > .alef-tabs__radio:nth-of-type(10):focus-visible ~ .alef-tabs__nav > .alef-tabs__tab:nth-of-type(10) {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* ── panels ───────────────────────────────────────────────────────────── */
.alef-tabs__panes {
	margin-inline: calc( -1 * var( --at-bleed, 0px ) );
}

.alef-tabs__pane {
	display: none;
	box-sizing: border-box;
	padding: var( --at-pane-p, 0px );
	border: var( --at-pane-bw, 0px ) solid var( --at-pane-border, transparent );
	border-radius: var( --at-pane-radius, 0px );
	background: var( --at-pane-bg, transparent );
}

.alef-tabs > .alef-tabs__radio:nth-of-type(1):checked ~ .alef-tabs__panes > .alef-tabs__pane:nth-of-type(1),
.alef-tabs > .alef-tabs__radio:nth-of-type(2):checked ~ .alef-tabs__panes > .alef-tabs__pane:nth-of-type(2),
.alef-tabs > .alef-tabs__radio:nth-of-type(3):checked ~ .alef-tabs__panes > .alef-tabs__pane:nth-of-type(3),
.alef-tabs > .alef-tabs__radio:nth-of-type(4):checked ~ .alef-tabs__panes > .alef-tabs__pane:nth-of-type(4),
.alef-tabs > .alef-tabs__radio:nth-of-type(5):checked ~ .alef-tabs__panes > .alef-tabs__pane:nth-of-type(5),
.alef-tabs > .alef-tabs__radio:nth-of-type(6):checked ~ .alef-tabs__panes > .alef-tabs__pane:nth-of-type(6),
.alef-tabs > .alef-tabs__radio:nth-of-type(7):checked ~ .alef-tabs__panes > .alef-tabs__pane:nth-of-type(7),
.alef-tabs > .alef-tabs__radio:nth-of-type(8):checked ~ .alef-tabs__panes > .alef-tabs__pane:nth-of-type(8),
.alef-tabs > .alef-tabs__radio:nth-of-type(9):checked ~ .alef-tabs__panes > .alef-tabs__pane:nth-of-type(9),
.alef-tabs > .alef-tabs__radio:nth-of-type(10):checked ~ .alef-tabs__panes > .alef-tabs__pane:nth-of-type(10) {
	display: block;
}

/* ── mobile ───────────────────────────────────────────────────────────── */
@media ( max-width: 767px ) {
	.alef-tabs__nav {
		margin-inline-start: var( --at-nav-inset-m, var( --at-nav-inset, calc( -1 * var( --at-tab-gap ) ) ) );
	}
	.alef-tabs__tab {
		flex-basis: calc( 100% / var( --at-cols-m, var( --at-cols, 3 ) ) - var( --at-tab-gap ) );
		font-size: var( --at-tab-size-m, var( --at-tab-size, 20px ) );
	}
	.alef-tabs__pane {
		padding: var( --at-pane-p, 0px ) var( --at-pane-px-m, var( --at-pane-p, 0px ) );
	}
}

/* --- toc --- */
/*
 * alef/toc
 * Every visual value comes from a token (Alef_Blocks\Styles). The fallback inside var() is deliberately neutral,
 * not the brand colour — the site's real colour comes from the database settings, so nothing site-specific stays
 * in the plugin's code.
 *
 * ⚠ Each var()'s fallback must equal that token's default in Styles::registry() exactly. Reason: an untouched token
 * is not printed at all (the "zero bytes" optimisation), so this fallback is effectively the site's default.
 */

.alef-toc {
	background: var(--alef-toc-bg, #f7f7f8);
	border: var(--alef-toc-border-width, 1px) solid var(--alef-toc-border-color, #e3e6e8);
	border-radius: var(--alef-toc-radius, 8px);
	padding: var(--alef-toc-padding, 20px);
	margin: 0 0 28px;
}

.alef-toc__title {
	font-weight: var(--alef-toc-title-weight, 700);
	font-size: var(--alef-toc-title-size, 1em);
	color: var(--alef-toc-title-color, inherit);
	margin: 0 0 12px;
}

/*
 * Collapsible mode: it used to have no visual cue at all — users did not realise the title was clickable. Now a
 * small arrow sits at the end of the line and turns on open/close. summary becomes flex so the arrow always stays at
 * the end of the line.
 */
.alef-toc--collapsible > .alef-toc__title {
	cursor: pointer;
	list-style: none;
	margin-bottom: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

.alef-toc--collapsible > .alef-toc__title::after {
	content: "";
	margin-inline-start: auto;
	width: 8px;
	height: 8px;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	opacity: 0.55;
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform 0.2s ease-in-out;
}

.alef-toc--collapsible[open] > .alef-toc__title::after {
	transform: rotate(225deg);
}

.alef-toc--collapsible[open] > .alef-toc__body {
	margin-block-start: 12px;
}

.alef-toc--collapsible > .alef-toc__title::-webkit-details-marker {
	display: none;
}

.alef-toc__list {
	margin: 0;
	padding-inline-start: var(--alef-toc-indent, 20px);
	list-style: var(--alef-toc-marker, disc);
}

.alef-toc__item {
	margin: var(--alef-toc-item-gap, 8px) 0;
	line-height: 1.7;
}

/*
 * A nested level (h3/h4 inside its h2 item). The vertical guide line is deliberately very faint: 1 pixel at low
 * opacity — its job is to "hint" at belonging, not to draw the eye. It uses border-inline-start so it lands on the
 * right side in RTL by itself.
 */
.alef-toc__list--nested {
	margin-block: var(--alef-toc-item-gap, 8px) 0;
	padding-inline-start: var(--alef-toc-indent, 20px);
	border-inline-start: var(--alef-toc-guide-width, 1px) solid var(--alef-toc-guide-color, rgba(0, 0, 0, 0.12));
}

/* h3 a little smaller and fainter so the hierarchy reads without numbering. */
.alef-toc__item--h3 {
	font-size: 0.95em;
}

.alef-toc__item--h4 {
	font-size: 0.9em;
}

.alef-toc__item a {
	color: var(--alef-toc-link-color, var(--alef-accent, #7c3aed));
	text-decoration: none;
}

/*
 * This rule's position after the one above is deliberate: it weighs the same (one class + one tag), so it wins only
 * by order. Swapping them makes h3 the same colour as h2 again.
 */
.alef-toc__item--h3 > a,
.alef-toc__item--h4 > a {
	color: var(--alef-toc-link-color, var(--alef-muted, #5c6971));
}

.alef-toc__item a:hover,
.alef-toc__item a:focus-visible {
	text-decoration: underline;
}

/* editor: a preview without links. */
.alef-toc--editor .alef-toc__item {
	color: inherit;
}

.alef-toc-editor__empty {
	margin: 0;
	opacity: 0.7;
	font-size: 0.9em;
}