@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@300;500;700&display=swap');


:root{
  --font-main: "Alexandria", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Arabic", "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  --font-secondary: var(--font-main);
}


body { 
font-family: var(--font-main); 
     background: transparent;
}



.s-product-card-sale-price h4 {
    background: rgb(var(--colour-commercial-message-bti-yellow,255,219,0));
    box-shadow: .08em .08em 0 rgb(var(--colour-commercial-message-bti-red,204,0,8));
    color: rgb(var(--colour-static-black,17,17,17));
    display: inline-block;
    font-style: normal;
    padding: .2em .3em;
}
.s-product-card-sale-price h4:hover {
    background: rgb(var(--colour-commercial-message-bti-yellow,255,219,0));
    box-shadow: .24em .24em 0 rgb(var(--colour-commercial-message-bti-red,204,0,8));
    color: rgb(var(--colour-static-black,17,17,17));
    display: inline-block;
    font-style: normal;
    padding: .2em .3em;
}


.s-product-card-entry {
border: none;
}

.s-product-card-content-footer.rounded-lg button {
background: transparent;
border: none;
color: var(--color-primary);
    box-shadow: 1px 1px 1px var(--color-primary);
}

.is-sticky-product-bar .sticky-product-bar salla-add-product-button button[quick-buy] {
    background: transparent;
    border: none;
    color: var(--color-primary);
    box-shadow: 1px 1px 1px var(--color-primary);
}

.text-red-400 {
    background: rgb(var(--colour-commercial-message-bti-yellow,255,219,0));
    box-shadow: .08em .08em 0 rgb(var(--colour-commercial-message-bti-red,204,0,8));
    color: rgb(var(--colour-static-black,17,17,17));
    display: inline-block;
    font-style: normal;
    padding: .2em .3em;
}

.main-nav-container.fixed-pinned .inner {
opacity: 1;
}



.s-product-card-discount {
    margin: 2px;
    padding-bottom: 12px;
    font-size: 1em;
    background-color: #E14059;
}

button.undefined.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline.s-button-loader-center:hover {
background: #00ff1114;
}



.s-block.s-block--banners.target-section h3 {
        font-size: 1.5em;
        line-height: 1.25em;
        padding: 5px;
        font-weight: 600;
        color: #07297C;
}

.s-block.s-block--banners.target-section h2 {
        font-size: 1.5em;
        padding: 5px;
        font-weight: 600;
        color: #07297C;
}


@media (max-width: 768px) {
   .s-block.s-block--features.angel-features.bg-gray-100.da-bgg.py-8.mask-block 
  .grid.grid-cols-3.items-baseline {
      display: flex;
    flex-direction: column;
   }
}

@media (max-width: 768px) {
   .s-block.s-block--features.angel-features.bg-gray-100.da-bgg.py-8.mask-block 
  .grid.grid-cols-3.items-baseline p {
    padding: 0 10px;
        color: rgb(0 0 0);
   }
}



@media (max-width: 768px) {
.swiper.s-slider-container.swiper-initialized.swiper-horizontal.swiper-rtl.swiper-backface-hidden {
    padding-right: 10px;
    padding-left: 10px;
}
}








.s-angel--divider.xl-title .divider-url {
        font-size: 1rem;
        line-height: 1.5rem;
        background: #07297E;
        color: #fff;
        padding: 5px;
    }
    a.s-block__display-all.flex-center.divider-url:hover {
        background: #fff;
        color: #07297E;
}

.tabs .tab-trigger.is-active {
    background-color: var(--color-primary);
    color: var(--text-btn);
}
.tabs__product .tab-trigger {
    color: rgba(0, 0, 0, var(--tw-text-opacity));
        background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}

h1.da-tm.leading-normal.text-lg.md\:text-xl.pe-2 {
    margin-bottom: 7px;
    font-size: 1.5em;
}

h3 {
    font-size: 0.85rem;
    font-weight: 600;
}

.opt-text li, p, a, span {
    font-size: .85rem;
}


    .store-footer  {
        background: #F9CFCE;
        border-radius: 50px 50px 0 0;
    }
    
    
    
    /*---------------------------*/
    /*----------------------------*/
    #special-product-tabs {
  position: relative;
  min-height: 100px; 
}

#special-product-tabs::after {
  content: "";
  position: absolute;
  bottom: -10px; /* Adjust as needed */
  width: 100%;
  background-color: #fff; /* Or any background color */
  padding: 10px;
   
}

#special-product-tabs ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
      margin-top: 15px;
}

#special-product-tabs li {
  width: 70px;
  height: 50px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
}

#special-product-tabs img {
  max-height: 100%;
}

.cart-submit-wrap::before {
    content: "اضغط لإكمال الطلب وإضافة كود الخصم";
        color: var(--color-primary);
}


.angel-ad__slider {
 animation-duration: 15s!important;
 min-height: 25px;
}

@media (max-width: 768px) { 
.angel-ad__slider {
 animation-duration: 5s!important;
}
}


#tabbyPromoWrapper {
    background: transparent;
}

.tabs-wrapper.tabs-wrapper__product.rounded-ts-none {
    background: transparent;
}



.special-product .btn--primary {
    margin-bottom: 10px;
}

article.full-description.details.opt-text.relative.overflow-hidden.transition-all.duration-300 {
padding-left: 0;
    padding-right: 0;
        background: transparent;
}



.gomla__offer-discount-sections {
    padding-block: 0;
    }
    
    .gomla__offer-title {
    font-size: 0.8rem;
    }
    
    .gomla__offer-content-pricing-section {
        padding-left: 150px;
    }
    






/* ========================== */
/* ✅ Performance Fixes Only */
/* ========================== */

/* 1. Prevent layout shift for images (CLS fix) */
img {
  display: block;
  max-width: 100%;
}

/* 2. Optimize font rendering (FCP, LCP fix) */
html {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* 3. Reduce impact of transitions (INP fix) */
button, .swiper {
  transition: none !important;
}

.target-section .box-img img,
.s-product-card-entry img {
    width: 100% !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

/* 5. Reserve space for banners and sliders */
.swiper,
.carousel,
.target-section .box-img {
  min-height: 100px;
  overflow: hidden;
}