- var page_Title = 'Product Details';
- var form_validation       = true;
- var tooltip               = true;
- var modal                 = true;
- var theme_customizer      = true;
- var slick                 = true;
- var header_slider         = true;
- var sidebar               = true;
- var scrollbar             = true;
- var zoom_magnifier        = true;
- var owlcarousel           = true;
- var ecommerce             = true;
- var touchspin_2           = true;
- var form_validation_custom = true;
doctype html
html(lang='en')
  include ../../components/header-files
  body
    include ../../components/loader
    include ../../components/taptop
    // page-wrapper Start
    #pageWrapper.page-wrapper.compact-wrapper
      include ../../components/header
      // Page Body Start
      .page-body-wrapper
        include ../../components/sidebar
        .page-body
          .container.w-full
            .page-title
              .grid.grid-cols-12.mx-2.items-center
                div(class="col-span-6 sm:col-span-12")
                  h3
                    | Product Details
                div(class="col-span-6 sm:col-span-12")
                  ol.breadcrumb.flex
                    li.breadcrumb-item
                      a(href='index.html')                                        
                        svg.stroke-icon
                          use(href='../assets/svg/icon-sprite.svg#stroke-home')
                    li.breadcrumb-item Ecommerce
                    li.breadcrumb-item.active Product Details
          // Container-fluid starts
          .container
            div
              .grid.grid-cols-12.card-gap.product-page-main
                div(class="col-span-4 xxl:col-span-6 md:col-span-12 box-col-6")
                  .card
                    .card-body
                      #sync1.product-slider.owl-carousel.owl-theme
                        .item
                          figure.zoom(onmousemove='zoom(event)' style='background-image: url(../assets/images/ecommerce/01.jpg)')
                            img.max-w-full(src='../assets/images/ecommerce/01.jpg', alt='user')
                        .item
                          figure.zoom(onmousemove='zoom(event)' style='background-image: url(../assets/images/ecommerce/02.jpg)')
                            img.max-w-full(src='../assets/images/ecommerce/02.jpg', alt='user')
                        .item
                          figure.zoom(onmousemove='zoom(event)' style='background-image: url(../assets/images/ecommerce/03.jpg)')
                            img.max-w-full(src='../assets/images/ecommerce/03.jpg', alt='user')
                        .item
                          figure.zoom(onmousemove='zoom(event)' style='background-image: url(../assets/images/ecommerce/04.jpg)')
                            img.max-w-full(src='../assets/images/ecommerce/04.jpg', alt='user')
                        .item
                          figure.zoom(onmousemove='zoom(event)' style='background-image: url(../assets/images/ecommerce/05.jpg)')
                            img.max-w-full(src='../assets/images/ecommerce/05.jpg', alt='user')
                        .item
                          figure.zoom(onmousemove='zoom(event)' style='background-image: url(../assets/images/ecommerce/06.jpg)')
                            img.max-w-full(src='../assets/images/ecommerce/06.jpg', alt='user')
                        .item
                          figure.zoom(onmousemove='zoom(event)' style='background-image: url(../assets/images/ecommerce/07.jpg)')
                            img.max-w-full(src='../assets/images/ecommerce/07.jpg', alt='user')
                        .item
                          figure.zoom(onmousemove='zoom(event)' style='background-image: url(../assets/images/ecommerce/08.jpg)')
                            img.max-w-full(src='../assets/images/ecommerce/08.jpg', alt='user')
                      #sync2.owl-carousel.owl-theme
                        .item
                          img.max-w-full(src='../assets/images/ecommerce/01.jpg', alt='user')
                        .item
                          img.max-w-full(src='../assets/images/ecommerce/02.jpg', alt='user')
                        .item
                          img.max-w-full(src='../assets/images/ecommerce/03.jpg', alt='user')
                        .item
                          img.max-w-full(src='../assets/images/ecommerce/04.jpg', alt='user')
                        .item
                          img.max-w-full(src='../assets/images/ecommerce/05.jpg', alt='user')
                        .item
                          img.max-w-full(src='../assets/images/ecommerce/06.jpg', alt='user')
                        .item
                          img.max-w-full(src='../assets/images/ecommerce/07.jpg', alt='user')
                        .item
                          img.max-w-full(src='../assets/images/ecommerce/08.jpg', alt='user')
                div(class="col-span-5 xxl:col-span-12 box-col-12 order-0 xxl:order-1 box-ord-1")
                  .card
                    .card-body
                      .product-page-details
                        h3 Women's Top
                      .product-price
                        | $350.00  
                        del $500.00 
                      ul.product-color
                        li.bg-primary
                        li.bg-secondary
                        li.bg-success
                        li.bg-info
                        li.bg-warning
                      hr
                      p
                        | Rock paper scissors various dots half sleeves girl's regular fit t-shirt i 100% cotton t-shirt with half sleeve round neck i regular wear solid kids tees and black sleeve.
                      div
                        table.product-page-width(class="!w-auto")
                          tbody
                            tr
                              td 
                                b Brand &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                              td Pixelstrap
                            tr
                              td 
                                b Availability &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                              td.txt-success.font-bold In Stock
                            tr
                              td 
                                b Seller &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                              td Hector Magana
                            tr
                              td 
                                b Material &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                              td Cotton
                            tr
                              td 
                                b Fit &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                              td Regular Fit
                      hr
                      .grid.grid-cols-12.gap-1
                        div(class="col-span-4 sm:col-span-12")
                          h6.product-title Share
                        div(class="col-span-8 sm:col-span-12")
                          .product-icon
                            ul.product-social.flex.gap-2
                              li.d-inline-block
                                a(href='https://www.facebook.com/' target="_blank")
                                  i.fa-brands.fa-facebook-f
                              li.d-inline-block
                                a(href='https://in.pinterest.com/' target="_blank")
                                  i.fa-brands.fa-pinterest-p
                              li.d-inline-block
                                a(href='https://twitter.com/' target="_blank")
                                  i.fa-brands.fa-x-twitter
                              li.d-inline-block
                                a(href='https://www.instagram.com/' target="_blank")
                                  i.fa-brands.fa-instagram
                              li.d-inline-block
                                a(href='https://rss.app/' target="_blank")
                                  i.fa-solid.fa-rss
                      hr
                      .grid.grid-cols-12.gap-1
                        div(class="col-span-4 sm:col-span-12") 
                          h6.product-title Quantity
                        div(class="col-span-8 sm:col-span-12")
                          .touchspin-wrapper.flex.gap-1.justify-start
                            button.decrement-touchspin.btn-touchspin.touchspin-primary
                              i.fa-solid.fa-minus 
                            input.input-touchspin.spin-outline-primary(type='number' value='1' readonly)
                            button.increment-touchspin.btn-touchspin.touchspin-primary
                              i.fa-solid.fa-plus
                      hr
                      .grid.grid-cols-12.gap-1
                        div(class="col-span-4 sm:col-span-12")
                          h6.product-title Rate Now
                        div(class="col-span-8 sm:col-span-12")
                          .main-star-rating.common-f-start
                            .common-flex.star-box
                              i.fa-solid.fa-star.active
                              i.fa-solid.fa-star.active
                              i.fa-solid.fa-star.active
                              i.fa-solid.fa-star.active
                              i.fa-solid.fa-star
                            span (250 review)
                      hr
                      .m-t-15.btn-showcase
                        a.btn.btn-primary.btn-hover-effect.text-white.inline-block(href="cart.html") 
                          i.fa-solid.fa-cart-shopping.me-1
                          | Add To Cart
                        a.btn.btn-danger.btn-hover-effect.inline-block(href="wishlist.html" class="!text-white") 
                          i.fa-solid.fa-heart.me-1
                          | Add To WishList
                div(class="col-span-3 xxl:col-span-6 md:col-span-12 box-col-6")
                  .card
                    .card-body
                      // side-bar block start
                      .filter-block
                        h5 Categories
                        ul
                          li Bags
                          li Footwear
                          li Watches
                          li Jewelry 
                          li Perfume
                          li Swimwear
                          li Pets
                          li Books 
                          li Electronic
                  .card
                    .card-body
                      .collection-filter-block
                        ul.pro-services
                          li
                            .flex
                              i(data-feather='truck')
                              .grow
                                h6 Free Shipping                                    
                                span Free shipping world wide
                          li
                            .flex
                              i(data-feather='clock')
                              .grow
                                h6 24 X 7 Service                                    
                                span Online service for new customer
                          li
                            .flex
                              i(data-feather='gift')
                              .grow
                                h6 Festival Offer                                 
                                span New online special festival
                          li
                            .flex
                              i(data-feather='credit-card')
                              .grow
                                h6 Online Payment                                  
                                span Country to popular belief.    
                    // side-bar block end
            .card
              .grid.grid-cols-12.product-page-main
                div(Class="col-span-12 tabs")
                  ul.tab-links.border-tab.nav-primary.mb-0
                    li
                      a.tab-link.active(data-tabfilter="1" class="!rounded-none")
                        | Description
                      .material-border
                    li
                      a.tab-link(data-tabfilter="2" class="!rounded-none")
                        | Additional Info
                      .material-border
                    li
                      a.tab-link(data-tabfilter="3" class="!rounded-none")
                        | Write Review
                      .material-border
                  .tab-content
                    .tab-pan.fade.active.show(data-tabcontent="1")
                      .info-part
                        p.c-o-light The model is wearing a white blouse from our stylist's collection, see the image for a mock-up of what the actual blouse would look like.it has text written on it in a black cursive language which looks great on a white color.
                      .info-part 
                        h6 Fabric:
                        p.c-o-light Art silk is manufactured by synthetic fibres like rayon. It's light in weight and is soft on the skin for comfort in summers.Art silk is manufactured by synthetic fibres like rayon. It's light in weight and is soft on the skin for comfort in summers.
                      .info-part 
                        h6 Size & Fit:
                        p.c-o-light The model (height 5'8") is wearing a size S
                      .info-part
                        h6 Material & Care:
                        p.c-o-light Top fabric: pure cotton
                        p.c-o-light Bottom fabric: pure cotton
                    .tab-pan.fade(data-tabcontent="2")
                      .info-part
                        p.c-o-light The model is wearing a white blouse from our stylist's collection, see the image for a mock-up of what the actual blouse would look like.it has text written on it in a black cursive language which looks great on a white color.
                      .product-info-table.overflow-x-auto.custom-scrollbar
                        table.table.table-striped
                          thead
                            tr
                              th(scope='col') Material
                              th(scope='col') Colors
                              th(scope='col') Size Range
                              th(scope='col') Fit
                              th(scope='col') NeckLine
                              th(scope='col') Seam
                          tbody
                            tr
                              th(scope='row') Polyester
                              td Yellow
                              td XS
                              td Slim fit
                              td V-neck
                              td French
                            tr
                              th(scope='row') Blend
                              td Black
                              td XL
                              td Regular fit
                              td Scoop neck
                              td Flat
                            tr
                              th(scope='row') Cotton
                              td Blue
                              td S 
                              td Relaxed
                              td Mandarin collar
                              td Exposed
                            tr
                              th(scope='row') Polyester
                              td White
                              td M
                              td Slim Fit
                              td Spread collar
                              td Topstitching
                    .tab-pan.fade(data-tabcontent="3")
                      .review-box
                        .grid.grid-cols-12.card-gap
                          div(class="col-span-6 xl:col-span-12")
                            .product-rating-box
                              .grid.grid-cols-12
                                div(class="col-span-12") 
                                  .common-f-start.mb-3
                                    h5.main-product-rating 4.5
                                      i.fa-solid.fa-star
                                    h6.ms-3.c-o-light 5 Overall Rating
                                div(class="col-span-12")
                                  .rating-box
                                    ul
                                      li
                                        .rating-list
                                          h6 5
                                            i.fa-solid.fa-star
                                          .progress
                                            .progress-bar(role='progressbar' style='width: 85%')
                                      li
                                        .rating-list
                                          h6 4
                                            i.fa-solid.fa-star
                                          .progress
                                            .progress-bar(role='progressbar' style='width: 50%')
                                      li
                                        .rating-list
                                          h6 3
                                            i.fa-solid.fa-star
                                          .progress
                                            .progress-bar(role='progressbar' style='width: 43%')
                                      li
                                        .rating-list
                                          h6 2
                                            i.fa-solid.fa-star
                                          .progress
                                            .progress-bar(role='progressbar' style='width: 32%')
                                      li
                                        .rating-list
                                          h6 1 
                                            i.fa-solid.fa-star
                                          .progress
                                            .progress-bar(role='progressbar' style='width: 18%')
                                div(class="col-span-12")  
                                  .review-title-2
                                    h5 Review this product
                                    p Let other customers know what you think
                                    button.btn.btn-primary.text-white(data-bs-toggle='modal' data-bs-target='#write-review-modal')
                                      | Write a Review
                                    #write-review-modal.modal.fade(tabindex='-1' aria-hidden='true')
                                      .modal-dialog.modal-dialog-centered.modal-lg
                                        .modal-content.category-popup.custom-input
                                          .modal-header
                                            h5.modal-title Write a Review
                                            button.btn-close(type='button', data-bs-dismiss='modal', aria-label='Close')
                                          .modal-body
                                            .product-review-rating
                                              span Rating
                                              .product-rating.main-star-rating
                                                .common-flex.star-box
                                                  i.fa-solid.fa-star.active
                                                  i.fa-solid.fa-star.active
                                                  i.fa-solid.fa-star.active
                                                  i.fa-solid.fa-star.active
                                                  i.fa-solid.fa-star
                                            form.grid.grid-cols-12.gap-3.needs-validation(novalidate='')
                                              div(class="col-span-12")
                                                label.form-label(for='validationCustom01') Name
                                                input#validationCustom01.form-control(type='text' placeholder="Enter your name" required='')
                                                .invalid-feedback
                                                  | Please enter a name.
                                                .valid-feedback
                                                  | Looks good!
                                              div(class="col-span-12") 
                                                label.form-label(for='validationTextarea') Your Review
                                                textarea#validationTextarea.form-control(placeholder='Enter your review' required='')
                                                .invalid-feedback
                                                  | Please enter a review in the textarea.
                                              div(class="col-span-12")
                                                button.btn.btn-primary.text-white(type='submit') Submit Review
                          div(class="col-span-6 xl:col-span-12")
                            .review-people
                              ul.review-list.custom-scrollbar
                                li
                                  .people-box
                                    img.max-w-full(src='../assets/images/dashboard-11/user/1.jpg' alt='')
                                    .people-comment
                                      .people-name
                                        div
                                          a.name(href='#!') Scarlet
                                          span.c-o-light (Smart Watch)
                                        .product-rating
                                          .common-flex
                                            i.fa-solid.fa-star.fill
                                            i.fa-solid.fa-star.fill
                                            i.fa-solid.fa-star.fill
                                            i.fa-solid.fa-star.fill
                                            i.fa-solid.fa-star.fill
                                        h6.text-content
                                          | 03 Feb, 2025
                                      .reply
                                        p
                                          | I adore this outfit! The print is stunning, and the fabric is incredibly smooth and flowing. It's ideal for a night out or summer weddings. Just be mindful that the straps are little adjustable, so you may need fashion tape for piece of mind if you're busty.
                                li
                                  .people-box
                                    img.max-w-full(src='../assets/images/dashboard-11/user/2.jpg' alt='')
                                    .people-comment
                                      .people-name
                                        div
                                          a.name(href='#!') Arya
                                          span.c-o-light (Arm Chair)
                                        .product-rating
                                          .common-flex
                                            i.fa-solid.fa-star.fill
                                            i.fa-solid.fa-star.fill
                                            i.fa-solid.fa-star.fill
                                            i.fa-solid.fa-star.fill
                                            i.fa-solid.fa-star
                                        h6.text-content
                                          | 24 May, 2025
                                      .reply
                                        p
                                          | This tee is a fantastic basic. For warmer days, the lightweight, breathable linen is ideal. You might want to go down if you like a more tailored look because the fit is a little boxy. All in all, this is a versatile shirt that I will wear often.
                                li
                                  .people-box
                                    img.max-w-full(src='../assets/images/dashboard-11/user/3.jpg' alt='')
                                    .people-comment
                                      .people-name
                                        div
                                          a.name(href='#!') Kyro
                                          span.c-o-light (Study lamp)
                                        .product-rating
                                          .common-flex
                                            i.fa-solid.fa-star.fill
                                            i.fa-solid.fa-star.fill
                                            i.fa-solid.fa-star.fill
                                            i.fa-solid.fa-star
                                            i.fa-solid.fa-star
                                        h6.text-content
                                          | 30 Jun, 2025
                                      .reply
                                        p
                                          | What a letdown this jacket is. In person, the wash is more rigid and dark than it appears in the photo, which is retro and stylish. I got a medium, but it seems more like a small. The size is also incorrect. Returning it in disappointment.
                                li
                                  .people-box
                                    img.max-w-full(src='../assets/images/dashboard-11/user/8.jpg' alt='')
                                    .people-comment
                                      .people-name
                                        div
                                          a.name(href='#!') Izabella
                                          span.c-o-light (Beauty Blender)
                                        .product-rating
                                          .common-flex
                                            i.fa-solid.fa-star.fill
                                            i.fa-solid.fa-star.fill
                                            i.fa-solid.fa-star.fill
                                            i.fa-solid.fa-star.fill
                                            i.fa-solid.fa-star
                                        h6.text-content
                                          | 18 Dec, 2025
                                        
                                      .reply
                                        p
                                          | There is nothing but luxury about this jumper. It feels of excellent quality, and the cashmere is wonderfully warm and cuddly. It's a classic piece with a long lifespan. incredibly elegant and comfy, ideal for chilly days.
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files
