/* Add custom CSS styles below */ 
/* ==========================================================================
   1) الخط العام وتنسيق الصفحة الأساسي
   ========================================================================== */
@import url('https://db.onlinewebfonts.com/c/f0034555c887b9dbfb67c6fd228d8f33?family=KFGQPC+Uthman+Taha+Naskh');

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;
}
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;
}

body.index .container{max-width: 95% !important;margin-top: 15px;}

@media(min-width:1400px){
    .NG-categories-8 .card-inner {
        height:630px !important;
    }
    .NG-categories-1 .card-inner {
    height: 360px !important;
}
.NG-categories-1 .card img, .NG-categories-1 .card-back-image {
    object-fit: contain !important;
    object-position: center;
    background-repeat: no-repeat;
    height: 360px !important;
}
}
/* ==========================================================================
   2) البانر الثابت (Fixed Banner)
   ========================================================================== */
section.s-block.s-block--fixed-banner.wide-placeholder:first-of-type{
    margin-top:0 !important
}
section.s-block.s-block--fixed-banner.wide-placeholder:first-of-type > .container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: unset !important;
}

.banner--fixed img {
    border-radius: 0 !important;
}
.mburger p  {
    font-size: 1.2rem !important;
}
.mburger span {
    height:2px;
    width:1.5rem
}


/* ==========================================================================
   3) قسم الفئات (Categories - NG-categories-1)
   ========================================================================== */
.card.group.sal-animate a:nth-child(2) {
    display:none;
}

.NG-categories-1 .grid {
    grid-template-columns: repeat(6,minmax(0,1fr)) !important;
  gap:8px !important;
}

.NG-categories-1 .card img, .NG-categories-1 .card-back-image{
    object-fit:contain !important;
    object-position:center;
    background-repeat: no-repeat;
    height: 320px;
}

