/* ============================================================
   Vently — Dark Theme  |  نسخة منقّحة
   ============================================================ */

/* ─── 0) المتغيّرات ─────────────────────────────────────── */
:root, html, body {
  --color-primary-dark: #E0E0E0 !important;
  --color-add-to-cart-bg: #FFFFFF !important;   /* كان أخضر #47c25c */
  --color-add-to-cart-text: #000000 !important;
}

/* ─── 1) بؤرة الكيبورد (كانت ملغية بالكامل) ─────────────── */
html body a:focus-visible,
html body button:focus-visible {
  outline: 2px solid #FFFFFF !important;
  outline-offset: 2px !important;
}

/* ─── 2) توحيد أيقونات الهيدر ───────────────────────────── */
html body .s-cart-summary-wrapper {
  color: #F2F2F2 !important;
  background-color: transparent !important;
  border: none !important;
}

/* ─── 3) حماية الهوفر: منع الأسود على الأسود ────────────── */
html body .s-quantity-input-button:hover { fill: #FFFFFF !important; }

html body .s-slider-nav-arrow:not(:disabled):hover { border-color: #FFFFFF !important; }
html body .s-slider-nav-arrow:not(:disabled):hover svg { fill: #FFFFFF !important; }

html body .s-social-share-list a:hover svg,
html body .share-btns-list a:hover {
  fill: #FFFFFF !important;
  color: #FFFFFF !important;
}

html body .hover\:text-primary:hover { color: #FFFFFF !important; opacity: .75; }
html body .btn--wishlist:hover { color: #FFFFFF !important; }

/* تصحيح قاعدة الثيم اللي تخلي النص شفاف تماماً */
html body .custom-featured-products .s-button-primary-outline:hover,
html body .custom-featured-products .s-button-primary-outline:hover * {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
  background-color: transparent !important;
}

/* هوفرات موروثة من الثيم الفاتح (وميض أبيض) */
html body .s-accordion-head-wrapper-toggle:hover,
html body .menu-item:hover,
html body .s-user-menu-dropdown-item a:hover,
html body .s-search-product:hover,
html body .btn--rounded-gray:hover,
html body .btn--circle-gray:hover {
  background-color: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.28) !important;
  color: #F2F2F2 !important;
}

/* ─── 4) صفحة التصنيف والقوائم ──────────────────────────── */
/* قائمة الترتيب: كانت نص #F2F2F2 على خلفية بيضاء (تباين 1.12) */
html body select,
html body .form-select,
html body .s-searchable-dropdown-trigger {
  background-color: #0E0E0E !important;
  color: #F2F2F2 !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  border-radius: 4px !important;
}
html body select option {
  background-color: #0E0E0E !important;
  color: #F2F2F2 !important;
}

/* عنوان المنتج: كان rgb(31,41,55) شبه مختفي (تباين 1.43) */
html body .s-product-card-content-title,
html body .s-product-card-content-title a { color: #F2F2F2 !important; }
html body .s-product-card-content-title a:hover {
  color: #FFFFFF !important;
  opacity: .75;
}

/* خلفية صورة الكارت: كانت #F3F4F6 = الشرائط البيضاء */
html body .s-product-card-image,
html body .s-product-card-image img,
html body .s-product-card-full-image { background-color: #0E0E0E !important; }

/* ─── 5) خلفيات فاتحة داخل متجر أسود ────────────────────── */
html body .s-slider-container,
html body .s-comments,
html body .s-comments-product { background-color: #000000 !important; }

/* ─── 6) نصوص صفحة المنتج ───────────────────────────────── */
.product-single .form-label,
.product-single label,
.product-single small,
.product-single p,
.product-single span,
.product-single h1,
.product-single h2,
.product-single h3,
.s-metadata-box *,
.s-product-options-wrapper * { color: #FFFFFF !important; }

/* ─── 7) صندوق الحقول المخصصة ───────────────────────────── */
.s-metadata-box {
  background-color: transparent !important;
  border: 1px solid rgba(255,255,255,0.13) !important;
  border-radius: 6px !important;
}

/* ─── 8) أزرار المقاسات ─────────────────────────────────── */
.s-product-options-grid-mode-span {
  background-color: transparent !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  border-radius: 4px !important;
}
input:checked + .s-product-options-grid-mode-span,
.s-product-options-grid-mode-span:hover {
  background-color: #FFFFFF !important;
  border-color: #FFFFFF !important;
}
input:checked + .s-product-options-grid-mode-span,
input:checked + .s-product-options-grid-mode-span *,
.s-product-options-grid-mode-span:hover,
.s-product-options-grid-mode-span:hover * { color: #000000 !important; }

/* ─── 9) دوائر اختيار اللون ─────────────────────────────── */
/* حلقة خفيفة دائمة عشان الدائرة السوداء ما تختفي على الأسود */
/* الحلقة تُطبَّق على الدائرة نفسها فقط.
   تطبيقها على .s-product-options-colors-item كان يرسم مستطيلاً حول السواتش
   لأن هذا العنصر حاوية 30×58 بدون border-radius. */
html body .s-product-options-colors-item label > span,
html body .s-product-options-colors-item > span {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.35) !important;
}
html body .s-product-options-colors-item input:checked + label > span {
  box-shadow: 0 0 0 2px #000000, 0 0 0 4px #FFFFFF !important;
}

/* ─── 10) نافذة الشراء العائمة ──────────────────────────── */
.art-modal-product {
  background-color: #0E0E0E !important;
  border-color: rgba(255,255,255,0.28) !important;
  border-radius: 8px !important;
}

/* ─── 11) أزرار الشراء ──────────────────────────────────── */
html body .s-button-primary,
html body .s-button-solid,
html body .art-modal-product button,
html body .art-modal-product a,
html body salla-add-product-button button.s-button-btn.s-button-primary {
  background-color: #FFFFFF !important;
  background-image: none !important;
  border-color: #FFFFFF !important;
  opacity: 1 !important;
  border-radius: 4px !important;
}

html body .s-button-primary:hover,
html body .s-button-solid:hover,
html body .art-modal-product button:hover,
html body .art-modal-product a:hover,
html body salla-add-product-button button.s-button-btn.s-button-primary:hover {
  background-color: #E0E0E0 !important;
  background-image: none !important;
  border-color: #E0E0E0 !important;
  opacity: 1 !important;
}

/* نص الأزرار أسود دائماً */
html body .s-button-primary,
html body .s-button-primary *,
html body .s-button-primary:hover,
html body .s-button-primary:hover *,
html body .s-button-solid,
html body .s-button-solid *,
html body .s-button-solid:hover,
html body .s-button-solid:hover *,
html body .art-modal-product button,
html body .art-modal-product button *,
html body .art-modal-product button:hover,
html body .art-modal-product button:hover *,
html body .art-modal-product a,
html body .art-modal-product a * { color: #000000 !important; }

/* ─── 12) زر المساعدة (أيقونة واتساب كانت سوداء) ────────── */
.art-help-btn {
  background-color: transparent !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  border-radius: 4px !important;
  color: #FFFFFF !important;
}
.art-help-btn i,
.art-help-btn span { color: inherit !important; }
.art-help-btn:hover { background-color: #FFFFFF !important; }
.art-help-btn:hover, .art-help-btn:hover * { color: #000000 !important; }

/* ─── 13) المفضلة والمشاركة ─────────────────────────────── */
.btn--wishlist,
.s-button-light-outline {
  background-color: transparent !important;
  border-color: rgba(255,255,255,0.28) !important;
  border-radius: 4px !important;
}

/* ─── 14) أسهم السلايدر ─────────────────────────────────── */
.s-slider-nav-arrow {
  background-color: rgba(0,0,0,0.6) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  border-radius: 50% !important;
}

/* ─── 15) حقل الكمية ────────────────────────────────────── */
[class*="quantity"] input,
[class*="quantity"] button,
html body .s-quantity-input-input,
html body .s-quantity-input-button {
  background-color: transparent !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  color: #FFFFFF !important;
}

/* ─── 16) أيقونات الدفع ─────────────────────────────────── */
.s-payments-list-item {
  background-color: #F2F2F2 !important;
  border-radius: 4px !important;
}

/* ─── 17) صفحة السلة ────────────────────────────────────── */
html body .s-cart-summary,
html body .s-cart-item,
html body [class*="cart-item"],
html body [class*="cart-summary"] {
  background-color: #0E0E0E !important;
  border: 1px solid rgba(255,255,255,0.13) !important;
  border-radius: 6px !important;
}

/* استثناء الأزرار والحقول من التصفير */
html body .s-cart-summary *:not(button):not(input):not(select):not([style*="background-color"]),
html body .s-cart-item *:not(button):not(input):not(select):not([style*="background-color"]),
html body [class*="cart-item"] *:not(button):not(input):not(select):not([style*="background-color"]),
html body [class*="cart-summary"] *:not(button):not(input):not(select):not([style*="background-color"]) {
  color: #FFFFFF !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

html body [class*="cart"] button.s-button-primary,
html body [class*="cart"] a.s-button-primary { background-color: #FFFFFF !important; }
html body [class*="cart"] button.s-button-primary,
html body [class*="cart"] button.s-button-primary * { color: #000000 !important; }
/* نسبة كارت المنتج 4:5 — مطابقة لنسبة صور المنتجات */
html body .s-product-card-image,
html body [class*="s-product-card-image"] {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 4 / 5 !important;
}
html body .s-product-card-image img {
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
}

/* --- 18) zer al-shira2 al-sarie --- */
html body .s-add-product-button-mini-checkout-content,
html body .s-add-product-button-mini-checkout-content * {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}
html body .s-add-product-button-mini-checkout {
  background-color: transparent !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  border-radius: 4px !important;
}
html body .s-add-product-button-mini-checkout:hover {
  border-color: #FFFFFF !important;
  background-color: rgba(255,255,255,0.06) !important;
}

/* --- 19) shabakat al-muntajat fi al-raisiyya --- */
body.index section > salla-products-list.vertical-products {
  display: block;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 10px;
}

/* --- 20) tasnifat al-raisiyya: 2 aqsam faqat --- */
body.index .art-categories-02 .swiper-wrapper {
  justify-content: center;
}
body.index .art-categories-02 .art-categories-02-slide.slide--one-sixth {
  width: min(340px, 44vw) !important;
}

/* --- 21) raqm al-model: tabayun 4.34 -> 5.4 --- */
html body .text-\[12px\].text-gray-500 {
  color: #8A8A8A !important;
}

/* --- 22) Cairo variable weight axis (was: only w400 loaded, rest faux-bold) --- */
@font-face{font-family:'Cairo';font-style:normal;font-weight:200 1000;font-display:swap;src:url('/cf-fonts/v/cairo/5.2.7/arabic/wght/normal.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08FF,U+FB50-FDFF,U+FE70-FEFF,U+1EE00-1EEFF;}
@font-face{font-family:'Cairo';font-style:normal;font-weight:200 1000;font-display:swap;src:url('/cf-fonts/v/cairo/5.2.7/latin/wght/normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:'Cairo';font-style:normal;font-weight:200 1000;font-display:swap;src:url('/cf-fonts/v/cairo/5.2.7/latin-ext/wght/normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF;}
:root{--font-main:'Cairo','Noto Kufi Arabic','Segoe UI',Tahoma,Arial,sans-serif;}
html body{font-synthesis-weight:none;}

/* --- 23) colour swatches: restore ring, un-clamp Arabic labels, kill stray scrollbar --- */
html body .s-product-options-colors-wrapper input[type="radio"] + label > span{box-shadow:0 0 0 1px rgba(255,255,255,0.55) !important;}
html body .s-product-options-colors-wrapper input[type="radio"]:checked + label > span{box-shadow:0 0 0 2px #000000,0 0 0 4px #FFFFFF !important;}
html body .s-product-options-colors-item{width:auto !important;}
html body .s-product-options-colors-wrapper label{width:auto !important;min-width:30px;text-align:center;}
html body .s-product-options-colors-wrapper{gap:14px;}
html body .s-product-options-option-content{overflow:visible !important;}

/* --- 24) share popup was light text on a white panel --- */
html body .s-social-share-list{background-color:#0E0E0E !important;border:1px solid rgba(255,255,255,0.14) !important;}
html body .s-social-share-list a,html body .s-social-share-list a span,html body .s-social-share-list li{color:#F2F2F2 !important;}
html body .s-social-share-list a svg{fill:#F2F2F2 !important;}
html body .s-social-share-list a:hover{background-color:rgba(255,255,255,0.08) !important;}
html body .s-social-share-list a:hover,html body .s-social-share-list a:hover span{color:#FFFFFF !important;}


/* --- 25) size chips: cart reset was stripping border + selected fill --- */
html body .s-product-options-grid-mode-span.s-product-options-grid-mode-span{background-color:transparent !important;border:1px solid rgba(255,255,255,0.30) !important;border-radius:4px !important;color:#FFFFFF !important;}
html body .s-product-options-grid-mode-span.s-product-options-grid-mode-span:hover{border-color:#FFFFFF !important;background-color:rgba(255,255,255,0.08) !important;color:#FFFFFF !important;}
html body input:checked + .s-product-options-grid-mode-span.s-product-options-grid-mode-span{background-color:#FFFFFF !important;border-color:#FFFFFF !important;color:#000000 !important;}
html body input:checked + .s-product-options-grid-mode-span.s-product-options-grid-mode-span:hover{background-color:#FFFFFF !important;color:#000000 !important;}
html body input:disabled + .s-product-options-grid-mode-span.s-product-options-grid-mode-span{opacity:0.4 !important;color:#FFFFFF !important;text-decoration:line-through;}
html body .s-product-options-colors-wrapper{gap:20px;}


/* --- 26) chip border specificity (must outrank the cart reset) --- */
html body .s-product-options-wrapper .s-product-options-grid-mode-span.s-product-options-grid-mode-span{border:1px solid rgba(255,255,255,0.30) !important;border-radius:4px !important;background-color:transparent !important;color:#FFFFFF !important;}
html body .s-product-options-wrapper .s-product-options-grid-mode-span.s-product-options-grid-mode-span:hover{border-color:#FFFFFF !important;background-color:rgba(255,255,255,0.08) !important;}
html body .s-product-options-wrapper input:checked + .s-product-options-grid-mode-span.s-product-options-grid-mode-span{background-color:#FFFFFF !important;border-color:#FFFFFF !important;color:#000000 !important;}
html body .s-product-options-wrapper input:checked + .s-product-options-grid-mode-span.s-product-options-grid-mode-span:hover{background-color:#FFFFFF !important;color:#000000 !important;}

/* --- 27) mobile sticky purchase bar was WHITE under light icons/text --- */
@media (max-width: 639px){
  html body section.sticky-product-bar{background-color:#0E0E0E !important;border-top:1px solid rgba(255,255,255,0.12) !important;}
  html body section.sticky-product-bar .s-quantity-input-input{color:#FFFFFF !important;background-color:transparent !important;}
  html body section.sticky-product-bar .s-quantity-input-button{color:#FFFFFF !important;}
  html body section.sticky-product-bar .art-help-btn,html body section.sticky-product-bar .art-help-btn span{color:#FFFFFF !important;}
}

/* --- 28) button labels must follow their button, never the cart reset --- */
html body .s-cart-summary .s-button-text.s-button-text,
html body .s-cart-item .s-button-text.s-button-text,
html body .s-cart-summary button .s-button-text,
html body .s-cart-item button .s-button-text,
html body button .s-button-text{color:inherit !important;background-color:transparent !important;}

/* --- 29) button inner text/icon must always follow its button --- */
html body button.s-button-element .s-button-text.s-button-text.s-button-text,
html body salla-button button .s-button-text.s-button-text.s-button-text,
html body a.s-button-element .s-button-text.s-button-text.s-button-text{color:inherit !important;background-color:transparent !important;}
html body button.s-button-element .s-button-icon.s-button-icon.s-button-icon{color:inherit !important;fill:currentColor !important;}

/* --- 30) help button hover: bg turns white, text must turn black --- */
html body .art-help-btn:hover,html body .art-help-btn:hover span,html body .art-help-btn:focus,html body .art-help-btn:focus span{color:#000000 !important;}
html body .art-help-btn:hover,html body .art-help-btn:focus{background-color:#FFFFFF !important;border-color:#FFFFFF !important;}

/* --- 32) hero video: dark fallback, text scrim, reduced motion --- */
html body .art-video-banner{background-color:#0A0A0A !important;}
html body .art-video-banner::after{content:'';position:absolute;inset:0;z-index:20;pointer-events:none;background:radial-gradient(ellipse 62% 46% at 50% 52%, rgba(0,0,0,0.74) 0%, rgba(0,0,0,0.50) 45%, rgba(0,0,0,0.12) 72%, rgba(0,0,0,0) 100%);}
@media (prefers-reduced-motion: reduce){
  html body .art-video-banner video{opacity:0 !important;}
}

/* --- 33) توست "أضيف للسلة": سطح أبيض كان يرث نصاً أبيض --------------- */
/* السبب الجذري: القسم 6 يفرض color:#FFFFFF !important على كل
   p / span / label / small داخل .product-single، فيتسرّب الأبيض إلى
   مكوّنات سلة ذات خلفية بيضاء. الحل: إعادة ألوان سلة الأصلية داخل هذا
   السطح الفاتح فقط — بدون فرض لون نص عام على كل المكوّنات. */
html body .s-add-product-toast,
html body .s-add-product-toast p,
html body .s-add-product-toast span,
html body .s-add-product-toast label,
html body .s-add-product-toast small,
html body .s-add-product-toast a,
html body .s-add-product-toast .s-add-product-toast__title,
html body .s-add-product-toast .s-add-product-toast__name,
html body .s-add-product-toast .s-add-product-toast__price { color:#1F2937 !important; }
html body .s-add-product-toast .s-add-product-toast__options span,
html body .s-add-product-toast .s-add-product-toast__price-original { color:#6B7280 !important; }
html body .s-add-product-toast .s-add-product-toast__close i { color:#9CA3AF !important; }
html body .s-add-product-toast .s-add-product-toast__show-more { color:#111827 !important; }

/* --- 34) نافذة "عندك سؤال؟": نفس السبب الجذري ------------------------- */
html body #art-help-modal .art-help-modal__product-name { color:#6B7280 !important; }
html body #art-help-modal .art-help-modal__input {
  color:#1F2937 !important;
  background-color:#FFFFFF !important;
}
html body #art-help-modal .art-help-modal__input::placeholder { color:#6B7280 !important; }
html body #art-help-modal .art-help-modal__send,
html body #art-help-modal .art-help-modal__send span,
html body #art-help-modal .art-help-modal__send i,
html body #art-help-modal .art-help-modal__send svg {
  color:#000000 !important;
  fill:currentColor !important;
}
html body #art-help-modal .art-help-modal__send {
  border:1px solid rgba(0,0,0,0.18) !important;
}

/* --- 35) تفاصيل مكمّلة للأقسام 33/34 --------------------------------- */
/* أ) مؤشر تركيز مرئي لسواتش اللون: عنصر input[type=radio] نفسه opacity:0
   لذلك كان مؤشر التركيز الافتراضي غير مرئي لمستخدم لوحة المفاتيح. */
html body .s-product-options-colors-wrapper input[type="radio"]:focus-visible + label > span {
  box-shadow: 0 0 0 2px #000000, 0 0 0 4px #FFFFFF, 0 0 0 6px rgba(255,255,255,0.45) !important;
}
/* ب) أيقونة إغلاق نافذة المساعدة: 2.77:1 على أبيض → 3.76:1 */
html body #art-help-modal .s-modal-close svg { fill:#EF4444 !important; }

/* --- 36) صورة احتياطية (poster) للهيرو ------------------------------- */
/* الفيديو الأصلي كان بلا faststart (ذرة moov في نهاية الملف) فلم يبدأ
   التشغيل على iOS Safari، ومكوّن الثيم لا يوفّر حقل poster،
   فكان المستخدم يرى مستطيلاً أسود فقط. الصورة هنا تُرسم خلف الفيديو:
   تظهر فوراً وتبقى ظاهرة إن تعذّر التشغيل (توفير الطاقة، شبكة بطيئة). */
/* الجوال والديسكتوب لهما مقطعان مختلفان (عمودي/أفقي) فلكلٍّ صورته */
@media (max-width: 767px) {
  html body .art-video-banner {
    background-image: url("https://d2ol7oe51mr4n9.cloudfront.net/user_3E4mDF47WYXT9UNsOzXwZBWvWV8/f8b0d2d3-b96a-4c21-9fb9-be0fa5fa508c.jpg") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
}
@media (min-width: 768px) {
  html body .art-video-banner {
    background-image: url("https://d2ol7oe51mr4n9.cloudfront.net/user_3E4mDF47WYXT9UNsOzXwZBWvWV8/c9065945-641d-44ad-91f8-3a9d86f90c45.jpg") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
}

/* --- 37) زر حذف المنتج من السلة كان يظهر مربعاً أبيض فارغاً ---------- */
/* سببان متراكبان، والأيقونة كانت تُرسم فعلاً (خط sallaicons محمّل والرمز موجود):
   1) القسم 11 يطبّق خلفية وحدوداً بيضاء على .s-button-solid، وزر الحذف يحمل
      هذا الكلاس، فتحوّل من زر سلة الأحمر (.s-button-danger) إلى مربع أبيض.
   2) تصفير السلة في القسم 17 يفرض color:#FFFFFF على كل عنصر داخل .cart-item
      ليس button/input/select — و <i class="sicon-cancel"> منها — فصار الرمز أبيض.
   أبيض على أبيض = مربع فارغ. الحل: نفس معاملة بقية أزرار الأيقونات في المتجر. */
html body button.btn--delete.btn--delete,
html body .cart-item button.btn--delete {
  background-color: transparent !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,0.38) !important;
  border-radius: 4px !important;
  color: #FFFFFF !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
}
html body button.btn--delete.btn--delete i.sicon-cancel.sicon-cancel,
html body button.btn--delete.btn--delete .s-button-text.s-button-text {
  color: #FFFFFF !important;
  font-size: 14px !important;
}
html body button.btn--delete.btn--delete:hover,
html body button.btn--delete.btn--delete:focus-visible,
html body button.btn--delete.btn--delete:active {
  background-color: #FFFFFF !important;
  border-color: #FFFFFF !important;
}
html body button.btn--delete.btn--delete:hover i.sicon-cancel.sicon-cancel,
html body button.btn--delete.btn--delete:focus-visible i.sicon-cancel.sicon-cancel,
html body button.btn--delete.btn--delete:active i.sicon-cancel.sicon-cancel,
html body button.btn--delete.btn--delete:hover .s-button-text.s-button-text,
html body button.btn--delete.btn--delete:focus-visible .s-button-text.s-button-text {
  color: #000000 !important;
}
html body button.btn--delete.btn--delete:focus-visible {
  outline: 2px solid rgba(255,255,255,0.55) !important;
  outline-offset: 2px !important;
}

/* --- 38) أسهم مسار التنقل (breadcrumb) كانت سوداء على أسود --------- */
/* نفس عائلة عطل زر الحذف: لون النص على العنصر صحيح (#F2F2F2) لكن الـ SVG
   لا يرث currentColor، وقيمة fill الافتراضية من سلة سوداء — فالسهم يختفي
   تماماً على خلفية المتجر السوداء (تباين 1.00) في كل الصفحات. */
html body .s-breadcrumb-arrow svg,
html body .s-breadcrumb-arrow svg path {
  fill: rgba(255,255,255,0.45) !important;
}

/* --- 39) زر الإضافة للسلة يصير مستطيلاً أسود بعد اللمس على الجوال ---- */
/* الجذر الحقيقي: ثيم آرت يرسم طبقة ::after سوداء صلبة فوق الزر:
     content:""؛ background:#000؛ position:absolute؛ inset:0؛ z-index:9؛
     الافتراضي scaleX(0)، وعند :hover تتمدد إلى scaleX(1) فتغطي الزر كاملاً
     من فوق النص والأيقونة (تأثير مسح مقصود للماوس).
   وعلى iOS تبقى حالة :hover عالقة بعد اللمس حتى يُضغط مكان آخر،
   فتبقى الطبقة السوداء دائمة والزر يبدو مستطيلاً أسود فارغاً — مع أنه يعمل.
   نيّة الثيم أن يصير النص فاتحاً فوق التعبئة السوداء عبر var(--color-theme)،
   لكن --color-theme في هذا المتجر = أسود، فبقي النص أسود على أسود.
   الحل: على أجهزة اللمس نلغي المسح تماماً (لا يوجد hover حقيقي أصلاً)،
   وعلى أجهزة المؤشر نُبقي التأثير ونرفع النص فوق الطبقة ونجعله أبيض. */
@media (hover: none) {
  html body salla-add-product-button button.s-button-btn::after,
  html body salla-add-product-button button.s-button-btn:hover::after,
  html body salla-add-product-button button.s-button-btn:active::after,
  html body salla-add-product-button button.s-button-btn:focus::after {
    transform: scaleX(0) !important;
    opacity: 0 !important;
  }
}
@media (hover: hover) {
  /* :hover فقط — لأن الطبقة السوداء تتمدد على :hover وحده.
     تضمين :focus كان يجعل النص أبيض على زر أبيض (تباين 1.00). */
  html body salla-add-product-button button.s-button-btn.s-button-btn:hover .s-button-text,
  html body salla-add-product-button button.s-button-btn.s-button-btn:hover .s-button-text * {
    position: relative !important;
    z-index: 10 !important;
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
  }
}
/*x*/
/* --- 40) زر تشغيل الهيرو لمن فعّل «تقليل الحركة» ------------------- */
/* القسم 32 يخفي الفيديو عند prefers-reduced-motion (وهذا صحيح: الهيرو
   حركة تلقائية مستمرة، ومعيار WCAG 2.2.2 مستوى A يوجب وسيلة إيقاف).
   لكن الإخفاء وحده يحرم هؤلاء الزوار من المقطع بلا بديل. الزر هنا يُنشأ
   بالـJS فقط عند تفعيل الإعداد — فهو غير موجود إطلاقاً في DOM أي زائر آخر.
   عند الضغط تُضاف vently-motion-on على <html> فيظهر الفيديو ويشتغل. */
@media (prefers-reduced-motion: reduce) {
  html.vently-motion-on body .art-video-banner video { opacity: 1 !important; }
}
html body .art-video-banner .vently-motion-btn {
  position: absolute !important;
  bottom: 16px !important;
  left: 16px !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 9999px !important;
  background-color: rgba(0,0,0,0.45) !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,0.65) !important;
  box-shadow: none !important;
  /* .art-video-banner-header يحمل z-[40] ويغطي البانر كاملاً ويلتقط النقر،
     فأي قيمة أقل تجعل الزر ظاهراً وغير قابل للضغط. قِيس فعلياً. */
  z-index: 50 !important;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
html body .art-video-banner .vently-motion-btn > span {
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 0 0 3px !important;
  border-top: 7px solid transparent !important;
  border-bottom: 7px solid transparent !important;
  border-left: 12px solid #FFFFFF !important;
  background: none !important;
}
html body .art-video-banner .vently-motion-btn:hover,
html body .art-video-banner .vently-motion-btn:active {
  background-color: rgba(0,0,0,0.72) !important;
  border-color: #FFFFFF !important;
}
html body .art-video-banner .vently-motion-btn:focus-visible {
  outline: 2px solid rgba(255,255,255,0.75) !important;
  outline-offset: 3px !important;
}
/* ---- 40 ---- size guide modal on a white surface. Section 6 whitens every
   product-page text node; the Salla editor strips inline !important from the
   pasted table, so colour control is handed back here, scoped to this modal. */
html body #salla-product-size-guide-modal ,
html body #salla-product-size-guide-modal p,
html body #salla-product-size-guide-modal span,
html body #salla-product-size-guide-modal li,
html body #salla-product-size-guide-modal ul,
html body #salla-product-size-guide-modal ol,
html body #salla-product-size-guide-modal td,
html body #salla-product-size-guide-modal th,
html body #salla-product-size-guide-modal h1,
html body #salla-product-size-guide-modal h2,
html body #salla-product-size-guide-modal h3,
html body #salla-product-size-guide-modal h4,
html body #salla-product-size-guide-modal b,
html body #salla-product-size-guide-modal strong,
html body #salla-product-size-guide-modal small,
html body #salla-product-size-guide-modal div {
  color: #1F2937 !important;
}
html body #salla-product-size-guide-modal caption {
  color: #6B7280 !important;
}
html body #salla-product-size-guide-modal table {
  background: #FFFFFF !important;
  width: 100% !important;
}
html body #salla-product-size-guide-modal th {
  background: #F9FAFB !important;
}
html body #salla-product-size-guide-modal td,
html body #salla-product-size-guide-modal th {
  border: 1px solid #E5E7EB !important;
}
html body #salla-product-size-guide-modal .s-modal-body {
  background: #FFFFFF !important;
}
/* ---- 41 ---- product feature cards (data from the JS feature system).
   The theme ships border-black on a black page, so cards had no edge. */
html body .features-grid.vently-features .feature-item {
  border-color: rgba(255,255,255,0.18) !important;
  border-radius: 10px !important;
  min-height: 92px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 8px !important;
}
html body .features-grid.vently-features .feature-title {
  color: #F2F2F2 !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
}
html body .features-grid.vently-features .feature-icon {
  color: #FFFFFF !important;
  font-size: 20px !important;
}