/* توحيد إطار صور المنتجات - ثيم رائد */

/* إطار الصورة */
.s-product-card-image,
.product-card__image,
.thumb-wrapper {
    height: 280px !important;   /* تقدر تعدل الرقم */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* الصورة نفسها */
.s-product-card-image img,
.product-card__image img,
.thumb-wrapper img {
    max-height: 100% !important;
    width: auto !important;
    object-fit: contain !important;
    display: block;
}
/* ================== ألوان وهوية المتجر ================== */

:root {
    --primary-color: #003E5F !important;  /* الأزرق الداكن لهوية برد الهوا */
    --secondary-color: #FFFFFF !important;
    --linear-gradient: linear-gradient(to right, var(--primary-color), var(--secondary-color)) !important;
    --font-color: #ffffff !important;

    /* روابط الصور */
    --logo-url: url("https://imgur.com/Ge37OQt.png");       /* شعار برد الهوا */
    --cat-ac-url: url("https://i.imgur.com/mNSzTVb.png");     /* المكيفات */
    --cat-maint-url: url("https://i.imgur.com/rfTpVGn.png");  /* قسم الصيانة */
    --cat-clean-url: url("https://i.imgur.com/YwjRxtw.png");  /* قسم التنظيف */
    --cat-copper-url: url("https://i.imgur.com/Vr2Ormb.png"); /* قسم النحاس والاكسسوارات */
}

/* تصحيح ارتفاع الصور في السلايدر المصغّر */
.thumb-wrapper img {
    height: 100%;
}

/* ================== شاشة البداية (Splash Screen) ================== */

.index::before {
    content: '';
    width: 100%;
    height: 100%;
    border: 2px solid var(--primary-color) !important;
    background: var(--secondary-color) var(--logo-url);
    position: fixed;
    inset: 0;
    z-index: 999999999 !important;
    transform: scale(0);
    background-size: 20% !important;
    background-repeat: no-repeat;
    background-position: center !important;
    animation-name: splash;
    animation-duration: 2.5s;
    animation-fill-mode: forwards;
}

@keyframes splash {
    0%,
    20%,
    80% {
        transform: scale(1);
    }
    100% {
        transform: scale(0) rotate(360deg);
    }
}

/* موبايل – نكبر الشعار شوي */
@media only screen and (max-width: 767px) {
    .index::before {
        background-size: 35% !important;
    }
}

/* ================== الهيدر والقائمة ================== */

.main-menu {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    padding-top: 1rem;
    padding-bottom: 0;
}

.main-menu li.root-level > a {
    padding-top: 0;
    padding-bottom: 1rem;
    font-weight: 600;
}

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

.main-menu li > a {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
}

/* هيدر نظيف بظل بسيط */
.main-header,
.main-nav-container {
    background-color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

/* موبايل القائمة الجانبية */
@media only screen and (max-width: 767px) {
    .main-menu li > a,
    .mm-spn li {
        font-size: 15px;
    }
}

/* ================== شريط العروض (التمرير) ================== */

.marquee-container {
    margin: 0 10px !important;
}

@media only screen and (max-width: 767px) {
    .marquee-container {
        margin: 4px 10px !important;
    }
}

/* ================== البلॉकات العامة في الرئيسية ================== */

/* مسافات مريحة بين الأقسام */
.s-block {
    margin-top: 30px;
    margin-bottom: 30px;
}

.s-block--best-offers {
    margin-top: 2rem;
}

/* تعديل بسيط على السلايدر الرئيسي للصور */
salla-slider.photos-slider .swiper {
    padding-bottom: 1.5rem;
    padding-left: 0;
    padding-right: 0;
}

salla-slider.photos-slider .swiper-slide {
    width: 100%;
    margin: 0;
    padding: 0 5px;
}

/* أزرار التنقل في عناوين السلايدر */
.s-slider-v-centered .s-slider-block__title-nav button {
    background-color: var(--secondary-color);
}

/* ================== عناوين احترافية للبلوكات ================== */

/* عناوين البلوكات كبسولة جذابة */
.s-block__title {
    text-align: center;
    margin: 25px 0 20px;
}

.s-block__title h2 {
    display: inline-block;
    background: linear-gradient(135deg, #003E5F, #005F94);
    color: #ffffff;
    padding: 12px 48px;
    border-radius: 999px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.5px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
    position: relative;
}

/* نلغي الخط السفلي القديم */
.s-block__title h2::after {
    content: none !important;
}

/* ================== أقسام التكييف (أيقونات دائرية) ================== */

/* نخفّف الحركات الزايدة ونضبط الحواف العامة للسلايدر */
.swiper.s-slider-container.swiper-initialized {
    padding: 5px;
}

div:has(.slide--one-sixth) {
    transition: none !important;
    transform: none !important;
}

/* نخفي الأيقونات الافتراضية والعنوان داخل الكرت */
.swiper-slide.slide--one-sixth i::before {
    content: "" !important;
}

.swiper-slide.slide--one-sixth h2 {
    display: none !important;
}

/* الرابط نفسه يصير هو الأيقونة */
a.slide--cat-entry {
    padding: 0;
}

/* نخفي الأسهم إذا كانت مقفلة */
button.s-slider-nav-arrow.swiper-button-disabled.swiper-button-lock {
    display: none !important;
}

/* تنسيق عام للأيقونات الدائرية */
section.s-block--categories .swiper-slide.slide--one-sixth a {
    display: block;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center;
    height: auto !important;
    aspect-ratio: 1;
    border-radius: 50%;
}

/* ترتيب الأقسام حسب ظهورها في السلايدر */
/* 1 / 4  : المكيفات */
section.s-block--categories .swiper-slide.slide--one-sixth[aria-label="1 / 4"] a {
    background-image: var(--cat-ac-url) !important;
}

/* 2 / 4  : قسم الصيانة */
section.s-block--categories .swiper-slide.slide--one-sixth[aria-label="2 / 4"] a {
    background-image: var(--cat-maint-url) !important;
}

/* 3 / 4  : قسم النحاس و اكسسوارات التكييف */
section.s-block--categories .swiper-slide.slide--one-sixth[aria-label="3 / 4"] a {
    background-image: var(--cat-copper-url) !important;
}

/* 4 / 4  : قسم التنظيف */
section.s-block--categories .swiper-slide.slide--one-sixth[aria-label="4 / 4"] a {
    background-image: var(--cat-clean-url) !important;
}

/* مسافات فوق وتحت بلوك الأقسام في الرئيسية (نسخة رائد) */
.index section.s-block--categories {
    margin-top: -8px !important;
    margin-bottom: 5px !important;
}

/* موبايل – نجعلها شبكية بدل سلايدر ضيّق */
@media (max-width: 768px) {
    .slide--one-sixth {
        width: 25% !important;
        display: inline-block;
    }
}

@media only screen and (max-width: 767px) {

    section.s-block.s-block--categories .swiper-wrapper {
        display: block !important;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .index section.s-block--categories .swiper-slide.slide--one-sixth {
        width: 25% !important;
        padding: 2px !important;
        margin-bottom: 10px;
    }

    .index section.s-block--categories {
        margin-top: -15px !important;
        margin-bottom: 0 !important;
    }
}

/* ================== البنرات ================== */

.lazy__bg.loaded {
    opacity: 1;
    background-color: #ffffff !important;
}

.banner-entry {
    box-shadow: 1px 1px 8px -2px var(--primary-color);
    height: 230px;
}

.has-overlay::after,
.has-overlay:hover::after {
    background-color: transparent !important;
}

/* نسخة موبايل للبنرات */
@media only screen and (max-width: 767px) {

    .banner-entry {
        height: 100px !important;
    }

    .banner-entry h3 {
        font-size: 12px !important;
        line-height: 20px !important;
        background: gray;
        border-radius: 8px;
        width: 115% !important;
        margin: 90px -10px auto;
        padding: 2px;
    }

    .two-row .banner-entry:first-child h3 {
        width: 130% !important;
        margin: 82px -18px auto;
        padding: 10px;
    }
}

footer {
    background-color: #003E5F !important;
}

.footer-bottom,
.copyright,
.s-footer,
footer {
    background-color: #ffffff !important;
    color: #222222 !important;
}

.footer-bottom a,
.copyright a,
.s-footer a,
footer a {
    color: #222222 !important;
}