.NG-categories .card-back-overlay{
    background:transparent !important;
}
.NG-categories-1 h1{margin-left: auto;color: #AA7622 !important;font-size: 24px;font-weight: 700;}
    .NG-categories-1 .card-inner {
    height: 325px !important;
}

/* الفئات - نسخة الموبايل / الشاشات المتوسطة */
@media(max-width:992px){
    .NG-categories-1 .grid {
    gap: 20px;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
}
  
    .NG-categories-1 .card img, .NG-categories-1 .card-back-image{
    object-fit:contain !important;
    object-position:center;
    background-repeat: no-repeat;
    height: 155px;
    padding: 0 !important;
}
    .NG-categories-1 .card-inner {
    height: 155px !important;
}
  
}


/* ==========================================================================
   4) قسم المنتجات (Products) - كان معلق عليه NG-products-3 سابقاً
   ========================================================================== */
.NG-products h1{margin-left: auto;color: #AA7622 !important;font-weight: 700;text-align: start;font-size: 24px;}
.NG-products , .NG-testimonials{
margin-top: 30px !important;
}
.s-product-card-content{
align-items: center !important;
    background:#fff !important;
     border-bottom-right-radius:8px;
    border-bottom-left-radius:8px;
    padding:12px 30px !important;
}
.s-product-card-content-sub{
align-items: center !important;
justify-content: center !important;

}

h4.s-product-card-price {
    font-size: 18px !important;
}

custom-salla-product-card .s-product-card-content-title a {
    color: #000 !important;
    text-align: center;
   
}


/* ==========================================================================
   5) قسم الأسئلة الشائعة (FAQ)
   ========================================================================== */
/* الحاوية الرئيسية */
.ng-faq{
padding: 40px 0;
}

.ng-faq .section-wrapper{
max-width: 1400px;
margin: auto;
padding: 35px;
border: 1px solid #c89235;
border-radius: 8px;
background:
radial-gradient(circle at top right, rgba(200,146,53,.25), transparent 18%),
radial-gradient(circle at bottom left, rgba(200,146,53,.12), transparent 22%),
#fdf4e8;
}

/* توسيط العنوان */
.ng-faq .text-start{
width:100%;
text-align:center;
}

.ng-faq h1{
color:#b7791f;
font-size:34px;
font-weight:500;
margin-bottom:30px;
}

/* عمود واحد للأسئلة */
.ng-faq .qs-wrapper{
display:flex !important;
flex-direction:column;
gap:0;
}

/* كل سؤال */
.ng-faq .question-wrapper{
width:100%;
padding:0;
border-bottom:1px solid rgba(184,121,31,.15);
}

/* زر السؤال */
.ng-faq .accordion{
display:flex;
flex-direction:row-reverse; /* icon left - text right */
justify-content:space-between;
align-items:center;
padding:26px 0;
background:none;
}

/* نص السؤال */
.ng-faq .question{
color:#b7791f !important;
font-size:20px;
font-weight:400;
text-align:right;
flex:1;
}

/* أيقونة السؤال */
.ng-faq .ques_icon{
width:34px;
height:34px;
border:1.5px solid #c89235;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:#c89235 !important;
font-size:13px;
flex-shrink:0;
transition:.35s;
}

/* إخفاء السهم الأصلي */
.ng-faq .ques_icon::before{
content:"+";
font-family:inherit !important;
font-size:22px;
font-weight:300;
line-height:1;
}

/* تدوير الأيقونة عند الفتح */
.ng-faq .accordion.active .ques_icon::before{
content:"−";
}

/* الإجابة */
.ng-faq .answer{
color:#8b6d3d;
padding-bottom:24px;
line-height:2;
}
.ng-faq .qs-wrapper{
width: 100%;
}
.ng-faq .accordion{
flex-direction: row !important;
}
.ng-faq .question-wrapper{
border: none !important;
box-shadow: none !important;
}
.ng-faq .question-wrapper.active{
background-color: none !important;
}
@supports (color:color-mix(in lch,red,blue)) and (top:var(--f )) {
.ng-faq .question-wrapper.active {
background-color: transparent !important;
}
}

/* الأسئلة الشائعة - نسخة الموبايل (وبداخلها تنسيق فوتر خاص بهذا الميديا كويري كما هو بالأصل) */
@media (max-width:768px){

.ng-faq .section-wrapper{
padding:20px;
}

.ng-faq .question{
font-size:18px;
}

.ng-faq .accordion{
padding:18px 0;
}

.ng-faq .ques_icon{
width:28px;
height:28px;
}

.ng-faq h1{
font-size:26px;
}
  .footer-is-light .store-footer .store-footer__inner .container {
    justify-content: center;
    align-items: center;
}
}


/* ==========================================================================
   6) قسم "لماذا تختارنا" (Why choose us)
   ========================================================================== */
.NG-Why-choose-us-wrapper .pro {
    flex-direction:column !important;
    justify-content:center !important;
    align-items:center !important;
}
.NG-Why-choose-us-wrapper {
    background:transparent;
}
.NG-Why-choose-us-wrapper .leading-normal p:first-child{
color: #AA7622 !important;
font-size: 32px !important;
font-weight: 400 !important;
text-align: center !important;
}
.NG-Why-choose-us-wrapper .leading-normal p:last-child{
color: #000 !important;
font-size: 20px !important;
font-weight: 400 !important;
text-align: center !important;
}

/* لماذا تختارنا - نسخة الموبايل / الشاشات المتوسطة */
@media(max-width:992px){
  .NG-Why-choose-us-wrapper .leading-normal p:first-child {
    color: #AA7622 !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    text-align: center !important;
}
  .NG-Why-choose-us-wrapper .leading-normal p:last-child {
    color: #000 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-align: center !important;
}
  .NG-Why-choose-us-wrapper img.aspect-square{
    width:2rem !important;
  }
}


/* ==========================================================================
   7) قسم آراء العملاء (Testimonials Slider)
   ========================================================================== */
.single__test .swiper-wrapper a{
    box-shadow:none !important;
}
.single__test .swiper-wrapper a img{
object-fit: contain !important;
    background:#f6e9d5 !important;

}


/* ==========================================================================
   8) أزرار كروت المنتج (Product Card Buttons)
   ========================================================================== */
.s-product-card-vertical .s-product-card-image .card-floating-btn salla-add-product-button salla-button button, .s-product-card-entry .eye-model-style button, .compare-button .s-product-card-entry .s-product-card-wishlist-btn button {
    background-color: #aa7622 !important;
    color: #ffffff !important;
    fill: #ffffff !important;
    font-size: 18px;
}
.union-button{
     color: #000 !important;
}


/* ==========================================================================
   9) الفوتر (Footer)
   ========================================================================== */
.store-footer h3 {
    font-size: 21px;
    font-weight: 700;
    line-height: 25px;
    margin-bottom: .75rem;
}

.footer-is-light .store-footer .store-footer__inner {
    background-color: #aa7622;
}
.footer-is-light .store-footer .store-footer__inner {
    background-color: #f2e3cc;
    border-top:  2px solid #aa7622 !important;
    color: #aa7622 !important;
}
.store-footer a {
    color: #aa7622 !important;
    font-size: 20px;
    font-weight: 300;
    line-height: 25px!important;
    transition: all .5s ease-in-out;
}

.store-footer .footer-description p {
    color: #aa7622;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.5rem;
}

.footer-is-light .store-footer {
    background-color: #f2e3cc!important;
}


/* ==========================================================================
   10) القائمة العلوية (Navbar / Main Menu)
   ========================================================================== */
.navbar-item.home.active svg * {
    stroke: #fff;
} 
  .navbar-item.active p {
    color: #fff;
}

.fixed-pinned custom-main-menu #mobile-menu #more-menu-dropdown :is(a.active span) {
    color: #000;
}
.fixed-pinned .main-menu>li span, .fixed-pinned .main-menu>li>a>span {
    color: #000;
}


/* ==========================================================================
   11) خيارات المنتج (Product Options)
   ========================================================================== */

/* تنسيق حاوية الخيارات */
.s-product-options-option-container {
  margin-bottom: 20px;
  padding: 10px;
  background: #fdfaf5;
  border: 1px solid #eaddc7;
  border-radius: 10px;
}

/* عنوان الخيار */
.s-product-options-option-label {
  display: block;
  margin-bottom: 10px;
  font-weight: 600;
  color: #3a3a3a;
}

.s-product-options-option-label b {
  font-size: 15px;
}

.s-product-options-option-label span {
  color: #aa7622;
}

.s-product-options-option-label small {
  display: block;
  color: #999;
  font-weight: 400;
  font-size: 12px;
  margin-top: 2px;
}

/* أزرار الاختيار (Radio) */
.radio-options-grid {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.radio-option {
  position: relative;
  cursor: pointer;
}

.radio-option input[type="radio"] {
  position: absolute;
  opacity: 0;
}

.radio-option span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 16px;
  border: 1.5px solid #d9c9a8;
  border-radius: 6px;
  background: #fff;
  color: #555;
  font-weight: 500;
  transition: all 0.2s ease;
}

.radio-option input[type="radio"]:checked + span {
  background: #aa7622;
  border-color: #aa7622;
  color: #fff;
  box-shadow: 0 2px 6px rgba(170, 118, 34, 0.3);
}

.radio-option:hover span {
  border-color: #aa7622;
}

/* حقل النص */
.s-product-options-text .s-form-control {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid #d9c9a8;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.2s ease;
}

.s-product-options-text .s-form-control:focus {
  outline: none;
  border-color: #aa7622;
  box-shadow: 0 0 0 3px rgba(170, 118, 34, 0.12);
}

.s-product-options-option-error {
  border-color: #f0d9d9;
}


/* إلغاء الفليب في سكشن NG-categories نهائيًا */
.NG-categories .card-inner {
  transform: none !important;
  transition: none !important;
  transform-style: flat !important;
}

.NG-categories .card-front {
  transform: none !important;
  backface-visibility: visible !important;
  position: relative !important;
  opacity: 1 !important;
}


.NG-categories .card:hover .card-inner {
  transform: none !important;
}
.copyright-text a {
  color: #fff !important;
}


.store-footer__inner {
  position: relative !important;
  padding-top: 130px !important;
}

/* اللوجو يطلع فوق النص تمامًا وبحجم أكبر */
.store-footer__inner > .container > div:nth-child(1) > a {
  position: absolute !important;
  top: -15px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
}

/* تكبير حجم صورة اللوجو نفسها */
.store-footer__inner > .container > div:nth-child(1) > a .footer_logo_size {
  width: 150px !important;
}

@media (min-width: 1024px) {
    .lg\:grid-cols-\[3fr_2fr_2fr_2fr_3fr\] {
        grid-template-columns: 5fr 4fr 3fr 3fr 3fr;
    }
}



.s-product-card-entry .s-product-options-option-container{
  display: none !important;
}

@media(min-width:767px){
    .custom-social-links {
padding-right:2.5rem;
}


}


div.s-product-card-sale-price span.\!text-graytext {
  color: #000 !important;
}

.s-product-card-promotion-title , .single__test .promotion-title{
  background-color:red !important;
}

/* ===== 12) السعر الرئيسي أعلى صفحة المنتج (تحت العنوان) ===== */
.space-nowrap > h4.text-primary {
  color: #ff0000 !important;
}
.space-nowrap > span.text-graytext {
  color: #000000 !important;
}

/* ===== 13) السعر داخل الفورم (قسم "السعر" + زر الإضافة للسلة) ===== */
.price_is_on_sale .total-price {
  color: #ff0000 !important;
}
.price_is_on_sale .before-price {
  color: #000000 !important;
}

/* ===== 14) الشريط العلوي الثابت (Sticky Bar) عند التمرير ===== */
.sticky-price-wrapper .sticky-sale-price {
  color: #ff0000 !important;
}
.sticky-price-wrapper .sticky-regular-price {
  color: #000000 !important;
}