/* Add custom CSS styles below */ 
/* ----- This part is changing the card width and postion to cneter ----- */
/* Center content inside the swiper slide */
/*.s-products-slider-card.swiper-slide{
    display: flex;
    justify-content: center !important;
}

/* Set width of .s-product-card-entry inside the active slide 
.s-product-card-entry{
    width: 80% !important;
    border-width: 0px;
}
*/

.s-product-options-colors-item {
transform: scale(.5); /* Adjust size (1 = default, 1.5 = 150%) */
width: .8rem !important;
}

.s-product-options-colors-wrapper {
margin-bottom: 0px;
margin-top: -12px;
}

/* ----- THE END ----- */

/* ----- This part is swapping the product name and category in the card name ----- */
.s-product-card-content-main {
    display: flex;
    flex-direction: column; /* Keep items in a column */
    line-heigh: 1.5rem !important;
}

.s-product-card-content-main > *:nth-child(1) {
    order: 2;  Move first child to second position 

}
.s-product-card-content-title a {
    font-size: 14px !important;
    font-weight: 200 !important;
    margin-bottom: 0px !important;
    color: #909090 !important;
}

.s-product-card-content-title,
.s-product-card-content-title::before,
.s-product-card-content-title::after{
    font-weight: 100 !important;
}

span.s-product-card-brand {
display: none;
}


.s-product-card-content-main > *:nth-child(2) {
    order: 1;  Move second child to first position 
}

.s-product-card-content-subtitle,
.s-product-card-content-subtitle::before,
.s-product-card-content-subtitle::after {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    margin-bottom: 4px !important;
}

/* ----- THE END ----- */






/* ---------- New Enhancemnets 8-3-2025 ----------*/

.header-container.container [class^=sicon-], [class*=" sicon-"] {
color: #ffffff !important;
}






/* Hiding the brand name "which is only text" */
.product-entry__sub-title.text-sm.text-gray-400.da-ts.leading-normal {
display: none !important;
}
/* Enahncments of Metabox in the product page */

/* Option 1: Toggle visibility of the entire box content except the header */
.s-metadata-box .s-metadata-row {
  display: none;
}

.s-metadata-box.active .s-metadata-row {
  display: flex;
}

/* It works with its JS and named as metaboxEnahncemnetsJS */


/* hiding the price section when specific color is selected */

section.total.details.mb-5 {
display: none !important;
}


/* Re-arranging the color selection options just after the brand section */
/* Mobile layout for the thumbnails wrapper */
@media (max-width: 767px) {
    .s-product-options-thumbnails-wrapper {
        grid-template-columns: max-content;
        display: inline-flex;
        margin-right: -1rem !important;
    }
}

/* Style the labels inside the thumbnails wrapper */

.s-product-options-option-container {
margin-right: 0.5rem;
}
.s-product-options-thumbnails-wrapper label {
    margin-bottom: 0.125rem;
    display: inline-block;
    height: 3.5rem;
    width: 100%;
    cursor: pointer;
    overflow: hidden;
    border-radius: 0.275rem;
}

.s-product-options-option-label {
margin-bottom: 0;
font-size: 0.675rem;

}

/* Override the text color of paragraphs inside the thumbnails wrapper */
.s-product-options-thumbnails-wrapper div p {
    font-size: 0.775rem;
    line-height: 0.25rem;
    --tw-text-opacity: 1;
    color: #010101 !important;
}

.s-product-options-option-label label b {
margin-bottom: 0 !important;
}

/* Style changes of the brand section 
form.product-form > div.flex.items-center.gap-4.border.border-gray-200.dark\:border-opacity-20.rounded-md.p-2.mb-4 {
  border-color: transparent !important;
  margin-top: 20px !important;
  margin-bottom: -5px !important;
}
*/



/* Override styling for the target div */
div.flex.items-center.gap-4.border.border-gray-200.dark\:border-opacity-20.rounded-md.p-2.mb-4 {
  display: flex !important;
  flex-direction: column !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-top: 1.0rem !important;
}

/* Override the width for the product-brand element */
div.product-brand.flex-center.w-16 {
  width: 12rem !important;
}


/* Change the font weight and size of the product name */
html body h1.da-tm.leading-normal.text-lg.md\:text-xl.pe-2 {
  font-size: 16px !important;
  font-weight: 400 !important;
  margin-top: 1.5625rem !important;
}



