@import ../_common

.product-detail-banner
  position: relative

  .product-bg
    position: relative
    height: 100vh
    line-height: 0
    @include media(1024)
      height: auto
      min-height: 100vh
    
    > img
      position: absolute
      width: 100%
      height: 100%
      object-fit: cover
      object-position: center
      top: 0
      left: 0
      z-index: 1
        
    .product-wrapper
      position: absolute
      left: 50% !important
      top: 60% !important
      z-index: 5
      height: 80vh
      transform: translate(-50%, -50%)
      width: 100%
      max-width: 100%
      @include media(1366)
        height: 100vh
      @include media(1024)
        position: relative
        left: 0 !important
        top: 0 !important
        transform: none
        height: auto
        padding: 40px 0
      @include media(768)
        padding: 20px 0

      .banner-content
        display: flex
        align-items: flex-end
        justify-content: center
        @include media(1024)
          align-items: center
          margin-top: 90px

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

          .swiper-wrap
            display: flex
            align-items: center
            gap: 20px
            z-index: 9999
            
            .product-detail-card-img
              height: 445px
              overflow: hidden
              @include media(1024)
                height: 100px
                display: none
                
              .swiper-wrapper
                width: 165px

                .swiper-slide
                  .img-box
                    width: 70px
                    height: 70px
                    border-radius: 50%
                    overflow: hidden
                    cursor: pointer

                    img
                      width: 100%

            .card-grid
              display: grid
              grid-template-columns: 545px 2fr
              background: var(--white)
              border-radius: 30px
              overflow: hidden
              height: 70vh
              margin-top: 30px
              @include media(1450)
                height: 84vh
              @include media(1024)
                grid-template-columns: 1fr
                height: 100%
                margin-top: 0
                border-radius: 15px
              @include media(768)
                height: 100%

            .card-img
              width: 100%

              img 
                width: 100%
                height: 100%

            .card-content
              text-align: left
              padding: 45px
              @include media(1450)
                padding: 35px
              @include media(1024)
                padding: 30px
              @include media(768)
                padding: 15px

              .heading
                h3
                  color: var(--thirdy)
                  font-size: 24px
                  @include media(1024)
                    font-size: 17px
                    line-height: 1.5

                p
                  color: var(--secondary)
                  font-size: 14px
                  margin: 2px 0 6px
                  padding-bottom: 10px
                  border-bottom: 1px solid rgba(224, 224, 224, 1)
                  @include media(991)
                    margin: 5px 0 7px

              p:not(.heading p , .disc):not(.counter p)
                color: var(--text)
                padding: 0 0 15px
                font-size: 16px
                line-height: 20px
                font-weight: 400
                opacity: 0.7
                @include media(1366)
                  padding: 0 0 10px
                  font-size: 14px
                  line-height: 18px
                @include media(1024)
                  font-size: 12px
                  line-height: 14px
                  padding: 0 0 6px

              .disc
                color: #030302  
                font-size: 10px  
                line-height: 14px  
                font-weight: 600
                margin-top: 10px 
                
              .img-icons
                width: 100%
                max-width: 445px
                margin-top: 20px
              
              .buttons
                display: flex
                gap: 30px
                
                .btn
                  @include media(1024)
                    justify-content: space-between
                    --padding: 20px
                    gap: 12px

                .btn-fill-2
                  img
                    width: 20px

              .emi-wrap
                display: flex
                justify-content: space-between
                padding: 9px 0 12px
                @include media(991)
                  padding: 9px 0 13px
                  flex-direction: row

                .pincode
                  display: flex
                  align-items: center

                  input
                    height: 44px
                    padding: 0 15px
                    border: 1px solid #B5DDB7
                    border-right: none
                    border-radius: 14px 0 0 14px
                    outline: none
                    font-size: 14px
                    color: #333
                    width: 150px           
                    font-family: $Poppins

                    &::placeholder
                      color: #666

                  button
                    height: 44px
                    background: #06210B
                    color: #fff
                    border-radius: 14px
                    font-size: 14px
                    cursor: pointer
                    white-space: nowrap

                .emi
                  display: flex
                  gap: 15px
                  @include media(991)
                    gap: 8px
                    margin-bottom: 8px

                  li
                    width: 45px
                    height: 45px
                    border-radius: 50%
                    display: flex
                    justify-content: center
                    align-items: center
                    background: var(--black)
                    color: var(--secondary)
                    font-size: 10px
                    position: relative
                    cursor: pointer
                    transition: all .3s ease
                    @include media(1024)
                      width: 35px
                      height: 35px

                    input[type="radio"]
                      width: 100%
                      height: 100%
                      position: absolute
                      inset: 0
                      opacity: 0
                      cursor: pointer

                    &.active,
                    input[type="radio"]:checked + span
                      background: var(--secondary)
                      color: var(--black)

              .counter
                display: flex
                justify-content: space-between
                padding: 15px 0 20px
                border-bottom: 1px solid rgba(224, 224, 224, 1)
                border-top: 1px solid rgba(224, 224, 224, 1)
                @include media(540)
                  padding: 10px 0

                .price
                  p
                    font-size: 20px
                    color: var(--black)
                    font-weight: 600
                    @include media(1024)
                      font-size: 16px

                  .mrp
                    color: var(--secondary)
                    font-size: 14px
                    font-weight: 600
                    margin-top: 10px
                    display: block
                    font-family: $Poppins

                .count
                  display: flex
                  align-items: center
                  gap: 15px
                  margin-top: 10px
                  
                  p
                    font-size: 14px
                    color: var(--black)
                    font-weight: 500

                  .bts
                    display: flex
                    gap: 20px
                    padding: 1px 19px
                    border: 1px solid rgba(232, 231, 231, 1)

              .rating
                display: flex
                justify-content: space-between
                padding: 0 0 15px
                @include media(1024)
                  flex-direction: column
                  
                .stars
                  font-size: 12px
                  
                  img
                    width: 12px
                    height: 12px

                  span
                    font-size: 12px

                .social-media
                  display: flex
                  align-items: center
                  gap: 8px
                  
                  img
                    width: 24px
                    height: 24px
                    
                  span
                    font-size: 12px

                li
                  font-size: 12px


       
