/* =========================================================
   ZAURA — هوية المتجر على سلة (ثيم ملاك ANGEL)
   v2 — الصق هذا الملف كامل في: تصميم المتجر ← CSS مخصص (بدل القديم)
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600&family=Readex+Pro:wght@400;500;600;700&family=Jost:wght@400;500&display=swap');

/* ---------- 1. ألوان الهوية (فاتح) ---------- */
:root {
  --z-charcoal: #16130F;
  --z-sand: #F3EBDD;
  --z-gold: #C9A84C;
  --z-gold-light: #E2C987;
  --z-gold-press: #B39340;
  --z-smoke: #6B5A48;

  --z-bg: #F3EBDD;
  --z-surface: #FBF7F0;
  --z-surface-raised: #EADFCC;
  --z-line: #DDD0BA;
  --z-line-strong: #6B5A48;
  --z-ink: #16130F;
  --z-ink-muted: #6B5A48;
  --z-gold-text: #7A5D17;
  --z-on-gold: #16130F;
  --z-focus: #7A5D17;
  --z-shadow: 0 10px 30px rgba(22, 19, 15, .08);

  --z-font-display: 'Readex Pro', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --z-font-body: 'IBM Plex Sans Arabic', 'Readex Pro', system-ui, sans-serif;
  --z-font-latin: 'Jost', 'Readex Pro', system-ui, sans-serif;
  --z-radius-md: 12px;
  --z-radius-lg: 20px;

  /* متغيرات ثيم ملاك */
  --font-main: 'IBM Plex Sans Arabic';
  --font-secondary: 'Readex Pro';
  --color-primary: #C9A84C;
  --color-primary-dark: #B39340;
  --color-primary-light: #E2C987;
  --color-primary-reverse: #16130F;
  --text-btn: #16130F;
  --bg-color: #F3EBDD;
  --header-bg: #FBF7F0;
  --menu-bg: #FBF7F0;
  --footer-bg: #16130F;
  --dark-bg-main: #16130F;
  --dark-grey: #3A3129;
  --dark-text-main: #F3EBDD;
  --dark-text-sec: #A39A8C;

  /* متغيرات أقسام الصفحة الرئيسية (الإضافات المخصصة) */
  --brand-primary: var(--z-gold-text);
  --brand-primary-light: var(--z-gold-light);
  --brand-primary-pale: var(--z-surface-raised);
  --brand-accent: var(--z-ink);
  --brand-text: var(--z-ink);
  --brand-text-light: var(--z-ink-muted);
  --brand-bg: var(--z-bg);
  --brand-border: var(--z-line);
}

/* ---------- 2. ألوان الهوية (داكن — الأساسي) ---------- */
.dark, .color-mode-dark.dark, html.dark body {
  --z-bg: #16130F;
  --z-surface: #1F1A15;
  --z-surface-raised: #2A231C;
  --z-line: #3A3129;
  --z-line-strong: #8A7A68;
  --z-ink: #F3EBDD;
  --z-ink-muted: #A39A8C;
  --z-gold-text: #C9A84C;
  --z-focus: #E2C987;
  --z-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --bg-color: #16130F;
  --header-bg: #1F1A15;
  --menu-bg: #1F1A15;
}

/* ---------- 3. الخطوط والأساس ---------- */
body {
  font-family: var(--z-font-body) !important;
  background-color: var(--z-bg) !important;
  color: var(--z-ink);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .s-block__title, .s-block__title h2, .footer-title, .s-product-card-content-title, .product-single h1 {
  font-family: var(--z-font-display) !important;
}
::selection { background: var(--z-gold); color: var(--z-on-gold); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--z-focus) !important;
  outline-offset: 2px;
}
.app-inner { background-color: var(--z-bg); }

/* ---------- 4. الشريط الإعلاني والهيدر ---------- */
.angel-ad, .angel-ad__slider { background: var(--z-charcoal) !important; }
.angel-ad, .angel-ad * { color: var(--z-sand) !important; font-family: var(--z-font-body) !important; }
.angel-ad .angel-ad__icon { color: var(--z-gold) !important; }

