@import ../_common

.banner

  .bg
    .banner-wrapper
      bottom: 10% !important
     
      .banner-content
        display: flex
        align-items: flex-end
        justify-content: center

        .content
          width: 100%
          max-width: 665px
          text-align: center

          h1
            color: var(--white)
            text-transform: capitalize
            line-height: 1.2

          h6  
            color: var(--white)
            opacity: 0.9

          p
            margin: 20px 0 30px
            color: var(--white)
            opacity: 0.9
            font-weight: 300
            @include media(768)
              margin: 7px 0 2px


       

            &::before
              background: var(--white)
           
            svg
              path
                fill: var(--white)

.product-secA
    background: rgba(226, 235, 223, 1)
    padding: 60px 0
    .heading
        text-align: center
        margin-bottom: 3rem
        h3
            color: var(--thirdy)
            text-transform: capitalize

    .discover-slider
        .swiper-wrapper
            .card
                display: flex
                flex-direction: column
                align-items: center
                justify-content: center
                gap: 10px
                overflow: hidden

                img
                    border-radius: 50%
                    width: 140px
                    height: 140px
                p
                    text-transform: uppercase
                    text-align: center
                    font-size: 14px
                    color: var(--thirdy)
            

.product-secB
    padding: 4rem 0
    background: #e9e9e924
    overflow: visible

    .layout
        display: grid
        grid-template-columns: 300px 1fr
        gap: 2rem
        align-items: start

    .filter-sidebar-wrapper
        position: sticky
        top: 120px
        display: flex
        flex-direction: column
        gap: 1.5rem
        overflow: visible

        .filter-sidebar
            padding: 2rem
            background: #fff
            border-radius: 12px
            margin: 5px
            box-shadow: 0 4px 20px rgba(9, 34, 13, 0.15), 0 2px 8px rgba(9, 34, 13, 0.08)

            &::-webkit-scrollbar
                width: 6px

            &::-webkit-scrollbar-track
                background: rgba(191, 229, 186, 0.2)
                border-radius: 10px

            &::-webkit-scrollbar-thumb
                background: rgba(9, 34, 13, 0.3)
                border-radius: 10px
                &:hover
                    background: rgba(9, 34, 13, 0.5)

            .filter-head
                display: flex
                gap: 15px
                align-items: center
                margin-bottom: 2rem

                .icon
                    font-size: 20px
                    color: rgba(9, 34, 13, 1)

                h6
                    font-size: 18px
                    font-weight: 600

            .filter-group
                padding: 12px 0
                border-bottom: 1px solid rgba(191, 229, 186, 1)
                overflow: visible
                transition: .3s ease

                &:first-of-type
                    padding-top: 0

                &:last-of-type
                    border-bottom: none

                .filter-title
                    font-weight: 600
                    font-size: 16px
                    color: rgba(9, 34, 13, 1)
                    cursor: pointer
                    position: relative
                    display: flex
                    justify-content: space-between
                    align-items: center

                    &::after
                        content: ''
                        width: 14px
                        height: 2px
                        background: rgba(9, 34, 13, 1)
                        position: relative
                        transition: .3s ease

                    &::before
                        content: ''
                        width: 2px
                        height: 14px
                        background: rgba(9, 34, 13, 1)
                        position: absolute
                        right: 6px
                        transition: .3s ease

                // Active state - when filter group is expanded
                &.active
                    .filter-title
                        margin-bottom: 15px

                        &::before
                            height: 0
                            opacity: 0

                        &::after
                            background: #999

            .price-range
                display: flex
                align-items: center
                gap: 12px
                margin-bottom: 10px
                cursor: pointer

                &:last-child
                    margin-bottom: 0

            input[type="checkbox"]
                width: 18px
                height: 18px
                appearance: none
                -webkit-appearance: none
                -moz-appearance: none
                border: 2px solid #999
                border-radius: 4px
                position: relative
                cursor: pointer
                transition: .2s
                flex-shrink: 0
                margin: 0

                &:checked
                    background: rgba(9, 34, 13, 1)
                    border-color: rgba(9, 34, 13, 1)
                    position: relative  // Add this explicitly

                    &::after
                        content: ""
                        display: block  // Add this
                        position: absolute
                        width: 6px
                        height: 10px
                        border-right: 3px solid #fff
                        border-bottom: 3px solid #fff
                        transform: rotate(45deg)
                        top: 2px
                        left: 4px

            label
                font-size: 14px
                color:  #999
                font-family: $Poppins
                cursor: pointer
                transition: .2s ease
                user-select: none

            input[type="checkbox"]:checked + label
                color: var(--black)
                font-weight: 500

            .btn-outline
                width: 100%
                margin-top: 40px

           

 
    .newProducts
        background: linear-gradient(180deg, #C5CB80 0%, #BFE5BA 100%)
        padding: 25px
        border-radius: 12px
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px
        text-align: center
        border: 1px solid rgba(191, 229, 186, 0.5)
        @include media(1024)
          display: none


        h6
            font-weight: 600
            color: rgba(9, 34, 13, 1)
            margin-bottom: 12px
            font-family: $Kugile

        p
            font-size: 14px
            color: rgba(9, 34, 13, 0.8)
            line-height: 1.5
            margin-bottom: 20px



    .product-area
        .product-topbar
            display: flex
            justify-content: space-between
            align-items: center
            margin-bottom: 2rem

            p
                color: var(--text)
                font-size: 14px

                b
                    color: var(--black)
                    font-weight: 600
.product-secB
    padding: 4rem 0
    background: #e9e9e924
    overflow: visible
    position: relative
    @include media(675)
      padding: 2rem 0


    .layout
        display: grid
        grid-template-columns: 300px 1fr
        gap: 2rem
        align-items: start
        @include media(1024)
            grid-template-columns: 1fr

    .mobile-filter-btn
        display: none
        position: absolute
        @include media(1024)
            display: flex
            align-items: center
            gap: 10px
            padding: 5px 20px
            background: rgba(9, 34, 13, 1)
            color: #fff
            border: none
            border-radius: 8px
            font-size: 14px
            font-weight: 600
            cursor: pointer
            margin-bottom: 1rem
            transition: .3s ease
            
            .icon
                font-size: 18px
            
            &:hover
                background: rgba(9, 34, 13, 0.9)

    // Overlay for mobile
    .filter-overlay
        display: none
        @include media(1024)
            position: fixed
            top: 0
            left: 0
            width: 100%
            height: 100%
            background: rgba(0, 0, 0, 0.5)
            z-index: 998
            opacity: 0
            pointer-events: none
            transition: opacity 0.3s ease
            
            &.active
                display: block
                opacity: 1
                pointer-events: auto

    .filter-sidebar-wrapper
        position: sticky
        top: 120px
        display: flex
        flex-direction: column
        gap: 1.5rem
        overflow: visible
        
        @include media(1024)
            position: fixed
            top: 0
            left: 0
            height: 100vh
            width: 100%
            max-width: 50%
            z-index: 111111
            transform: translateX(-100%)
            transition: transform 0.3s ease
            overflow-y: auto
            padding: 1rem
            background: #fff
            @include media(675)
                max-width: 100%
        
            
            &.active
                transform: translateX(0)

        .filter-close-btn
            display: none
            
            @include media(1024)
                display: flex
                align-items: center
                justify-content: space-between
                padding: 10px 20px
                background: var(--gradient-c)
                border-radius: 5px
                
                h6
                    font-size: 18px
                    font-weight: 600
                    color: rgba(9, 34, 13, 1)
                
                .close-icon
                    width: 32px
                    height: 32px
                    display: flex
                    align-items: center
                    justify-content: center
                    background: rgb(255 255 255 / 30%)
                    border-radius: 50%
                    cursor: pointer
                    font-size: 16px
                    color: rgba(9, 34, 13, 1)
                    transition: .3s ease
                    
                    &:hover
                        background: rgba(191, 229, 186, 0.6)

        .filter-sidebar
            padding: 2rem
            background: #fff
            border-radius: 12px
            margin: 5px
            box-shadow: 0 4px 20px rgba(9, 34, 13, 0.15), 0 2px 8px rgba(9, 34, 13, 0.08)
            
            @include media(768)
                margin: 0
                box-shadow: none
                padding: 1rem

            &::-webkit-scrollbar
                width: 6px

            &::-webkit-scrollbar-track
                background: rgba(191, 229, 186, 0.2)
                border-radius: 10px

            &::-webkit-scrollbar-thumb
                background: rgba(9, 34, 13, 0.3)
                border-radius: 10px
                &:hover
                    background: rgba(9, 34, 13, 0.5)

            .filter-head
                display: flex
                gap: 15px
                align-items: center
                margin-bottom: 2rem
                
                @include media(1024)
                    display: none

                .icon
                    font-size: 20px
                    color: rgba(9, 34, 13, 1)

                h6
                    font-size: 18px
                    font-weight: 600

            .filter-group
                padding: 12px 0
                border-bottom: 1px solid rgba(191, 229, 186, 1)
                overflow: visible
                transition: .3s ease

                &:first-of-type
                    padding-top: 0

                &:last-of-type
                    border-bottom: none

                .filter-title
                    font-weight: 600
                    font-size: 16px
                    color: rgba(9, 34, 13, 1)
                    cursor: pointer
                    position: relative
                    display: flex
                    justify-content: space-between
                    align-items: center

                    &::after
                        content: ''
                        width: 14px
                        height: 2px
                        background: rgba(9, 34, 13, 1)
                        position: relative
                        transition: .3s ease

                    &::before
                        content: ''
                        width: 2px
                        height: 14px
                        background: rgba(9, 34, 13, 1)
                        position: absolute
                        right: 6px
                        transition: .3s ease

                &.active
                    .filter-title
                        margin-bottom: 15px

                        &::before
                            height: 0
                            opacity: 0

                        &::after
                            background: #999

            .price-range
                display: flex
                align-items: center
                gap: 12px
                margin-bottom: 10px
                cursor: pointer

                &:last-child
                    margin-bottom: 0

            input[type="checkbox"]
                width: 18px
                height: 18px
                appearance: none
                -webkit-appearance: none
                -moz-appearance: none
                border: 2px solid #999
                border-radius: 4px
                position: relative
                cursor: pointer
                transition: .2s
                flex-shrink: 0
                margin: 0

                &:checked
                    background: rgba(9, 34, 13, 1)
                    border-color: rgba(9, 34, 13, 1)
                    position: relative

                    &::after
                        content: ""
                        display: block
                        position: absolute
                        width: 6px
                        height: 10px
                        border-right: 3px solid #fff
                        border-bottom: 3px solid #fff
                        transform: rotate(45deg)
                        top: 2px
                        left: 4px

            label
                font-size: 14px
                color: #999
                font-family: $Poppins
                cursor: pointer
                transition: .2s ease
                user-select: none

            input[type="checkbox"]:checked + label
                color: var(--black)
                font-weight: 500

            .btn-outline
                width: 100%
                margin-top: 40px

    .newProducts
        background: linear-gradient(180deg, #C5CB80 0%, #BFE5BA 100%)
        padding: 25px
        border-radius: 12px
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px
        text-align: center
        border: 1px solid rgba(191, 229, 186, 0.5)
        display: none

        h6
            font-weight: 600
            color: rgba(9, 34, 13, 1)
            margin-bottom: 12px
            font-family: $Kugile

        p
            font-size: 14px
            color: rgba(9, 34, 13, 0.8)
            line-height: 1.5
            margin-bottom: 20px

    .product-area
        .product-topbar
            display: flex
            justify-content: space-between
            align-items: center
            margin-bottom: 2rem

            p
                color: var(--text)
                font-size: 14px

                b
                    color: var(--black)
                    font-weight: 600

            .sorting
                display: flex
                gap: 10px
                align-items: center

                .custom-select
                    min-width: 170px
                    height: fit-content
                    background: var(--white)
                    border: 2px solid rgba(191, 229, 186, 1)
                    border-radius: 8px
                    padding: 10px 20px
                    font-size: 14px
                    @include media(767)
                        padding: 4px 8px
                    .select
                        padding: 0px
                        span
                            font-size: 14px
                            color: var(--black)
                            @include media(767)
                                font-size: 13px
                    .dropdown-menu
                        top: 100%
                        li
                            font-size: 14px
                            padding: 6px 10px

                .btn-group
                    border: 2px solid rgba(191, 229, 186, 1)
                    padding: 5px
                    border-radius: 12px
                    display: flex
                    gap: 10px

                    .grid-btn, .list-btn
                        width: 36px
                        height: 36px
                        border-radius: 8px
                        background: #fff
                        cursor: pointer
                        display: flex
                        justify-content: center
                        align-items: center
                        transition: .2s ease

                        &:hover
                            background: rgba(191, 229, 186, 0.2)
                            border-color: rgba(9, 34, 13, 1)
                        &.active
                            background: rgba(191, 229, 186, 1)

        .pagination
            display: flex
            justify-content: center
            align-items: center
            gap: 8px
            margin-top: 3rem

            .page-btn
                padding: 8px 18px
                border-radius: 10px
                border: 2px solid rgba(9, 34, 13, 0.2)
                font-family: $Poppins
                background: #fff
                font-size: 14px
                cursor: pointer
                color: rgba(9, 34, 13, 1)
                transition: .2s ease
                display: flex
                align-items: center
                justify-content: center

                &:hover
                    border-color: rgba(9, 34, 13, 0.4)
                    background: rgba(191, 229, 186, 0.25)

                &.active
                    background: rgba(9, 34, 13, 1)
                    color: #fff
                    border-color: rgba(9, 34, 13, 1)

                &.prev, &.next
                    padding: 8px 20px

       

        .product-grid
            display: grid
            grid-template-columns: repeat(3, 1fr)
            gap: 2rem
            @include media(1024)
              grid-template-columns: repeat(2, 1fr)
            @include media(675)
              grid-template-columns: 1fr
              gap: 20px

            .product-card
                width: 100%
                background: #fff
                border-radius: 14px
                display: flex
                flex-direction: column
                box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px
                flex: 1
                overflow: hidden

                .img-box
                    width: 100%
                    display: flex
                    justify-content: center
                
                    img
                        width: 100%
                        display: block
                        object-fit: contain

                .card-content
                    padding: 20px
                    display: flex
                    flex-direction: column
                    flex: 1
                    @include media(540)
                        padding: 15px

                    .rating
                        display: flex
                        gap: 3px
                        margin-bottom: 5px

                        img
                            width: 15px

                        span
                            font-size: 12px
                            margin-left: 6px
                            color: var(--black)

                    .title
                        font-size: 16px 
                        font-weight: 600
                        color: var(--black)

                    .sub
                        font-size: 12px
                        color: var(--text)
                        line-height: 1.3
                        margin: 5px 0 6px

                    .size
                        font-size: 12px
                        color: var(--black)

                    .price
                        margin: 10px 0 15px
                        font-size: 18px
                        font-weight: 600
                        color: #000
                        
                    .btn
                        margin-top: auto

.product-secC
    background: var(--gradient-c)
    padding: 70px 0

    .heading
        text-align: center
        margin-bottom: 1rem
        @include media(540)
            width: 100%
            max-width: 270px
            margin: 0 auto

        h4
            color: var(--thirdy)
            margin-bottom: 15px

        p
            color: var(--thirdy)

        .btn-fill-2
            margin-top: 30px