/* الفوتر */
custom-salla-product-card .s-product-card-content-footer {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* حجز مكان القلب قبل نقله بالجافاسكربت لتقليل CLS */
custom-salla-product-card:has(
    salla-button.btn--wishlist.s-product-card-wishlist
)
.s-product-card-content-footer:not(
    :has(> salla-button.btn--wishlist.s-product-card-wishlist)
)::before {
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
}

/* القلب */
custom-salla-product-card
.s-product-card-content-footer
salla-button.btn--wishlist {
    position: static !important;
    flex: 0 0 32px !important;
}

/* شكل القلب */
custom-salla-product-card
.s-product-card-content-footer
button.btn--wishlist {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    box-sizing: border-box !important;
    border-radius: 50% !important;
    background: #4321ad !important;
    border: 2px solid #fff !important;
}

/* أيقونة القلب */
custom-salla-product-card
.s-product-card-content-footer
button.btn--wishlist i {
    font-size: 16px !important;
    color: #fff !important;
}

/* زر السلة يأخذ المساحة المتبقية */
custom-salla-product-card
.s-product-card-content-footer
salla-add-product-button {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* زر أضف للسلة */
custom-salla-product-card
.s-product-card-content-footer
button.s-button-element.s-button-wide {
    background: linear-gradient(
        90deg,
        #801c11 0%,
        #4321ad 100%
    ) !important;
    border: none !important;
    color: #fff !important;
}

/* نص زر أضف للسلة */
custom-salla-product-card
.s-product-card-content-footer
button.s-button-element.s-button-wide
.s-button-text {
    color: #fff !important;
}

/* إخفاء بيانات وثيقة العمل الحر */
.s-trust-badges-label,
.s-trust-badges-number,
.s-trust-badges-image,
img.s-trust-badges-image {
    display: none !important;
}

/* إخفاء الرابط التابع لوثيقة العمل الحر */
a:has(.s-trust-badges-image),
a:has(.s-trust-badges-label),
a:has(.s-trust-badges-number) {
    display: none !important;
}

/* إخفاء رقم الهاتف */
a[href^="tel:"] {
    display: none !important;
}

/* جعل النص العريض في وصف المنتج أحمر */
.product_description strong {
    color: red !important;
}

/* حاوية شعارات الدفع */
footer .footer-bottom > ul {
    gap: 8px !important;
    justify-content: center !important;
    align-items: center !important;
}

/* المربعات الزجاجية الداكنة */
footer .footer-bottom > ul > li[class^="pay-"] {
    width: 50px !important;
    height: 31px !important;
    padding: 5px !important;
    box-sizing: border-box !important;

    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.16),
        rgba(255, 255, 255, 0.05)
    ) !important;

    border: 1px solid
        rgba(255, 255, 255, 0.20) !important;

    border-radius: 8px !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 4px 12px rgba(0, 0, 0, 0.25) !important;

    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    flex: 0 0 auto !important;
}

/* الحفاظ على ألوان شعارات الدفع الأصلية */
footer
.footer-bottom
> ul
> li[class^="pay-"]
img {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    display: block !important;
}

/* جعل Apple Pay واضحًا فوق الخلفية الداكنة */
footer .footer-bottom .pay-apple_pay img {
    filter: brightness(0) invert(1) !important;
}

/* مقاسات شعارات الدفع على الجوال */
@media (max-width: 480px) {
    footer .footer-bottom > ul {
        gap: 6px !important;
    }

    footer
    .footer-bottom
    > ul
    > li[class^="pay-"] {
        width: 46px !important;
        height: 29px !important;
        padding: 4px !important;
        border-radius: 7px !important;
    }
}

/* إخفاء محفظة محلي */
.pay-mahally_customer_wallet,
footer
.footer-bottom
> ul
> li.pay-mahally_customer_wallet {
    display: none !important;
}

/* إخفاء مربع الدفع الفارغ تمامًا */
footer
.footer-bottom
> ul
> li[class^="pay-"]:empty {
    display: none !important;
}

/* إخفاء المربع الذي يحتوي صورة Salla الفارغة */
footer
.footer-bottom
> ul
> li[class^="pay-"]:has(img[src*="s-empty"]) {
    display: none !important;
}

/* تحريك شعار المتجر */
header img.logo-dark,
header img.logo-light {
    animation:
        unitechLogoFloat
        3s
        ease-in-out
        infinite;
    will-change: transform;
}

@keyframes unitechLogoFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

/* إيقاف الحركة لمن يفضل تقليل المؤثرات */
@media (prefers-reduced-motion: reduce) {
    header img.logo-dark,
    header img.logo-light {
        animation: none !important;
        will-change: auto;
    }
}

/* تكبير مساحة لمس عنوان المنتج */
custom-salla-product-card
.s-product-card-content-title a {
    display: flex !important;
    align-items: center !important;
    min-height: 48px !important;
    padding-block: 6px !important;
}

/* تحسين المسافة بين بطاقات المنتجات */
salla-products-slider .s-products-slider-card {
    box-sizing: border-box !important;
    padding-inline: 4px !important;
}

.s-angel--divider .divider-title {
    max-width: 680px !important;
    margin-inline: auto !important;
}

/* ===== تصميم يونيتيك الجديد — للنسخة «تنسيق ملاك رقم (2)» فقط ===== */
/* يُلصق في آخر خانة CSS للنسخة الثانية، تحت الكود الموجود */

:root {
  --color-primary: #6d5dfc !important;
  --color-primary-dark: #5a4ae6 !important;
  --color-primary-light: #8b7dff !important;
  --color-primary-reverse: #ffffff !important;
  --ut-bg: #0d0d12;
  --ut-surface: #16161f;
  --ut-surface-2: #1d1d2a;
  --ut-border: #2c2c3d;
  --ut-text: #f4f4fb;
  --ut-muted: #a9a9bf;
  --ut-accent: #8b7dff;
  --ut-select-bg: #292943;
  --ut-select-border: #9696ff;
}

