/* تخصيص شريط التمرير */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: white;
}
::-webkit-scrollbar-thumb {
background: #3C80ED;
border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
background: #3C80ED;
}
/* فايرفوكس */
html {
scrollbar-width: thin;
scrollbar-color: #3C80ED white;
}
::selection {
color: white;
background: #3C80ED;
}

/* ======== تثبيت ألوان الهيدر والفوتر ======== */
.store-footer,
.store-footer > div, footer{
background: white !important;
color: #3c80ed !important;
}

#mainnav > div,
.main-nav-container,
.main-nav-container .inner,
.store-header,
header *,
.main-nav-container,
.main-nav-container * {
background:  #3c80ed !important;
color: white  !important;
}
.s-cart-summary-count {
color: #3c80ed !important;
background: white !important;
}

/* ======== ضمان ظهور الهيدر في كل الأحجام ======== */
header {
display: block !important;
}
header .top-nav {
display: block !important; /* إظهار الشريط العلوي للهيدر إن وجد */
}

/* ======== تنسيق البنر (السلايدر) دون تغيير عرضه ======== */
.s-block.s-block--photos-slider {
margin: 0 auto !important;
}
/* إخفاء عنوان السلايدر فقط (كما كان) */
#photos-0-slider > div.s-slider-block__title > div > div {
display: none !important;
}
.s-block.s-block--photos-slider salla-slider.photos-slider .swiper-slide {
width: 100% !important;
max-width: 100% !important;
}

/* ======== ألوان الفوتر ======== */
footer .text-center .text-sm,
footer > div.flex.flex-col-reverse > div.text-sm * {
color: white !important;
}

/* ======== بطاقات المنتجات (تحوم وحدود) ======== */
custom-salla-product-card {
position: relative;
overflow: hidden;
border-radius: 15px !important;
padding: 0.4rem !important;
will-change: transform;
transform: translateZ(0);
backface-visibility: hidden;
transition: transform 0.35s ease, box-shadow 0.35s ease;
cursor: pointer !important;
}
custom-salla-product-card::before,
custom-salla-product-card::after {
content: "";
position: absolute;
width: 20px;
height: 20px;
pointer-events: none;
z-index: 2;
transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1),
height 0.45s cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none !important; /* لا تعترض النقر */
}
custom-salla-product-card::before {
top: 0;
left: 0;
border-top: 2px solid #3c80ed;
border-left: 2px solid #3c80ed;
border-radius: 15px 0 0 0;
}
custom-salla-product-card::after {
right: 0;
bottom: 0;
border-right: 2px solid #01091d;
border-bottom: 2px solid #01091d;
border-radius: 0 0 15px 0;
}
custom-salla-product-card:hover::before,
custom-salla-product-card:hover::after {
width: calc(100% - 10px);
height: calc(100% - 10px);
}
custom-salla-product-card:hover {
transform: translate3d(0, -5px, 0);
box-shadow: 0 12px 28px rgba(172, 62, 91, 0.12);
}
custom-salla-product-card > * {
position: relative;
z-index: 3;
pointer-events: auto !important;
}
.swiper-wrapper,
.swiper-slide,
custom-salla-product-card {
backface-visibility: hidden;
transform-style: preserve-3d;
}
.swiper-slide {
transform: translateZ(0);
}

/* ======== ضبط حجم البطاقات ======== */
custom-salla-product-card {
padding: 0.8rem !important;
margin: 0.8rem !important;
}
.s-product-card-image-cover,
.s-product-card-image {
max-height: auto !important;
width: 100% !important;
aspect-ratio: 1/1 !important;
}
.s-product-card-content-footer {
padding: 0 !important;
margin: 0 !important;
}

/* ======== تخصيص الجوال (شاشات أقل من 768px) ======== */
@media (max-width: 768px) {
salla-add-product-button > div > salla-button > button,
salla-add-product-button {
padding: 0.1rem 0.4rem !important;
font-size: 0.77rem !important;
}
.s-button-text,
.s-button-text span {
font-size: 0.77rem !important;
padding: 0.1rem !important;
}
.s-product-card-image-cover,
.s-product-card-image {
background: white !important;
height: auto !important;
aspect-ratio: 1/1 !important;
max-height: auto !important;
width: 100% !important;
}
.s-product-card-image > a > img,
.s-product-card-image {
object-fit: contain !important;
background: white !important;
max-height: 6rem !important;
}
}

/* ======== ضبط صور السلايدر ======== */
.swiper-slide.swiper-slide-active > a > img {
object-fit: contain !important;
}
.swiper-slide.swiper-slide-active,
.swiper-slide.swiper-slide-active > a,
.swiper-slide {
background: white !important;
}
.top-nav{
display: none !important ;
}
#photos-0-slider > div.swiper.s-slider-container.swiper-initialized.swiper-horizontal {
padding: 0 !important;
}

#app > div.app-inner.flex.flex-col.min-h-full > div.relative.z-0 > footer > div.store-footer__top > div.full-about-block.has-overlay--before.bg-cover.bg-center.py-11.lg\:pt-22 > div > a > img {
content: url("https://asas-tools.com/u/uploads/sara_craffo/WhatsApp_Image_2026-09-04_at_5_20_01_PM-removebg-preview.png");
width: auto;
height: auto;
object-fit: contain;
}