body , .top-navbar , .s-search-input.s-search-input {background: white}

@media (min-width: 1024px) {
    .lg\:grid-cols-2 {
        grid-template-columns: unset !important;
    }
}
   .navbar-brand img {
    max-height: 8rem;
    max-width: 100%;
    width: auto;
}
.main-nav-container {
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    overflow: hidden; /* مهم عشان الزوايا تبان */
}
    .s-block {
        margin-top: 0rem;
    }
.main-menu {
    background: linear-gradient(90deg, #ff7a00, #ffa733, #ff7a00);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.s-cart-summary-total {
    font-weight: 600;
    --tw-text-opacity: 1;
   
    color: #ff7a00;
}
.header-btn__icon{    color: #ff7a00;
border-color: rgb(255 255 255);}
.header-btn {
    position: relative;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-btn {
    position: relative;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* الكتفين (من فوق الآن) */
.header-btn::before {
    content: "";
    width: 18px;
    height: 10px;
    border: 2px solid #ff7a00;
    border-bottom: none;
    border-radius: 25px 25px 0 0; /* انعقاد للأعلى */
    position: absolute;
    top: 15px; /* أصبح فوق */
}

/* الرأس (صار تحت) */
.header-btn::after {
    content: "";
    width: 10px;
    height: 10px;
    background: #ff7a00;
    border-radius: 50%;
    position: absolute;
    bottom: 16px;
}

.sicon-user-circle:before {
     color: #ffffff;
}.s-block__title h2 {
    text-align: center;
    font-size: 28px; /* حجم أكبر قليلًا */
    font-weight: bold;
    margin: 0 auto;

    /* تدرج النص */
    background: linear-gradient(90deg, #282523, #1e1d1b, #302d2a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    /* إضافة خط تحته */
    position: relative;
}

.s-block__title h2::after {
    content: "";
    display: block;
    width: 60px; /* طول الخط */
    height: 4px; /* سمك الخط */
    margin: 10px auto 0; /* المسافة بين النص والخط */
    border-radius: 2px; /* حواف ناعمة */
    background: linear-gradient(90deg, #282523, #1e1d1b, #302d2a); /* تدرج الخط */
}
.s-product-card-overlay {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    --tw-bg-opacity: 0;
    background-color: rgba(3,3,2,0.13); */
    background-color: rgba(0, 0, 0, var(--tw-bg-opacity, 1)); */
    opacity: .0;
    transition-duration: .0s;
    transition-property: opacity;
    transition-timing-function: 
cubic-bezier(.0, 0, .0, 0);
}
/* إزالة الإطار بالكامل */
.s-button-icon, 
.s-button-text {
    border: none !important;        /* إزالة أي إطار */
    box-shadow: none !important;    /* إزالة أي ظل */
    background: transparent !important; /* إزالة أي خلفية */
}

/* تلوين النص والرموز باللون البرتقالي */
.s-button-icon .s-button-text,
.s-button-icon i {
    color: #ff7a00 !important; /* اللون البرتقالي */
}

/* تحسين ظهور النص داخل الزر */
.s-button-text {
    display: flex;
    align-items: center;
    overflow: hidden;
    pointer-events: none;
    text-overflow: ellipsis;
    transition: opacity .3s cubic-bezier(.4, 0, .2, 1);
    white-space: nowrap;
}



.s-product-card-image-full {
    width: 100vw;            /* عرض كامل الشاشة */
    height: auto;            /* ارتفاع الصورة حسب نسبتها */
    display: block;
    object-fit: contain;      /* يحافظ على الصورة كاملة */
}

/* إذا كان العنصر يحتوي على صورة داخل img */
.s-product-card-image-full img {
    width: 100%;              /* يملأ العنصر كامل العرض */
    height: auto;             /* يحافظ على نسبة الارتفاع */
    object-fit: contain;      /* يظهر الصورة كاملة داخل العنصر */
    display: block;
}
.s-button-btn {
    /* خلفية برتقالية متدرجة أقوى */
    background: linear-gradient(90deg, #ff6a00, #ff9b33, #ff6a00);
    
    /* إزالة أي إطار أو ظل */
    border: none;
    box-shadow: none;
    
    /* نص أبيض واضح */
    color: #ffffff;
    font-weight: bold;
    font-size: 16px;
    
    /* محاذاة النص داخل الزر */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* الحواف */
    border-radius: 8px;
    
    /* تلميح للانتقال عند hover */
    transition: all 0.3s ease;
    padding: 10px 20px;
    cursor: pointer;
}

/* تأثير hover */
.s-button-btn:hover {
    background: linear-gradient(90deg, #ff9b33, #ff6a00, #ff9b33); /* انعكاس التدرج */
    transform: translateY(-2px); /* رفع خفيف */
}.s-product-card-full-image .s-product-card-content-title a{color: rgb(255 110 4);}
.s-product-card-full-image .s-product-card-price{color: #93501f;}
.s-reviews-header {
    text-align: center;       /* توسيط النص */
    font-size: 45px;          /* حجم مناسب */
    font-weight: bold;

    /* تدرج النص البرتقالي */
    background: linear-gradient(90deg, #282523, #1e1d1b, #302d2a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    position: relative;
    padding-bottom: 12px;     /* مسافة للخط أسفل النص */
}

/* الخط أسفل النص */
.s-reviews-header::after {
    content: "";
    display: block;
    width: 80px;               /* طول الخط */
    height: 4px;               /* سمك الخط */
    margin: 10px auto 0;       /* توسيط الخط أسفل النص */
    border-radius: 2px;        /* حواف ناعمة */
    background: linear-gradient(90deg, #282523, #1e1d1b, #302d2a); /* تدرج الخط */
}
.s-reviews-header-wrapper{justify-content: center}

.footer-is-light .store-footer .store-footer__inner {
    /* الخلفية برتقالية متدرجة */
    background: linear-gradient(90deg, #ff7a00, #ffa733, #ff7a00);

    /* نص أبيض واضح */
    color: #ffffff;

    /* توسيط المحتوى */
    display: flex;
    flex-direction: column; /* العناصر تصطف عموديًا */
    justify-content: center; /* توسيط عمودي */
    align-items: center;     /* توسيط أفقي */
    text-align: center;      /* نص داخل العناصر مركزي */

    position: relative;
    padding: 40px 20px 20px;
    z-index: 0;
}


.s-block--testimonials .s-slider-block__title-nav button{--tw-shadow-color: #ffffff !important;}

/*توسيط اللوقو شاشات لابوتوب */
/* Media Query للشاشات الكبيرة (مثل 1024 بكسل فما فوق) */
@media (min-width: 1024px) {
    
    /* 1. إعدادات العنصر الأب لشريط الترويسة بالكامل (لتوسيط كل شيء) */
    .flex.items-stretch.justify-between.relative {
        /* تغيير التوزيع من "تباعد بين" إلى "توسيط" */
        justify-content: center; 
        
        /* إضافة مسافة بين مجموعات العناصر */
        gap: 2rem; 
    }

    /* 2. عكس ترتيب العناصر داخل مجموعة الشعار (لتحريك زر القائمة إلى اليمين مثلاً) */
    /* استهداف الـ div الذي يحتوي على القائمة (القائمة الثلاثية والشعار) */
    .flex.items-center:first-child {
        /* عكس ترتيب العناصر الأبناء (القائمة الثلاثية والشعار والقائمة المخصصة) */
        flex-direction: row-reverse;
    }
}
/* Media Query للشاشات الصغيرة والمتوسطة (من 1023 بكسل وما دون) */
@media (max-width: 1023px) {
    
    .navbar-brand {
        display: flex;
        margin-bottom: .5rem;
        margin-top: .11rem;
        
        /* تطبيق الإزاحة الأفقية على جميع المقاسات التي تقل عن 1024 بكسل */
        /* ملاحظة: القيمة السالبة (-365px) ستدفع العنصر نحو اليسار */
        transform: translateX(-85px) !important;
    }
    
}
/* Media Query لاستهداف شاشات الجوال (حتى 767 بكسل) */
@media (max-width: 767px) {
    
    /* استهداف صورة الشعار */
    .main-nav-container.fixed-pinned .navbar-brand img {
        max-height: 6rem;
    max-width: 100%;
    width: auto;
        
        /* 1. تمكين الإزاحة البصرية */
        display: block; 
        
        /* 2. تطبيق الإزاحة الأفقية (translateX) */
        /* قم بتعديل قيمة -20px لتحديد مقدار الإزاحة: */
        /* - القيمة السالبة (مثل -20px) تحرك الصورة نحو اليسار. */
        /* - القيمة الموجبة (مثل 20px) تحرك الصورة نحو اليمين. */
        transform: translateX(-20px) !important; 
        
        /* قد تحتاج لإلغاء أي هوامش تلقائية لضمان الإزاحة */
        margin: 0 !important;
    }
    
}


/*  الاوان */

/* 1. العناصر ذات الخلفية البيضاء (تغيير من 'white' إلى #c5c5c5) */
body {
    background: #c5c5c5; 
}

/* 2. العنصر ذو الخلفية المتدرجة (تغيير التدرج إلى لون ثابت #c5c5c5) */
/* ملاحظة: بما أن هذه القاعدة كانت تعتمد على تدرج، فربما يجب أن تكون شفافة أو غير موجودة حسب التصميم الأصلي، لكن لغرض تغيير لون الخلفية نضع اللون الثابت. */
.main-menu {
    /* تم إزالة التدرج النصي (background: linear-gradient) */
    /* بما أن هذا الكود كان يستخدم background-clip: text، فالخلفية كانت لون النص وليس خلفية العنصر نفسه. */
    /* إذا كنت تريد خلفية للعنصر، يجب أن تضيف: */
    background-color: #c5c5c5; 
    
    background: linear-gradient(90deg, #ff7a00, #ffa733, #ff7a00); /* أُعيدت للقاعدة الأصلية لتأثير النص */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}


/* 3. خلفية تراكب البطاقة (إزالة التعتيم الأسود التلقائي) */
/* ملاحظة: هذه القيمة تبدو معطلة، لكن تم تغيير أي إشارة للون الخلفية الافتراضي. */
.s-product-card-overlay {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    --tw-bg-opacity: 0;
    /* تم تغيير الخلفية السابقة (التي تبدو معطلة) إلى اللون الجديد */
    /* background-color: rgba(3,3,2,0.13); */
    background-color: #c5c5c5; 
    opacity: .0;
    transition-duration: .0s;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(.0, 0, .0, 0);
}

/* 4. إزالة خلفية الزر (جعلها شفافة) */
/* هنا كان الهدف جعلها شفافة (transparent) وهي ليست تغيير لون لخلفية صلبة */
.s-button-icon,
.s-button-text {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important; /* هذا للحفاظ على الشفافية */
}




.main-nav-container

 {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    overflow: hidden;
}
.s-reviews-testimonial{background-color:#c5c5c5; }


.store-footer h3 {color:#000;
}
.mb-6 p {
    color:#000;
}
.s-menu-footer-item {
        color:#000;
}
.s-contacts-item {
     color:#000;
}