/* خط العناوين يتحمّل من أول الصفحة (بدل ما يحمّلها الجافاسكربت متأخر ويتغيّر شكل الكلام) */
@font-face { font-family: 'Readex Pro'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/readexpro/v27/SLXYc1bJ7HE5YDoGPuzj_dh8uc7wUy8ZQQyX2Iw1ZEzMhQ.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: 'Readex Pro'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/readexpro/v27/SLXYc1bJ7HE5YDoGPuzj_dh8uc7wUy8ZQQyX2IwwZEw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Readex Pro'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/readexpro/v27/SLXYc1bJ7HE5YDoGPuzj_dh8uc7wUy8ZQQyX2Iw1ZEzMhQ.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: 'Readex Pro'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/readexpro/v27/SLXYc1bJ7HE5YDoGPuzj_dh8uc7wUy8ZQQyX2IwwZEw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Readex Pro'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/readexpro/v27/SLXYc1bJ7HE5YDoGPuzj_dh8uc7wUy8ZQQyX2Iw1ZEzMhQ.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: 'Readex Pro'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/readexpro/v27/SLXYc1bJ7HE5YDoGPuzj_dh8uc7wUy8ZQQyX2IwwZEw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* الرئيسية: الأقسام القديمة (الأسئلة/الآراء/الفوتر) تنخفي لين ينبني التصميم الجديد فوقها،
   عشان ما تطلع أول وبعدين تنزل (اهتزاز الصفحة CLS). لو تعطّل الكود لأي سبب ترجع تبان بعد 15 ثانية
   (كانت 6: بالجوالات البطيئة الكود يشتغل بعدها، فتطلع الأسئلة فوق وبعدين تنزل = اهتزاز كبير CLS 0.88) */
body.index:not(.ut-rd-home) .app-inner .s-block:not(.ut-shell),
body.index:not(.ut-rd-home) .store-footer {
  visibility: hidden; max-height: 0; overflow: hidden; margin-top: 0; margin-bottom: 0;
  animation: ut-rd-fallback 0s 15s forwards;
}
@keyframes ut-rd-fallback { to { visibility: visible; max-height: none; overflow: visible; } }

/* عنوان الهيرو جاهز من السيرفر (عنصر «فاصل ملاك» عليه كلاس ut-shell) يطلع من أول لحظة،
   وبنفس مقاسات الهيرو بالضبط عشان لما يكمّل الكود الباقي حوله ما يتحرك شيء */
html body.index section.s-block.ut-shell, .s-block.ut-shell { display: block !important; margin: 0 !important; padding: 0 !important; background: none !important; } /* عليه كلاس hidden من الإعدادات: يظهر بس لما يوصل هذا الملف */
.s-block.ut-shell .divider-container { max-width: 1200px !important; width: auto !important; margin: 0 auto !important; padding: 32px 16px !important; }
.s-block.ut-shell .s-block__title { display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 40px; align-items: center !important; justify-content: flex-start !important; padding: 24px 0 0 !important; margin: 0 !important; text-align: start !important; }
.s-block.ut-shell .s-block__title div.flex, .s-block.ut-shell .s-block__title .flex-center, .s-block.ut-shell .divider-wrapper, .s-block.ut-shell .divider-item { display: contents !important; }
.s-block.ut-shell .vertical-lines, .s-block.ut-shell .divider-title > p:not(.ut-rd-hero-sub), .s-block.ut-shell .divider-item > a, .s-block.ut-shell .divider-item > img, .s-block.ut-shell .divider-item > i { display: none !important; }
.s-block.ut-shell .divider-title { max-width: none !important; }
.s-block.ut-shell .divider-item > .divider-title { flex: 1 1 420px; min-width: 0; display: flex !important; flex-direction: column; align-items: stretch; gap: 18px; margin: 0 !important; padding: 0 !important; text-align: start !important; }
.s-block.ut-shell .divider-item > .divider-title::before { content: 'المتجر رقم #1 في السعودية للخدمات الرقمية'; align-self: flex-start; font-size: 13px; font-weight: 600; color: #c9c2ff; background: #241f45; border: 1px solid #3a3270; border-radius: 999px; padding: 4px 14px; line-height: 1.7; }
html body .s-block.ut-shell .s-block__title .divider-item .divider-title h2 { margin: 0 !important; padding: 0 !important; width: auto !important; white-space: normal !important; text-align: start !important; font-family: 'Readex Pro', sans-serif !important; font-weight: 700 !important; font-size: clamp(30px, 5vw, 52px) !important; line-height: 1.25 !important; color: #fff !important; }
html body .s-block.ut-shell .s-block__title .divider-item .divider-title h2 span { color: #9a8cff; }
/* مكان باقي نص الهيرو وبطاقة «اطلب بسرعة» محجوز لين يحطها الكود */
body:not(.ut-rd-home) .s-block.ut-shell .divider-item > .divider-title::after { content: ''; height: 174px; visibility: hidden; }
@media (max-width: 1023px) { body:not(.ut-rd-home) .s-block.ut-shell .divider-item > .divider-title::after { height: 208px; } }
body:not(.ut-rd-home) .s-block.ut-shell .s-block__title::after { content: ''; visibility: hidden; flex: 1 1 380px; max-width: 480px; min-height: 767px; margin: 0 auto; }

/* الخط والخلفية: النص العادي بخط الثيم نفسه (محمّل أصلًا)، والعناوين بخط Readex Pro بس — أخف بكثير */
button, input, select, textarea { font-family: inherit; }
body, .app-inner, .da-bgm { background-color: var(--ut-bg) !important; }
body { color: var(--ut-text); line-height: 1.7; }

h1, h2,
.s-block__title h2,
.s-product-card-price,
.ut-qty-name {
  font-family: 'Readex Pro', sans-serif !important;
}

/* ===== الهيدر ===== */
.store-header .header-inner,
.store-header .main-nav-container {
  background: var(--ut-bg) !important;
  border-bottom: 1px solid #23232f;
}
.store-header .header-btn,
.store-header .search-btn {
  border-radius: 12px !important;
}
.bottom-header {
  background: var(--ut-surface) !important;
  border-top: 1px solid var(--ut-border);
  opacity: 1 !important;
}

/* ===== عناوين الأقسام ===== */
.s-block__title h2,
body.color-mode-dark .s-block .s-block__title h2.da-cp {
  font-size: clamp(22px, 3vw, 30px) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.35 !important;
}
.s-block__title p { color: var(--ut-muted) !important; }
.s-block__display-all {
  color: #c9c2ff !important;
  font-weight: 600 !important;
  border: 1px solid #3a3270;
  border-radius: 999px;
  padding: 4px 14px;
  background: #241f45;
}
.divider-title .vertical-lines { background: var(--ut-border) !important; }

/* ===== بطاقة المنتج ===== */
custom-salla-product-card.s-product-card-entry {
  background: var(--ut-surface) !important;
  border: 1px solid var(--ut-border) !important;
  border-radius: 18px !important;
  overflow: hidden;
  transition: border-color .2s, transform .2s;
}
custom-salla-product-card.s-product-card-entry:hover {
  border-color: #4b44a0 !important;
  transform: translateY(-2px);
}
custom-salla-product-card .s-product-card-promotion-title {
  background: #0d0d12cc !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 3px 10px !important;
}
custom-salla-product-card .s-product-card-content-title,
custom-salla-product-card .s-product-card-content-title a {
  color: var(--ut-text) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}
custom-salla-product-card .s-product-card-content-subtitle { color: var(--ut-muted) !important; }
custom-salla-product-card .s-product-card-price {
  color: #ffffff !important;
  font-size: 20px !important;
  font-weight: 700 !important;
}
custom-salla-product-card .s-button-primary {
  background: var(--ut-select-bg) !important;
  border: 1px solid #4b44a0 !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  min-height: 44px !important;
}
custom-salla-product-card .s-button-primary:hover { background: #6d5dfc !important; }
/* يغطي تدرّج زر السلة القديم في الكود الأصلي بلون التصميم الجديد */
custom-salla-product-card .s-product-card-content-footer button.s-button-element.s-button-wide.s-button-primary {
  background: var(--ut-select-bg) !important;
  border: 1px solid #4b44a0 !important;
}
custom-salla-product-card .s-product-card-content-footer button.s-button-element.s-button-wide.s-button-primary:hover {
  background: #6d5dfc !important;
}

/* ===== الأزرار العامة ===== */
.s-button-primary,
.btn--primary {
  background: #6d5dfc !important;
  border-color: #6d5dfc !important;
  color: #ffffff !important;
  border-radius: 14px !important;
  font-weight: 700 !important;
}
.s-button-primary:hover { background: #5a4ae6 !important; }

/* ===== الأسئلة الشائعة ===== */
.faqs-list__item {
  background: var(--ut-surface) !important;
  border: 1px solid var(--ut-border) !important;
  border-radius: 16px !important;
}
.faqs-list__item label {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--ut-text) !important;
}
.faqs-list__item .open-badge { color: #c9c2ff !important; }
.faq-answer { color: #c4c4d6 !important; font-size: 15px !important; }

/* ===== آراء العملاء ===== */
.s-block--testimonials .swiper-slide > div,
.s-block--testimonials .testimonial {
  background: var(--ut-surface) !important;
  border: 1px solid var(--ut-border) !important;
  border-radius: 18px !important;
}

/* ===== الفوتر ===== */
.store-footer__inner {
  background: #0a0a0f !important;
  border-top: 1px solid #23232f;
}
.store-footer .footer-description,
.store-footer p { color: var(--ut-muted) !important; }
.store-footer a { color: #c4c4d6 !important; }
.store-footer a:hover { color: #ffffff !important; }
.footer-bottom { border-top: 1px solid #23232f; }

/* ===== صفحة المنتج ===== */
.product-single .bg-gray-100.da-bgg { background: var(--ut-bg) !important; }
.product-single h1 {
  font-size: clamp(24px, 3.2vw, 34px) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: #ffffff !important;
}
.product-single .product-entry__sub-title { color: #c9c2ff !important; }
.product-single .details-slider,
.product-single .details-slider img { border-radius: 24px !important; }
.product-single .promotion-title {
  background: #0d0d12cc !important;
  border-radius: 999px !important;
  padding: 4px 12px !important;
}
.product-single .short__description p { color: #c4c4d6 !important; font-size: 16px !important; }

/* بطاقة الطلب (الخيارات + الإضافة) */
.product-single .tabs-wrapper__product {
  background: var(--ut-surface) !important;
  border: 1px solid var(--ut-border) !important;
  border-radius: 18px !important;
}
.product-single .tabs__product .tab-trigger {
  background: transparent !important;
  color: var(--ut-muted) !important;
  font-weight: 600 !important;
  border-bottom: 3px solid transparent !important;
  min-height: 48px;
}
.product-single .tabs__product .tab-trigger.is-active {
  color: #ffffff !important;
  border-bottom-color: var(--ut-accent) !important;
}
.product-single .sticky-product-bar {
  background: var(--ut-surface) !important;
  border: 1px solid var(--ut-border) !important;
  border-radius: 18px !important;
}
.product-single .sticky-product-bar .s-button-primary {
  min-height: 54px !important;
  font-size: 16px !important;
}
.product-single salla-quantity-input {
  border-radius: 12px !important;
  border-color: #3a3a52 !important;
}

/* شريط المميزات */
.p--features__item {
  background: var(--ut-surface) !important;
  border: 1px solid var(--ut-border) !important;
  border-radius: 14px !important;
}
.p--features__item i { color: #c9c2ff !important; }
.p--features__item p { color: var(--ut-text) !important; font-weight: 600 !important; }

/* عدد مرات الشراء */
.product-single .details__wrapper {
  background: var(--ut-surface) !important;
  border: 1px solid var(--ut-border) !important;
  border-radius: 14px !important;
}

/* خانة الرابط */
.product-single salla-product-options input[type="text"],
.product-single salla-product-options input[type="url"],
.product-single salla-product-options textarea {
  background: #0f0f16 !important;
  border: 1px solid #3a3a52 !important;
  border-radius: 14px !important;
  min-height: 54px;
  color: var(--ut-text) !important;
}
.product-single salla-product-options input:focus,
.product-single salla-product-options textarea:focus {
  border-color: var(--ut-select-border) !important;
  box-shadow: 0 0 0 3px #9696ff33 !important;
}


/* ===== الأقسام الجديدة (تنضاف بالجافاسكربت) ===== */
.ut-rd-wrap { max-width: 1200px; margin: 0 auto; padding: 32px 16px; }
.ut-rd-h2 { margin: 0 0 20px; font-family: 'Readex Pro', sans-serif; font-size: clamp(22px, 3vw, 30px); font-weight: 700; color: #fff; }
.ut-rd-logo { flex: 0 0 auto; display: inline-grid; place-items: center; border-radius: 50%; line-height: 1; }
.ut-rd-logo b { font-family: 'Readex Pro', sans-serif; font-weight: 700; }
.ut-rd-logo.is-plain { background: var(--ut-select-bg); color: #c9c2ff; }
.ut-rd-logo.is-img { overflow: hidden; background: transparent; -webkit-clip-path: circle(50%); clip-path: circle(50%); }
.ut-rd-logo.is-img img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 50%; }
.ut-rd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.ut-rd-card { background: var(--ut-surface); border: 1px solid var(--ut-border); border-radius: 18px; padding: 22px; display: flex; gap: 14px; }
.ut-rd-card.is-col { flex-direction: column; gap: 10px; }
.ut-rd-num { width: 44px; height: 44px; border-radius: 12px; background: var(--ut-select-bg); color: #c9c2ff; display: grid; place-items: center; font-family: 'Readex Pro', sans-serif; font-weight: 700; font-size: 18px; flex: 0 0 auto; }
.ut-rd-card h3 { margin: 0 0 4px; font-size: 17px; font-weight: 700; color: #fff; }
.ut-rd-card p { margin: 0; color: #c4c4d6; font-size: 14px; line-height: 1.7; }

/* ===== الرئيسية الجديدة: نخفي الأقسام القديمة (الأسئلة الشائعة والتقييمات تبقى) ===== */
body.ut-rd-home .s-block--hero-slider,
body.ut-rd-home .s-angel--divider:not(.ut-shell),
body.ut-rd-home .s-block--banners,
body.ut-rd-home .s-block--angel-products,
body.ut-rd-home .s-block--bundle-personalized-shoppers-who-bought { display: none !important; }
body.ut-rd-home .store-header { position: relative !important; }
.ut-rd-tight .ut-rd-wrap { padding-top: 8px; padding-bottom: 8px; }
.ut-rd-muted { margin: 4px 0 0; color: var(--ut-muted); font-size: 15px; }
.ut-rd-btn { min-height: 52px; padding: 0 26px; border-radius: 14px; background: #6d5dfc; color: #fff !important; font: inherit; font-weight: 700; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; cursor: pointer; text-decoration: none; }
.ut-rd-btn:hover { background: #5a4ae6; }
.ut-rd-btn:disabled { opacity: .6; cursor: progress; }
.ut-rd-btn.is-ghost { background: var(--ut-surface); border: 1px solid #3a3270; font-weight: 600; }
.ut-rd-btn:focus-visible, .ut-rd-quick button:focus-visible, .ut-rd-quick select:focus-visible, .ut-rd-plat:focus-visible, .ut-rd-all:focus-visible { outline: 3px solid #b5b5ff; outline-offset: 2px; }

.ut-rd-hero { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; padding-top: 24px; }
.ut-rd-hero-text { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.ut-rd-eyebrow { align-self: flex-start; font-size: 13px; font-weight: 600; color: #c9c2ff; background: #241f45; border: 1px solid #3a3270; border-radius: 999px; padding: 4px 14px; }
.ut-rd-hero-title { margin: 0; font-family: 'Readex Pro', sans-serif; font-weight: 700; font-size: clamp(30px, 5vw, 52px); line-height: 1.25; color: #fff; }
.ut-rd-hero-title span { color: #9a8cff; }
.ut-rd-hero-sub { margin: 0; font-size: 17px; color: #c4c4d6; max-width: 540px; line-height: 1.8; }
.ut-rd-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.ut-rd-trust { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14px; color: #c4c4d6; }
.ut-rd-trust span { display: inline-flex; align-items: center; gap: 8px; }

/* بطاقة اطلب بسرعة */
.ut-rd-quick { flex: 1 1 380px; min-width: 0; max-width: 480px; margin: 0 auto; background: var(--ut-surface); border: 1px solid var(--ut-border); border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 30px 80px #00000066; }
.ut-rd-quick-head { display: flex; justify-content: space-between; align-items: center; }
.ut-rd-quick-head span { font-family: 'Readex Pro', sans-serif; font-weight: 600; font-size: 18px; color: #fff; }
.ut-rd-quick-head small { color: var(--ut-muted); font-size: 12px; }

/* أكواد الخصم: زر A15 الصغير جنب «اطلب بسرعة» + صندوق السلة */
.ut-rd-quick-head { gap: 8px; }
.ut-cp-chip { appearance: none; display: inline-flex; align-items: center; gap: 4px; margin: 0; margin-inline-end: auto; min-height: 0; padding: 1px 2px 1px 7px; background: #261c55; border: 1px dashed var(--ut-accent); border-radius: 999px; font: 500 11px/1.4 'Readex Pro', sans-serif; color: #d9d3ff; white-space: nowrap; cursor: pointer; box-shadow: none; }
.ut-cp-chip b { color: #fff; font-weight: 600; }
.ut-cp-chip i, .ut-cp-btn i { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--ut-accent); color: #fff; font-style: normal; }
.ut-cp-chip.is-done i, .ut-cp-btn.is-done i { background: #2fb768; }
.ut-cp-chip:focus-visible, .ut-cp-btn:focus-visible { outline: 2px solid #c9b8ff; outline-offset: 2px; }
.ut-cp-box { margin-bottom: 20px; padding: 14px 16px; background: var(--ut-surface); border: 1px solid var(--ut-border); border-radius: 14px; font-family: 'Readex Pro', sans-serif; color: var(--ut-text); }
.ut-cp-msg { margin: 0; font-size: 15px; line-height: 1.6; color: #fff; }
.ut-cp-msg em { font-style: normal; font-weight: 600; color: #c9b8ff; }
.ut-cp-bar { position: relative; height: 8px; margin: 16px 16px 30px; background: var(--ut-bg); border-radius: 8px; }
.ut-cp-fill { position: absolute; top: 0; bottom: 0; right: 0; background: var(--ut-accent); border-radius: 8px; transition: width .4s ease; }
.ut-cp-mk { position: absolute; top: -6px; transform: translateX(50%); font-size: 11px; line-height: 1; color: var(--ut-muted); text-align: center; white-space: nowrap; }
.ut-cp-mk::before { content: ''; display: block; width: 14px; height: 14px; margin: 3px auto 5px; background: var(--ut-bg); border: 2px solid var(--ut-border); border-radius: 50%; box-sizing: border-box; }
.ut-cp-mk.on { color: #fff; }
.ut-cp-mk.on::before { background: var(--ut-accent); border-color: #c9b8ff; }
.ut-cp-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #261c55; border: 1px dashed var(--ut-accent); border-radius: 10px; }
.ut-cp-row.is-ok { background: #2fb7681a; border: 1px solid #2fb76880; }
.ut-cp-t { flex: 1; font-size: 13px; line-height: 1.6; color: #d9d3ff; }
.ut-cp-t b { color: #fff; font-weight: 600; }
.ut-cp-row.is-ok .ut-cp-t svg { color: #2fb768; vertical-align: -1px; }
.ut-cp-btn { appearance: none; display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 5px 10px 5px 6px; background: var(--ut-accent); border: 0; border-radius: 8px; font: 500 12px/1.4 'Readex Pro', sans-serif; color: #fff; white-space: nowrap; cursor: pointer; }
.ut-cp-btn i { background: #ffffff33; }
.ut-rd-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.ut-rd-tabs button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px 0 14px; border-radius: 999px; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; background: #0f0f16; color: #c4c4d6; border: 1px solid var(--ut-border); white-space: nowrap; }
.ut-rd-tabs button[aria-pressed="true"] { background: var(--ut-select-bg); color: #fff; border: 2px solid var(--ut-select-border); }
.ut-rd-field { display: flex; flex-direction: column; gap: 8px; }
.ut-rd-inputs { display: flex; flex-direction: column; gap: 14px; }
.ut-rd-label { font-size: 13px; color: var(--ut-muted); line-height: 1.6; }
.ut-rd-label em { font-style: normal; color: #9a8cff; margin-inline-start: 6px; }
.ut-rd-select { position: relative; }
.ut-rd-select select { width: 100%; min-height: 52px; border-radius: 12px; background: #0f0f16; border: 1px solid #4b44a0; color: #fff; font: inherit; font-weight: 700; font-size: 16px; padding: 0 14px 0 44px; appearance: none; -webkit-appearance: none; cursor: pointer; }
.ut-rd-select select:disabled { opacity: 1; cursor: default; border-color: var(--ut-border); }
.ut-rd-select::after { content: ''; position: absolute; left: 18px; top: 50%; width: 9px; height: 9px; border: solid #c9c2ff; border-width: 0 0 2px 2px; transform: translateY(-70%) rotate(-45deg); pointer-events: none; }
.ut-rd-select:has(select:disabled)::after { display: none; }
.ut-rd-qty { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ut-rd-qty button { min-height: 62px; border-radius: 12px; font: inherit; color: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: #171717; border: 1px solid #62626c; }
.ut-rd-qty button b { font-size: 15px; }
.ut-rd-qty button small { font-size: 12px; color: #c4c4d6; }
.ut-rd-qty button[aria-pressed="true"] { background: var(--ut-select-bg); border: 2px solid var(--ut-select-border); }
.ut-rd-qty .ut-rd-more { grid-column: 1 / -1; min-height: 44px; background: transparent; border: 1px dashed #4b44a0; color: #c9c2ff; font-weight: 600; font-size: 14px; }
.ut-rd-linkbox { position: relative; }
.ut-rd-linkbox input { width: 100%; box-sizing: border-box; min-height: 52px; border-radius: 12px; background: #0f0f16; border: 1px solid var(--ut-border); color: #f4f4fb; padding: 0 14px 0 88px; font: inherit; font-size: 14px; }
.ut-rd-linkbox input:focus { outline: none; border-color: var(--ut-select-border); box-shadow: 0 0 0 3px #9696ff33; }
.ut-rd-linkbox input[aria-invalid="true"] { border-color: #ff6b81; box-shadow: 0 0 0 3px #ff6b8133; }
.ut-rd-paste { position: absolute; left: 6px; top: 6px; min-width: 72px; height: 40px; border-radius: 9px; border: 1px solid #8686fd70; background: var(--ut-select-bg); color: #e2e2ff; font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; }
.ut-rd-go { width: 100%; min-height: 56px; }
.ut-rd-applepay.is-wait { min-height: 52px; }
/* مكان زر Apple Pay قبل ما يتحمّل (يتحمّل أول ما العميل يلمس الصفحة) */
.ut-rd-applepay .ut-ap-ph { display: flex; align-items: center; justify-content: center; gap: 6px; height: 52px; border-radius: 14px; background: #000; color: #fff; font-size: 17px; font-weight: 600; direction: ltr; }
.ut-rd-applepay .ut-ap-ph svg { width: 18px; height: 18px; fill: #fff; }
/* شعار الثيم: نحافظ على نسبته (ملاحظة أداة جوجل) */
img.logo-dark, img.logo-light { object-fit: contain; }
.ut-rd-applepay salla-quick-buy { display: block; width: 100%; }
.ut-rd-applepay apple-pay-button { --apple-pay-button-width: 100%; --apple-pay-button-height: 52px; --apple-pay-button-border-radius: 14px; width: 100%; }
.ut-rd-msg { margin: 0; font-size: 14px; min-height: 0; }
.ut-rd-msg:empty { display: none; }
.ut-rd-msg.is-ok { color: #8ef0b6; }
.ut-rd-msg.is-bad { color: #ff8fa0; }
.ut-rd-msg a { color: #fff !important; font-weight: 700; text-decoration: underline; margin-inline-start: 6px; }

/* شبكة المنصات */
.ut-rd-platforms { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.ut-rd-plat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 104px; padding: 12px 6px; border-radius: 16px; background: var(--ut-surface); border: 1px solid var(--ut-border); color: var(--ut-text) !important; font-weight: 600; font-size: 14px; text-decoration: none; text-align: center; }
.ut-rd-plat:hover { border-color: #4b44a0; background: var(--ut-surface-2); }

/* الأكثر طلبًا: سطر لكل منصة */
.ut-rd-best-head { margin-bottom: 22px; }
.ut-rd-best-head .ut-rd-h2 { margin: 0; }
.ut-rd-rows { display: flex; flex-direction: column; gap: 30px; }
.ut-rd-row { scroll-margin-top: 90px; }
.ut-rd-row-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ut-rd-row-head h3 { margin: 0; font-family: 'Readex Pro', sans-serif; font-size: 19px; font-weight: 700; color: #fff; }
.ut-rd-row-head small { color: var(--ut-muted); font-size: 13px; }
.ut-rd-all { margin-inline-start: auto; min-height: 44px; display: inline-flex; align-items: center; padding: 0 4px; color: #c9c2ff !important; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.ut-rd-track { display: grid; grid-auto-flow: column; grid-auto-columns: 230px; gap: 14px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.ut-rd-track > * { scroll-snap-align: start; }
.ut-rd-prod { background: var(--ut-surface); border: 1px solid var(--ut-border); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.ut-rd-tile { position: relative; height: 128px; display: grid; place-items: center; text-decoration: none; }
.ut-rd-badge { position: absolute; top: 10px; right: 10px; background: #0d0d12cc; color: #fff; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 10px; }
.ut-rd-icon { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; }
.ut-rd-kind { position: absolute; bottom: 10px; left: 12px; font-size: 12px; font-weight: 700; }
.ut-rd-tile.has-img { height: auto; aspect-ratio: 1 / 1; background: #16161f !important; }
.ut-rd-tile.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ut-rd-tile.has-img .ut-rd-badge { z-index: 1; }
.ut-rd-pbody { padding: 14px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ut-rd-pbody h3 { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.5; }
.ut-rd-pbody h3 a { color: #f4f4fb !important; text-decoration: none; }
.ut-rd-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.ut-rd-price small { font-size: 13px; color: var(--ut-muted); }
.ut-rd-price b { font-family: 'Readex Pro', sans-serif; font-size: 21px; color: #fff; }
.ut-rd-price s { font-size: 13px; color: var(--ut-muted); }
.ut-rd-order { min-height: 46px; border-radius: 12px; background: var(--ut-select-bg); border: 1px solid #4b44a0; color: #fff !important; font-weight: 600; font-size: 15px; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.ut-rd-order:hover { background: #6d5dfc; }
@media (max-width: 480px) {
  .ut-rd-quick { padding: 16px; }
  .ut-rd-platforms { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .ut-rd-plat { min-height: 88px; font-size: 12px; padding: 10px 4px; }
  .ut-rd-plat .ut-rd-logo { width: 38px !important; height: 38px !important; }
  .ut-rd-track { grid-auto-columns: 44%; gap: 10px; }
  .ut-rd-tile { height: 104px; }
  .ut-rd-icon { width: 52px; height: 52px; border-radius: 16px; }
  .ut-rd-icon svg { width: 28px; height: 28px; }
  .ut-rd-pbody { padding: 12px; }
  .ut-rd-pbody h3 { font-size: 14px; }
  .ut-rd-price b { font-size: 18px; }
}

/* ===== القائمة الجانبية المرتبة ===== */
#mobile-menu .ut-mm-hide { display: none !important; }
#mobile-menu .ut-mm-head { padding: 18px 20px 6px; font-size: 12px; font-weight: 700; color: var(--ut-muted); list-style: none; pointer-events: none; }
#mobile-menu .ut-mm-head::after, #mobile-menu .ut-mm-head::before { display: none !important; }
#mobile-menu .ut-mm-item > a { display: flex !important; align-items: center; gap: 12px; min-height: 52px; padding: 8px 20px !important; color: #f4f4fb !important; }
#mobile-menu .ut-mm-item > a:hover { background: var(--ut-surface-2); }
#mobile-menu .ut-mm-item .menu_title { font-size: 15px; font-weight: 600; }
#mobile-menu .ut-mm-icon { display: inline-flex !important; flex: 0 0 auto; padding: 0 !important; }
#mobile-menu .ut-mm-icon .ut-rd-logo { display: inline-grid !important; padding: 0 !important; }

.ut-rd-tabs-pk { margin-top: -4px; }

.ut-rd-pk-inc { margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: #13131c; border: 1px solid var(--ut-select-border); }
.ut-rd-pk-inc[hidden] { display: none; }
.ut-rd-pk-inc > span { display: block; font-size: 13px; font-weight: 700; color: #c9c2ff; margin-bottom: 8px; }
.ut-rd-pk-inc ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
.ut-rd-pk-inc li { font-size: 14px; color: #e6e6f0; display: flex; align-items: baseline; gap: 6px; }
.ut-rd-pk-inc li::before { content: '✓'; color: #7ee2a8; font-weight: 700; }
.ut-rd-pk-inc li b { color: #fff; }
.ut-rd-row-free { border: 1px solid #2f6b4a; background: linear-gradient(180deg, #11211a, transparent); border-radius: 18px; padding: 14px; }
.ut-rd-row-free .ut-rd-logo.is-plain { background: #1d4a33; color: #7ee2a8; }
.ut-rd-free-note { margin: 0 0 12px; font-size: 14px; color: #b9e9cc; }
.ut-rd-prod.is-free .ut-rd-badge { background: #15803d; }
.ut-rd-prod.is-free .ut-rd-price b { color: #7ee2a8; }

/* قبل ما يشتغل الكود: نحجز مكان الهيدر الجديد بطوله بالضبط (مع الشعار) بدل هيدر الثيم،
   عشان الصفحة ما تنزل لتحت لما يطلع الهيدر الجديد (اهتزاز CLS). لو تعطّل الكود يرجع هيدر الثيم بعد 6 ثواني */
@keyframes ut-hd-ph { to { height: 0; border-top-width: 0; background: none; } }
@media (min-width: 1024px) {
  body:not(.ut-hd-on) #mainnav .angel-ad,
  body:not(.ut-hd-on) #mainnav .header-container { visibility: hidden; max-height: 0; overflow: hidden; margin: 0; padding: 0; border: 0; animation: ut-rd-fallback 0s 15s forwards; }
  body:not(.ut-hd-on) #mainnav .header-inner::before { content: ''; display: block; height: 143px; box-sizing: border-box; border-top: 4px solid #6d5dfc;
    background: url(https://cdn.files.salla.network/homepage/1003891273/8f407d9f-c6b4-4266-898f-a4153412f19e.webp) right 45px top 69px / auto 40px no-repeat, linear-gradient(#13131c 0 38px, #22222f 38px 39px, var(--ut-bg) 39px);
    animation: ut-hd-ph 0s 6s forwards; }
}
@media (max-width: 1023px) {
  body:not(.ut-hdm-on) #mainnav .angel-ad,
  body:not(.ut-hdm-on) #mainnav .header-container { visibility: hidden; max-height: 0; overflow: hidden; margin: 0; padding: 0; border: 0; animation: ut-rd-fallback 0s 15s forwards; }
  body:not(.ut-hdm-on) #mainnav .header-inner::before { content: ''; display: block; height: 163px; box-sizing: border-box; border-top: 3px solid #6d5dfc;
    background: url(https://cdn.files.salla.network/homepage/1003891273/8f407d9f-c6b4-4266-898f-a4153412f19e.webp) calc(50% + 45px) 58px / auto 32px no-repeat, linear-gradient(#13131c 0 33px, #22222f 33px 34px, var(--ut-bg) 34px);
    animation: ut-hd-ph 0s 6s forwards; }
}

/* ===== هيدر الكمبيوتر (1024px وفوق) — الجوال يبقى على هيدر الثيم ===== */
.ut-hd { display: none; }
@media (min-width: 1024px) {
  body.ut-hd-on #mainnav .angel-ad,
  body.ut-hd-on #mainnav .header-container { display: none !important; }
  .ut-hd { display: block; background: var(--ut-bg); border-top: 4px solid #6d5dfc; }
  .ut-hd-top { display: flex; justify-content: center; gap: 36px; padding: 8px 24px; background: #13131c; border-bottom: 1px solid #22222f; font-size: 13px; color: #c9c2ff; }
  .ut-hd-top span { display: inline-flex; align-items: center; gap: 6px; }
  .ut-hd-wrap { padding: 14px 32px; }
  .ut-hd-bar { display: flex; align-items: center; gap: 14px; height: 72px; padding: 0 12px 0 22px; border-radius: 999px; background: #15151e; border: 1px solid #3a3466; }
  .ut-hd-logo { display: flex; flex: 0 0 auto; }
  .ut-hd-logo img { height: 40px; width: auto; display: block; }
  .ut-hd-nav { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; align-items: center; gap: 2px; font-size: 14px; }
  .ut-hd-link { display: inline-flex; align-items: center; gap: 7px; padding: 9px 11px; border-radius: 999px; white-space: nowrap; color: #d6d6e4 !important; background: transparent; border: 0; font: inherit; cursor: pointer; text-decoration: none; transition: background .15s, color .15s; }
  .ut-hd-link:hover, .ut-hd-drop.is-open > .ut-hd-link { background: #1f1d36; color: #ffffff !important; }
  .ut-hd-link.is-on { background: #24213f; color: #ffffff !important; }
  .ut-hd-link.is-free { color: #7ee2a8 !important; }
  .ut-hd-link:focus-visible, .ut-hd-btn:focus-visible, .ut-hd-cart:focus-visible, .ut-hd-menu a:focus-visible { outline: 2px solid #8b7dff; outline-offset: 2px; }
  .ut-hd-drop { position: relative; display: flex; }
  .ut-hd-drop > .ut-hd-link svg { transition: transform .15s; }
  .ut-hd-drop.is-open > .ut-hd-link svg { transform: rotate(180deg); }
  .ut-hd-menu { position: absolute; top: calc(100% + 14px); right: 50%; transform: translateX(50%); z-index: 60; display: none; grid-template-columns: 1fr 1fr; gap: 4px; width: 360px; padding: 10px; border-radius: 18px; background: #15151e; border: 1px solid #3a3466; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
  .ut-hd-drop.is-packs .ut-hd-menu { grid-template-columns: 1fr; width: 220px; }
  .ut-hd-menu::before { content: ''; position: absolute; top: -16px; right: 0; left: 0; height: 16px; }
  .ut-hd-drop:hover .ut-hd-menu, .ut-hd-drop.is-open .ut-hd-menu { display: grid; }
  .ut-hd-menu a { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 12px; font-size: 14px; color: #d6d6e4 !important; text-decoration: none; white-space: nowrap; }
  .ut-hd-menu a:hover { background: #1f1d36; color: #ffffff !important; }
  .ut-hd-menu a.ut-hd-all { grid-column: 1 / -1; justify-content: center; background: #24213f; color: #ffffff !important; }
  .ut-hd-btns { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
  .ut-hd-btn { width: 48px; height: 48px; border-radius: 50%; border: 0; background: #22222f; color: #f4f4fb; display: grid; place-items: center; cursor: pointer; }
  .ut-hd-btn:hover { background: #2c2c3d; }
  .ut-hd-cart { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 8px 0 18px; border-radius: 999px; background: #6d5dfc; color: #ffffff !important; text-decoration: none; font-size: 15px; font-weight: 600; white-space: nowrap; }
  .ut-hd-cart:hover { background: #5a4ae6; }
  .ut-hd-cart i { width: 34px; height: 34px; border-radius: 50%; background: #ffffff; color: #3a2fb8; display: grid; place-items: center; font-style: normal; }
  .ut-hd-cart b { font-weight: 600; }
  /* شاشات أضيق: أسماء المنصات تختفي وتبقى الشعارات، بعدها كلمة السلة، بعدها نصغّر المسافات */
  .ut-hd-bar.is-c1 .ut-hd-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ut-hd-bar.is-c2 .ut-hd-cart { padding: 0 7px; }
  .ut-hd-bar.is-c2 .ut-hd-cart > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ut-hd-bar.is-c3 .ut-hd-link { padding: 9px 8px; }
  .ut-hd-bar.is-c3 { gap: 8px; }
}

/* ===== هيدر الجوال (أقل من 1024px) ===== */
.ut-hdm { display: none; }
@media (max-width: 1023px) {
  body.ut-hdm-on #mainnav .angel-ad,
  body.ut-hdm-on #mainnav .header-container { display: none !important; }
  .ut-hdm { display: block; background: var(--ut-bg); border-top: 3px solid #6d5dfc; }
  .ut-hdm-top { display: flex; justify-content: center; gap: 14px; padding: 7px 10px; background: #13131c; border-bottom: 1px solid #22222f; font-size: 11px; color: #c9c2ff; white-space: nowrap; overflow: hidden; }
  .ut-hdm-top span { display: inline-flex; align-items: center; gap: 4px; }
  .ut-hdm-wrap { padding: 10px 12px 0; }
  .ut-hdm-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; align-items: center; height: 60px; padding: 0 7px; border-radius: 999px; background: #15151e; border: 1px solid #3a3466; }
  .ut-hdm-side { display: flex; gap: 5px; }
  .ut-hdm-side.is-end { justify-content: flex-end; }
  .ut-hdm-logo { display: flex; justify-self: center; }
  .ut-hdm-logo img { height: 32px; width: auto; display: block; }
  .ut-hdm-btn { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #22222f; color: #f4f4fb !important; display: grid; place-items: center; cursor: pointer; text-decoration: none; }
  .ut-hdm-btn.is-cart { background: #6d5dfc; color: #ffffff !important; }
  .ut-hdm-count { position: absolute; top: -3px; left: -3px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 9px; background: #ffffff; color: #3a2fb8; font-size: 11px; font-weight: 700; line-height: 1; display: grid; place-items: center; border: 2px solid #15151e; }
  .ut-hdm-count[hidden] { display: none; }
  .ut-hdm-chips { display: flex; gap: 8px; padding: 10px 12px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; font-size: 13px; }
  .ut-hdm-chips::-webkit-scrollbar { display: none; }
  .ut-hdm-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px; white-space: nowrap; background: #16161f; border: 1px solid #22222f; color: #d6d6e4 !important; font: inherit; text-decoration: none; cursor: pointer; }
  .ut-hdm-chip.is-on { background: #24213f; border-color: #4b44a0; color: #ffffff !important; }
  .ut-hdm-chip.is-free { color: #7ee2a8 !important; }
  .ut-hdm-btn:focus-visible, .ut-hdm-chip:focus-visible { outline: 2px solid #8b7dff; outline-offset: 2px; }
}

/* ===== قائمة الحساب (للمسجّل) — كمبيوتر وجوال ===== */
.ut-acc { position: relative; display: flex; }
.ut-acc-menu { position: absolute; top: calc(100% + 10px); left: 0; z-index: 70; min-width: 190px; padding: 8px; border-radius: 16px; background: #15151e; border: 1px solid #3a3466; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); display: flex; flex-direction: column; gap: 2px; }
.ut-acc-menu[hidden] { display: none; }
.ut-acc-menu b { padding: 8px 12px 6px; font-size: 13px; font-weight: 600; color: #c9c2ff; }
.ut-acc-menu a { padding: 10px 12px; border-radius: 10px; font-size: 14px; color: #d6d6e4 !important; text-decoration: none; white-space: nowrap; }
.ut-acc-menu a:hover { background: #1f1d36; color: #ffffff !important; }
.ut-acc-menu a.is-out { color: #ff8a9b !important; }

/* ===== زر «أضف للسلة» تحت الخدمة + نافذة الطلب ===== */
button.ut-rd-order { width: 100%; gap: 8px; font-family: inherit; cursor: pointer; }
html.ut-rd-lock, html.ut-rd-lock body { overflow: hidden !important; }
.ut-rd-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(5, 5, 10, .72); }
.ut-rd-modal[hidden] { display: none; }
.ut-rd-modal-box { position: relative; width: 100%; max-width: 480px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; border-radius: 22px; }
.ut-rd-modal-x { position: absolute; top: 14px; left: 14px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 0; background: #22222f; color: #f4f4fb; display: grid; place-items: center; cursor: pointer; }
.ut-rd-modal-x:hover { background: #2c2c3d; }
.ut-rd-quick.is-modal { max-width: none; margin: 0; box-shadow: none; }
.ut-rd-quick.is-modal .ut-rd-tabs { display: none; }
.ut-rd-quick.is-modal .ut-rd-quick-head small { display: none; }
@media (max-width: 640px) {
  .ut-rd-modal { align-items: flex-end; padding: 0; }
  .ut-rd-modal-box { max-width: none; max-height: 92vh; max-height: 92dvh; border-radius: 22px 22px 0 0; }
  .ut-rd-quick.is-modal { border-radius: 22px 22px 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}
.ut-rd-quick-ph { flex: 1 1 380px; min-width: 0; max-width: 480px; margin: 0 auto; }

/* ===== أرقام المتجر تحت الهيرو ===== */
.ut-rd-stats { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ut-rd-stats li { margin: 0; padding: 16px 12px; border-radius: 16px; background: #16161f; border: 1px solid #2c2c3d; text-align: center; display: flex; flex-direction: column; gap: 4px; }
.ut-rd-stats b { font-size: 26px; font-weight: 700; color: #fff; line-height: 1.3; font-variant-numeric: tabular-nums; }
.ut-rd-stats li:first-child b { color: #b3a8ff; }
.ut-rd-stats span { font-size: 14px; color: #a9a9bd; }
@media (max-width: 767px) {
  .ut-rd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
  .ut-rd-stats li { padding: 12px 8px; }
  .ut-rd-stats b { font-size: 21px; }
  .ut-rd-stats span { font-size: 13px; }
}

/* ===== نافذة البحث ===== */
.ut-sr { position: fixed; inset: 0; z-index: 10000; background: rgba(6, 6, 10, .72); display: flex; justify-content: center; align-items: flex-start; padding: 80px 16px 16px; direction: rtl; font-family: inherit; }
.ut-sr[hidden] { display: none !important; }
.ut-sr-box { width: 100%; max-width: 640px; max-height: calc(100vh - 110px); display: flex; flex-direction: column; background: #16161f; border: 1px solid #3a3466; border-radius: 20px; box-shadow: 0 24px 60px rgba(0,0,0,.5); overflow: hidden; }
.ut-sr-form { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #2c2c3d; color: #9a8cff; margin: 0; }
.ut-sr-input { flex: 1; min-width: 0; height: 46px; border: 0 !important; outline: 0; background: transparent !important; color: #f4f4fb !important; font: inherit; font-size: 16px; box-shadow: none !important; padding: 0 !important; }
.ut-sr-input::placeholder { color: #77778f; }
.ut-sr-input::-webkit-search-cancel-button { display: none; }
.ut-sr-x { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: 0; background: #22222f; color: #f4f4fb; display: grid; place-items: center; cursor: pointer; }
.ut-sr-body { overflow-y: auto; padding: 8px; -webkit-overflow-scrolling: touch; }
.ut-sr-note { margin: 8px 8px 10px; font-size: 14px; color: #a9a9bd; }
.ut-sr-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 8px 10px; }
.ut-sr-chips button { height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid #2c2c3d; background: #1c1b2e; color: #e6e6f0; font: inherit; font-size: 14px; cursor: pointer; }
.ut-sr-chips button:hover { border-color: #6d5dfc; color: #fff; }
.ut-sr-item { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; text-decoration: none !important; color: #f4f4fb !important; }
.ut-sr-item:hover, .ut-sr-item:focus-visible { background: #22203d; outline: 0; }
.ut-sr-item img, .ut-sr-item i { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px; object-fit: cover; background: #22222f; }
.ut-sr-item span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ut-sr-item b { font-weight: 600; font-size: 15px; line-height: 1.4; }
.ut-sr-item small { font-size: 12px; color: #9a8cff; }
@media (max-width: 640px) {
  .ut-sr { padding: 0; align-items: stretch; }
  .ut-sr-box { max-width: none; max-height: none; height: 100%; border-radius: 0; border: 0; }
}

/* ===== تأكيد الإضافة للسلة (بعد ما تتسكر النافذة) ===== */
.ut-toast { position: fixed; left: 50%; bottom: 24px; z-index: 10001; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 12px 14px 12px 18px; border-radius: 14px; background: #12261c; border: 1px solid #2f6b4a; color: #c9f5dc; font-size: 15px; box-shadow: 0 14px 40px rgba(0,0,0,.45); direction: rtl; }
.ut-toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.ut-toast span { line-height: 1.5; }
.ut-toast a { flex: 0 0 auto; padding: 8px 14px; border-radius: 10px; background: #6d5dfc; color: #fff !important; text-decoration: none !important; font-weight: 600; font-size: 14px; white-space: nowrap; }
@media (max-width: 1023px) { .ut-toast { bottom: 84px; width: calc(100vw - 32px); justify-content: space-between; } }

/* سهولة الوصول: رابط الحقوق بالفوتر يبان إنه رابط مو بس باللون */
.store-footer p a[target="_blank"] { text-decoration: underline; text-underline-offset: 3px; }
/* سهولة الوصول: عناوين الثيم البنفسجية (آراء العملاء، خدمة العملاء بالفوتر) أفتح شوي عشان تنقرا على الخلفية الداكنة */
.s-slider-block__title h2, .s-contacts-title { color: #9a8cff !important; }

/* ===== صفحة ما بعد الدفع (صفحة سلة للتسليم الرقمي /orders/digital) =====
   تطبيق من سلة نفسها يحمّل CSS التصميم المنشور بس (بدون الجافاسكربت)، فكل الترتيب هنا CSS.
   صفحات المتجر body فيها كلاسات، وهذي الصفحة body بدون كلاس — كذا ما نلمس باقي المتجر */
body:not([class]) { background: #0d0d12 !important; color: #f4f4fb; }
body:not([class]) #root .bg-white { background: #16161f !important; border: 1px solid #2c2c3d; border-radius: 20px !important; }
body:not([class]) #root .bg-white .bg-white { border: 0; border-radius: 0 !important; }
body:not([class]) #root .rounded-lg.bg-white:first-child { background: radial-gradient(120% 90% at 50% 0, rgba(109,93,252,.22), transparent 60%), #16161f !important; }
body:not([class]) #root .text-text-color, body:not([class]) #root .text-gray-900, body:not([class]) #root dt, body:not([class]) #root dd, body:not([class]) #root h2 { color: #f4f4fb !important; }
body:not([class]) #root .text-gray-500, body:not([class]) #root [class*="text-[#999999]"], body:not([class]) #root [class*="text-[#666666]"] { color: #a9a9bf !important; }
body:not([class]) #root .hover\:bg-gray-50:hover { background: transparent !important; }
body:not([class]) #root .divide-gray-100 > * + * { border-color: #2c2c3d !important; }
body:not([class]) #root .border-gray-200 { border-color: #2c2c3d !important; background: #1d1d2a; border-radius: 12px !important; }
body:not([class]) #root [class*="border-[#cecece]"] { border-color: #2c2c3d !important; background: #0d0d12; }
body:not([class]) #root .bg-gray-100 { background: #1d1d2a !important; }
body:not([class]) #root .text-primary, body:not([class]) #root .text-store-color { color: #9a8cff !important; }
body:not([class]) #root .item-options-section h2 { color: #a9a9bf !important; font-weight: 600; }
/* «العودة للمتجر» بدل مسار الصفحة الصغير تحت الترحيب */
body:not([class]) #root .rounded-lg.bg-white:first-child p { font-size: 0 !important; }
body:not([class]) #root .rounded-lg.bg-white:first-child p > :not(:first-child) { display: none; }
body:not([class]) #root .rounded-lg.bg-white:first-child p > a:first-child { font-size: 0 !important; text-decoration: none !important; padding: 0 !important; }
body:not([class]) #root .rounded-lg.bg-white:first-child p > a:first-child::after { content: 'العودة للمتجر'; display: inline-flex; align-items: center; height: 40px; padding: 0 20px; border: 1px solid #2c2c3d; border-radius: 12px; background: #1d1d2a; color: #f4f4fb; font-size: 14px; font-weight: 600; }
/* الدعم: نخفي «فتح تذكرة» ونحط سطر الواتساب */
body:not([class]) #root .mb-3:has(a[href*="complaint.salla.sa"]) { display: none !important; }
body:not([class]) #root .mb-3:has(> .text-\[\#666666\]) { background: #16161f; border: 1px solid #2c2c3d; border-radius: 20px; padding: 14px 20px; margin-bottom: 0 !important; }
body:not([class]) #root .flex-col.items-center.justify-center.gap-6 > .w-full::after { content: 'أي سؤال عن طلبك؟ تواصل معنا وبنرد عليك خلال ساعة إلى 24 ساعة'; display: block; margin-top: 12px; text-align: center; font-size: 13px; color: #a9a9bf; }