
<?php include 'header.php'; ?>
    

    <!-- Product Details Area Start -->
    <div class="product-details-area pt-100px pb-100px">
        <div class="container">
            <div class="row">
             <div class="col-lg-5 col-sm-12 col-xs-12 mb-lm-30px mb-md-30px mb-sm-30px"> 
                   
    <div class="product-details-img product-details-tab product-details-tab-2 d-flex ">

        <!-- LEFT THUMB SLIDER -->
        <div class="swiper-container zoom-thumbs-2 align-self-start mr-15px swiper-container-initialized swiper-container-vertical swiper-container-pointer-events swiper-container-free-mode swiper-container-thumbs">
            <div class="swiper-wrapper">

                <div class="swiper-slide swiper-slide-visible swiper-slide-active swiper-slide-thumb-active">
                    <img class="img-responsive m-auto" src="assets/furniture/products/STC3011.webp" alt="">
                </div>
                                
                <div class="swiper-slide swiper-slide-visible swiper-slide-next">
                    <img class="img-responsive m-auto" src="assets/furniture/products/STC3012.webp" alt="">
                </div>

                <div class="swiper-slide swiper-slide-visible">
                    <img class="img-responsive m-auto" src="assets/furniture/products/STC3013.webp" alt="">
                </div>

                <div class="swiper-slide swiper-slide-visible">
                    <img class="img-responsive m-auto" src="assets/furniture/products/STC3014.webp" alt="">
                </div>

            </div>
        </div>

        <!-- MAIN SLIDER -->
        <div class="swiper-container zoom-top-2 align-self-start swiper-container-initialized swiper-container-horizontal swiper-container-pointer-events">
            <div class="swiper-wrapper">

                <div class="swiper-slide zoom-image-hover" style="width: 421px; position: relative; overflow: hidden;">
                    <img class="img-responsive m-auto main-image" src="assets/furniture/products/STC3011.webp" alt="">


                </div>

                <div class="swiper-slide zoom-image-hover" style="width: 421px; position: relative; overflow: hidden;">
                    <img class="img-responsive m-auto main-image" src="assets/furniture/products/STC3012.webp" alt="">
            
                </div>

                <div class="swiper-slide zoom-image-hover" style="width: 421px; position: relative; overflow: hidden;">
                    <img class="img-responsive m-auto main-image" src="assets/furniture/products/STC3013.webp" alt="">
              </div>

                <div class="swiper-slide zoom-image-hover" style="width: 421px; position: relative; overflow: hidden;">
                    <img class="img-responsive m-auto main-image" src="assets/furniture/products/STC3014.webp" alt="">
              
                </div>



            </div>
                    <div class="image-actions">
        <button class="btn-zoom"><i class="icon-magnifier"></i> Zoom</button>
        <button class="btn-wishlist"><i class="icon-heart"></i></button>
        <button class="btn-share"><i class="icon-share"></i> </button>
    </div>
        </div>


    </div>

    <!-- ACTION BUTTONS -->
   

</div>

<!-- FULLSCREEN POPUP -->
<div id="fullscreenView" class="fullscreen-box">
    <span class="fs-close">&times;</span>

    <img id="fsImg" src="" alt="Fullscreen Image">

    <button class="fs-prev">&#10094;</button>
    <button class="fs-next">&#10095;</button>
