/* Add custom CSS styles below */ 
/* Add custom CSS styles below */ 





/* User Image Icon border */

.s-user-menu-avatar-wrap.avatar-updated {
    border-radius: 50% !important;
    border: 0.8px solid rgba(128, 128, 128, 0.3) !important;
    margin
}


/*********************/













body {
   /* background-color: #fffdfa; /* Light vanilla beige color */
  
  
 background-color: #ffffff; /* white color */
}



/* هيدار البحث*/



.top-navbar {
 /*   background: linear-gradient(#cfba9b, #c2a886, #d1ac7b);    */
  /*   border: 1px solid rgba(194, 37, 10, 1); /* Same light gray, high transparency border */
    border-radius: none; /* Rounded edges like the description */
    
}


/*. *********** */ 





/*  الهيدر */



.flex.items-stretch.justify-between.relative {
    padding: 0.52rem 0; /* Adjust both top and bottom padding */
    height: auto; /* Ensures the height adapts to content */
}




.s-user-menu-trigger {
    display: table-header-group !important;
    
    }
    
/*   user image space from cart icon*/
#mainnav > div > div > div > div.flex.items-center.justify-end > salla-user-menu{

width: 35px;
}



/*. *********** */ 






.full-banner-entry::before,
.full-banner-entry::after {
    content: none;
    display: none;
}

/* Ensure categories component is on top */
.s-block--categories {
    position: relative; /* Ensure it's positioned relative to the parent */
  
    padding-top: 40px;
    margin-bottom: -60px;
}

/* Styling for the categories component slider */
.s-block--categories .s-slider-container .slide--cat-entry {
    background-color: transparent !important;
    border: none;
    width: 130px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0;
    margin: 0;
    padding-top: 5px;
}

/* Title of each category in the main-links */
.s-block--categories .s-slider-container .slide--cat-entry h2 {
    margin-top: -12px; /* Adjust this value to bring the text closer to the icon */
    font-size: 14px; /* Adjust the font size if needed */
    line-height: 1.2; /* Adjust line height if necessary */
    text-align: center; /* Ensure the text is centered under the icon */
}

/* Icon and image adjustments */
.s-block--categories .s-slider-container .slide--cat-entry img, 
.s-block--categories .s-slider-container .slide--cat-entry i {
    width: 100px; /* Adjust the size of the icon or image */
    height: auto; /* Maintain aspect ratio */
    border-radius: 0 !important; /* Ensure no rounding is applied */
    object-fit: contain; /* Adjust the image to fit properly */
}

/* Adjustments for swiper wrapper */
.s-block--categories .s-slider-container .swiper-wrapper {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    width: fit-content;
}

/* Adjusting the swiper slide for better desktop spacing */
.s-block--categories .s-slider-container .swiper-slide.slide--one-sixth {
    margin-left: 10px; /* Add more space between the slides */
    margin-bottom: 50px;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {


.s-slider-block__title {
    max-width: 92%; /* Shrinks the width to bring elements closer */
   margin-top: 20px;
    margin-bottom:3px;   Centers the container if needed */
    
  }





 

html[lang="ar"] .s-block--categories .s-slider-container .swiper-wrapper {
margin-right: 70px;
}

html[lang="en"] .s-block--categories .s-slider-container .swiper-wrapper {
margin-left: 140px;
}

.s-block--categories .s-slider-container .swiper-slide.slide--one-sixth {
        margin-left: -70px; /* Remove extra margin for mobile view */
    }
    
    
    
    
    
    
    
    
    
    

    
    
     
    /* بانر */









  #app > div.app-inner.flex.flex-col.min-h-full > section:nth-child(5){
    margin-bottom: 70px;
     margin-top: 40px;
       border-radius: 0 !important;
    
     
    }
    








.s-block--fixed-banner .container{
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    padding-right: 0;
    padding-left: 0;
    width: 100vw; /* Full viewport width */
    */
justify-content: center;
}




.s-block--fixed-banner img {
margin-top: -10px;
margin-bottom: -70px;
 /* border-radius: 0 !important; */
   width: 100vw; /* Forces image to cover full viewport width */
    height: auto;
  /*   object-fit: cover; /* Ensures image fills the container without stretching */
  justify-content: center;
}


/* *********** */

    
    
    
 
    /* العنوان الفرعي في الصفحة الريسية*/   
    
    
  .s-product-card-content-subtitle {
   
    display: none;
}  
    
    
    
    
/* *********** */
    
    
    
    
 #product-{{ product.id }} .main-content {
     margin-top: -20px !important;
}
   
    
    
    

    
/*   الوزن   */