/* Changing the object fit of the product card image to to conatina from cover 

.s-product-card-image-cover {
object-fit: contain !important;
} */


/* Ajdusting the color and the price into single sectin and aliging them */
.s-products-slider-card.swiper-slide.swiper-slide-active .s-product-card-options .s-product-options-option-content,
.s-products-slider-card.swiper-slide.swiper-slide-next .s-product-card-options .s-product-options-option-content {
  margin-right: -7px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  align-items: baseline;
  margin-top: -5px;
}




/* Below adjust the selection of lenses types for medical eye wares in the product page*/
/* If needed, scope to product page – adjust the parent selector as appropriate */
/* body.product-page .s-product-options-grid-mode { ... } */

.s-product-options-grid-mode {
margin-bottom: 1.25rem;
display: flex;
flex-wrap: wrap;
justify-items: center;
gap: 0.5rem;
flex-direction: row;
justify-content: flex-start;
align-content: flex-start;
}

/* Override the grid mode span for both single and multiple color cases */
.s-product-options-grid-mode-span {
  position: relative;
  display: flex;
  min-height: 36px;
  min-width: 45px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 0.4rem;
  /* Remove border width and set background color */
  border-width: 0 !important;
  background-color: #fff !important;

  padding: 0.5rem;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  border-color: #69686d;
  border-width: 0.05rem !important;
}

/* Active state adjustments */
/* Note: Since the original code defines the same selector twice, we combine them. 
   Adjust the values as needed; below we use the 'to be' values provided. */
.s-product-options-grid-mode input:checked + div {
  /* Active state background and text color */
  background-color: #010101 !important;
  color: #ffffff !important;
  /* Active state border color – here using #414042, or you could use var(--color-primary) if defined */
  border-color: #414042 !important;
}

/* Hiding the label "اختر" from the product tabs options*/
.s-product-options-option-label small {
display: none;
}

/* Aligninh the product options tabs only in the product */
div[id^="product-"] #product-tabs-options.product-options.details [data-option-type="single-option"] {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: -0.5rem !important;
  padding-left: 0.8rem !important;
  padding-right: 0.5rem !important;
}


.details.product-options {
padding-top: 0;
margin-bottom: 0;
}




/* hidinh the review section in the product page */
div#product-tabs-faqs.product-reviews.details {
display: none !important;
}


div.s-product-options-option[data-option-type="thumbnail"] {
margin-right: 1.0rem !important;
}



h3.product-entry__sub-title.text-sm.text-gray-400.da-ts.leading-normal {
display: none !important;
}




.s-product-options-thumbnails-wrapper div p {
    font-size: 0.775rem;
    line-height: 0.25rem;
    --tw-text-opacity: 1;
    color: #010101 !important;
    margin-top: -8px;
    margin-bottom: 20px;
}



.s-product-options-thumbnails-wrapper div input[type=radio] + label img {
object-fit: contain;
}


.s-products-list-wrapper.s-products-list-filters-results {

grid-template-columns: repeat(1, minmax(0, 1fr));

}








/* Ajdusting the color and the price into single sectin and aliging them */

.s-product-card-entry.rounded-md.no-bg.hide-out-of-stock.s-product-card-vertical.s-product-card-fit-height .s-product-card-options .s-product-options-option-content{
  margin-right: -7px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  align-items: baseline;
  margin-top: -5px;
}




/*
Customizing the purchase now stick product
*/

div.s-quantity-input-container {
width: 50%;
}



salla-quantity-input.border-gray-200.flex.justify-end.s-quantity-input.hydrated {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
}

/* Target the specific element and override the gap */
.container.flex.flex-col.md\:flex-row.justify-between.items-center.gap-2.md\:gap-4 {
  gap: 1.0rem !important;
}


