/* مطابقة خلفية الفيديو مع الهيدر */
section[section-id="96c2ffa8-a75f-4600-a5c0-42c0f87636df"],
section[section-id="96c2ffa8-a75f-4600-a5c0-42c0f87636df"] .video-wrapper,
section[section-id="96c2ffa8-a75f-4600-a5c0-42c0f87636df"] video {
    background-color: var(--secondary) !important;
}

/* توسيط الفيديو */
section[section-id="96c2ffa8-a75f-4600-a5c0-42c0f87636df"] video {
    display: block;
    margin: 0 auto;
    object-fit: contain !important;
}

/* الجوال فقط */
@media (max-width: 767px) {

  /* أيقونة القائمة باللون الأبيض */
  button[aria-label="Toggle menu"],
  button[aria-label="Toggle menu"] > span {
    color: #ffffff !important;
    background-color: #ffffff;
  }

  button[aria-label="Toggle menu"] {
    background-color: transparent !important;
  }

  /* نصوص القائمة الجانبية بالبنفسجي */
  #mobile-drawer-dialog a,
  #mobile-drawer-dialog button:not([aria-label="Toggle menu"]) {
    color: #252161 !important;
    -webkit-text-fill-color: #252161 !important;
  }

  /* خلفية القائمة */
  #mobile-drawer-dialog {
    background-color: #ffffff !important;
  }

  /* تأثير الضغط على الروابط */
  #mobile-drawer-dialog a:hover,
  #mobile-drawer-dialog button:hover {
    background-color: #f0f0f0 !important;
  }
}


/* عرض الفيديو بمقاس بوست طولي 4:5 */
section.section-video video {
    width: min(100%, 432px) !important;
    height: auto !important;
    aspect-ratio: 4 / 6 !important;
    object-fit: cover !important;
    transform: none !important;
    margin: 0 auto !important;
}

/* الجوال */
@media (max-width: 767px) {
    section.section-video video {
        width: 100% !important;
        max-width: 480px !important;
    }
}


/* توسيط الفيديو داخل القسم */
section.section-video .video-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* توسيط محتوى الفيديو */
section.section-video video {
    object-position: center center !important;
    transform-origin: center center !important;
    margin: auto !important;
}



/* خلفية الهيدر */
header {
    background-color: #252161 !important;
}

/* خلفية الفوتر */
footer {
    background-color: #252161 !important;
}


/* لون نصوص وروابط الهيدر */
header,
header a,
header .text-foreground,
header nav,
header ul,
header li {
    color: #FFFFFF !important;
}

/* لون نصوص وروابط الفوتر */
footer,
footer a,
footer p,
footer h3,
footer .text-foreground,
footer li,
footer span {
    color: #FFFFFF !important;
}

/* لون أيقونات الهيدر والفوتر */
header svg,
footer svg {
    color: #FFFFFF !important;
    stroke: currentColor !important;
}


/* توحيد الخلفية الأساسية للمتجر */

/* خلفية ملخص الطلب فقط */
[data-order-summary] {
    background-color: #EFEEEE !important;
}


/* خلفية الشريط الإعلاني */
[data-announcement-bar] {
    background-color: #f0f0f0 !important;
}

/* لون نص الشريط الإعلاني */
[data-announcement-bar] p {
    color: #252161 !important;
}

/* Uniqueline - توسيط الشعار في الهيدر */

@media (min-width: 1024px) {

    header nav {
        position: relative !important;
    }

    /* الشعار في منتصف الهيدر */
    header nav a[href="/"]:has(img) {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 30 !important;
        margin: 0 !important;
    }

    /* الحفاظ على حجم الشعار */
    header nav a[href="/"]:has(img) img {
        position: static !important;
        transform: none !important;
        object-fit: contain !important;
    }

    /* مساحة تمنع اقتراب القائمة من الشعار */
    header nav ul,
    header nav [data-header-menu] {
        padding-left: 90px !important;
    }
}


/* Uniqueline - تصحيح ألوان قائمة التصنيفات */

/* خلفية القائمة المنسدلة */
#more-menu-popover {
    background-color: #FFFFFF !important;
    border: 1px solid #D8D8D8 !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08) !important;
}

/* لون النص */
#more-menu-popover a {
    color: #252161 !important;
    background-color: transparent !important;
}

/* عند تمرير الماوس */
#more-menu-popover a:hover {
    background-color: #F0F0F0 !important;
    color: #252161 !important;
}


/* إخفاء جميع المنتجات */
a[href="/products/"].text-foreground {
    display: none !important;
}

/* إخفاء جميع التصنيفات */
a[href="/categories/"].text-foreground {
    display: none !important;
}