/* ألوان المتجر */
:root {
    --color-primary: #cd6b7a;
    --store-background: #ffe5eb;
    /* [جديد] لون الأيقونات فوق البنر (أغمق بدرجة بسيطة من الأساسي) */
    --nav-on-banner: #b85a69;
}

/* خلفية المتجر */
body,
#app,
main,
main > section,
.s-block {
    background-color: var(--store-background) !important;
}

/* Header */
#mainnav {
    height: unset !important;
}

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

/* الشريط العلوي */
.top-navbar {
    background-color: #cd6b7a !important;
}

/* إزالة أي خلفية داخلية تغطي لون الشريط العلوي */
.top-navbar > .container,
.top-navbar .flex,
.top-navbar .header-search {
    background-color: transparent !important;
}

/* نصوص وروابط وأيقونات الشريط العلوي */
.top-navbar,
.top-navbar a,
.top-navbar button,
.top-navbar salla-contacts,
.top-navbar .s-search-icon,
.top-navbar .s-search-icon svg {
    color: #fff !important;
    fill: #fff !important;
}

/* مربع البحث */
.top-navbar .s-search-input {
    background-color: #fff !important;
    color: #333 !important;
    border-color: #fff !important;
}

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

/* باقي الهيدر */
#mainnav,
#mainnav .inner,
.main-nav-container {
    background-color: #ffe5eb !important;
}

/* روابط وأيقونات باقي الهيدر */
#mainnav a,
#mainnav button,
#mainnav svg,
.main-nav-container a,
.main-nav-container button,
.main-nav-container svg {
    color: #cd6b7a !important;
    fill: currentColor !important;
}

/* الشعار */
.navbar-brand img {
    max-height: 8rem;
}

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

/* 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 */
section.s-block.s-block--banners.container .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.two-row .banner-entry:first-child {
    grid-column: 1 / 1;
    grid-row: 1 / 1;
}

a.banner-entry {
    height: 405px;
    background-color: unset;
    transition: 0.2s;
}

a.banner-entry:hover {
    transform: scale(1.04);
}

section.s-block.s-block--banners.container .lazy__bg.lazy.entered.loaded {
    background-size: contain;
    background-repeat: no-repeat;
}

@media (min-width: 768px) and (max-width: 1200px) {
    a.banner-entry {
        height: 300px;
    }
}

@media (max-width: 768px) {
    a.banner-entry {
        height: 250px;
    }
}

@media (max-width: 576px) {
    section.s-block.s-block--banners.container .grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    a.banner-entry {
        height: 200px;
    }
}

/* 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 */
.store-footer,
.store-footer .store-footer__inner {
    background-color: #cd6b7a !important;
    color: #fff !important;
    border: 0 !important;
}

.store-footer p,
.store-footer span,
.store-footer a,
.store-footer h2,
.store-footer h3,
.store-footer h4,
.store-footer li,
.store-footer .copyright-text {
    color: #fff !important;
}

.store-footer svg,
.store-footer .s-contacts-icon {
    color: #fff !important;
    fill: #fff !important;
    border-color: #fff !important;
}

.store-footer .contact-social {
    border: 0 !important;
}

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

.unicode {
    text-align: right;
}

@media (width < 1024px) {
    footer * {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
}

/* Fade up Animation */
.fade-up {
    opacity: 0;
    transform: translateY(90px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-up-show {
    opacity: 1;
    transform: translateY(0);
}

/* تصغير ارتفاع شريط الهيدر السفلي */
#mainnav .container > .flex.items-stretch.justify-between.relative {
    min-height: 0 !important;
    padding-block: 6px !important;
}

/* الشعار (تكبير بسيط: 56 ← 64) */
#mainnav .navbar-brand img,
.main-nav-container .navbar-brand img {
    display: block;
    width: auto !important;
    height: auto !important;
    max-height: 64px !important;
    max-width: 180px;
    object-fit: contain;
}

/* الشعار في الهيدر المثبّت (48 ← 52) */
.main-nav-container.fixed-pinned .navbar-brand img {
    max-height: 64px !important;
}

/* تقليل الهوامش حول مجموعة الحساب والسلة */
#mainnav .my-2\.5 {
    margin-block: 4px !important;
}

/* ضبط حجم الأيقونات */
#mainnav salla-user-menu svg,
#mainnav salla-cart-summary svg,
#mainnav .header-btn__icon,
#mainnav .mburger i {
    width: 24px;
    height: 24px;
    font-size: 24px;
}

/* ارتفاع أقل على الجوال */
@media (max-width: 767px) {
    #mainnav .container > .flex.items-stretch.justify-between.relative {
        padding-block: 4px !important;
    }

    #mainnav .navbar-brand img,
    .main-nav-container .navbar-brand img {
        max-height: 50px !important;
        max-width: 150px;
    }

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


/* =====================================================
   [جديد 2] زر "نفذت الكمية": ظاهر بإطار (Outline) ونص بلون الأزرار
   ===================================================== */
