/* ==========================================================================
   1. CATEGORY SECTION - CLEAN GRID (SECTION 2)
   ========================================================================== */

/* REMOVE CAROUSEL */
#main > section:nth-child(2) .swiper-wrapper,
#main > section:nth-child(2) .slick-track {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
    transform: none !important;
}

/* CARD Container - Clean & Borderless */
#main > section:nth-child(2) .swiper-slide,
#main > section:nth-child(2) .slick-slide,
#main > section:nth-child(2) .item,
#main > section:nth-child(2) .category-item,
#main > section:nth-child(2) .card {
    background: transparent !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border: none !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    transition: 0.3s ease;
}

/* HOVER EFFECT */
#main > section:nth-child(2) .swiper-slide:hover,
#main > section:nth-child(2) .item:hover,
#main > section:nth-child(2) .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}

/* IMAGE CONTAINER */
#main > section:nth-child(2) .image,
#main > section:nth-child(2) .img,
#main > section:nth-child(2) .card-image,
#main > section:nth-child(2) .thumb {
    display: block !important;
    background: #f6f1e9;
    padding: 0 !important;
    height: auto !important;
    border-radius: 12px 12px 0 0 !important;
    overflow: hidden !important;
}

/* IMAGE */
#main > section:nth-child(2) img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.3s ease;
}

#main > section:nth-child(2) .swiper-slide:hover img,
#main > section:nth-child(2) .item:hover img,
#main > section:nth-child(2) .card:hover img {
    transform: scale(1.03);
}

/* GREEN TITLE BAR */
#main > section:nth-child(2) .title,
#main > section:nth-child(2) .category-title,
#main > section:nth-child(2) h2,
#main > section:nth-child(2) h3 {
    background: #4A6332 !important;
    color: #ffffff !important;
    margin: 0 !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important; 
    direction: rtl !important;
    text-align: right !important;
    min-height: 52px;
    border-radius: 0 0 12px 12px !important;
}

/* INJECT ARROW ON THE LEFT (‹) */
#main > section:nth-child(2) .title::before,
#main > section:nth-child(2) .category-title::before,
#main > section:nth-child(2) h2::before,
#main > section:nth-child(2) h3::before {
    content: "‹" !important;
    font-size: 24px !important;
    color: #ffffff !important;
    font-family: sans-serif !important;
    line-height: 1 !important;
}

#main > section:nth-child(2) a {
    text-decoration: none !important;
}

/* HIDE SLIDER ARROWS */
#main > section:nth-child(2) .swiper-button-next,
#main > section:nth-child(2) .swiper-button-prev,
#main > section:nth-child(2) .slick-arrow {
    display: none !important;
}

/* RESPONSIVE FOR SECTION 2 */
@media (max-width: 991px) {
    #main > section:nth-child(2) .swiper-wrapper,
    #main > section:nth-child(2) .slick-track {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }
}

@media (max-width: 767px) {
    #main > section:nth-child(2) .swiper-wrapper,
    #main > section:nth-child(2) .slick-track {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
    #main > section:nth-child(2) .swiper-slide,
    #main > section:nth-child(2) .slick-slide,
    #main > section:nth-child(2) .item,
    #main > section:nth-child(2) .category-item,
    #main > section:nth-child(2) .card {
        border-radius: 8px !important;
    }
    #main > section:nth-child(2) .image,
    #main > section:nth-child(2) .img,
    #main > section:nth-child(2) .card-image,
    #main > section:nth-child(2) .thumb {
        height: auto !important;
        padding: 0 !important;
        border-radius: 8px 8px 0 0 !important;
    }
    #main > section:nth-child(2) img {
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
    }
    #main > section:nth-child(2) .title,
    #main > section:nth-child(2) .category-title,
    #main > section:nth-child(2) h2,
    #main > section:nth-child(2) h3 {
        font-size: 11px !important;
        padding: 8px 10px !important;
        min-height: 38px !important;
        border-radius: 0 0 8px 8px !important;
    }
    #main > section:nth-child(2) .title::before,
    #main > section:nth-child(2) .category-title::before,
    #main > section:nth-child(2) h2::before,
    #main > section:nth-child(2) h3::before {
        font-size: 18px !important;
    }
}