#product-{{ product.id }} .bg-white.p-5.rounded-md.mb-5 {
    margin-top: -40px; /* Adjust the value as needed */
}


#product-{{ product.id }}.flex.bg-white.p-5 {
    margin-top: -30px !important; /* Adjust the value as needed */
}





/* ******************   */








/* product options slider */


#product-{{ product.id }}.s-product-options-option-content {
  width: 100%;
  max-width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
     scroll-behavior: smooth;
     align-items: center;
}

#product-{{ product.id }}.s-product-options-thumbnails-wrapper {
  display: flex;
  width: fit-content;
  transition: transform 0.3s ease-in-out;
  gap: 0rem;
}




#product-687318177 .s-product-options-thumbnails-wrapper {
width: 100%;
}







#product-{{ product.id }}.s-product-options-thumbnails-wrapper > div {
width: 100%;
        min-width: 15%;
       
  margin-right: 0;
}


#product-{{ product.id }} .s-product-options-thumbnails-wrapper div p {

    font-size: 0.6rem;
    line-height: 1rem;
    
    }

#product-1906606668 .s-product-options-thumbnails-wrapper > div {
width: auto;
        min-width: 17%;
     
  margin-right: 0;
}





#product-1722463062 .s-product-options-thumbnails-wrapper > div {
width: auto;
        min-width: 12%;
     
  margin-right: 0;
}





#product-354575828 .s-product-options-thumbnails-wrapper > div {
width: auto;
        min-width: 20%;
       
  margin-right: 0;
}





/*foundation*/
#product-2090212720 .s-product-options-thumbnails-wrapper > div {
width: auto;
        min-width: 22%;
 
} 





#product-982886562 .s-product-options-thumbnails-wrapper > div {
width: auto;
        min-width: 22%;
       
  margin-right: 0;
}









#product-{{ product.id }} form {
  width: -webkit-fill-available;
}





/*overlay indicator*/



.overflowing-content {
  position: relative;
}

.overflowing-content .overflow-indicator {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 30px;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.overflowing-content .overflow-indicator::before {
  content: '';
  border: 5px solid transparent;
  border-left-color: white;
}

.s-product-options-option.overflowing-content .overflow-indicator {
  position: absolute;
  right: 0;
}

/* RTL styles */
[dir="rtl"] .overflowing-content .overflow-indicator {
  left: 0;
  right: auto;
}

[dir="rtl"] .overflowing-content .overflow-indicator::before {
  border-right-color: white;
  border-left-color: transparent;
}





/*****/






/***************/





/*    FOOTER   */






.store-footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.store-footer .container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.store-footer .grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px; /* Adjust the gap as needed */
}

.store-footer .grid > div {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 17px;
}

.store-footer .s-social-list,
.store-footer .s-payments-list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; /* Adjust spacing between icons */
}

.store-footer .contact-social,
.store-footer .s-contacts-list {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.store-footer .md\\:flex.items-center.justify-between.py-4.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}




/* ******************   */








    
   
    
}


/******** هنا ينتهي حد الجوال *********/








/* Default styles for larger screens */
.s-block--photos-slider {
    position: relative; /* Ensure it can be positioned relative to other elements */
margin-bottom: -35px;
}

.s-block--photos-slider .photos-slider .swiper-wrapper {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    margin-right: 3.75px;
    width: fit-content; /* Only take as much space as needed */
    
}

.s-block--photos-slider .photos-slider .swiper-slide.slide--one-sixth {
    margin: 0px;
}

/* Ensure full width for the slider and images */
.s-block--photos-slider .swiper-slide {
    width: 100vw !important; /* Each slide should take the full width of the viewport */
    height: auto !important; /* Maintain the original aspect ratio */
}

/* Ensure full width for images */
.s-block--photos-slider img {
    width: 100vw !important; /* Stretch image to the full width of the viewport */
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 0 !important;
    
}











.s-block--best-offers {
margin-top: 50px;
margin-bottom: 40px;
}




.s-products-slider-slider .s-product-card-content-sub {
    justify-content: center;
    margin-top: -12px; 
}













/* Target the thumbnail containers */
#product-{{ product.id }} .slide--one-fourth.swiper-slide {
    width: 35px !important; /* Make the thumbnail container smaller */
    height: 35px !important;
    margin-left: 5px !important; /* Adjust spacing */
  border-radius: 50% !important; /* Make the image container circular */  
}