/* Target the sticky product bar element and apply styles */
.sticky-product-bar.bg-white.da-bgg.p-5.mt-4.rounded-md {
    border-radius: 10px !important;
    margin-right: 10px !important;
    margin-left: 20px !important;
    margin-bottom: 8px !important;
    width: 90% !important;
    background: rgb(199 199 199 / 40%);
    box-shadow: 0 8px 32px 0 rgb(51 51 51 / 10%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 10px;

    
}



img.h-full.w-full {
  width: 100% !important;
  padding-top: 5px !important;
  margin-bottom: 20px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}



/* .salla-product-options{
background-color: rgb(245, 245, 245) !important;
padding: 0.3rem !important;
} */





/* Hide all children of <salla-conditional-fields> except the first one,
   but only on pages where the URL does not match the product page pattern */
.not-product-page salla-conditional-fields > :nth-child(n+2) {
  display: none;
}

/* Hide all but the first <salla-conditional-fields> child
   on every non‐product, non‐cart page 
html.not-product-page:not(.cart-page)
  salla-conditional-fields > :nth-child(n+2) {
  display: none;
}
*/


    
    
    
/* This rule applies only if the body has the "brand-page" class.
   It hides the label with the class "s-product-options-option-label" */
.brand-page label.s-product-options-option-label {
  display: none;
}









/* Container for the tabs – similar to navbar-panel-scroll */
.angel_multihome.multihome-tabs {
  width: 100%;
  background: #ffffff;
  color: #010101;
  position: fixed;
  /* If you wish, you can add a background-color or border similar to your original navbar */
  z-index: 100;
  transition: transform 0.3s ease, opacity 0.3s ease;
}


/* This container could mimic the inner .navbar container */
.multihome-tabs-container {
  width: 100%;
  height: 100%;
}

/* The wrapper becomes a flex container with fixed height */
.multihome-tabs-wrapper {
  display: flex;
  flex-wrap: nowrap; /* No wrapping by default (like .navbar-expand) */
  align-items: center;
  justify-content: center;
  height: 45px;  /* Fixed height like your original navbar */
  overflow-x: auto;  /* Enable horizontal scroll on smaller screens */
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: hidden; // hide vertical
  width: 100%
}

/* Hide scrollbar in IE and Firefox if desired */
@media (max-width: 1199.98px) {
  .multihome-tabs-wrapper {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none;    /* Firefox */
  }
  .multihome-tabs-wrapper::-webkit-scrollbar {
    display: none;  /* Chrome, Safari, Opera */
  }
}

/* Each tab list item takes equal space */
.multihome-tabs-wrapper li {
  flex: 1 1 0%;
  text-align: center;
  margin: 0;
  padding: 0;
  
}

.multihome-tabs-wrapper {
display: flex
;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
height: 45px;
overflow-x: auto;
margin: 0;
padding: 0;
list-style: none;
overflow-y: hidden;
flex-direction: row;
}

/* Styling for the tab buttons – replicating the .nav-link style */
.multihome-tabs-button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 0.8rem;
    border: none;
    font-weight: 600;
    white-space: nowrap;
    color: #000;
    transition: background-color 0.15s ease-in-out;
    border-radius: 15px !important;
    margin-right: 10px !important;
    margin-left: 10px !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    background: rgb(245 245 245 / 90%) !important;
    width: 92%;

}

/* Active button styling replicates your active state */
.multihome-tabs-button.active {
  background-color: rgba(229, 231, 235, 1);
}

/* Optional: Adjust strong element inside buttons */
.multihome-tabs-button strong {
  font-family: var(--font-main); /* Use your main font if set */
  font-weight: bold;
  margin: 0;
}


/* When scrolling down, slide and fade the container out */
.angel_multihome.multihome-tabs.hidden-down {
  transform: translateY(-100%);
  opacity: 0;
}

/* When scrolling up, slide and fade the container in */
.angel_multihome.multihome-tabs.visible-up {
  transform: translateY(0);
  opacity: 1;
}





/* Adjusting and Aliging the gender wise categoreis section*/



/* Adjusting or enlarging the sie of the category photo*/
.lazy__bg.lazy_avatar.lazy {
    width: 5.0rem !important;
    height: 5.0rem !important;
}


.s-block.s-block--photos-slider {
    margin-top: 2.5rem !important;
}



a[href*="عدسات-لاصقة-ملوّنة"] img.s-product-card-image-contain {
    position: relative;
    height: 100%;
    width: 75%;
    background-repeat: no-repeat;
    aspect-ratio: 2 / 2 !important;
    border-radius: 5px;
    object-fit: cover !important;
}



[dir="rtl"] h1.da-tm.pe-1 {
    padding-left: 0.25rem;
    margin-right: 1.5rem;
    margin-top: 1rem;
}




/* CSS targeting only this specific slider /* Target only slides within #main-links-2 */
#main-links-2 .swiper-slide.min--8.max--4 {
    height: auto;
    width: 25%;
    max-width: 50%; /* Changed from 25% to 50% */
}