/* ==========================================================================
   2. PRODUCT CARD FORCE DESIGN (SECTIONS 4, 6, 8, 9)
   ========================================================================== */

/* 1. الكارت بالكامل - إجبار الخلفية والإطار */
#main > section:nth-child(4) [class*="slide"], #main > section:nth-child(4) [class*="item"], #main > section:nth-child(4) [class*="card"],
#main > section:nth-child(6) [class*="slide"], #main > section:nth-child(6) [class*="item"], #main > section:nth-child(6) [class*="card"],
#main > section:nth-child(8) [class*="slide"], #main > section:nth-child(8) [class*="item"], #main > section:nth-child(8) [class*="card"],
#main > section:nth-child(9) [class*="slide"], #main > section:nth-child(9) [class*="item"], #main > section:nth-child(9) [class*="card"] {
    background: #fdfbf7 !important;
    border: 1px solid #e1dacb !important;
    border-radius: 12px !important;
    padding: 12px !important;
    box-shadow: none !important;
    text-align: center !important;
    direction: rtl !important;
}

/* 2. مربع حاوية الصورة الخلفية */
#main > section:nth-child(4) [class*="image"], #main > section:nth-child(4) [class*="thumb"], #main > section:nth-child(4) [class*="img"],
#main > section:nth-child(6) [class*="image"], #main > section:nth-child(6) [class*="thumb"], #main > section:nth-child(6) [class*="img"],
#main > section:nth-child(8) [class*="image"], #main > section:nth-child(8) [class*="thumb"], #main > section:nth-child(8) [class*="img"],
#main > section:nth-child(9) [class*="image"], #main > section:nth-child(9) [class*="thumb"], #main > section:nth-child(9) [class*="img"] {
    background: #f6f1e9 !important;
    border-radius: 8px !important;
    padding: 0 !important;
    margin-bottom: 12px !important;
    overflow: hidden !important;
}

/* ضبط مقاس الصورة المربعة */
#main > section:nth-child(4) img,
#main > section:nth-child(6) img,
#main > section:nth-child(8) img,
#main > section:nth-child(9) img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
}

/* 3. العناوين والنصوص والسعر */
#main > section:nth-child(4) h2, #main > section:nth-child(4) h3, #main > section:nth-child(4) h4, #main > section:nth-child(4) [class*="title"], #main > section:nth-child(4) [class*="name"],
#main > section:nth-child(6) h2, #main > section:nth-child(6) h3, #main > section:nth-child(6) h4, #main > section:nth-child(6) [class*="title"], #main > section:nth-child(6) [class*="name"],
#main > section:nth-child(8) h2, #main > section:nth-child(8) h3, #main > section:nth-child(8) h4, #main > section:nth-child(8) [class*="title"], #main > section:nth-child(8) [class*="name"],
#main > section:nth-child(9) h2, #main > section:nth-child(9) h3, #main > section:nth-child(9) h4, #main > section:nth-child(9) [class*="title"], #main > section:nth-child(9) [class*="name"] {
    color: #1a1a1a !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    margin: 8px 0 4px 0 !important;
}

/* النصوص الفرعية */
#main > section:nth-child(4) [class*="subtitle"], #main > section:nth-child(4) [class*="options"],
#main > section:nth-child(6) [class*="subtitle"], #main > section:nth-child(6) [class*="options"],
#main > section:nth-child(8) [class*="subtitle"], #main > section:nth-child(8) [class*="options"],
#main > section:nth-child(9) [class*="subtitle"], #main > section:nth-child(9) [class*="options"] {
    color: #8c826e !important;
    font-size: 12px !important;
}

