/* Add custom CSS styles below */ 
/* =========================
   COLORS
========================= */

:root {
    --bg: #FFFFFF;
    --header-bg: #FFFFFF;
    --header-color:#00A1E7;
    --feat-bg: #C66134;
    --feat-color: #FBF0EB;
    --footer-bg: #111111;
    --color-primary: #00A1E7;
    --color-secondary: #FFFFFF;
}

body {
    background-color: var(--bg) !important;
}

/* =========================
   HEADER
========================= */

@media (min-width: 992px) {
    .navbar-brand img {
        max-height: 5rem;
    }

    .main-nav-container.fixed-pinned .navbar-brand img {
        max-height: 70px;
    }
}

#mainnav,
#mainnav i:before,
#mainnav b {
    color: #825A22 !important;
}

#mainnav a:hover {
    color: var(--header-color) !important;
    opacity: .7;
}

#mainnav i {
    border: none !important;
}

.main-nav-container.fixed-pinned .main-menu > li > a {
    padding-top: 0px;
    padding-bottom: 0;
}

.top-navbar {
    background: #00A1E7 !important;
    color: #1E1E1E ;
}

.top-navbar .s-search-input {
    background-color:#fff !important;
    color: #fff !important;
}

.top-navbar .s-search-input::placeholder {
    color: #00A1E7!important;
    opacity: 1 !important;
}

/* Search SVG */
.top-navbar svg {
    fill: #fff !important;
    stroke: #fff !important;
}

.sicon-shopping-bag:before {
    content: "\ef39" !important;
}

.sicon-user-circle:before {
    content: "\f078";
}


/* =========================
   CAROUSEL
========================= */

.s-block:nth-of-type(1) {
    margin: 0px  !important;
}

.s-block:nth-of-type(1) .s-slider-block__title {
  display: none !important;
}

.s-block--photos-slider .s-slider-block__title-nav,
.carousel-slider .s-slider-block__title-nav {
    display: none !important;
}

.s-block--photos-slider * {
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    width: 100%;
}

.s-block--photos-slider .swiper-slide {
    width: 100% !important;
    margin: 0 !important;
}

#main-content > section:nth-child(2) > div {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100%;
}


/* =========================
   CATEGORIES
========================= */

.slide--cat-entry {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    height: 19rem;
    padding: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-around;
    transition: .3s;
}

.slide--cat-entry:hover {
    transform: scale(1.05);
}

.slide--cat-entry:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.4),
        transparent
    );
    transform: translateX(-100%);
    transition: .6s;
}

.slide--cat-entry:hover:before {
    transform: translateX(100%);
}

.slide--cat-entry h2 {
    display: none;
}

.slide--cat-entry img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: .3s;
}

.rounded-full {
    border-radius: 0;
}

.w-16 {
    width: 20rem;
}

.h-16 {
    height: auto;
}

.sm\:py-16 {
    background: #fff;
}

@media (min-width: 1024px) {
    salla-slider .slide--one-sixth {
        width: 33%;
    }

    .lg\:grid-cols-6 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .s-block--categories .swiper-wrapper {
        display: flex;
        justify-content: space-evenly;
    }
}


/* =========================
   PRODUCTS
========================= */

.product-single h2 {
    opacity: 1 !important;
}

.s-product-card-entry {
    height: 470px;
    border: 1.5px solid var(--color-primary);
    border-radius: .5rem !important;
}

.s-product-card-image {
    background-color: transparent !important;
}

.s-product-card-entry img {
    height: 319px;
    transition: .3s;
}

.s-product-card-entry:hover img {
    scale: 1.1;
}

.s-product-card-fit-height .s-product-card-image {
    height: 20rem;
    max-height: 20rem;
}

.s-product-card-content-title,
.slider-bannars-moving h2 {
    text-align: center !important;
}

.s-product-card-content-title a {
    color: #000 !important;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.s-product-card-content-sub {
    justify-content: center;
}

.s-product-card-vertical .s-product-card-wishlist-btn button:hover {
    background-color: var(--color-primary) !important;
}

