@extends('layouts.landing', ['title' => 'Furniture Store - Product Page'])

@section('content')
    <div class="modal fade" id="reviewForm" data-bs-backdrop="static" tabindex="-1" aria-labelledby="reviewFormLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <form class="modal-content needs-validation" novalidate>
                <div class="modal-header border-0">
                    <h5 class="modal-title" id="reviewFormLabel">Leave a review</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pb-3 pt-0">
                    <div class="mb-3">
                        <label for="review-name" class="form-label">Your name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control rounded-pill" id="review-name" required>
                        <div class="invalid-feedback">Please enter your name!</div>
                        <small class="form-text">Will be displayed on the comment.</small>
                    </div>
                    <div class="mb-3">
                        <label for="review-email" class="form-label">Your email <span class="text-danger">*</span></label>
                        <input type="email" class="form-control rounded-pill" id="review-email" required>
                        <div class="invalid-feedback">Please provide a valid email address!</div>
                        <small class="form-text">Authentication only - we won't spam you.</small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Rating <span class="text-danger">*</span></label>
                        <select class="form-select rounded-pill"
                            data-select='{
                "classNames": {
                  "containerInner": ["form-select", "rounded-pill"]
                },
                "placeholderValue": "Choose rating",
                "choices": [
                  {
                    "value": "",
                    "label": "Choose rating",
                    "placeholder": true
                  },
                  {
                    "value": "1",
                    "label": "<span class=\"visually-hidden\">1 star</span>",
                    "customProperties": {
                      "icon": "<span class=\"d-flex gap-1 py-1\"><i class=\"ci-star-filled text-warning\"></i></span>",
                      "selected": "1 star"
                    }
                  },
                  {
                    "value": "2",
                    "label": "<span class=\"visually-hidden\">2 stars</span>",
                    "customProperties": {
                      "icon": "<span class=\"d-flex gap-1 py-1\"><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i></span>",
                      "selected": "2 stars"
                    }
                  },
                  {
                    "value": "3",
                    "label": "<span class=\"visually-hidden\">3 stars</span>",
                    "customProperties": {
                      "icon": "<span class=\"d-flex gap-1 py-1\"><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i></span>",
                      "selected": "3 stars"
                    }
                  },
                  {
                    "value": "4",
                    "label": "<span class=\"visually-hidden\">4 stars</span>",
                    "customProperties": {
                      "icon": "<span class=\"d-flex gap-1 py-1\"><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i></span>",
                      "selected": "4 stars"
                    }
                  },
                  {
                    "value": "5",
                    "label": "<span class=\"visually-hidden\">5 stars</span>",
                    "customProperties": {
                      "icon": "<span class=\"d-flex gap-1 py-1\"><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i><i class=\"ci-star-filled text-warning\"></i></span>",
                      "selected": "5 stars"
                    }
                  }
                ]
              }'
                            data-select-template="true" required></select>
                        <div class="invalid-feedback">Please choose your rating!</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="review-text">Review <span class="text-danger">*</span></label>
                        <textarea class="form-control rounded-6" rows="4" id="review-text" required></textarea>
                        <div class="invalid-feedback">Please write a review!</div>
                        <small class="form-text">Your review must be at least 50 characters.</small>
                    </div>
                    <div>
                        <div class="form-check form-check-inline">
                            <input type="radio" class="form-check-input" id="yes" name="recommend" checked>
                            <label for="yes" class="form-check-label">Yes, I recommend</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input type="radio" class="form-check-input" id="no" name="recommend">
                            <label for="no" class="form-check-label">No, I don't recommend</label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer flex-nowrap gap-3 border-0 px-4">
                    <button type="reset" class="btn btn-secondary w-100 rounded-pill m-0"
                        data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-dark w-100 rounded-pill m-0">Submit review</button>
                </div>
            </form>
        </div>
    </div>

    <div class="offcanvas offcanvas-end pb-sm-2 px-sm-2" id="shoppingCart" tabindex="-1"
        aria-labelledby="shoppingCartLabel" style="width: 500px">
        <div class="offcanvas-header py-3 pt-lg-4">
            <h4 class="offcanvas-title" id="shoppingCartLabel">Shopping cart</h4>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body text-center">
            <svg class="d-block mx-auto mb-4" xmlns="http://www.w3.org/2000/svg" width="60" viewBox="0 0 29.5 30">
                <path class="text-body-tertiary"
                    d="M17.8 4c.4 0 .8-.3.8-.8v-2c0-.4-.3-.8-.8-.8-.4 0-.8.3-.8.8v2c0 .4.3.8.8.8zm3.2.6c.4.2.8 0 1-.4l.4-.9c.2-.4 0-.8-.4-1s-.8 0-1 .4l-.4.9c-.2.4 0 .9.4 1zm-7.5-.4c.2.4.6.6 1 .4s.6-.6.4-1l-.4-.9c-.2-.4-.6-.6-1-.4s-.6.6-.4 1l.4.9z"
                    fill="currentColor" />
                <path class="text-body-emphasis"
                    d="M10.7 24.5c-1.5 0-2.8 1.2-2.8 2.8S9.2 30 10.7 30s2.8-1.2 2.8-2.8-1.2-2.7-2.8-2.7zm0 4c-.7 0-1.2-.6-1.2-1.2s.6-1.2 1.2-1.2 1.2.6 1.2 1.2-.5 1.2-1.2 1.2zm11.1-4c-1.5 0-2.8 1.2-2.8 2.8a2.73 2.73 0 0 0 2.8 2.8 2.73 2.73 0 0 0 2.8-2.8c0-1.6-1.3-2.8-2.8-2.8zm0 4c-.7 0-1.2-.6-1.2-1.2s.6-1.2 1.2-1.2 1.2.6 1.2 1.2-.6 1.2-1.2 1.2zM8.7 18h16c.3 0 .6-.2.7-.5l4-10c.2-.5-.2-1-.7-1H9.3c-.4 0-.8.3-.8.8s.4.7.8.7h18.3l-3.4 8.5H9.3L5.5 1C5.4.7 5.1.5 4.8.5h-4c-.5 0-.8.3-.8.7s.3.8.8.8h3.4l3.7 14.6a3.24 3.24 0 0 0-2.3 3.1C5.5 21.5 7 23 8.7 23h16c.4 0 .8-.3.8-.8s-.3-.8-.8-.8h-16a1.79 1.79 0 0 1-1.8-1.8c0-1 .9-1.6 1.8-1.6z"
                    fill="currentColor" />
            </svg>
            <h6 class="mb-2">Your shopping cart is currently empty!</h6>
            <p class="fs-sm mb-4">Explore our wide range of products and add items to your cart to proceed with your
                purchase.</p>
            <a class="btn btn-dark rounded-pill" href="{{ route('second', ['shop', 'catalog-furniture']) }}">Continue shopping</a>
        </div>
    </div>

    @include('layouts.partials/navbar2')

    <main class="content-wrapper">
        <div class="container">

            <!-- Breadcrumb -->
            <nav class="position-relative pt-3 mt-3 mt-md-4 mb-4" aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('second', ['home', 'furniture']) }}">Home</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('second', ['shop', 'catalog-furniture']) }}">Shop</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Product page</li>
                </ol>
            </nav>


            <!-- Product gallery and details -->
            <section class="row pb-4 pb-md-5 mb-2 mb-md-0 mb-xl-3">

                <!-- Gallery -->
                <div class="col-md-7 col-xl-8 pb-4 pb-md-0 mb-2 mb-sm-3 mb-md-0">
                    <div class="row row-cols-2 g-3 g-sm-4 g-md-3 g-lg-4">
                        <div class="col">
                            <a class="hover-effect-scale hover-effect-opacity position-relative d-flex rounded-4 overflow-hidden"
                                href="/img/shop/furniture/product/01.png" data-glightbox data-gallery="product-gallery">
                                <i
                                    class="ci-zoom-in hover-effect-target fs-3 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
                                <div class="ratio ratio-1x1 hover-effect-target">
                                    <img src="/img/shop/furniture/product/01.png" alt="Image">
                                </div>
                            </a>
                        </div>
                        <div class="col">
                            <a class="hover-effect-scale hover-effect-opacity position-relative d-flex rounded-4 overflow-hidden"
                                href="/img/shop/furniture/product/02.jpg" data-glightbox data-gallery="product-gallery">
                                <span
                                    class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
                                <i
                                    class="ci-zoom-in hover-effect-target fs-3 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
                                <div class="ratio ratio-1x1 hover-effect-target">
                                    <img src="/img/shop/furniture/product/02.jpg" alt="Image">
                                </div>
                            </a>
                        </div>
                        <div class="col-12">
                            <div class="collapse d-md-block" id="morePictures">
                                <div class="row row-cols-2 g-3 g-sm-4 g-md-3 g-lg-4 pb-3 pb-sm-4 pb-md-0">
                                    <div class="col">
                                        <a class="hover-effect-scale hover-effect-opacity position-relative d-flex rounded-4 overflow-hidden"
                                            href="/img/shop/furniture/product/03.jpg" data-glightbox
                                            data-gallery="product-gallery">
                                            <span
                                                class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
                                            <i
                                                class="ci-zoom-in hover-effect-target fs-3 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
                                            <div class="ratio ratio-1x1 hover-effect-target">
                                                <img src="/img/shop/furniture/product/03.jpg" alt="Image">
                                            </div>
                                        </a>
                                    </div>
                                    <div class="col">
                                        <a class="hover-effect-scale hover-effect-opacity position-relative d-flex rounded-4 overflow-hidden"
                                            href="/img/shop/furniture/product/04.jpg" data-glightbox
                                            data-gallery="product-gallery">
                                            <span
                                                class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
                                            <i
                                                class="ci-zoom-in hover-effect-target fs-3 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
                                            <div class="ratio ratio-1x1 hover-effect-target">
                                                <img src="/img/shop/furniture/product/04.jpg" alt="Image">
                                            </div>
                                        </a>
                                    </div>
                                    <div class="col">
                                        <a class="hover-effect-scale hover-effect-opacity position-relative d-flex rounded-4 overflow-hidden"
                                            href="/img/shop/furniture/product/05.jpg" data-glightbox
                                            data-gallery="product-gallery">
                                            <span
                                                class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
                                            <i
                                                class="ci-zoom-in hover-effect-target fs-3 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
                                            <div class="ratio ratio-1x1 hover-effect-target">
                                                <img src="/img/shop/furniture/product/05.jpg" alt="Image">
                                            </div>
                                        </a>
                                    </div>
                                    <div class="col">
                                        <a class="hover-effect-scale hover-effect-opacity position-relative d-flex rounded-4 overflow-hidden"
                                            href="/img/shop/furniture/product/06.jpg" data-glightbox
                                            data-gallery="product-gallery">
                                            <span
                                                class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
                                            <i
                                                class="ci-zoom-in hover-effect-target fs-3 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
                                            <div class="ratio ratio-1x1 hover-effect-target">
                                                <img src="/img/shop/furniture/product/06.jpg" alt="Image">
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <button type="button" class="btn btn-lg btn-outline-secondary w-100 collapsed d-md-none"
                                data-bs-toggle="collapse" data-bs-target="#morePictures"
                                data-label-collapsed="Show more pictures" data-label-expanded="Show less pictures"
                                aria-expanded="false" aria-controls="morePictures" aria-label="Show / hide pictures">
                                <i class="collapse-toggle-icon ci-chevron-down fs-lg ms-2 me-n2"></i>
                            </button>
                        </div>
                    </div>
                </div>


                <!-- Product details and options -->
                <div class="col-md-5 col-xl-4">
                    <div class="d-none d-md-block" style="margin-top: -90px"></div>
                    <div class="sticky-md-top ps-md-2 ps-xl-4">
                        <div class="d-none d-md-block" style="padding-top: 90px"></div>
                        <div class="fs-xs text-body-secondary mb-3">V00273124</div>
                        <h1 class="fs-xl fw-medium">Chair with wooden legs 60x100 cm</h1>
                        <div class="h4 fw-bold mb-4">$357.00 <del class="fs-sm fw-normal text-body-tertiary">$416.00</del>
                        </div>
                        <ul class="list-unstyled fs-sm text-body-emphasis mb-4">
                            <li>
                                <span class="me-1">Pay 4 interest-free payments of <span
                                        class="fw-semibold">$89.00</span> with</span>
                                <a class="d-inline-block" href="#!" aria-label="Afterpay">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="80" viewBox="0 0 360 129.6">
                                        <path
                                            d="M297.4 127.4H62.7C28 127.4 0 99.4 0 64.8h0C0 30.2 28 2.1 62.7 2.1h234.7c34.6 0 62.6 28 62.6 62.6h0c0 34.7-28 62.7-62.6 62.7z"
                                            fill="#b2fce4" />
                                        <path
                                            d="M306.8 49.8l-7.9-4.5-8-4.6c-5.3-3-11.9.8-11.9 6.9v1c0 .6.3 1.1.8 1.4l3.7 2.1c1 .6 2.3-.2 2.3-1.3v-2.4c0-1.2 1.3-2 2.3-1.4l7.3 4.2 7.3 4.2c1.1.6 1.1 2.1 0 2.7l-7.3 4.2-7.3 4.2c-1 .6-2.3-.2-2.3-1.4v-1.2c0-6.1-6.6-9.9-11.9-6.9l-8 4.6-7.9 4.5c-5.3 3-5.3 10.7 0 13.8l7.9 4.5 8 4.6c5.3 3 11.9-.8 11.9-6.9v-1c0-.6-.3-1.1-.8-1.4l-3.7-2.1c-1-.6-2.3.2-2.3 1.3v2.4c0 1.2-1.3 2-2.3 1.4l-7.3-4.2-7.3-4.2c-1.1-.6-1.1-2.1 0-2.7l7.3-4.2 7.3-4.2c1-.6 2.3.2 2.3 1.4v1.2c0 6.1 6.6 9.9 11.9 6.9l8-4.6 7.9-4.5c5.4-3.1 5.4-10.7 0-13.8zm-51.6 1.5l-18.5 38.1H229l6.9-14.2-10.8-23.9h7.9l7 16 7.6-16h7.6zM70.8 64.9c0-4.5-3.3-7.7-7.4-7.7S56 60.4 56 64.9c0 4.4 3.3 7.7 7.4 7.7s7.4-3.2 7.4-7.7m.1 13.5v-3.5c-2 2.4-5 3.9-8.5 3.9-7.4 0-13-5.9-13-14 0-8 5.8-14 13.2-14 3.5 0 6.4 1.5 8.4 3.9v-3.4h6.7v27h-6.8zm38.9-6c-2.3 0-3-.9-3-3.1v-12h4.3v-5.9h-4.3v-6.6H100v6.6h-8.8v-2.7c0-2.3.9-3.1 3.2-3.1H96v-5.2h-3.3c-5.6 0-8.3 1.8-8.3 7.5v3.6h-3.8v5.9h3.8v21.1h6.8V57.2h8.8v13.3c0 5.5 2.1 7.9 7.6 7.9h3.5v-6h-1.3zm24.5-10c-.5-3.5-3.4-5.6-6.7-5.6-3.4 0-6.1 2.1-6.8 5.6h13.5zm-13.6 4.2c.5 4 3.4 6.3 7 6.3 2.9 0 5.1-1.4 6.4-3.5h7c-1.6 5.7-6.8 9.4-13.5 9.4-8.2 0-13.9-5.7-13.9-13.9s6.1-14.1 14.1-14.1c8.1 0 13.9 5.9 13.9 14.1 0 .6-.1 1.2-.2 1.7h-20.8zm64.2-1.7c0-4.4-3.3-7.7-7.4-7.7s-7.4 3.2-7.4 7.7c0 4.4 3.3 7.7 7.4 7.7s7.4-3.4 7.4-7.7m-21.4 24.5V51.3h6.7v3.5c2-2.5 5-4 8.5-4 7.3 0 13 6 13 14s-5.8 14-13.2 14c-3.4 0-6.2-1.4-8.2-3.6v14.2h-6.8zm52.2-24.5c0-4.5-3.3-7.7-7.4-7.7s-7.4 3.2-7.4 7.7c0 4.4 3.3 7.7 7.4 7.7s7.4-3.2 7.4-7.7m.1 13.5v-3.5c-2 2.4-5 3.9-8.5 3.9-7.4 0-13-5.9-13-14 0-8 5.8-14 13.2-14 3.5 0 6.4 1.5 8.4 3.9v-3.4h6.7v27h-6.8zM151.5 54s1.7-3.1 5.8-3.1c1.8 0 2.9.6 2.9.6v6.9s-2.5-1.5-4.8-1.2-3.8 2.4-3.7 5.2v16h-6.9v-27h6.7V54z" />
                                    </svg>
                                </a>
                            </li>
                            <li>
                                <span class="me-1">We provide a <span class="fw-semibold">3-year warranty</span></span>
                                <svg class="text-body-emphasis" xmlns="http://www.w3.org/2000/svg" width="24"
                                    height="24" fill="currentColor">
                                    <path fill-rule="evenodd"
                                        d="M22.287 10.967l-1.7-2c-.215-.254-.346-.568-.373-.9L20 5.46c-.029-.379-.193-.734-.462-1.002s-.625-.43-1.004-.458l-2.607-.213c-.332-.027-.646-.158-.9-.373l-2-1.7c-.288-.247-.654-.383-1.033-.383s-.746.136-1.033.383l-2 1.7c-.254.215-.568.346-.9.373L5.467 4c-.38.028-.737.191-1.006.461s-.433.626-.46 1.006l-.213 2.607c-.027.332-.158.646-.373.9l-1.7 2c-.247.288-.383.654-.383 1.033s.136.746.383 1.033l1.7 2c.215.254.346.568.373.9L4 18.547c.031.377.196.731.465.998s.624.428 1.002.456l2.607.213c.332.027.646.158.9.373l2 1.7c.288.247.654.383 1.033.383s.746-.136 1.033-.383l2-1.7c.254-.215.568-.346.9-.373L18.534 20c.38-.028.737-.191 1.006-.46s.433-.626.46-1.006l.213-2.607c.027-.332.158-.646.373-.9l1.7-2c.245-.287.38-.652.38-1.03s-.135-.743-.38-1.03zm-11.08 4.153l-2.96-2.96 1.127-1.127 1.833 1.827 3.42-3.42 1.127 1.127-4.547 4.553z" />
                                </svg>
                            </li>
                        </ul>

                        <!-- Color options -->
                        <div class="mb-4">
                            <label class="form-label fw-semibold pb-1 mb-2">Color: <span class="text-body fw-normal"
                                    id="colorOption">Viridian</span></label>
                            <div class="d-flex flex-wrap gap-2" data-binded-label="#colorOption">
                                <input type="radio" class="btn-check" name="colors" id="viridian" checked>
                                <label for="viridian" class="btn btn-image p-0" data-label="Viridian">
                                    <img src="/img/shop/furniture/product/colors/color01.png" width="56"
                                        alt="Viridian color">
                                    <span class="visually-hidden">Viridian</span>
                                </label>
                                <input type="radio" class="btn-check" name="colors" id="green">
                                <label for="green" class="btn btn-image p-0" data-label="Green">
                                    <img src="/img/shop/furniture/product/colors/color02.png" width="56"
                                        alt="Green color">
                                    <span class="visually-hidden">Green</span>
                                </label>
                                <input type="radio" class="btn-check" name="colors" id="blue">
                                <label for="blue" class="btn btn-image p-0" data-label="Blue">
                                    <img src="/img/shop/furniture/product/colors/color03.png" width="56"
                                        alt="Blue color">
                                    <span class="visually-hidden">Blue</span>
                                </label>
                            </div>
                        </div>

                        <!-- Material select -->
                        <div class="mb-4">
                            <label class="form-label fw-semibold pb-1 mb-2">Material of the cover:</label>
                            <select class="form-select form-select-lg rounded-pill"
                                data-select='{
                  "classNames": {
                    "containerInner": ["form-select", "form-select-lg", "rounded-pill"]
                  }
                }'
                                aria-label="Material select">
                                <option value="">Choose a material</option>
                                <option value="natural">Natural fabric</option>
                                <option value="synthetic">Synthetic fabric</option>
                                <option value="leather">Leather</option>
                                <option value="cotton">Cotton</option>
                            </select>
                        </div>

                        <!-- Add to cart + Wishlist buttons -->
                        <div class="d-flex gap-3 pb-4 mb-2 mb-lg-3">
                            <button type="button" class="btn btn-lg btn-dark w-100 rounded-pill">Add to cart</button>
                            <button type="button" class="btn btn-icon btn-lg btn-secondary rounded-circle animate-pulse"
                                aria-label="Add to Wishlist">
                                <i class="ci-heart fs-lg animate-target"></i>
                            </button>
                        </div>

                        <!-- Shipping info -->
                        <div class="mb-4">
                            <h6 class="d-flex align-items-center fs-sm mb-2">
                                <i class="ci-delivery fs-lg me-2"></i>
                                Free shipping
                            </h6>
                            <div class="fs-sm">
                                <span class="me-1">Get it between May 24 - May 27 to</span>
                                <div class="dropdown d-inline-block">
                                    <a class="dropdown-toggle animate-underline fs-sm fw-semibold text-body-emphasis text-decoration-none"
                                        href="#!" data-bs-toggle="dropdown" aria-haspopup="true"
                                        aria-expanded="false">
                                        <span class="animate-target">Preston - 06365</span>
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-end text-body p-3">
                                        Blackpool Road, 15<br>06365, Preston, UK
                                        <div class="h6 fs-sm pt-1 mb-0">Susan Gardner</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Contact -->
                        <div class="d-flex align-items-center justify-content-between bg-body-tertiary rounded p-3">
                            <div class="me-3">
                                <h6 class="fs-sm mb-1">Have a question?</h6>
                                <p class="fs-sm mb-0">Contact us if you have questions</p>
                            </div>
                            <a class="btn btn-sm btn-outline-dark rounded-pill" href="{{ route('second', ['contact', 'v2']) }}">Contact us</a>
                        </div>
                    </div>
                </div>
            </section>


            <!-- Sticky product preview + Add to cart CTA -->
            <section class="sticky-product-banner sticky-top" data-sticky-element>
                <div class="sticky-product-banner-inner pt-5">
                    <div class="navbar flex-nowrap align-items-center bg-body pt-4 pb-2">
                        <div class="d-flex align-items-center min-w-0 ms-lg-2 me-3">
                            <div class="ratio ratio-1x1 flex-shrink-0" style="width: 50px">
                                <img src="/img/shop/furniture/product/thumb.png" alt="Image">
                            </div>
                            <h4 class="h6 fw-medium d-none d-lg-block ps-3 mb-0">Chair with wooden legs 60x100 cm</h4>
                            <div class="w-100 min-w-0 d-lg-none ps-2">
                                <h4 class="fs-sm fw-medium text-truncate mb-1">Chair with wooden legs 60x100 cm</h4>
                                <div class="h6 mb-0">$357.00 <del class="fs-xs fw-normal text-body-tertiary">$416.00</del>
                                </div>
                            </div>
                        </div>
                        <div class="h4 d-none d-lg-block mb-0 ms-auto me-4">$357.00 <del
                                class="fs-sm fw-normal text-body-tertiary">$416.00</del></div>
                        <div class="d-flex gap-2">
                            <button type="button" class="btn btn-icon btn-secondary rounded-circle animate-pulse"
                                aria-label="Add to Wishlist">
                                <i class="ci-heart fs-base animate-target"></i>
                            </button>
                            <button type="button"
                                class="btn btn-dark rounded-pill ms-auto d-none d-md-inline-flex px-4">Add to cart</button>
                            <button type="button"
                                class="btn btn-icon btn-dark rounded-circle animate-slide-end ms-auto d-md-none"
                                aria-label="Add to Cart">
                                <i class="ci-shopping-cart fs-base animate-target"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </section>


            <!-- Product description -->
            <section class="row pb-5 mb-2 mb-sm-3 mb-lg-4 mb-xl-5">
                <div class="col-md-7 col-xl-8 mb-xxl-3">
                    <p>The chair will bring a stylish retro atmosphere to your room, inspired by the Scandinavian design.
                        The classic look fits anywhere in your home and provides a sturdy and durable place to sit for years
                        to come.</p>
                    <ul class="list-unstyled pb-md-2 pb-lg-3">
                        <li class="mt-1"><span class="h6 mb-0">Backrest height:</span> 46 cm</li>
                        <li class="mt-1"><span class="h6 mb-0">Width:</span> 64 cm</li>
                        <li class="mt-1"><span class="h6 mb-0">Depth:</span> 78 cm</li>
                        <li class="mt-1"><span class="h6 mb-0">Height under furniture:</span> 22 cm</li>
                        <li class="mt-1"><span class="h6 mb-0">Seat width:</span> 56 cm</li>
                        <li class="mt-1"><span class="h6 mb-0">Armrest height:</span> 63 cm</li>
                    </ul>

                    <div class="accordion accordion-alt-icon" id="productAccordion">
                        <div class="accordion-item">
                            <h3 class="accordion-header" id="headingProductInfo">
                                <button type="button" class="accordion-button animate-underline fs-xl collapsed"
                                    data-bs-toggle="collapse" data-bs-target="#productInfo" aria-expanded="false"
                                    aria-controls="productInfo">
                                    <span class="animate-target me-2">Product info</span>
                                </button>
                            </h3>
                            <div class="accordion-collapse collapse" id="productInfo"
                                aria-labelledby="headingProductInfo" data-bs-parent="#productAccordion">
                                <div class="accordion-body fs-base">Introducing our Scandinavian-inspired chair,
                                    meticulously designed to infuse your living space with a touch of retro elegance.
                                    Crafted with the finest materials and attention to detail, this chair embodies the
                                    timeless charm of Scandinavian design, making it a versatile addition to any home decor.
                                    With its classic silhouette and understated sophistication, it seamlessly integrates
                                    into various interior styles, bringing both style and functionality to your room.</div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h3 class="accordion-header" id="headingProductFeatures">
                                <button type="button" class="accordion-button animate-underline fs-xl collapsed"
                                    data-bs-toggle="collapse" data-bs-target="#productFeatures" aria-expanded="false"
                                    aria-controls="productFeatures">
                                    <span class="animate-target me-2">Features</span>
                                </button>
                            </h3>
                            <div class="accordion-collapse collapse" id="productFeatures"
                                aria-labelledby="headingProductFeatures" data-bs-parent="#productAccordion">
                                <div class="accordion-body fs-base">
                                    <ul class="m-0">
                                        <li><span class="text-body-emphasis fw-semibold">Timeless design:</span> Inspired
                                            by Scandinavian aesthetics, this chair boasts a sleek and retro-inspired
                                            silhouette that adds a touch of elegance to any space.</li>
                                        <li><span class="text-body-emphasis fw-semibold">Durable construction:</span>
                                            Crafted with high-quality materials, the chair is built to last, providing
                                            sturdy and reliable seating for years to come.</li>
                                        <li><span class="text-body-emphasis fw-semibold">Versatile placement:</span>
                                            Whether as a focal point in your living room, a cozy reading corner in your
                                            study, or an inviting seat around the dining table, this chair effortlessly
                                            adapts to different settings.</li>
                                        <li><span class="text-body-emphasis fw-semibold">Comfortable seating:</span> The
                                            chair features a well-padded seat and backrest, ensuring optimal comfort for
                                            extended periods of relaxation or conversation.</li>
                                        <li><span class="text-body-emphasis fw-semibold">Easy maintenance:</span> Designed
                                            for convenience, the chair's upholstery is easy to clean, allowing for
                                            hassle-free maintenance and care.</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h3 class="accordion-header" id="headingProductWarranty">
                                <button type="button" class="accordion-button animate-underline fs-xl collapsed"
                                    data-bs-toggle="collapse" data-bs-target="#productWarranty" aria-expanded="false"
                                    aria-controls="productWarranty">
                                    <span class="animate-target me-2">Warranty information</span>
                                </button>
                            </h3>
                            <div class="accordion-collapse collapse" id="productWarranty"
                                aria-labelledby="headingProductWarranty" data-bs-parent="#productAccordion">
                                <div class="accordion-body fs-base">We stand behind the quality of our products. Our chair
                                    comes with a 10-year warranty, guaranteeing against defects in materials and workmanship
                                    under normal use. In the unlikely event that you encounter any issues with your chair,
                                    contact our customer service team, and we will be happy to assist you with a replacement
                                    or repair.</div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h3 class="accordion-header" id="headingProductDelivery">
                                <button type="button" class="accordion-button animate-underline fs-xl collapsed"
                                    data-bs-toggle="collapse" data-bs-target="#productDelivery" aria-expanded="false"
                                    aria-controls="productDelivery">
                                    <span class="animate-target me-2">Delivery and shipping</span>
                                </button>
                            </h3>
                            <div class="accordion-collapse collapse" id="productDelivery"
                                aria-labelledby="headingProductDelivery" data-bs-parent="#productAccordion">
                                <div class="accordion-body fs-base">We understand the importance of timely delivery and
                                    strive to provide a seamless shipping experience for our customers. Upon placing your
                                    order, our team will process it promptly, and you will receive a notification once your
                                    chair is ready for shipment. We offer various shipping options to accommodate your
                                    preferences, with estimated delivery times provided at checkout. Rest assured, your
                                    chair will be carefully packaged to ensure it arrives safely at your doorstep, ready to
                                    enhance your home with its timeless charm.</div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>


            <!-- Popular products carousel -->
            <section class="pb-5 mb-1 mb-sm-3 mb-lg-4 mb-xl-5">
                <h2 class="h3 pb-2 pb-sm-3">Popular products</h2>
                <div class="position-relative pb-xxl-3">

                    <!-- External slider prev/next buttons visible on screens > 500px wide (sm breakpoint) -->
                    <button type="button"
                        class="popular-prev btn btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-start position-absolute top-50 start-0 z-2 translate-middle mt-n5 d-none d-sm-inline-flex"
                        aria-label="Prev">
                        <i class="ci-chevron-left fs-lg animate-target"></i>
                    </button>
                    <button type="button"
                        class="popular-next btn btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-end position-absolute top-50 start-100 z-2 translate-middle mt-n5 d-none d-sm-inline-flex"
                        aria-label="Next">
                        <i class="ci-chevron-right fs-lg animate-target"></i>
                    </button>

                    <!-- Slider -->
                    <div class="swiper"
                        data-swiper='{
              "slidesPerView": 2,
              "spaceBetween": 24,
              "loop": true,
              "navigation": {
                "prevEl": ".popular-prev",
                "nextEl": ".popular-next"
              },
              "breakpoints": {
                "768": {
                  "slidesPerView": 3
                },
                "992": {
                  "slidesPerView": 4
                }
              }
            }'>
                        <div class="swiper-wrapper">

                            <!-- Item -->
                            <div class="swiper-slide">
                                <div class="animate-underline">
                                    <a class="hover-effect-opacity ratio ratio-1x1 d-block mb-3"
                                        href="{{ route('second', ['shop', 'product-furniture']) }}">
                                        <img src="/img/shop/furniture/04.png" class="hover-effect-target opacity-100"
                                            alt="Product">
                                        <img src="/img/shop/furniture/04-hover.jpg"
                                            class="position-absolute top-0 start-0 hover-effect-target opacity-0 rounded-4"
                                            alt="Room">
                                    </a>
                                    <div class="d-flex gap-2 mb-3">
                                        <input type="radio" class="btn-check" name="colors-4" id="color-4-1" checked>
                                        <label for="color-4-1" class="btn btn-color fs-base" style="color: #384043">
                                            <span class="visually-hidden">Dark gray</span>
                                        </label>
                                        <input type="radio" class="btn-check" name="colors-4" id="color-4-2">
                                        <label for="color-4-2" class="btn btn-color fs-base" style="color: #bdc5da">
                                            <span class="visually-hidden">Light gray</span>
                                        </label>
                                        <input type="radio" class="btn-check" name="colors-4" id="color-4-3">
                                        <label for="color-4-3" class="btn btn-color fs-base" style="color: #526f99">
                                            <span class="visually-hidden">Bluish gray</span>
                                        </label>
                                    </div>
                                    <h3 class="mb-2">
                                        <a class="d-block fs-sm fw-medium text-truncate"
                                            href="{{ route('second', ['shop', 'product-furniture']) }}">
                                            <span class="animate-target">Bed frame light gray 140x200 cm</span>
                                        </a>
                                    </h3>
                                    <div class="h6">$760.00</div>
                                    <div class="d-flex gap-2">
                                        <button type="button" class="btn btn-dark w-100 rounded-pill px-3">Add to
                                            cart</button>
                                        <button type="button"
                                            class="btn btn-icon btn-secondary rounded-circle animate-pulse"
                                            aria-label="Add to wishlist">
                                            <i class="ci-heart fs-base animate-target"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- Item -->
                            <div class="swiper-slide">
                                <div class="animate-underline">
                                    <a class="hover-effect-opacity ratio ratio-1x1 d-block mb-3"
                                        href="{{ route('second', ['shop', 'product-furniture']) }}">
                                        <img src="/img/shop/furniture/05.png" class="hover-effect-target opacity-100"
                                            alt="Product">
                                        <img src="/img/shop/furniture/05-hover.jpg"
                                            class="position-absolute top-0 start-0 hover-effect-target opacity-0 rounded-4"
                                            alt="Room">
                                    </a>
                                    <div class="d-flex gap-2 mb-3">
                                        <input type="radio" class="btn-check" name="colors-5" id="color-5-1" checked>
                                        <label for="color-5-1" class="btn btn-color fs-base" style="color: #3a94b5">
                                            <span class="visually-hidden">Blue</span>
                                        </label>
                                        <input type="radio" class="btn-check" name="colors-5" id="color-5-2">
                                        <label for="color-5-2" class="btn btn-color fs-base" style="color: #777d7E">
                                            <span class="visually-hidden">Gray</span>
                                        </label>
                                    </div>
                                    <h3 class="mb-2">
                                        <a class="d-block fs-sm fw-medium text-truncate"
                                            href="{{ route('second', ['shop', 'product-furniture']) }}">
                                            <span class="animate-target">Blue armchair with iron legs</span>
                                        </a>
                                    </h3>
                                    <div class="h6">$220.00</div>
                                    <div class="d-flex gap-2">
                                        <button type="button" class="btn btn-dark w-100 rounded-pill px-3">Add to
                                            cart</button>
                                        <button type="button"
                                            class="btn btn-icon btn-secondary rounded-circle animate-pulse"
                                            aria-label="Add to wishlist">
                                            <i class="ci-heart fs-base animate-target"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- Item -->
                            <div class="swiper-slide">
                                <div class="animate-underline">
                                    <a class="hover-effect-opacity ratio ratio-1x1 d-block mb-3"
                                        href="{{ route('second', ['shop', 'product-furniture']) }}">
                                        <div class="position-absolute top-0 start-0 z-2 mt-2 mt-sm-3 ms-2 ms-sm-3">
                                            <span class="badge text-bg-danger">-13%</span>
                                        </div>
                                        <img src="/img/shop/furniture/06.png" class="hover-effect-target opacity-100"
                                            alt="Product">
                                        <img src="/img/shop/furniture/06-hover.jpg"
                                            class="position-absolute top-0 start-0 hover-effect-target opacity-0 rounded-4"
                                            alt="Room">
                                    </a>
                                    <div class="d-flex gap-2 mb-3">
                                        <input type="radio" class="btn-check" name="colors-6" id="color-6-1" checked>
                                        <label for="color-6-1" class="btn btn-color fs-base" style="color: #bdaB9e">
                                            <span class="visually-hidden">Beige</span>
                                        </label>
                                        <input type="radio" class="btn-check" name="colors-6" id="color-6-2">
                                        <label for="color-6-2" class="btn btn-color fs-base" style="color: #d65c46">
                                            <span class="visually-hidden">Terracotta</span>
                                        </label>
                                        <input type="radio" class="btn-check" name="colors-6" id="color-6-3">
                                        <label for="color-6-3" class="btn btn-color fs-base" style="color: #e0e5eb">
                                            <span class="visually-hidden">White</span>
                                        </label>
                                    </div>
                                    <h3 class="mb-2">
                                        <a class="d-block fs-sm fw-medium text-truncate"
                                            href="{{ route('second', ['shop', 'product-furniture']) }}">
                                            <span class="animate-target">Loft-style lamp 120x80 cm</span>
                                        </a>
                                    </h3>
                                    <div class="h6">$140.00 <del
                                            class="fs-sm fw-normal text-body-tertiary">$160.00</del></div>
                                    <div class="d-flex gap-2">
                                        <button type="button" class="btn btn-dark w-100 rounded-pill px-3">Add to
                                            cart</button>
                                        <button type="button"
                                            class="btn btn-icon btn-secondary rounded-circle animate-pulse"
                                            aria-label="Add to wishlist">
                                            <i class="ci-heart fs-base animate-target"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- Item -->
                            <div class="swiper-slide">
                                <div class="animate-underline">
                                    <a class="hover-effect-opacity ratio ratio-1x1 d-block mb-3"
                                        href="{{ route('second', ['shop', 'product-furniture']) }}">
                                        <img src="/img/shop/furniture/08.png" class="hover-effect-target opacity-100"
                                            alt="Product">
                                        <img src="/img/shop/furniture/08-hover.jpg"
                                            class="position-absolute top-0 start-0 hover-effect-target opacity-0 rounded-4"
                                            alt="Room">
                                    </a>
                                    <div class="d-flex gap-2 mb-3">
                                        <input type="radio" class="btn-check" name="colors-8" id="color-8-1"
                                            checked>
                                        <label for="color-8-1" class="btn btn-color fs-base" style="color: #305853">
                                            <span class="visually-hidden">Green</span>
                                        </label>
                                        <input type="radio" class="btn-check" name="colors-8" id="color-8-2">
                                        <label for="color-8-2" class="btn btn-color fs-base" style="color: #34598f">
                                            <span class="visually-hidden">Blue</span>
                                        </label>
                                    </div>
                                    <h3 class="mb-2">
                                        <a class="d-block fs-sm fw-medium text-truncate"
                                            href="{{ route('second', ['shop', 'product-furniture']) }}">
                                            <span class="animate-target">Armchair with wooden legs 60x100 cm</span>
                                        </a>
                                    </h3>
                                    <div class="h6">$320.50</div>
                                    <div class="d-flex gap-2">
                                        <button type="button" class="btn btn-dark w-100 rounded-pill px-3">Add to
                                            cart</button>
                                        <button type="button"
                                            class="btn btn-icon btn-secondary rounded-circle animate-pulse"
                                            aria-label="Add to wishlist">
                                            <i class="ci-heart fs-base animate-target"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- Item -->
                            <div class="swiper-slide">
                                <div class="animate-underline">
                                    <a class="hover-effect-opacity ratio ratio-1x1 d-block mb-3"
                                        href="{{ route('second', ['shop', 'product-furniture']) }}">
                                        <img src="/img/shop/furniture/02.png" class="hover-effect-target opacity-100"
                                            alt="Product">
                                        <img src="/img/shop/furniture/02-hover.jpg"
                                            class="position-absolute top-0 start-0 hover-effect-target opacity-0 rounded-4"
                                            alt="Room">
                                    </a>
                                    <div class="d-flex gap-2 mb-3">
                                        <input type="radio" class="btn-check" name="colors-2" id="color-2-1"
                                            checked>
                                        <label for="color-2-1" class="btn btn-color fs-base" style="color: #6a6f7b">
                                            <span class="visually-hidden">Gray</span>
                                        </label>
                                        <input type="radio" class="btn-check" name="colors-2" id="color-2-2">
                                        <label for="color-2-2" class="btn btn-color fs-base" style="color: #373b42">
                                            <span class="visually-hidden">Dark gray</span>
                                        </label>
                                        <input type="radio" class="btn-check" name="colors-2" id="color-2-3">
                                        <label for="color-2-3" class="btn btn-color fs-base" style="color: #216aae">
                                            <span class="visually-hidden">Blue</span>
                                        </label>
                                        <input type="radio" class="btn-check" name="colors-2" id="color-2-4">
                                        <label for="color-2-4" class="btn btn-color fs-base" style="color: #187c1c">
                                            <span class="visually-hidden">Green</span>
                                        </label>
                                    </div>
                                    <h3 class="mb-2">
                                        <a class="d-block fs-sm fw-medium text-truncate"
                                            href="{{ route('second', ['shop', 'product-furniture']) }}">
                                            <span class="animate-target">Decorative flowerpot with a plant</span>
                                        </a>
                                    </h3>
                                    <div class="h6">$107.50</div>
                                    <div class="d-flex gap-2">
                                        <button type="button" class="btn btn-dark w-100 rounded-pill px-3">Add to
                                            cart</button>
                                        <button type="button"
                                            class="btn btn-icon btn-secondary rounded-circle animate-pulse"
                                            aria-label="Add to wishlist">
                                            <i class="ci-heart fs-base animate-target"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- Item -->
                            <div class="swiper-slide">
                                <div class="animate-underline">
                                    <a class="hover-effect-opacity ratio ratio-1x1 d-block mb-3"
                                        href="{{ route('second', ['shop', 'product-furniture']) }}">
                                        <img src="/img/shop/furniture/07.png" class="hover-effect-target opacity-100"
                                            alt="Product">
                                        <img src="/img/shop/furniture/07-hover.jpg"
                                            class="position-absolute top-0 start-0 hover-effect-target opacity-0 rounded-4"
                                            alt="Room">
                                    </a>
                                    <div class="d-flex gap-2 mb-3">
                                        <input type="radio" class="btn-check" name="colors-7" id="color-7-1"
                                            checked>
                                        <label for="color-7-1" class="btn btn-color fs-base" style="color: #71706c">
                                            <span class="visually-hidden">Dark gray</span>
                                        </label>
                                        <input type="radio" class="btn-check" name="colors-7" id="color-7-2">
                                        <label for="color-7-2" class="btn btn-color fs-base" style="color: #c1c3b8">
                                            <span class="visually-hidden">Light gray</span>
                                        </label>
                                    </div>
                                    <h3 class="mb-2">
                                        <a class="d-block fs-sm fw-medium text-truncate"
                                            href="{{ route('second', ['shop', 'product-furniture']) }}">
                                            <span class="animate-target">Chair with a cushion for the legs</span>
                                        </a>
                                    </h3>
                                    <div class="h6">$435.00</div>
                                    <div class="d-flex gap-2">
                                        <button type="button" class="btn btn-dark w-100 rounded-pill px-3">Add to
                                            cart</button>
                                        <button type="button"
                                            class="btn btn-icon btn-secondary rounded-circle animate-pulse"
                                            aria-label="Add to wishlist">
                                            <i class="ci-heart fs-base animate-target"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- External slider prev/next buttons visible on screens < 500px wide (sm breakpoint) -->
                <div class="d-flex justify-content-center gap-2 mt-1 pt-4 d-sm-none">
                    <button type="button"
                        class="popular-prev btn btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-start me-1"
                        aria-label="Prev">
                        <i class="ci-chevron-left fs-lg animate-target"></i>
                    </button>
                    <button type="button"
                        class="popular-next btn btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-end"
                        aria-label="Next">
                        <i class="ci-chevron-right fs-lg animate-target"></i>
                    </button>
                </div>
            </section>


            <!-- Blog articles -->
            <section class="pb-5 mb-2 mb-sm-3 mb-lg-4 mb-xl-5">
                <h2 class="h3 pb-2 pb-sm-3">From the blog</h2>
                <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 mb-xxl-3">

                    <!-- Article -->
                    <article class="col">
                        <a class="ratio d-flex hover-effect-scale rounded-4 overflow-hidden" href="#!"
                            style="--cz-aspect-ratio: calc(260 / 306 * 100%)">
                            <img src="/img/blog/grid/v2/10.jpg" class="hover-effect-target" alt="Image">
                        </a>
                        <div class="pt-4">
                            <div class="nav pb-2 mb-1">
                                <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Furniture</a>
                            </div>
                            <h3 class="h6 mb-3">
                                <a class="hover-effect-underline" href="#!">Furnishing your space: a guide to
                                    choosing the perfect furniture pieces</a>
                            </h3>
                            <div class="nav align-items-center gap-2 fs-xs">
                                <a class="nav-link text-body-secondary fs-xs fw-normal p-0" href="#!">Oliver
                                    Harris</a>
                                <hr class="vr my-1 mx-1">
                                <span class="text-body-secondary">September 5, 2024</span>
                            </div>
                        </div>
                    </article>

                    <!-- Article -->
                    <article class="col">
                        <a class="ratio d-flex hover-effect-scale rounded-4 overflow-hidden" href="#!"
                            style="--cz-aspect-ratio: calc(260 / 306 * 100%)">
                            <img src="/img/blog/grid/v2/11.jpg" class="hover-effect-target" alt="Image">
                        </a>
                        <div class="pt-4">
                            <div class="nav pb-2 mb-1">
                                <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Interior
                                    design</a>
                            </div>
                            <h3 class="h6 mb-3">
                                <a class="hover-effect-underline" href="#!">Transform your living space with these
                                    chic interior design tips</a>
                            </h3>
                            <div class="nav align-items-center gap-2 fs-xs">
                                <a class="nav-link text-body-secondary fs-xs fw-normal p-0" href="#!">Ethan
                                    Miller</a>
                                <hr class="vr my-1 mx-1">
                                <span class="text-body-secondary">August 23, 2024</span>
                            </div>
                        </div>
                    </article>

                    <!-- Article -->
                    <article class="col">
                        <a class="ratio d-flex hover-effect-scale rounded-4 overflow-hidden" href="#!"
                            style="--cz-aspect-ratio: calc(260 / 306 * 100%)">
                            <img src="/img/blog/grid/v2/13.jpg" class="hover-effect-target" alt="Image">
                        </a>
                        <div class="pt-4">
                            <div class="nav pb-2 mb-1">
                                <a class="nav-link text-body fs-xs text-uppercase p-0" href="#!">Home
                                    decoration</a>
                            </div>
                            <h3 class="h6 mb-3">
                                <a class="hover-effect-underline" href="#!">Elevate your space with trendy home
                                    decoration ideas</a>
                            </h3>
                            <div class="nav align-items-center gap-2 fs-xs">
                                <a class="nav-link text-body-secondary fs-xs fw-normal p-0" href="#!">Olivia
                                    Anderson</a>
                                <hr class="vr my-1 mx-1">
                                <span class="text-body-secondary">August 9, 2024</span>
                            </div>
                        </div>
                    </article>
                </div>
            </section>


            <!-- Reviews -->
            <section class="pb-5 mb-2 mb-sm-3 mb-lg-4 mb-xl-5">

                <!-- Heading + Add review button -->
                <div class="d-sm-flex align-items-center justify-content-between border-bottom pb-2 pb-sm-3">
                    <div class="mb-3 me-sm-3">
                        <h2 class="h3 pb-2 mb-1">Customer reviews</h2>
                        <div class="d-flex align-items-center fs-sm">
                            <div class="d-flex gap-1 me-2">
                                <i class="ci-star-filled text-body-emphasis"></i>
                                <i class="ci-star-filled text-body-emphasis"></i>
                                <i class="ci-star-filled text-body-emphasis"></i>
                                <i class="ci-star-filled text-body-emphasis"></i>
                                <i class="ci-star text-body-tertiary opacity-75"></i>
                            </div>
                            Based on 6 reviews
                        </div>
                    </div>
                    <button type="button" class="btn btn-lg btn-outline-dark rounded-pill mb-3"
                        data-bs-toggle="modal" data-bs-target="#reviewForm">Leave a review</button>
                </div>

                <!-- Review -->
                <div class="border-bottom py-4">
                    <div class="row py-sm-2">
                        <div class="col-md-4 col-lg-3 mb-3 mb-md-0">
                            <div class="d-flex h6 mb-2">
                                Rafael Marquez
                                <i class="ci-check-circle text-success mt-1 ms-2" data-bs-toggle="tooltip"
                                    data-bs-custom-class="tooltip-sm" title="Verified customer"></i>
                            </div>
                            <div class="fs-sm mb-2 mb-md-3">June 25, 2024</div>
                            <div class="d-flex gap-1 fs-sm">
                                <i class="ci-star-filled text-body-emphasis"></i>
                                <i class="ci-star-filled text-body-emphasis"></i>
                                <i class="ci-star-filled text-body-emphasis"></i>
                                <i class="ci-star-filled text-body-emphasis"></i>
                                <i class="ci-star-filled text-body-emphasis"></i>
                            </div>
                        </div>
                        <div class="col-md-8 col-lg-9">
                            <p class="mb-md-4">Absolutely love this chair! It's exactly what I was looking for to complete
                                my Scandinavian-themed living room. The wooden legs add a touch of warmth and the design is
                                timeless. Comfortable and sturdy, couldn't be happier with my purchase!</p>
                            <div class="d-sm-flex justify-content-between">
                                <div
                                    class="d-flex align-items-center fs-sm fw-medium text-dark-emphasis pb-2 pb-sm-0 mb-1 mb-sm-0">
                                    <i class="ci-check fs-base me-1" style="margin-top: .125rem"></i>
                                    Yes, I recommend this product
                                </div>
                                <div class="d-flex align-items-center gap-2">
                                    <div class="fs-sm fw-medium text-dark-emphasis me-1">Helpful?</div>
                                    <button type="button" class="btn btn-sm btn-secondary">
                                        <i class="ci-thumbs-up fs-sm ms-n1 me-1"></i>
                                        0
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Review -->
                <div class="border-bottom py-4">
                    <div class="row py-sm-2">
                        <div class="col-md-4 col-lg-3 mb-3 mb-md-0">
                            <div class="d-flex h6 mb-2">
                                Bessie Cooper
                                <i class="ci-check-circle text-success mt-1 ms-2" data-bs-toggle="tooltip"
                                    data-bs-custom-class="tooltip-sm" title="Verified customer"></i>
                            </div>
                            <div class="fs-sm mb-2 mb-md-3">April 8, 2024</div>
                            <div class="d-flex gap-1 fs-sm">
                                <i class="ci-star-filled text-body-emphasis"></i>
                                <i class="ci-star-filled text-body-emphasis"></i>
                                <i class="ci-star text-body-tertiary opacity-75"></i>
                                <i class="ci-star text-body-tertiary opacity-75"></i>
                                <i class="ci-star text-body-tertiary opacity-75"></i>
                            </div>
                        </div>
                        <div class="col-md-8 col-lg-9">
                            <p class="mb-md-4">While the design of the chair is nice and it does add a touch of retro vibe
                                to my space, I found the quality to be lacking. After just a few weeks of use, one of the
                                legs started to wobble, and the seat isn't as comfortable as I had hoped. Disappointed with
                                the durability. Additionally, the assembly process was a bit frustrating as some of the
                                screws didn't align properly with the holes, requiring extra effort to secure them in place.
                                Overall, while it looks good, I expected better quality for the price.</p>
                            <div class="d-sm-flex justify-content-between">
                                <div
                                    class="d-flex align-items-center fs-sm fw-medium text-dark-emphasis pb-2 pb-sm-0 mb-1 mb-sm-0">
                                    <i class="ci-close fs-base me-1" style="margin-top: .125rem"></i>
                                    No, I don't recommend this product
                                </div>
                                <div class="d-flex align-items-center gap-2">
                                    <div class="fs-sm fw-medium text-dark-emphasis me-1">Helpful?</div>
                                    <button type="button" class="btn btn-sm btn-secondary">
                                        <i class="ci-thumbs-up fs-sm ms-n1 me-1"></i>
                                        3
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Review -->
                <div class="border-bottom py-4">
                    <div class="row py-sm-2">
                        <div class="col-md-4 col-lg-3 mb-3 mb-md-0">
                            <div class="d-flex h6 mb-2">Savannah Nguyen</div>
                            <div class="fs-sm mb-2 mb-md-3">March 30, 2024</div>
                            <div class="d-flex gap-1 fs-sm">
                                <i class="ci-star-filled text-body-emphasis"></i>
                                <i class="ci-star-filled text-body-emphasis"></i>
                                <i class="ci-star-filled text-body-emphasis"></i>
                                <i class="ci-star-filled text-body-emphasis"></i>
                                <i class="ci-star text-body-tertiary opacity-75"></i>
                            </div>
                        </div>
                        <div class="col-md-8 col-lg-9">
                            <p class="mb-md-4">Great addition to our dining room! The chair looks fantastic and is quite
                                comfortable for short sits. Assembly was a breeze, and the quality seems decent for the
                                price. Overall, satisfied with the purchase.</p>
                            <div class="d-sm-flex justify-content-between">
                                <div
                                    class="d-flex align-items-center fs-sm fw-medium text-dark-emphasis pb-2 pb-sm-0 mb-1 mb-sm-0">
                                    <i class="ci-check fs-base me-1" style="margin-top: .125rem"></i>
                                    Yes, I recommend this product
                                </div>
                                <div class="d-flex align-items-center gap-2">
                                    <div class="fs-sm fw-medium text-dark-emphasis me-1">Helpful?</div>
                                    <button type="button" class="btn btn-sm btn-secondary">
                                        <i class="ci-thumbs-up fs-sm ms-n1 me-1"></i>
                                        7
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- More reviews collaspe -->
                <div class="collapse" id="moreReviews">

                    <!-- Review -->
                    <div class="border-bottom py-4">
                        <div class="row py-sm-2">
                            <div class="col-md-4 col-lg-3 mb-3 mb-md-0">
                                <div class="d-flex h6 mb-2">Daniel Adams</div>
                                <div class="fs-sm mb-2 mb-md-3">March 16, 2024</div>
                                <div class="d-flex gap-1 fs-sm">
                                    <i class="ci-star-filled text-body-emphasis"></i>
                                    <i class="ci-star-filled text-body-emphasis"></i>
                                    <i class="ci-star-filled text-body-emphasis"></i>
                                    <i class="ci-star-filled text-body-emphasis"></i>
                                    <i class="ci-star-filled text-body-emphasis"></i>
                                </div>
                            </div>
                            <div class="col-md-8 col-lg-9">
                                <p class="mb-md-4">Couldn't be happier with this chair! It's not only stylish but also
                                    incredibly comfortable. The size is perfect for our space, and the wooden legs feel
                                    sturdy. Definitely recommend it to anyone looking for a chic and functional seating
                                    option.</p>
                                <div class="d-sm-flex justify-content-between">
                                    <div
                                        class="d-flex align-items-center fs-sm fw-medium text-dark-emphasis pb-2 pb-sm-0 mb-1 mb-sm-0">
                                        <i class="ci-check fs-base me-1" style="margin-top: .125rem"></i>
                                        Yes, I recommend this product
                                    </div>
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="fs-sm fw-medium text-dark-emphasis me-1">Helpful?</div>
                                        <button type="button" class="btn btn-sm btn-secondary">
                                            <i class="ci-thumbs-up fs-sm ms-n1 me-1"></i>
                                            14
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Review -->
                    <div class="border-bottom py-4">
                        <div class="row py-sm-2">
                            <div class="col-md-4 col-lg-3 mb-3 mb-md-0">
                                <div class="d-flex h6 mb-2">
                                    Jenny Wilson
                                    <i class="ci-check-circle text-success mt-1 ms-2" data-bs-toggle="tooltip"
                                        data-bs-custom-class="tooltip-sm" title="Verified customer"></i>
                                </div>
                                <div class="fs-sm mb-2 mb-md-3">February 19, 2024</div>
                                <div class="d-flex gap-1 fs-sm">
                                    <i class="ci-star-filled text-body-emphasis"></i>
                                    <i class="ci-star-filled text-body-emphasis"></i>
                                    <i class="ci-star-filled text-body-emphasis"></i>
                                    <i class="ci-star-filled text-body-emphasis"></i>
                                    <i class="ci-star-filled text-body-emphasis"></i>
                                </div>
                            </div>
                            <div class="col-md-8 col-lg-9">
                                <p class="mb-md-4">This chair exceeded my expectations! It's well-made, comfortable, and
                                    looks even better in person. The Scandinavian design adds a sophisticated touch to my
                                    home office. I've received so many compliments already. Five stars all the way!</p>
                                <div class="d-sm-flex justify-content-between">
                                    <div
                                        class="d-flex align-items-center fs-sm fw-medium text-dark-emphasis pb-2 pb-sm-0 mb-1 mb-sm-0">
                                        <i class="ci-check fs-base me-1" style="margin-top: .125rem"></i>
                                        Yes, I recommend this product
                                    </div>
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="fs-sm fw-medium text-dark-emphasis me-1">Helpful?</div>
                                        <button type="button" class="btn btn-sm btn-secondary">
                                            <i class="ci-thumbs-up fs-sm ms-n1 me-1"></i>
                                            2
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Review -->
                    <div class="border-bottom py-4">
                        <div class="row py-sm-2">
                            <div class="col-md-4 col-lg-3 mb-3 mb-md-0">
                                <div class="d-flex h6 mb-2">Kristin Watson</div>
                                <div class="fs-sm mb-2 mb-md-3">February 7, 2024</div>
                                <div class="d-flex gap-1 fs-sm">
                                    <i class="ci-star-filled text-body-emphasis"></i>
                                    <i class="ci-star-filled text-body-emphasis"></i>
                                    <i class="ci-star-filled text-body-emphasis"></i>
                                    <i class="ci-star text-body-tertiary opacity-75"></i>
                                    <i class="ci-star text-body-tertiary opacity-75"></i>
                                </div>
                            </div>
                            <div class="col-md-8 col-lg-9">
                                <p class="mb-md-4">The chair is nice, but it's not the most comfortable for extended
                                    periods of sitting. The wooden legs give it a nice aesthetic, but they seem a bit
                                    fragile. It's a decent chair for occasional use, but I wouldn't recommend it for daily
                                    use or long sitting sessions.</p>
                                <div class="d-sm-flex justify-content-between">
                                    <div
                                        class="d-flex align-items-center fs-sm fw-medium text-dark-emphasis pb-2 pb-sm-0 mb-1 mb-sm-0">
                                        <i class="ci-close fs-base me-1" style="margin-top: .125rem"></i>
                                        No, I don't recommend this product
                                    </div>
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="fs-sm fw-medium text-dark-emphasis me-1">Helpful?</div>
                                        <button type="button" class="btn btn-sm btn-secondary">
                                            <i class="ci-thumbs-up fs-sm ms-n1 me-1"></i>
                                            9
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Toggle reviews collapse button -->
                <div class="nav pt-3 mt-md-2 mb-xxl-2">
                    <a class="nav-link animate-underline collapsed px-0" href="#moreReviews" data-bs-toggle="collapse"
                        aria-expanded="false" aria-controls="moreReviews" aria-label="Show / hide reviews">
                        <span class="animate-target" data-label-collapsed="Show more reviews"
                            data-label-expanded="Show less reviews"></span>
                        <i class="collapse-toggle-icon ci-chevron-down fs-base mt-1 ms-1"></i>
                    </a>
                </div>
            </section>


            <!-- Viewed products carousel -->
            <section class="pb-5 mb-2 mb-sm-3 mb-md-4 mb-lg-5">
                <h2 class="h3 pb-2 pb-sm-3">Viewed products</h2>
                <div class="position-relative pb-xxl-3">

                    <!-- External slider prev/next buttons visible on screens > 500px wide (sm breakpoint) -->
                    <button type="button"
                        class="viewed-prev btn btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-start position-absolute top-50 start-0 z-2 translate-middle mt-n5 d-none d-sm-inline-flex"
                        aria-label="Prev">
                        <i class="ci-chevron-left fs-lg animate-target"></i>
                    </button>
                    <button type="button"
                        class="viewed-next btn btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-end position-absolute top-50 start-100 z-2 translate-middle mt-n5 d-none d-sm-inline-flex"
                        aria-label="Next">
                        <i class="ci-chevron-right fs-lg animate-target"></i>
                    </button>

                    <!-- Slider -->
                    <div class="swiper"
                        data-swiper='{
              "slidesPerView": 2,
              "spaceBetween": 24,
              "navigation": {
                "prevEl": ".viewed-prev",
                "nextEl": ".viewed-next"
              },
              "breakpoints": {
                "768": {
                  "slidesPerView": 3
                },
                "992": {
                  "slidesPerView": 4
                }
              }
            }'>
                        <div class="swiper-wrapper">

                            <!-- Item -->
                            <div class="swiper-slide">
                                <div class="animate-underline">
                                    <a class="hover-effect-opacity ratio ratio-1x1 d-block mb-3"
                                        href="{{ route('second', ['shop', 'product-furniture']) }}">
                                        <img src="/img/shop/furniture/16.png" class="hover-effect-target opacity-100"
                                            alt="Product">
                                        <img src="/img/shop/furniture/16-hover.jpg"
                                            class="position-absolute top-0 start-0 hover-effect-target opacity-0 rounded-4"
                                            alt="Room">
                                    </a>
                                    <div class="d-flex gap-2 mb-3">
                                        <input type="radio" class="btn-check" name="colors-16" id="color-16-1"
                                            checked>
                                        <label for="color-16-1" class="btn btn-color fs-base" style="color: #b2b8c0">
                                            <span class="visually-hidden">Light gray</span>
                                        </label>
                                        <input type="radio" class="btn-check" name="colors-16" id="color-16-2">
                                        <label for="color-16-2" class="btn btn-color fs-base" style="color: #6a6662">
                                            <span class="visually-hidden">Dark gray</span>
                                        </label>
                                    </div>
                                    <h3 class="mb-2">
                                        <a class="d-block fs-sm fw-medium text-truncate"
                                            href="{{ route('second', ['shop', 'product-furniture']) }}">
                                            <span class="animate-target">Soft armchair with wooden legs</span>
                                        </a>
                                    </h3>
                                    <div class="h6">$215.00</div>
                                    <div class="d-flex gap-2">
                                        <button type="button" class="btn btn-dark w-100 rounded-pill px-3">Add to
                                            cart</button>
                                        <button type="button"
                                            class="btn btn-icon btn-secondary rounded-circle animate-pulse"
                                            aria-label="Add to wishlist">
                                            <i class="ci-heart fs-base animate-target"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- Item -->
                            <div class="swiper-slide">
                                <div class="animate-underline">
                                    <a class="hover-effect-opacity ratio ratio-1x1 d-block mb-3"
                                        href="{{ route('second', ['shop', 'product-furniture']) }}">
                                        <img src="/img/shop/furniture/10.png" class="hover-effect-target opacity-100"
                                            alt="Product">
                                        <img src="/img/shop/furniture/10-hover.jpg"
                                            class="position-absolute top-0 start-0 hover-effect-target opacity-0 rounded-4"
                                            alt="Room">
                                    </a>
                                    <div class="d-flex gap-2 mb-3">
                                        <input type="radio" class="btn-check" name="colors-10" id="color-10-1"
                                            checked>
                                        <label for="color-10-1" class="btn btn-color fs-base" style="color: #677382">
                                            <span class="visually-hidden">Navy blue</span>
                                        </label>
                                        <input type="radio" class="btn-check" name="colors-10" id="color-10-2">
                                        <label for="color-10-2" class="btn btn-color fs-base" style="color: #919384">
                                            <span class="visually-hidden">Gray</span>
                                        </label>
                                        <input type="radio" class="btn-check" name="colors-10" id="color-10-3">
                                        <label for="color-10-3" class="btn btn-color fs-base" style="color: #b2b8c0">
                                            <span class="visually-hidden">Light gray</span>
                                        </label>
                                    </div>
                                    <h3 class="mb-2">
                                        <a class="d-block fs-sm fw-medium text-truncate"
                                            href="{{ route('second', ['shop', 'product-furniture']) }}">
                                            <span class="animate-target">Navy blue low sofa for relaxation</span>
                                        </a>
                                    </h3>
                                    <div class="h6">$1,250.00</div>
                                    <div class="d-flex gap-2">
                                        <button type="button" class="btn btn-dark w-100 rounded-pill px-3">Add to
                                            cart</button>
                                        <button type="button"
                                            class="btn btn-icon btn-secondary rounded-circle animate-pulse"
                                            aria-label="Add to wishlist">
                                            <i class="ci-heart fs-base animate-target"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- Item -->
                            <div class="swiper-slide">
                                <div class="animate-underline">
                                    <a class="hover-effect-opacity ratio ratio-1x1 d-block mb-3"
                                        href="{{ route('second', ['shop', 'product-furniture']) }}">
                                        <img src="/img/shop/furniture/11.png" class="hover-effect-target opacity-100"
                                            alt="Product">
                                        <img src="/img/shop/furniture/11-hover.jpg"
                                            class="position-absolute top-0 start-0 hover-effect-target opacity-0 rounded-4"
                                            alt="Room">
                                    </a>
                                    <div class="d-flex gap-2 mb-3">
                                        <input type="radio" class="btn-check" name="colors-11" id="color-11-1"
                                            checked>
                                        <label for="color-11-1" class="btn btn-color fs-base" style="color: #677382">
                                            <span class="visually-hidden">Green</span>
                                        </label>
                                        <input type="radio" class="btn-check" name="colors-11" id="color-11-2">
                                        <label for="color-11-2" class="btn btn-color fs-base" style="color: #548294">
                                            <span class="visually-hidden">Blue</span>
                                        </label>
                                    </div>
                                    <h3 class="mb-2">
                                        <a class="d-block fs-sm fw-medium text-truncate"
                                            href="{{ route('second', ['shop', 'product-furniture']) }}">
                                            <span class="animate-target">Armchair with wooden legs 70x120 cm</span>
                                        </a>
                                    </h3>
                                    <div class="h6">$269.99</div>
                                    <div class="d-flex gap-2">
                                        <button type="button" class="btn btn-dark w-100 rounded-pill px-3">Add to
                                            cart</button>
                                        <button type="button"
                                            class="btn btn-icon btn-secondary rounded-circle animate-pulse"
                                            aria-label="Add to wishlist">
                                            <i class="ci-heart fs-base animate-target"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- Item -->
                            <div class="swiper-slide">
                                <div class="animate-underline">
                                    <a class="hover-effect-opacity ratio ratio-1x1 d-block mb-3"
                                        href="{{ route('second', ['shop', 'product-furniture']) }}">
                                        <img src="/img/shop/furniture/03.png" class="hover-effect-target opacity-100"
                                            alt="Product">
                                        <img src="/img/shop/furniture/03-hover.jpg"
                                            class="position-absolute top-0 start-0 hover-effect-target opacity-0 rounded-4"
                                            alt="Room">
                                    </a>
                                    <div class="d-flex gap-2 mb-3">
                                        <input type="radio" class="btn-check" name="colors-3" id="color-3-1"
                                            checked>
                                        <label for="color-3-1" class="btn btn-color fs-base" style="color: #a36540">
                                            <span class="visually-hidden">Brown</span>
                                        </label>
                                        <input type="radio" class="btn-check" name="colors-3" id="color-3-2">
                                        <label for="color-3-2" class="btn btn-color fs-base" style="color: #f8d7b5">
                                            <span class="visually-hidden">Beige</span>
                                        </label>
                                        <input type="radio" class="btn-check" name="colors-3" id="color-3-3">
                                        <label for="color-3-3" class="btn btn-color fs-base" style="color: #e0e5eb">
                                            <span class="visually-hidden">White</span>
                                        </label>
                                    </div>
                                    <h3 class="mb-2">
                                        <a class="d-block fs-sm fw-medium text-truncate"
                                            href="{{ route('second', ['shop', 'product-furniture']) }}">
                                            <span class="animate-target">Home fragrance with the aroma of spices</span>
                                        </a>
                                    </h3>
                                    <div class="h6">$24.00</div>
                                    <div class="d-flex gap-2">
                                        <button type="button" class="btn btn-dark w-100 rounded-pill px-3">Add to
                                            cart</button>
                                        <button type="button"
                                            class="btn btn-icon btn-secondary rounded-circle animate-pulse"
                                            aria-label="Add to wishlist">
                                            <i class="ci-heart fs-base animate-target"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- External slider prev/next buttons visible on screens < 500px wide (sm breakpoint) -->
                <div class="d-flex justify-content-center gap-2 mt-1 pt-4 d-sm-none">
                    <button type="button"
                        class="viewed-prev btn btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-start me-1"
                        aria-label="Prev">
                        <i class="ci-chevron-left fs-lg animate-target"></i>
                    </button>
                    <button type="button"
                        class="viewed-next btn btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-end"
                        aria-label="Next">
                        <i class="ci-chevron-right fs-lg animate-target"></i>
                    </button>
                </div>
            </section>
        </div>
    </main>

    <footer class="footer bg-dark pb-4 py-lg-5" data-bs-theme="dark">
        <div class="container pt-5 pt-lg-4 mt-sm-2 mt-md-3">
            <div class="row pb-5">

                <!-- Subscription + Social account links -->
                <div class="col-md col-xl-8 order-md-2">
                    <div class="text-center px-sm-4 mx-auto" style="max-width: 568px">
                        <h3 class="pb-1 mb-2">Stay in touch with us</h3>
                        <p class="fs-sm text-body pb-2 pb-sm-3">Receive the latest updates about our products &amp;
                            promotions</p>
                        <form class="needs-validation position-relative" novalidate>
                            <input type="email" class="form-control form-control-lg rounded-pill text-start"
                                placeholder="You email" aria-label="Your email address" required>
                            <div class="invalid-tooltip bg-transparent p-0">Please enter you email address!</div>
                            <button type="submit"
                                class="btn btn-icon fs-xl btn-dark rounded-circle position-absolute top-0 end-0 mt-1 me-1"
                                aria-label="Submit your email address" data-bs-theme="light">
                                <i class="ci-arrow-up-right"></i>
                            </button>
                        </form>
                        <div class="d-flex justify-content-center gap-2 pt-4 pt-md-5 mt-1 mt-md-0">
                            <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
                                data-bs-toggle="tooltip"
                                data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>'
                                title="YouTube" aria-label="Follow us on YouTube">
                                <i class="ci-youtube"></i>
                            </a>
                            <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
                                data-bs-toggle="tooltip"
                                data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>'
                                title="Facebook" aria-label="Follow us on Facebook">
                                <i class="ci-facebook"></i>
                            </a>
                            <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
                                data-bs-toggle="tooltip"
                                data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>'
                                title="Instagram" aria-label="Follow us on Instagram">
                                <i class="ci-instagram"></i>
                            </a>
                            <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
                                data-bs-toggle="tooltip"
                                data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>'
                                title="Telegram" aria-label="Follow us on Telegram">
                                <i class="ci-telegram"></i>
                            </a>
                            <a class="btn btn-icon fs-base btn-outline-secondary border-0" href="#!"
                                data-bs-toggle="tooltip"
                                data-bs-template='<div class="tooltip fs-xs mb-n2" role="tooltip"><div class="tooltip-inner bg-transparent text-white p-0"></div></div>'
                                title="Pinterest" aria-label="Follow us on Pinterest">
                                <i class="ci-pinterest"></i>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Category links -->
                <div class="col-md-auto col-xl-2 text-center order-md-1 pt-4 pt-md-0">
                    <ul class="nav d-inline-flex flex-md-column justify-content-center align-items-center gap-md-2">
                        <li class="animate-underline my-1 mx-2 m-md-0">
                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Bedroom</a>
                        </li>
                        <li class="animate-underline my-1 mx-2 m-md-0">
                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Living
                                room</a>
                        </li>
                        <li class="animate-underline my-1 mx-2 m-md-0">
                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Bathroom</a>
                        </li>
                        <li class="animate-underline my-1 mx-2 m-md-0">
                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Decoration</a>
                        </li>
                        <li class="animate-underline my-1 mx-2 m-md-0">
                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Kitchen</a>
                        </li>
                        <li class="animate-underline my-1 mx-2 m-md-0">
                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Sale</a>
                        </li>
                    </ul>
                </div>

                <!-- Customer links -->
                <div class="col-md-auto col-xl-2 text-center order-md-3 pt-3 pt-md-0">
                    <ul class="nav d-inline-flex flex-md-column justify-content-center align-items-center gap-md-2">
                        <li class="animate-underline my-1 mx-2 m-md-0">
                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Shipping
                                options</a>
                        </li>
                        <li class="animate-underline my-1 mx-2 m-md-0">
                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Tracking a
                                package</a>
                        </li>
                        <li class="animate-underline my-1 mx-2 m-md-0">
                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Help
                                center</a>
                        </li>
                        <li class="animate-underline my-1 mx-2 m-md-0">
                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Contact us</a>
                        </li>
                        <li class="animate-underline my-1 mx-2 m-md-0">
                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Product
                                returns</a>
                        </li>
                        <li class="animate-underline my-1 mx-2 m-md-0">
                            <a class="nav-link d-inline-flex fw-normal p-0 animate-target" href="#!">Locations</a>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- Copyright -->
            <p class="fs-xs text-body text-center pt-lg-4 mt-n2 mt-md-0 mb-0">
                &copy; All rights reserved. Made by <span class="animate-underline"><a
                        class="animate-target text-white text-decoration-none" href="https://coderthemes.com/"
                        target="_blank" rel="noreferrer">Coderthemes</a></span>
            </p>
        </div>
    </footer>
@endsection

@section('scripts')
@endsection