.store-header .header-inner, .main-nav-container, .store-header .nav-header {
  background-color: var(--z-surface) !important;
  border-bottom: 1px solid var(--z-line);
}
.store-header, .store-header .header-btn, .store-header .header-btn i, .store-header .main-menu > li > a {
  color: var(--z-ink) !important;
}
.store-header .main-menu > li > a:hover, .store-header .main-menu > li.active > a { color: var(--z-gold-text) !important; }
.header-cart .s-cart-summary-count, .s-cart-summary-count {
  background: var(--z-gold) !important; color: var(--z-on-gold) !important;
}

/* القائمة الجانبية للجوال */
.mobile-menu, .mm-spn, .mm-ocd__content { background: var(--z-surface) !important; color: var(--z-ink) !important; }

/* ---------- 5. الأزرار ---------- */
.btn--primary, .s-button-primary, .s-button-solid.s-button-primary, .btn--add-to-cart,
.s-add-product-button-main .s-button-element, salla-add-product-button .s-button-primary {
  background-color: var(--z-gold) !important;
  border-color: var(--z-gold) !important;
  color: var(--z-on-gold) !important;
  border-radius: var(--z-radius-md) !important;
  font-family: var(--z-font-body) !important;
  font-weight: 600 !important;
  transition: background-color .15s ease;
}
.btn--primary:hover, .s-button-primary:hover, .btn--add-to-cart:hover { background-color: var(--z-gold-light) !important; border-color: var(--z-gold-light) !important; }
.btn--primary:active, .s-button-primary:active, .btn--add-to-cart:active { background-color: var(--z-gold-press) !important; }
.btn--outline, .btn--outline-primary, .s-button-outline, .s-button-gray-outline {
  background: transparent !important;
  border: 1px solid var(--z-line-strong) !important;
  color: var(--z-ink) !important;
  border-radius: var(--z-radius-md) !important;
}
.btn--outline:hover, .btn--outline-primary:hover, .s-button-outline:hover { border-color: var(--z-gold-text) !important; color: var(--z-gold-text) !important; }
.s-button-disabled, .btn[disabled] { opacity: .4 !important; }

/* ---------- 6. بطاقة المنتج ---------- */
.s-product-card-entry {
  background: var(--z-surface) !important;
  border: 1px solid var(--z-line) !important;
  border-radius: var(--z-radius-lg) !important;
  overflow: hidden;
  transition: box-shadow .2s ease;
}
.s-product-card-entry:hover { box-shadow: var(--z-shadow) !important; }
.s-product-card-image { background: var(--z-sand) !important; }
.s-product-card-content-title, .s-product-card-content-title a {
  color: var(--z-ink) !important;
  font-weight: 500 !important;
}
.s-product-card-content-subtitle, .s-product-card-category, .s-product-card-brand { color: var(--z-ink-muted) !important; }
.s-product-card-price, .s-product-card-sale-price h4, .s-product-card-price h4, .price {
  color: var(--z-gold-text) !important;
  font-family: var(--z-font-display) !important;
  font-weight: 700 !important;
}
.s-product-card-sale-price span, .s-product-card-price del, .s-product-card-sale-price del {
  color: var(--z-ink-muted) !important; font-weight: 400 !important;
}
.s-product-card-promotion-title, .s-product-card-discount {
  background: var(--z-gold) !important; color: var(--z-on-gold) !important;
  border-radius: 999px !important; font-family: var(--z-font-body) !important; font-weight: 500 !important;
}
.s-product-card-wishlist-btn { color: var(--z-ink-muted) !important; }
.s-product-card-wishlist-added { color: var(--z-gold-text) !important; }

/* ---------- 7. عناوين الأقسام ---------- */
.s-block__title h2, .s-block__title, .angel-products-title { color: var(--z-ink) !important; font-weight: 600 !important; }
.s-block__display-all { color: var(--z-gold-text) !important; }
.s-block__title_separator { background: var(--z-gold) !important; }

/* ---------- 8. صفحة المنتج ---------- */
.product-single { color: var(--z-ink); }
.product-single .price, .product-single .total-price, .sticky-product-bar__price { color: var(--z-gold-text) !important; }
.sticky-product-bar { background: var(--z-surface) !important; border-top: 1px solid var(--z-line) !important; }
.btn--quantity, .s-quantity-input-input, .s-quantity-input-button { border-color: var(--z-line-strong) !important; color: var(--z-ink) !important; }
.s-comments-item { background: var(--z-surface) !important; border: 1px solid var(--z-line) !important; border-radius: var(--z-radius-lg) !important; }
.s-comments-item-stars, .s-rating-stars-wrapper .sicon-star2, .sicon-star-fill { color: var(--z-gold) !important; }