/* السعر */
#main > section:nth-child(4) [class*="price"], #main > section:nth-child(4) [class*="cost"],
#main > section:nth-child(6) [class*="price"], #main > section:nth-child(6) [class*="cost"],
#main > section:nth-child(8) [class*="price"], #main > section:nth-child(8) [class*="cost"],
#main > section:nth-child(9) [class*="price"], #main > section:nth-child(9) [class*="cost"] {
    color: #2b2b2b !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: 4px 0 14px 0 !important;
}

/* 4. زر أضف إلى السلة باللون الأخضر الزيتوني */
#main > section:nth-child(4) button, #main > section:nth-child(4) [class*="btn"], #main > section:nth-child(4) [class*="add"],
#main > section:nth-child(6) button, #main > section:nth-child(6) [class*="btn"], #main > section:nth-child(6) [class*="add"],
#main > section:nth-child(8) button, #main > section:nth-child(8) [class*="btn"], #main > section:nth-child(8) [class*="add"],
#main > section:nth-child(9) button, #main > section:nth-child(9) [class*="btn"], #main > section:nth-child(9) [class*="add"] {
    background-color: #4A6332 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    width: 100% !important;
    padding: 10px 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

/* 5. حظر وإخفاء زر القلب تماماً */
#main > section:nth-child(4) [class*="heart"], #main > section:nth-child(4) [class*="wish"], #main > section:nth-child(4) [class*="fav"],
#main > section:nth-child(6) [class*="heart"], #main > section:nth-child(6) [class*="wish"], #main > section:nth-child(6) [class*="fav"],
#main > section:nth-child(8) [class*="heart"], #main > section:nth-child(8) [class*="wish"], #main > section:nth-child(8) [class*="fav"],
#main > section:nth-child(9) [class*="heart"], #main > section:nth-child(9) [class*="wish"], #main > section:nth-child(9) [class*="fav"] {
    display: none !important;
}


/* ==========================================================================
   3. BOTTOM NAV & ARROWS FIX (SECTIONS 4, 6, 8, 9)
   ========================================================================== */

/* 1. إجبار الحاوية السفلية على رص العناصر أفقياً */


/* 2. إظهار زرار "عرض الكل" باللون الزيتوني المعتمد */
#main > section:nth-child(4) a[href*="category"], #main > section:nth-child(4) [class*="view-all"], #main > section:nth-child(4) [class*="more-btn"], #main > section:nth-child(4) [class*="show-all"],
#main > section:nth-child(6) a[href*="category"], #main > section:nth-child(6) [class*="view-all"], #main > section:nth-child(6) [class*="more-btn"], #main > section:nth-child(6) [class*="show-all"],
#main > section:nth-child(8) a[href*="category"], #main > section:nth-child(8) [class*="view-all"], #main > section:nth-child(8) [class*="more-btn"], #main > section:nth-child(8) [class*="show-all"],
#main > section:nth-child(9) a[href*="category"], #main > section:nth-child(9) [class*="view-all"], #main > section:nth-child(9) [class*="more-btn"], #main > section:nth-child(9) [class*="show-all"] {
    display: inline-flex !important;
    color: #4A6332 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

/* 3. إجبار أزرار الأسهم على الرص بجانب بعضها في اليسار */
#main > section:nth-child(4) [class*="arrows-wrapper"], #main > section:nth-child(4) [class*="slider-buttons"], #main > section:nth-child(4) [class*="nav-buttons"],
#main > section:nth-child(6) [class*="arrows-wrapper"], #main > section:nth-child(6) [class*="slider-buttons"], #main > section:nth-child(6) [class*="nav-buttons"],
#main > section:nth-child(8) [class*="arrows-wrapper"], #main > section:nth-child(8) [class*="slider-buttons"], #main > section:nth-child(8) [class*="nav-buttons"],
#main > section:nth-child(9) [class*="arrows-wrapper"], #main > section:nth-child(9) [class*="slider-buttons"], #main > section:nth-child(9) [class*="nav-buttons"] {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    direction: ltr !important;
}

