/* =========================================================
   Nabd Studio — واجهة المتجر (الإصدار 2)
   طبقة مستقلة لصفحات البيع (لا تعتمد على style.css القديم).
   الخط: Ghroob — أوزان خفيفة: العناوين 500، النصوص 300–400.
   الألوان كلها رموز (tokens) تنقلب في الوضع الليلي.
   ========================================================= */

:root {
  --bg: #f5f4f0;
  --bg-2: #ecebe6;
  --card: #ffffff;
  --card-2: #fbfaf8;
  --fg: #0b0b0f;            /* النص القوي والعناوين */
  --text: #2c2b30;          /* نص الفقرات */
  --muted: #6c6862;
  --line: #e4e1da;
  --line-2: #d6d2c9;
  --inv: #0b0b0f;           /* سطح معكوس (أزرار/شارات داكنة) */
  --inv-fg: #ffffff;
  --soft: #eeebe4;          /* زر فاتح (أضف للسلة) */
  --soft-fg: #0b0b0f;
  --night: #0b0b0f;         /* أسطح داكنة ثابتة في الوضعين */
  --night-2: #17171d;
  --header-bg: rgba(245, 244, 240, .86);
  --header-bg-2: rgba(245, 244, 240, .95);
  --ph: #a7a39b;

  --accent: #f26a2b;
  --accent-hover: #e2591a;
  --accent-2: #ff9154;
  --accent-ink: #ffffff;
  --accent-soft: #fdeee6;
  --ok: #1e8a4f;
  --ok-soft: #e7f6ee;
  --err: #c2372c;
  --err-soft: #fbeae8;

  --r-xl: 28px;
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 12px;

  --wrap: 1280px;
  --gutter: clamp(16px, 4vw, 32px);
  --header-h: 72px;

  --shadow-md: 0 2px 4px rgba(11, 11, 15, .04), 0 22px 44px -22px rgba(11, 11, 15, .28);
  --ease: cubic-bezier(.22, .7, .2, 1);

  --font: "Ghroob", "Segoe UI", Tahoma, system-ui, sans-serif;
  --w-head: 500;            /* العناوين */
  --w-ui: 500;              /* الأزرار والتسميات */
  --w-text: 300;            /* الأوصاف */
  --w-body: 400;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0c0c0f;
  --bg-2: #141418;
  --card: #151519;
  --card-2: #1a1a1f;
  --fg: #f3f1ec;
  --text: #d9d6cf;
  --muted: #9b978f;
  --line: #26262d;
  --line-2: #34343c;
  --inv: #f3f1ec;
  --inv-fg: #0b0b0f;
  --soft: #222228;
  --soft-fg: #f3f1ec;
  --night: #050507;
  --night-2: #18181e;
  --header-bg: rgba(12, 12, 15, .82);
  --header-bg-2: rgba(12, 12, 15, .94);
  --ph: #6b6862;
  --accent-soft: rgba(242, 106, 43, .14);
  --ok-soft: rgba(30, 138, 79, .16);
  --err-soft: rgba(194, 55, 44, .16);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, .3), 0 22px 44px -22px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

/* ---------- أساسيات ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body.st {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  font-weight: var(--w-body);
  line-height: 1.75;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  transition: background-color .3s, color .3s;
}
body.st :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote) { margin: 0; }
body.st :where(ul, ol) { padding: 0; list-style: none; }
body.st img { max-width: 100%; height: auto; display: block; }
body.st a { color: inherit; text-decoration: none; }
:where(body.st) :where(button, input, select, textarea) { font: inherit; color: inherit; }
body.st :where(h1, h2, h3, h4) { line-height: 1.35; font-weight: var(--w-head); color: var(--fg); letter-spacing: 0; }
body.st :where(b, strong) { font-weight: 600; }
body.st :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
body.st ::selection { background: var(--accent); color: #fff; }

.screen-reader-text, .st .screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.st-skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 200; background: var(--inv); color: var(--inv-fg); padding: 10px 16px; border-radius: 10px; }
.st-skip:focus { top: 12px; }

.st-wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- الأزرار ---------- */
.st-btn {
  --h: 46px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--h); padding: 0 20px;
  border-radius: 999px; border: 1.5px solid transparent;
  font-family: var(--font); font-size: .92rem; font-weight: var(--w-ui); line-height: 1;
  white-space: nowrap; cursor: pointer; user-select: none;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.st-btn:active { transform: translateY(1px) scale(.99); }
.st-btn--lg { --h: 54px; padding: 0 28px; font-size: 1rem; }
.st-btn--accent { background: var(--accent); color: var(--accent-ink); }
.st-btn--accent:hover { background: var(--accent-hover); box-shadow: 0 12px 26px -14px rgba(242, 106, 43, .95); }
.st-btn--soft { background: var(--soft); color: var(--soft-fg); }
.st-btn--soft:hover { background: var(--fg); color: var(--bg); }
.st-btn--line { background: transparent; color: var(--fg); border-color: var(--fg); }
.st-btn--line:hover { background: var(--fg); color: var(--bg); }
.st-btn--ink { background: var(--inv); color: var(--inv-fg); }
.st-btn svg { flex: 0 0 auto; }

.st-btn.add_to_cart_button.loading { pointer-events: none; opacity: .7; }
.st-btn.add_to_cart_button.loading svg { animation: stSpin .8s linear infinite; }
.st-btn.add_to_cart_button.added { background: var(--inv); color: var(--inv-fg); }
.st-btn.add_to_cart_button.added svg { display: none; }
.st-btn.add_to_cart_button.added::before { content: "✓"; }
.st .added_to_cart { display: none !important; }
@keyframes stSpin { to { transform: rotate(360deg); } }

/* ---------- الشريط العلوي ---------- */
.st-announce { background: var(--night); color: rgba(255, 255, 255, .8); font-size: .78rem; font-weight: 300; }
.st-announce .st-wrap { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 34px; flex-wrap: wrap; }
.st-announce i { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
@media (max-width: 640px) { .st-announce span:not(:first-child), .st-announce i { display: none; } }

/* ---------- الترويسة ---------- */
.st-header { position: sticky; top: 0; z-index: 90; border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s; }
/* التمويه على ::before — على الترويسة نفسها يحبس درج القائمة (position:fixed) داخلها. */
.st-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--header-bg);
  backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px);
  transition: background .3s;
}
.st-header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 10px 30px -24px rgba(11, 11, 15, .5); }
.st-header.is-stuck::before { background: var(--header-bg-2); }
.st-header-in { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; min-height: var(--header-h); }

.st-logo { display: inline-flex; align-items: center; gap: 12px; }
.st-logo-mark { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; }
.st-logo-type { display: flex; flex-direction: column; line-height: 1.15; }
.st-logo-type b { font-size: 1.08rem; font-weight: 600; color: var(--fg); }
.st-logo-type small { font-size: .72rem; color: var(--muted); font-weight: 300; margin-top: 2px; }

.st-nav { justify-self: center; }
.st-menu { display: flex; align-items: center; gap: 2px; }
.st-menu a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 13px;
  border-radius: 999px; font-size: .9rem; font-weight: 400; color: var(--text);
  transition: background .2s, color .2s;
}
.st-menu a:hover { background: var(--soft); color: var(--fg); }
.st-menu .current-menu-item > a { background: var(--inv); color: var(--inv-fg); }
.st-menu .nav-acc-item { display: none; }

.st-actions { display: flex; align-items: center; gap: 8px; }
.st-icon {
  position: relative; display: inline-grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%; padding: 0; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); color: var(--fg);
  transition: border-color .2s, background .2s;
}
.st-icon:hover { border-color: var(--fg); }
.st-cart .nav-cart-count {
  position: absolute; top: -3px; inset-inline-start: -3px;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: .7rem; font-weight: 600; line-height: 20px; text-align: center;
  box-shadow: 0 0 0 2px var(--bg);
}
.st-cart.is-bump { animation: stBump .5s var(--ease); }
@keyframes stBump { 30% { transform: scale(1.18); } 60% { transform: scale(.94); } }

/* أداة GTranslate تبقى في الصفحة لكنها مخفيّة — الزرّ stLangBtn يستدعي دالتها */
.st-lang { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.st-lang-btn { font-size: .78rem; font-weight: 600; letter-spacing: .04em; }
.st-lang-btn .st-lang-ar { display: none; font-size: 1rem; }
.st-en .st-lang-btn .st-lang-en { display: none; }
.st-en .st-lang-btn .st-lang-ar { display: inline; }
.st-theme-btn .st-ic-sun { display: none; }
[data-theme="dark"] .st-theme-btn .st-ic-sun { display: block; }
[data-theme="dark"] .st-theme-btn .st-ic-moon { display: none; }

.st-burger { display: none; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--inv); cursor: pointer; position: relative; }
.st-burger span { position: absolute; inset-inline: 13px; height: 2px; background: var(--inv-fg); border-radius: 2px; transition: transform .3s var(--ease), top .3s var(--ease); }
.st-burger span:first-child { top: 16px; }
.st-burger span:last-child { top: 24px; }
.st-nav-open .st-burger span:first-child { top: 20px; transform: rotate(45deg); }
.st-nav-open .st-burger span:last-child { top: 20px; transform: rotate(-45deg); }