/* ---------- 9. الفوتر (فحمي في الثيمين) ---------- */
.store-footer, .store-footer__inner, .store-footer .footer-container {
  background-color: var(--z-charcoal) !important;
  color: #A39A8C !important;
  border-color: #3A3129 !important;
}
.store-footer .footer-title, .store-footer h3, .store-footer h4 { color: var(--z-sand) !important; }
.store-footer a, .store-footer .footer-list a, .store-footer p, .store-footer span { color: #A39A8C !important; }
.store-footer a:hover { color: var(--z-gold) !important; }
.store-footer .footer-social a, .store-footer .social-links a {
  border: 1px solid #8A7A68 !important; border-radius: 999px !important; color: var(--z-gold) !important; background: transparent !important;
}
.store-footer .footer-social a:hover, .store-footer .social-links a:hover { background: var(--z-gold) !important; color: var(--z-on-gold) !important; }
.store-footer .s-contacts-icon {
  background: transparent !important; border: 1px solid #8A7A68 !important; color: var(--z-gold) !important; fill: var(--z-gold) !important;
}
.store-footer .s-contacts-icon svg, .store-footer .s-contacts-icon svg * { fill: var(--z-gold) !important; }
.store-footer .s-contacts-title { color: var(--z-sand) !important; }
.footer-bottom, .copyrights { border-top: 1px solid #3A3129 !important; color: #A39A8C !important; }

/* ---------- 10. النوافذ والإشعارات ---------- */
.s-modal-body { background: var(--z-surface) !important; color: var(--z-ink) !important; border-radius: var(--z-radius-lg) !important; }
.s-add-product-toast, salla-toast .s-toast { font-family: var(--z-font-body) !important; }

/* زر واتساب العائم بلون الهوية */
#wa-angel a { background: var(--z-charcoal) !important; border: 1px solid var(--z-gold) !important; }
#wa-angel a i { color: var(--z-gold) !important; }

/* =========================================================
   ZAURA — إضافة الجوال والتحويل (v2)
   تحسينات الجوال + عناصر تحفّز الشراء. كل الألوان من متغيرات الهوية أعلاه.
   ========================================================= */

/* ---------- 11. أساسيات عامة ---------- */
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
body { overflow-x: hidden; }
.s-product-card-sale-price h4, .product-single .total-price, .price .total-price { color: var(--z-gold-text) !important; }
.product-single .before-price { color: var(--z-ink-muted) !important; }

/* إخفاء العداد المنتهي (عدّاد خلصان يعطي انطباع إن العرض انتهى) */
.product-countdown:has(.s-count-down-ended) { display: none !important; }

/* ---------- 12. شريط الكود (بدل الشريط المتحرك) ---------- */
.zx-bar {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--z-charcoal); color: var(--z-sand);
  font: 500 13px/1.4 var(--z-font-body); padding: 8px 12px; text-align: center;
}
.zx-bar b { color: var(--z-gold); font-family: var(--z-font-latin); letter-spacing: .08em; }
.zx-copy {
  border: 1px dashed var(--z-gold); background: transparent; color: var(--z-gold);
  border-radius: 999px; padding: 3px 12px; font: 600 12px var(--z-font-body); cursor: pointer; white-space: nowrap;
}
.zx-copy.is-done { background: var(--z-gold); color: var(--z-on-gold); border-style: solid; }
html.zx-ready .angel-ad { display: none !important; }

/* ---------- 13. الهيرو ---------- */
.zx-hero { background: var(--z-bg); padding: 20px 16px 8px; width: 100%; box-sizing: border-box; align-self: stretch; }
.zx-hero__in { max-width: 1200px; margin: 0 auto; display: grid; gap: 20px; align-items: center; }
.zx-hero__media { position: relative; border-radius: var(--z-radius-lg); overflow: hidden; aspect-ratio: 4/3; background: var(--z-surface-raised); }
.zx-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zx-hero__media::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(to top, rgba(22,19,15,.55), transparent); }
.zx-hero__tag {
  position: absolute; bottom: 14px; inset-inline-start: 14px; z-index: 1;
  background: var(--z-gold); color: var(--z-on-gold); border-radius: 999px; padding: 6px 14px;
  font: 600 13px var(--z-font-body);
}
.zx-eyebrow { font: 500 11px var(--z-font-latin); letter-spacing: .3em; color: var(--z-gold-text); margin: 0 0 10px; direction: ltr; text-align: right; }
.zx-hero h2 { font: 700 clamp(28px, 8vw, 52px)/1.2 var(--z-font-display); color: var(--z-ink); margin: 0 0 10px; }
.zx-hero h2 span { color: var(--z-gold-text); }
.zx-hero p.zx-lead { font: 400 15px/1.7 var(--z-font-body); color: var(--z-ink-muted); margin: 0 0 18px; }
.zx-ctas { display: flex; gap: 10px; }
.zx-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 18px; border-radius: var(--z-radius-md);
  font: 600 15px var(--z-font-body); text-decoration: none !important; cursor: pointer; border: 1px solid transparent;
  transition: background-color .15s ease;
}
.zx-btn--gold { background: var(--z-gold); color: var(--z-on-gold) !important; }
.zx-btn--gold:active { background: var(--z-gold-press); }
.zx-btn--ghost { background: transparent; border-color: var(--z-line-strong); color: var(--z-ink) !important; }