/* Target the images inside the thumbnails */
#product-{{ product.id }} .slide--one-fourth.swiper-slide img {
    border-radius: 50% !important; /* Make the image container circular */
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Ensure the image covers the circular container */
}

/* Optional: If there's extra padding or margins around the images, you can adjust them here */
#product-{{ product.id }} .slide--one-fourth {
    padding: 0 !important;
    margin: 0 !important;
}




/*السعر شامل الضريبة*/





#product-{{ product.id }} .gap-4.flex {
    flex-direction: column;
    align-self: baseline;
}

#product-{{ product.id }} .gap-4 {
    gap: 0rem;
}



#product-{{ product.id }} small.color-grey {
   
    margin-top: -15px; /* Add space below the element above it */
    margin-bottom: 5px;
}





/******************************/



/*  المحتوى الرئيسي للمنتج في صفحة المنتج */



#product-{{ product.id }} .main-content {
    position: static; /* Remove sticky positioning for centering */
    width: 100%; /* Full width */
    max-width: 800px; /* Set a reasonable max width */
    margin: 0 auto; /* Center the content horizontally */
    
    padding-bottom: 16px; /* Maintain padding */
}







/*********************/















#product-{{ product.id }} .product__description {
    margin-top: 0px; /* Add some space below the product options */
}




#product-{{ product.id }} .main-content .flex.whitespace-nowrap.gap-4.items-center h4 {
    margin-top: -20px !important; /* Adjust the top margin */
   
}









#product-{{ product.id }} .main-content h1 {
    margin-top: 0; /* Adjust this value to your desired top margin */
}
    

.mb-6 {
    margin-bottom: 0rem;
}


/* To target only the price under the product title */
#product-{{ product.id }} .main-content > .flex.whitespace-nowrap.gap-4.items-center h2 {
    margin-top: 0px; /* Adjust the top margin */
    color: #a21c1c;   /* Change the color to some cool red */
    margin-bottom: 15px;
}

/* Specific styling for the price that comes after the product description */
#product-{{ product.id }} .center-between .flex.whitespace-nowrap.price-wrapper h2 {
    margin-top: 0; /* Reset margin for price under description */
    color: #000000; /* Set color to black or any desired color */
}


/*  إطار حول الوصف */



#product-{{ product.id }} #more-content {
   border: 1px solid rgba(211, 211, 211, 0.5); /* Light gray with high transparency */
    border-radius: 15px; /* Rounded edges */
    
    padding-top: 15px;
    
 }

/*************************/



#product-{{ product.id }} .article--main {
    max-height: 25rem ; /* Ensure initial height is capped */
    overflow: hidden ;
    transition: max-height 0.4s ease-in-out ; /* Smooth transition */
}

#product-{{ product.id }} .article--main.expanded {
    /* Removed `max-height: none` to allow JavaScript to control the height */
      max-height: none; */
    overflow: visible ;
}



/* فتات الخبز أعلى صفحة المنتج*/


#product-{{ product.id }} .s-breadcrumb-wrapper .s-breadcrumb-item:last-child {
    display: none;
}

/*. ********** */






/*. خيارات المنتج */



.s-product-options-option {
  display: flex;
  flex-direction: column;
}



#product-{{ product.id }} .s-product-options-wrapper {
    margin-top: -50px;
}



#product-{{ product.id }} .s-product-options-thumbnails-wrapper {
    margin-top: -5px;
}



/*. ********** */













/*صورة المنتج في صفحة المنتج*/

.s-button-light-outline {
   
    background-color: rgb(255 234 234 / 43%) !important;
    color: rgb(0 0 0); !important;
}










/* Targeting specific slider and container classes */

#product-{{ product.id }}.s-slider-container {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: none !important;
}







#product-{{ product.id }} a.swiper-slide.magnify-wrapper.homeslider__slide.swiper-slide-active {
  box-shadow: none !important;
}



/********************/








#product-{{ product.id }} #btn-show-more {
color: #a21c1c;   /* Change the color to some cool red */
   display: inline-block !important; /* Ensure the button is always displayed */
    text-align: center; /* Center the text inside the button */
 border: 1px solid rgba(211, 211, 211, 0.5); /* Same light gray, high transparency border */
    border-radius: 15px; /* Rounded edges like the description */
    width: 100%; /* Match the width of the description border */
    padding: 8px; /* Add padding to make the button visually appealing */
    margin-top: 10px; /* Add some space between the description and the button */
   box-sizing: border-box; /* Ensure padding doesn't increase the element's width */
 
     z-index: 10; /* Make sure it stays above content */
    /* visibility: visible !important; /* Ensure visibility */
    
   
   
  /*  opacity: 1 !important;            /* Ensure opacity */

}