#main-links-2 .swiper-slide.pb-8 {
    padding-bottom: 0 !important; /* Changed from 2rem to 0 */
}


/* Target only links within #main-links-2 */
#main-links-2 .swiper-slide a.relative.p-4 {
    padding-top: 0 !important; /* Changed from 1rem to 0 */
    padding-bottom: 0 !important; /* Changed from 1rem to 0 */
    padding-left: 0.1rem !important;
    padding-right: 0.1rem !important;
}

#main-links-2 .swiper-slide a.relative.h-16 {
    height: 4rem !important; /* Changed from 4rem to 6rem */
}

#main-links-2 .swiper-slide a.relative.bg-white {
    background-color: transparent !important; /* Changed from white to transparent */
}

#main-links-2 .swiper-slide a.relative.w-full {
    width: 100% !important; /* Changed from 100% to 70% */
}





/* Target only lazy images within #main-links-2 */
#main-links-2 .lazy__bg.lazy_img {
    position: relative;
    height: 100%;
    width: 120% !important; /* Changed from 100% to 80% */
    background-size: contain !important;
    background-repeat: no-repeat;
}



.s-block--logos-slider .s-slider-block__title {
display: none !important;
}





.s-block.s-block--logos-slider.no-home-tab.s-block--full-bg.bg-gray-100.da-bgg {
    background: #fff;
    padding-top: 0.0rem !important;
    padding-bottom: 0.0rem !important;
    box-shadow: 0 10px 15px -10px #0000002b;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}




/* border radius for header in static mode:
.header-inner.inner.bg-white.da-bgm.has-custom-bg {
    border-bottom-left-radius: 15px !important;
    border-bottom-right-radius: 15px !important;

}
*/



salla-slider.photos-slider .swiper-slide.swiper-slide-active {
border-radius: 0px !important;
border: 0px !important;
}




/* Enhancing the UI/UX of the tags in the product page only:*/
/* This will only take effect on product pages (/p followed by numbers) */
:not(body):not(html) {
    /* This is just a placeholder to make the selector valid */
}

/* When the conditions are met (product page and the specific div exists) */
/* The JavaScript would need to add a class to the body or similar */
body.product-single div.mb-3 {
margin-bottom: 0rem;
margin-right: 1.4rem;
}


body.product-single div.mb-3 > a {
    border-radius: 5px !important;
    background-color: rgb(199 199 199 / 25%) !important;
    opacity: 1 !important;
    color: #000000 !important;
    padding: 4px 10px !important;
    text-decoration: none !important;
    box-shadow: 0 8px 32px 0 rgb(51 51 51 / 5%) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    font-weight: 500 !important;
}






/* Hide the target label */
.s-product-options-option-label[for^="options["] {
    display: none !important;
}

/* Product options spacing adjustments */
.s-product-options-option-content {
    margin-top: 0 !important;
}

.s-product-options-option-container {
    margin-bottom: 0 !important;
    margin-top: -1.5rem !important;
}

/* Text modification styling */
.da-tm.leading-normal.text-lg.md\\:text-xl.pe-1 {
    font-size: 1rem !important;
    line-height: 1.5 !important;
    letter-spacing: -0.5px !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .s-product-options-option-container {
        margin-top: -1rem !important;
    }
    
    .da-tm.leading-normal.text-lg.md\\:text-xl.pe-1 {
        font-size: 0.875rem !important;
    }
}









/* Sticky header state */
#mainnav.fixed-pinned.fixed-header .header-inner.inner.bg-white.da-bgm.has-custom-bg{
    border-radius: 15px !important;
    margin: 0px 20px 0px 0px !important;
    width: 90%;
    background: rgba(199, 199, 199, 0.60) !important;
    box-shadow: 0 8px 32px 0 rgba(51, 51, 51, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    transform: translateY(5px) !important;
}


/* Maintain non-sticky state styles */ 
.header-inner.inner.bg-white.da-bgm.has-custom-bg{
transition: all 0.3s ease !important;
    background: rgb(0 52 58 / 100%) !important;
    box-shadow: 0 8px 32px 0 rgb(51 51 51 / 10%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(6px);
}



.header-inner.bg-white {
  background: transparent !important; /* Disable white background */
}


.angel_multihome.multihome-tabs.visible-up {
background: transparent !important;
}



.s-block.s-block--categories.no-home-tab.merge-with-top-component {
margin-top: 0.5rem;
}






/* slider heading changes:*/
.s-product-card-content-title.font-primary a {
    font-weight: 400 !important;
    font-family: noto-sans-arabic !important;
}




.banner--fixed img {
    border-radius: 0px !important;
    border: 0px !important;
}





/*Editing the lenses brands logo section*/
.s-block.s-block--logos-slider.no-home-tab.s-block--full-bg.bg-gray-100.da-bgg.lenses_brands_logos {
    background: #fff;
    padding-top: 0.0rem !important;
    padding-bottom: 0.0rem !important;
    box-shadow: none !important;
    margin-top: 0rem !important;
    margin-bottom: 0rem !important;
}

.lenses_brands_logos .swiper-pagination {
    display: none !important;
}


.lenses_brands_logos .swiper-wrapper {
    transition-duration: 0ms !important;
    transform: none !important;
    transition-timing-function: unset !important;
    margin: 0 !important;
    height: auto !important;
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    box-sizing: content-box;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-end;
}


.lenses_brands_logos .p-4 {
padding: 0.3rem;
}



/* 1. Container: two-column grid, RTL flow */
.s-metadata-row {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 1rem;
  align-items: center;
  direction: rtl;
  padding: 0.5rem 1.25rem;
  border-bottom: 1px solid #e5e7eb;
}

/* 2. Label: bold, right-aligned */
.s-metadata-row-name {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700 !important;
  color: rgba(55,65,81,1);
  margin: 0;
  text-align: right;
}

/* 3. Value: plain text, right-aligned, no bullets */
.s-metadata-row-value {
  margin: 0;            /* reset any default p-margins */
  direction: rtl;       /* ensure Arabic numbers flow correctly */
  text-align: right;    
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgba(55,65,81,1);
  display: block;       /* default block behavior */
}



/* (1)—remove any rule that shows .s-metadata-row in .shipping-return always */

/* (2)—then add this: 
      only when shipping-return AND .active, show & style them */
.s-metadata-box.shipping-return.active .s-metadata-row {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
}



/* Hiding the sku detail in the product page: */
section.sku.details {
display: none;
}


/* Footer important links color: */
.footer-list a {
color: white !important;
}

.store-footer h3 {
color: white !important;
}
/*
.text-sm {
color: white;
}
*/



#tabbyPromoWrapper {
display: none;
}

.s-installment-mispay-wrapper {
display: none;
}


/*

.s-product-options-wrapper {
  border-radius: 10px !important;
  margin: 0px 0px 0px 0px !important; /* top right bottom left 
  padding: 0.4rem !important;
  width: 90% !important;
  background: rgb(245, 245, 245) !important;
  box-shadow: 0 4px 16px 0 rgba(51, 51, 51, 0.05) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
*/





.bottom-header.has-custom-bg {
  /* make sure it stays fixed at the bottom */
  position: fixed;
  bottom: 0;
  right: 2.5% !important;

  /* sizing & spacing */
  width: 90% !important;
  margin: 0 10px 0 10px !important; /* top right bottom left */

  /* look & feel */
  background-color: rgba(199, 199, 199, 0.4) !important;
  box-shadow: 0 8px 32px 0 rgba(51, 51, 51, 0.1) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(6px) !important;

  /* corners */
  border-radius: 10px !important;

  /* above all other content */
  z-index: 9999;
}


iframe.hide-scroll {
    margin-bottom: 3rem !important;
}



/* only inside your “similar-products” wrapper */
.similar-products.container.mt-4 .swiper-container {
  display: block !important;        /* undo grid */
  margin-bottom: 2rem !important;
  position: relative !important;
  overflow: hidden !important;      /* hide overflow */
}

/* slides must size to content */
.similar-products.container.mt-4 .swiper-slide {
  width: auto !important;
  flex-shrink: 0 !important;
}

/* hide native scrollbars if you like */
.similar-products.container.mt-4 .swiper-wrapper {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.similar-products.container.mt-4 .swiper-wrapper::-webkit-scrollbar {
  display: none !important;
}

/* style nav arrows in that context */
.similar-products.container.mt-4 .swiper-button-next,
.similar-products.container.mt-4 .swiper-button-prev {
  color: var(--color-primary) !important;
  width: var(--swiper-navigation-size) !important;
  height: var(--swiper-navigation-size) !important;
}