/* 4. ضبط شكل الأسهم التلقائية لتكون بجانب بعضها تماماً */
#main > section:nth-child(4) .swiper-button-next, #main > section:nth-child(4) .swiper-button-prev, #main > section:nth-child(4) .slick-next, #main > section:nth-child(4) .slick-prev, #main > section:nth-child(4) [class*="arrow"],
#main > section:nth-child(6) .swiper-button-next, #main > section:nth-child(6) .swiper-button-prev, #main > section:nth-child(6) .slick-next, #main > section:nth-child(6) .slick-prev, #main > section:nth-child(6) [class*="arrow"],
#main > section:nth-child(8) .swiper-button-next, #main > section:nth-child(8) .swiper-button-prev, #main > section:nth-child(8) .slick-next, #main > section:nth-child(8) .slick-prev, #main > section:nth-child(8) [class*="arrow"],
#main > section:nth-child(9) .swiper-button-next, #main > section:nth-child(9) .swiper-button-prev, #main > section:nth-child(9) .slick-next, #main > section:nth-child(9) .slick-prev, #main > section:nth-child(9) [class*="arrow"] {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    background-color: #4A6332 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    transform: none !important;
    margin: 0 !important;
}







@media (max-width: 768px) {
    /* 1. إجبار السكشن الخارجي كله على الارتفاع الجديد وإلغاء أي أبعاد مسبقة */
    #main > section.section-carousel {
        height: 180px !important;
        min-height: 180px !important;
        max-height: 180px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important; /* إلغاء أي مارجن سفلي لو موجود */
    }

    /* 2. تنظيف الحاويات الداخلية التابعة للمكتبة (Embla) لمنع أي تمدد رأسي */
    #main > section.section-carousel > div,
    #main > section.section-carousel .embla__container,
    #main > section.section-carousel .embla__slide {
        height: 180px !important;
        min-height: 180px !important;
        max-height: 180px !important;
    }
}



@media (max-width: 768px) {
    /* 1. إجبار السكاشن الخارجية كلها على الارتفاع الجديد وإلغاء المسافات الفاضية */
    #main > section.section-carousel,
    #main > section:nth-child(5),
    #main > section:nth-child(7) {
        height: 180px !important;
        min-height: 180px !important;
        max-height: 180px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    /* 2. تنظيف الحاويات الداخلية للـ Embla والـ Slides للسكاشن الثلاثة */
    #main > section.section-carousel > div,
    #main > section.section-carousel .embla__container,
    #main > section.section-carousel .embla__slide,
    #main > section:nth-child(5) > div,
    #main > section:nth-child(5) .embla__container,
    #main > section:nth-child(5) .embla__slide,
    #main > section:nth-child(7) > div,
    #main > section:nth-child(7) .embla__container,
    #main > section:nth-child(7) .embla__slide {
        height: 180px !important;
        min-height: 180px !important;
        max-height: 180px !important;
    }

    /* 3. ضبط خلفية وحاوية الصور المطلقة داخل السكاشن */
    #main > section.section-carousel .embla__container [class*="absolute"] > div,
    #main > section:nth-child(5) .embla__container [class*="absolute"] > div,
    #main > section:nth-child(7) .embla__container [class*="absolute"] > div {
        padding: 0 !important;
        height: 180px !important;
        min-height: 180px !important;
        max-height: 180px !important;
        overflow: hidden !important;
    }

    /* 4. إجبار الصور كلها على مقاس 180px بدون تمدد */
    #main > section.section-carousel .embla__container img,
    #main > section:nth-child(5) .embla__container img,
    #main > section:nth-child(7) .embla__container img {
        object-fit: cover !important;
        height: 180px !important;
        min-height: 180px !important;
        width: 100% !important;
    }
}

@media (min-width: 1025px) {
    .theme-container [data-items-count="3"] {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        grid-auto-rows: auto !important;
    }

    .theme-container [data-items-count="3"] > *:first-child {
        grid-column: auto !important;
        grid-row: auto !important;
    }

    .theme-container [data-items-count="3"] .media-wrap {
        aspect-ratio: 4/3 !important;
        height: auto !important;
        width: 100% !important;
    }
}