salla-add-product-button button[disabled],
salla-add-product-button button:disabled,
salla-add-product-button .s-button-disabled,
.s-product-card-content-footer button[disabled],
.s-product-card-content-footer .s-button-disabled {
    background-color: transparent !important;
    color: var(--color-primary) !important;
    border: 1px solid var(--color-primary) !important;
    opacity: 1 !important;
    visibility: visible !important;
    cursor: not-allowed;
}

salla-add-product-button button[disabled] *,
salla-add-product-button button:disabled *,
salla-add-product-button .s-button-disabled *,
.s-product-card-content-footer button[disabled] *,
.s-product-card-content-footer .s-button-disabled * {
    color: inherit !important;
    opacity: 1 !important;
}


/* =====================================================
   [جديد 3] البنرات من حافة الشاشة لحافة الشاشة بدون أي فراغ (جوال فقط)
   ===================================================== */
@media (max-width: 767px) {
    /* البنر الرئيسي (السلايدر) */
    section.s-block.s-block--photos-slider,
    section.s-block.s-block--photos-slider :is(.container, salla-slider, .s-slider-container, .s-slider-wrapper, .carousel-slider, .swiper, .swiper-slide) {
        padding-inline: 0 !important;
        margin-inline: 0 !important;
        max-width: 100% !important;
    }

    section.s-block.s-block--photos-slider {
        padding-top: 0 !important;
    }

    section.s-block.s-block--photos-slider :is(img, a, picture, salla-slider, .swiper, .swiper-slide, .lazy__bg, .banner-entry) {
        border-radius: 0 !important;
    }

    /* بنرات التصنيفات */
    section.s-block.s-block--banners,
    section.s-block.s-block--banners.container,
    section.s-block.s-block--banners > .container {
        padding-inline: 0 !important;
        margin-inline: 0 !important;
        max-width: 100% !important;
    }

    section.s-block.s-block--banners .grid,
    section.s-block.s-block--banners.container .grid {
        gap: 0 !important;
        column-gap: 0 !important;
        row-gap: 0 !important;
    }

    section.s-block.s-block--banners :is(a.banner-entry, .banner-entry, .lazy__bg) {
        margin: 0 !important;
        border-radius: 0 !important;
    }
}


/* =====================================================
   [جديد 5] توحيد محاذاة وأحجام عناصر الهيدر على خط واحد
   ===================================================== */
#mainnav .container > .flex.items-stretch.justify-between.relative,
#mainnav .container > .flex.items-stretch.justify-between.relative > .flex {
    align-items: center !important;
}

#mainnav .navbar-brand {
    display: flex;
    align-items: center;
}

#mainnav .my-2\.5 {
    gap: 10px;
}

#mainnav salla-user-menu,
#mainnav salla-cart-summary {
    display: flex;
    align-items: center;
    margin: 0 !important;
}

#mainnav salla-user-menu button,
#mainnav .mburger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0 !important;
}

#mainnav salla-cart-summary .s-cart-summary-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
}

#mainnav #s-cart-icon {
    display: flex;
    align-items: center;
}

#mainnav :is(.s-cart-summary-content, .s-cart-summary-total) {
    margin: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

#mainnav :is(salla-user-menu svg, salla-cart-summary i, .mburger i, .header-btn__icon) {
    display: block;
    line-height: 1;
}


/* =====================================================
   [جديد 6] لون أيقونة السلة والعملة بنفس لون أيقونة الحساب والقائمة + إزالة الدايرة البيضا
   ===================================================== */
:is(html, #hh-x) #mainnav :is(salla-cart-summary i, salla-cart-summary svg, .header-btn__icon, .s-cart-summary-total, .s-cart-summary-total *, .s-cart-summary-content) {
    color: var(--color-primary) !important;
    fill: currentColor !important;
}

/* فوق البنر (أعلى الصفحة الرئيسية): نفس الدرجة الأغمق اللي بتستخدمها أيقونة الحساب والقائمة */
:is(html, #hh-x) body.hero-header:not(.is-scrolled) #mainnav :is(salla-cart-summary i, salla-cart-summary svg, .header-btn__icon, .s-cart-summary-total, .s-cart-summary-total *, .s-cart-summary-content) {
    color: var(--nav-on-banner) !important;
    fill: currentColor !important;
}

/* إزالة أي دايرة/إطار/خلفية بيضا حوالين أيقونة السلة والحساب (رقم السلة نفسه ما اتغيرش) */
:is(html, #hh-x) #mainnav :is(salla-cart-summary, salla-user-menu),
:is(html, #hh-x) #mainnav :is(salla-cart-summary, salla-user-menu) :not(.s-cart-summary-count),
:is(html, #hh-x) #mainnav :is(salla-cart-summary, salla-user-menu) :not(.s-cart-summary-count)::before,
:is(html, #hh-x) #mainnav :is(salla-cart-summary, salla-user-menu) :not(.s-cart-summary-count)::after {
    background-color: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    outline: 0 !important;
}