/* ==========================================================
   premium.css — القوالب الفخمة (Extra + S-Tech الحصري)
   ميزات 100%: هيرو سينمائي، شبكة بينتو، ظهور عند التمرير،
   تكبير عند المرور، معاينة سريعة، عدّاد عروض، شارات متحركة،
   عرض ثلاثي الأبعاد. القالبان يتشاركان الميزات، ويختلفان بالباليتة.
   ========================================================== */

/* ---------- الباليتة: Extra (بنفسجي ملكي فاخر) ---------- */
body.t-extra {
  --color-primary: #6D28D9 !important;
  --t-accent: #A78BFA !important;
  --color-primary-soft: rgba(109, 40, 217, 0.12);
  --lux-grad: linear-gradient(135deg, #6D28D9 0%, #A78BFA 55%, #6D28D9 100%);
  --lux-hero-overlay: linear-gradient(180deg, rgba(30,27,46,0) 0%, rgba(30,27,46,0.55) 60%, rgba(30,27,46,0.9) 100%);
}

/* ---------- الباليتة: S-Tech (أزرق ديناميكي + تركوازي + أبيض) ---------- */
/* !important يضمن أن لون القالب يغلب أي باليتة محفوظة قديمة (يمنع وميض البنفسجي) */
body.t-stech {
  --color-primary: #1E63C4 !important;
  --t-accent: #06B6D4 !important;
  --color-bg: #F4F8FE !important;
  --color-primary-soft: rgba(30, 99, 196, 0.10);
  --lux-grad: linear-gradient(125deg, #1E63C4 0%, #2E7BE0 45%, #06B6D4 105%);
  --lux-hero-overlay: linear-gradient(180deg, rgba(18,35,59,0) 0%, rgba(18,35,59,0.28) 55%, rgba(18,35,59,0.72) 100%);
}
/* حركة تدرّج أزرق→تركوازي ديناميكية راقية */
body.t-stech .hero, body.t-stech .hero-carousel {
  background-size: 200% 200%;
  animation: stechFlow 12s ease-in-out infinite;
}
@keyframes stechFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* النص أبيض فوق أي خلفية زرقاء غامقة (تباين مقروء) */
body.t-stech .hero, body.t-stech .hero *,
body.t-stech .hero__text, body.t-stech .hero__text * { color: #ffffff; }
body.t-stech .card__add { color: #ffffff; }
body.t-stech .badge-chip--sale { background: var(--t-accent); color: #ffffff; }
body.t-stech .badge-chip--hot { background: var(--color-primary); color: #ffffff; }

/* الشريط السفلي: زجاجي شفاف (مش أسود) — المحتوى يبين من ورا لما تسحب */
body.t-stech .bottom-nav, body.t-stech .tabbar, body.t-stech nav.bottom-nav {
  background: rgba(255,255,255,0.62) !important;
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border-top: 1px solid rgba(30,99,196,0.16) !important;
}
body.t-stech .bottom-nav .nav-item { color: #7C93AD; }
body.t-stech .bottom-nav a.active, body.t-stech .tabbar a.active,
body.t-stech .bottom-nav .active, body.t-stech .tabbar .active { color: var(--color-primary); }

/* لمسات فخمة على الأزرار والبطاقات */
body.t-stech .card__add { background: linear-gradient(120deg, #1E63C4, #2E7BE0); }
body.t-stech .card__add:hover { background: linear-gradient(120deg, #2E7BE0, #06B6D4); }
body.t-stech .card:hover { box-shadow: 0 18px 40px -20px rgba(30,99,196,0.5); }

/* ==========================================================
   الميزات المشتركة للقالبين الفخمين
   ========================================================== */

/* ---------- (1) هيرو سينمائي ---------- */
body.t-extra .hero, body.t-stech .hero {
  aspect-ratio: 16 / 10;
  min-height: 210px;
  background: var(--lux-grad);
  border-radius: 22px;
  margin: 14px 16px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 22px 50px -20px var(--color-primary);
}
body.t-extra .hero::after, body.t-stech .hero::after {
  content: ""; position: absolute; inset: 0; background: var(--lux-hero-overlay); z-index: 1;
}
body.t-extra .hero img, body.t-stech .hero img {
  opacity: 0.9; transform: scale(1.04);
  animation: heroKen 14s ease-in-out infinite alternate;
}
@keyframes heroKen { from { transform: scale(1.04); } to { transform: scale(1.16); } }
body.t-extra .hero__text, body.t-stech .hero__text {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 20px; font-size: 26px; font-weight: 800; color: #fff;
  text-shadow: 0 3px 18px rgba(0,0,0,0.4);
  animation: heroRise 0.9s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes heroRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- (2) شبكة بينتو (Bento) للمنتجات ---------- */
body.t-extra .grid, body.t-stech .grid {
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: dense;
  gap: 14px;
}
/* كل رابع منتج يمتد عريضاً (تأثير بينتو) */
body.t-extra .grid > .card:nth-child(7n+1),
body.t-stech .grid > .card:nth-child(7n+1) {
  grid-column: span 2;
}
body.t-extra .grid > .card:nth-child(7n+1) .card__img,
body.t-stech .grid > .card:nth-child(7n+1) .card__img {
  aspect-ratio: 16 / 9;
}

/* ---------- (3) بطاقات فخمة + (4) تكبير عند المرور ---------- */
body.t-extra .card, body.t-stech .card {
  border-radius: 18px;
  border: 1px solid var(--color-primary-soft);
  overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
  position: relative;
}
body.t-extra .card:hover, body.t-stech .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -18px var(--color-primary);
}
body.t-extra .card__img, body.t-stech .card__img { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
body.t-extra .card:hover .card__img, body.t-stech .card:hover .card__img { transform: scale(1.09); }

/* ---------- (5) معاينة سريعة (Quick View) ---------- */
.card__quickview {
  position: absolute; left: 50%; bottom: 12px; transform: translate(-50%, 14px);
  background: rgba(255,255,255,0.92); color: #111; font-weight: 700; font-size: 12px;
  padding: 8px 16px; border-radius: 999px; opacity: 0; pointer-events: none;
  transition: opacity .3s ease, transform .3s ease; z-index: 4; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18); backdrop-filter: blur(4px);
}
body.t-extra .card:hover .card__quickview, body.t-stech .card:hover .card__quickview {
  opacity: 1; transform: translate(-50%, 0); pointer-events: auto;
}
/* تظهر فقط بالقوالب الفخمة */
.card__quickview { display: none; }
body.t-extra .card__quickview, body.t-stech .card__quickview { display: none !important; }

/* ---------- (6) شارات متحركة ---------- */
body.t-extra .badge-chip--sale, body.t-stech .badge-chip--sale {
  background: var(--lux-grad); background-size: 200% 200%;
  color: #fff; animation: badgePulse 2.4s ease infinite; border: none;
}
body.t-extra .badge-chip--hot, body.t-stech .badge-chip--hot { animation: badgeBob 1.8s ease-in-out infinite; }
@keyframes badgePulse { 0%,100% { background-position: 0% 50%; box-shadow: 0 0 0 0 var(--color-primary-soft); } 50% { background-position: 100% 50%; box-shadow: 0 0 0 6px transparent; } }
@keyframes badgeBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

/* ---------- (7) ظهور عند التمرير (Scroll Reveal) ---------- */
body.t-extra .reveal, body.t-stech .reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
}
body.t-extra .reveal.revealed, body.t-stech .reveal.revealed { opacity: 1; transform: translateY(0); }

/* ---------- (8) العرض المميّز ثلاثي الأبعاد (Featured 3D tilt) ---------- */
body.t-extra .carousel, body.t-stech .carousel { perspective: 1100px; }
body.t-extra .carousel-card, body.t-stech .carousel-card {
  border-radius: 16px; transition: transform .3s ease, box-shadow .3s ease;
  transform-style: preserve-3d; will-change: transform;
}
body.t-extra .carousel-card:hover, body.t-stech .carousel-card:hover {
  box-shadow: 0 24px 44px -20px var(--color-primary);
}
body.t-extra .carousel-card__discount, body.t-stech .carousel-card__discount {
  background: var(--lux-grad); color: #fff;
}

/* ---------- عدّاد العروض (Countdown) ---------- */
.lux-countdown {
  display: none; align-items: center; gap: 8px; justify-content: center;
  margin: 10px 16px; padding: 10px 14px; border-radius: 14px;
  background: var(--color-primary-soft); color: var(--color-primary);
  font-weight: 800; font-size: 14px; letter-spacing: .5px;
}
body.t-extra .lux-countdown, body.t-stech .lux-countdown { display: flex; }
.lux-countdown__box {
  background: var(--color-primary); color: #fff; border-radius: 8px;
  padding: 4px 8px; min-width: 34px; text-align: center; font-variant-numeric: tabular-nums;
}

/* لمسات نهائية على الأزرار والأسعار بالقوالب الفخمة */
body.t-extra .card__add, body.t-stech .card__add {
  background: var(--lux-grad); background-size: 180% 180%; color: #fff; border: none;
  transition: background-position .4s ease, transform .2s ease;
}
body.t-extra .card__add:active, body.t-stech .card__add:active { transform: scale(.9); }
body.t-stech .card__add:hover { background-position: 100% 50%; }

/* ============================================================
   🎨 طبقة التناسق البصري (لوحة فنية متكاملة) — لقالبك + Extra
   دمج الأقسام + خلفية موحّدة ناعمة + ظلال متناسقة + كاروسيل مندمج
   ============================================================ */

/* 1) خلفية موحّدة متدرّجة ناعمة (بدل الأبيض/الرمادي الحاد) — تعطي إحساس لوحة وحدة */
body.t-stech {
  --canvas-top: #FFFFFF;
  --canvas-bottom: #F7FAFF;
  --surface-tint: rgba(30,99,196,0.035);
  --elev-shadow: 0 6px 24px -10px rgba(30,99,196,0.28);
  --elev-shadow-sm: 0 3px 12px -6px rgba(30,99,196,0.22);
  --hairline: rgba(30,99,196,0.10);
}
body.t-extra {
  --canvas-top: #FFFFFF;
  --canvas-bottom: #FAF7FF;
  --surface-tint: rgba(109,40,217,0.04);
  --elev-shadow: 0 6px 24px -10px rgba(109,40,217,0.30);
  --elev-shadow-sm: 0 3px 12px -6px rgba(109,40,217,0.22);
  --hairline: rgba(109,40,217,0.10);
}
body.t-stech, body.t-extra {
  background: linear-gradient(180deg, var(--canvas-top) 0%, var(--canvas-bottom) 100%) !important;
  background-attachment: fixed !important;
}
body.t-stech #appScroll, body.t-extra #appScroll { background: transparent !important; }

/* 2) الكاروسيل مندمج (بلا حواف حادة، ظل ناعم يربطه بالخلفية + تدرّج سفلي يذوّبه بالمحتوى) */
body.t-stech .hero-carousel, body.t-extra .hero-carousel,
body.t-stech .hero, body.t-extra .hero {
  border-radius: 0 0 26px 26px !important;
  box-shadow: 0 12px 30px -14px rgba(0,0,0,0.35) !important;
  position: relative;
}
body.t-stech .hero-carousel::after, body.t-extra .hero-carousel::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px;
  background: linear-gradient(180deg, transparent, var(--canvas-top));
  opacity: .5; pointer-events: none; border-radius: 0 0 26px 26px;
}

/* 3) البطاقات والأقسام — نظام ارتفاع (elevation) موحّد ناعم */
body.t-stech .card, body.t-extra .card,
body.t-stech .vendor-chip__logo, body.t-extra .vendor-chip__logo,
body.t-stech .cat-cell, body.t-extra .cat-cell {
  background: #fff !important;
  border: 1px solid var(--hairline) !important;
  box-shadow: var(--elev-shadow-sm) !important;
  border-radius: 18px !important;
}
body.t-stech .card:active, body.t-extra .card:active { transform: scale(.985); }

/* 4) عناوين الأقسام — متناسقة مع شريط لوني رفيع */
body.t-stech .section-title, body.t-extra .section-title,
body.t-stech .vendor-bar__title, body.t-extra .vendor-bar__title {
  position: relative; padding-right: 14px !important; font-weight: 800 !important;
}
body.t-stech .section-title::before, body.t-extra .section-title::before,
body.t-stech .vendor-bar__title::before, body.t-extra .vendor-bar__title::before {
  content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 18px; border-radius: 2px; background: var(--lux-grad, var(--color-primary));
}

/* 5) الشريط العلوي الصلب — أنحف وأنعم (بلا أبيض عريض حاد) */
body.t-stech .topbar.solid, body.t-extra .topbar.solid {
  background: rgba(255,255,255,0.82) !important;
  backdrop-filter: blur(16px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
  border-bottom: 1px solid var(--hairline) !important;
  box-shadow: 0 2px 16px -8px rgba(0,0,0,0.15) !important;
}

/* 6) التصنيفات + شريط الـvendors — خلفية شفافة تندمج بالكانفس (مش صناديق منفصلة) */
body.t-stech .cat-grid, body.t-extra .cat-grid,
body.t-stech .vendor-bar, body.t-extra .vendor-bar { background: transparent !important; }
body.t-stech .cat-cell__ph, body.t-extra .cat-cell__ph {
  background: linear-gradient(135deg, var(--color-primary-soft), transparent) !important;
}

/* 7) الأقسام المميّزة + مقترح لك — بطاقة ناعمة تجمعهم (دمج) */
body.t-stech #recommendedSection, body.t-extra #recommendedSection,
body.t-stech .cat-section, body.t-extra .cat-section {
  background: rgba(255,255,255,0.55) !important;
  border: 1px solid var(--hairline);
  border-radius: 22px; margin: 14px 12px; padding: 12px 12px 4px;
  box-shadow: var(--elev-shadow-sm);
}

/* 8) الشريط السفلي — زجاجي متناسق */
body.t-stech .bottom-nav, body.t-extra .bottom-nav {
  background: rgba(255,255,255,0.9) !important;
  backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important;
  border-top: 1px solid var(--hairline) !important;
}

/* ============================================================
   🌙 الوضع الليلي (Dark Mode) — يحترم القوالب (يقلب الخلفيات فقط)
   ============================================================ */
html.dark-mode body,
html.dark-mode body.t-stech, html.dark-mode body.t-extra {
  --color-bg: #0f1419 !important;
  --canvas-top: #0f1419 !important;
  --canvas-bottom: #151b22 !important;
  --color-surface: #1a222c !important;
  --color-surface-2: #232d38 !important;
  --color-text: #e8edf2 !important;
  --color-muted: #9aa7b4 !important;
  --color-border: #2a3540 !important;
  --hairline: rgba(255,255,255,0.07) !important;
  --surface-tint: rgba(255,255,255,0.02) !important;
  background: linear-gradient(180deg, #0f1419, #151b22) !important;
}
html.dark-mode body.t-stech .card, html.dark-mode body.t-extra .card,
html.dark-mode .card, html.dark-mode .sheet, html.dark-mode .cat-cell,
html.dark-mode .vendor-chip__logo {
  background: #1a222c !important;
  border-color: #2a3540 !important;
}
html.dark-mode .topbar.solid,
html.dark-mode body.t-stech .topbar.solid, html.dark-mode body.t-extra .topbar.solid {
  background: rgba(20,26,33,0.9) !important;
  border-bottom-color: #2a3540 !important;
}
html.dark-mode .bottom-nav,
html.dark-mode body.t-stech .bottom-nav, html.dark-mode body.t-extra .bottom-nav {
  background: rgba(20,26,33,0.95) !important;
  border-top-color: #2a3540 !important;
}
html.dark-mode .search-row, html.dark-mode .search-suggest,
html.dark-mode #recommendedSection, html.dark-mode .cat-section {
  background: #1a222c !important;
}
html.dark-mode input, html.dark-mode textarea, html.dark-mode select {
  background: #232d38 !important; color: #e8edf2 !important; border-color: #2a3540 !important;
}

/* ============================================================
   📱 استجابة شاملة: تابلت + شاشات كبيرة + landscape
   ============================================================ */
/* تابلت وشاشات كبيرة: شبكة منتجات أوسع + محتوى موسّط */
@media (min-width: 700px) {
  #appScroll, .search-suggest { max-width: 900px; margin-left: auto; margin-right: auto; }
  .grid { grid-template-columns: repeat(3, 1fr) !important; }
  .bottom-nav { max-width: 900px; left: 50% !important; transform: translateX(-50%); border-radius: 18px 18px 0 0; }
  .sheet { max-width: 640px; left: 50% !important; right: auto !important; transform: translateX(-50%) translateY(100%); }
  .sheet.open { transform: translateX(-50%) translateY(0); }
  .hero, .hero-carousel { max-height: 46vh; }
}
@media (min-width: 1100px) {
  .grid { grid-template-columns: repeat(4, 1fr) !important; }
}
/* landscape على الموبايل: كاروسيل أقصر + شبكة أوسع */
@media (max-height: 500px) and (orientation: landscape) {
  .hero, .hero-carousel { max-height: 70vh; aspect-ratio: auto; height: 200px; }
  .grid { grid-template-columns: repeat(3, 1fr) !important; }
}
/* خطوط كبيرة (accessibility) — ما تكسر التصميم */
@media (min-resolution: 2dppx) { body { text-rendering: optimizeLegibility; } }

/* ============================================================
   ✨ رونق + تلميع + تدرّج (Gloss & Depth) — قالبك + Extra
   يعطي حيوية وعمق بدل الألوان الباهتة المسطّحة
   ============================================================ */
/* الأزرار الرئيسية — تدرّج + لمعان زجاجي + عمق */
body.t-stech .btn:not(.btn--ghost):not(.btn--danger),
body.t-extra .btn:not(.btn--ghost):not(.btn--danger),
body.t-stech .topbar__cart, body.t-extra .topbar__cart {
  background: var(--lux-grad) !important;
  background-size: 180% 180% !important;
  border: none !important;
  box-shadow: 0 8px 22px -8px var(--color-primary), inset 0 1px 0 rgba(255,255,255,0.35) !important;
  position: relative; overflow: hidden;
  animation: gradShift 6s ease infinite;
}
/* لمعة تمرّ فوق الزر (shine sweep) */
body.t-stech .btn:not(.btn--ghost):not(.btn--danger)::after,
body.t-extra .btn:not(.btn--ghost):not(.btn--danger)::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-20deg); animation: btnShine 4.5s ease-in-out infinite;
}
@keyframes gradShift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes btnShine { 0%{left:-60%} 40%,100%{left:130%} }

/* السلة بالشريط السفلي — دائرة لامعة بعمق */
body.t-stech #cartTab .nav-item__icon, body.t-extra #cartTab .nav-item__icon {
  background: var(--lux-grad) !important;
  background-size: 160% 160% !important;
  box-shadow: 0 6px 18px -4px var(--color-primary), inset 0 1px 0 rgba(255,255,255,0.4) !important;
  animation: gradShift 5s ease infinite;
}

/* شرائح الأسعار — لون صلب قوي واضح */
body.t-stech .card__price, body.t-extra .card__price,
body.t-stech .pd__price, body.t-extra .pd__price {
  color: var(--color-primary) !important;
  -webkit-text-fill-color: var(--color-primary) !important;
  background: none !important;
  font-weight: 800 !important;
}
body.t-stech .badge, body.t-extra .badge,
body.t-stech .card__badge, body.t-extra .card__badge,
body.t-stech .stock-badge, body.t-extra .stock-badge {
  background: var(--lux-grad) !important; color: #fff !important;
  box-shadow: 0 3px 10px -3px var(--color-primary), inset 0 1px 0 rgba(255,255,255,0.3) !important;
}

/* لوجوات الـvendors + دوائر التصنيفات — حلقة متدرّجة لامعة */
body.t-stech .vendor-chip__logo, body.t-extra .vendor-chip__logo {
  background: #fff !important;
  box-shadow: 0 4px 14px -4px var(--color-primary), inset 0 0 0 2px transparent !important;
  border: 2px solid transparent !important;
  background-image: linear-gradient(#fff,#fff), var(--lux-grad) !important;
  background-origin: border-box !important; background-clip: padding-box, border-box !important;
}

/* عناوين الأقسام + الشريط اللوني — تدرّج بدل لون مسطّح */
body.t-stech .section-title::before, body.t-extra .section-title::before,
body.t-stech .vendor-bar__title::before, body.t-extra .vendor-bar__title::before {
  background: var(--lux-grad) !important;
}

/* التصنيف المختار (chip active) — تدرّج لامع */
body.t-stech .filter-chip.active, body.t-extra .filter-chip.active,
body.t-stech .cat-cell.active, body.t-extra .cat-cell.active {
  background: var(--lux-grad) !important; color: #fff !important;
  box-shadow: 0 4px 14px -4px var(--color-primary) !important;
}

/* أيقونة السلة/البحث بالشريط الشفاف — عمق خفيف */
body.t-stech .topbar:not(.solid) .topbar__icon-btn, body.t-extra .topbar:not(.solid) .topbar__icon-btn {
  background: rgba(255,255,255,0.18) !important; backdrop-filter: blur(6px);
}

/* ============================================================
   نقطة 6: animation عند ضغط التصنيف (يحسّس المستخدم إنه ضغط)
   ============================================================ */
.cat-cell { transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .2s; cursor: pointer; }
.cat-cell:active { transform: scale(.88); }
.cat-cell.active { transform: scale(1.06); }
.cat-cell.active .cat-cell__img, .cat-cell.active .cat-cell__ph {
  box-shadow: 0 0 0 3px var(--color-primary), 0 6px 18px -6px var(--color-primary);
}
/* نبضة عند الاختيار */
@keyframes catTapPulse { 0%{transform:scale(1)} 40%{transform:scale(.86)} 100%{transform:scale(1.06)} }
.cat-cell.just-tapped { animation: catTapPulse .35s ease; }

/* ============================================================
   نقطة 8 + 4: خلفية بيضا لامعة + تدرّج وتلميع ورونق (t-stech + t-extra)
   ============================================================ */
/* خلفية بيضا لامعة نظيفة (بدل الرمادي الباهت) مع لمسة عمق ناعمة */
body.t-stech, body.t-extra {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(30,99,196,0.06), transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, #FBFDFF 55%, #F6FAFF 100%) !important;
  background-attachment: fixed !important;
}
body.t-extra {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(109,40,217,0.06), transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, #FCFBFF 55%, #F8F6FF 100%) !important;
}

/* الأزرار الأساسية: تدرّج + تلميع (gloss) + عمق — رونق مش باهت */
body.t-stech .btn:not(.btn--ghost):not(.btn--danger),
body.t-extra .btn:not(.btn--ghost):not(.btn--danger),
body.t-stech .vendor-follow-btn, body.t-extra .vendor-follow-btn {
  background: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 70%, #000 12%)) !important;
  box-shadow: 0 6px 18px -6px var(--color-primary), inset 0 1px 0 rgba(255,255,255,.35) !important;
  position: relative; overflow: hidden;
}
/* لمعة تمرّ على الأزرار */
body.t-stech .btn:not(.btn--ghost)::after, body.t-extra .btn:not(.btn--ghost)::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg); animation: btnGloss 3.5s ease-in-out infinite;
}
@keyframes btnGloss { 0%,70%{left:-60%} 100%{left:130%} }

/* السعر البارز — لون صلب قوي (بدون شفافية تخفيه) */
body.t-stech .card__price, body.t-extra .card__price,
body.t-stech .pd__price, body.t-extra .pd__price {
  color: var(--color-primary) !important;
  -webkit-text-fill-color: var(--color-primary) !important;
  background: none !important;
  font-weight: 800 !important;
}
/* السلة البارزة بالشريط السفلي: تدرّج + لمعان */
body.t-stech #cartTab .nav-item__icon, body.t-extra #cartTab .nav-item__icon {
  background: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 65%, #000 15%)) !important;
  box-shadow: 0 4px 14px -3px var(--color-primary), inset 0 1px 0 rgba(255,255,255,.4) !important;
}
/* البطاقات: عمق ناعم لامع (بدل مسطّح) */
body.t-stech .card, body.t-extra .card {
  background: linear-gradient(180deg, #fff, #fdfeff) !important;
  box-shadow: 0 4px 16px -8px rgba(30,99,196,0.22), inset 0 1px 0 rgba(255,255,255,.6) !important;
}

/* ============================================================
   إصلاحات فورية: نص الأزرار أبيض واضح + السعر واضح
   ============================================================ */
body.t-stech #addToCartBtn, body.t-extra #addToCartBtn,
body.t-stech .btn:not(.btn--ghost):not(.btn--danger),
body.t-extra .btn:not(.btn--ghost):not(.btn--danger) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
/* السعر — أبرز وأوضح */
body.t-stech .card__price, body.t-extra .card__price { font-size: 16px !important; }
body.t-stech .pd__price, body.t-extra .pd__price { font-size: 24px !important; }

/* ============================================================
   🔥 معاينة الضغط الطويل (Peek) — كبّة المنتج ترتفع مع ظلّ قوي
   ============================================================ */
.card { transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .25s; }
.card--peek {
  transform: scale(1.06) translateY(-6px) !important;
  box-shadow: 0 30px 60px -18px rgba(20,40,90,.55), 0 0 0 2px var(--color-primary) !important;
  z-index: 50; position: relative;
}
.card--peek::after {
  content: "اضغط للتفاصيل"; position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  background: rgba(15,22,34,.9); color: #fff; font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 999px; white-space: nowrap;
  animation: peekHint .3s ease; pointer-events: none;
}
@keyframes peekHint { from { opacity: 0; transform: translateX(-50%) translateY(6px); } to { opacity: 1; } }

/* ============================================================
   🌟🔥 تصميم عالمي قوي (أقوى من المنصات) — t-stech + t-extra
   ============================================================ */
/* بطاقات المنتج — عمق فخم + إطار متدرّج ناعم + رفعة عند اللمس */
body.t-stech .card, body.t-extra .card {
  border-radius: 22px !important;
  background: linear-gradient(180deg, #ffffff, #fbfdff) !important;
  border: 1px solid rgba(30,99,196,.08) !important;
  box-shadow: 0 10px 30px -14px rgba(30,99,196,.30), inset 0 1px 0 rgba(255,255,255,.7) !important;
  overflow: hidden; position: relative;
}
/* خط لوني علوي رفيع فخم على البطاقة */
body.t-stech .card::before, body.t-extra .card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent, #06B6D4));
  opacity: 0; transition: opacity .3s; z-index: 2;
}
body.t-stech .card:active::before, body.t-extra .card:active::before { opacity: 1; }

/* صورة المنتج — زاوية علوية دائرية فخمة */
body.t-stech .card__img, body.t-extra .card__img,
body.t-stech .card__gallery, body.t-extra .card__gallery { border-radius: 18px 18px 0 0 !important; }

/* اسم المنتج — خط أوضح وأثقل */
body.t-stech .card__name, body.t-extra .card__name { font-weight: 700 !important; letter-spacing: -.2px; }

/* زر الإضافة (+) — دائري فخم بتدرّج ولمعان وظل ملوّن */
body.t-stech .card__add, body.t-extra .card__add {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent, #2E7BE0)) !important;
  color: #fff !important; -webkit-text-fill-color: #fff !important;
  box-shadow: 0 8px 20px -6px var(--color-primary), inset 0 1px 0 rgba(255,255,255,.4) !important;
  border-radius: 14px !important; transition: transform .18s, box-shadow .25s;
}
body.t-stech .card__add:active, body.t-extra .card__add:active { transform: scale(.9); }

/* شارة "باقي X" — تدرّج ناري فخم */
body.t-stech .stock-badge, body.t-extra .stock-badge,
body.t-stech .card__stock, body.t-extra .card__stock {
  background: linear-gradient(135deg, #FF6B35, #F7931E) !important; color: #fff !important;
  box-shadow: 0 4px 12px -3px rgba(247,147,30,.6) !important; font-weight: 800 !important; border: none !important;
}

/* الهيدر العلوي — زجاجي فخم مع ظل ناعم */
/* الشريط العلوي: شفاف تماماً فوق الكاروسيل — الضبابية بس لما يصير solid بعد التمرير */
body.t-stech .topbar:not(.solid), body.t-extra .topbar:not(.solid) {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  background: transparent !important; box-shadow: none !important; border: none !important;
}
body.t-stech .topbar.solid, body.t-extra .topbar.solid { backdrop-filter: blur(20px) saturate(1.4) !important; }

/* الشريط السفلي — زجاجي فخم + السلة بارزة بتوهّج */
body.t-stech .bottom-nav, body.t-extra .bottom-nav {
  background: rgba(255,255,255,.92) !important; backdrop-filter: blur(22px) saturate(1.3) !important;
  box-shadow: 0 -8px 30px -12px rgba(30,99,196,.25) !important;
}
body.t-stech #cartTab .nav-item__icon, body.t-extra #cartTab .nav-item__icon {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent, #2E7BE0)) !important;
  box-shadow: 0 6px 18px -4px var(--color-primary), inset 0 1px 0 rgba(255,255,255,.5) !important;
  transform: translateY(-2px);
}

/* الكاروسيل/البانر — إطار فخم مع توهّج سفلي متدرّج */
body.t-stech .hero-carousel, body.t-extra .hero-carousel {
  border-radius: 0 0 30px 30px !important;
  box-shadow: 0 18px 44px -20px rgba(30,99,196,.5) !important;
}

/* عناوين الأقسام — خط جانبي متدرّج فخم + خط أثقل */
body.t-stech .section-title, body.t-extra .section-title {
  font-weight: 800 !important; font-size: 18px !important; letter-spacing: -.3px;
}
body.t-stech .section-title::before, body.t-extra .section-title::before {
  background: linear-gradient(180deg, var(--color-primary), var(--color-accent, #06B6D4)) !important;
  width: 5px !important; border-radius: 3px !important;
}

/* التصنيفات — دائرية فخمة بإطار متدرّج عند الاختيار */
body.t-stech .cat-cell.active .cat-cell__media, body.t-extra .cat-cell.active .cat-cell__media {
  box-shadow: 0 0 0 3px var(--color-primary), 0 8px 20px -6px var(--color-primary) !important;
}
body.t-stech .cat-cell__media, body.t-extra .cat-cell__media {
  box-shadow: 0 6px 16px -8px rgba(30,99,196,.35);
}

/* ============================================================
   🎨 ألوان مقوّاة بلمعة + منظر جريء — t-stech + t-extra
   ============================================================ */
body.t-stech {
  --color-primary: #0F5BD8 !important;      /* أزرق أقوى وألمع (بلا تغميق) */
  --t-accent: #0BC5E0 !important;           /* تركوازي لامع */
  --t-metal: #94A3B8;                       /* فضّي معدني (هوية تقنية) */
  --t-success: #10B981;                     /* أخضر نجاح */
  --t-urgent: #F97316;                      /* برتقالي عاجل */
  --lux-grad: linear-gradient(125deg, #0F5BD8 0%, #2E7BE0 45%, #0BC5E0 105%) !important;
  --glow: rgba(15,91,216,.45);
}
body.t-extra {
  --color-primary: #6D28D9 !important;
  --t-accent: #C026D3 !important;           /* وردي بنفسجي حيوي */
  --t-metal: #F59E0B;                       /* ذهبي فاخر (بريميوم) */
  --t-success: #10B981;
  --t-urgent: #F59E0B;
  --lux-grad: linear-gradient(135deg, #6D28D9 0%, #C026D3 55%, #F59E0B 115%) !important;
  --glow: rgba(109,40,217,.45);
}

/* ---------- منظر جريء: مسافات أوسع + حواف أكبر + خطوط أقوى ---------- */
body.t-stech .section-title, body.t-extra .section-title {
  font-size: 20px !important; font-weight: 800 !important; margin-top: 26px !important; margin-bottom: 14px !important;
}
body.t-stech .grid, body.t-extra .grid { gap: 14px !important; padding-left: 14px !important; padding-right: 14px !important; }
body.t-stech .card, body.t-extra .card { border-radius: 24px !important; }
body.t-stech .card__img, body.t-extra .card__img, body.t-stech .card__gallery, body.t-extra .card__gallery { border-radius: 20px 20px 0 0 !important; }

/* ظلال ملوّنة (بلون القالب مش أسود) — أفخم بكتير */
body.t-stech .card, body.t-extra .card {
  box-shadow: 0 12px 32px -16px var(--glow), 0 2px 8px -4px var(--glow), inset 0 1px 0 rgba(255,255,255,.75) !important;
}
/* حد متدرّج فخم على البطاقة عند اللمس */
body.t-stech .card:active, body.t-extra .card:active {
  box-shadow: 0 16px 40px -14px var(--glow), 0 0 0 2px var(--color-primary) !important;
}

/* الأزرار — تدرّج قوي + توهّج ملوّن */
body.t-stech .btn:not(.btn--ghost):not(.btn--danger), body.t-extra .btn:not(.btn--ghost):not(.btn--danger) {
  background: var(--lux-grad) !important;
  box-shadow: 0 12px 28px -10px var(--glow), inset 0 1px 0 rgba(255,255,255,.45) !important;
  border-radius: 16px !important; font-size: 15.5px !important; padding: 15px !important;
}
/* زر (+) بالبطاقة — أكبر وأفخم بتوهّج */
body.t-stech .card__add, body.t-extra .card__add {
  background: var(--lux-grad) !important;
  box-shadow: 0 8px 22px -6px var(--glow), inset 0 1px 0 rgba(255,255,255,.5) !important;
  border-radius: 16px !important;
}
/* السلة بالشريط السفلي — توهّج قوي */
body.t-stech #cartTab .nav-item__icon, body.t-extra #cartTab .nav-item__icon {
  background: var(--lux-grad) !important;
  box-shadow: 0 10px 26px -6px var(--glow), inset 0 1px 0 rgba(255,255,255,.5) !important;
}
/* شارة "باقي X" — تدرّج عاجل قوي */
body.t-stech .stock-badge, body.t-extra .stock-badge, body.t-stech .card__stock, body.t-extra .card__stock {
  background: linear-gradient(135deg, var(--t-urgent), #FFB020) !important;
  box-shadow: 0 6px 16px -4px rgba(249,115,22,.6) !important;
}
/* شارة الخصم */
body.t-stech .card__discount, body.t-extra .card__discount, body.t-stech .discount-badge, body.t-extra .discount-badge {
  background: linear-gradient(135deg, #EF4444, #F97316) !important; box-shadow: 0 6px 16px -4px rgba(239,68,68,.55) !important;
}
/* حد فضّي/ذهبي معدني رفيع على التصنيفات (هوية) */
body.t-stech .cat-cell__media, body.t-extra .cat-cell__media { border: 1.5px solid var(--t-metal) !important; }
body.t-stech .cat-cell.active .cat-cell__media, body.t-extra .cat-cell.active .cat-cell__media {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px var(--color-primary), 0 10px 24px -6px var(--glow) !important;
}

/* ============================================================
   ✨ حركات عالمية متقدّمة — t-stech + t-extra
   ============================================================ */
/* 1) Stagger reveal — المنتجات تظهر متتالية */
body.t-stech .card.reveal-in, body.t-extra .card.reveal-in { animation: cardReveal .55s cubic-bezier(.16,1,.3,1) both; }
@keyframes cardReveal { 0%{opacity:0; transform:translateY(22px) scale(.96)} 100%{opacity:1; transform:translateY(0) scale(1)} }

/* 2) Ken Burns — صورة المنتج zoom سينمائي ناعم */
body.t-stech .card__img img, body.t-extra .card__img img,
body.t-stech .card__gallery img, body.t-extra .card__gallery img { transition: transform 6s ease-out; }
body.t-stech .card:hover .card__img img, body.t-extra .card:hover .card__img img { transform: scale(1.08); }

/* 3) Skeleton shimmer فخم */
body.t-stech .skeleton, body.t-extra .skeleton {
  background: linear-gradient(90deg, #eef4fc 25%, #f8fbff 50%, #eef4fc 75%) !important;
  background-size: 200% 100% !important; animation: shimmerLux 1.4s infinite !important;
}
@keyframes shimmerLux { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* 4) Sticky category bar — التصنيفات تلتصق فوق عند التمرير */
body.t-stech #categoriesRow.cats-stuck, body.t-extra #categoriesRow.cats-stuck {
  position: sticky; top: calc(56px + env(safe-area-inset-top,0px)); z-index: 30;
  background: rgba(255,255,255,.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 6px 20px -12px var(--glow); padding-top: 8px; padding-bottom: 8px; border-radius: 0 0 18px 18px;
}

/* 5) Success animation — عند الإضافة للسلة */
.add-success {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 9998;
  width: 92px; height: 92px; border-radius: 50%; background: var(--t-success, #10B981);
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 46px;
  box-shadow: 0 20px 50px -12px rgba(16,185,129,.6); animation: successPop .75s cubic-bezier(.16,1,.3,1) forwards; pointer-events: none;
}
@keyframes successPop { 0%{opacity:0; transform:translate(-50%,-50%) scale(.3)} 45%{opacity:1; transform:translate(-50%,-50%) scale(1.08)} 75%{transform:translate(-50%,-50%) scale(1)} 100%{opacity:0; transform:translate(-50%,-50%) scale(.92)} }

/* 6) Badge count animation — رقم السلة يقفز */
.cart-badge.bump, .nav-item__badge.bump { animation: badgeBump .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes badgeBump { 0%{transform:scale(1)} 45%{transform:scale(1.5)} 100%{transform:scale(1)} }

/* 7) Micro-interactions — كل زر له نبضة */
body.t-stech .btn:active, body.t-extra .btn:active { transform: scale(.97); }
body.t-stech .card__add:active, body.t-extra .card__add:active { transform: scale(.86); }

/* 8) Scroll progress — مؤشّر تقدّم علوي رفيع */
#scrollProgress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 9997;
  background: var(--lux-grad, linear-gradient(90deg,#0F5BD8,#0BC5E0)); transition: width .1s linear; pointer-events: none;
}

/* 9) Sticky "أضف للسلة" بصفحة المنتج */
body.t-stech .pd-sticky-add, body.t-extra .pd-sticky-add {
  position: sticky; bottom: 0; z-index: 20; padding: 10px 0 6px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.96) 30%);
}

/* 10) Gradient mesh خفيف متحرك بالخلفية */
body.t-stech::before, body.t-extra::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background:
    radial-gradient(ellipse 50% 40% at 12% 8%, var(--color-primary-soft), transparent 60%),
    radial-gradient(ellipse 45% 35% at 88% 22%, rgba(11,197,224,.07), transparent 60%);
  animation: meshFlow 18s ease-in-out infinite alternate;
}
@keyframes meshFlow { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(-3%,2%) scale(1.08)} }

/* 11) Parallax carousel */
body.t-stech .hero-carousel img, body.t-extra .hero-carousel img { will-change: transform; }