/* OSTADEEZ — site shell.
   Every rule is scoped under the prefixed root class or a prefixed class of its own.
   No bare-element descendant selectors: `.card span` scores higher than `.card-badge` and
   silently defeats the child's own class. Every styled child gets its own class. */

/* ---------------------------------------------------------------- fonts */

@font-face {
	font-family: 'Vazirmatn';
	src: url('../fonts/Vazirmatn-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Vazirmatn';
	src: url('../fonts/Vazirmatn-500.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Vazirmatn';
	src: url('../fonts/Vazirmatn-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Vazirmatn';
	src: url('../fonts/Vazirmatn-900.woff2') format('woff2');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

/* ---------------------------------------------------------------- tokens
   Colour values are injected as custom properties from PHP (per-project palette is DATA).
   The fallbacks here only matter if that injection is ever missing. */

/* Scale taken from the approved wireframes, not invented: 15px base, 1.8 line-height,
   1160px wrap with 22px gutters, 64px header, 16/14/10px radii. */
.ostz {
	--ostz-space-1: 4px;
	--ostz-space-2: 8px;
	--ostz-space-3: 12px;
	--ostz-space-4: 16px;
	--ostz-space-6: 22px;
	--ostz-space-8: 30px;
	--ostz-space-12: 44px;
	--ostz-space-16: 62px;

	--ostz-radius-sm: 10px;
	--ostz-radius: 14px;
	--ostz-radius-lg: 16px;

	--ostz-shell: 1160px;
	--ostz-header-h: 64px;

	--ostz-font: 'Vazirmatn', Tahoma, 'Segoe UI', Arial, sans-serif;
}

/* One global normalize: the `hidden` attribute scores 0-1-0 and loses to any class that
   sets display, so an element the JS hides stays fully visible with no error anywhere. */
[hidden] {
	display: none !important;
}

/* ---------------------------------------------------------------- base */

.ostz {
	margin: 0;
	background: var(--ostz-bg, #0b0c10);
	color: var(--ostz-text, #f2f4f8);
	font-family: var(--ostz-font);
	font-size: 15px;
	line-height: 1.8;
	font-feature-settings: 'tnum';
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

.ostz h1,
.ostz h2,
.ostz h3 {
	margin: 0;
	font-weight: 800;
	line-height: 1.35;
}

/* Latin runs inside Persian sentences need isolation or they render scrambled. */
.ostz-eng {
	direction: ltr;
	unicode-bidi: isolate;
}

.ostz-rtl {
	direction: rtl;
}

.ostz img,
.ostz video {
	max-width: 100%;
	height: auto;
}

.ostz a {
	color: inherit;
}

.ostz :focus-visible {
	outline: 2px solid var(--ostz-accent, #2ec88c);
	outline-offset: 2px;
}

/* Latin runs inside Persian sentences scramble without isolation. */
.ostz-bidi {
	unicode-bidi: isolate;
}

/*
 * ⚠ MEASURED DEFECT, do not reintroduce the old idiom: this link used to hide itself with
 * `inset-inline-start: -9999px`. That is correct in a left-to-right document, where the overflow
 * falls off the left edge and browsers do not count it — but this document is RTL, where the
 * inline start is the RIGHT edge, so the link was pushed 9999px past it and every page on the site
 * became ~11,000px wide with a real horizontal scrollbar. Nothing errored, and no HTTP-level check
 * could ever see it; it only shows up when the page is laid out in a browser.
 *
 * The clip technique has no direction to get wrong, and it keeps the link in the accessibility
 * tree (unlike display:none), which is the entire point of a skip link.
 */
.ostz-skip:not(:focus):not(:active) {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.ostz-skip {
	position: absolute;
	inset-inline-start: var(--ostz-space-4);
	top: var(--ostz-space-4);
	z-index: 999;
	padding: var(--ostz-space-3) var(--ostz-space-4);
	background: var(--ostz-accent, #2ec88c);
	color: var(--ostz-accent-ink, #04170f);
	font-weight: 700;
	text-decoration: none;
}

/*
 * ⚠ MEASURED DEFECT, sitewide. WordPress and WooCommerce emit `.screen-reader-text` on labels
 * that must exist for assistive technology but must never be seen. Core does NOT ship a
 * front-end rule for it — WooCommerce's stylesheet used to, and this project deliberately
 * dequeues every WooCommerce stylesheet. The result: the quantity label printed the whole
 * product name above the stepper, and a paragraph of variation boilerplate printed under every
 * variable product card in every archive. Owning the class is the price of owning the CSS.
 *
 * Clip, not display:none — the text has to stay in the accessibility tree, which is its entire
 * reason for existing. Not parked off-screen either: an inline-start offset is the RTL
 * scrollbar trap documented above.
 */
.screen-reader-text:not(:focus):not(:active) {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	word-wrap: normal;
}

/* ---------------------------------------------------------------- header */

/* ---------------------------------------------------------------- announcement bar */

.ostz-anb {
	background: var(--ostz-bg-raised-2, #1b1e27);
	border-block-end: 1px solid var(--ostz-line-strong, #333846);
	font-size: 13px;
}

.ostz-anb-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--ostz-space-3);
	max-width: var(--ostz-shell);
	margin-inline: auto;
	padding: 7px var(--ostz-space-6);
}

.ostz-anb-msg {
	color: var(--ostz-text-dim, #aab0be);
	text-align: center;
}

.ostz-anb-msg strong {
	color: var(--ostz-accent, #00e0d5);
	font-weight: 700;
}

.ostz-anb-close {
	margin-inline-start: auto;
	padding: 2px 6px;
	border: 0;
	background: none;
	color: var(--ostz-text-faint, #6f7686);
	font-family: inherit;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.ostz-anb-close:hover {
	color: var(--ostz-text, #f2f4f8);
}

/* ---------------------------------------------------------------- header */

.ostz-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: color-mix(in srgb, var(--ostz-bg, #0b0c10) 85%, transparent);
	backdrop-filter: blur(10px);
	border-block-end: 1px solid var(--ostz-line, #262a35);
}

.ostz-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ostz-space-6);
	max-width: var(--ostz-shell);
	min-height: var(--ostz-header-h);
	margin-inline: auto;
	padding-inline: var(--ostz-space-6);
}

.ostz-brand {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.ostz-brand-link {
	text-decoration: none;
}

/* The wordmark carries the brand gradient — the one place the accent pair is loud. */
.ostz-brand-word {
	font-weight: 900;
	font-size: 20px;
	letter-spacing: .5px;
	direction: ltr;
	unicode-bidi: isolate;
	background: var(--ostz-gradient-flat, linear-gradient(90deg, #00e0d5, #c026ff));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.ostz-brand-descriptor,
.ostz-footer-descriptor {
	color: var(--ostz-text-faint, #6f7686);
	font-size: 11.5px;
	font-weight: 500;
}

/* ---------------------------------------------------------------- nav
   The links are always present and always visible. On narrow screens the row scrolls
   horizontally inside itself — the page never scrolls sideways and no link is hidden. */

.ostz-nav {
	flex: 1 1 auto;
	min-width: 0;
}

.ostz-nav-list {
	display: flex;
	align-items: center;
	gap: var(--ostz-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
	overscroll-behavior-inline: contain;
}

.ostz-nav-list::-webkit-scrollbar {
	display: none;
}

.ostz-nav-item {
	flex: 0 0 auto;
}

.ostz-nav-link {
	display: block;
	padding: var(--ostz-space-2) 13px;
	min-height: 44px;
	line-height: 28px;
	border-radius: var(--ostz-radius-sm);
	color: var(--ostz-text-dim, #aab0be);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: color .15s, background-color .15s;
}

.ostz-nav-link:hover {
	color: var(--ostz-text, #f2f4f8);
	background: var(--ostz-bg-raised, #15171e);
}

.ostz-nav-link[aria-current='page'] {
	color: var(--ostz-text, #f2f4f8);
	box-shadow: inset 0 -2px 0 var(--ostz-accent, #00e0d5);
}

/* ---------------------------------------------------------------- header actions */

.ostz-header-actions {
	display: flex;
	align-items: center;
	gap: var(--ostz-space-2);
	flex: 0 0 auto;
}

.ostz-cart-link,
.ostz-account-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--ostz-space-2);
	min-height: 44px;
	padding-inline: var(--ostz-space-3);
	border: 1px solid var(--ostz-line, #262a35);
	border-radius: var(--ostz-radius-sm);
	background: var(--ostz-bg-raised, #15171e);
	color: var(--ostz-text, #f2f4f8);
	font-size: 13.5px;
	font-weight: 500;
	text-decoration: none;
}

.ostz-cart-count {
	display: grid;
	place-items: center;
	min-width: 18px;
	height: 18px;
	padding-inline: 4px;
	border-radius: 9px;
	background: var(--ostz-gradient, linear-gradient(135deg, #00e0d5, #c026ff));
	color: var(--ostz-accent-ink, #08090c);
	font-size: 11px;
	font-weight: 800;
	unicode-bidi: isolate;
}

/* ---------------------------------------------------------------- main */

.ostz-main {
	display: block;
	max-width: var(--ostz-shell);
	margin-inline: auto;
	padding: var(--ostz-space-8) var(--ostz-space-4) var(--ostz-space-16);
	min-height: 60vh;
}

.ostz-page-title {
	margin: 0 0 var(--ostz-space-6);
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	font-weight: 900;
	line-height: 1.25;
}

.ostz-lede {
	max-width: 62ch;
	color: var(--ostz-text-dim, #9a9aa6);
}

.ostz-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Offsets an in-page anchor so the sticky header does not cover the target. */
.ostz-anchor {
	display: block;
	scroll-margin-top: calc(var(--ostz-header-h) + var(--ostz-space-4));
}

.ostz-noscroll {
	overflow: hidden;
}

/* ---------------------------------------------------------------- hero */

/* Values ported from the approved landing wireframe, not re-invented. */
.ostz-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 88vh;
	margin-block-end: var(--ostz-space-12);
	border-radius: var(--ostz-radius-lg);
	overflow: hidden;
	background: var(--ostz-bg, #0b0c10);
}

/* Phones: a full-viewport hero would put the first product a whole screen away. */
@media (max-width: 720px) {
	.ostz-hero {
		min-height: 72vh;
	}
}

.ostz-hero-bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 90% at 80% 10%, color-mix(in srgb, var(--ostz-accent-2, #c026ff) 20%, transparent), transparent 55%),
		radial-gradient(120% 90% at 15% 20%, color-mix(in srgb, var(--ostz-accent, #00e0d5) 16%, transparent), transparent 55%),
		linear-gradient(180deg, var(--ostz-bg-raised, #0d0f15) 0%, var(--ostz-bg, #0b0c10) 60%, var(--ostz-bg, #0b0c10) 100%);
}

.ostz-hero-grid {
	position: absolute;
	inset: 0;
	opacity: .5;
	background-image:
		linear-gradient(var(--ostz-line, #262a35) 1px, transparent 1px),
		linear-gradient(90deg, var(--ostz-line, #262a35) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(80% 70% at 60% 30%, #000, transparent 80%);
	mask-image: radial-gradient(80% 70% at 60% 30%, #000, transparent 80%);
}

.ostz-hero-scan {
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 4px);
	pointer-events: none;
}

/* The footage is a background layer behind the same content, never the hero itself. */
.ostz-hero-media {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* With footage present the gradient becomes a legibility scrim instead of the backdrop. */
.ostz-hero-has-media .ostz-hero-bg {
	z-index: 1;
	background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--ostz-bg, #0b0c10) 82%, transparent) 100%);
}

.ostz-hero-has-media .ostz-hero-grid {
	display: none;
}

/* The hero already sits inside the shell, so this only needs its own breathing room. */
.ostz-hero-in {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: 56px var(--ostz-space-8) 60px;
}

.ostz-kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-block-end: 20px;
	padding: 5px 12px;
	border: 1px solid var(--ostz-line-strong, #333846);
	border-radius: 20px;
	background: color-mix(in srgb, var(--ostz-accent, #00e0d5) 6%, transparent);
	color: var(--ostz-accent, #00e0d5);
	font-size: 12.5px;
	letter-spacing: 2px;
	unicode-bidi: isolate;
}

.ostz-kicker-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 10px currentColor;
}

.ostz-hero-title {
	max-width: 18ch;
	margin: 0;
	font-size: clamp(34px, 6vw, 68px);
	font-weight: 900;
	line-height: 1.18;
	letter-spacing: -1px;
}

.ostz-hero-em {
	background: var(--ostz-gradient-flat, linear-gradient(90deg, #00e0d5, #c026ff));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.ostz-hero-lead {
	max-width: 52ch;
	margin-block-start: 16px;
	color: var(--ostz-text-dim, #aab0be);
	font-size: clamp(15px, 2vw, 18px);
}

.ostz-hero-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-block-start: 28px;
}

.ostz-hero-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	margin: 34px 0 0;
	padding: 22px 0 0;
	border-block-start: 1px solid var(--ostz-line, #262a35);
	list-style: none;
}

.ostz-hero-fact-n {
	display: block;
	font-size: 22px;
	font-weight: 900;
	unicode-bidi: isolate;
}

.ostz-hero-fact-l {
	font-size: 12.5px;
	color: var(--ostz-text-faint, #6f7686);
}

.ostz-hero-sound {
	position: absolute;
	inset-block-end: var(--ostz-space-4);
	inset-inline-end: var(--ostz-space-4);
	min-height: 44px;
	padding-inline: var(--ostz-space-4);
	border: 1px solid var(--ostz-line-strong, #3a3a46);
	border-radius: 999px;
	background: rgba(0, 0, 0, .55);
	color: var(--ostz-text, #eceef2);
	font-family: inherit;
	font-size: .85rem;
	cursor: pointer;
}

.ostz-home-title {
	max-width: 22ch;
}

/* ---------------------------------------------------------------- sections */

.ostz-section {
	margin-block-start: var(--ostz-space-16);
}

.ostz-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ostz-space-4);
}

.ostz-section-title {
	margin: 0 0 var(--ostz-space-6);
	font-size: 1.25rem;
	font-weight: 700;
}

.ostz-section-more {
	color: var(--ostz-accent, #2ec88c);
	font-size: .88rem;
	font-weight: 500;
	text-decoration: none;
}

.ostz-chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ostz-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ostz-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--ostz-space-2);
	min-height: 44px;
	padding-inline: var(--ostz-space-4);
	border: 1px solid var(--ostz-line, #26262e);
	border-radius: 999px;
	background: var(--ostz-bg-raised, #141419);
	text-decoration: none;
}

.ostz-chip:hover {
	border-color: var(--ostz-accent, #2ec88c);
}

.ostz-chip-name {
	font-size: .9rem;
	font-weight: 500;
}

.ostz-chip-count {
	color: var(--ostz-text-faint, #6a6a76);
	font-size: .78rem;
	unicode-bidi: isolate;
}

/* ---------------------------------------------------------------- capture strip */

.ostz-capture {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ostz-space-6);
	margin-block-start: var(--ostz-space-16);
	padding: var(--ostz-space-8) var(--ostz-space-6);
	border: 1px solid var(--ostz-line-strong, #333846);
	border-radius: var(--ostz-radius-lg);
	background:
		radial-gradient(80% 140% at 90% 0, color-mix(in srgb, var(--ostz-accent-2, #c026ff) 10%, transparent), transparent 60%),
		var(--ostz-bg-raised, #15171e);
}

.ostz-capture-body {
	flex: 1 1 280px;
	min-width: 0;
}

.ostz-capture-title {
	margin: 0 0 var(--ostz-space-2);
	font-size: clamp(1.05rem, 2.4vw, 1.35rem);
	font-weight: 800;
	line-height: 1.5;
}

.ostz-capture-note {
	margin: 0;
	color: var(--ostz-text-faint, #6f7686);
	font-size: 12.5px;
}

.ostz-capture-form {
	flex: 0 1 380px;
	min-width: 260px;
}

/* ---------------------------------------------------------------- modal */

.ostz-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--ostz-space-4);
}

.ostz-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .7);
}

.ostz-modal-box {
	position: relative;
	width: min(560px, 100%);
	max-height: 85vh;
	overflow-y: auto;
	border: 1px solid var(--ostz-line-strong, #3a3a46);
	border-radius: var(--ostz-radius-lg);
	background: var(--ostz-bg-raised, #141419);
}

.ostz-modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ostz-space-4);
	padding: var(--ostz-space-4) var(--ostz-space-6);
	border-block-end: 1px solid var(--ostz-line, #26262e);
}

.ostz-modal-title {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
}

.ostz-modal-close {
	min-width: 44px;
	min-height: 44px;
	border: 0;
	background: transparent;
	color: var(--ostz-text-dim, #9a9aa6);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.ostz-modal-body {
	padding: var(--ostz-space-6);
}

.ostz-modal-note,
.ostz-modal-empty {
	margin: 0 0 var(--ostz-space-4);
	color: var(--ostz-text-dim, #9a9aa6);
	font-size: .9rem;
}

.ostz-modal-empty {
	margin: 0;
}

/* Wide content scrolls inside its own container — the page never scrolls sideways. */
.ostz-table-scroll {
	max-width: 100%;
	overflow-x: auto;
}

.ostz-size-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .88rem;
}

.ostz-size-table th,
.ostz-size-table td {
	padding: var(--ostz-space-2) var(--ostz-space-3);
	border-block-end: 1px solid var(--ostz-line, #26262e);
	text-align: start;
}

/* ---------------------------------------------------------------- footer */

.ostz-footer {
	border-block-start: 1px solid var(--ostz-line, #26262e);
	background: var(--ostz-bg-sunken, #07070a);
}

.ostz-footer-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ostz-space-6);
	max-width: var(--ostz-shell);
	margin-inline: auto;
	padding: var(--ostz-space-12) var(--ostz-space-4);
}

.ostz-footer-brand {
	display: flex;
	flex-direction: column;
}

.ostz-footer-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ostz-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ostz-footer-social {
	display: flex;
	gap: var(--ostz-space-3);
	margin-inline-start: auto;
}

.ostz-social-link {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	color: var(--ostz-text-dim, #9a9aa6);
	font-size: .85rem;
	text-decoration: none;
	unicode-bidi: isolate;
}

.ostz-social-link:hover {
	color: var(--ostz-text, #eceef2);
}

.ostz-footer-legal {
	flex: 1 0 100%;
	margin: 0;
	color: var(--ostz-text-faint, #6a6a76);
	font-size: .8rem;
}

/* ---------------------------------------------------------------- contact page
   Two tracks side by side, as the wireframe has them. Stacked, the pair reads as one long form
   with a heading dropped into the middle of it, and the business enquiry — the one that matters
   commercially — ends up below the fold on every visit. */

.ostz-contact-cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ostz-space-6);
	align-items: start;
}

@media (max-width: 900px) {
	.ostz-contact-cols {
		grid-template-columns: 1fr;
	}
}

.ostz-contact-card {
	padding: var(--ostz-space-6);
	border: 1px solid var(--ostz-line, #262a35);
	border-radius: var(--ostz-radius-lg);
	background: var(--ostz-bg-raised, #15171e);
}

.ostz-contact-card > h2 {
	margin: 0 0 var(--ostz-space-2);
	font-size: 18px;
	font-weight: 900;
}

.ostz-contact-card > p {
	margin: 0 0 var(--ostz-space-5);
	color: var(--ostz-text-dim, #aab0be);
	font-size: 13.5px;
}

/* The plugin centres and caps its form at 640px, which leaves it floating inside the card. */
.ostz-contact-card .dmf-form {
	max-width: none;
	margin: 0;
}

.ostz-contact-channels {
	margin-block-start: var(--ostz-space-6);
}

.ostz-channels {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--ostz-space-3);
	margin: 0 0 var(--ostz-space-4);
	padding: 0;
	list-style: none;
}

.ostz-channel {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 14px;
	border: 1px solid var(--ostz-line, #262a35);
	border-radius: var(--ostz-radius-sm);
	background: var(--ostz-bg-raised-2, #1b1e27);
}

.ostz-channel-k {
	color: var(--ostz-text-faint, #6f7686);
	font-size: 12px;
}

/*
 * ⚠ `direction: ltr` is not optional here, and isolation alone does NOT fix it. Inside an
 * isolated run the base direction is still inherited RTL, so a leading neutral character is
 * placed by that base: «@ostadeez» rendered as «ostadeez@» on the live page. Email addresses
 * looked fine and hid the problem, because they start with a letter.
 *
 * `text-align: end` under `direction: ltr` resolves to the right edge, so the handle keeps the
 * card's visual alignment while its characters run in the correct order.
 */
.ostz-channel-v {
	direction: ltr;
	unicode-bidi: isolate;
	text-align: end;
	color: var(--ostz-accent, #00e0d5);
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
	overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- narrow screens */

@media (max-width: 900px) {
	.ostz-header-inner {
		flex-wrap: wrap;
		gap: var(--ostz-space-3);
		padding-block: var(--ostz-space-3);
	}

	.ostz-nav {
		order: 3;
		flex-basis: 100%;
		margin-inline: calc(var(--ostz-space-4) * -1);
		padding-inline: var(--ostz-space-4);
	}

	.ostz-header-actions {
		margin-inline-start: auto;
	}

	.ostz-footer-social {
		margin-inline-start: 0;
	}
}