</div>



                <div class="col-lg-7 col-sm-12 col-xs-12" data-aos="fade-up" data-aos-delay="200">
                    <div class="product-details-content quickview-content">
                        <h2>STC301</h2>
                        <!-- <p class="reference">Reference:<span> demo_17</span></p> -->
                        
                        <p class="quickview-para">Lorem ipsum dolor sit amet, consectetur adipisic elit eiusm tempor incidid ut labore et dolore magna aliqua. Ut enim ad minim venialo quis nostrud exercitation ullamco</p>
                      
                        <div class="pro-details-quality">
                         
                            <div class="pro-details-cart">
                                 <button class="add-cart btn btn-primary btn-hover-primary ml-4" data-bs-toggle="modal" data-bs-target="#quoteModal">Get Quote</button>&nbsp;&nbsp;&nbsp;&nbsp;
                                 <div class="modal fade" id="quoteModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" style="text-align:center;color:#c67a51;">Get a Quote</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">
        <form id="quoteForm">
            <div class="row">
             <div class="col-lg-6"> 
          <div class="mb-3">
            <label>Name</label>
            <input type="text" class="form-control" required>
          </div>
      </div>


          <div class="col-lg-6"> 
          <div class="mb-3">
            <label>Phone Number</label>
            <input type="email" class="form-control" required>
          </div>
      </div></div>
       <div class="row">
       <div class="col-lg-12"> 
          <div class="mb-3">
            <label>Email</label>
            <input type="email" class="form-control" required>
          </div>
      </div></div>

        <div class="row">
         <div class="col-lg-12"> 
          <div class="mb-3">
            <label>Message</label>
            <textarea class="form-control" rows="3" required></textarea>
          </div>
      </div></div>

       <div class="row">
             <div class="col-lg-12"> 

          <button type="submit" class="btn btn-primary w-100">Submit</button>
      </div>
  </div>
        </form>
      </div>
    </div>
  </div>
</div>


                                  <!-- Button to Open Modal -->

                            <button id="openModalBtn" class="add-cart btn btn-primary btn-hover-primary  ml-4" href="#">  Choose Variant</button>


                               

<!-- Overlay -->
<div id="variantModal" class="modal-overlay">
    <div class="modal-box">

        <!-- Header -->
        <div class="modal-header">
            <h2>Choose a Variant</h2>
            <button id="closeModalBtn" class="close-btn">✕</button>
        </div>

        <!-- Scroll Container -->
        <div class="modal-body">

            <!-- Thumbnail & Title -->
            <div class="thumb-title mt-2">
                <img src="assets/furniture/products/STC301_Lifestyle.png?tr=w-128">
                <span>STC301</span>
            </div>


        <div class="color-grid">

    <button class="color-item" style="background: #ffede3;">
         <span>Chairs </span>
        <img src="assets\furniture\products/chairicon.png">
       
    </button>
</div>

            <!-- Set Type -->
            <div class="section">
                <p class="section-label">Motion</p>
                <div class="grid-items">
                    <button class="item">Without Motion</button>
                      <button class="item active">With Motion</button>
                </div>

            </div>

            <!-- Set Options -->
            <p class="section-label">Set Options</p>
             <div class="color-grid">


                    <button class="item">
                    <h6>1 Seater</h6>
                     <img src="assets\furniture\products/1set.png"></button>
                      <button class="item">
                     <h6>2 Seater</h6>
                    <img src="assets\furniture\products/2set.png"></button>
                  <button class="item active">
                  <h6>3 Seater</h6>
                   <img src="assets\furniture\products/3set.png"></button>
                </div>
            

            <!-- Color Groups -->
            <div class="section">
                <p class="section-label">Color</p>

                 <p class="section-label">ONYX SERIES</p>



               <div class="color-grid">

    <button class="color-item">
        <img src="assets/furniture/products/color1.avif?tr=w-256">
        <span>Amphora Brown</span>
    </button>

    <button class="color-item">
        <img src="assets/furniture/products/color2.jpg?tr=w-256">
        <span>Purple Grey</span>
    </button>

    <button class="color-item">
        <img src="assets/furniture/products/color3.jpg?tr=w-256">
        <span>Dark Blue</span>
    </button>

    <button class="color-item">
        <img src="assets/furniture/products/color4.jpg?tr=w-256">
        <span>Purple Grey</span>
    </button>

    <button class="color-item">
        <img src="assets/furniture/products/color5.jpg?tr=w-256">
        <span>Dark Blue</span>
    </button>

    <button class="color-item">
        <img src="assets/furniture/products/color6.avif?tr=w-256">
        <span>Amphora Brown</span>
    </button>

    <button class="color-item">
        <img src="assets/furniture/products/color7.avif?tr=w-256">
        <span>Purple Grey</span>
    </button>

    <button class="color-item">
        <img src="assets/furniture/products/color8.avif?tr=w-256">
        <span>Dark Blue</span>
    </button>

    <button class="color-item">
        <img src="assets/furniture/products/color9.avif?tr=w-256">
        <span>Purple Grey</span>
    </button>

    <button class="color-item">
        <img src="assets/furniture/products/color10.avif?tr=w-256">
        <span>Dark Blue</span>
    </button>

