/*
Theme Name: Zaira Tea Maker
Description: Premium Urdu RTL landing page theme for Zaira Tea Maker. No header/footer; every section is an editable Gutenberg block.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 0.3.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zaira-tea-maker
*/

:root {
	--z-ink: #14161a;
	--z-copper: #b87333;
	--z-gold: #e0b27a;
	--z-line: rgba(28,30,33,.09);
	--z-shadow: 0 18px 40px -22px rgba(20,22,26,.35);
	--z-shadow-lg: 0 40px 80px -30px rgba(20,22,26,.5);
}
.wp-site-blocks > * + * { margin-block-start: 0; }
.wp-site-blocks main { padding-block: 0; }
.wp-site-blocks, .editor-styles-wrapper { direction: rtl; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
img, video { max-width: 100%; height: auto; }

/* ---------- Section rhythm ---------- */
.zaira-section { padding-block: 72px; position: relative; }
@media (min-width: 900px) { .zaira-section { padding-block: 104px; } }
.zaira-steel { background: linear-gradient(180deg, #eceef0, #dde0e3); }
.zaira-white { background: #fff; }

.zaira-head { max-width: 680px; margin-inline: auto; text-align: center; margin-bottom: 44px; }
.zaira-head > * { margin-block: 0; }
.zaira-lead { color: var(--wp--preset--color--ink-soft); font-size: var(--wp--preset--font-size--z-large); line-height: 2.4; }
.zaira-kicker {
	display: inline-flex; align-items: center; gap: 12px; margin: 0 0 6px; font-size: 15px; font-weight: 600;
	color: var(--wp--preset--color--copper-dark); letter-spacing: 0;
}
.zaira-kicker::before, .zaira-kicker::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .5; }
.zaira-head .zaira-kicker { display: flex; justify-content: center; }
.zaira-eyebrow {
	display: inline-block; direction: ltr; letter-spacing: .4em; font-size: 12px; font-weight: 700;
	font-family: "Segoe UI", Arial, sans-serif; line-height: 1.6; margin: 0 0 10px;
	color: var(--z-gold); border: 1px solid rgba(224,178,122,.45); background: rgba(224,178,122,.08);
	padding: 7px 18px 7px 22px; border-radius: 999px;
}

/* ---------- Hero ---------- */
.zaira-hero {
	position: relative; overflow: hidden; color: #fff; padding-block: 48px 112px;
	background:
		radial-gradient(700px 420px at 88% 0%, rgba(184,115,51,.38), transparent 70%),
		radial-gradient(600px 400px at 0% 100%, rgba(224,178,122,.14), transparent 70%),
		repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 2px, transparent 2px 6px),
		linear-gradient(160deg, #101215, #1c1f24 60%, #15171b);
}
@media (min-width: 900px) { .zaira-hero { padding-block: 88px 150px; } }
.zaira-hero h1 { color: #fff; margin: 0 0 6px; }
.zaira-hero .zaira-lead { color: #cdd1d6; }
.zaira-hero .wp-block-columns { align-items: center; gap: 36px; margin: 0; }
.zaira-hero .wp-block-buttons { margin-top: 28px; gap: 14px; }
.zaira-microtrust { margin: 18px 0 0; font-size: 15px; color: var(--z-gold); }
.zaira-microtrust::before { content: "✓"; margin-inline-end: 10px; font-family: "Segoe UI", sans-serif; }
@media (max-width: 781px) {
	.zaira-hero .zaira-hero-text { text-align: center; }
	.zaira-hero .wp-block-buttons { justify-content: center; }
}
.zaira-frame {
	position: relative; padding: 16px; border-radius: 36px;
	background: linear-gradient(145deg, #f5f6f7, #cfd3d7);
	box-shadow: 0 0 0 1px rgba(224,178,122,.5), 0 0 0 10px rgba(224,178,122,.08), var(--z-shadow-lg), 0 0 120px -10px rgba(184,115,51,.45);
}
.zaira-frame .wp-block-image { margin: 0; }
.zaira-frame img { width: 100%; border-radius: 24px; display: block; }
.zaira-frame-light { background: linear-gradient(145deg, #fff, #e3e6e9); box-shadow: 0 0 0 1px var(--z-line), var(--z-shadow-lg); }

/* ---------- Trust strip (overlaps hero) ---------- */
.zaira-trust { margin-top: -64px; position: relative; z-index: 3; padding-bottom: 0; }
.zaira-trust-grid {
	display: grid; grid-template-columns: 1fr 1fr; background: #fff; border-radius: 26px;
	border: 1px solid var(--z-line); box-shadow: var(--z-shadow-lg); overflow: hidden;
}
@media (min-width: 900px) { .zaira-trust-grid { grid-template-columns: repeat(4, 1fr); } }
.zaira-trust-item { padding: 22px 18px; text-align: center; border-inline-start: 1px solid var(--z-line); border-block-end: 1px solid var(--z-line); }
.zaira-trust-item > * { margin: 0; }
.zaira-trust-item h3 { font-size: 16px; line-height: 2.1; color: var(--wp--preset--color--ink); }
.zaira-trust-item p { font-size: 14px; line-height: 2.2; color: var(--wp--preset--color--ink-soft); }
.zaira-trust-item::before {
	content: "✓"; display: grid; place-items: center; width: 34px; height: 34px; margin: 0 auto 6px; border-radius: 50%;
	font: 700 16px/1 "Segoe UI", sans-serif; color: #fff; background: linear-gradient(145deg, var(--z-gold), var(--z-copper));
}
@media (min-width: 900px) { .zaira-trust-item { border-block-end: 0; } }

/* ---------- Video ---------- */
.zaira-video-cols { gap: 56px; margin: 0; }
.zaira-video-text .zaira-kicker { margin-bottom: 0; }
@media (max-width: 781px) { .zaira-video-text { text-align: center; } .zaira-video-text .wp-block-buttons { justify-content: center; } .zaira-video-text .zaira-kicker { display: flex; justify-content: center; } }
.zaira-video-frame {
	width: min(100%, 360px); margin-inline: auto; padding: 12px; border-radius: 42px;
	background: linear-gradient(145deg, #2a2d32, #0f1114);
	box-shadow: 0 0 0 1px rgba(224,178,122,.4), var(--z-shadow-lg), 0 0 80px -20px rgba(184,115,51,.5);
}
.zaira-video-frame .wp-block-video { margin: 0; }
.zaira-video-frame video { width: 100%; display: block; border-radius: 32px; background: #000; }

/* ---------- Grids & cards ---------- */
.zaira-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .zaira-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .zaira-grid.zaira-grid-4 { grid-template-columns: repeat(4, 1fr); } .zaira-grid.zaira-grid-3 { grid-template-columns: repeat(3, 1fr); } }
.zaira-grid > * { margin: 0; }

.zaira-card {
	position: relative; background: linear-gradient(180deg, #fff, #f8f8f6); border: 1px solid var(--z-line);
	border-radius: 26px; padding: 26px 26px 22px; box-shadow: var(--z-shadow); transition: transform .25s, box-shadow .25s;
	overflow: hidden;
}
.zaira-card::after { content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--z-copper), var(--z-gold)); }
.zaira-card:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -28px rgba(20,22,26,.45); }
.zaira-card > * { margin-block: 0; }
.zaira-card h3 { margin-block: 2px 4px; }
.zaira-card p { color: var(--wp--preset--color--ink-soft); font-size: 16px; line-height: 2.3; }
.zaira-card .zaira-num {
	font-size: 34px; line-height: 1.6; font-weight: 700; color: transparent;
	background: linear-gradient(145deg, var(--z-copper), var(--z-gold)); -webkit-background-clip: text; background-clip: text;
}

.zaira-shot { background: #fff; border: 1px solid var(--z-line); border-radius: 26px; overflow: hidden; box-shadow: var(--z-shadow); transition: transform .25s; }
.zaira-shot:hover { transform: translateY(-4px); }
.zaira-shot { display: flex; flex-direction: column; }
.zaira-shot > * { margin-block: 0; }
.zaira-shot .wp-block-image {
	margin: 0; padding: 0; background: linear-gradient(145deg, #f7f7f6, #e3e6e9);
	position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; flex: none;
}
.zaira-shot .wp-block-image img {
	position: absolute; inset: 12px; width: calc(100% - 24px) !important; height: calc(100% - 24px) !important;
	max-width: none; object-fit: contain; border-radius: 16px; display: block; background: #eceeef;
}
.zaira-shot p { flex: 1; display: flex; align-items: center; justify-content: center; padding: 12px 16px 16px; text-align: center; font-size: 15px; line-height: 2.3; color: var(--wp--preset--color--ink-soft); }

/* ---------- Three parts ---------- */
.zaira-parts-cols { gap: 56px; margin: 0; }
.zaira-parts-text-col .zaira-kicker { margin-bottom: 0; }
.zaira-parts { display: grid; gap: 14px; margin-top: 22px; }
.zaira-part { display: flex; align-items: flex-start; gap: 16px; background: #fff; border: 1px solid var(--z-line); border-radius: 20px; padding: 12px 18px; box-shadow: var(--z-shadow); }
.zaira-part > * { margin: 0; }
.zaira-bullet {
	flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; margin-top: 10px !important;
	font-size: 20px; line-height: 1; color: #fff; background: linear-gradient(145deg, var(--z-copper), var(--z-gold));
}
.zaira-part-text > * { margin: 0; }
.zaira-part-text p { font-size: 15px; color: var(--wp--preset--color--ink-soft); line-height: 2.2; }

/* ---------- Steps ---------- */
.zaira-step { text-align: center; padding: 28px 24px; background: #fff; border: 1px solid var(--z-line); border-radius: 26px; box-shadow: var(--z-shadow); }
.zaira-step > * { margin-block: 0; }
.zaira-step-num {
	display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 8px !important; border-radius: 50%;
	font-size: 28px; line-height: 1; font-weight: 700; color: #fff;
	background: linear-gradient(145deg, var(--z-copper), var(--z-gold)); box-shadow: 0 10px 24px -8px rgba(184,115,51,.7);
}
.zaira-step p:last-child { color: var(--wp--preset--color--ink-soft); font-size: 16px; line-height: 2.3; }

/* ---------- Order ---------- */
.zaira-order {
	max-width: 780px; margin-inline: auto; padding: 38px 24px 36px; border-radius: 34px; background: #fff;
	border: 1px solid var(--z-line); box-shadow: var(--z-shadow-lg), 0 0 0 8px rgba(184,115,51,.07); position: relative; overflow: hidden;
}
.zaira-order::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 6px; background: linear-gradient(90deg, var(--z-copper), var(--z-gold), var(--z-copper)); }
@media (min-width: 640px) { .zaira-order { padding: 52px 52px 46px; } }
.zaira-order > * { margin-block: 0; }
.zaira-order .zaira-kicker { display: flex; justify-content: center; }
.zaira-order .zaira-lead { margin-bottom: 22px; }
.zaira-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; background: #f7f7f5; border: 1px solid var(--z-line); border-radius: 18px; padding: 6px 20px; margin: 0 0 10px; }
.zaira-row > * { margin: 0; }
.zaira-row .zaira-k { color: var(--wp--preset--color--ink-soft); }
.zaira-row .zaira-v { font-weight: 700; }
.zaira-row.zaira-price { background: var(--wp--preset--color--copper-soft); border-color: rgba(184,115,51,.35); }
.zaira-row.zaira-price .zaira-v { font-size: 24px; color: var(--wp--preset--color--copper-dark); }
.zaira-order .wp-block-buttons { margin-top: 26px; }

/* ---------- FAQ ---------- */
.zaira-faq { max-width: 780px; margin-inline: auto; display: grid; gap: 12px; }
.zaira-faq .wp-block-details { background: #fff; border: 1px solid var(--z-line); border-radius: 20px; padding: 4px 22px; box-shadow: var(--z-shadow); margin: 0; }
.zaira-faq summary { cursor: pointer; font-weight: 600; line-height: 2.3; padding-block: 8px; }
.zaira-faq .wp-block-details[open] { border-color: rgba(184,115,51,.45); }
.zaira-faq .wp-block-details p { margin: 0 0 10px; color: var(--wp--preset--color--ink-soft); font-size: 16px; line-height: 2.4; }

/* ---------- Dark final CTA ---------- */
.zaira-dark {
	color: #fff; text-align: center;
	background:
		radial-gradient(600px 320px at 50% 0%, rgba(184,115,51,.35), transparent 70%),
		repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 2px, transparent 2px 6px),
		linear-gradient(160deg, #101215, #1e2126);
}
.zaira-dark h2 { color: #fff; margin: 0; }
.zaira-dark .zaira-lead { color: #cdd1d6; max-width: 560px; margin: 0 auto; }
.zaira-dark .wp-block-buttons { margin-top: 28px; }
.zaira-brand { margin-top: 44px !important; color: #8f959c; }

/* ---------- Buttons ---------- */
.wp-block-button .wp-block-button__link {
	min-height: 58px; display: inline-flex; align-items: center; justify-content: center;
	background: linear-gradient(145deg, #16a057, #0e7d41); color: #fff;
	box-shadow: 0 14px 28px -12px rgba(18,140,74,.8), inset 0 1px 0 rgba(255,255,255,.25);
	transition: transform .2s, box-shadow .2s;
}
.wp-block-button .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 20px 34px -12px rgba(18,140,74,.9), inset 0 1px 0 rgba(255,255,255,.25); }
.wp-block-button .wp-block-button__link::before { content: ""; width: 22px; height: 22px; margin-inline-end: 10px; flex: none; background: currentColor; -webkit-mask: var(--z-wa) center/contain no-repeat; mask: var(--z-wa) center/contain no-repeat; }
.wp-block-button.zaira-ghost .wp-block-button__link { background: transparent; color: #fff; box-shadow: none; border: 1.5px solid rgba(255,255,255,.4); }
.wp-block-button.zaira-ghost .wp-block-button__link::before { display: none; }
.wp-block-button.zaira-ghost .wp-block-button__link:hover { background: rgba(255,255,255,.08); }
:root { --z-wa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38a9.9 9.9 0 0 0 4.74 1.21c5.46 0 9.91-4.45 9.91-9.91S17.5 2 12.04 2zm5.8 14.08c-.24.68-1.4 1.3-1.93 1.35-.5.05-.97.23-3.27-.68-2.77-1.1-4.52-3.94-4.66-4.12-.13-.18-1.11-1.48-1.11-2.82 0-1.34.7-2 .95-2.27.25-.27.54-.34.72-.34h.52c.17 0 .39-.06.61.47.22.54.75 1.87.82 2 .07.14.11.3.02.48-.09.18-.13.29-.27.45l-.4.47c-.13.13-.27.28-.12.55.16.27.7 1.15 1.5 1.86 1.03.92 1.9 1.2 2.17 1.34.27.13.43.11.59-.07.16-.18.68-.79.86-1.06.18-.27.36-.22.61-.13.25.09 1.58.75 1.85.88.27.14.45.2.52.31.07.11.07.65-.17 1.33z'/%3E%3C/svg%3E"); }

/* ---------- Sticky mobile order bar ---------- */
.zaira-sticky { display: none; }
@media (max-width: 781px) {
	.zaira-sticky {
		display: block; position: fixed; inset-inline: 0; bottom: 0; z-index: 60; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
		background: rgba(16,18,21,.92); backdrop-filter: blur(10px); border-top: 1px solid rgba(255,255,255,.08);
	}
	.zaira-sticky .wp-block-buttons { margin: 0; }
	.zaira-sticky .wp-block-button, .zaira-sticky .wp-block-button__link { width: 100%; }
	body { padding-bottom: 78px; }
}
.editor-styles-wrapper .zaira-sticky { position: static; }

/* =====================================================================
   v4 — split layouts, cut-out product stages, video studio, stats
   ===================================================================== */
.zaira-split { display: grid; gap: 40px; align-items: center; grid-template-columns: 1fr; }
.zaira-split > * { margin: 0 !important; min-width: 0; }
@media (min-width: 900px) {
	.zaira-split { grid-template-columns: 1fr 1fr; gap: 64px; }
	.zaira-split.zaira-split-rev > :first-child { order: 2; }
}
.zaira-split .zaira-kicker { margin-bottom: 0; }
.zaira-split h2 { margin-block: 0 8px; }
@media (max-width: 899px) { .zaira-center-m { text-align: center; } .zaira-center-m .wp-block-buttons { justify-content: center; } .zaira-center-m .zaira-kicker { display: flex; justify-content: center; } }

/* product stage: transparent cut-out floating on a soft glow */
.zaira-stage { position: relative; display: grid; place-items: center; padding: 28px 12px; isolation: isolate; }
.zaira-stage::before {
	content: ""; position: absolute; inset: 6% 4%; z-index: -1; border-radius: 50%;
	background: radial-gradient(closest-side, rgba(184,115,51,.28), rgba(184,115,51,.08) 60%, transparent 100%);
}
.zaira-stage::after {
	content: ""; position: absolute; left: 18%; right: 18%; bottom: 14px; height: 22px; z-index: -1; border-radius: 50%;
	background: radial-gradient(closest-side, rgba(0,0,0,.35), transparent);
}
.zaira-stage .wp-block-image { margin: 0; }
.zaira-stage img { width: auto !important; max-width: 100%; max-height: 460px; height: auto; margin-inline: auto; display: block; filter: drop-shadow(0 28px 30px rgba(0,0,0,.35)); }
.zaira-stage.zaira-stage-tall img { max-height: 520px; }
.zaira-stage-light::before { background: radial-gradient(closest-side, rgba(184,115,51,.20), rgba(184,115,51,.05) 60%, transparent 100%); }
.zaira-stage-light img { filter: drop-shadow(0 24px 26px rgba(20,22,26,.28)); }

/* hero: unframed floating product */
.zaira-hero .zaira-split { gap: 28px; }
@media (min-width: 900px) { .zaira-hero .zaira-split { gap: 48px; } }
.zaira-hero .zaira-stage img { max-height: 500px; }
.zaira-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0 !important; }
@media (max-width: 899px) { .zaira-chips { justify-content: center; } }
.zaira-chip { margin: 0 !important; padding: 2px 16px; border-radius: 999px; font-size: 14px; line-height: 2.2; color: #e9d3b8; background: rgba(255,255,255,.07); border: 1px solid rgba(224,178,122,.35); }

/* video studio */
.zaira-studio {
	color: #fff; overflow: hidden;
	background:
		radial-gradient(700px 420px at 20% 30%, rgba(184,115,51,.30), transparent 70%),
		repeating-linear-gradient(90deg, rgba(255,255,255,.016) 0 2px, transparent 2px 6px),
		linear-gradient(160deg, #0f1114, #1b1e23);
}
.zaira-studio h2, .zaira-studio h3 { color: #fff; }
.zaira-studio .zaira-lead { color: #cdd1d6; }
.zaira-studio .zaira-kicker { color: var(--z-gold); }
.zaira-phone { position: relative; width: min(100%, 340px); margin-inline: auto !important; padding: 12px; border-radius: 46px; background: linear-gradient(145deg, #3a3e44, #0c0d0f);
	box-shadow: 0 0 0 1px rgba(224,178,122,.45), 0 50px 90px -30px rgba(0,0,0,.8), 0 0 120px -10px rgba(184,115,51,.55); }
.zaira-phone::before { content: ""; position: absolute; top: 20px; left: 50%; width: 74px; height: 6px; margin-left: -37px; border-radius: 6px; background: rgba(255,255,255,.18); z-index: 2; pointer-events: none; }
.zaira-phone .wp-block-video { margin: 0; }
.zaira-phone video { width: 100%; display: block; border-radius: 36px; background: #000; aspect-ratio: 9 / 16; object-fit: cover; }
.zaira-checks { display: grid; gap: 12px; margin-top: 22px !important; }
.zaira-check { display: flex; gap: 14px; align-items: flex-start; padding: 6px 16px; border-radius: 18px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); }
.zaira-check > * { margin: 0 !important; }
.zaira-check::before { content: "✓"; flex: none; width: 30px; height: 30px; margin-top: 12px; display: grid; place-items: center; border-radius: 50%; font: 700 15px/1 "Segoe UI", sans-serif; color: #fff; background: linear-gradient(145deg, var(--z-copper), var(--z-gold)); }
.zaira-check p { font-size: 16px; line-height: 2.3; color: #e6e8ea; }
.zaira-studio .zaira-split > .zaira-video-text .wp-block-buttons { margin-top: 24px; }

/* stats band */
.zaira-stats { padding-block: 0; position: relative; z-index: 3; margin-top: -48px; }
.zaira-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: #fff; border-radius: 26px; border: 1px solid var(--z-line); box-shadow: var(--z-shadow-lg); overflow: hidden; }
@media (min-width: 900px) { .zaira-stats-grid { grid-template-columns: repeat(4, 1fr); } }
.zaira-stat { text-align: center; padding: 22px 12px 18px; border-inline-start: 1px solid var(--z-line); border-block-end: 1px solid var(--z-line); }
.zaira-stat > * { margin: 0 !important; }
.zaira-stat .zaira-big { font-size: clamp(26px, 5vw, 36px); line-height: 1.6; font-weight: 700; color: transparent; background: linear-gradient(145deg, var(--z-copper), #d8964f); -webkit-background-clip: text; background-clip: text; }
.zaira-stat p:last-child { font-size: 14px; color: var(--wp--preset--color--ink-soft); line-height: 2.1; }
@media (min-width: 900px) { .zaira-stat { border-block-end: 0; } }

.zaira-ltr { direction: ltr; unicode-bidi: isolate; }
.zaira-trust-sec { padding-block: 40px 8px; }
@media (min-width: 900px) { .zaira-trust-sec { padding-block: 56px 16px; } }
.zaira-trust-flat { box-shadow: var(--z-shadow); }

/* recipe steps (4) */
@media (min-width: 1000px) { .zaira-grid.zaira-grid-4-steps { grid-template-columns: repeat(4, 1fr); } }

/* gallery on transparent cut-outs */
.zaira-shot .wp-block-image.zaira-cut { background: radial-gradient(circle at 50% 40%, #fff, #e9ecef 75%); }
.zaira-shot .wp-block-image.zaira-cut img { object-fit: contain; background: transparent; border-radius: 0; filter: drop-shadow(0 14px 14px rgba(20,22,26,.25)); inset: 10%; width: 80% !important; height: 80% !important; }
.zaira-shot .wp-block-image.zaira-macro img { object-fit: cover; inset: 0; width: 100% !important; height: 100% !important; border-radius: 0; background: #e7e9eb; }
.zaira-shot .wp-block-image.zaira-macro { padding: 0; }

/* parts list refinement */
.zaira-parts .zaira-part { align-items: center; }
.zaira-parts .zaira-bullet { margin-top: 0 !important; }
.zaira-parts .zaira-part-text { padding-block: 4px; }

/* v4.1 fixes */
.zaira-stage > * { min-width: 0; max-width: 100%; }
.zaira-stage .wp-block-image { max-width: 100%; }
.zaira-stage img { max-width: 100% !important; object-fit: contain; }
.zaira-stat .zaira-big { font-size: clamp(20px, 4.2vw, 32px); line-height: 2; }
.zaira-stat .zaira-big.zaira-ltr { font-size: clamp(24px, 5vw, 36px); line-height: 1.7; }

/* v5 — problem/solution, comparison, big-number steps (inspired by reference layout) */
.zaira-ps-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .zaira-ps-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
.zaira-ps { border-radius: 30px; padding: 34px 28px; position: relative; overflow: hidden; }
.zaira-ps > * { margin-block: 0; }
.zaira-ps h2 { font-size: clamp(22px, 3.4vw, 30px); margin-block: 4px 18px; }
.zaira-ps-kicker { display: inline-block; padding: 0 16px; border-radius: 999px; font-size: 14px; line-height: 2.2; font-weight: 600; }
.zaira-ps-problem { background: #eceeef; border: 1px solid var(--z-line); }
.zaira-ps-problem .zaira-ps-kicker { background: #d9dcdf; color: #4a4f55; }
.zaira-ps-solution { color: #fff; background: radial-gradient(500px 260px at 90% 0%, rgba(184,115,51,.45), transparent 70%), linear-gradient(160deg, #14161a, #23262b); box-shadow: var(--z-shadow-lg); }
.zaira-ps-solution h2 { color: #fff; }
.zaira-ps-solution .zaira-ps-kicker { background: rgba(224,178,122,.18); color: var(--z-gold); }
.zaira-ps-list { display: grid; gap: 10px; }
.zaira-li { display: flex; gap: 14px; align-items: flex-start; }
.zaira-li > * { margin: 0 !important; }
.zaira-li::before { flex: none; width: 28px; height: 28px; margin-top: 12px; display: grid; place-items: center; border-radius: 50%; font: 700 14px/1 "Segoe UI", sans-serif; }
.zaira-ps-problem .zaira-li::before { content: "✗"; background: #cfd3d6; color: #5a5f66; }
.zaira-ps-solution .zaira-li::before { content: "✓"; background: linear-gradient(145deg, var(--z-copper), var(--z-gold)); color: #fff; }
.zaira-ps-problem .zaira-li p { color: var(--wp--preset--color--ink-soft); }
.zaira-ps-solution .zaira-li p { color: #e6e8ea; }

.zaira-compare-wrap { max-width: 820px; margin-inline: auto; }
.zaira-compare { margin: 0; }
.zaira-compare table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--z-line); border-radius: 26px; overflow: hidden; box-shadow: var(--z-shadow); }
.zaira-compare th, .zaira-compare td { padding: 6px 18px; text-align: center; border: 0; border-bottom: 1px solid var(--z-line); font-size: 16px; line-height: 2.3; }
.zaira-compare tr:last-child td { border-bottom: 0; }
.zaira-compare th { font-size: 17px; font-weight: 700; background: #f4f5f6; padding-block: 14px; }
.zaira-compare td:first-child { text-align: start; width: 52%; color: var(--wp--preset--color--ink); }
.zaira-compare th:nth-child(2), .zaira-compare td:nth-child(2) { background: linear-gradient(180deg, #fff6ea, #fbe9d3); }
.zaira-compare th:nth-child(2) { background: linear-gradient(145deg, var(--z-copper), #cf8a45); color: #fff; }
.zaira-compare .zaira-yes { color: #0e7d41; font: 700 20px/2 "Segoe UI", sans-serif; }
.zaira-compare .zaira-no { color: #b4473a; font: 700 20px/2 "Segoe UI", sans-serif; }
@media (max-width: 560px) { .zaira-compare th, .zaira-compare td { padding-inline: 10px; font-size: 14px; } }

/* big editorial step numerals */
.zaira-grid-4-steps .zaira-step { text-align: start; background: transparent; border: 0; box-shadow: none; padding: 8px 4px; border-top: 2px solid var(--z-copper); border-radius: 0; }
.zaira-grid-4-steps .zaira-step-num { display: block; width: auto; height: auto; margin: 6px 0 0 !important; background: none; box-shadow: none; border-radius: 0; font-size: 64px; line-height: 1.4; color: transparent; -webkit-text-stroke: 1.5px var(--z-copper); }
.zaira-grid-4-steps .zaira-step h3 { margin-top: 0; }
.zaira-grid-4-steps .zaira-step p:last-child { font-size: 15px; }
.zaira-compare td:nth-child(2) { color: #0e7d41; font: 700 20px/2 "Segoe UI", sans-serif; }
.zaira-compare td:nth-child(3) { color: #b4473a; font: 700 20px/2 "Segoe UI", sans-serif; }
.zaira-compare td:first-child { font: inherit; color: var(--wp--preset--color--ink); font-size: 16px; }

/* =====================================================================
   v6 — self-hosted font, contrast, mobile hero, focus, spec table, details gallery
   ===================================================================== */
@font-face { font-family: "Noto Nastaliq Urdu"; font-style: normal; font-weight: 400 700; font-display: swap;
	src: url("assets/fonts/nastaliq-urdu.v2.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Noto Nastaliq Urdu"; font-style: normal; font-weight: 400 700; font-display: swap;
	src: url("assets/fonts/nastaliq-latin.v2.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root { --z-copper-deep: #8f5220; --z-copper-mid: #a35e26; }

/* contrast: darker WhatsApp green and copper surfaces behind white text */
.wp-block-button .wp-block-button__link { background: linear-gradient(145deg, #0c8143, #0b6e39); }
.zaira-compare th:nth-child(2), .zaira-spec th { background: linear-gradient(145deg, var(--z-copper-deep), var(--z-copper-mid)); color: #fff; }
.zaira-bullet, .zaira-step-num, .zaira-check::before, .zaira-solution .zaira-li::before,
.zaira-ps-solution .zaira-li::before { background: linear-gradient(145deg, var(--z-copper-deep), var(--z-copper-mid)); color: #fff; }
.zaira-grid-4-steps .zaira-step-num { background: none; -webkit-text-stroke-color: var(--z-copper-deep); }
.zaira-stat .zaira-big, .zaira-card .zaira-num { background: linear-gradient(145deg, var(--z-copper-deep), var(--z-copper-mid)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.zaira-brand { color: #a3a9b0; }

/* mobile hero: product first, then text */
@media (max-width: 899px) {
	.zaira-hero .zaira-split > .zaira-stage { order: -1; }
	.zaira-hero .zaira-stage { padding-block: 8px 0; }
	.zaira-hero .zaira-stage img { max-height: 280px; }
	.zaira-hero { padding-top: 24px; }
}

/* trust strip titles are paragraphs now (heading order) */
.zaira-trust-item .zaira-trust-title { font-size: 16px; line-height: 2.1; font-weight: 700; color: var(--wp--preset--color--ink); }

/* spec table */
.zaira-spec { margin: 0; }
.zaira-spec table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--z-line); border-radius: 26px; overflow: hidden; box-shadow: var(--z-shadow); }
.zaira-spec th, .zaira-spec td { padding: 6px 20px; text-align: start; border: 0; border-bottom: 1px solid var(--z-line); font-size: 16px; line-height: 2.3; }
.zaira-spec th { font-size: 17px; font-weight: 700; padding-block: 12px; }
.zaira-spec tbody tr:last-child td { border-bottom: 0; }
.zaira-spec td:first-child { width: 34%; font-weight: 700; color: var(--wp--preset--color--ink); background: #f7f7f5; }
.zaira-spec td:last-child { color: var(--wp--preset--color--ink-soft); }
.zaira-spec-wrap { max-width: 820px; margin-inline: auto; }

/* detail gallery uses plain photos */
.zaira-shot .wp-block-image.zaira-macro { background: #e7e9eb; }

/* focus visibility everywhere */
a:focus-visible, summary:focus-visible, video:focus-visible, button:focus-visible { outline: 3px solid var(--z-gold); outline-offset: 3px; border-radius: 6px; }
.wp-block-button__link:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px #14161a; }
.zaira-section:not(.zaira-dark):not(.zaira-studio) a:focus-visible, .zaira-section:not(.zaira-dark):not(.zaira-studio) summary:focus-visible { outline-color: var(--z-copper-deep); }

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
	.zaira-card:hover, .zaira-shot:hover, .wp-block-button .wp-block-button__link:hover { transform: none; }
}

/* v7 — phone frame on the video itself so the caption sits centred below it */
.zaira-phone { padding: 0; background: none; box-shadow: none; border-radius: 0; }
.zaira-phone::before { display: none; }
.zaira-phone video {
	box-sizing: border-box; border: 12px solid #17191c; border-radius: 46px; background: #000;
	box-shadow: 0 0 0 1px rgba(224,178,122,.45), 0 50px 90px -30px rgba(0,0,0,.8), 0 0 120px -10px rgba(184,115,51,.55);
}
.zaira-phone .wp-element-caption { margin: 18px 0 0; text-align: center; color: #b9bec4; font-size: 14px; line-height: 2.2; }
.zaira-studio .zaira-phone .wp-element-caption { color: #d3d7dc !important; opacity: 1; }

/* v8 — gallery stays 2 columns on phones */
@media (max-width: 639px) {
	.zaira-grid-4:not(.zaira-grid-4-steps) { grid-template-columns: 1fr 1fr; gap: 12px; }
	.zaira-grid-4:not(.zaira-grid-4-steps) .zaira-shot { border-radius: 18px; }
	.zaira-grid-4:not(.zaira-grid-4-steps) .zaira-shot p { font-size: 13px; line-height: 2.2; padding: 8px 8px 12px; }
}

/* v9 — sticky order bar hides while an in-page order button is visible */
@media (max-width: 781px) {
	.zaira-sticky { transition: transform .25s ease, opacity .25s ease; }
	.zaira-sticky.is-hidden { transform: translateY(110%); opacity: 0; pointer-events: none; }
}

/* v10 — one-line attribution under the stats band */
.zaira-stats-note { margin: 12px 0 0; text-align: center; font-size: 13px; line-height: 2.2; color: var(--wp--preset--color--ink-soft); }

/* v11 — Nastaliq stat text must not be clipped (no gradient-text clipping); tick aligned with its line */
.zaira-stat .zaira-big, .zaira-card .zaira-num {
	background: none !important; -webkit-background-clip: border-box; background-clip: border-box;
	-webkit-text-fill-color: currentColor; color: var(--z-copper-deep); padding-block: .1em; overflow: visible;
}
.zaira-microtrust { display: flex; align-items: center; gap: 10px; justify-content: flex-start; }
.zaira-microtrust::before {
	content: "✓"; flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin: 0; border-radius: 50%;
	font: 700 12px/1 "Segoe UI", sans-serif; color: #fff; background: linear-gradient(145deg, var(--z-copper-deep), var(--z-copper-mid));
}
@media (max-width: 899px) { .zaira-microtrust { justify-content: center; } }

/* v12 — grid cells must not inherit WordPress's block-gap margin (it pushed trust items 2-4 down 16px);
   kicker labels get breathing room so Nastaliq descenders do not touch the heading below */
.zaira-trust-grid > *, .zaira-stats-grid > *, .zaira-ps-grid > *, .zaira-checks > *, .zaira-parts > *, .zaira-faq > *, .zaira-chips > * { margin-block: 0 !important; }
.zaira-kicker { line-height: 2.6; margin-bottom: 10px !important; }
.zaira-head > .zaira-kicker, .zaira-split .zaira-kicker, .zaira-order .zaira-kicker { margin-bottom: 10px !important; }

/* video: big play button over the picture; a tap anywhere above the control bar plays/pauses */
.zaira-phone { position: relative; }
.zaira-play {
	position: absolute; top: 12px; left: 12px; right: 12px; bottom: 62px; z-index: 3; margin: 0; padding: 0;
	display: grid; place-items: center; border: 0; border-radius: 34px 34px 0 0; background: transparent; cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.zaira-play span {
	display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; color: #fff;
	background: rgba(16,18,21,.62); border: 2px solid rgba(255,255,255,.75); backdrop-filter: blur(4px);
	box-shadow: 0 12px 30px -8px rgba(0,0,0,.6); transition: opacity .25s ease, transform .25s ease;
}
.zaira-play svg { width: 34px; height: 34px; fill: currentColor; margin-inline-start: 4px; }
.zaira-play:hover span { transform: scale(1.06); }
.zaira-play:focus-visible { outline: 3px solid var(--z-gold); outline-offset: -6px; }
.zaira-play.is-playing span { opacity: 0; transform: scale(.85); }

/* phones: no body padding (it showed as a white strip under the dark footer); the closing section carries the space */
@media (max-width: 781px) {
	body { padding-bottom: 0 !important; }
	.zaira-final { padding-bottom: 96px; }
}

/* =====================================================================
   v13 — performance: fallback faces whose metrics match Nastaliq, so the font swap does not re-wrap the text.
   "size-adjust" = (width of the Urdu text in Noto Nastaliq) / (width in the fallback), measured on the page's own text.
   ===================================================================== */
@font-face { font-family: "Zaira FB Naskh"; src: local("Noto Naskh Arabic"), local("NotoNaskhArabic"), local("NotoNaskhArabic-Regular"); size-adjust: 94%; }
@font-face { font-family: "Zaira FB Noto Sans"; src: local("Noto Sans Arabic"), local("NotoSansArabic"), local("NotoSansArabic-Regular"); size-adjust: 86%; }
@font-face { font-family: "Zaira FB Segoe"; src: local("Segoe UI"), local("SegoeUI"); size-adjust: 84%; }
@font-face { font-family: "Zaira FB Tahoma"; src: local("Tahoma"); size-adjust: 80%; }
@font-face { font-family: "Zaira FB Arial"; src: local("Arial"), local("ArialMT"); size-adjust: 98%; }

/* belt and braces: the hero text may never become shorter than its Nastaliq height */
.zaira-hero h1 { min-height: 4em; }
.zaira-hero .zaira-lead { min-height: 4.8em; }