.detail-secM
    padding: 60px 0
    background: #fff

  
    .title-block
        margin-bottom: 30px

        .main-title
            font-weight: 500
        

        .sub-title
            font-size: 14px
            margin-top: 10px
            color: #666
            font-weight: 600

        .divider
            width: 100%
            height: 1px
            background: #000
            margin-top: 15px

    .ingredient-list
        ol
            margin: 0
            padding-left: 20px
            display: flex
            flex-direction: column
            gap: 25px

            li
                list-style: decimal
                padding-left: 10px

                .title
                    font-size: 18px
                    font-weight: 600
                    margin-bottom: 6px
                    color: #000

                .desc
                    font-size: 15px
                    line-height: 1.6
                    color: #555


.detail-secA
    padding: 0 0 70px
    @include media(991)
      padding: 0 0 40px
    @include media(540)
       padding: 0 0 20px

    .container
       @include media(768)
         padding-right: 0
    

    .heading
        padding: 50px 0 30px
        display: flex
        border-top: 1px solid rgba(145,145,145,1)
        justify-content: space-between
        text-align: center
           padding: 50px 0 20px

        div
            margin-left:  auto
            @include media(991)
               margin: 0 auto


            h3
                color: var(--thirdy)
                width: 100%
                text-align: center
                margin-bottom: 20px
                @include media(540)
                   margin-bottom: 15px

        .swiper-group
            display: flex
            align-items: center
            gap: 5px

            button
                svg
                    display: block
                    path
                        fill: var(--primary)

                &:last-child
                    transform: rotate(180deg)

    .commanSlider
        .swiper-wrapper
            .swiper-slide
                .latest-card
                  
                    display: block
                    border-radius: 14px
                    .content
                        h6
                            font-size: 18px
                            text-align: center
                            padding: 20px