@media (max-width: 1100px) { .st-menu a { padding: 0 9px; font-size: .86rem; } }
@media (max-width: 960px) {
  .st-header-in { grid-template-columns: auto 1fr; gap: 10px; }
  .st-actions { justify-self: end; gap: 6px; }
  .st-burger { display: inline-block; }
  .st-nav {
    position: fixed; inset: 0; z-index: 85; justify-self: stretch;
    background: rgba(5, 5, 7, .5);
    opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
  }
  .st-menu {
    position: absolute; top: 0; bottom: 0; inset-inline-start: 0;
    width: min(340px, 86vw); padding: calc(var(--header-h) + 34px) 20px 28px;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: var(--bg); overflow-y: auto;
    transform: translateX(100%); transition: transform .4s var(--ease);
  }
  .st-en .st-menu { transform: translateX(-100%); }
  .st-menu a { min-height: 52px; padding: 0 16px; font-size: 1.02rem; border-radius: 14px; }
  .st-menu .nav-acc-item { display: block; }
  .st-menu .nav-acc-item:first-of-type { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
  .st-nav-open .st-nav { opacity: 1; visibility: visible; }
  .st-nav-open .st-menu { transform: none; }
  .st-nav-open { overflow: hidden; }
  .st-nav-open .st-header { z-index: 95; }
}
@media (max-width: 520px) {
  .st-logo-type small { font-size: .62rem; }
  .st-logo-mark { width: 34px; height: 34px; border-radius: 10px; }
  .st-logo-type b { font-size: .98rem; }
  .st-account { display: none; }
  .st-icon, .st-burger { width: 38px; height: 38px; }
  .st-burger span { inset-inline: 12px; }
  .st-burger span:first-child { top: 14px; }
  .st-burger span:last-child { top: 22px; }
  .st-nav-open .st-burger span { top: 18px !important; }
}
@media (max-width: 360px) { .st-logo-type { display: none; } }

/* ---------- عناصر مشتركة ---------- */
.st-kick { display: inline-block; font-size: .72rem; font-weight: 500; letter-spacing: .22em; color: var(--accent); }
.st-eyebrow { display: inline-block; font-size: .82rem; font-weight: 400; color: var(--muted, #6b6b6b); }
.st-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; font-size: .9rem; color: var(--text); border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.st-link:hover { color: var(--accent); }

.st-section { margin-top: clamp(40px, 6vw, 72px); }
.st-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.st-head h2 { font-size: clamp(1.35rem, 2.6vw, 1.9rem); }

.st-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .82rem; font-weight: 300; color: var(--muted); }
.st-crumbs a:hover { color: var(--fg); }
.st-crumbs [aria-current] { color: var(--fg); }

.st-price { font-weight: 500; font-size: 1.15rem; color: var(--fg); display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.st-price del { order: 2; color: var(--muted); font-weight: 300; font-size: .85em; text-decoration-thickness: 1px; }
.st-price ins { text-decoration: none; color: var(--err); }
.st-price .woocommerce-Price-currencySymbol { font-size: .8em; margin-inline-start: 2px; }
.st-price--soon { color: var(--accent); font-size: .98rem; }

/* أسفل الصورة — أعلاها عنوان الغلاف المصمَّم */
.st-badge {
  position: absolute; bottom: 12px; inset-inline-start: 12px; z-index: 2;
  padding: 5px 12px; border-radius: 999px;
  background: var(--inv); color: var(--inv-fg); font-size: .74rem; font-weight: 500;
}
.st-badge--soon { background: var(--accent); color: #fff; }

/* ---------- البنر (مستطيل يتدرّج كصورة بنفس النِّسب على كل الشاشات) ---------- */
.st-banner-wrap { padding-top: clamp(14px, 2.4vw, 26px); }
.st-banner { display: block; position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--line); }
.st-banner--img { border: 0; background: none; }
.st-banner--img img { width: 100%; height: auto; }

.st-bn { position: relative; aspect-ratio: 1240 / 540; container-type: inline-size; overflow: hidden; isolation: isolate; color: var(--fg); }
.st-bn::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 4.8cqw 4.8cqw; opacity: .55;
  mask-image: radial-gradient(70% 90% at 50% 50%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(70% 90% at 50% 50%, #000, transparent 75%);
}
.st-bn-nabd, .st-bn-studio {
  position: absolute; z-index: 2; font-weight: 800; line-height: .8; letter-spacing: -.035em; color: var(--fg);
}
.st-bn-nabd { top: 5.4cqw; left: 4.6cqw; font-size: 16cqw; }
.st-bn-studio { bottom: 8.6cqw; right: 3.4cqw; font-size: 16cqw; }
.st-bn-creative {
  position: absolute; z-index: 3; top: 4.6cqw; right: 5cqw;
  font-size: 3.6cqw; font-weight: 300; color: var(--accent); letter-spacing: -.01em;
  transform: rotate(-4deg);
}
.st-bn-pulse { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; }
.st-bn-pulse path {
  fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1600; stroke-dashoffset: 1600;
  animation: stPulseDraw 2.4s var(--ease) .3s forwards;
  filter: drop-shadow(0 0 6px rgba(242, 106, 43, .6));
}
@keyframes stPulseDraw { to { stroke-dashoffset: 0; } }

.st-bn-orb { position: absolute; z-index: 3; left: 50%; top: 21.5cqw; width: 23cqw; aspect-ratio: 1; transform: translate(-50%, -50%); }
.st-bn-core {
  position: absolute; inset: 14%; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #ffd2b6 0%, #ff9154 22%, #f26a2b 50%, #a83a0d 82%, #4a1806 100%);
  box-shadow: 0 3cqw 6cqw -2cqw rgba(242, 106, 43, .65), inset -1.5cqw -2cqw 4cqw rgba(0, 0, 0, .35);
  animation: stFloat 6s ease-in-out infinite;
}
.st-bn-core::after { content: ""; position: absolute; top: 12%; left: 20%; width: 34%; height: 22%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .7), transparent); transform: rotate(-24deg); }
.st-bn-ring { position: absolute; inset: 0; border-radius: 50%; border: .18cqw solid var(--fg); opacity: .18; transform: rotateX(70deg) rotateZ(-18deg); }
.st-bn-ring--2 { inset: -9%; opacity: .12; transform: rotateX(72deg) rotateZ(24deg); border-style: dashed; }
.st-bn-chip {
  position: absolute; display: grid; place-items: center;
  min-width: 5.2cqw; height: 5.2cqw; padding: 0 1.1cqw; border-radius: 1.4cqw;
  font-size: 1.9cqw; font-weight: 600; color: #fff;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 1cqw 2.4cqw -1cqw rgba(0, 0, 0, .45);
  animation: stFloat 5s ease-in-out infinite;
}
.st-bn-chip--ps { top: 2%; left: -6%; background: #001e36; color: #31a8ff; border: .15cqw solid #31a8ff; animation-delay: -1s; }
.st-bn-chip--ai { bottom: 4%; left: 2%; background: #330000; color: #ff9a00; border: .15cqw solid #ff9a00; animation-delay: -2.5s; }
.st-bn-chip--ads { top: 8%; right: -8%; background: var(--inv); color: var(--inv-fg); font-size: 1.5cqw; letter-spacing: .1em; }
@keyframes stFloat { 50% { transform: translateY(-1.1cqw); } }

.st-bn-cta {
  position: absolute; z-index: 4; top: 24.6cqw; left: 5.2cqw;
  display: inline-flex; align-items: center; gap: 1.2cqw;
  padding: .7cqw .7cqw .7cqw 2.2cqw; border-radius: 999px;
  border: .16cqw solid var(--fg); background: var(--card);
  font-size: clamp(9px, 1.55cqw, 19px); font-weight: 500; color: var(--fg);
  transition: background .3s, color .3s;
}
.st-bn-cta i { display: grid; place-items: center; width: 3.4cqw; height: 3.4cqw; min-width: 18px; min-height: 18px; border-radius: 50%; background: var(--fg); color: var(--bg); font-style: normal; font-size: clamp(9px, 1.4cqw, 17px); }
.st-banner:hover .st-bn-cta { background: var(--fg); color: var(--bg); }
.st-banner:hover .st-bn-cta i { background: var(--accent); color: #fff; }

.st-bn-tag { position: absolute; z-index: 4; right: 4cqw; bottom: 2.2cqw; display: flex; flex-direction: column; align-items: flex-end; gap: .2cqw; }
.st-bn-tag b { font-size: 2.6cqw; font-weight: 500; color: var(--fg); display: flex; align-items: center; gap: 1.4cqw; }
.st-bn-tag b::after { content: ""; width: 14cqw; height: .2cqw; background: var(--fg); order: 1; }
.st-bn-tag small { font-size: 1.15cqw; font-weight: 300; color: var(--muted); letter-spacing: .14em; }

.st-bn-note { position: absolute; z-index: 4; left: 4cqw; bottom: 2.4cqw; display: flex; flex-direction: column; font-size: 1.15cqw; font-weight: 300; letter-spacing: .12em; color: var(--muted); line-height: 1.5; }
.st-bn-note b { font-size: 1.4cqw; font-weight: 500; color: var(--fg); letter-spacing: 0; margin-top: .4cqw; }

.st-bn-strip {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 clamp(10px, 2vw, 22px); min-height: clamp(18px, 2.6vw, 34px);
  background: var(--night); color: rgba(255, 255, 255, .85);
  font-size: clamp(7px, .95vw, 12px); font-weight: 400; letter-spacing: .32em;
}

/* ---------- صفوف المنتجات الأفقية (سحب مثل متاجر سلة) ---------- */
.st-row-tools { display: flex; align-items: center; gap: 8px; }
.st-row-tools .st-link { margin-inline-end: 6px; }
.st-row-btn {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--fg); transition: all .2s;
}
.st-row-btn:hover:not(:disabled) { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.st-en .st-row-btn svg { transform: scaleX(-1); }
.st-row.is-start .st-row-btn[data-dir="prev"], .st-row.is-end .st-row-btn[data-dir="next"] { opacity: .35; pointer-events: none; }
.st-row.is-static .st-row-btn { display: none; }

.st-rail {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * 16px) / 4);
  gap: 16px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-bottom: 6px;
}
.st-rail::-webkit-scrollbar { display: none; }
.st-rail > .st-card { scroll-snap-align: start; }
@media (max-width: 1100px) { .st-rail { grid-auto-columns: calc((100% - 2 * 16px) / 3); } }
@media (max-width: 760px) {
  .st-rail {
    grid-auto-columns: 62%; gap: 12px;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
  .st-row-btn { display: none; }
}

/* ---------- شبكة (صفحة المتجر) ---------- */
.st-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 2vw, 22px); }
@media (max-width: 1100px) { .st-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* ---------- بطاقة المنتج ---------- */
.st-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--card); border-radius: var(--r-lg);
  overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.st-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.st-card-media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--bg-2); }
.st-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.st-card:hover .st-card-media img { transform: scale(1.04); }
.st-card-ph { display: grid; place-items: center; width: 100%; height: 100%; font-size: 3rem; font-weight: 500; color: var(--accent); background: var(--accent-soft); }