/* بلاطات الأقسام */
.zx-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.zx-cat {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px;
  background: var(--z-surface); border: 1px solid var(--z-line); border-radius: var(--z-radius-md);
  color: var(--z-ink) !important; text-decoration: none !important; font: 600 13px var(--z-font-body);
}
.zx-cat svg { width: 26px; height: 26px; stroke: var(--z-gold-text); }
.zx-cat small { font: 400 11px var(--z-font-body); color: var(--z-ink-muted); }

/* ---------- 14. شريط الثقة ---------- */
.zx-trust {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 14px 16px 6px;
  width: 100%; max-width: 1200px; min-width: 0; box-sizing: border-box; align-self: stretch; margin: 0 auto; scroll-snap-type: x mandatory;
}
.zx-trust::-webkit-scrollbar { display: none; }
.zx-trust__i {
  flex: 0 0 auto; scroll-snap-align: start; display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border: 1px solid var(--z-line); border-radius: 999px; background: var(--z-surface);
  font: 500 12.5px var(--z-font-body); color: var(--z-ink); white-space: nowrap; text-decoration: none !important;
}
.zx-trust__i svg { width: 18px; height: 18px; stroke: var(--z-gold-text); flex-shrink: 0; }

/* ---------- 15. صفحة المنتج: التوفير + صندوق الثقة ---------- */
.zx-save {
  display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 4px;
  background: var(--z-surface-raised); color: var(--z-gold-text); border-radius: 999px;
  padding: 4px 12px; font: 600 12.5px var(--z-font-body);
}
.zx-pbox {
  margin: 14px 0; border: 1px solid var(--z-line); border-radius: var(--z-radius-md);
  background: var(--z-surface); overflow: hidden;
}
.zx-pbox__row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; font: 500 13.5px/1.5 var(--z-font-body); color: var(--z-ink); }
.zx-pbox__row + .zx-pbox__row { border-top: 1px solid var(--z-line); }
.zx-pbox__row svg { width: 20px; height: 20px; stroke: var(--z-gold-text); flex-shrink: 0; }
.zx-pbox__row span { flex: 1; }
.zx-pbox__row small { display: block; color: var(--z-ink-muted); font-weight: 400; font-size: 12px; }
.zx-pbox__row a { color: var(--z-gold-text) !important; text-decoration: underline; }

/* ---------- 16. شريط الشراء الثابت (الرئيسية — جوال) ---------- */
.zx-sticky {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--z-surface); border-top: 1px solid var(--z-line); box-shadow: 0 -8px 24px rgba(22,19,15,.12);
  transform: translateY(110%); transition: transform .25s ease;
}
.zx-sticky.is-on { transform: none; }
.zx-sticky img { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; background: var(--z-sand); }
.zx-sticky__t { flex: 1; min-width: 0; font: 600 14px/1.3 var(--z-font-display); color: var(--z-ink); }
.zx-sticky__t small { display: block; font: 500 12.5px var(--z-font-body); color: var(--z-gold-text); }
.zx-sticky__t small s { color: var(--z-ink-muted); margin-inline-start: 6px; font-weight: 400; }
.zx-sticky .zx-btn { flex: 0 0 auto; min-height: 44px; padding: 0 20px; }
body.zx-sticky-on #wa-angel { bottom: 84px !important; transition: bottom .25s ease; }
@media (min-width: 768px) { .zx-sticky { display: none; } }

