/* 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 */
body,
#app,
.main-content,
.store-home,
.s-block {
    background-color: #FBF4EE !important;
}

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

/* Product Cards Background */
.s-product-card,
.s-products-slider-card {
    background-color: #FBF4EE !important;
}



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

/* Header - Light Cream */
#mainnav,
#mainnav .inner,
.main-nav-container,
.topnav-is-dark .top-navbar {
    background-color: #FDF8F3 !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: #786E53 !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: #FDF8F3 !important;
}


/* =========================
   Product Card Custom Design
   (تصميم كارت المنتج المخصص)
========================= */

/* تصميم كارت المنتج العام */
.s-product-card,
.s-products-slider-card {
    background-color: #FBF4EE !important;
    border: 2px solid #786E53 !important; /* لون الإطار الخارجي المتناسق */
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.s-product-card:hover,
.s-products-slider-card:hover {
    box-shadow: 0 4px 12px rgba(120, 110, 83, 0.15) !important;
}

/* صورة المنتج داخل الكارت */
.s-product-card .s-product-card-image,
.s-products-slider-card .s-product-card-image {
    border-radius: 12px 12px 0 0 !important;
    overflow: hidden !important;
}

/* محتوى تفاصيل المنتج (العنوان، السعر) */
.s-product-card .s-product-card-content,
.s-products-slider-card .s-product-card-content {
    background-color: #FBF4EE !important;
    padding: 16px !important;
    text-align: right !important;
}

/* عنوان المنتج */
.s-product-card h3 a,
.s-product-card .s-product-card-title,
.s-products-slider-card h3 a,
.s-products-slider-card .s-product-card-title {
    color: #4A4033 !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    text-align: right !important;
}

/* أسعار المنتجات */
.s-product-card .s-product-card-price,
.s-products-slider-card .s-product-card-price {
    color: #4A4033 !important;
    font-weight: bold !important;
    text-align: right !important;
}

/* زر "إضافة للسلة" المخصص */
.s-product-card salla-add-product-button button,
.s-products-slider-card salla-add-product-button button,
.s-product-card .btn-add-cart,
.s-products-slider-card .btn-add-cart {
    background-color: transparent !important;
    color: #4A4033 !important;
    border: 1.5px solid #786E53 !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: all 0.3s ease !important;
}

/* تأثير مرور الماوس على الزر */
.s-product-card salla-add-product-button button:hover,
.s-products-slider-card salla-add-product-button button:hover {
    background-color: #786E53 !important;
    color: #FFFFFF !important;
}

/* أيقونة المفضلة (القلب) داخل الكارت */
.s-product-card .s-product-card-wishlist,
.s-products-slider-card .s-product-card-wishlist {
    background-color: rgba(253, 248, 243, 0.9) !important;
    border: 1px solid #786E53 !important;
    border-radius: 50% !important;
    color: #786E53 !important;
    padding: 8px !important;
}

.s-product-card .s-product-card-wishlist svg,
.s-products-slider-card .s-product-card-wishlist svg {
    fill: #786E53 !important;
    color: #786E53 !important;
}


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

/* مسافة عامة لشبكة المنتجات */
.s-products-grid, 
.s-block--products .grid,
.swiper-wrapper {
    gap: 20px !important; /* مسافة بين الكروت (يمكنك تقليلها أو زيادتها حسب رغبتك مثل 15px أو 24px) */
}

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

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



/* Hamburger Menu Icon - 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: #786E53 !important;
    fill: #786E53 !important;
    stroke: #786E53 !important;
}