/* المنتجات المميزة   */

.s-product-card-overlay {
  background: none !important;
  display: none !important;
   border: none !important;

} 


.s-product-card-image-full img {
  object-fit: contain !important;
  width: 100% !important;
  height: 100%!important;


}

.s-product-card-image-full {
  overflow: visible !important;
  border: none !important;

}


/* Apply to the special product title */
.s-product-card-full-image .s-product-card-content-title a {
  color: #a21c1c !important;
  
}

/* Apply to the special product price */
.s-product-card-full-image .s-product-card-price {
  color: #a21c1c !important;
}










/* Center-align title and price */
.s-product-card-content-main,
.s-product-card-content-sub {
    text-align: center;
    justify-content: center;
}

/* Optional: Ensure consistent layout regardless of title length */
.s-product-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}



.s-product-card-content-subtitle {
display: none; }



/* Target only custom-salla-product-card elements within .grid.gap-4.sm\:gap-8 */
.grid.gap-4.sm\:gap-8 > custom-salla-product-card {
    display: flex;
    justify-content: space-between;
    gap: 0px;
    
    border: 1.5px solid rgba(211, 211, 211, 0.7); /* Same light gray, high transparency border */
    border-radius: 10px; /* Rounded edges like the description */
}

/* Ensure the image container within the specific custom-salla-product-card is adjusted */
.grid.gap-4.sm\:gap-8 > custom-salla-product-card .s-product-card-image {
    flex: 1 1 50%; /* Allocate 50% of the space */
    max-width: 50%;
    overflow: hidden;
    background-color: #ffffff; /* white color */
}

/* Set the content container within the custom-salla-product-card in this grid */
.grid.gap-4.sm\:gap-8 > custom-salla-product-card .s-product-card-content {
    flex: 1 1 50%; /* Allocate 50% of the space */
    max-width: 50%;
    margin: 5px;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
        
        
    
}

/* Adjust image size within the grid */
.grid.gap-4.sm\:gap-8 > custom-salla-product-card .s-product-card-image img {
    width: 100%;
    height: auto;
    
}





/* Center text within the title and price elements */
.grid.gap-4.sm\:gap-8 .s-product-card-content-title {
    text-align: center;
   margin: 0;
   padding: 5px;
   padding-left: 10px;
   padding-right: 10px;
  
}

.grid.gap-4.sm\:gap-8 .s-product-card-price {
    text-align: center;
    margin: 0;
    padding: 0;

}

/* Center the button within the container */
.grid.gap-4.sm\:gap-8 .s-product-card-content-footer {
    display: flex;
    justify-content: center;
    width: 100%; /* Ensures the button spans across the width and centers */
    margin: 0;
    padding: 0;
}






.s-product-card-full-image{
    border: none !important;
    border-style: none !important;
}


/* ******************   */






/* العروض */



div.s-modal-body p.s-modal-sub-title {
    white-space: pre-line !important;
    text-align: center !important;
    margin-top: 17px;
    font-size: 1rem;
        font-weight: 700 !important;
}


.s-modal-title {
    font-size: 1.4rem !important;
    text-align: center !important;
    font-weight: 800 !important;
    }


.s-modal-header-inner {

margin-bottom: 1.25rem !important;
 display: block !important;
    align-items: center !important;
   padding: 0 !important;

}



.s-offer-modal-cat-item.swiper-slide {

height: 9rem!important;
    max-width: 9rem!important;
    border-radius: 50% !important;
border-width: 0px;
background-color: rgb(199 141 141 / 16%) !important;


}



.s-offer-modal-badge-text {
    color: #414042;
    
  }
  
  
  .s-offer-modal-product.swiper-slide {
      display: flow !important;
      
  }
  
  
  
  .s-offer-modal-product-image-wrap {
  
  height: 100%;
  }
  
  
  .s-offer-modal-product-info {
      text-align: center;
}
  
  
  
  .s-offer-modal-product-price {
      display: inherit;
}
  
  
  .s-offer-modal-product-name {
      overflow: inherit;
}


.s-offer-modal-expiry {

margin-bottom: 1.25rem;
    text-align: center;
    font-weight: 700;
    font-size: large;
    }


.s-offer-modal-remember-label{
    justify-content: center !important;
    }



/*********************/