.st-card-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 16px; flex: 1; }
.st-card-title { font-size: 1.02rem; font-weight: var(--w-head); line-height: 1.55; }
.st-card-title a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.st-card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.st-card-text { font-size: .86rem; font-weight: var(--w-text); color: var(--muted); line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.st-card .st-price { margin-top: auto; padding-top: 8px; }
.st-card-actions { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.st-card-actions--one { grid-template-columns: 1fr; }
.st-card-actions .st-btn { --h: 44px; padding: 0 10px; font-size: .86rem; border-radius: 14px; }
.st-card.is-soon .st-card-media img { filter: saturate(.85); }

@media (max-width: 760px) {
  .st-card { border-radius: var(--r-md); }
  .st-card-body { padding: 12px; gap: 3px; }
  .st-card-title { font-size: .92rem; }
  .st-card-text { font-size: .8rem; }
  .st-card .st-price { font-size: 1rem; padding-top: 6px; }
  .st-card-actions { gap: 6px; margin-top: 10px; }
  .st-card-actions .st-btn { --h: 40px; font-size: .78rem; padding: 0 6px; border-radius: 12px; }
  .st-card-actions .st-btn svg { display: none; }
}

/* ---------- بنر ترويجي داكن ---------- */
.st-promo {
  position: relative; display: flex; flex-direction: column;
  margin-top: clamp(40px, 6vw, 72px);
  background: var(--night); color: #fff; border-radius: var(--r-lg); overflow: hidden; isolation: isolate;
}
.st-promo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(45% 90% at 20% 50%, rgba(242, 106, 43, .3), transparent 70%); }
.st-promo-top, .st-promo-foot { display: flex; justify-content: space-between; gap: 12px; padding: 16px clamp(18px, 3vw, 32px); font-size: .7rem; font-weight: 400; letter-spacing: .3em; color: rgba(255, 255, 255, .6); }
.st-promo-foot { border-top: 1px solid rgba(255, 255, 255, .1); }
.st-promo-body { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 20px; padding: clamp(12px, 3vw, 28px) clamp(18px, 4vw, 48px) clamp(20px, 4vw, 40px); }
.st-promo-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.st-promo-copy h3 { font-size: clamp(1.6rem, 3.6vw, 2.8rem); color: #fff; }
.st-promo-copy p { color: rgba(255, 255, 255, .72); font-weight: 300; max-width: 460px; margin-bottom: 8px; }
.st-promo-word { font-size: clamp(3.4rem, 11vw, 9rem); font-weight: 700; line-height: .9; color: transparent; -webkit-text-stroke: 1.2px rgba(255, 255, 255, .5); text-align: center; letter-spacing: -.02em; }
.st-promo-word span { color: var(--accent); -webkit-text-stroke: 0; margin: 0 .1em; }
.st-promo-corner {
  position: absolute; top: 12px; inset-inline-end: 14px; z-index: 2;
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  background: #fff; color: #0b0b0f; font-size: 1.1rem; transition: transform .4s var(--ease), background .3s;
}
.st-promo:hover .st-promo-corner { transform: rotate(-45deg); background: var(--accent); color: #fff; }
@media (max-width: 760px) {
  .st-promo-body { grid-template-columns: 1fr; }
  .st-promo-word { order: -1; font-size: 4.2rem; text-align: start; }
}

/* ---------- المزايا ---------- */
.st-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(40px, 6vw, 72px); }
.st-values article { padding: 26px; border-radius: var(--r-lg); background: var(--night-2); color: #fff; display: flex; flex-direction: column; gap: 6px; border: 1px solid transparent; }
[data-theme="dark"] .st-values article { border-color: var(--line); }
.st-values article:first-child { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); border-color: transparent; }
.st-values i { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: rgba(255, 255, 255, .08); color: var(--accent-2); margin-bottom: 8px; }
.st-values article:first-child i { background: rgba(255, 255, 255, .2); color: #fff; }
.st-values h3 { font-size: 1.12rem; color: #fff; }
.st-values p { font-size: .9rem; font-weight: 300; color: rgba(255, 255, 255, .74); }
.st-values article:first-child p { color: rgba(255, 255, 255, .92); }
@media (max-width: 860px) { .st-values { grid-template-columns: 1fr; } }

/* ---------- آراء العملاء ---------- */
.st-reviews { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 360px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.st-review { scroll-snap-align: start; background: var(--card); border-radius: var(--r-lg); padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.st-stars { color: #f5a623; letter-spacing: 3px; }
.st-review p { font-size: .95rem; font-weight: 300; line-height: 1.9; flex: 1; }
.st-review footer b { display: block; font-size: .92rem; font-weight: 500; color: var(--fg); }
.st-review footer small { color: var(--muted); font-size: .8rem; }

/* ---------- الدعم المباشر ---------- */
.st-support {
  display: flex; align-items: center; gap: 14px;
  margin-top: clamp(40px, 6vw, 72px); padding: 8px; padding-inline-start: 28px;
  border-radius: 999px; background: linear-gradient(90deg, var(--accent) 0%, #ff9a52 55%, #ffc65a 100%);
  color: #0b0b0f; font-weight: 500; font-size: clamp(1rem, 2vw, 1.25rem);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.st-support:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -20px rgba(242, 106, 43, .9); }
.st-support span { flex: 1; text-align: center; }
.st-support i { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: #0b0b0f; color: #fff; font-style: normal; font-size: 1.3rem; transition: transform .4s var(--ease); }
.st-support:hover i { transform: rotate(-45deg); }

/* ---------- رأس الصفحات (المتجر/التواصل) ---------- */
.st-pagehead { padding: clamp(30px, 5vw, 60px) 0 clamp(22px, 3.5vw, 36px); border-bottom: 1px solid var(--line); background: radial-gradient(40% 120% at 100% 0%, var(--accent-soft), transparent 70%); }
.st-pagehead h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); margin: 12px 0 8px; }
.st-pagehead p { color: var(--muted); font-weight: 300; max-width: 620px; font-size: 1.02rem; }

.st-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 24px 0 22px; }
.st-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.st-tabs::-webkit-scrollbar { display: none; }
.st-tab { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-size: .9rem; font-weight: 400; color: var(--text); transition: all .2s; }
.st-tab:hover { border-color: var(--fg); }
.st-tab.is-on { background: var(--inv); border-color: var(--inv); color: var(--inv-fg); }
.st-sort { display: flex; align-items: center; gap: 12px; }
.st-count { font-size: .85rem; font-weight: 300; color: var(--muted); }
.st-sort select { height: 42px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--fg); font-size: .88rem; cursor: pointer; }
.st-empty { text-align: center; color: var(--muted); padding: 60px 0; }

/* ---------- صفحة المنتج ---------- */
.st-product { padding-top: 22px; padding-bottom: 40px; }
.st-pd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); margin-top: 18px; align-items: start; }
.st-pd-stage { position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-xl); overflow: hidden; background: var(--bg-2); }
.st-pd-stage img { width: 100%; height: 100%; object-fit: cover; }
.st-pd-thumbs { display: flex; gap: 10px; margin-top: 12px; }
.st-pd-thumbs button { width: 74px; height: 74px; padding: 0; border-radius: 14px; overflow: hidden; border: 2px solid transparent; cursor: pointer; background: none; opacity: .6; transition: opacity .2s, border-color .2s; }
.st-pd-thumbs button.is-on, .st-pd-thumbs button:hover { opacity: 1; border-color: var(--fg); }
.st-pd-thumbs img { width: 100%; height: 100%; object-fit: cover; }

.st-pd-info { position: sticky; top: calc(var(--header-h) + 20px); display: flex; flex-direction: column; gap: 14px; }
.st-pd-info h1 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); line-height: 1.35; }
.st-pd-price { font-size: 1.7rem; }
.st-pd-price.st-price--soon { font-size: 1.15rem; }
.st-pd-lead { font-size: 1.02rem; font-weight: var(--w-text); color: var(--text); line-height: 1.95; }
.st-pd-points { display: grid; gap: 10px; padding: 18px 0; border-block: 1px solid var(--line); }
.st-pd-points li { display: flex; align-items: flex-start; gap: 10px; font-size: .93rem; font-weight: 400; }
.st-pd-points li::before { content: "✓"; flex: 0 0 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: .72rem; font-weight: 600; margin-top: 3px; }
.st-pd-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.st-pd-actions--one { grid-template-columns: 1fr; }
.st-pd-note { font-size: .84rem; font-weight: 300; color: var(--muted); background: var(--bg-2); padding: 10px 14px; border-radius: var(--r-sm); }
.st-pd-trust { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.st-secure { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 300; color: var(--muted); }
.st-secure svg { color: var(--ok); }
.st-pay { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.st-pay img { width: 44px; height: 28px; object-fit: contain; padding: 4px 6px; border-radius: 7px; background: #fff; border: 1px solid var(--line); }
.st-pd-ask { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: var(--r-md); background: var(--card); border: 1px solid var(--line); font-size: .9rem; font-weight: 400; transition: border-color .2s; }
.st-pd-ask:hover { border-color: #25d366; }
.st-pd-ask svg { width: 22px; height: 22px; fill: #25d366; flex: 0 0 auto; }

@media (max-width: 960px) {
  .st-pd { grid-template-columns: 1fr; }
  .st-pd-info { position: static; }
}
@media (max-width: 420px) { .st-pd-actions { grid-template-columns: 1fr; } }

/* الوصف المفصّل — سرد احترافي */
.st-desc { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); margin-top: clamp(48px, 7vw, 88px); padding-top: clamp(36px, 5vw, 56px); border-top: 1px solid var(--line); }
.st-desc-side { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; display: flex; flex-direction: column; gap: 10px; }
.st-desc-side h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.st-desc-buy { margin-top: 18px; padding: 20px; border-radius: var(--r-lg); background: var(--night); color: #fff; display: flex; flex-direction: column; gap: 14px; }
[data-theme="dark"] .st-desc-buy { background: var(--card); border: 1px solid var(--line); }
.st-desc-buy .st-price { color: #fff; font-size: 1.4rem; }
[data-theme="dark"] .st-desc-buy .st-price { color: var(--fg); }

.st-prose { counter-reset: stH; font-size: 1.04rem; font-weight: var(--w-text); line-height: 2.05; color: var(--text); max-width: 760px; }
.st-prose > * + * { margin-top: 18px; }
.st-prose > p:first-child { font-size: clamp(1.12rem, 1.7vw, 1.28rem); line-height: 1.95; color: var(--fg); font-weight: 400; }
.st-prose h3 {
  counter-increment: stH; display: flex; align-items: center; gap: 14px;
  font-size: clamp(1.2rem, 1.9vw, 1.45rem); font-weight: var(--w-head); color: var(--fg);
  margin-top: 44px; padding-top: 28px; border-top: 1px dashed var(--line-2);
}
.st-prose h3::before { content: counter(stH, decimal-leading-zero); font-size: .76rem; font-weight: 500; letter-spacing: .1em; color: var(--accent); padding: 6px 10px; border-radius: 999px; background: var(--accent-soft); }
.st-prose strong { color: var(--fg); font-weight: 500; }
.st-prose ul { display: grid; gap: 12px; }
.st-prose ul li { position: relative; padding-inline-start: 34px; }
.st-prose ul li::before { content: "✓"; position: absolute; inset-inline-start: 0; top: 7px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--inv); color: var(--inv-fg); font-size: .68rem; font-weight: 600; }
.st-prose ol { counter-reset: stStep; display: grid; gap: 12px; }
.st-prose ol li {
  counter-increment: stStep; position: relative;
  padding: 18px 20px; padding-inline-start: 74px; border-radius: var(--r-md);
  background: var(--card); border: 1px solid var(--line); line-height: 1.85;
}
.st-prose ol li::before {
  content: counter(stStep); position: absolute; inset-inline-start: 18px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--inv); color: var(--inv-fg); font-weight: 500; font-size: 1rem;
}
.st-prose ol li strong { display: block; color: var(--fg); }
@media (max-width: 860px) {
  .st-desc { grid-template-columns: 1fr; }
  .st-desc-side { position: static; }
  .st-desc-buy { display: none; }
}

/* شريط الشراء السفلي (جوال) */
.st-buybar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 80;
  display: none; align-items: center; gap: 8px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: var(--header-bg-2); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line); box-shadow: 0 -12px 30px -20px rgba(11, 11, 15, .4);
  transform: translateY(110%); transition: transform .35s var(--ease);
}
.st-buybar .st-price { flex: 1; font-size: 1.05rem; }
.st-buybar .st-btn { --h: 46px; }
.st-btn--icon { width: 46px; padding: 0; }
.st-btn--icon span { display: none; }
.st-btn--icon.added::before { content: "✓"; }
@media (max-width: 960px) {
  .st-buybar { display: flex; }
  .st-buybar.is-on { transform: none; }
}

/* ---------- صفحات عامة + السلة + الدفع ---------- */
.st-page { padding: clamp(26px, 4.5vw, 52px) 0 40px; }
.st-page-title h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: 22px; }
.st-page--flow .st-page-title { display: none; }
.st-page-body > * + * { margin-top: 16px; }
.st-page-body > p, .st-page-body > ul, .st-page-body > h2, .st-page-body > h3 { max-width: 760px; }

.st-steps { display: flex; align-items: center; margin: 0 0 28px; }
.st-steps li { display: flex; align-items: center; gap: 10px; font-size: .9rem; font-weight: 400; color: var(--muted); }
.st-steps li + li::before { content: ""; width: clamp(24px, 8vw, 80px); height: 2px; margin-inline: 12px; background: var(--line-2); border-radius: 2px; }
.st-steps li i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-style: normal; font-size: .82rem; background: var(--card); border: 1.5px solid var(--line-2); }
.st-steps li.now, .st-steps li.done { color: var(--fg); }
.st-steps li.now i { background: var(--inv); border-color: var(--inv); color: var(--inv-fg); }
.st-steps li.done i { background: var(--accent); border-color: var(--accent); color: #fff; }
.st-steps li.done + li::before { background: var(--accent); }
@media (max-width: 520px) { .st-steps li span { display: none; } .st-steps li.now span { display: inline; } }

/* إشعارات ووكومرس */
.st :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px;
  margin: 0 0 18px; padding: 14px 18px; border-radius: var(--r-md);
  background: var(--card); border: 1px solid var(--line); font-size: .93rem; color: var(--text); list-style: none;
}
.st .woocommerce-message { border-inline-start: 4px solid var(--ok); }
.st .woocommerce-info { border-inline-start: 4px solid var(--fg); }
.st .woocommerce-error { border-inline-start: 4px solid var(--err); flex-direction: column; align-items: flex-start; }
.st .woocommerce-error li { margin: 0; }
.st :is(.woocommerce-message, .woocommerce-info) .button,
.st .woocommerce-info a.showcoupon { margin-inline-start: auto; font-weight: 500; color: var(--accent); background: none; border: 0; padding: 0; min-height: 0; }
.st .woocommerce-notices-wrapper:empty { display: none; }
.st .woocommerce-message::before, .st .woocommerce-info::before, .st .woocommerce-error::before { content: none; }

/* حقول النماذج */
.st .form-row { margin: 0 0 16px; display: flex; flex-direction: column; gap: 7px; }
.st .form-row label { font-size: .86rem; font-weight: 500; color: var(--fg); }
.st .form-row .required { color: var(--accent); text-decoration: none; border: 0; }
.st .form-row .optional { color: var(--muted); font-weight: 300; }
.st :is(.input-text, .form-row select, .st-field input, .st-field select, .st-field textarea, #coupon_code) {
  width: 100%; min-height: 52px; padding: 12px 16px;
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: var(--card); color: var(--fg); font-size: .98rem; font-weight: 400;
  transition: border-color .2s, box-shadow .2s;
}
.st textarea.input-text, .st .st-field textarea { min-height: 130px; resize: vertical; }
.st :is(.input-text, .st-field input, .st-field select, .st-field textarea, #coupon_code):focus { outline: none; border-color: var(--fg); box-shadow: 0 0 0 4px var(--accent-soft); }
.st ::placeholder { color: var(--ph); font-weight: 300; }
.st .woocommerce-invalid .input-text { border-color: var(--err); }
.st input[type="tel"], .st input[type="email"] { direction: ltr; text-align: start; }
.st .form-row-first, .st .form-row-last { width: 100%; }
.st .woocommerce-billing-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.st .woocommerce-billing-fields__field-wrapper .form-row-wide { grid-column: 1 / -1; }
@media (max-width: 560px) { .st .woocommerce-billing-fields__field-wrapper { grid-template-columns: 1fr; } }

.st .button, .st button.button, .st a.button, .st input.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1.5px solid var(--inv);
  background: var(--inv); color: var(--inv-fg); font-family: var(--font); font-weight: 500; font-size: .92rem; cursor: pointer;
  transition: opacity .2s;
}
.st .button:hover { opacity: .88; }
.st .button:disabled, .st .button.disabled { opacity: .5; cursor: not-allowed; }

/* --- السلة --- */
.woocommerce-cart.st .st-page-body > .woocommerce { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 0 32px; align-items: start; }
.woocommerce-cart.st .st-page-body > .woocommerce > * { grid-column: 1 / -1; }
.woocommerce-cart.st .st-page-body > .woocommerce > .woocommerce-cart-form { grid-column: 1; grid-row: 3; }
.woocommerce-cart.st .st-page-body > .woocommerce > .cart-collaterals { grid-column: 2; grid-row: 3; position: sticky; top: calc(var(--header-h) + 20px); }
.st table.shop_table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; font-size: .94rem; }
.st table.shop_table :is(th, td) { padding: 16px 18px; text-align: start; border-bottom: 1px solid var(--line); vertical-align: middle; }
.st table.shop_table thead th { font-size: .8rem; font-weight: 500; color: var(--muted); background: var(--card-2); }
.st table.shop_table tr:last-child > :is(th, td) { border-bottom: 0; }
.st table.shop_table th { font-weight: 500; color: var(--fg); }
.st table.cart .product-thumbnail img { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; }
.st table.cart .product-name a { font-weight: 500; color: var(--fg); }
.st table.cart .product-remove a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bg-2); color: var(--muted) !important; font-size: 1.2rem; line-height: 1; }
.st table.cart .product-remove a:hover { background: var(--err); color: #fff !important; }
.st table.cart :is(th, td).product-quantity, .st table.cart button[name="update_cart"] { display: none !important; }
.st table.cart td.actions { background: var(--card-2); }
.st table.cart td.actions .coupon { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.st table.cart td.actions .coupon .input-text { width: 180px; min-height: 48px; }
.st .cart_totals { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; }
.st .cart_totals h2 { font-size: 1.2rem; margin-bottom: 14px; }
.st .cart_totals table.shop_table { border: 0; border-radius: 0; }
.st .cart_totals table.shop_table :is(th, td) { padding: 12px 0; }
.st .cart_totals .order-total :is(th, td) { font-size: 1.12rem; font-weight: 600; color: var(--fg); }
.st .wc-proceed-to-checkout { margin-top: 16px; }
.st .wc-proceed-to-checkout .checkout-button { width: 100%; min-height: 56px; font-size: 1.02rem; background: var(--accent); border-color: var(--accent); color: #fff; }
.st .cart-empty.woocommerce-info { justify-content: center; font-size: 1.05rem; padding: 40px 20px; border-inline-start-width: 1px; }
.st .return-to-shop { text-align: center; }
.st .return-to-shop .button { background: var(--accent); border-color: var(--accent); color: #fff; }
.st .variation { font-size: .8rem; color: var(--muted); margin-top: 4px; }
.st .variation :is(dt, dd) { display: inline; margin: 0; }

@media (max-width: 960px) {
  .woocommerce-cart.st .st-page-body > .woocommerce { grid-template-columns: 1fr; }
  .woocommerce-cart.st .st-page-body > .woocommerce > :is(.woocommerce-cart-form, .cart-collaterals) { grid-column: 1; grid-row: auto; position: static; }
  .woocommerce-cart.st .cart-collaterals { margin-top: 20px; }
}
@media (max-width: 760px) {
  .st table.cart thead { display: none; }
  .st table.cart, .st table.cart tbody, .st table.cart tr, .st table.cart td { display: block; width: 100%; }
  .st table.cart tr.cart_item { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 4px 14px; padding: 16px; border-bottom: 1px solid var(--line); }
  .st table.cart tr.cart_item td { padding: 0; border: 0; }
  .st table.cart td.product-thumbnail { grid-row: 1 / span 3; }
  .st table.cart td.product-remove { position: absolute; top: 12px; inset-inline-end: 12px; width: auto; }
  .st table.cart td:is(.product-price, .product-subtotal)::before { content: attr(data-title) ": "; color: var(--muted); font-size: .8rem; }
  .st table.cart td.product-price { display: none; }
  .st table.cart td.actions { padding: 16px; }
  .st table.cart td.actions .coupon { width: 100%; }
  .st table.cart td.actions .coupon .input-text { flex: 1; width: auto; }
}

/* --- الدفع --- */
.st form.checkout_coupon { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; padding: 18px; margin-bottom: 18px; border-radius: var(--r-md); background: var(--card); border: 1px dashed var(--line-2); }
.st form.checkout_coupon p:first-child { width: 100%; font-size: .88rem; color: var(--muted); }
.st form.checkout_coupon .form-row { margin: 0; flex: 1; }
.st form.checkout_coupon .form-row-last { flex: 0 0 auto; }
.st form.checkout_coupon .clear { display: none; }

.st form.woocommerce-checkout { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 0 36px; align-items: start; }
.st form.woocommerce-checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; }
.st #customer_details { grid-column: 1; grid-row: 2 / span 2; display: flex; flex-direction: column; gap: 18px; }
.st #customer_details .col-2:not(:has(.form-row, .st-service-links)) { display: none; }
.st #customer_details :is(.col-1, .col-2) { width: 100%; float: none; }
.st .woocommerce-billing-fields, .st .st-service-links { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(18px, 3vw, 28px); }
.st .woocommerce-billing-fields h3, .st .st-service-links h3, .st #order_review_heading { font-size: 1.15rem; margin-bottom: 18px; }
.st .st-service-links { margin-top: 18px; border-color: var(--accent); background: linear-gradient(180deg, var(--accent-soft), var(--card) 60%); }
.st .st-hint { font-size: .86rem; font-weight: 300; color: var(--muted); margin: -8px 0 16px; }
.st #order_review_heading { grid-column: 2; grid-row: 2; margin: 0; padding: 22px 24px 0; background: var(--card); border: 1px solid var(--line); border-bottom: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.st #order_review { grid-column: 2; grid-row: 3; background: var(--card); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--r-lg) var(--r-lg); padding: 6px 24px 24px; }
.st .woocommerce-checkout-review-order-table { border: 0 !important; border-radius: 0 !important; }
.st .woocommerce-checkout-review-order-table :is(th, td) { padding: 12px 0 !important; background: none !important; }
.st .woocommerce-checkout-review-order-table thead { display: none; }
.st .woocommerce-checkout-review-order-table .product-name { font-weight: 400; }
.st .woocommerce-checkout-review-order-table .product-quantity { color: var(--muted); font-weight: 300; }
.st .woocommerce-checkout-review-order-table :is(td, th):last-child { text-align: end; }
.st .woocommerce-checkout-review-order-table .order-total :is(th, td) { font-size: 1.15rem; font-weight: 600; color: var(--fg); border-top: 1px solid var(--line); padding-top: 16px !important; }

.st #payment { margin-top: 10px; background: none; }
.st #payment ul.payment_methods { display: grid; gap: 10px; padding: 0; margin: 0 0 18px; border: 0; }
.st #payment li.wc_payment_method { position: relative; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--card); overflow: hidden; transition: border-color .2s; }
.st #payment li.wc_payment_method:has(> input:checked) { border-color: var(--fg); }
.st #payment li.wc_payment_method > input[type="radio"] { position: absolute; top: 20px; inset-inline-start: 16px; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.st #payment li.wc_payment_method > label { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 10px 16px; padding-inline-start: 46px; font-weight: 500; font-size: .95rem; color: var(--fg); cursor: pointer; }
.st #payment li.wc_payment_method > label img { width: 56px !important; max-width: none !important; height: 36px; margin: 0 !important; margin-inline-start: auto !important; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: #fff; }
.st #payment .payment_box { margin: 0; padding: 4px 16px 16px; background: transparent; font-size: .86rem; font-weight: 300; color: var(--muted); }
.st #payment .payment_box::before { content: none; }
.st #payment .payment_box p { margin: 0 0 10px; }
.st #payment .place-order { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.st .woocommerce-privacy-policy-text p { font-size: .8rem; font-weight: 300; color: var(--muted); line-height: 1.8; }
.st .woocommerce-privacy-policy-text a { color: var(--fg); text-decoration: underline; }
.st #place_order { width: 100%; min-height: 58px; font-size: 1.05rem; background: var(--accent); border-color: var(--accent); color: #fff; }
.st #place_order:hover { background: var(--accent-hover); opacity: 1; }
.st .place-order .st-secure, .st .place-order .st-pay { justify-content: center; }
@media (max-width: 1020px) {
  .st form.woocommerce-checkout { grid-template-columns: 1fr; }
  .st #customer_details, .st #order_review_heading, .st #order_review { grid-column: 1; grid-row: auto; }
  .st #order_review_heading { margin-top: 18px; }
}

/* --- تأكيد الطلب --- */
.st .woocommerce-order { display: flex; flex-direction: column; gap: 22px; }
.st .woocommerce-thankyou-order-received { padding: 28px; border-radius: var(--r-lg); background: var(--night); color: #fff; font-size: clamp(1.1rem, 2.1vw, 1.4rem); font-weight: 500; }
.st .woocommerce-thankyou-order-received::before { content: "✓"; display: inline-grid; place-items: center; width: 40px; height: 40px; margin-inline-end: 12px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.st ul.woocommerce-order-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.st ul.woocommerce-order-overview li { padding: 16px 18px; border-radius: var(--r-md); background: var(--card); border: 1px solid var(--line); font-size: .8rem; color: var(--muted); }
.st ul.woocommerce-order-overview li strong { display: block; margin-top: 4px; font-size: .98rem; color: var(--fg); }
.st .woocommerce-order-details__title, .st .woocommerce-column__title { font-size: 1.15rem; margin-bottom: 12px; }
.st .woocommerce-customer-details address { padding: 18px; border-radius: var(--r-md); background: var(--card); border: 1px solid var(--line); font-style: normal; line-height: 1.9; }
.st .wc-item-meta { font-size: .82rem; color: var(--muted); margin-top: 6px; }
.st .wc-item-meta :is(strong, p) { display: inline; }

/* نموذج رفع إيصال التحويل البنكي (inc/checkout-receipt.php) */
.st .asas-receipt-box { padding: 24px; border-radius: var(--r-lg); background: var(--card); border: 1.5px solid var(--accent); display: flex; flex-direction: column; gap: 12px; }
.st .asas-receipt-lead { color: var(--muted); font-size: .92rem; }
.st .asas-receipt-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.st .asas-receipt-form .btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 0; background: var(--accent); color: #fff; font-weight: 500; cursor: pointer; }
.st .asas-receipt-hp { position: absolute !important; inset-inline-start: -9999px; width: 1px; height: 1px; opacity: 0; }
.st .asas-receipt-note { padding: 14px 18px; border-radius: var(--r-md); }
.st .asas-receipt-note--ok { background: var(--ok-soft); color: var(--ok); }
.st .asas-receipt-note--err { background: var(--err-soft); color: var(--err); }

/* ---------- صفحة التواصل ---------- */
.st-contact-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 24px; padding-top: 30px; align-items: start; }
.st-contact-side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: calc(var(--header-h) + 20px); }
.st-contact-card { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); transition: border-color .2s, transform .2s; }
.st-contact-card:hover { border-color: var(--fg); transform: translateY(-2px); }
.st-contact-card small { display: block; font-size: .78rem; font-weight: 300; color: var(--muted); }
.st-contact-card b { font-size: .98rem; font-weight: 500; color: var(--fg); word-break: break-all; }
.st-contact-ic { flex: 0 0 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--bg-2); color: var(--fg); }
.st-contact-card--wa { background: var(--night); border-color: var(--night); }
.st-contact-card--wa b { color: #fff; }
.st-contact-card--wa small { color: rgba(255, 255, 255, .6); }
.st-contact-card--wa .st-contact-ic { background: #25d366; }
.st-contact-card--wa svg { width: 24px; height: 24px; fill: #fff; }
.st-form-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(20px, 4vw, 40px); }
.st-form { display: flex; flex-direction: column; gap: 16px; }
.st-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.st-field { display: flex; flex-direction: column; gap: 7px; }
.st-field label { font-size: .86rem; font-weight: 500; color: var(--fg); }
.st-form-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.st-hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.st-alert { padding: 14px 18px; border-radius: var(--r-md); margin-bottom: 18px; font-weight: 500; }
.st-alert--ok { background: var(--ok-soft); color: var(--ok); }
.st-alert--err { background: var(--err-soft); color: var(--err); }
@media (max-width: 860px) {
  .st-contact-grid { grid-template-columns: 1fr; }
  .st-contact-side { position: static; }
  .st-row2 { grid-template-columns: 1fr; }
}

/* ---------- التذييل ---------- */
.st-footer { margin-top: clamp(56px, 8vw, 104px); background: var(--night); color: rgba(255, 255, 255, .64); padding: clamp(38px, 6vw, 68px) 0 26px; overflow: hidden; font-weight: 300; }
.st-footer-word {
  font-size: clamp(3.2rem, 12.5vw, 11rem); font-weight: 700; line-height: .9; direction: ltr; text-align: center;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .15); white-space: nowrap; user-select: none;
  margin-bottom: clamp(30px, 5vw, 52px);
}
.st-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 32px; }
.st-footer-about p { margin-top: 14px; font-size: .9rem; line-height: 1.9; max-width: 340px; }
.st-footer .st-logo-type b { color: #fff; }
.st-footer .st-logo-type small { color: rgba(255, 255, 255, .5); }
.st-footer h4 { color: #fff; font-size: .95rem; font-weight: 500; margin-bottom: 14px; }
.st-footer ul { display: grid; gap: 10px; font-size: .9rem; }
.st-footer ul a { transition: color .2s; }
.st-footer ul a:hover { color: #fff; }
.st-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 38px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .82rem; }
.st-footer .st-pay img { border-color: transparent; }
@media (max-width: 860px) {
  .st-footer-grid { grid-template-columns: 1fr 1fr; }
  .st-footer-about { grid-column: 1 / -1; }
}

/* ---------- واتساب العائم + الإشعار ---------- */
.st-wa {
  position: fixed; bottom: 20px; right: 20px; z-index: 70;
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: #25d366; box-shadow: 0 12px 28px -10px rgba(37, 211, 102, .8);
  transition: transform .3s var(--ease), bottom .35s var(--ease);
}
.st-wa:hover { transform: scale(1.07); }
.st-wa svg { width: 27px; height: 27px; fill: #fff; }
body:has(.st-buybar.is-on) .st-wa { bottom: 92px; }

.st-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 120;
  display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px);
  padding: 10px; padding-inline-start: 14px; border-radius: 999px;
  background: var(--inv); color: var(--inv-fg); font-size: .88rem; box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .6);
  transform: translate(-50%, 140%); opacity: 0; transition: transform .4s var(--ease), opacity .3s;
}
.st-toast.is-on { transform: translate(-50%, 0); opacity: 1; }
.st-toast-ic { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: #fff; font-size: .8rem; }
.st-toast-tx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-toast-go { flex: 0 0 auto; padding: 8px 16px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 500; font-size: .84rem; }
body:has(.st-buybar.is-on) .st-toast { bottom: 92px; }

/* ---------- الوضع الإنجليزي (بعد الترجمة: اتجاه LTR) ---------- */
.st-en .st-pd-points li::before, .st-en .st-prose ul li::before { content: "✓"; }
.st-en .st-wa { right: auto; left: 20px; }

/* ---------- تقليل الحركة ---------- */
@media (prefers-reduced-motion: reduce) {
  .st *, .st *::before, .st *::after { animation: none !important; transition-duration: .01ms !important; }
  .st-bn-pulse path { stroke-dashoffset: 0; }
}

/* نصوص بديلة للإنجليزية لا تمرّ عبر الترجمة الآلية */
.st-en-only { display: none; }
.st-en .st-en-only { display: inline; }
.st-en .st-ar { display: none; }

/* ---------- نموذج طلب الخدمة / التسجيل (inc/service-requests.php) ---------- */
.st-request { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); margin-top: clamp(48px, 7vw, 88px); padding-top: clamp(36px, 5vw, 56px); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 16px); }
.st-request-side { display: flex; flex-direction: column; gap: 10px; position: sticky; top: calc(var(--header-h) + 24px); align-self: start; }
.st-request-side h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.st-request-side p { color: var(--muted); font-weight: 300; }
.st-request-mail { align-self: flex-start; margin-top: 6px; font-weight: 500; color: var(--fg); border-bottom: 1px solid var(--accent); direction: ltr; }
.st .req { color: var(--accent); }
.st-checks { border: 0; padding: 0; margin: 0; min-width: 0; }
.st-checks legend { font-size: .86rem; font-weight: 500; color: var(--fg); margin-bottom: 8px; padding: 0; }
.st-checks > div { display: flex; flex-wrap: wrap; gap: 8px; }
.st-checks label { cursor: pointer; }
.st-checks input { position: absolute; opacity: 0; pointer-events: none; }
.st-checks span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); font-size: .88rem; transition: all .2s; }
.st-checks input:checked + span { background: var(--inv); border-color: var(--inv); color: var(--inv-fg); }
.st-checks input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.st-checks.is-invalid span { border-color: var(--err); }
.st-field select { appearance: auto; }
@media (max-width: 860px) {
  .st-request { grid-template-columns: 1fr; }
  .st-request-side { position: static; }
}