</div>

            </div>

            <!-- Another group -->
            <div class="section">
                <p class="section-label">WARPKNIT SERIES</p>
                <div class="color-grid">

                    <button class="color-item">
                        <img src="assets/furniture/products/color11.avif?tr=w-256">
                        <span>Blue</span>
                    </button>

                    <button class="color-item">
                        <img src="assets/furniture/products/color12.avif?tr=w-256">
                        <span>Beige</span>
                    </button>
                    <button class="color-item">
                        <img src="assets/furniture/products/color13.avif?tr=w-256">
                        <span>Blue</span>
                    </button>

                    <button class="color-item">
                        <img src="assets/furniture/products/color14.avif?tr=w-256">
                        <span>Beige</span>
                    </button>
                    <button class="color-item">
                        <img src="assets/furniture/products/color15.avif?tr=w-256">
                        <span>Blue</span>
                    </button>

                  

                    <!-- Add more -->
                </div>
            </div>

        </div>

        <!-- Footer -->
        <div class="modal-footer">
            <button class="confirm-btn">Confirm Variant</button>
        </div>

    </div>
</div>



                            </div>

                        </div>




 <div class="pro-details-social-info">
                            <span>Share</span>
                            <div class="social-info">
                                <ul class="d-flex">
                                    <li>
                                        <a href="#"><i class="ion-social-facebook"></i></a>
                                    </li>
                                    <li>
                                        <a href="#"><i class="ion-social-twitter"></i></a>
                                    </li>
                                    <li>
                                        <a href="#"><i class="ion-social-google"></i></a>
                                    </li>
                                    <li>
                                        <a href="#"><i class="ion-social-instagram"></i></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="pro-details-policy">
                            <ul>
                                <li><img src="assets/images/icons/policy.png" alt="" /><span>Security Policy (Edit With
                                        Customer Reassurance Module)</span></li>
                                <li><img src="assets/images/icons/policy-2.png" alt="" /><span>Delivery Policy (Edit
                                        With Customer Reassurance Module)</span></li>
                                <li><img src="assets/images/icons/policy-3.png" alt="" /><span>Return Policy (Edit With
                                        Customer Reassurance Module)</span></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<!-- --------------- -->