/********FOOTER******/



.store-footer::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 0;
    width: 100%;
    height: 25px;
    background: linear-gradient(
        to top,
        rgba(29, 31, 31, var(--tw-bg-opacity)),
        rgba(60, 62, 62, var(--tw-bg-opacity))
    );
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 54' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 22L120 16.7C240 11 480 1.00001 720 0.700012C960 1.00001 1200 11 1320 16.7L1440 22V54H1320C1200 54 960 54 720 54C480 54 240 54 120 54H0V22Z'/%3E%3C/svg%3E");
    -webkit-mask-size: cover;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 54' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 22L120 16.7C240 11 480 1.00001 720 0.700012C960 1.00001 1200 11 1320 16.7L1440 22V54H1320C1200 54 960 54 720 54C480 54 240 54 120 54H0V22Z'/%3E%3C/svg%3E");
    mask-size: cover;
    z-index: 0;
   
   margin-top: -17px; 
}



.store-footer {
    position: relative;
    box-shadow: 0px -25px 30px rgba(0, 0, 0, 0.25); /* Apply shadow to footer */
}


/***footer logo***/

.flex.items-center.m-0 {
    background-image: url('https://raw.githubusercontent.com/bkhaitan/website-assets/refs/heads/main/Clara%20White%20LOGO%202.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%; /* Adjust as necessary */
   height: 40px;
    padding: 0; /* Optional, to provide spacing around the logo */
    margin-top: -10px !important;
    margin-bottom:15px;
}

.flex.items-center.m-0 h3 {
    color: transparent;
}



/******/



/*****رقم ضريبي***/

.flex.rtl\:space-x-reverse  {
    margin-top: 20px; /* Adjust the value as needed */
     margin-bottom: 20px; /* Adjust the value as needed */
}


.items-end {
    align-items: flex-end !important;
}


/******/





/***منصة الاعمال***/

salla-apps-icons {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.s-payments-sbc-image {
    max-width: 70px;
    max-height: 70px;
    margin-bottom: 0px; /* Adjust spacing as needed */
    height: 50px;
}

.sbc-text {
    font-size: 12px; /* Adjust font size */
    text-align: center;
    margin-top: 5px;
}



/* Center-align all footer elements */
footer .container {
    text-align: center;
      justify-content: center;
}

/* Override alignment specifically for "Certified by Saudi Business Center" text */
footer .sbc-text {
    text-align: left; /* or right if preferred */
    margin: auto; /* Optional: adjust spacing if necessary */
    display: inline-block; /* To avoid it from expanding full-width */
}



/* Center-align the entire SBC logo container */
.sbc-logo-container {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px; /* Optional: Adds space above the SBC logo container */
}

/* Center the 'Certified by Saudi Business Center' text within the SBC container */
.sbc-logo-container .sbc-text {
    text-align: center;
    margin-top: 5px; /* Adds space between the image and text */
      justify-content: center;
}








/*********/



/* Center-align all content within the container */
.lg\\:col-span-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
      justify-content: center;
      
}

.lg\\:col-span-2 h3 {
    margin: 0;
}

/* Center the main ClaraLine heading and welcome paragraph */
.lg\\:col-span-2 a,
.lg\\:col-span-2 p {
    text-align: center;
      justify-content: center;
}

/* Center-align the social icons */
.s-social-list {
    display: flex;
    justify-content: center;
    gap: 10px; /* Adjusts spacing between social icons */
}

/* Center-align the VAT section */
.flex.items-end {
    justify-content: center;
}









/* Center-align the ClaraLine link */
a.flex.items-center.m-0 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
}

/* Optional: Adjust the h3 style to ensure it's centered within the anchor */
a.flex.items-center.m-0 h3 {
    margin: 0;
}













/***********تواصل معنا*********/




.store-footer__inner .s-contacts{
margin-top: 5px;
}




/* Center-align the contact email link */
.s-contacts-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
}




/* Target the footer contacts section */
.store-footer__inner .s-contacts-list-vertical {
    display: flex; /* Display icons side by side */
    flex-direction: row;
    gap: 10px; /* Optional: Add spacing between icons */
}

/* Hide the text for WhatsApp and email */
.store-footer__inner .s-contacts-item .unicode {
    display: none;
       align-items: center;
    margin: 0 5px; /* Optional: space between icon and email text */
}


/********************/









/* #progress-bar > div:nth-child(6){
    left: auto!important;
    right: auto!important;
} */






/********************/












/* **************FOOTER END*******************   */