.s-product-card-vertical
.s-product-card-wishlist-btn
button:hover
.sicon-heart {
    color: #fff !important;
}

button.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline.s-button-loader-center {
    border: none;
    border-radius: 6px;
    background: var(--color-primary);
    color: var(--color-secondary);
    font-weight: 700;
}

.s-block--tabs-produtcs .tab-trigger.is-active button {
    color: #fff;
}

.carousel-slider .swiper:where([dir=rtl],[dir=rtl] *),
salla-slider[type]:not(.hydrated) .swiper > div > div:where([dir=rtl],[dir=rtl] *),
salla-slider[type]:not(.hydrated) > div:where([dir=rtl],[dir=rtl] *) {
    padding-bottom: 1rem;
}

section#featured-products-style2-5,
section#featured-products-style2-7 {
    margin: 0;
}

.s-product-card-sale-price h4 {
    color: var(--color-secondary) !important;
}

.s-product-card-sale-price h4 {
    color: var(--color-primary) !important;
}

/* =========================
   BANNERS
========================= */

.banner-entry,
.banner--fixed img {
    background-color: transparent !important;
    border-radius: 0;
}


/* Desktop banner height فقط */
@media (min-width: 769px) {
    a.banner-entry.lazy.h-lg-banner.entered.loaded {
        height: 80vh !important;
    }
}


/* =========================
   FOOTER
========================= */

.store-footer {
    background-color: var(--color-primary) !important;
}

.md\:flex.items-center.justify-between.py-4.container.text-center {
    background-color: var(--color-primary);
}

.store-footer__inner {
    background-color: var(--footer-bg) !important;
    color: #FBF0EB;
    border-top: 2px solid var(--color-primary);
}

@media (min-width: 1024px) {
    footer .grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.copyright-text p,
.copyright-text p a:hover {
    color: #fff !important;
    opacity: 1;
}

a.flex.items-center.m-0 {
    justify-content: center;
}

a.flex.items-center.m-0:after {
    content: "";
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 150px;
    padding: 0;
    background: url("https://cdn.files.salla.network/homepage/639007989/7c5d534b-c798-4fd7-9ba0-9de9cc84c119-original.webp") no-repeat center;
    background-size: contain;
    border-radius: 6px;
}

.store-footer a h3:nth-child(1) {
    display: none;
}


/* =========================
   SECTION TITLES
========================= */

.s-slider-block__title,
.s-block__title {
    justify-content: center;
    padding-bottom: 24px;
}

.s-slider-block__title h2,
.s-block__title h2 {
    font-size: 28px !important;
    position: relative;
    padding: 0;
}

.s-slider-block__title-left {
    display: none;
}

.s-block__title .right-side:where([dir=ltr],[dir=ltr] *) {
    padding-right: 0;
}

.s-slider-block__title-right:where([dir=rtl],[dir=rtl] *) {
    padding-left: 0 !important;
}

.s-slider-block__title-right:where([dir=ltr],[dir=ltr] *) {
    padding-left: 0;
}

.s-slider-block__title-right::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 24px;
    margin-top: 30px;
    background: url("https://cdn.files.salla.network/homepage/1380807638/3927b553-9624-4cf6-b73a-074c5fe0b58b-original.webp") no-repeat center bottom;
    background-size: 160px;
}

.s-slider-block__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.s-product-card-promotion-title{
  background-color: #825A22 !important ;
}
.s-slider-block__title::after {
    content: "اختر من بين مجموعتنا المميزة";
    font-size: 18px;
    font-weight: 400;
    color: #7A7A7A;
    text-align: center;
    max-width: 600px;
    line-height: 1.8;
}

.object-cover {
    object-fit: fill;
}


/* =========================
   OTHER
========================= */

.lg\:col-span-2.rtl\:lg\:pl-20.ltr\:lg\:pr-20 {
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}


/* =========================
   ما يميزنا
========================= */

.s-block--features {
    position: relative !important;
    text-align: center !important;
    padding-top: 105px !important;
}

.s-block--features::before {
    content: "ما يميزنا";
    position: absolute;
    top: 15px;
    left: 0;
    width: 100%;
    font-size: 24px;
    font-weight: 700;
    color: #222;
    text-align: center;
}

.s-block--features::after {
    content: "تجربة تسوق فاخرة بضمان وجودة تستحقها";
    position: absolute;
    top: 48px;
    left: 0;
    width: 100%;
    height: 55px;
    box-sizing: border-box;
    padding-bottom: 10px;
    font-size: 18px;
    font-weight: 400;
    color: #777;
    text-align: center;
    line-height: 1.6;
    background: url("https://cdn.files.salla.network/homepage/1380807638/3927b553-9624-4cf6-b73a-074c5fe0b58b-original.webp") no-repeat center bottom;
    background-size: 160px;
}

.s-block--features__item {
    margin-top: 30px;
    border: none !important;
    box-shadow: 0 4.44px 4.44px 0 #0000001A !important;
}

@media (min-width: 769px) {
    .s-block-trust-store-features__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}


/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

   .s-block:nth-of-type(1)[data-testid="store-home-fixed-banner"] {
        margin: 0px !important;
    }
  
    /* Square Banners */
    section[data-testid="store-home-square-banners"] .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    section[data-testid="store-home-square-banners"] .grid > a.banner-entry {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 0 !important;
        overflow: hidden !important;

        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }

    /* Categories */
    salla-slider .slide--one-sixth {
        width: 45% !important;
    }

    .slide--cat-entry {
        height: 2rem !important;
        padding: 0 !important;
    }

    .slide--cat-entry img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }


    /* Titles */
    .s-slider-block__title h2,
    .s-block__title h2 {
        font-size: 18px !important;
    }

    .s-slider-block__title::after {
        font-size: 15px !important;
        max-width: 90% !important;
        line-height: 1.6 !important;
    }


    /* Products */

    .s-products-slider-card {
        width: 56% !important;
    }

    .s-product-card-entry {
        height: 350px !important;
        min-height: 0 !important;
        border-radius: 10px !important;
        overflow: hidden !important;
    }

    .s-product-card-image {
        height: 180px !important;
        max-height: 180px !important;
    }

    .s-product-card-entry img {
        width: 100% !important;
        height: 180px !important;
        object-fit: cover !important;
    }

    .s-product-card-content {
        padding: 14px 12px 15px !important;
    }

    .s-product-card-content-subtitle {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
  
    .s-product-card-content-title {
        font-size: 15px !important;
        line-height: 1.5 !important;
    }

    .s-product-card-content-sub {
        font-size: 14px !important;
        margin-top: 6px;
    }

    .s-product-card-entry .s-button-element {
        width: 100% !important;
        min-height: 44px !important;
        border-radius: 7px !important;
        font-size: 14px !important;
    }


    /* ما يميزنا */
    .s-block--features {
        padding-top: 90px !important;
    }

    .s-block--features::before {
        top: 12px !important;
        font-size: 22px !important;
    }

    .s-block--features::after {
        top: 43px !important;
        height: 48px !important;
        padding-bottom: 8px !important;
        font-size: 15px !important;
        background-size: 120px !important;
    }

    .s-block--features__item {
        margin-top: 20px !important;
        border-radius: 10px !important;
        box-shadow: 0 4.44px 4.44px 0 #0000001A !important;
    }

    .s-block-trust-store-features__grid {
        grid-template-columns: 1fr !important;
    }


    /* Footer */
    footer * {
        margin: 0 auto;
        text-align: center;
    }
  .s-payments-list {
    flex-wrap: nowrap;
}

}

  .blog-link{

  display: none !important;
}




/* قائمه عناصر */


/* Desktop + Mobile */
section[data-testid="store-home-square-photos"] > .grid {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-auto-flow: row !important;
    gap: 12px !important;
}