/* ---------- 17. نسخة الكود — تنبيه صغير ---------- */
.zx-toast {
  position: fixed; left: 50%; bottom: 100px; transform: translate(-50%, 20px); opacity: 0; z-index: 60;
  background: var(--z-charcoal); color: var(--z-sand); border: 1px solid var(--z-gold);
  padding: 10px 18px; border-radius: 999px; font: 500 13px var(--z-font-body); transition: .25s ease; pointer-events: none;
}
.zx-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 18. الجوال ---------- */
@media (max-width: 767px) {
  /* الهيدر: شعار أصغر ومساحة أقل */
  .store-header .navbar-brand img { height: 44px !important; width: auto !important; }
  .store-header .header-container { padding-top: 6px; padding-bottom: 6px; }
  #mainnav { height: auto !important; }

  /* الفوتر */
  .store-footer .logo-footer img { height: 56px !important; }
  .store-footer .footer-container { text-align: center; gap: 24px; padding-top: 32px; }
  .store-footer .footer-list a { padding: 6px 0; }
  .store-footer { padding-bottom: 80px; }

  /* صفحة المنتج */
  .product-single h1 { font-size: 22px !important; line-height: 1.4 !important; }
  .product-single .price .total-price { font-size: 26px !important; }
  .sticky-product-bar { box-shadow: 0 -8px 24px rgba(22,19,15,.12); }
  .sticky-product-bar .s-button-element { min-height: 48px; font-size: 15px !important; }
}

@media (min-width: 768px) {
  .zx-hero { padding: 40px 24px 16px; }
  .zx-hero__in { grid-template-columns: 1fr 1fr; gap: 48px; }
  .zx-hero__media { aspect-ratio: 1/1; order: 2; }
  .zx-ctas { max-width: 420px; }
  .zx-trust { justify-content: center; }
}