</section>
    <!-- product details description area start -->
    <div class="description-review-area pb-100px" data-aos="fade-up" data-aos-delay="200">
        <div class="container">
            <div class="description-review-wrapper">
                <div class="description-review-topbar nav">
                    <a data-bs-toggle="tab" href="#des-details1">Description</a>
                    <a class="active" data-bs-toggle="tab" href="#des-details2">Product Details</a>
                   
                </div>
                <div class="tab-content description-review-bottom">
                    <div id="des-details2" class="tab-pane active">
                        <div class="product-anotherinfo-wrapper">
                            <ul>
                                <li><span>Weight</span> 400 g</li>
                                <li><span>Dimensions</span>10 x 10 x 15 cm</li>
                                <li><span>Materials</span> 60% cotton, 40% polyester</li>
                                <li><span>Other Info</span> American heirloom jean shorts pug seitan letterpress</li>
                            </ul>
                        </div>
                    </div>
                    <div id="des-details1" class="tab-pane">
                        <div class="product-description-wrapper">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor incididunt
                            </p>
                            <p>
                                ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commo consequat. Duis aute irure dolor in reprehend in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
                                occaecat cupidatat non proident, sunt in culpa qui officia deserunt
                            </p>
                        </div>
                    </div>
                   
                </div>
            </div>
        </div>
    </div>
    <!-- product details description area end -->

    <!-- New Product Start -->
    <div class="section pb-100px" data-aos="fade-up" data-aos-delay="200">
        <div class="container">
            <!-- section title start -->
            <div class="row">
                <div class="col-md-12">
                    <div class="section-title text-start mb-11">
                        <h2 class="title">You Might Also Like</h2>
                    </div>
                </div>
            </div>
            <!-- section title start -->
            <div class="new-product-slider swiper-container slider-nav-style-1" data-aos="fade-up" data-aos-delay="200">
                <div class="new-product-wrapper swiper-wrapper">
                    <!-- Single Prodect -->
                    <div class="new-product-item swiper-slide">
                        <div class="product">
                            <div class="thumb">
                                <a href="shop-left-sidebar.html" class="image">
                                    <img src="assets/images/product-image/1.jpg" alt="Product" />
                                    <img class="hover-image" src="assets/images/product-image/2.jpg" alt="Product" />
                                </a>
                                <span class="badges">
                                    <!-- <span class="sale">-10%</span> -->
                                <span class="new">New</span>
                                </span>
                                <div class="actions">
                                    <a href="wishlist.html" class="action wishlist" title="Wishlist"><i
                                            class="icon-heart"></i></a>
                                    <a href="#" class="action quickview" data-link-action="quickview" title="Quick view" data-bs-toggle="modal" data-bs-target="#exampleModal"><i
                                            class="icon-size-fullscreen"></i></a>
                                    <a href="compare.html" class="action compare" title="Compare"><i
                                            class="icon-refresh"></i></a>
                                </div>
                                <button title="Add To Cart" class=" add-to-cart">Add
                                    To Cart</button>
                            </div>
                            <div class="content">
                                <h5 class="title"><a href="shop-left-sidebar.html">Simple minimal Chair </a></h5>
                               <!--  <span class="price">
                                    <span class="new">$18.50</span>
                                <span class="old">$28.50</span>
                                </span> -->
                            </div>
                        </div>
                    </div>
                    <!-- Single Prodect -->
                    <div class="new-product-item swiper-slide">
                        <div class="product">
                            <div class="thumb">
                                <a href="shop-left-sidebar.html" class="image">
                                    <img src="assets/images/product-image/3.jpg" alt="Product" />
                                    <img class="hover-image" src="assets/images/product-image/4.jpg" alt="Product" />
                                </a>
                               <!--  <span class="badges">
                                    <span class="sale">-7%</span>
                                </span> -->
                                <div class="actions">
                                    <a href="wishlist.html" class="action wishlist" title="Wishlist"><i
                                            class="icon-heart"></i></a>
                                    <a href="#" class="action quickview" data-link-action="quickview" title="Quick view" data-bs-toggle="modal" data-bs-target="#exampleModal"><i
                                            class="icon-size-fullscreen"></i></a>
                                    <a href="compare.html" class="action compare" title="Compare"><i
                                            class="icon-refresh"></i></a>
                                </div>
                                <button title="Add To Cart" class=" add-to-cart">Add
                                    To Cart</button>
                            </div>
                            <div class="content">
                                <h5 class="title"><a href="shop-left-sidebar.html">Wooden decorations</a></h5>
                               <!--  <span class="price">
                                    <span class="new">$38.50</span>
                                <span class="old">$43.50</span>
                                </span> -->
                            </div>
                        </div>
                    </div>
                    <!-- Single Prodect -->
                    <div class="new-product-item swiper-slide">
                        <div class="product">
                            <div class="thumb">
                                <a href="shop-left-sidebar.html" class="image">
                                    <img src="assets/images/product-image/5.jpg" alt="Product" />
                                    <img class="hover-image" src="assets/images/product-image/6.jpg" alt="Product" />
                                </a>
                                <span class="badges d-none">
                                    <span class="new">New</span>
                                </span>
                                <div class="actions">
                                    <a href="wishlist.html" class="action wishlist" title="Wishlist"><i
                                            class="icon-heart"></i></a>
                                    <a href="#" class="action quickview" data-link-action="quickview" title="Quick view" data-bs-toggle="modal" data-bs-target="#exampleModal"><i
                                            class="icon-size-fullscreen"></i></a>
                                    <a href="compare.html" class="action compare" title="Compare"><i
                                            class="icon-refresh"></i></a>
                                </div>
                                <button title="Add To Cart" class=" add-to-cart">Add
                                    To Cart</button>
                            </div>
                            <div class="content">
                                <h5 class="title"><a href="shop-left-sidebar.html">High quality vase bottle</a></h5>
                                <!-- <span class="price">
                                    <span class="new">$38.50</span>
                                </span> -->
                            </div>
                        </div>
                    </div>
                    <!-- Single Prodect -->
                    <div class="new-product-item swiper-slide">
                        <div class="product">
                            <div class="thumb">
                                <a href="shop-left-sidebar.html" class="image">
                                    <img src="assets/images/product-image/7.jpg" alt="Product" />
                                    <img class="hover-image" src="assets/images/product-image/8.jpg" alt="Product" />
                                </a>
                                <span class="badges">
                                    <span class="new">New</span>
                                </span>
                                <div class="actions">
                                    <a href="wishlist.html" class="action wishlist" title="Wishlist"><i
                                            class="icon-heart"></i></a>
                                    <a href="#" class="action quickview" data-link-action="quickview" title="Quick view" data-bs-toggle="modal" data-bs-target="#exampleModal"><i
                                            class="icon-size-fullscreen"></i></a>
                                    <a href="compare.html" class="action compare" title="Compare"><i
                                            class="icon-refresh"></i></a>
                                </div>
                                <button title="Add To Cart" class=" add-to-cart">Add
                                    To Cart</button>
                            </div>
                            <div class="content">
                                <h5 class="title"><a href="shop-left-sidebar.html">Living & Bedroom Chair</a></h5>
                                <!-- <span class="price">
                                    <span class="new">$38.50</span>
                                </span> -->
                            </div>
                        </div>
                    </div>
                    <!-- Single Prodect -->
                    <div class="new-product-item swiper-slide">
                        <div class="product">
                            <div class="thumb">
                                <a href="shop-left-sidebar.html" class="image">
                                    <img src="assets/images/product-image/9.jpg" alt="Product" />
                                    <img class="hover-image" src="assets/images/product-image/10.jpg" alt="Product" />
                                </a>
                               <!--  <span class="badges">
                                    <span class="sale">-5%</span>
                                </span> -->
                                <div class="actions">
                                    <a href="wishlist.html" class="action wishlist" title="Wishlist"><i
                                            class="icon-heart"></i></a>
                                    <a href="#" class="action quickview" data-link-action="quickview" title="Quick view" data-bs-toggle="modal" data-bs-target="#exampleModal"><i
                                            class="icon-size-fullscreen"></i></a>
                                    <a href="compare.html" class="action compare" title="Compare"><i
                                            class="icon-refresh"></i></a>
                                </div>
                                <button title="Add To Cart" class=" add-to-cart">Add
                                    To Cart</button>
                            </div>
                            <div class="content">
                                <h5 class="title"><a href="shop-left-sidebar.html">Living & Bedroom Table</a></h5>
                               <!--  <span class="price">
                                    <span class="new">$38.50</span>
                                <span class="old">$40.50</span>
                                </span> -->
                            </div>
                        </div>
                    </div>
                    <!-- Single Prodect -->
                </div>
                <!-- Add Arrows -->
                <div class="swiper-buttons">
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- New Product End -->

    <!-- New Product Start -->
    <div class="section pb-100px" data-aos="fade-up" data-aos-delay="200">
        <div class="container">
            <!-- section title start -->
            <div class="row">
                <div class="col-md-12">
                    <div class="section-title text-start mb-11">
                        <h2 class="title">12 Other Products In The Same Category:</h2>
                    </div>
                </div>
            </div>
            <!-- section title start -->
            <div class="new-product-slider swiper-container slider-nav-style-1" data-aos="fade-up" data-aos-delay="200">
                <div class="new-product-wrapper swiper-wrapper">
                    <!-- Single Prodect -->
                    <div class="new-product-item swiper-slide">
                        <div class="product">
                            <div class="thumb">
                                <a href="shop-left-sidebar.html" class="image">
                                    <img src="assets/images/product-image/1.jpg" alt="Product" />
                                    <img class="hover-image" src="assets/images/product-image/2.jpg" alt="Product" />
                                </a>
                                <span class="badges">
                                    <!-- <span class="sale">-10%</span> -->
                                <span class="new">New</span>
                                </span>
                                <div class="actions">
                                    <a href="wishlist.html" class="action wishlist" title="Wishlist"><i
                                            class="icon-heart"></i></a>
                                    <a href="#" class="action quickview" data-link-action="quickview" title="Quick view" data-bs-toggle="modal" data-bs-target="#exampleModal"><i
                                            class="icon-size-fullscreen"></i></a>
                                    <a href="compare.html" class="action compare" title="Compare"><i
                                            class="icon-refresh"></i></a>
                                </div>
                                <button title="Add To Cart" class=" add-to-cart">Add
                                    To Cart</button>
                            </div>
                            <div class="content">
                                <h5 class="title"><a href="shop-left-sidebar.html">Simple minimal Chair </a></h5>
                               <!--  <span class="price">
                                    <span class="new">$18.50</span>
                                <span class="old">$28.50</span>
                                </span> -->
                            </div>
                        </div>
                    </div>
                    <!-- Single Prodect -->
                    <div class="new-product-item swiper-slide">
                        <div class="product">
                            <div class="thumb">
                                <a href="shop-left-sidebar.html" class="image">
                                    <img src="assets/images/product-image/3.jpg" alt="Product" />
                                    <img class="hover-image" src="assets/images/product-image/4.jpg" alt="Product" />
                                </a>
                                <!-- <span class="badges">
                                    <span class="sale">-7%</span>
                                </span> -->
                                <div class="actions">
                                    <a href="wishlist.html" class="action wishlist" title="Wishlist"><i
                                            class="icon-heart"></i></a>
                                    <a href="#" class="action quickview" data-link-action="quickview" title="Quick view" data-bs-toggle="modal" data-bs-target="#exampleModal"><i
                                            class="icon-size-fullscreen"></i></a>
                                    <a href="compare.html" class="action compare" title="Compare"><i
                                            class="icon-refresh"></i></a>
                                </div>
                                <button title="Add To Cart" class=" add-to-cart">Add
                                    To Cart</button>
                            </div>
                            <div class="content">
                                <h5 class="title"><a href="shop-left-sidebar.html">Wooden decorations</a></h5>
                                <!-- <span class="price">
                                    <span class="new">$38.50</span>
                                <span class="old">$43.50</span>
                                </span> -->
                            </div>
                        </div>
                    </div>
                    <!-- Single Prodect -->
                    <div class="new-product-item swiper-slide">
                        <div class="product">
                            <div class="thumb">
                                <a href="shop-left-sidebar.html" class="image">
                                    <img src="assets/images/product-image/5.jpg" alt="Product" />
                                    <img class="hover-image" src="assets/images/product-image/6.jpg" alt="Product" />
                                </a>
                                <span class="badges d-none">
                                    <span class="new">New</span>
                                </span>
                                <div class="actions">
                                    <a href="wishlist.html" class="action wishlist" title="Wishlist"><i
                                            class="icon-heart"></i></a>
                                    <a href="#" class="action quickview" data-link-action="quickview" title="Quick view" data-bs-toggle="modal" data-bs-target="#exampleModal"><i
                                            class="icon-size-fullscreen"></i></a>
                                    <a href="compare.html" class="action compare" title="Compare"><i
                                            class="icon-refresh"></i></a>
                                </div>
                                <button title="Add To Cart" class=" add-to-cart">Add
                                    To Cart</button>
                            </div>
                            <div class="content">
                                <h5 class="title"><a href="shop-left-sidebar.html">High quality vase bottle</a></h5>
                                <!-- <span class="price">
                                    <span class="new">$38.50</span>
                                </span> -->
                            </div>
                        </div>
                    </div>
                    <!-- Single Prodect -->
                    <div class="new-product-item swiper-slide">
                        <div class="product">
                            <div class="thumb">
                                <a href="shop-left-sidebar.html" class="image">
                                    <img src="assets/images/product-image/7.jpg" alt="Product" />
                                    <img class="hover-image" src="assets/images/product-image/8.jpg" alt="Product" />
                                </a>
                                <span class="badges">
                                    <span class="new">New</span>
                                </span>
                                <div class="actions">
                                    <a href="wishlist.html" class="action wishlist" title="Wishlist"><i
                                            class="icon-heart"></i></a>
                                    <a href="#" class="action quickview" data-link-action="quickview" title="Quick view" data-bs-toggle="modal" data-bs-target="#exampleModal"><i
                                            class="icon-size-fullscreen"></i></a>
                                    <a href="compare.html" class="action compare" title="Compare"><i
                                            class="icon-refresh"></i></a>
                                </div>
                                <button title="Add To Cart" class=" add-to-cart">Add
                                    To Cart</button>
                            </div>
                            <div class="content">
                                <h5 class="title"><a href="shop-left-sidebar.html">Living & Bedroom Chair</a></h5>
                                <!-- <span class="price">
                                    <span class="new">$38.50</span>
                                </span> -->
                            </div>
                        </div>
                    </div>
                    <!-- Single Prodect -->
                    <div class="new-product-item swiper-slide">
                        <div class="product">
                            <div class="thumb">
                                <a href="shop-left-sidebar.html" class="image">
                                    <img src="assets/images/product-image/9.jpg" alt="Product" />
                                    <img class="hover-image" src="assets/images/product-image/10.jpg" alt="Product" />
                                </a>
                                <!-- <span class="badges">
                                    <span class="sale">-5%</span>
                                </span> -->
                                <div class="actions">
                                    <a href="wishlist.html" class="action wishlist" title="Wishlist"><i
                                            class="icon-heart"></i></a>
                                    <a href="#" class="action quickview" data-link-action="quickview" title="Quick view" data-bs-toggle="modal" data-bs-target="#exampleModal"><i
                                            class="icon-size-fullscreen"></i></a>
                                    <a href="compare.html" class="action compare" title="Compare"><i
                                            class="icon-refresh"></i></a>
                                </div>
                                <button title="Add To Cart" class=" add-to-cart">Add
                                    To Cart</button>
                            </div>
                            <div class="content">
                                <h5 class="title"><a href="shop-left-sidebar.html">Living & Bedroom Table</a></h5>
                              <!--   <span class="price">
                                    <span class="new">$38.50</span>
                                <span class="old">$40.50</span>
                                </span> -->
                            </div>
                        </div>
                    </div>
                    <!-- Single Prodect -->
                </div>
                <!-- Add Arrows -->
                <div class="swiper-buttons">
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- New Product End -->

    <style>
         .item {
    background-color: #fff;
    color: #333;
    border: 1px solid #ccc;
    padding: 10px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Hover effect */


/* Active button styling */
.item.active {
    background-color: #ffede3; /* active color */
    color: #c67a51;
    border-color: #c67a51;
}

        .zoom-thumbs-2{
    margin: 0px;}
    /* Buttons */
.open-btn {
    padding: 10px 20px;
    background: #5f3ef8;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

/* Overlay */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: none;
    justify-content: center;
    align-items: center;
    padding: 15px;
    z-index: 9999;
}

/* Modal Box */
.modal-box {
    width: 100%;
    max-width: 960px;
    background: white;
    border-radius: 12px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    max-height: 90vh;
    overflow: hidden;
}

/* Header */
.modal-header {
    display: flex;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #ddd;
}

.close-btn {
    background: #555;
    color: white;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 14px;
}

/* Body */
.modal-body {
    padding: 20px;
    overflow-y: auto;
}

.thumb-title {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.thumb-title img {
    width: 55px;
    height: 55px;
    border-radius: 8px;
}

/* Section */
.section {
    margin-top: 25px;
}

.section-label {
    color: #555;
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 14px;
}

/* Grid Items */
.grid-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
        padding: 20px 10px;
}

.item {
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    background: white;
}
/*
.item.active {
   background: #ffede3;
    border-color: #c67a51;
    color: #000;
}
*/
/* Color Grid */
.color-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .5rem;
    padding-top: 20px;
}