/* ---------- السجل التجاري (التذييل) ---------- */
.st-cr { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; padding: 10px 16px 10px 12px; padding-inline-start: 10px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); }
.st-cr-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #fff; color: #0b0b0f; overflow: hidden; }
.st-cr-ic img { width: 100%; height: 100%; object-fit: contain; }
.st-cr-ic svg path, .st-cr-ic svg circle { stroke: #0b0b0f; }
.st-cr-ic svg circle { fill: #1e8a4f; stroke: none; }
.st-cr-ic svg circle + path { stroke: #fff; }
.st-cr-tx { display: flex; flex-direction: column; line-height: 1.35; }
.st-cr-tx small { font-size: .74rem; color: rgba(255, 255, 255, .55); }
.st-cr-tx b { font-size: 1rem; font-weight: 500; color: #fff; letter-spacing: .04em; }

/* ---------- بطاقة البريد في صفحة التواصل + شريط الدعم ---------- */
.st-contact-card--main { background: var(--night); border-color: var(--night); }
.st-contact-card--main b { color: #fff; }
.st-contact-card--main small { color: rgba(255, 255, 255, .6); }
.st-contact-card--main .st-contact-ic { background: var(--accent); color: #fff; }
.st-support small { display: block; font-size: .78em; font-weight: 400; opacity: .75; }

/* =========================================================
   v4: مسافات أوسع، نافذة «تمت الإضافة»، اشتريها معاً، أعمالنا، العملاء والشركاء
   ========================================================= */
.st-section, .st-promo, .st-values, .st-support, .st-works, .st-logos { margin-top: clamp(72px, 10vw, 136px); }
.st-head { margin-bottom: clamp(20px, 2.6vw, 30px); }
.st-head-sub { color: var(--muted); font-weight: 300; font-size: .95rem; margin-top: 4px; }

/* --- نافذة «تمت الإضافة إلى سلة التسوق» --- */
html.st-lock, html.st-lock body { overflow: hidden; }
.st-sheet { position: fixed; inset: 0; z-index: 200; }
.st-sheet-scrim { position: absolute; inset: 0; background: rgba(5, 5, 7, .55); opacity: 0; transition: opacity .3s; }
.st-sheet-panel {
  position: absolute; left: 50%; top: 50%; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto;
  background: var(--card); color: var(--text); border-radius: var(--r-lg); padding: 0 22px 22px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6);
  transform: translate(-50%, -46%) scale(.97); opacity: 0; transition: transform .35s var(--ease), opacity .3s;
}
.st-sheet.is-on .st-sheet-scrim { opacity: 1; }
.st-sheet.is-on .st-sheet-panel { transform: translate(-50%, -50%); opacity: 1; }
.st-sheet-bar { height: 5px; margin: 0 -22px 18px; background: var(--bg-2); overflow: hidden; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.st-sheet-bar i { display: block; height: 100%; width: 0; background: #22b35e; }
.st-sheet.is-on .st-sheet-bar i { animation: stFill 1.1s var(--ease) .1s forwards; }
@keyframes stFill { to { width: 100%; } }
.st-sheet-head { display: flex; align-items: center; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.st-sheet-ok { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #22b35e; color: #fff; font-size: .78rem; flex: 0 0 auto; }
.st-sheet-head b { flex: 1; font-size: 1.08rem; font-weight: 500; color: var(--fg); }
.st-sheet-x { width: 36px; height: 36px; border: 0; background: none; color: var(--muted); font-size: 1.6rem; line-height: 1; cursor: pointer; border-radius: 50%; }
.st-sheet-x:hover { background: var(--bg-2); color: var(--fg); }
.st-sheet-item { display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 14px; padding: 16px 0; }
.st-sheet-item img { width: 84px; height: 84px; object-fit: cover; border-radius: 14px; background: var(--bg-2); }
.st-sheet-item b { font-size: 1rem; font-weight: 500; color: var(--fg); line-height: 1.55; }
.st-sheet-item .st-price { flex-direction: column; align-items: flex-end; gap: 0; font-size: 1.05rem; }
.st-sheet-item .st-price ins { color: var(--err); }
.st-sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.st-sheet-actions .st-btn { border-radius: 14px; }
.st-sheet-more { margin-top: 22px; }
.st-sheet-more h3 { font-size: 1rem; margin-bottom: 12px; }
.st-rail--sheet { grid-auto-columns: 46%; margin: 0; padding: 0 0 4px; }
.st-rail--sheet > .st-sheet-card[hidden] { display: none; }
.st-rail--sheet .st-card-text { display: none; }
.st-rail--sheet .st-card-actions { grid-template-columns: 1fr; }
.st-rail--sheet .st-card-actions .st-btn--accent { display: none; }
@media (max-width: 640px) {
  .st-sheet-panel { left: 0; right: 0; top: 0; width: 100%; max-height: 92vh; border-radius: 0 0 var(--r-lg) var(--r-lg); transform: translateY(-100%); padding: 0 16px 18px; }
  .st-sheet.is-on .st-sheet-panel { transform: none; }
  .st-sheet-bar { margin: 0 -16px 16px; border-radius: 0; }
  .st-sheet-item { grid-template-columns: 72px 1fr auto; }
  .st-sheet-item img { width: 72px; height: 72px; }
  .st-rail--sheet { grid-auto-columns: 58%; }
}

/* --- اشتريها معاً --- */
.st-bundle { margin-top: clamp(48px, 7vw, 88px); padding: clamp(18px, 3vw, 28px); border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); max-width: 760px; }
.st-bundle h2 { font-size: 1.25rem; margin-bottom: 14px; }
.st-bundle ul { display: grid; gap: 4px; margin-bottom: 16px; }
.st-bundle label { display: grid; grid-template-columns: 26px 56px 1fr auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.st-bundle li:last-child label { border-bottom: 0; }
.st-bundle input { position: absolute; opacity: 0; pointer-events: none; }
.st-bundle-check { width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid var(--line-2); display: grid; place-items: center; transition: all .2s; }
.st-bundle input:checked + .st-bundle-check { background: var(--accent); border-color: var(--accent); }
.st-bundle input:checked + .st-bundle-check::after { content: "✓"; color: #fff; font-size: .75rem; }
.st-bundle input:disabled + .st-bundle-check { opacity: .7; }
.st-bundle img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; }
.st-bundle-name { font-size: .95rem; color: var(--fg); line-height: 1.5; }
.st-bundle-price { font-weight: 500; color: var(--fg); white-space: nowrap; }
.st-bundle-go { width: 100%; border-radius: 14px; }
.st-bundle-go b { font-weight: 600; }

/* --- شريط الشراء: ثابت دائماً على الجوال (مثل متاجر سلة) --- */
@media (max-width: 960px) {
  .st-buybar { transform: none !important; }
  body:has(.st-buybar) .st-content { padding-bottom: 80px; }
  body:has(.st-buybar) .st-wa { bottom: 92px; }
}

/* --- من أعمالنا --- */
.st-works-grid { columns: 3 300px; column-gap: 16px; }
.st-work { position: relative; display: block; width: 100%; margin: 0 0 16px; padding: 0; border: 0; border-radius: var(--r-lg); overflow: hidden; break-inside: avoid; cursor: zoom-in; background: var(--bg-2); text-align: start; font: inherit; }
.st-work img { width: 100%; height: auto; transition: transform .8s var(--ease); }
.st-work:hover img { transform: scale(1.03); }
.st-work .st-work-cap { position: absolute; inset-inline: 10px; bottom: 10px; display: flex; flex-direction: column; padding: 10px 14px; border-radius: 14px; background: rgba(11, 11, 15, .78); backdrop-filter: blur(8px); color: #fff; line-height: 1.4; }
.st-work .st-work-cap b { font-size: .92rem; font-weight: 500; }
.st-work .st-work-cap small { font-size: .78rem; font-weight: 300; color: rgba(255, 255, 255, .75); }
@media (max-width: 640px) {
  .st-works-grid { columns: 2; column-gap: 10px; }
  .st-work { margin-bottom: 10px; border-radius: var(--r-md); }
  .st-work .st-work-cap { inset-inline: 6px; bottom: 6px; padding: 7px 10px; }
  .st-work .st-work-cap small { display: none; }
}

.st-lightbox { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; align-content: center; padding: 20px; background: rgba(5, 5, 7, .92); opacity: 0; transition: opacity .25s; }
.st-lightbox.is-on { opacity: 1; }
.st-lightbox img { max-width: min(1200px, 100%); max-height: 80vh; border-radius: 14px; }
.st-lightbox p { color: #fff; margin-top: 12px; text-align: center; }
.st-lightbox button { position: absolute; top: 16px; inset-inline-end: 16px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; color: #0b0b0f; font-size: 1.5rem; cursor: pointer; }

/* --- العملاء + شركاء التسويق --- */
.st-logos-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.st-logo-tile { display: flex; align-items: center; justify-content: center; height: clamp(96px, 12vw, 140px); padding: clamp(12px, 1.6vw, 20px); border-radius: var(--r-md); background: var(--night); border: 1px solid transparent; overflow: hidden; }
[data-theme="dark"] .st-logo-tile { border-color: var(--line); }
.st-logo-tile img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.st-partners { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 12px; }
.st-partner { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: .8rem; color: var(--muted); }
.st-partner img { width: 100%; max-width: 92px; aspect-ratio: 1; object-fit: cover; border-radius: 22%; box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .5); }
@media (max-width: 960px) { .st-logos-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .st-partners { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 520px) { .st-logos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .st-partners { gap: 10px; } .st-partner { font-size: .7rem; } }

/* =========================================================
   v5: شعار عربي/إنجليزي، أرقام الحملات، المقالات
   ========================================================= */
.st-logo-type small { letter-spacing: .08em; direction: ltr; text-align: start; }

/* --- أرقام حقيقية (الرئيسية + صفحات الحملات) --- */
.st-numbers { margin-top: clamp(72px, 10vw, 136px); padding: clamp(24px, 4vw, 48px); border-radius: var(--r-xl); background: var(--night); color: #fff; position: relative; overflow: hidden; isolation: isolate; }
.st-numbers::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(40% 90% at 100% 0%, rgba(122, 162, 255, .22), transparent 70%), radial-gradient(40% 90% at 0% 100%, rgba(52, 211, 153, .16), transparent 70%); }
.st-numbers-head h2 { color: #fff; font-size: clamp(1.4rem, 2.6vw, 2rem); margin: 8px 0 6px; }
.st-numbers-head p { color: rgba(255, 255, 255, .66); font-weight: 300; }
.st-numbers-grid, .st-results-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.st-stat { display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: var(--r-md); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); }
.st-stat b { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 600; color: #fff; line-height: 1.1; text-align: start; }
.st-stat span { font-size: .84rem; font-weight: 300; color: rgba(255, 255, 255, .7); }
@media (max-width: 760px) { .st-numbers-grid, .st-results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.st-results { margin-top: clamp(48px, 7vw, 88px); padding: clamp(22px, 4vw, 40px); border-radius: var(--r-xl); background: var(--night); color: #fff; }
.st-results-head h2 { color: #fff; font-size: clamp(1.3rem, 2.4vw, 1.8rem); margin: 8px 0 4px; }
.st-results-head p { color: rgba(255, 255, 255, .62); font-weight: 300; font-size: .92rem; }
.st-results-proof { margin: 22px 0 0; border-radius: var(--r-md); overflow: hidden; background: #fff; }
.st-results-proof img { width: 100%; height: auto; max-height: 520px; object-fit: contain; }
.st-results-proof figcaption { padding: 10px 14px; font-size: .78rem; color: #6c6862; background: #f5f4f0; }

/* --- المقالات --- */
.st-posts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
@media (max-width: 960px) { .st-posts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .st-posts-grid { grid-template-columns: 1fr; } }
.st-post { position: relative; display: flex; flex-direction: column; background: var(--card); border-radius: var(--r-lg); overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.st-post:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.st-post-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-2); }
.st-post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.st-post:hover .st-post-media img { transform: scale(1.04); }
.st-post-body { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.st-post-meta { display: flex; gap: 8px; font-size: .78rem; color: var(--muted); font-weight: 300; }
.st-post-meta span:first-child { color: var(--accent); font-weight: 500; }
.st-post h3 { font-size: 1.08rem; line-height: 1.55; }
.st-post h3 a::after { content: ""; position: absolute; inset: 0; }
.st-post p { font-size: .9rem; font-weight: 300; color: var(--muted); line-height: 1.8; }
.st-pagination { margin-top: 30px; }
.st-pagination .nav-links { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.st-pagination .page-numbers { display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--fg); }
.st-pagination .page-numbers.current { background: var(--inv); color: var(--inv-fg); border-color: var(--inv); }

.st-article { padding-top: 22px; }
.st-article-head { max-width: 860px; margin: 26px auto 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.st-article-head .st-eyebrow::before { display: none; }
.st-article-head h1 { font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.35; }
.st-article-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; font-size: .88rem; font-weight: 300; color: var(--muted); }
.st-article-cover { max-width: 1100px; margin: 30px auto 0; border-radius: var(--r-xl); overflow: hidden; }
.st-article-cover img { width: 100%; height: auto; }
.st-article-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(24px, 5vw, 64px); max-width: 1100px; margin: clamp(32px, 5vw, 56px) auto 0; align-items: start; }
.st-article-side { position: sticky; top: calc(var(--header-h) + 24px); display: flex; flex-direction: column; gap: 12px; }
.st-article-side .st-eyebrow { margin-bottom: 2px; }
.st-article-ask { display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: var(--r-md); background: var(--night); color: #fff; }
.st-article-ask b { font-weight: 500; }
.st-article-ask span { font-size: .86rem; color: rgba(255, 255, 255, .72); }
.st-prose--article { max-width: none; }
.st-prose--article h2 { font-size: clamp(1.25rem, 2vw, 1.55rem); color: var(--fg); margin-top: 38px; line-height: 1.45; }
body.st .st-prose--article a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
body.st .st-prose--article a:hover { color: var(--fg); }
.st-prose--article > p:first-child { font-size: clamp(1.1rem, 1.6vw, 1.22rem); }
@media (max-width: 960px) {
  .st-article-body { grid-template-columns: 1fr; }
  .st-article-side { position: static; max-width: 360px; }
}

/* =========================================================
   v6: شريط متحرّك تحت البنر + مسافات موحّدة أوسع بين الأقسام
   ========================================================= */
:root { --sec: clamp(96px, 12vw, 168px); }
.st-home .st-section, .st-home .st-promo, .st-home .st-values, .st-home .st-support, .st-home .st-numbers,
.st-product .st-section, .st-product .st-desc, .st-product .st-results, .st-product .st-bundle, .st-product .st-request,
.st-article .st-section { margin-top: var(--sec); }
.st-home .st-marquee + .st-wrap > .st-section:first-child { margin-top: clamp(64px, 9vw, 120px); }
.st-head { margin-bottom: clamp(22px, 3vw, 34px); }

.st-marquee {
  position: relative; overflow: hidden; margin-top: clamp(28px, 4vw, 44px);
  padding: 16px 0; background: var(--night); color: #fff;
  border-block: 1px solid rgba(255, 255, 255, .06);
}
.st-marquee-row { display: flex; width: max-content; align-items: center; gap: 30px; animation: stMarquee 40s linear infinite; }
html[dir="ltr"] .st-marquee-row { animation-name: stMarqueeLtr; }
@keyframes stMarqueeLtr { to { transform: translateX(-50%); } }
.st-marquee:hover .st-marquee-row { animation-play-state: paused; }
.st-marquee span { font-size: clamp(1.05rem, 2.2vw, 1.5rem); font-weight: 500; white-space: nowrap; line-height: 1.3; }
.st-marquee span.is-en { font-weight: 800; letter-spacing: .06em; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .75); }
.st-marquee b { color: var(--accent); font-size: .95rem; }
@keyframes stMarquee { to { transform: translateX(50%); } }
@media (prefers-reduced-motion: reduce) { .st-marquee-row { animation: none; } }

/* =========================================================
   v7: درج مرقّم، بنر بعرض الشاشة، فئات/خطوات/شعار ختامي،
       الدخول والحساب واختيار طريقة الشراء، ظهور تدريجي
   ========================================================= */

/* --- البنر بمحاذاة حواف الشاشة --- */
.st-banner-wrap { padding-top: 0; }
.st-banner-wrap .st-banner { border-inline: 0; border-top: 0; border-radius: 0; }
.st-banner-wrap .st-bn { max-width: 1440px; margin-inline: auto; }
.st-banner-wrap .st-bn-strip { padding-inline: max(var(--gutter), calc((100vw - 1440px) / 2 + 22px)); }
.st-banner-wrap + .st-marquee { margin-top: 0; }

/* --- درج الجوال: مرقّم بأسلوب تحريري --- */
@media (max-width: 960px) {
  .st-menu { counter-reset: stm; padding-top: calc(var(--header-h) + 22px); gap: 0; }
  .st-menu::before {
    content: "MENU"; display: block; margin: 0 16px 10px; font-size: .7rem; font-weight: 600;
    letter-spacing: .32em; color: var(--muted); direction: ltr; text-align: end;
  }
  .st-menu > li:not(.nav-acc-item) { counter-increment: stm; border-bottom: 1px solid var(--line); }
  .st-menu > li:not(.nav-acc-item) > a {
    display: flex; min-height: 62px; border-radius: 0; padding: 0 6px; gap: 14px;
    font-size: 1.18rem; font-weight: 500; color: var(--fg);
  }
  .st-menu > li:not(.nav-acc-item) > a::before {
    content: counter(stm, decimal-leading-zero); flex: 0 0 34px;
    font-size: .78rem; font-weight: 600; letter-spacing: .06em; color: var(--accent); direction: ltr;
    font-variant-numeric: tabular-nums;
  }
  .st-menu > li:not(.nav-acc-item) > a::after {
    content: "←"; margin-inline-start: auto; font-size: 1rem; color: var(--muted);
    transition: transform .3s var(--ease), color .3s;
  }
  .st-en .st-menu > li:not(.nav-acc-item) > a::after { content: "→"; }
  .st-menu > li:not(.nav-acc-item) > a:hover { background: transparent; }
  .st-menu > li:not(.nav-acc-item) > a:hover::after { transform: translateX(-6px); color: var(--accent); }
  .st-menu .current-menu-item > a { background: transparent; color: var(--accent); }
  .st-menu .nav-acc-item:first-of-type { margin-top: 22px; border-top: 0; padding-top: 0; }
  .st-menu .nav-acc-item a { display: flex; min-height: 46px; font-size: .92rem; background: var(--soft); margin-bottom: 6px; }
  .st-menu::after {
    content: "Design it · Market it · Grow it"; display: block; margin-top: auto; padding: 26px 16px 0;
    font-size: .72rem; letter-spacing: .2em; color: var(--muted); direction: ltr; text-align: center;
  }
  /* دخول متتابع للعناصر */
  .st-menu > li { opacity: 0; transform: translateY(10px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
  .st-nav-open .st-menu > li { opacity: 1; transform: none; }
  .st-nav-open .st-menu > li:nth-child(1) { transition-delay: .08s; }
  .st-nav-open .st-menu > li:nth-child(2) { transition-delay: .12s; }
  .st-nav-open .st-menu > li:nth-child(3) { transition-delay: .16s; }
  .st-nav-open .st-menu > li:nth-child(4) { transition-delay: .2s; }
  .st-nav-open .st-menu > li:nth-child(5) { transition-delay: .24s; }
  .st-nav-open .st-menu > li:nth-child(6) { transition-delay: .28s; }
  .st-nav-open .st-menu > li:nth-child(n+7) { transition-delay: .32s; }
}

/* --- ظهور تدريجي عند التمرير --- */
.st-js .st-reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.st-js .st-reveal.is-in { opacity: 1; transform: none; }

/* --- تصفّح حسب الفئة --- */
.st-home .st-cats { margin-top: clamp(64px, 9vw, 120px); }
.st-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.st-cat {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; min-height: clamp(230px, 24vw, 300px);
  padding: clamp(20px, 2.4vw, 28px); border-radius: var(--r-xl);
  background: var(--card); border: 1px solid var(--line); color: var(--fg);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s;
}
.st-cat:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: transparent; }
.st-cat.is-a { background: var(--night); color: #fff; border-color: var(--night); }
.st-cat.is-b { background: #e9ecff; border-color: #e9ecff; color: #10142e; }
.st-cat.is-c { background: #eaf6ef; border-color: #eaf6ef; color: #0f2a1c; }
[data-theme="dark"] .st-cat.is-b { background: #171a2e; border-color: #23284a; color: #e3e6ff; }
[data-theme="dark"] .st-cat.is-c { background: #13211a; border-color: #1f3529; color: #dcf3e5; }
.st-cat-n { font-size: .8rem; font-weight: 600; letter-spacing: .1em; opacity: .6; }
.st-cat-word {
  position: absolute; z-index: -1; bottom: -.18em; inset-inline-start: -.04em;
  font-size: clamp(4.4rem, 9vw, 7.6rem); font-weight: 800; line-height: 1; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1px currentColor; opacity: .16;
  transition: transform .8s var(--ease), opacity .5s;
}
.st-cat:hover .st-cat-word { transform: translateX(-12px); opacity: .28; }
.st-cat-body { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.st-cat-body b { font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 500; color: inherit; }
.st-cat-body small { font-size: .9rem; font-weight: 300; line-height: 1.8; opacity: .78; max-width: 32ch; }
.st-cat-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
.st-cat-foot em { font-style: normal; font-size: .8rem; padding: 4px 12px; border-radius: 999px; background: rgba(127, 127, 127, .14); }
.st-cat-foot i {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--night); color: #fff; font-style: normal; transition: transform .4s var(--ease);
}
.st-cat.is-a .st-cat-foot i { background: var(--accent); color: #fff; }
.st-cat.is-b .st-cat-foot i, .st-cat.is-c .st-cat-foot i { background: var(--night); color: #fff; }
.st-cat:hover .st-cat-foot i { transform: rotate(45deg); }
.st-en .st-cat-foot i { transform: scaleX(-1); }
@media (max-width: 860px) {
  .st-cats { grid-template-columns: 1fr; }
  .st-cat { min-height: 190px; }
}

/* --- كيف نعمل --- */
.st-home .st-how { margin-top: var(--sec); }
.st-how-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: clamp(22px, 3vw, 34px); }
.st-how-head h2 { font-size: clamp(1.4rem, 3vw, 2.2rem); max-width: 22ch; }
.st-how-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: sth; border-top: 1px solid var(--line); }
.st-how-list li {
  counter-increment: sth; position: relative; padding: 26px 22px 6px 0;
  display: flex; flex-direction: column; gap: 8px;
}
.st-how-list li + li { border-inline-start: 1px solid var(--line); padding-inline-start: 22px; }
.st-how-list li::before {
  content: counter(sth, decimal-leading-zero); direction: ltr; text-align: start;
  font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 700; line-height: 1; letter-spacing: -.03em;
  color: transparent; -webkit-text-stroke: 1.2px var(--fg); margin-bottom: 10px;
}
.st-how-list li:hover::before { color: var(--accent); -webkit-text-stroke-color: var(--accent); }
.st-how-list b { font-size: 1.12rem; font-weight: 500; color: var(--fg); }
.st-how-list p { font-size: .9rem; font-weight: 300; color: var(--muted); line-height: 1.85; }
@media (max-width: 860px) {
  .st-how-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-how-list li:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
  .st-how-list li:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 520px) {
  .st-how-list { grid-template-columns: 1fr; }
  .st-how-list li, .st-how-list li + li { border-inline-start: 0; padding-inline-start: 0; padding-bottom: 20px; }
  .st-how-list li + li { border-top: 1px solid var(--line); }
}

/* --- شعار ختامي بعرض الشاشة (بأسلوب قو سكيل) --- */
.st-manifesto { margin-top: var(--sec); position: relative; overflow: hidden; background: var(--bg-2); padding-bottom: clamp(56px, 8vw, 110px); }
.st-manifesto-band { background: var(--night); color: #fff; transform: rotate(-2deg); margin: 34px -4% 0; overflow: hidden; }
.st-manifesto-row {
  display: flex; width: max-content; align-items: center; gap: 28px; padding: 18px 28px 18px 0;
  animation: stManifesto 40s linear infinite;
}
.st-manifesto-row span { font-size: clamp(1.4rem, 3.4vw, 2.6rem); font-weight: 800; letter-spacing: .02em; white-space: nowrap; line-height: 1.1; }
.st-manifesto-row span:nth-of-type(2n) { color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .8); }
.st-manifesto-row b { color: var(--accent); font-size: 1.2rem; }
.st-manifesto-in { position: relative; text-align: center; padding-top: clamp(56px, 8vw, 104px); display: flex; flex-direction: column; align-items: center; gap: 18px; }
.st-manifesto h2 { font-size: clamp(2.4rem, 8vw, 6.4rem); font-weight: 600; line-height: 1.12; letter-spacing: -.01em; }
.st-manifesto h2 em { font-style: normal; color: var(--accent); }
.st-manifesto p { max-width: 560px; font-size: clamp(1rem, 1.5vw, 1.15rem); font-weight: 300; color: var(--muted); line-height: 1.9; }
.st-manifesto-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }
body.home .st-footer { margin-top: 0; }
@keyframes stManifesto { to { transform: translateX(50%); } }
@keyframes stManifestoLtr { to { transform: translateX(-50%); } }
html[dir="ltr"] .st-manifesto-row { animation-name: stManifestoLtr; }
@media (prefers-reduced-motion: reduce) {
  .st-manifesto-row { animation: none; }
  .st-js .st-reveal { opacity: 1; transform: none; }
  .st-menu > li { opacity: 1 !important; transform: none !important; }
}

/* --- صفحة الدخول / إنشاء حساب --- */
.st-auth { padding: clamp(22px, 4vw, 48px) 0 0; }
.st-auth-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: clamp(16px, 3vw, 32px); align-items: stretch; }
.st-auth-art {
  position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-xl);
  background: var(--night); color: #fff; padding: clamp(26px, 4vw, 48px);
  display: flex; flex-direction: column; justify-content: flex-end; min-height: 520px;
}
.st-auth-mark {
  position: absolute; top: -.12em; inset-inline-end: -.06em; z-index: -1; direction: ltr;
  font-size: clamp(6rem, 14vw, 12rem); font-weight: 800; line-height: 1; letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .2);
}
.st-auth-pulse { position: absolute; inset: 30% 0 auto; width: 100%; height: 34%; z-index: -1; }
.st-auth-pulse path { fill: none; stroke: var(--accent); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: stPulseDraw 2.6s var(--ease) .2s forwards; filter: drop-shadow(0 0 6px rgba(242, 106, 43, .7)); }
.st-auth-art-copy h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.4rem); margin: 10px 0 18px; }
.st-auth-perks { display: grid; gap: 10px; counter-reset: stp; }
.st-auth-perks li { counter-increment: stp; display: flex; gap: 12px; align-items: center; font-weight: 300; color: rgba(255, 255, 255, .8); }
.st-auth-perks li::before { content: counter(stp, decimal-leading-zero); direction: ltr; font-size: .74rem; font-weight: 600; color: var(--accent); min-width: 22px; }
.st-auth-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(22px, 3.4vw, 36px); display: flex; flex-direction: column; gap: 16px;
}
.st-auth-guest {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--fg);
  border: 1px dashed var(--accent); transition: background .25s;
}
.st-auth-guest span { display: flex; flex-direction: column; font-size: .82rem; font-weight: 300; color: var(--muted); }
.st-auth-guest b { font-size: .98rem; font-weight: 500; color: var(--fg); }
.st-auth-guest i { font-style: normal; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: #fff; flex: 0 0 auto; }
.st-auth-guest:hover { background: var(--card-2); }
.st-auth-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 5px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); }
.st-auth-tabs button { min-height: 42px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-weight: 500; cursor: pointer; transition: background .25s, color .25s; }
.st-auth-tabs button[aria-selected="true"] { background: var(--inv); color: var(--inv-fg); }
.st-auth-title { font-size: clamp(1.4rem, 2.6vw, 1.8rem); }
.st-auth-form { position: relative; display: flex; flex-direction: column; gap: 14px; }
.st-auth-form[hidden] { display: none; }
.st-auth-form .st-field > span { font-size: .86rem; font-weight: 500; color: var(--fg); }
.st-auth-sub { font-size: .92rem; font-weight: 300; color: var(--muted); }
.st-auth-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .88rem; }
.st-auth-row a { color: var(--accent); }
.st-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.st-check input { width: 18px; height: 18px; accent-color: var(--accent); }
.st-btn--dark { background: var(--inv); color: var(--inv-fg); }
.st-btn--dark:hover { background: var(--accent); color: #fff; }
.st-btn--block { width: 100%; --h: 52px; font-size: 1rem; }
.st-auth-switch { text-align: center; font-size: .9rem; color: var(--muted); }
.st-auth-switch a { color: var(--fg); font-weight: 500; border-bottom: 1px solid var(--accent); }
.st-auth-note { font-size: .78rem; color: var(--muted); text-align: center; }
.st-auth-note a { text-decoration: underline; }
.st-auth-or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .8rem; }
.st-auth-or::before, .st-auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.st-alert.is-ok { background: var(--ok-soft); color: var(--ok); }
.st-alert.is-err { background: var(--err-soft); color: var(--err); }
.st-alert { margin-bottom: 0; font-size: .9rem; }
.st-trap { position: absolute !important; top: 0; inset-inline-start: 0; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; clip-path: inset(50%); }
@media (max-width: 860px) {
  .st-auth-grid { grid-template-columns: 1fr; }
  .st-auth-art { order: 2; min-height: 0; padding-top: 120px; }
}

/* --- الدفع: كيف تحب تكمل طلبك؟ --- */
.st-acct-choice {
  margin-bottom: 22px; padding: clamp(16px, 2.4vw, 22px); border-radius: var(--r-lg);
  background: var(--card); border: 1px solid var(--line);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center;
}
.st-acct-choice-head { display: flex; flex-direction: column; gap: 4px; }
.st-acct-choice-head b { font-size: 1.05rem; font-weight: 500; color: var(--fg); }
.st-acct-choice-head span { font-size: .86rem; font-weight: 300; color: var(--muted); }
.st-acct-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.st-acct-opt {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center;
  min-width: 150px; padding: 12px 14px; border-radius: var(--r-md);
  border: 1.5px solid var(--line); background: var(--bg); color: var(--fg); transition: border-color .2s, background .2s, transform .2s;
}
.st-acct-opt:hover { border-color: var(--fg); transform: translateY(-2px); }
.st-acct-opt i { grid-row: 1 / 3; font-style: normal; font-size: .72rem; font-weight: 600; color: var(--accent); direction: ltr; }
.st-acct-opt b { font-size: .92rem; font-weight: 500; }
.st-acct-opt small { font-size: .74rem; color: var(--muted); font-weight: 300; }
.st-acct-opt.is-guest { background: var(--inv); color: var(--inv-fg); border-color: var(--inv); }
.st-acct-opt.is-guest small { color: inherit; opacity: .7; }
.st-acct-opt.is-guest i { color: var(--accent-2); }
@media (max-width: 860px) {
  .st-acct-choice { grid-template-columns: 1fr; }
  .st-acct-opt { min-width: 0; padding: 10px; grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .st-acct-opt i { grid-row: auto; }
}
.st .woocommerce-account-fields { margin-top: 14px; padding: 14px 16px; border-radius: var(--r-md); background: var(--bg-2); border: 1px dashed var(--line-2); }
.st .woocommerce-account-fields .create-account label { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; }
.st .woocommerce-account-fields input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); }

/* --- حسابي (ووكومرس) --- */
.st .woocommerce-account .woocommerce, .st.woocommerce-account .st-page-body > .woocommerce { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(16px, 3vw, 32px); align-items: start; }
.st .woocommerce-MyAccount-navigation ul { display: grid; gap: 4px; padding: 10px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); counter-reset: sta; }
.st .woocommerce-MyAccount-navigation li { counter-increment: sta; }
.st .woocommerce-MyAccount-navigation a { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px; border-radius: 12px; font-size: .92rem; color: var(--text); transition: background .2s; }
.st .woocommerce-MyAccount-navigation a::before { content: counter(sta, decimal-leading-zero); font-size: .7rem; font-weight: 600; color: var(--accent); direction: ltr; }
.st .woocommerce-MyAccount-navigation a:hover { background: var(--soft); }
.st .woocommerce-MyAccount-navigation .is-active a { background: var(--inv); color: var(--inv-fg); }
.st .woocommerce-MyAccount-content { padding: clamp(18px, 3vw, 30px); border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); min-width: 0; }
.st .woocommerce-MyAccount-content p { margin-bottom: 12px; }
.st .woocommerce-MyAccount-content a:not(.button) { color: var(--accent); }
.st .woocommerce-MyAccount-content table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.st .woocommerce-MyAccount-content :is(th, td) { padding: 12px 8px; border-bottom: 1px solid var(--line); text-align: start; }
.st .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions .button { min-height: 36px; padding: 0 14px; font-size: .82rem; }
.st .woocommerce-MyAccount-content form .form-row { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.st .woocommerce-MyAccount-content fieldset { border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; margin: 18px 0; }
@media (max-width: 860px) {
  .st.woocommerce-account .st-page-body > .woocommerce { grid-template-columns: 1fr; }
  .st .woocommerce-MyAccount-navigation ul { display: flex; overflow-x: auto; scrollbar-width: none; }
  .st .woocommerce-MyAccount-navigation a { white-space: nowrap; }
}
@media (max-width: 760px) {
  .st .woocommerce-orders-table thead { display: none; }
  .st .woocommerce-orders-table tr { display: grid; grid-template-columns: 1fr 1fr; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .st .woocommerce-orders-table td { border: 0 !important; padding: 4px 0 !important; }
  .st .woocommerce-orders-table td::before { content: attr(data-title) ": "; color: var(--muted); font-size: .8rem; }
}

/* --- 404 --- */
.st-404 { padding: clamp(48px, 8vw, 110px) 0 0; }
.st-404-in { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.st-404-n { font-size: clamp(6rem, 20vw, 14rem); font-weight: 800; line-height: .9; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px var(--fg); }
.st-404 h1 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
.st-404 p { color: var(--muted); font-weight: 300; }
.st-404-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.st-404-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.st-404-links a { display: inline-flex; min-height: 40px; align-items: center; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-size: .9rem; }
.st-404-links a:hover { border-color: var(--fg); }

/* --- دخول المشتركين --- */
.st-students {
  display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 16px;
  border-radius: 999px; background: var(--inv); color: var(--inv-fg); font-size: .84rem; font-weight: 500; white-space: nowrap;
  transition: background .25s, color .25s;
}
.st-students:hover { background: var(--accent); color: #fff; }
@media (max-width: 1180px) { .st-students span { display: none; } .st-students { width: 42px; padding: 0; justify-content: center; } }
@media (max-width: 960px) { .st-students { display: none; } }
.st-menu .nav-acc-students a { background: var(--inv) !important; color: var(--inv-fg) !important; }
.st-pd-students { margin-top: 10px; border-color: var(--fg) !important; }
.st-auth-sub--students { padding: 12px 14px; border-radius: var(--r-md); background: var(--bg-2); border: 1px solid var(--line); line-height: 1.8; }
[data-theme="dark"] .st-cat.is-a { border-color: var(--line-2); background: #0f0f13; }

/* ---------- منهج الباقة (دروس مقفلة بعناوين تسويقية) ---------- */
.st-curr { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); margin-top: clamp(48px, 7vw, 88px); padding-top: clamp(36px, 5vw, 56px); border-top: 1px solid var(--line); }
.st-curr-side { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; display: flex; flex-direction: column; gap: 12px; }
.st-curr-side h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.5; }
.st-curr-lead { font-weight: var(--w-text); line-height: 1.9; color: var(--text); margin: 0; }
.st-curr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 10px; margin: 6px 0 8px; padding: 0; list-style: none; }
.st-curr-stats li { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--r-md); background: var(--card); border: 1px solid var(--line); }
.st-curr-stats strong { font-size: 1.5rem; font-weight: 500; color: var(--fg); line-height: 1.2; }
.st-curr-stats span { font-size: .78rem; font-weight: 300; color: var(--muted); }
.st-curr-side .st-btn { margin-top: 4px; }

.st-curr-list { display: grid; gap: 14px; align-content: start; }
.st-curr-topic { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); overflow: hidden; transition: border-color .2s; }
.st-curr-topic[open] { border-color: var(--line-2); }
.st-curr-topic > summary { display: flex; align-items: center; gap: 16px; padding: 18px 20px; cursor: pointer; list-style: none; }
.st-curr-topic > summary::-webkit-details-marker { display: none; }
.st-curr-no { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--inv); color: var(--inv-fg); font-weight: 500; font-size: 1rem; }
.st-curr-ttl { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.st-curr-ttl strong { font-weight: var(--w-head); font-size: 1.08rem; color: var(--fg); line-height: 1.6; }
.st-curr-ttl em, .st-curr-lt em { font-style: normal; font-weight: 300; font-size: .88rem; line-height: 1.8; color: var(--muted); }
.st-curr-cnt { flex: 0 0 auto; font-size: .78rem; font-weight: 400; color: var(--accent); padding: 5px 12px; border-radius: 999px; background: var(--accent-soft); white-space: nowrap; }
.st-curr-chev { flex: 0 0 auto; width: 10px; height: 10px; border-inline-end: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .25s var(--ease); margin-inline-start: 4px; }
.st-curr-topic[open] .st-curr-chev { transform: rotate(-135deg); }

.st-curr-lessons { margin: 0; padding: 0 12px 12px; list-style: none; display: grid; gap: 6px; border-top: 1px solid var(--line); padding-top: 12px; }
.st-curr-lesson { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--card-2); border: 1px solid transparent; }
.st-curr-lesson:hover { border-color: var(--line-2); }
.st-curr-lock { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--bg-2); color: var(--muted); }
.st-curr-lt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-curr-lt strong { font-weight: 500; font-size: .98rem; color: var(--fg); line-height: 1.7; }
.st-curr-tag { flex: 0 0 auto; font-size: .74rem; font-weight: 400; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.st-curr-lesson.is-ready .st-curr-tag { background: var(--ok-soft); color: var(--ok); }
.st-curr-lesson.is-soon .st-curr-tag { background: var(--bg-2); color: var(--muted); }
.st-curr-lesson.is-soon .st-curr-lt strong { color: var(--text); }

@media (max-width: 860px) {
  .st-curr { grid-template-columns: 1fr; }
  .st-curr-side { position: static; }
}
@media (max-width: 560px) {
  .st-curr-topic > summary { display: grid; grid-template-columns: 40px minmax(0, 1fr) 14px; gap: 8px 12px; align-items: start; padding: 14px; }
  .st-curr-no { grid-row: 1 / 3; }
  .st-curr-ttl { grid-column: 2; }
  .st-curr-chev { grid-column: 3; grid-row: 1; margin: 10px 0 0; }
  .st-curr-cnt { grid-column: 2; justify-self: start; }
  .st-curr-lesson { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 4px 10px; align-items: start; padding: 12px 10px; }
  .st-curr-lock { width: 30px; height: 30px; grid-row: 1 / 3; }
  .st-curr-lt { grid-column: 2; }
  .st-curr-tag { grid-column: 2; justify-self: start; margin-top: 2px; }
}

/* ---------- صفحة الباقة: أقسام بصرية بدل جدار النص ---------- */
.st-subnav {
  position: sticky; top: var(--header-h); z-index: 40;
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin-top: clamp(28px, 4vw, 48px); padding: 10px 0;
  background: var(--header-bg-2); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.st-subnav::-webkit-scrollbar { display: none; }
.st-subnav a { flex: 0 0 auto; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--text); font-size: .88rem; font-weight: 400; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; }
.st-subnav a:hover { background: var(--inv); color: var(--inv-fg); border-color: var(--inv); }
.st-ov, .st-blk, .st-curr { scroll-margin-top: calc(var(--header-h) + 64px); }

.st-ov { margin-top: clamp(32px, 5vw, 56px); display: grid; gap: 12px; }
.st-ov-text { max-width: 860px; font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 2.05; font-weight: 400; color: var(--fg); }
.st-ov-text p { margin: 0 0 12px; }
.st-ov-text p:last-child { margin-bottom: 0; color: var(--text); font-weight: var(--w-text); font-size: .94em; }

.st-blk { margin-top: clamp(44px, 6vw, 80px); }
.st-blk-head { display: grid; gap: 6px; margin-bottom: clamp(18px, 2.6vw, 28px); }
.st-blk-head h2 { font-size: clamp(1.45rem, 2.6vw, 2rem); line-height: 1.5; }

.st-feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.st-feat { display: flex; align-items: flex-start; gap: 14px; padding: 20px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); transition: border-color .2s, transform .25s var(--ease); }
.st-feat:hover { border-color: var(--line-2); transform: translateY(-2px); }
.st-feat-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.st-feat p { margin: 0; font-weight: 400; line-height: 1.85; color: var(--fg); }

.st-aud { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.st-aud-card { position: relative; padding: 24px 22px 22px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); display: grid; gap: 14px; align-content: start; }
.st-aud-no { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--inv); color: var(--inv-fg); font-weight: 500; }
.st-aud-card p { margin: 0; font-weight: 400; line-height: 1.9; color: var(--fg); }

.st-flow { list-style: none; margin: 0; padding: 0; counter-reset: stS; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.st-flow li { counter-increment: stS; position: relative; padding: 26px 22px 22px; border-radius: var(--r-lg); background: var(--night); color: #fff; }
[data-theme="dark"] .st-flow li { background: var(--card); border: 1px solid var(--line); }
.st-flow li::before { content: counter(stS, decimal-leading-zero); display: block; margin-bottom: 12px; font-size: 1.6rem; font-weight: 500; color: var(--accent-2); letter-spacing: .04em; }
.st-flow li p { margin: 0; line-height: 1.9; font-weight: 300; color: inherit; }

.st-cta { margin-top: clamp(44px, 6vw, 80px); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: clamp(22px, 3vw, 34px); border-radius: var(--r-xl); background: var(--night); color: #fff; }
[data-theme="dark"] .st-cta { background: var(--card); border: 1px solid var(--line); }
.st-cta-text { display: grid; gap: 6px; }
.st-cta-text strong { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 500; }
.st-cta-text span { color: rgba(255, 255, 255, .72); font-weight: 300; }
.st-cta-buy { display: flex; align-items: center; gap: 18px; }
.st-cta .st-price { color: #fff; font-size: 1.5rem; }
@media (max-width: 560px) {
  .st-cta { flex-direction: column; align-items: stretch; text-align: center; }
  .st-cta-buy { justify-content: space-between; }
  .st-feat, .st-aud-card, .st-flow li { padding: 18px; }
}