/* ---------- 19. «وش يجيك في العلبة» (منتجات محددة) ---------- */
.zx-inbox {
  display: flex; gap: 14px; align-items: flex-start; margin: 12px 0 4px; padding: 14px 16px;
  border: 1.5px solid var(--z-gold); border-radius: var(--z-radius-md);
  background: linear-gradient(135deg, var(--z-surface-raised), var(--z-surface));
}
.zx-inbox__ic {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: var(--z-gold); color: var(--z-on-gold);
}
.zx-inbox__ic svg { width: 24px; height: 24px; }
.zx-inbox__tx { flex: 1; min-width: 0; }
.zx-inbox__tx strong { display: block; font: 700 16px/1.4 var(--z-font-display); color: var(--z-ink); }
.zx-inbox__tx p { margin: 4px 0 10px; font: 400 13.5px/1.7 var(--z-font-body); color: var(--z-ink-muted); }
.zx-inbox__tx p b { color: var(--z-gold-text); font-weight: 700; }
.zx-inbox__scents { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.zx-inbox__scents li { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 10px; background: var(--z-bg); border: 1px solid var(--z-line); }
.zx-inbox__scents li > svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--z-gold-text); }
.zx-inbox__scents b { display: block; font: 600 12.5px/1.3 var(--z-font-body); color: var(--z-ink); }
.zx-inbox__scents small { display: block; font: 400 10.5px/1.3 var(--z-font-body); color: var(--z-ink-muted); }
@media (min-width: 768px) { .zx-inbox__scents { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- 20. «طلبك يطلع اليوم» ---------- */
.zx-today {
  position: relative; display: flex; align-items: center; gap: 12px; margin: 12px 0 4px; padding: 12px 14px;
  border-radius: var(--z-radius-md); background: var(--z-charcoal); color: var(--z-sand); border: 1px solid var(--z-gold);
}
.zx-today > svg { width: 26px; height: 26px; flex-shrink: 0; color: var(--z-gold); }
.zx-today strong { display: block; font: 700 15px/1.4 var(--z-font-display); color: var(--z-sand); }
.zx-today small { display: block; font: 400 12.5px/1.5 var(--z-font-body); color: #A39A8C; }
.zx-today__dot {
  position: absolute; top: 10px; inset-inline-end: 12px; width: 8px; height: 8px; border-radius: 50%; background: #9DB88A;
  box-shadow: 0 0 0 0 rgba(157,184,138,.6); animation: zxPulse 1.8s ease-out infinite;
}
@keyframes zxPulse { 0% { box-shadow: 0 0 0 0 rgba(157,184,138,.6); } 100% { box-shadow: 0 0 0 10px rgba(157,184,138,0); } }
@media (prefers-reduced-motion: reduce) { .zx-today__dot { animation: none; } }
.zx-today-mini {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin: 0 0 6px;
  font: 500 12.5px var(--z-font-body); color: var(--z-gold-text);
}
.zx-today-mini svg { width: 16px; height: 16px; }
@media (min-width: 768px) { .zx-today-mini { display: none; } }

/* ---------- 21. فيديو طريقة التركيب ---------- */
.zx-video { margin: 14px 0; border: 1px solid var(--z-line); border-radius: var(--z-radius-md); background: var(--z-surface); padding: 14px; }
.zx-video__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.zx-video__ic { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--z-gold); color: var(--z-on-gold); }
.zx-video__ic svg { width: 18px; height: 18px; margin-inline-start: -2px; }
.zx-video__head strong { display: block; font: 700 16px/1.4 var(--z-font-display); color: var(--z-ink); }
.zx-video__head small { display: block; font: 400 12.5px var(--z-font-body); color: var(--z-ink-muted); }
.zx-video__frame { position: relative; width: min(100%, 340px); margin: 0 auto; aspect-ratio: 9/16; border-radius: 14px; overflow: hidden; background: var(--z-charcoal); }
.zx-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- 22. صفحة المنتج: ترتيب أوضح ---------- */
/* نخلي محتوى المنتج عمود واحد مرتب: الاسم ← السعر ← اللون ← المميزات ← الشحن ← الوصف ← التقييمات
   form يصير display:contents عشان نرتّب عناصره بدون ما نطلعها من النموذج (الطلب يشتغل عادي) */
html.zx-pdp .main-content { display: flex; flex-direction: column; }
html.zx-pdp .main-content > form.product-form { display: contents; }
html.zx-pdp .main-content > *, html.zx-pdp .main-content > form.product-form > * { order: 40; }
html.zx-pdp .main-content > salla-hook:first-child { order: 0; }
html.zx-pdp .main-content > div.flex.flex-col:not([class*="zx-"]) { order: 1; }
html.zx-pdp .main-content > .price { order: 2; }
html.zx-pdp .main-content > .zx-save { order: 3; }
html.zx-pdp .main-content > .zx-today { order: 4; }
html.zx-pdp .main-content > form.product-form > .product-options { order: 5; }
html.zx-pdp .main-content > form.product-form > .sticky-product-bar { order: 6; }
html.zx-pdp .main-content > .zx-feat,
html.zx-pdp .main-content > .zx-inbox { order: 7; }
html.zx-pdp .main-content > .product-availablity { order: 8; }
html.zx-pdp .main-content > form.product-form > salla-installment { order: 9; }
html.zx-pdp .main-content > .zx-pbox { order: 10; }
html.zx-pdp .main-content > .zx-video { order: 11; }
html.zx-pdp .main-content > .full-description { order: 12; }
html.zx-pdp .main-content > a.btn--primary { order: 13; }
html.zx-pdp .main-content > form.product-form > .is-sold,
html.zx-pdp .main-content > form.product-form > .is-remained { order: 14; }
html.zx-pdp .main-content > form.product-form > salla-gifting { order: 15; }
html.zx-pdp .main-content > form.product-form > .product-reviews { order: 16; }
.zx-hide { display: none !important; }
.zx-merge { margin-top: 0 !important; padding-top: 0 !important; }

/* السعر يتكرر داخل قسم الخيارات — نخفيه (السعر فوق يتحدث لحاله) */
html.zx-pdp .product-options > section.total { display: none !important; }

/* ---------- 23. اختيار اللون ---------- */
html.zx-pdp .product-options { margin: 14px 0 4px; padding: 0 !important; background: transparent !important; border: 0 !important; }
html.zx-pdp .s-product-options-option-label { display: flex !important; align-items: baseline; gap: 8px; margin-bottom: 10px !important; }
html.zx-pdp .s-product-options-option-label b { font: 700 15px var(--z-font-display) !important; color: var(--z-ink) !important; }
html.zx-pdp .s-product-options-option-label b span { display: none; }
html.zx-pdp .zx-picked { font: 500 14px var(--z-font-body); color: var(--z-gold-text); }
html.zx-pdp .zx-picked:not(:empty)::before { content: ": "; color: var(--z-ink-muted); }

html.zx-pdp .s-product-options-thumbnails-wrapper {
  display: grid !important; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; gap: 10px !important;
}
/* كل لون = بطاقة: صورة صغيرة + الاسم، والبطاقة كلها تنضغط */
html.zx-pdp .s-product-options-thumbnails-wrapper > div {
  position: relative; display: flex !important; align-items: center; gap: 10px; margin: 0 !important; padding: 8px 10px 8px 8px;
  border: 2px solid var(--z-line); border-radius: 14px; background: var(--z-surface); transition: border-color .15s ease, background-color .15s ease;
}
html.zx-pdp .s-product-options-thumbnails-wrapper > div:has(input:checked) { border-color: var(--z-gold); background: var(--z-surface-raised); }
html.zx-pdp .s-product-options-thumbnails-wrapper div input[type=radio] { position: absolute !important; opacity: 0 !important; pointer-events: none !important; }
html.zx-pdp .s-product-options-thumbnails-wrapper div input[type=radio] + label {
  position: static !important; display: block !important; flex-shrink: 0; width: 56px !important; height: 56px !important; margin: 0 !important;
  border-radius: 10px !important; overflow: hidden; background: var(--z-sand) !important; border: 0 !important; box-shadow: none !important; cursor: pointer;
}
html.zx-pdp .s-product-options-thumbnails-wrapper div input[type=radio] + label::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
html.zx-pdp .s-product-options-thumbnails-wrapper div label::before { display: none !important; }
html.zx-pdp .s-product-options-thumbnails-wrapper div input[type=radio] + label img {
  width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 0 !important; opacity: 1 !important;
}
html.zx-pdp .s-product-options-thumbnails-icon { display: none !important; }
html.zx-pdp .s-product-options-thumbnails-wrapper div p {
  margin: 0 !important; text-align: start; font: 500 14px/1.4 var(--z-font-body) !important; color: var(--z-ink-muted) !important;
}
html.zx-pdp .s-product-options-thumbnails-wrapper div input[type=radio]:checked ~ p { color: var(--z-ink) !important; font-weight: 700 !important; }
html.zx-pdp .s-product-options-thumbnails-wrapper > div:has(input:focus-visible) { outline: 2px solid var(--z-focus); outline-offset: 2px; }
html.zx-pdp .s-product-options-option-stock-out { opacity: .5; }
@media (max-width: 767px) {
  html.zx-pdp .s-product-options-thumbnails-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ---------- 24. المميزات (مختصرة وهادية) ---------- */
.zx-feat { margin: 14px 0 4px; }
.zx-feat__hero {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--z-radius-md);
  border: 1.5px solid var(--z-gold); background: linear-gradient(135deg, var(--z-surface-raised), var(--z-surface));
}
.zx-feat__ic {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: var(--z-gold); color: var(--z-on-gold);
}
.zx-feat__hero strong { display: block; font: 700 16px/1.4 var(--z-font-display); color: var(--z-ink); }
.zx-feat__hero p { margin: 2px 0 0; font: 400 13px/1.6 var(--z-font-body); color: var(--z-ink-muted); }
.zx-feat__list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.zx-feat__list li {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px;
  background: var(--z-surface); border: 1px solid var(--z-line);
}
.zx-feat__list li svg { flex-shrink: 0; color: var(--z-gold-text); }
.zx-feat__list b { display: block; font: 600 13px/1.3 var(--z-font-body); color: var(--z-ink); }
.zx-feat__list small { display: block; font: 400 11.5px/1.4 var(--z-font-body); color: var(--z-ink-muted); }
@media (min-width: 768px) { .zx-feat__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }