/* Add custom CSS styles below */

/* =========================
   Header
========================= */

#mainnav {
    height: unset !important;
}

#mainnav .inner {
    padding-block: 0.4rem !important;
}

.topnav-is-dark .top-navbar {
    background-color: var(--color-primary);
}

.navbar-brand img {
    max-height: 8rem;
}

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

li:has(a[aria-label="تخفيضات"]) {
    display: none !important;
}

/* Header - Black Text */
#mainnav,
#mainnav a,
#mainnav button,
#mainnav span,
#mainnav .navbar-brand,
.topnav-is-dark .top-navbar,
.topnav-is-dark .top-navbar a,
.topnav-is-dark .top-navbar span,
.topnav-is-dark .top-navbar p,
.topnav-is-dark .top-navbar input,
.topnav-is-dark .top-navbar ::placeholder {
    color: #000 !important;
}

#mainnav svg,
.topnav-is-dark .top-navbar svg,
.topnav-is-dark .s-search-icon svg {
    color: #000 !important;
    fill: #000 !important;
}


/* =========================
   First Banner
========================= */

section.s-block.s-block--photos-slider salla-slider.photos-slider .swiper-slide {
    width: 100%;
}

section.s-block.s-block--photos-slider .carousel-slider .swiper-wrapper > div {
    padding: 0 !important;
}

section:first-of-type.s-block.s-block--photos-slider {
    margin-top: 0;
}

[dir="rtl"] salla-slider.photos-slider .swiper {
    padding: 0;
}

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

img,
.banner-entry {
    background-color: unset !important;
}


/* =========================
   Categories List
   Fixed Equal Spacing
========================= */

/* Desktop: 5 equal columns */
section.s-block.s-block--banners.container .grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    column-gap: 24px !important;
    row-gap: 24px !important;
    align-items: start !important;
    justify-content: stretch !important;
}

/* Remove special layout from first banner */
section.s-block.s-block--banners.container .two-row .banner-entry:first-child {
    grid-column: auto !important;
    grid-row: auto !important;
}

/* Equal dimensions for every category */
section.s-block.s-block--banners.container .grid > a.banner-entry {
    display: block !important;
    position: relative;
    width: 100% !important;
    height: 180px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    transform: none !important;
    transition: none !important;
}

/* Keep category images centered */
section.s-block.s-block--banners.container .grid > a.banner-entry > div,
section.s-block.s-block--banners.container .grid > a.banner-entry .lazy__bg {
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* Consistent image area */
section.s-block.s-block--banners.container .grid > a.banner-entry .lazy__bg {
    width: 100% !important;
    height: 100% !important;
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
    section.s-block.s-block--banners.container .grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        column-gap: 20px !important;
        row-gap: 20px !important;
    }

    section.s-block.s-block--banners.container .grid > a.banner-entry {
        height: 160px !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    section.s-block.s-block--banners.container .grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        column-gap: 12px !important;
        row-gap: 16px !important;
    }

    section.s-block.s-block--banners.container .grid > a.banner-entry {
        height: 120px !important;
    }
}

/* Small Mobile */
@media (max-width: 576px) {
    section.s-block.s-block--banners.container .grid {
        column-gap: 10px !important;
        row-gap: 14px !important;
    }

    section.s-block.s-block--banners.container .grid > a.banner-entry {
        height: 120px !important;
    }
}


/* =========================
   Products
========================= */

salla-add-product-button button {
    background-color: var(--color-primary);
    color: #fff !important;
}

@media (width < 768px) {
    .s-products-slider-card.swiper-slide {
        width: 55%;
    }
}


/* =========================
   Footer
========================= */

.footer-is-light .store-footer .store-footer__inner {
    background-color: var(--color-primary);
    color: #000 !important;
    border: none;
}

.footer-is-light .store-footer {
    background-color: var(--color-primary);
}

/* Remove social contact border */
.footer-is-light .store-footer .contact-social {
    border: none;
}

/* Footer black text */
.footer-is-light .store-footer,
.footer-is-light .store-footer p,
.footer-is-light .store-footer span,
.footer-is-light .store-footer a,
.footer-is-light .store-footer h2,
.footer-is-light .store-footer h3,
.footer-is-light .store-footer h4,
.footer-is-light .store-footer li,
.footer-is-light .store-footer label,
.footer-is-light .store-footer .copyright-text,
.footer-is-light .store-footer .copyright-text p {
    color: #000 !important;
}

/* Footer icons */
.footer-is-light .store-footer svg {
    color: #000 !important;
    fill: #000 !important;
}

span.s-contacts-icon,
.footer-is-light .store-footer .s-contacts-icon {
    color: #000 !important;
    border-color: #000 !important;
}

.store-footer .copyright-text a:hover {
    opacity: 0.7;
    color: #000 !important;
}

.unicode {
    text-align: right;
}

/* Footer alignment on smaller screens */
@media (width < 1024px) {
    footer * {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
}



/* Fix category layout - Desktop */
@media (min-width: 1025px) {
    section.s-block.s-block--banners.container .grid,
    section.s-block.s-block--banners.container .two-row {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        grid-auto-flow: row !important;
        column-gap: 24px !important;
        row-gap: 24px !important;
        justify-content: stretch !important;
        align-items: start !important;
    }

    section.s-block.s-block--banners.container .grid > *,
    section.s-block.s-block--banners.container .two-row > * {
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        justify-self: stretch !important;
        align-self: start !important;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
    section.s-block.s-block--banners.container .grid,
    section.s-block.s-block--banners.container .two-row {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 20px !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    section.s-block.s-block--banners.container .grid,
    section.s-block.s-block--banners.container .two-row {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }
}



/* Store Background Color - White */
body,
#app,
.main-content,
.store-home,
.s-block {
    background-color: #FFFFFF !important;
}

/* Categories Background */
section.s-block.s-block--banners.container {
    background-color: #FFFFFF !important;
}


/* =========================
   Header Background
========================= */

/* Header - White */
#mainnav,
#mainnav .inner,
.main-nav-container,
.topnav-is-dark .top-navbar {
    background-color: #FFFFFF !important;
}

/* Header Text */
#mainnav,
#mainnav a,
#mainnav span,
#mainnav button,
.topnav-is-dark .top-navbar,
.topnav-is-dark .top-navbar a,
.topnav-is-dark .top-navbar span,
.topnav-is-dark .top-navbar p,
.topnav-is-dark .top-navbar ::placeholder {
    color: #000 !important;
}

/* Header Icons */
#mainnav svg,
.topnav-is-dark .top-navbar svg {
    color: #000 !important;
    fill: #000 !important;
}


/* =========================
   Footer Background
========================= */

.footer-is-light .store-footer,
.footer-is-light .store-footer .store-footer__inner {
    background-color: #C9A472 !important;
}

/* Footer Text */
.footer-is-light .store-footer,
.footer-is-light .store-footer p,
.footer-is-light .store-footer span,
.footer-is-light .store-footer a,
.footer-is-light .store-footer h2,
.footer-is-light .store-footer h3,
.footer-is-light .store-footer h4,
.footer-is-light .store-footer li,
.footer-is-light .store-footer label,
.footer-is-light .store-footer .copyright-text p {
    color: #FFFFFF !important;
}

/* Footer Icons */
.footer-is-light .store-footer svg {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}

/* Footer Contact Icon Borders */
.footer-is-light .store-footer .s-contacts-icon {
    border-color: #FFFFFF !important;
}

/* Footer Hover */
.footer-is-light .store-footer a:hover {
    color: #FFFFFF !important;
    opacity: 0.8;
}

/* =========================
   إضافة مسافات بين كروت المنتجات
========================= */

/* تطبيق المسافات على شبكة المنتجات العادية فقط دون السلايدر */
.s-products-grid, 
.s-block--products .grid {
    gap: 20px !important;
}

/* مسافات لعرض المنتجات من الأسفل فقط لمنع كسر السلايدر */
.s-product-card,
.s-products-slider-card {
    margin-bottom: 15px !important;
}

/* لمنع تداخل الكروت في الشاشات الكبيرة وصناديق العرض */
section.s-block.s-block--products .s-product-card {
    margin: 8px !important;
}


/* لمنع تداخل الكروت في الشاشات الكبيرة وصناديق العرض */
section.s-block.s-block--products .s-product-card {
    margin: 8px !important;
}


/* Hamburger Menu Icon - Matching Footer Color */
#mainnav .navbar-toggler,
#mainnav .navbar-toggler svg,
#mainnav .navbar-toggler i,
#mainnav button[aria-label*="القائمة"],
#mainnav button[aria-label*="القائمة"] svg,
#mainnav .sicon-menu,
#mainnav .sicon-menu svg {
    color: #C9A472 !important;
    fill: #C9A472 !important;
    stroke: #C9A472 !important;
}