section[data-testid="store-home-square-photos"] a.banner-entry {
    height: 380px !important;
    min-height: 380px !important;
    max-height: 380px !important;
    aspect-ratio: unset !important;
}


/* Mobile */
@media (max-width: 768px) {

    section[data-testid="store-home-square-photos"] > .grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
    }

    section[data-testid="store-home-square-photos"] a.banner-entry {
        height: 150px !important;
        min-height: 150px !important;
        max-height: 150px !important;
    }

}





/* =========================================
   HEADER OVER HERO + GLASS
========================================= */

/* الهيدر في البداية راكب فوق الـHero */
header[data-testid="store-header"] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;

    background: rgba(15, 25, 45, 0.08) !important;

    backdrop-filter: blur(2px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(2px) saturate(120%) !important;

    border-bottom: none !important;
    box-shadow: none !important;

    transition:
        background 0.3s ease,
        box-shadow 0.3s ease !important;
}


/* كل أجزاء الهيدر شفافة */
header[data-testid="store-header"] .top-navbar,
header[data-testid="store-header"] .main-nav-container,
header[data-testid="store-header"] #mainnav {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}


/* =========================================
   MENU - WHITE
========================================= */

header[data-testid="store-header"] #mainnav,
header[data-testid="store-header"] #mainnav a,
header[data-testid="store-header"] #mainnav i,
header[data-testid="store-header"] #mainnav i:before,
header[data-testid="store-header"] #mainnav b {
    color: #fff !important;
}

header[data-testid="store-header"] #mainnav a:hover {
    color: #fff !important;
    opacity: .8 !important;
}


/* =========================================
   SEARCH
========================================= */

header[data-testid="store-header"] .s-search-input {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;

    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 8px !important;

    box-shadow: none !important;

    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

header[data-testid="store-header"] .s-search-input::placeholder {
    color: rgba(255, 255, 255, 0.9) !important;
}

header[data-testid="store-header"] .top-navbar svg {
    fill: #fff !important;
    stroke: #fff !important;
}


/* =========================================
   ICONS
========================================= */

header[data-testid="store-header"] .sicon-shopping-bag:before,
header[data-testid="store-header"] .sicon-user-circle:before {
    color: #fff !important;
}


/* =========================================
   WHEN SCROLLING
   Salla adds .fixed-pinned
========================================= */

header[data-testid="store-header"]:has(.fixed-pinned) {
    position: fixed !important;
    top: 0px !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;

    background: rgba(15, 25, 45, 0.02) !important;

    backdrop-filter: blur(14px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%) !important;

    border-bottom: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
}


/* لما يكون Sticky، خلي كل أجزاء الهيدر جوا بعض */
header[data-testid="store-header"]:has(.fixed-pinned) .top-navbar,
header[data-testid="store-header"]:has(.fixed-pinned) .main-nav-container,
header[data-testid="store-header"]:has(.fixed-pinned) #mainnav {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}


/* مهم جدًا: امنع الـfixed-pinned نفسه إنه يطلع كعنصر منفصل */
header[data-testid="store-header"] .main-nav-container.fixed-pinned {
    position:  relative;
    top: auto !important;
    width: 100% !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.main-nav-container.fixed-pinned .inner {

    position: absolute !important
    ;

}


/* =========================================
   REMOVE ALL HEADER BORDERS
========================================= */

header[data-testid="store-header"],
header[data-testid="store-header"] *,
header[data-testid="store-header"] .main-nav-container,
header[data-testid="store-header"] #mainnav {
    border-bottom: none !important;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

    header[data-testid="store-header"] {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
background: radial-gradient(circle, rgba(1, 26, 87, 1) 50%, rgba(0, 5, 23, 1) 100%, rgba(1, 26, 87, 1) 100%) !important;
    backdrop-filter: blur(8px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(2px) saturate(20%) !important;
    border-bottom: none !important;
    box-shadow: none !important;
    transition: background 0.3s ease,
        box-shadow 0.3s ease !important;
}
}


.main-menu {
    padding-top: 2rem !important;
}