/* =========================================================
   SEERA — MAIN CATEGORIES PREMIUM V3
   متجر: SEERA.SA.COM

   ضع الكلاس التالي مرة واحدة فقط في Parent Section:
   seera-main-categories

   التصميم:
   - 3 أقسام في الصف على الجوال
   - 6 أقسام في الصف على الكمبيوتر
   - صور طبيعية بدون Grayscale
   - خلفية أسماء ذهبية فاتحة
   - نص بني ذهبي واضح
   - بطاقات متناسقة مثل فكرة Trend
   ========================================================= */


/* =========================================================
   متغيرات الهوية
   ========================================================= */

section.seera-main-categories {
    --seera-gold: #9b8658;
    --seera-gold-dark: #6f5b32;

    --seera-gold-soft: #f3ead5;
    --seera-gold-soft-hover: #eadcb9;

    --seera-gold-border: #dfd0ad;

    --seera-card-border: rgba(155, 134, 88, 0.20);
    --seera-card-border-hover: rgba(155, 134, 88, 0.48);

    --seera-shadow: rgba(83, 68, 37, 0.08);
    --seera-shadow-hover: rgba(83, 68, 37, 0.14);

    position: relative !important;

    width: 100% !important;

    padding-top: 6px !important;
    padding-bottom: 20px !important;
}


/* =========================================================
   الحاوية الرئيسية
   ========================================================= */

section.seera-main-categories > .container {
    width: 100% !important;

    max-width: 1280px !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* =========================================================
   الشبكة
   ========================================================= */

section.seera-main-categories .square-grid {
    display: grid !important;

    align-items: stretch !important;

    width: 100% !important;

    margin: 0 !important;

    gap: 10px !important;
}


/* =========================================================
   بطاقة القسم
   ========================================================= */

section.seera-main-categories
.square-grid
> .banner-square {

    position: relative !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: stretch !important;

    min-width: 0 !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    border:
        1px solid
        var(--seera-card-border) !important;

    border-radius:
        13px !important;

    background:
        #ffffff !important;

    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.025),
        0 7px 18px var(--seera-shadow) !important;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease !important;
}


/* =========================================================
   رابط الصورة
   ========================================================= */

section.seera-main-categories
.square-grid
> .banner-square
> a {

    position: relative !important;

    display: block !important;

    width: 100% !important;
    height: auto !important;

    min-height: 0 !important;

    flex: 1 1 auto !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fdfcf9 100%
        ) !important;

    color: inherit !important;

    text-decoration: none !important;

    border: 0 !important;
}


/* =========================================================
   الصور
   ========================================================= */

section.seera-main-categories
.square-grid
> .banner-square
> a img {

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 1 !important;

    visibility: visible !important;

    filter: none !important;
    -webkit-filter: none !important;

    transform: scale(1) !important;

    border: 0 !important;
    border-radius: 0 !important;

    transition:
        transform 0.3s ease !important;
}


/* =========================================================
   إلغاء تأثير Grayscale و Zoom الافتراضي
   في قالب سلة
   ========================================================= */

section.seera-main-categories
.banner-square.grayscaled-img img,

section.seera-main-categories
.banner-square.zoomed-img img,

section.seera-main-categories
.banner-square.grayscaled-img:hover img,

section.seera-main-categories
.banner-square.zoomed-img:hover img {

    opacity: 1 !important;

    filter: none !important;
    -webkit-filter: none !important;
}


/* =========================================================
   شريط اسم القسم
   خلفية ذهبية فاتحة
   ========================================================= */

section.seera-main-categories
.square-grid
> .banner-square
> .text-wrapper {

    position: relative !important;

    inset: auto !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    z-index: 5 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;

    min-height: 40px !important;
    height: auto !important;

    flex: 0 0 auto !important;

    margin: 0 !important;

    padding:
        7px 5px !important;

    opacity: 1 !important;

    visibility: visible !important;

    overflow: hidden !important;

    transform: none !important;

    background:
        #f3ead5 !important;

    background-color:
        #f3ead5 !important;

    background-image:
        none !important;

    color:
        #6f5b32 !important;

    border: 0 !important;

    border-top:
        1px solid
        #dfd0ad !important;

    border-radius:
        0 !important;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.55) !important;

    text-align:
        center !important;
}


/* =========================================================
   اسم القسم
   ========================================================= */

section.seera-main-categories
.square-grid
> .banner-square
> .text-wrapper
> p {

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;

    min-width: 0 !important;

    min-height: 25px !important;

    margin: 0 !important;

    padding:
        0 2px !important;

    opacity: 1 !important;

    visibility: visible !important;

    background:
        transparent !important;

    background-color:
        transparent !important;

    background-image:
        none !important;

    color:
        #6f5b32 !important;

    -webkit-text-fill-color:
        #6f5b32 !important;

    font-family:
        inherit !important;

    font-size:
        11px !important;

    font-weight:
        700 !important;

    line-height:
        1.4 !important;

    text-align:
        center !important;

    white-space:
        normal !important;

    overflow:
        visible !important;

    overflow-wrap:
        anywhere !important;

    word-break:
        normal !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    box-shadow:
        none !important;

    text-shadow:
        none !important;

    transform:
        none !important;
}


/* =========================================================
   فرض لون النص على أي عناصر داخلية
   ========================================================= */