.color-item {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: 0.3s ease;
}

.color-item img {
    width: 100%;
    border-radius: 6px;
    margin-bottom: 6px;
}

.color-item span {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    display: block;
    margin-top: 4px;
    line-height: 1.2;
}

/* Footer */
.modal-footer {
    padding: 16px;
    border-top: 1px solid #ddd;
}

.confirm-btn {
    width: 100%;
    padding: 14px;
    background: #c67a51;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
}

/* Responsive */
@media (max-width: 600px) {
    .color-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
    /* Responsive: Mobile Screens (≤768px) */
@media screen and (max-width: 768px) {
    .swiper-slide {
        height: auto !important; /* Adjust height automatically */
        padding: 10px 0; /* Optional spacing */
    }

    .swiper-slide img {
        max-height: 200px; /* Optional: limit image height */
        width: 90%; /* Image width fits nicely on mobile */
        margin: 0 auto;
    }

    /* Optional: buttons on mobile */
    .image-actions {
        bottom: 10px;
        gap: 5px;
    }
.image-actions {
        flex-direction: row;
        justify-content: space-around;
        padding: 8px 5px 8px 5px;
        gap: 8px;
    }

   
}

.image-actions button {
        border-radius: 20px;
    padding: 6px 12px;
    margin-right: 10px;
    border: 0;
    background: #333;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}

.fullscreen-box {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.85);
    z-index: 99999;
    text-align: center;
    padding-top: 40px;
}

.fullscreen-box img {
    max-height: 80%;
    max-width: 90%;
}

.fs-close {
    position: absolute;
    top: 15px;
    right: 30px;
    font-size: 35px;
    color: #fff;
    cursor: pointer;
}

.fs-prev, .fs-next {
    position: absolute;
    top: 50%;
    font-size: 40px;
    background: none;
    border: 0;
    color: white;
    cursor: pointer;
}

.fs-prev { left: 25px; }
.fs-next { right: 25px; }
.image-actions {
/*   margin-top: -18%;*/
    padding: 10px 20px 20px 20px;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.image-actions button {
    background: #000;
   
    
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    transition: 0.3s;
}

.image-actions button:hover {
    background: #333;
    color: #fff;
}

/* Mobile view: padding adjustment */
@media screen and (max-width: 768px) {
    .image-actions {
        padding: 10px 15px 15px 15px; /* Adjust padding for mobile */
        gap: 10px;
    }

    .image-actions button {
        width: auto;
        height: auto;
        font-size: 14px;
    }
}

/* Small mobile: further adjustment */
@media screen and (max-width: 480px) {
    .image-actions {
        padding: 8px 10px 10px 10px; /* Smaller screens */
        gap: 8px;
                margin-top: -20px;
        margin-left: 12px;
    }

    .image-actions button {
       width: auto;
        height: auto;
        font-size: 12px;

    }
}
.zoom-thumbs-2 .swiper-slide img{border: 1px solid #000!important;}
</style>

<script>
    const images = [
        "assets/furniture/products/STC3011.webp",
        "assets/furniture/products/STC3012.webp",
        "assets/furniture/products/STC3013.webp",
        "assets/furniture/products/STC3014.webp"
    ];

    let index = 0;

    const fsBox = document.getElementById("fullscreenView");
    const fsImg = document.getElementById("fsImg");

    // ZOOM BTN
    document.querySelector(".btn-zoom").addEventListener("click", function () {
        fsImg.src = images[index];
        fsBox.style.display = "block";
    });

    // SHARE BTN
    document.querySelector(".btn-share").addEventListener("click", function () {
        navigator.share({
            title: "Product",
            text: "Check out this product",
            url: window.location.href
        });
    });

    // WISHLIST BTN
    document.querySelector(".btn-wishlist").addEventListener("click", function () {
        alert("Product added to wishlist!");
    });

    // CLOSE FULLSCREEN
    document.querySelector(".fs-close").onclick = function () {
        fsBox.style.display = "none";
    };

    // PREV IMG
    document.querySelector(".fs-prev").onclick = function () {
        index = (index === 0) ? images.length - 1 : index - 1;
        fsImg.src = images[index];
    };

    // NEXT IMG
    document.querySelector(".fs-next").onclick = function () {
        index = (index + 1) % images.length;
        fsImg.src = images[index];
    };
</script>
    <script>
    // Open modal
document.getElementById("openModalBtn").addEventListener("click", () => {
    document.getElementById("variantModal").style.display = "flex";
});

// Close modal
document.getElementById("closeModalBtn").addEventListener("click", () => {
    document.getElementById("variantModal").style.display = "none";
});

// Clicking outside closes modal
document.getElementById("variantModal").addEventListener("click", (e) => {
    if (e.target.id === "variantModal") {
        e.target.style.display = "none";
    }
});

// Make items selectable
document.querySelectorAll(".item").forEach(btn => {
    btn.addEventListener("click", function () {
        this.parentNode.querySelectorAll(".item").forEach(b => b.classList.remove("active"));
        this.classList.add("active");
    });
});

// Selectable colors
document.querySelectorAll(".color-item").forEach(btn => {
    btn.addEventListener("click", function () {
        this.parentNode.querySelectorAll(".color-item").forEach(b => b.classList.remove("active-color"));
        this.classList.add("active-color");
    });
});
</script>

<?php include 'footer.php'; ?>
       