/* ==============================
   CSS Variables (الألوان الأساسية)
   ============================== */
:root {
    --main-color:#9a6e22;       /* اللون الذهبي الداكن */
    --second-color:#DCCA7C;     /* اللون الذهبي الفاتح */
}

/* ==============================
   Navbar Icons & Login Button
   ============================== */
.main-nav-container i.header-btn__icon.icon.sicon-shopping-bag ,
button.s-user-menu-login-btn{
    color:var(--main-color) !important;
    border-color:var(--main-color);
}

/* أيقونة المستخدم SVG */
.s-user-menu-login-btn svg {
    fill:var(--main-color) !important
}

/* أيقونة القائمة (الهامبرغر) - شكل دائري */
i.sicon-menu.text-primary.text-2xl {
    color:var(--main-color) !important;;
    border:1px solid var(--accent-color);
    width:40px !important;
    height:40px;
    padding:2px;
    overflow:hidden;
    position:relative;
    border-radius:50px;
    border:1px solid;
}

/* توسيط أيقونة القائمة داخل الدائرة */
.sicon-menu:before{
    left:50% !important;
    top:50% !important;
    position:absolute;
    transform:translate(-50% , -50%);
}

/* ==============================
   Top Navbar - خلفية متدرجة ذهبية
   ============================== */
.top-navbar {
    background: linear-gradient(90deg,rgba(154, 110, 33, 1) 0%, rgba(221, 204, 126, 1) 67%);
    color:#fff;
}

/* ==============================
   Cart Summary (عداد وسعر السلة)
   ============================== */
/* عداد عدد المنتجات في السلة */
.main-nav-container span.s-cart-summary-count {
    background-color:#ffffff;
    color:var(--main-color);
    border:1px solid var(--main-color);
}

/* إجمالي سعر السلة */
.main-nav-container b.s-cart-summary-total{
    color:var(--main-color);
}

/* ==============================
   Background - خلفية سوداء عامة
   ============================== */
.inner.bg-inherit.w-full {
    background-color:#000000 !important;
}

/* Main Menu Color على الشاشات الكبيرة */
@media only screen and (min-width: 1024px) {
    @media (min-width: 1024px) {
        .main-menu {
            display: flex;
            color:#fff;
        }
    }
}

/* خلفية الـ body سوداء */
body{
    background-color: #000 !important;
}

/* ==============================
   Slider Block - السلايدر الرئيسي
   ============================== */
section.s-block.s-block--photos-slider {
    margin-top: 0;
}
section.s-block.s-block--photos-slider .swiper-slide {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* إزالة border-radius من السلايدر */
section.s-block.s-block--photos-slider .swiper-slide,
section.s-block.s-block--photos-slider .swiper-slide img {
    border-radius: 0 !important;
}
section.s-block.s-block--photos-slider .swiper.s-slider-container {
    padding: 0 !important;
}

/* إخفاء عنوان السلايدر */
.home-slider.photos-slider .s-slider-block__title-nav {
    display:none !important;
}

/* ==============================
   Banners Blocks - بلوكات البانر
   ============================== */
/* إزالة المسافة السفلية من أول سلايدر */
section#IRT__photos-slider-0 {
    margin-bottom: 0 !important;
}

/* بانر بعرض كامل بدون padding */
section.s-block.s-block--fixed-banner.wide-placeholder > .container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: unset !important;
}

/* إزالة border-radius من صور البانر */
.banner--fixed img {
    border-radius: 0 !important;
    background-color: transparent;
}

/* ==============================
   Banner Grid Layout - تخطيط البانرات
   ============================== */
a.banner-entry.square-photos {
    height:100% !important;
    background-color: transparent;
}

.two-row .banner-entry:first-child {
    grid-column: span 1/span 1;
    grid-row: span 1/span 1;
}

/* البانر الثالث: 4 أعمدة */
section:nth-child(3) > .grid.md\:grid-cols-3.two-row.grid-flow-row.gap-3.sm\:gap-8 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