section.seera-main-categories
.square-grid
> .banner-square
> .text-wrapper span,

section.seera-main-categories
.square-grid
> .banner-square
> .text-wrapper strong,

section.seera-main-categories
.square-grid
> .banner-square
> .text-wrapper div,

section.seera-main-categories
.square-grid
> .banner-square
> .text-wrapper .w-full,

section.seera-main-categories
.square-grid
> .banner-square
> .text-wrapper .font-primary {

    color:
        #6f5b32 !important;

    -webkit-text-fill-color:
        #6f5b32 !important;

    background:
        transparent !important;

    background-color:
        transparent !important;

    background-image:
        none !important;

    font-family:
        inherit !important;

    font-weight:
        700 !important;

    text-align:
        center !important;

    opacity:
        1 !important;

    visibility:
        visible !important;

    text-shadow:
        none !important;
}


/* =========================================================
   معالجة مباشرة لكلاس سلة font-primary
   ========================================================= */

section.seera-main-categories
.banner-square
.text-wrapper
.font-primary {

    color:
        #6f5b32 !important;

    -webkit-text-fill-color:
        #6f5b32 !important;
}


/* =========================================================
   Hover على الكمبيوتر
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    section.seera-main-categories
    .square-grid
    > .banner-square:hover {

        transform:
            translateY(-4px) !important;

        border-color:
            var(--seera-card-border-hover) !important;

        box-shadow:
            0 8px 24px
            var(--seera-shadow-hover) !important;
    }


    section.seera-main-categories
    .square-grid
    > .banner-square:hover
    > a img {

        transform:
            scale(1.035) !important;
    }


    section.seera-main-categories
    .square-grid
    > .banner-square:hover
    > .text-wrapper {

        background:
            #eadcb9 !important;

        background-color:
            #eadcb9 !important;

        background-image:
            none !important;

        border-top-color:
            #d4c293 !important;
    }


    section.seera-main-categories
    .square-grid
    > .banner-square:hover
    > .text-wrapper
    > p {

        color:
            #5f4b27 !important;

        -webkit-text-fill-color:
            #5f4b27 !important;
    }

}


/* =========================================================
   الجوال
   3 أقسام في كل صف
   ========================================================= */

@media (max-width: 767px) {

    section.seera-main-categories {

        padding-top:
            4px !important;

        padding-bottom:
            15px !important;
    }


    section.seera-main-categories
    > .container {

        padding-left:
            7px !important;

        padding-right:
            7px !important;
    }


    section.seera-main-categories
    .square-grid {

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            ) !important;

        gap:
            8px !important;
    }


    section.seera-main-categories
    .square-grid
    > .banner-square {

        border-radius:
            11px !important;

        box-shadow:
            0 3px 10px
            rgba(83, 68, 37, 0.065) !important;
    }


    section.seera-main-categories
    .square-grid
    > .banner-square
    > .text-wrapper {

        min-height:
            38px !important;

        padding:
            6px 3px !important;
    }


    section.seera-main-categories
    .square-grid
    > .banner-square
    > .text-wrapper
    > p {

        min-height:
            25px !important;

        font-size:
            10px !important;

        font-weight:
            700 !important;

        line-height:
            1.35 !important;
    }

}


/* =========================================================
   الجوالات الصغيرة
   ========================================================= */

@media (max-width: 390px) {

    section.seera-main-categories
    > .container {

        padding-left:
            5px !important;

        padding-right:
            5px !important;
    }


    section.seera-main-categories
    .square-grid {

        gap:
            6px !important;
    }


    section.seera-main-categories
    .square-grid
    > .banner-square
    > .text-wrapper {

        min-height:
            36px !important;

        padding:
            5px 2px !important;
    }


    section.seera-main-categories
    .square-grid
    > .banner-square
    > .text-wrapper
    > p {

        font-size:
            9.5px !important;

        line-height:
            1.3 !important;
    }

}


/* =========================================================
   شاشات أصغر من 350px
   ========================================================= */

@media (max-width: 350px) {

    section.seera-main-categories
    .square-grid {

        gap:
            5px !important;
    }


    section.seera-main-categories
    .square-grid
    > .banner-square
    > .text-wrapper
    > p {

        font-size:
            9px !important;
    }

}


/* =========================================================
   التابلت
   ========================================================= */

@media (min-width: 768px) and (max-width: 1100px) {

    section.seera-main-categories
    .square-grid {

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            ) !important;

        gap:
            12px !important;
    }


    section.seera-main-categories
    .square-grid
    > .banner-square
    > .text-wrapper {

        min-height:
            42px !important;
    }


    section.seera-main-categories
    .square-grid
    > .banner-square
    > .text-wrapper
    > p {

        font-size:
            11.5px !important;
    }

}


/* =========================================================
   الكمبيوتر
   6 أقسام في صف واحد
   ========================================================= */

@media (min-width: 1101px) {

    section.seera-main-categories
    .square-grid {

        grid-template-columns:
            repeat(
                6,
                minmax(0, 1fr)
            ) !important;

        gap:
            14px !important;
    }


    section.seera-main-categories
    .square-grid
    > .banner-square
    > .text-wrapper {

        min-height:
            43px !important;

        padding:
            8px 6px !important;
    }


    section.seera-main-categories
    .square-grid
    > .banner-square
    > .text-wrapper
    > p {

        font-size:
            12px !important;
    }

}