.detail-secB

    .wrapper
        background: rgba(233, 216, 198, 1)
        padding: 60px 
        border-radius: 30px

  
        .title-block
            margin-bottom: 30px

            .main-title
                font-weight: 500
            

            .sub-title
                font-size: 14px
                margin-top:10px
                color: var(--black)
                font-weight: 600

            .divider
                width: 100%
                height: 1px
                background: #000
                margin-top: 15px

        .ingredient-list
            p
                color: var(--text)
                line-height: 1.6
                margin-bottom: 2rem

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


.detail-secC
    padding: 60px 0
    display: none

    .section-title
        margin-bottom: 25px

    .tab
        display: flex
        gap: 20px
        margin-bottom: 40px

        li
            cursor: pointer
            
            &.active
                font-weight: 600
                border-bottom: 2px solid var(--black)

    .tab-nav-content
        .tabs
            display: none

            &.active
                display: block

    .review-box
        background: #f9f9f9
        border-radius: 25px
        padding: 40px
        display: grid
        grid-template-columns: 1fr auto 1fr
        align-items: center
        gap: 91px

        .left
            .rating-breakdown
                padding: 0
                margin: 0
                list-style: none
                display: flex
                flex-direction: column
                gap: 12px

                li
                    display: flex
                    align-items: center
                    gap: 10px
                    font-size: 14px

                    .star-label
                        width: 40px
                        font-weight: 600
                        display: flex
                        align-items: center
                        gap: 4px

                        img
                            width: 14px
                            height: 14px

                    .rating-range
                        -webkit-appearance: none
                        width: 100%
                        height: 6px
                        background: #eee
                        border-radius: 10px
                        position: relative
                        cursor: default

                        &::-webkit-slider-thumb
                            -webkit-appearance: none
                            width: 0
                            height: 0

                        &::-moz-range-thumb
                            width: 0
                            height: 0
                            border: none

                        &::before
                            content: ""
                            position: absolute
                            top: 0
                            left: 0
                            height: 100%
                            width: calc(var(--val) * 1%)
                            background: #000
                            border-radius: 10px
                            pointer-events: none

                    .count
                        width: 30px
                        text-align: right
                        color: #555

        .divider
            width: 1px
            height: 120px
            background: #ccc

        .right
            text-align: center

            .rating
                padding: 0
                margin: 0
                list-style: none
                display: flex
                justify-content: space-between
                gap: 0

                li
                    .big
                        font-size: 48px
                        font-weight: 600
                        margin-bottom: 20px

                    .stars
                        font-size: 20px
                        color: #d4a552
                        margin-bottom: 10px

                        img
                            width: 20px
                            height: 20px

                    .review-count
                        font-size: 14px
                        color: var(--black)
                        margin-bottom: auto

                    .btn
                        display: inline-block
                        background: linear-gradient(90deg, #d4a552, #e2b869)
                        padding: 12px 28px
                        border-radius: 10px
                        color: #fff
                        font-size: 14px
                        text-decoration: none
                        border: none
                        cursor: pointer

    .read-more
        text-align: center
        margin-top: 20px

        a
            font-family: $Kugile
            font-size: 20px
            color: var(--black)
            text-decoration: none

    .accordion-wrapper
        .heading
            h3
                color: var(--black)

        .accordion
            width: 100%
            margin: 2rem auto

            .accordion-item
                background-color: #f9f9f9
                color: #111
                margin: 0 0 -10px
                border-radius: 0.5rem
                box-shadow: 0 2px 5px rgba(0,0,0,0.25)
                position: relative

                img
                    position: absolute
                    right: 0
                    top: 0
                    opacity: 0
                    pointer-events: none
                    transition: opacity .3s ease

                .accordion-item-header
                    padding: 30px
                    padding-right: 130px
                    line-height: 1.25rem
                    display: flex
                    align-items: center
                    position: relative
                    cursor: pointer
                    font-size: 20px

                    &::after
                        content: "\002B"
                        font-size: 2rem
                        position: absolute
                        right: 1rem
                        width: 30px
                        height: 30px
                        display: flex
                        align-items: center
                        justify-content: center
                        background: var(--primary)
                        border-radius: 4px
                        color: var(--white)
                        cursor: pointer

                &.active
                    .accordion-item-header::after
                        content: "\2212"

                    img
                        opacity: 1

                .accordion-item-body
                    // Changed from max-height to display for jQuery compatibility
                    display: none
                    overflow: hidden

                    .accordion-item-body-content
                        list-style: none
                        padding: 0 30px 24px 30px
                        margin: 0
                        display: flex
                        flex-direction: column
                        gap: 5px

                        li
                            position: relative
                            padding-left: 18px
                            line-height: 1.3
                            color: var(--black)
                            font-size: 14px

                            &::before
                                content: ''
                                position: absolute
                                left: 0
                                top: 8px
                                width: 6px
                                height: 6px
                                background: var(--black)
                                border-radius: 50%

.detail-secD
    padding: 0 0 70px
    .heading
        padding: 50px 0 30px
        display: flex
        border-top: 1px solid rgba(145,145,145,1)
        justify-content: space-between

        h3
            color: var(--thirdy)
            width: 100%

        .swiper-group
            display: flex
            align-items: center
            gap: 5px

            button
                svg
                    display: block

                    path
                        fill: var(--primary)

                &:last-child
                    transform: rotate(180deg)

    .latest-lead
        .swiper-wrapper
            .swiper-slide
                .latest-card
                    background: var(--white)
                    border-radius: 20px
                    overflow: hidden
                    border: 1px solid rgba(192, 192, 192, 1)
                    padding-bottom: 20px
                    transition: all .3s ease
                    padding: 20px
                    display: block

                    .img
                        width: 100%

                        img
                            width: 100%
                            height: 220px
                            object-fit: cover
                            border-radius: 20px 20px 0 0
                            display: block

                        

                    .content
                        padding: 20px 0
                        text-align: left
                        display: flex
                        justify-content: center
                        flex-direction: column
                        align-items: center



                        .date
                            background: var(--green)
                            padding: 6px 14px
                            color: var(--white)
                            font-size: 12px
                            font-weight: 500
                            box-shadow: 0 2px 6px rgba(0,0,0,0.15)

                        h6
                            font-size: 20px
                            font-weight: 600
                            margin-top: 20px
                            color: var(--black)
                            margin-bottom: 8px
                            line-height: 1.4

                        p
                            font-size: 14px
                            color: #555
                            line-height: 1.5

.detail-secE
    position: relative
    padding: 100px 0
    display: flex
    align-items: center
    justify-content: center
    text-align: center
    overflow: hidden
    @include media(540)
       padding: 40px 0


    .bg-icon
        position: absolute
        top: 50%
        left: 50%
        width: 60%
        transform: translate(-50%, -50%)
        pointer-events: none
        user-select: none
        object-fit: contain
        width: 400px
        height: 400px

    .container
        position: relative
        max-width: 900px
        z-index: 2

        h4
            font-family: $Kugile
            font-size: 28px
            font-weight: 400
            color: var(--black)
            line-height: 1.6
            padding: 0 20px
            margin-bottom: 30px
            @include media(540)
              font-size: 18px
              line-height: 1.4
              padding: 43px 0



.detail-secG
  padding: 70px 0
  @include media(768)
    padding: 45px 0


  .container
    @include media(768)
      padding-right: 0



  .heading
    text-align: center
    display: flex
    justify-content: space-between
    // margin-bottom: 3rem

    h3
      color: var(--thirdy)
      width: 100%
      text-align: center
      margin-bottom: 20px


    .swiper-group
      display: flex
      align-items: center
      gap: 5px

      button
        svg
          display: block
          path
            fill: var(--primary)

        &:last-child
          transform: rotate(180deg)

  .moreProject-slider, .commanSlider1
    .swiper-wrapper
      padding: 10px 0
      display: flex
      align-items: stretch

      .swiper-slide
        height: auto
        display: flex

      .viral-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