/* البانر الرابع: 3 أعمدة */
section:nth-child(4) > div.grid.one-row.md\:grid-cols-3.grid-flow-row.gap-3.sm\:gap-8{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* البانر الثامن: 3 أعمدة */
section:nth-child(8) > div.grid.one-row.md\:grid-cols-3.grid-flow-row.gap-3.sm\:gap-8 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

a.banner-entry.square-photos ,
.two-row .banner-entry:first-child {
    padding:0;
}

/* ==============================
   Responsive - شاشات موبايل (768px)
   ============================== */
@media(max-width:768px){
    /* البانر الثالث: عمودين */
    section:nth-child(3) > .grid.md\:grid-cols-3.two-row.grid-flow-row.gap-3.sm\:gap-8 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* البانر الرابع: عمودين */
    section:nth-child(4) > div.grid.one-row.md\:grid-cols-3.grid-flow-row.gap-3.sm\:gap-8{
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows:auto auto !important;
    }

    /* أول عنصر في البانر الرابع يأخذ عرض كامل */
    section:nth-child(4) > div.grid.one-row.md\:grid-cols-3.grid-flow-row.gap-3.sm\:gap-8 > a:nth-child(1){
        grid-column:1/-1;
    }

    /* البانر الثامن: عمود واحد */
    section:nth-child(8) > div.grid.one-row.md\:grid-cols-3.grid-flow-row.gap-3.sm\:gap-8 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ==============================
   Cart Page - صفحة السلة
   ============================== */
/* خلفية سوداء وبوردر ذهبي لعناصر السلة */
body.cart section.cart-item.bg-white.p-5.xs\:p-7.rounded-md.mb-5.relative ,
body.cart .shadow-default.bg-white.p-5.xs\:p-7.rounded-md.mb-5.relative.transition-height.duration-1000 {
    background-color:#000000;
    border:1px solid #F3B852;
    color:var(--main-color) !important;
}

/* كل العناصر داخل cart item */
body.cart section.cart-item.bg-white.p-5.xs\:p-7.rounded-md.mb-5.relative *{
    background-color:#000000;
    color:var(--main-color) !important;
    overflow:hidden;
}

/* ==============================
   Homepage - الصفحة الرئيسية
   ============================== */
/* توسيط عناوين البلوكات في الهوم */
body.index .s-block__title {
    justify-content:center;
}

/* ==============================
   Typography - ألوان النصوص الذهبية
   ============================== */
.s-block__title ,
h1#page-main-title ,
ol.s-breadcrumb-wrapper ,
label.hidden.sm\:block.rtl\:ml-3.ltr\:mr-3.whitespace-nowrap,
.s-slider-block__title h2 ,
.product-single h1 ,
.product-single .flex.whitespace-nowrap.gap-4.items-center {
    color:#F3B852 !important;
}

/* ==============================
   Buttons - الأزرار الذهبية
   ============================== */
button.s-button-element.s-button-btn{
    background: linear-gradient(90deg,rgba(220, 202, 124, 1) 0%, rgba(243, 184, 82, 1) 67%);
    color:#000000;
}

/* ==============================
   Product Cards - كروت المنتجات
   ============================== */
/* خلفية سوداء ونص أبيض */
.s-product-card-content {
    color:#fff;
    background-color:#000;
}

/* عنوان المنتج أبيض */
h3.s-product-card-content-title a {
    color:#fff !important;
}

/* بوردر على الكارد مع transition */
custom-salla-product-card {
    border:1px solid #dddd;
    transition:0.5s !important;
    overflow: hidden;
}

/* بوردر ذهبي عند hover على زر الكارد */
custom-salla-product-card:has(button.s-button-element.s-button-btn.s-button-outline:hover){
    border:1px solid var(--main-color);
}

/* حركة رفع الكارد للأعلى عند hover في الهوم */
body.index custom-salla-product-card:has(button.s-button-element.s-button-btn.s-button-outline:hover){
    transform:translateY(-10px);
    border:1px solid var(--main-color);
}

/* padding للسلايدر في الهوم */
body.index salla-products-slider.s-products-slider-wrapper.hydrated .swiper.s-slider-container {
    padding:30px 0 0!important;
}

/* ==============================
   Product Single Page - صفحة المنتج
   ============================== */
/* خلفية سوداء وبوردر ذهبي لفورم المنتج */
.product-single salla-product-options.s-product-options-wrapper.hydrated ,
.product-single form.form.product-form section.flex.bg-white.p-5.sm\:pb-0.rounded-md.rounded-b-none ,
.product-single form.form.product-form section.sticky-product-bar.bg-white.p-5.rounded-md.rounded-b-none{
    background-color:#000 !important;
    border:2px solid var(--main-color);
    color:var(--main-color) !important;
}

/* كل العناصر داخل فورم المنتج */
.product-single salla-product-options.s-product-options-wrapper.hydrated * ,
.product-single form.form.product-form section.flex.bg-white.p-5.sm\:pb-0.rounded-md.rounded-b-none * ,
.product-single form.form.product-form section.sticky-product-bar.bg-white.p-5.rounded-md.rounded-b-none {
    background-color:#000;
    color:var(--main-color) !important;
}

.product-single form.form.product-form section.sticky-product-bar.bg-white.p-5.rounded-md.rounded-b-none * {
    color:var(--main-color) !important;
}

/* نص المقال/الوصف باللون الأبيض */
.product-single article.article--main.pb-1 *{
    color: #fff !important;
}

/* ==============================
   Slider Navigation Arrows
   ============================== */
/* خلفية ذهبية لأزرار السهم */
.s-slider-block__title button {
    background-color:var(--main-color);
    opacity:1 !Important;
}

/* ==============================
   Section Title Decoration
   عنوان البلوك مع خطوط ذهبية ودوائر
   ============================== */
section.s-block.s-block--banners.container .s-block__title .right-side {
    display:flex;
    padding-left:0;
    justify-content:center;
    align-items:center;
    gap:18px;
}

/* الخط الذهبي بجانب العنوان */
section.s-block.s-block--banners.container .s-block__title .right-side span {
    background-color: var(--main-color);
    width:95px;
    height:2px;
    position:relative;
}

/* ترتيب العنوان في المنتصف */
section.s-block.s-block--banners.container .s-block__title .right-side h2 {
    order:2;
    font-size:16px;
}

/* الخط الثاني على اليسار */
section.s-block.s-block--banners.container .s-block__title .right-side span.span-2 {
    order:3;
}

/* دائرة ذهبية في نهاية الخط الثاني */
section.s-block.s-block--banners.container .s-block__title .right-side span.span-2:after {
    content:'';
    position:absolute;
    height:12px;
    width:12px;
    background-color:var(--main-color);
    border-radius:50px;
    right:-1px;
    top:50%;
    transform:translateY(-50%);
}

/* دائرة ذهبية في بداية الخط الأول */
section.s-block.s-block--banners.container .s-block__title .right-side span.span-1:after {
    content:'';
    position:absolute;
    height:12px;
    width:12px;
    background-color:var(--main-color);
    border-radius:50px;
    left:-1px;
    top:50%;
    transform:translateY(-50%);
}

/* Responsive للشاشات الصغيرة - تقليل الخطوط */
@media(max-width:992px) {
    section.s-block.s-block--banners.container .s-block__title .right-side {
        display:flex;
        padding-left:0;
        justify-content:center;
        align-items:center;
        gap:16px;
    }
    section.s-block.s-block--banners.container .s-block__title .right-side span {
        background-color: var(--main-color);
        width:60px;
        height:2px;
        position:relative;
    }
}

/* أيقونة السهم في سلايدر المنتجات */
.s-slider-block__title .s-slider-nav-arrow svg {
    width: 22px;
    fill: #ffffff;
}
body.product-single .s-comments.s-comments-product {
    background-color:#000;
    border:1px solid var(--main-color);
}

body.product-single .s-comments.s-comments-product *{
color:var(--main-color);
}
/* ==============================
   Footer - الفوتر
   ============================== */
/* خلفية الفوتر الداخلية - تدرج بني داكن */
.store-footer__inner {
    background: linear-gradient(90deg,rgba(9, 6, 1, 1) 0%, rgba(61, 44, 5, 1) 67%);
    color:#fff !important;
}

/* خلفية الفوتر الخارجية */
footer.store-footer {
    background: linear-gradient(90deg,rgba(61, 44, 5, 1) 0%, rgba(9, 6, 1, 1) 67%);
    color:#fff !important;
}

/* كل نصوص الفوتر بيضاء */
footer.store-footer *{
    color:#fff !important;
}

@media(max-width:768px){
    img.footer-logo {
        width:95px !important;
        margin-bottom:12px;
    }
    footer *{
        justify-content:center;
        align-items:center;
        text-align:center;
    }
}
@media (max-width: 768px) {
    
    section:nth-child(4) > div.grid.one-row.md\:grid-cols-3.grid-flow-row.gap-3.sm\:gap-8 > a:nth-child(1) img{
 width:50% !important ;       
        margin-inline:auto;
    }
}