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

@section('content')
    <div class="modal fade" id="commentForm" data-bs-backdrop="static" tabindex="-1" aria-labelledby="commentFormLabel"
        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="commentFormLabel">Leave a comment</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>
                        <label class="form-label" for="review-text">Comment <span class="text-danger">*</span></label>
                        <textarea class="form-control rounded-6" rows="5" id="review-text" required></textarea>
                        <div class="invalid-feedback">Please write your comment!</div>
                        <small class="form-text">Your comment must be at least 50 characters.</small>
                    </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</button>
                </div>
            </form>
        </div>
    </div>

    <div class="offcanvas offcanvas-top" id="searchBox" data-bs-backdrop="static" tabindex="-1">
        <div class="offcanvas-header border-bottom p-0 py-lg-1">
            <form class="container d-flex align-items-center">
                <input type="search" class="form-control form-control-lg fs-lg border-0 rounded-0 py-3 ps-0"
                    placeholder="Search the products" data-autofocus="offcanvas">
                <button type="reset" class="btn-close fs-lg" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </form>
        </div>
        <div class="offcanvas-body px-0">
            <div class="container text-center">
                <svg class="text-body-tertiary opacity-60 mb-4" xmlns="http://www.w3.org/2000/svg" width="60"
                    viewBox="0 0 512 512" fill="currentColor">
                    <path
                        d="M340.115,361.412l-16.98-16.98c-34.237,29.36-78.733,47.098-127.371,47.098C87.647,391.529,0,303.883,0,195.765S87.647,0,195.765,0s195.765,87.647,195.765,195.765c0,48.638-17.738,93.134-47.097,127.371l16.98,16.98l11.94-11.94c5.881-5.881,15.415-5.881,21.296,0l112.941,112.941c5.881,5.881,5.881,15.416,0,21.296l-45.176,45.176c-5.881,5.881-15.415,5.881-21.296,0L328.176,394.648c-5.881-5.881-5.881-15.416,0-21.296L340.115,361.412z M195.765,361.412c91.484,0,165.647-74.163,165.647-165.647S287.249,30.118,195.765,30.118S30.118,104.28,30.118,195.765S104.28,361.412,195.765,361.412z M360.12,384l91.645,91.645l23.88-23.88L384,360.12L360.12,384z M233.034,233.033c5.881-5.881,15.415-5.881,21.296,0c5.881,5.881,5.881,15.416,0,21.296c-32.345,32.345-84.786,32.345-117.131,0c-5.881-5.881-5.881-15.415,0-21.296c5.881-5.881,15.416-5.881,21.296,0C179.079,253.616,212.45,253.616,233.034,233.033zM135.529,180.706c-12.475,0-22.588-10.113-22.588-22.588c0-12.475,10.113-22.588,22.588-22.588c12.475,0,22.588,10.113,22.588,22.588C158.118,170.593,148.005,180.706,135.529,180.706z M256,180.706c-12.475,0-22.588-10.113-22.588-22.588c0-12.475,10.113-22.588,22.588-22.588s22.588,10.113,22.588,22.588C278.588,170.593,268.475,180.706,256,180.706z" />
                </svg>
                <h6 class="mb-2">Your search results will appear here</h6>
                <p class="fs-sm mb-0">Start typing in the search field above to see instant search results.</p>
            </div>
        </div>
    </div>

    @include('layouts.partials/offcanvas2')

    <header class="navbar navbar-expand-lg bg-body navbar-sticky sticky-top z-fixed px-0" data-sticky-element>
        <div class="container flex-nowrap">

            <!-- Mobile offcanvas menu toggler (Hamburger) -->
            <button type="button" class="navbar-toggler me-4 me-lg-0" data-bs-toggle="offcanvas"
                data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <!-- Navbar brand (Logo) -->
            <a class="navbar-brand py-1 py-md-2 py-xl-1" href="{{ route('second', ['home', 'marketplace']) }}">
                <span class="d-none d-sm-flex flex-shrink-0 text-primary me-2">
                    <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36">
                        <path
                            d="M36 18.01c0 8.097-5.355 14.949-12.705 17.2a18.12 18.12 0 0 1-5.315.79C9.622 36 2.608 30.313.573 22.611.257 21.407.059 20.162 0 18.879v-1.758c.02-.395.059-.79.099-1.185.099-.908.277-1.817.514-2.686C2.687 5.628 9.682 0 18 0c5.572 0 10.551 2.528 13.871 6.517 1.502 1.797 2.648 3.91 3.359 6.201.494 1.659.771 3.436.771 5.292z"
                            fill="currentColor" />
                        <g fill="#fff">
                            <path
                                d="M17.466 21.624c-.514 0-.988-.316-1.146-.829-.198-.632.138-1.303.771-1.501l7.666-2.469-1.205-8.254-13.317 4.621a1.19 1.19 0 0 1-1.521-.75 1.19 1.19 0 0 1 .751-1.521l13.89-4.818c.553-.197 1.166-.138 1.64.158a1.82 1.82 0 0 1 .85 1.284l1.344 9.183c.138.987-.494 1.994-1.482 2.33l-7.864 2.528-.375.04zm7.31.138c-.178-.632-.85-1.007-1.482-.81l-5.177 1.58c-2.331.79-3.28.02-3.418-.099l-6.56-8.412a4.25 4.25 0 0 0-4.406-1.758l-3.122.987c-.237.889-.415 1.777-.514 2.686l4.228-1.363a1.84 1.84 0 0 1 1.857.81l6.659 8.551c.751.948 2.015 1.323 3.359 1.323.909 0 1.857-.178 2.687-.474l5.078-1.54c.632-.178 1.008-.829.81-1.481z" />
                            <use href="#czlogo" />
                            <use href="#czlogo" x="8.516" y="-2.172" />
                        </g>
                        <defs>
                            <path id="czlogo"
                                d="M18.689 28.654a1.94 1.94 0 0 1-1.936 1.935 1.94 1.94 0 0 1-1.936-1.935 1.94 1.94 0 0 1 1.936-1.935 1.94 1.94 0 0 1 1.936 1.935z" />
                        </defs>
                    </svg>
                </span>
                AsiaGolf
            </a>

            <!-- Main navigation that turns into offcanvas on screens < 992px wide (lg breakpoint) -->
            <nav class="offcanvas offcanvas-start" id="navbarNav" tabindex="-1" aria-labelledby="navbarNavLabel">
                <div class="offcanvas-header py-3">
                    <h5 class="offcanvas-title" id="navbarNavLabel">Browse AsiaGolf</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                </div>
                <div class="offcanvas-body pt-3 pb-4 py-lg-0 mx-lg-auto">
                    <ul class="navbar-nav position-relative">
                        <li class="nav-item dropdown py-lg-2 me-lg-n1 me-xl-0">
                            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                                data-bs-trigger="hover" aria-expanded="false">Home</a>
                            <ul class="dropdown-menu" style="--cz-dropdown-spacer: .875rem">
                                <li class="hover-effect-opacity px-2 mx-n2">
                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'electronics']) }}">
                                        <span class="fw-medium">Electronics Store</span>
                                        <span class="d-block fs-xs text-body-secondary">Megamenu + Hero slider</span>
                                        <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
                                            style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
                                            <img class="position-relative z-2 d-none-dark"
                                                src="/img/mega-menu/demo-preview/electronics-light.jpg"
                                                alt="Electronics Store">
                                            <img class="position-relative z-2 d-none d-block-dark"
                                                src="/img/mega-menu/demo-preview/electronics-dark.jpg"
                                                alt="Electronics Store">
                                            <span
                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
                                                style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
                                            <span
                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
                                                style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
                                        </div>
                                    </a>
                                </li>
                                <li class="hover-effect-opacity px-2 mx-n2">
                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v1']) }}">
                                        <span class="fw-medium">Fashion Store v.1</span>
                                        <span class="d-block fs-xs text-body-secondary">Hero promo slider</span>
                                        <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
                                            style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
                                            <img class="position-relative z-2 d-none-dark"
                                                src="/img/mega-menu/demo-preview/fashion-1-light.jpg"
                                                alt="Fashion Store v.1">
                                            <img class="position-relative z-2 d-none d-block-dark"
                                                src="/img/mega-menu/demo-preview/fashion-1-dark.jpg"
                                                alt="Fashion Store v.1">
                                            <span
                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
                                                style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
                                            <span
                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
                                                style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
                                        </div>
                                    </a>
                                </li>
                                <li class="hover-effect-opacity px-2 mx-n2">
                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'fashion-v2']) }}">
                                        <span class="fw-medium">Fashion Store v.2</span>
                                        <span class="d-block fs-xs text-body-secondary">Hero banner with hotspots</span>
                                        <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
                                            style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
                                            <img class="position-relative z-2 d-none-dark"
                                                src="/img/mega-menu/demo-preview/fashion-2-light.jpg"
                                                alt="Fashion Store v.2">
                                            <img class="position-relative z-2 d-none d-block-dark"
                                                src="/img/mega-menu/demo-preview/fashion-2-dark.jpg"
                                                alt="Fashion Store v.2">
                                            <span
                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
                                                style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
                                            <span
                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
                                                style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
                                        </div>
                                    </a>
                                </li>
                                <li class="hover-effect-opacity px-2 mx-n2">
                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'furniture']) }}">
                                        <span class="fw-medium">Furniture Store</span>
                                        <span class="d-block fs-xs text-body-secondary">Fancy product carousel</span>
                                        <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
                                            style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
                                            <img class="position-relative z-2 d-none-dark"
                                                src="/img/mega-menu/demo-preview/furniture-light.jpg"
                                                alt="Furniture Store">
                                            <img class="position-relative z-2 d-none d-block-dark"
                                                src="/img/mega-menu/demo-preview/furniture-dark.jpg"
                                                alt="Furniture Store">
                                            <span
                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
                                                style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
                                            <span
                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
                                                style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
                                        </div>
                                    </a>
                                </li>
                                <li class="hover-effect-opacity px-2 mx-n2">
                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'grocery']) }}">
                                        <span class="fw-medium">Grocery Store</span>
                                        <span class="d-block fs-xs text-body-secondary">Hero slider + Category cards</span>
                                        <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
                                            style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
                                            <img class="position-relative z-2 d-none-dark"
                                                src="/img/mega-menu/demo-preview/grocery-light.jpg" alt="Grocery Store">
                                            <img class="position-relative z-2 d-none d-block-dark"
                                                src="/img/mega-menu/demo-preview/grocery-dark.jpg" alt="Grocery Store">
                                            <span
                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
                                                style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
                                            <span
                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
                                                style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
                                        </div>
                                    </a>
                                </li>
                                <li class="hover-effect-opacity px-2 mx-n2">
                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'marketplace']) }}">
                                        <span class="fw-medium">Marketplace</span>
                                        <span class="d-block fs-xs text-body-secondary">Multi-vendor, digital goods</span>
                                        <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
                                            style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
                                            <img class="position-relative z-2 d-none-dark"
                                                src="/img/mega-menu/demo-preview/marketplace-light.jpg" alt="Marketplace">
                                            <img class="position-relative z-2 d-none d-block-dark"
                                                src="/img/mega-menu/demo-preview/marketplace-dark.jpg" alt="Marketplace">
                                            <span
                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
                                                style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
                                            <span
                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
                                                style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
                                        </div>
                                    </a>
                                </li>
                                <li class="hover-effect-opacity px-2 mx-n2">
                                    <a class="dropdown-item d-block mb-0" href="{{ route('second', ['home', 'single-store']) }}">
                                        <span class="fw-medium">Single Product Store</span>
                                        <span class="d-block fs-xs text-body-secondary">Single product / mono brand</span>
                                        <div class="d-none d-lg-block hover-effect-target position-absolute top-0 start-100 bg-body border border-light-subtle rounded rounded-start-0 transition-none invisible opacity-0 pt-2 px-2 ms-n2"
                                            style="width: 212px; height: calc(100% + 2px); margin-top: -1px">
                                            <img class="position-relative z-2 d-none-dark"
                                                src="/img/mega-menu/demo-preview/single-store-light.jpg"
                                                alt="Single Product Store">
                                            <img class="position-relative z-2 d-none d-block-dark"
                                                src="/img/mega-menu/demo-preview/single-store-dark.jpg"
                                                alt="Single Product Store">
                                            <span
                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none-dark"
                                                style="box-shadow: .875rem .5rem 2rem -.5rem #676f7b; opacity: .1"></span>
                                            <span
                                                class="position-absolute top-0 start-0 w-100 h-100 rounded rounded-start-0 d-none d-block-dark"
                                                style="box-shadow: .875rem .5rem 1.875rem -.5rem #080b12; opacity: .25"></span>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-item dropdown position-static py-lg-2 me-lg-n1 me-xl-0">
                            <a class="nav-link dropdown-toggle active" aria-current="page" href="#" role="button"
                                data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Shop</a>
                            <div class="dropdown-menu rounded-4 p-4" style="--cz-dropdown-spacer: .875rem">
                                <div class="d-flex flex-column flex-lg-row gap-4">
                                    <div style="min-width: 190px">
                                        <div class="h6 mb-2">Electronics Store</div>
                                        <ul class="nav flex-column gap-2 mt-0">
                                            <li class="d-flex w-100 pt-1">
                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                                    href="{{ route('second', ['shop', 'categories-electronics']) }}">Categories Page</a>
                                            </li>
                                            <li class="d-flex w-100 pt-1">
                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                                    href="{{ route('second', ['shop', 'catalog-electronics']) }}">Catalog with Side Filters</a>
                                            </li>
                                            <li class="d-flex w-100 pt-1">
                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                                    href="{{ route('second', ['shop', 'product-general-electronics']) }}">Product General Info</a>
                                            </li>
                                            <li class="d-flex w-100 pt-1">
                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                                    href="{{ route('second', ['shop', 'product-details-electronics']) }}">Product Details</a>
                                            </li>
                                            <li class="d-flex w-100 pt-1">
                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                                    href="{{ route('second', ['shop', 'product-reviews-electronics']) }}">Product Reviews</a>
                                            </li>
                                        </ul>
                                        <div class="h6 pt-4 mb-2">Fashion Store</div>
                                        <ul class="nav flex-column gap-2 mt-0">
                                            <li class="d-flex w-100 pt-1">
                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                                    href="{{ route('second', ['shop', 'catalog-fashion']) }}">Catalog with Side Filters</a>
                                            </li>
                                            <li class="d-flex w-100 pt-1">
                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                                    href="{{ route('second', ['shop', 'product-fashion']) }}">Product Page</a>
                                            </li>
                                        </ul>
                                        <div class="h6 pt-4 mb-2">Furniture Store</div>
                                        <ul class="nav flex-column gap-2 mt-0">
                                            <li class="d-flex w-100 pt-1">
                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                                    href="{{ route('second', ['shop', 'catalog-furniture']) }}">Catalog with Top Filters</a>
                                            </li>
                                            <li class="d-flex w-100 pt-1">
                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                                    href="{{ route('second', ['shop', 'product-furniture']) }}">Product Page</a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div style="min-width: 190px">
                                        <div class="h6 mb-2">Grocery Store</div>
                                        <ul class="nav flex-column gap-2 mt-0">
                                            <li class="d-flex w-100 pt-1">
                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                                    href="{{ route('second', ['shop', 'catalog-grocery']) }}">Catalog with Side Filters</a>
                                            </li>
                                            <li class="d-flex w-100 pt-1">
                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                                    href="{{ route('second', ['shop', 'product-grocery']) }}">Product Page</a>
                                            </li>
                                        </ul>
                                        <div class="h6 pt-4 mb-2">Marketplace</div>
                                        <ul class="nav flex-column gap-2 mt-0">
                                            <li class="d-flex w-100 pt-1">
                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                                    href="{{ route('second', ['shop', 'catalog-marketplace']) }}">Catalog with Top Filters</a>
                                            </li>
                                            <li class="d-flex w-100 pt-1">
                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                                    href="{{ route('second', ['shop', 'product-marketplace']) }}">Digital Product Page</a>
                                            </li>
                                            <li class="d-flex w-100 pt-1">
                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                                    href="{{ route('second', ['checkout', 'marketplace']) }}">Cart / Checkout</a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div style="min-width: 190px">
                                        <div class="h6 mb-2">Checkout v.1</div>
                                        <ul class="nav flex-column gap-2 mt-0">
                                            <li class="d-flex w-100 pt-1">
                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                                    href="{{ route('second', ['checkout', 'v1-cart']) }}">Shopping Cart</a>
                                            </li>
                                            <li class="d-flex w-100 pt-1">
                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                                    href="{{ route('second', ['checkout', 'v1-delivery-1']) }}">Delivery Info (Step 1)</a>
                                            </li>
                                            <li class="d-flex w-100 pt-1">
                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                                    href="{{ route('second', ['checkout', 'v1-delivery-2']) }}">Delivery Info (Step 2)</a>
                                            </li>
                                            <li class="d-flex w-100 pt-1">
                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                                    href="{{ route('second', ['checkout', 'v1-shipping']) }}">Shipping Address</a>
                                            </li>
                                            <li class="d-flex w-100 pt-1">
                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                                    href="{{ route('second', ['checkout', 'v1-payment']) }}">Payment</a>
                                            </li>
                                            <li class="d-flex w-100 pt-1">
                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                                    href="{{ route('second', ['checkout', 'v1-thankyou']) }}">Thank You Page</a>
                                            </li>
                                        </ul>
                                        <div class="h6 pt-4 mb-2">Checkout v.2</div>
                                        <ul class="nav flex-column gap-2 mt-0">
                                            <li class="d-flex w-100 pt-1">
                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                                    href="{{ route('second', ['checkout', 'v2-cart']) }}">Shopping Cart</a>
                                            </li>
                                            <li class="d-flex w-100 pt-1">
                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                                    href="{{ route('second', ['checkout', 'v2-delivery']) }}">Delivery Info</a>
                                            </li>
                                            <li class="d-flex w-100 pt-1">
                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                                    href="{{ route('second', ['checkout', 'v2-pickup']) }}">Pickup from Store</a>
                                            </li>
                                            <li class="d-flex w-100 pt-1">
                                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                                    href="{{ route('second', ['checkout', 'v2-thankyou']) }}">Thank You Page</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="nav-item dropdown py-lg-2 me-lg-n1 me-xl-0">
                            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                                data-bs-trigger="hover" data-bs-auto-close="outside" aria-expanded="false">Account</a>
                            <ul class="dropdown-menu" style="--cz-dropdown-spacer: .875rem">
                                <li class="dropend">
                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
                                        data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Auth
                                        Pages</a>
                                    <ul class="dropdown-menu">
                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'signin']) }}">Sign In</a></li>
                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'signup']) }}">Sign Up</a></li>
                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'password-recovery']) }}">Password
                                                Recovery</a></li>
                                    </ul>
                                </li>
                                <li class="dropend">
                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
                                        data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Shop
                                        User</a>
                                    <ul class="dropdown-menu">
                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'orders']) }}">Orders History</a></li>
                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'wishlist']) }}">Wishlist</a></li>
                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'payment']) }}">Payment Methods</a></li>
                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'reviews']) }}">My Reviews</a></li>
                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'info']) }}">Personal Info</a></li>
                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'addresses']) }}">Addresses</a></li>
                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'notifications']) }}">Notifications</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="dropend">
                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
                                        data-bs-toggle="dropdown" data-bs-trigger="hover"
                                        aria-expanded="false">Marketplace User</a>
                                    <ul class="dropdown-menu">
                                        <li><a class="dropdown-item"
                                                href="{{ route('second', ['account', 'marketplace-dashboard']) }}">Dashboard</a></li>
                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-products']) }}">Products</a>
                                        </li>
                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-sales']) }}">Sales</a></li>
                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-payouts']) }}">Payouts</a>
                                        </li>
                                        <li><a class="dropdown-item"
                                                href="{{ route('second', ['account', 'marketplace-purchases']) }}">Purchases</a></li>
                                        <li><a class="dropdown-item"
                                                href="{{ route('second', ['account', 'marketplace-favorites']) }}">Favorites</a></li>
                                        <li><a class="dropdown-item" href="{{ route('second', ['account', 'marketplace-settings']) }}">Settings</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-item dropdown py-lg-2 me-lg-n1 me-xl-0">
                            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                                data-bs-trigger="hover" data-bs-auto-close="outside" aria-expanded="false">Pages</a>
                            <ul class="dropdown-menu" style="--cz-dropdown-spacer: .875rem">
                                <li class="dropend">
                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
                                        data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">About</a>
                                    <ul class="dropdown-menu">
                                        <li><a class="dropdown-item" href="{{ route('second', ['about', 'v1']) }}">About v.1</a></li>
                                        <li><a class="dropdown-item" href="{{ route('second', ['about', 'v2']) }}">About v.2</a></li>
                                    </ul>
                                </li>
                                <li class="dropend">
                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
                                        data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Blog</a>
                                    <ul class="dropdown-menu">
                                        <li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid-v1']) }}">Grid View v.1</a></li>
                                        <li><a class="dropdown-item" href="{{ route('second', ['blog', 'grid-v2']) }}">Grid View v.2</a></li>
                                        <li><a class="dropdown-item" href="{{ route('second', ['blog', 'list']) }}">List View</a></li>
                                        <li><a class="dropdown-item" href="{{ route('second', ['blog', 'single-v1']) }}">Single Post v.1</a></li>
                                        <li><a class="dropdown-item" href="{{ route('second', ['blog', 'single-v2']) }}">Single Post v.2</a></li>
                                    </ul>
                                </li>
                                <li class="dropend">
                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
                                        data-bs-toggle="dropdown" data-bs-trigger="hover"
                                        aria-expanded="false">Contact</a>
                                    <ul class="dropdown-menu">
                                        <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v1']) }}">Contact v.1</a></li>
                                        <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v2']) }}">Contact v.2</a></li>
                                        <li><a class="dropdown-item" href="{{ route('second', ['contact', 'v3']) }}">Contact v.3</a></li>
                                    </ul>
                                </li>
                                <li class="dropend">
                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
                                        data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">Help
                                        Center</a>
                                    <ul class="dropdown-menu">
                                        <li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v1']) }}">Help Topics v.1</a></li>
                                        <li><a class="dropdown-item" href="{{ route('second', ['help', 'topics-v2']) }}">Help Topics v.2</a></li>
                                        <li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v1']) }}">Help Single
                                                Article v.1</a></li>
                                        <li><a class="dropdown-item" href="{{ route('second', ['help', 'single-article-v2']) }}">Help Single
                                                Article v.2</a></li>
                                    </ul>
                                </li>
                                <li class="dropend">
                                    <a class="dropdown-item dropdown-toggle" href="#!" role="button"
                                        data-bs-toggle="dropdown" data-bs-trigger="hover" aria-expanded="false">404
                                        Error</a>
                                    <ul class="dropdown-menu">
                                        <li><a class="dropdown-item" href="{{ route('second', ['404', 'electronics']) }}">404 Electronics</a></li>
                                        <li><a class="dropdown-item" href="{{ route('second', ['404', 'fashion']) }}">404 Fashion</a></li>
                                        <li><a class="dropdown-item" href="{{ route('second', ['404', 'furniture']) }}">404 Furniture</a></li>
                                        <li><a class="dropdown-item" href="{{ route('second', ['404', 'grocery']) }}">404 Grocery</a></li>
                                    </ul>
                                </li>
                                <li><a class="dropdown-item" href="{{ route('any', 'terms-and-conditions')}}">Terms &amp; Conditions</a>
                                </li>
                            </ul>
                        </li>                        
                    </ul>
                </div>

                <!-- Account button visible on screens < 768px wide (md breakpoint) -->
                <div class="offcanvas-header nav border-top px-0 py-3 mt-3 d-md-none">
                    <a class="nav-link justify-content-center w-100" href="{{ route('second', ['account', 'signin']) }}">
                        <i class="ci-user fs-lg opacity-60 ms-n2 me-2"></i>
                        Account
                    </a>
                </div>
            </nav>

            <!-- Button group -->
            <div class="d-flex align-items-center">

                <!-- Theme switcher (light/dark/auto) -->
                <div class="dropdown">
                    <button type="button"
                        class="theme-switcher btn btn-icon btn-lg btn-outline-secondary fs-lg border-0 rounded-circle animate-scale"
                        data-bs-toggle="dropdown" aria-expanded="false" aria-label="Toggle theme (light)">
                        <span class="theme-icon-active d-flex animate-target">
                            <i class="ci-sun"></i>
                        </span>
                    </button>
                    <ul class="dropdown-menu" style="--cz-dropdown-min-width: 9rem">
                        <li>
                            <button type="button" class="dropdown-item active" data-bs-theme-value="light"
                                aria-pressed="true">
                                <span class="theme-icon d-flex fs-base me-2">
                                    <i class="ci-sun"></i>
                                </span>
                                <span class="theme-label">Light</span>
                                <i class="item-active-indicator ci-check ms-auto"></i>
                            </button>
                        </li>
                        <li>
                            <button type="button" class="dropdown-item" data-bs-theme-value="dark"
                                aria-pressed="false">
                                <span class="theme-icon d-flex fs-base me-2">
                                    <i class="ci-moon"></i>
                                </span>
                                <span class="theme-label">Dark</span>
                                <i class="item-active-indicator ci-check ms-auto"></i>
                            </button>
                        </li>
                        <li>
                            <button type="button" class="dropdown-item" data-bs-theme-value="auto"
                                aria-pressed="false">
                                <span class="theme-icon d-flex fs-base me-2">
                                    <i class="ci-auto"></i>
                                </span>
                                <span class="theme-label">Auto</span>
                                <i class="item-active-indicator ci-check ms-auto"></i>
                            </button>
                        </li>
                    </ul>
                </div>

                <!-- Search toggle button -->
                <button type="button"
                    class="btn btn-icon btn-lg fs-xl btn-outline-secondary border-0 rounded-circle animate-shake"
                    data-bs-toggle="offcanvas" data-bs-target="#searchBox" aria-controls="searchBox"
                    aria-label="Toggle search bar">
                    <i class="ci-search animate-target"></i>
                </button>

                <!-- Account button visible on screens > 768px wide (md breakpoint) -->
                <a class="btn btn-icon btn-lg fs-lg btn-outline-secondary border-0 rounded-circle animate-shake d-none d-md-inline-flex"
                    href="{{ route('second', ['account', 'signin']) }}">
                    <i class="ci-user animate-target"></i>
                    <span class="visually-hidden">Account</span>
                </a>

                <!-- Cart button -->
                <button type="button"
                    class="btn btn-icon btn-lg fs-xl btn-outline-secondary position-relative border-0 rounded-circle animate-scale"
                    data-bs-toggle="offcanvas" data-bs-target="#shoppingCart" aria-controls="shoppingCart"
                    aria-label="Shopping cart">
                    <span class="position-absolute top-0 start-100 badge fs-xs text-bg-primary rounded-pill mt-1 ms-n4 z-2"
                        style="--cz-badge-padding-y: .25em; --cz-badge-padding-x: .42em">3</span>
                    <i class="ci-shopping-bag animate-target me-1"></i>
                </button>
            </div>
        </div>
    </header>

    <main class="content-wrapper">

        <!-- Product details -->
        <section class="container pb-2 pb-sm-3 pb-md-4 pb-lg-5 mb-xxl-3">

            <!-- Breadcrumb -->
            <ol class="breadcrumb pt-3 mt-2 mt-md-3 mb-md-4">
                <li class="breadcrumb-item"><a href="{{ route('second', ['home', 'marketplace']) }}">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('second', ['shop', 'catalog-marketplace']) }}">Catalog</a></li>
                <li class="breadcrumb-item active" aria-current="page">Digital product page</li>
            </ol>

            <!-- Page title + Product meta -->
            <div class="row">
                <div class="col-lg-8 col-xl-9">
                    <h1 class="h3 mb-sm-4">A stunning set of tablet pro mockups for professionals</h1>

                    <!-- Product meta + Action buttons -->
                    <div class="d-flex flex-column flex-md-row align-items-md-center gap-3 gap-md-4">
                        <div class="nav align-items-center gap-2 fs-sm">
                            <a class="nav-link text-body gap-1 p-0" href="{{ route('second', ['shop', 'catalog-marketplace']) }}">
                                <div class="flex-shrink-0 border rounded-circle" style="width: 32px">
                                    <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
                                        <img src="/img/shop/marketplace/single/avatar.png" alt="Avatar">
                                    </div>
                                </div>
                                Coderthemes
                            </a>
                            <div class="text-body-secondary">in</div>
                            <a class="nav-link text-body p-0" href="{{ route('second', ['shop', 'catalog-marketplace']) }}">Mockups</a>
                        </div>
                        <div class="d-flex justify-content-between flex-grow-1 gap-4">

                            <!-- Number of sales badge -->
                            <span class="badge text-info bg-info-subtle d-inline-flex align-items-center fs-sm">
                                <i class="ci-download fs-base me-1"></i>
                                65 sales
                            </span>

                            <!-- Likes + Comments + Sharing -->
                            <div class="d-flex gap-2">
                                <button type="button" class="btn btn-sm btn-secondary rounded-pill animate-pulse">
                                    <i class="ci-heart animate-target fs-sm ms-n1 me-1"></i>
                                    12
                                </button>
                                <a class="btn btn-sm btn-secondary rounded-pill animate-scale" href="#comments">
                                    <i class="ci-message-circle animate-target fs-sm ms-n1 me-1"></i>
                                    3
                                </a>
                                <div class="dropdown">
                                    <button type="button"
                                        class="btn btn-icon btn-sm btn-secondary animate-scale rounded-circle"
                                        data-bs-toggle="dropdown" aria-expanded="false" aria-label="Share">
                                        <i class="ci-share-2 animate-target fs-sm"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end" style="--cz-dropdown-min-width: 8.5rem">
                                        <li>
                                            <a class="dropdown-item" href="#!">
                                                <i class="ci-facebook fs-base me-2"></i>
                                                Facebook
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="#!">
                                                <i class="ci-instagram fs-base me-2"></i>
                                                Instagram
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="#">
                                                <i class="ci-linkedin fs-base me-2"></i>
                                                LinkedIn
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row pb-5 pt-4">

                <!-- Product gallery + Description -->
                <div class="col-lg-8 col-xl-9">

                    <!-- Gallery -->
                    <div class="vstack gap-3">
                        <a class="hover-effect-scale hover-effect-opacity position-relative d-flex rounded-4 overflow-hidden"
                            href="/img/shop/marketplace/single/01.jpg" 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 hover-effect-target bg-body-tertiary"
                                style="--cz-aspect-ratio: calc(640 / 966 * 100%)">
                                <img src="/img/shop/marketplace/single/01.jpg" alt="Image">
                            </div>
                        </a>
                        <div class="row row-cols-2 g-3">
                            <div class="col">
                                <a class="hover-effect-scale hover-effect-opacity position-relative d-flex rounded-4 overflow-hidden"
                                    href="/img/shop/marketplace/single/02.jpg" 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 bg-body-tertiary">
                                        <img src="/img/shop/marketplace/single/th02.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/marketplace/single/03.jpg" 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 bg-body-tertiary">
                                        <img src="/img/shop/marketplace/single/th03.jpg" alt="Image">
                                    </div>
                                </a>
                            </div>
                        </div>
                        <a class="hover-effect-scale hover-effect-opacity position-relative d-flex rounded-4 overflow-hidden"
                            href="/img/shop/marketplace/single/04.jpg" 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 hover-effect-target bg-body-tertiary"
                                style="--cz-aspect-ratio: calc(640 / 966 * 100%)">
                                <img src="/img/shop/marketplace/single/04.jpg" alt="Image">
                            </div>
                        </a>
                    </div>

                    <!-- Product info visible on screens < 992px wide (lg breakpoint) -->
                    <h2 class="h4 d-lg-none pt-5 mt-md-2 mb-lg-4">Product info</h2>
                    <table class="table table-borderless table-sm d-lg-none mb-0">
                        <tbody>
                            <tr>
                                <td class="text-body-secondary ps-0">Format</td>
                                <td class="text-dark-emphasis pe-0">
                                    <div class="d-flex gap-3">
                                        <div class="ratio ratio-1x1 d-flex flex-shrink-0" style="width: 20px">
                                            <img src="/img/home/marketplace/formats/figma.png" alt="Figma">
                                        </div>
                                        <div class="ratio ratio-1x1 d-flex flex-shrink-0" style="width: 20px">
                                            <img src="/img/home/marketplace/formats/photoshop.png" alt="Photoshop">
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="text-body-secondary ps-0">Last update</td>
                                <td class="text-dark-emphasis pe-0">21 October 2024</td>
                            </tr>
                            <tr>
                                <td class="text-body-secondary ps-0">Published</td>
                                <td class="text-dark-emphasis pe-0">10 August 2024</td>
                            </tr>
                            <tr>
                                <td class="text-body-secondary ps-0">High resolution</td>
                                <td class="text-dark-emphasis pe-0">Yes</td>
                            </tr>
                            <tr>
                                <td class="text-body-secondary ps-0">File type</td>
                                <td class="text-dark-emphasis pe-0">FIG, PSD, JPG</td>
                            </tr>
                            <tr>
                                <td class="text-body-secondary ps-0">File size</td>
                                <td class="text-dark-emphasis pe-0">140.8 MB</td>
                            </tr>
                        </tbody>
                    </table>

                    <!-- Overview -->
                    <h2 class="h4 pt-5 mt-md-2 mb-lg-4">Overview</h2>
                    <p>Elevate your presentations and design projects with this meticulously crafted set of Tablet Pro
                        Mockups. Designed with professionals in mind, these mockups are perfect for showcasing your apps,
                        websites, or digital products in a sleek and modern way. Here's what makes this set stand out.</p>
                    <p class="mb-0">This Tablet Pro Mockup Set is an essential tool for designers who want to present
                        their work professionally and impress clients or audiences with stunning, high-quality visuals.</p>

                    <!-- Highlights -->
                    <h2 class="h4 pt-5 mt-md-2 mb-lg-4">Highlights</h2>
                    <ul class="mb-0">
                        <li>The set includes a variety of angles and perspectives</li>
                        <li>Easily insert your designs into the mockups using smart objects in Adobe Photoshop</li>
                        <li>These mockups feature professionally crafted lighting and shadow effects</li>
                        <li>The backgrounds of these mockups are fully customizable</li>
                        <li>Choose from different color options for the tablet device</li>
                    </ul>

                    <!-- Tags visible on screens < 992px wide (lg breakpoint) -->
                    <h2 class="h4 d-lg-none pt-5 mt-md-2 mb-lg-4">Tags</h2>
                    <div class="d-flex d-lg-none flex-wrap gap-2 mt-n1">
                        <a class="badge fs-sm text-body-emphasis bg-body-secondary text-decoration-none mt-1 me-1"
                            href="#!">mockup tablet</a>
                        <a class="badge fs-sm text-body-emphasis bg-body-secondary text-decoration-none mt-1 me-1"
                            href="#!">device mockup</a>
                        <a class="badge fs-sm text-body-emphasis bg-body-secondary text-decoration-none mt-1 me-1"
                            href="#!">screen</a>
                        <a class="badge fs-sm text-body-emphasis bg-body-secondary text-decoration-none mt-1 me-1"
                            href="#!">application</a>
                        <a class="badge fs-sm text-body-emphasis bg-body-secondary text-decoration-none mt-1 me-1"
                            href="#!">app mockup</a>
                        <a class="badge fs-sm text-body-emphasis bg-body-secondary text-decoration-none mt-1 me-1"
                            href="#!">mobile</a>
                        <a class="badge fs-sm text-body-emphasis bg-body-secondary text-decoration-none mt-1 me-1"
                            href="#!">ui/ux</a>
                        <a class="badge fs-sm text-body-emphasis bg-body-secondary text-decoration-none mt-1 me-1"
                            href="#!">placeholder</a>
                    </div>

                    <!-- Comments -->
                    <div class="d-flex align-items-center gap-3 pt-5 mt-md-2 mb-3" id="comments"
                        style="scroll-margin-top: 60px">
                        <h2 class="h4 mb-0">Comments (3)</h2>
                        <button type="button" class="btn btn-outline-secondary rounded-pill ms-auto"
                            data-bs-toggle="modal" data-bs-target="#commentForm">
                            <i class="ci-edit-3 fs-base ms-n1 me-2"></i>
                            Leave a comment
                        </button>
                    </div>
                    <div class="bg-body-tertiary rounded-4 p-4 p-sm-5">
                        <div class="vstack gap-3 gap-md-4 mt-n3">

                            <!-- Comment -->
                            <div class="mt-3">
                                <div class="d-flex align-items-center justify-content-between gap-3 mb-3">
                                    <div class="d-flex align-items-center">
                                        <div class="ratio ratio-1x1 flex-shrink-0 bg-body-secondary rounded-circle overflow-hidden"
                                            style="width: 40px">
                                            <img src="/img/shop/marketplace/single/comments/01.jpg" alt="Avatar">
                                        </div>
                                        <div class="ps-2 ms-1">
                                            <div class="fs-sm fw-semibold text-dark-emphasis mb-1">Randy Walker</div>
                                            <div class="fs-xs text-body-secondary">October 28, 2024</div>
                                        </div>
                                    </div>
                                    <div class="d-flex gap-2">
                                        <button type="button"
                                            class="btn btn-sm btn-secondary bg-body border-0 animate-pulse rounded-pill">
                                            <i class="ci-heart animate-target fs-sm ms-n1 me-1"></i>
                                            12
                                        </button>
                                        <button type="button"
                                            class="btn btn-icon btn-sm btn-secondary bg-body border-0 animate-slide-end rounded-circle"
                                            aria-label="Reply">
                                            <i class="ci-corner-up-right animate-target fs-sm"></i>
                                        </button>
                                    </div>
                                </div>
                                <p class="fs-sm mb-0">This set of Tablet Pro mockups exceeded my expectations! The high
                                    resolution and attention to detail make my designs look incredibly polished. The smart
                                    objects make editing a breeze, and the realistic lighting adds a professional touch to
                                    all my presentations. Highly recommend it for anyone serious about their design work.
                                </p>
                            </div>

                            <!-- Comment -->
                            <div class="mt-3">
                                <div class="d-flex align-items-center justify-content-between gap-3 mb-3">
                                    <div class="d-flex align-items-center">
                                        <div class="ratio ratio-1x1 flex-shrink-0 bg-body-secondary rounded-circle overflow-hidden"
                                            style="width: 40px">
                                            <img src="/img/shop/marketplace/single/comments/02.jpg" alt="Avatar">
                                        </div>
                                        <div class="ps-2 ms-1">
                                            <div class="fs-sm fw-semibold text-dark-emphasis mb-1">Daniel Adams</div>
                                            <div class="fs-xs text-body-secondary">August 15, 2024</div>
                                        </div>
                                    </div>
                                    <div class="d-flex gap-2">
                                        <button type="button"
                                            class="btn btn-sm btn-secondary bg-body border-0 animate-pulse rounded-pill">
                                            <i class="ci-heart animate-target fs-sm ms-n1 me-1"></i>
                                            6
                                        </button>
                                        <button type="button"
                                            class="btn btn-icon btn-sm btn-secondary bg-body border-0 animate-slide-end rounded-circle"
                                            aria-label="Reply">
                                            <i class="ci-corner-up-right animate-target fs-sm"></i>
                                        </button>
                                    </div>
                                </div>
                                <p class="fs-sm mb-0">I've used a lot of mockups, but these are some of the best. The
                                    variety of angles and perspectives really helped me showcase my app from different
                                    viewpoints. Plus, the customizable backgrounds are a fantastic feature—I could easily
                                    match the mockups to my brand colors. A must-have for designers!</p>
                            </div>

                            <!-- Comment -->
                            <div class="mt-3">
                                <div class="d-flex align-items-center justify-content-between gap-3 mb-3">
                                    <div class="d-flex align-items-center">
                                        <div class="ratio ratio-1x1 flex-shrink-0 bg-body-secondary rounded-circle overflow-hidden"
                                            style="width: 40px">
                                            <img src="/img/shop/marketplace/single/comments/03.jpg" alt="Avatar">
                                        </div>
                                        <div class="ps-2 ms-1">
                                            <div class="fs-sm fw-semibold text-dark-emphasis mb-1">Darrell Steward</div>
                                            <div class="fs-xs text-body-secondary">June 2, 2024</div>
                                        </div>
                                    </div>
                                    <div class="d-flex gap-2">
                                        <button type="button"
                                            class="btn btn-sm btn-secondary bg-body border-0 animate-pulse rounded-pill">
                                            <i class="ci-heart animate-target fs-sm ms-n1 me-1"></i>
                                            19
                                        </button>
                                        <button type="button"
                                            class="btn btn-icon btn-sm btn-secondary bg-body border-0 animate-slide-end rounded-circle"
                                            aria-label="Reply">
                                            <i class="ci-corner-up-right animate-target fs-sm"></i>
                                        </button>
                                    </div>
                                </div>
                                <p class="fs-sm mb-0">The quality of these mockups is superb, and they're incredibly easy
                                    to use. The only thing I'd love to see is a few more device color options to match
                                    different product lines. Other than that, it's a fantastic set that's well worth the
                                    investment.</p>
                            </div>
                        </div>
                    </div>
                </div>


                <!-- Sidebar: Licenses + Info visible on screens > 991px wide (lg breakpoint) -->
                <aside class="col-lg-4 col-xl-3 d-none d-lg-block">
                    <div class="d-none d-lg-block" style="margin-top: -110px"></div>
                    <div class="sticky-lg-top">
                        <div class="d-none d-lg-block" style="padding-top: 110px"></div>

                        <!-- License selection + Add to cart button -->
                        <div class="border rounded-4 py-2 px-4 mb-4">
                            <div class="accordion accordion-flush" id="licenses">
                                <div class="accordion-item">
                                    <div class="accordion-header d-flex justify-content-between align-items-center py-3">
                                        <div class="form-check m-0 collapsed" data-bs-toggle="collapse"
                                            data-bs-target="#standard-license">
                                            <input class="form-check-input" type="radio" name="license"
                                                id="license-std" checked>
                                            <label class="form-check-label fw-medium text-dark-emphasis"
                                                for="license-std">Standard license</label>
                                        </div>
                                        <div class="h6 mb-0">$16</div>
                                    </div>
                                    <div class="accordion-collapse collapse show" id="standard-license"
                                        data-bs-parent="#licenses">
                                        <div class="accordion-body py-0 pb-2">
                                            <ul class="list-unstyled fs-sm">
                                                <li class="d-flex align-items-center">
                                                    <i class="ci-check-circle text-info me-2"></i>
                                                    <span class="fs-ms">Quality verified</span>
                                                </li>
                                                <li class="d-flex align-items-center">
                                                    <i class="ci-check-circle text-info me-2"></i>
                                                    <span class="fs-ms">Use for a single project</span>
                                                </li>
                                                <li class="d-flex align-items-center">
                                                    <i class="ci-check-circle text-info me-2"></i>
                                                    <span class="fs-ms">Non-paying users only</span>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <div class="accordion-header d-flex justify-content-between align-items-center py-3">
                                        <div class="form-check m-0" data-bs-toggle="collapse"
                                            data-bs-target="#extended-license">
                                            <input type="radio" class="form-check-input" name="license"
                                                id="license-ext">
                                            <label class="form-check-label fw-medium text-dark-emphasis"
                                                for="license-ext">Extended license</label>
                                        </div>
                                        <div class="h6 mb-0">$99</div>
                                    </div>
                                    <div class="accordion-collapse collapse border-0" id="extended-license"
                                        data-bs-parent="#licenses">
                                        <div class="accordion-body py-0 pb-2">
                                            <ul class="list-unstyled fs-sm">
                                                <li class="d-flex align-items-center">
                                                    <i class="ci-check-circle text-info me-2"></i>
                                                    <span class="fs-ms">Quality verified</span>
                                                </li>
                                                <li class="d-flex align-items-center">
                                                    <i class="ci-check-circle text-info me-2"></i>
                                                    <span class="fs-ms">Use for a single project</span>
                                                </li>
                                                <li class="d-flex align-items-center">
                                                    <i class="ci-check-circle text-info me-2"></i>
                                                    <span class="fs-ms">Paying users allowed</span>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <button type="button" class="btn btn-lg btn-dark w-100 rounded-pill animate-scale mt-1 mb-3">
                                <i class="ci-shopping-bag fs-lg animate-target me-2 ms-n1"></i>
                                Add to cart
                            </button>
                        </div>

                        <!-- Product info -->
                        <div class="ps-4 pe-3 mb-4">
                            <h4 class="h6 pb-2 mb-1">Product info</h4>
                            <table class="table table-borderless table-sm fs-sm mb-0">
                                <tbody>
                                    <tr>
                                        <td class="text-body-secondary ps-0">Format</td>
                                        <td class="text-dark-emphasis pe-0">
                                            <div class="d-flex gap-3">
                                                <div class="ratio ratio-1x1 d-flex flex-shrink-0" style="width: 18px">
                                                    <img src="/img/home/marketplace/formats/figma.png" alt="Figma">
                                                </div>
                                                <div class="ratio ratio-1x1 d-flex flex-shrink-0" style="width: 18px">
                                                    <img src="/img/home/marketplace/formats/photoshop.png"
                                                        alt="Photoshop">
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-body-secondary ps-0">Last update</td>
                                        <td class="text-dark-emphasis pe-0">21 October 2024</td>
                                    </tr>
                                    <tr>
                                        <td class="text-body-secondary ps-0">Published</td>
                                        <td class="text-dark-emphasis pe-0">10 August 2024</td>
                                    </tr>
                                    <tr>
                                        <td class="text-body-secondary ps-0">High resolution</td>
                                        <td class="text-dark-emphasis pe-0">Yes</td>
                                    </tr>
                                    <tr>
                                        <td class="text-body-secondary ps-0">File type</td>
                                        <td class="text-dark-emphasis pe-0">FIG, PSD, JPG</td>
                                    </tr>
                                    <tr>
                                        <td class="text-body-secondary ps-0">File size</td>
                                        <td class="text-dark-emphasis pe-0">140.8 MB</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <!-- Tags -->
                        <div class="ps-4 pe-3">
                            <h4 class="h6 pb-2 mb-1">Tags</h4>
                            <div class="d-flex flex-wrap gap-2 mt-n1">
                                <a class="badge text-body-emphasis bg-body-secondary text-decoration-none mt-1 me-1"
                                    href="#!">mockup tablet</a>
                                <a class="badge text-body-emphasis bg-body-secondary text-decoration-none mt-1 me-1"
                                    href="#!">device mockup</a>
                                <a class="badge text-body-emphasis bg-body-secondary text-decoration-none mt-1 me-1"
                                    href="#!">screen</a>
                                <a class="badge text-body-emphasis bg-body-secondary text-decoration-none mt-1 me-1"
                                    href="#!">application</a>
                                <a class="badge text-body-emphasis bg-body-secondary text-decoration-none mt-1 me-1"
                                    href="#!">app mockup</a>
                                <a class="badge text-body-emphasis bg-body-secondary text-decoration-none mt-1 me-1"
                                    href="#!">mobile</a>
                                <a class="badge text-body-emphasis bg-body-secondary text-decoration-none mt-1 me-1"
                                    href="#!">ui/ux</a>
                                <a class="badge text-body-emphasis bg-body-secondary text-decoration-none mt-1 me-1"
                                    href="#!">placeholder</a>
                            </div>
                        </div>
                    </div>
                </aside>
            </div>
        </section>


        <!-- Similar products carousel -->
        <section class="container pb-2 pb-sm-3 pb-md-4 pb-lg-5 mb-xxl-3">
            <div class="d-flex align-items-center justify-content-between gap-4 pb-3 mb-1 mb-sm-2 mb-md-3">
                <h2 class="h3 mb-0">You may like this</h2>

                <!-- Prev/next buttons -->
                <div class="d-flex gap-2">
                    <button type="button"
                        class="btn btn-icon btn-outline-secondary animate-slide-start bg-body rounded-circle me-1"
                        id="prod-prev" aria-label="Prev">
                        <i class="ci-chevron-left fs-lg animate-target"></i>
                    </button>
                    <button type="button"
                        class="btn btn-icon btn-outline-secondary animate-slide-end bg-body rounded-circle" id="prod-next"
                        aria-label="Next">
                        <i class="ci-chevron-right fs-lg animate-target"></i>
                    </button>
                </div>
            </div>

            <!-- Carousel -->
            <div class="swiper pb-5"
                data-swiper='{
          "slidesPerView": 2,
          "spaceBetween": 16,
          "loop": true,
          "navigation": {
            "prevEl": "#prod-prev",
            "nextEl": "#prod-next"
          },
          "breakpoints": {
            "500": {
              "slidesPerView": 2,
              "spaceBetween": 24
            },
            "768": {
              "slidesPerView": 3,
              "spaceBetween": 24
            },
            "992": {
              "slidesPerView": 4,
              "spaceBetween": 16
            },
            "1200": {
              "slidesPerView": 4,
              "spaceBetween": 24
            }
          }
        }'>
                <div class="swiper-wrapper">

                    <!-- Product -->
                    <div class="swiper-slide h-auto">
                        <div
                            class="card h-100 animate-underline hover-effect-opacity hover-effect-scale rounded-4 overflow-hidden">
                            <div class="card-img-top position-relative bg-body-tertiary overflow-hidden">
                                <a class="ratio d-block hover-effect-target"
                                    style="--cz-aspect-ratio: calc(220 / 304 * 100%)" href="#!">
                                    <img src="/img/shop/marketplace/07.jpg" alt="Image">
                                </a>
                                <div
                                    class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
                                    <button type="button"
                                        class="btn btn-sm btn-icon btn-light bg-light border-0 rounded-circle animate-pulse"
                                        aria-label="Add to wishlist">
                                        <i class="ci-heart animate-target fs-sm"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="card-body p-3">
                                <div class="d-flex min-w-0 justify-content-between gap-2 gap-sm-3 mb-2">
                                    <h3 class="nav min-w-0 mb-0">
                                        <a class="nav-link text-truncate p-0" href="#!">
                                            <span class="text-truncate animate-target">Isometric smartphone mockups</span>
                                        </a>
                                    </h3>
                                    <div class="h6 mb-0">$24</div>
                                </div>
                                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
                                    <div class="nav align-items-center gap-1 fs-xs">
                                        <a class="nav-link fs-xs text-body gap-1 p-0" href="#!">
                                            <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
                                                <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
                                                    <img src="/img/shop/marketplace/avatars/03.png" alt="Avatar">
                                                </div>
                                            </div>
                                            MD Studio
                                        </a>
                                        <div class="text-body-secondary">in</div>
                                        <a class="nav-link fs-xs text-body p-0" href="#!">Mockups</a>
                                    </div>
                                    <div class="fs-xs text-body-secondary">95 sales</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Product -->
                    <div class="swiper-slide h-auto">
                        <div
                            class="card h-100 animate-underline hover-effect-opacity hover-effect-scale rounded-4 overflow-hidden">
                            <div class="card-img-top position-relative bg-body-tertiary overflow-hidden">
                                <a class="ratio d-block hover-effect-target"
                                    style="--cz-aspect-ratio: calc(220 / 304 * 100%)" href="#!">
                                    <img src="/img/shop/marketplace/08.jpg" alt="Image">
                                </a>
                                <div
                                    class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
                                    <button type="button"
                                        class="btn btn-sm btn-icon btn-light bg-light border-0 rounded-circle animate-pulse"
                                        aria-label="Add to wishlist">
                                        <i class="ci-heart animate-target fs-sm"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="card-body p-3">
                                <div class="d-flex min-w-0 justify-content-between gap-2 gap-sm-3 mb-2">
                                    <h3 class="nav min-w-0 mb-0">
                                        <a class="nav-link text-truncate p-0" href="#!">
                                            <span class="text-truncate animate-target">iPhone 15 pro mockups</span>
                                        </a>
                                    </h3>
                                    <div class="h6 mb-0">$19</div>
                                </div>
                                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
                                    <div class="nav align-items-center gap-1 fs-xs">
                                        <a class="nav-link fs-xs text-body gap-1 p-0" href="#!">
                                            <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
                                                <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
                                                    <img src="/img/shop/marketplace/avatars/01.png" alt="Avatar">
                                                </div>
                                            </div>
                                            Coderthemes
                                        </a>
                                        <div class="text-body-secondary">in</div>
                                        <a class="nav-link fs-xs text-body p-0" href="#!">Mockups</a>
                                    </div>
                                    <div class="fs-xs text-body-secondary">47 sales</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Product -->
                    <div class="swiper-slide h-auto">
                        <div
                            class="card h-100 animate-underline hover-effect-opacity hover-effect-scale rounded-4 overflow-hidden">
                            <div class="card-img-top position-relative bg-body-tertiary overflow-hidden">
                                <a class="ratio d-block hover-effect-target"
                                    style="--cz-aspect-ratio: calc(220 / 304 * 100%)" href="#!">
                                    <img src="/img/shop/marketplace/02.jpg" alt="Image">
                                </a>
                                <div
                                    class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
                                    <button type="button"
                                        class="btn btn-sm btn-icon btn-light bg-light border-0 rounded-circle animate-pulse"
                                        aria-label="Add to wishlist">
                                        <i class="ci-heart animate-target fs-sm"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="card-body p-3">
                                <div class="d-flex min-w-0 justify-content-between gap-2 gap-sm-3 mb-2">
                                    <h3 class="nav min-w-0 mb-0">
                                        <a class="nav-link text-truncate p-0" href="#!">
                                            <span class="text-truncate animate-target">Smart watches series 9 mockup</span>
                                        </a>
                                    </h3>
                                    <div class="h6 mb-0">$15</div>
                                </div>
                                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
                                    <div class="nav align-items-center gap-1 fs-xs">
                                        <a class="nav-link fs-xs text-body gap-1 p-0" href="#!">
                                            <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
                                                <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
                                                    <img src="/img/shop/marketplace/avatars/03.png" alt="Avatar">
                                                </div>
                                            </div>
                                            MD Studio
                                        </a>
                                        <div class="text-body-secondary">in</div>
                                        <a class="nav-link fs-xs text-body p-0" href="#!">Mockups</a>
                                    </div>
                                    <div class="fs-xs text-body-secondary">132 sales</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Product -->
                    <div class="swiper-slide h-auto">
                        <div
                            class="card h-100 animate-underline hover-effect-opacity hover-effect-scale rounded-4 overflow-hidden">
                            <div class="card-img-top position-relative bg-body-tertiary overflow-hidden">
                                <a class="ratio d-block hover-effect-target"
                                    style="--cz-aspect-ratio: calc(220 / 304 * 100%)" href="#!">
                                    <img src="/img/shop/marketplace/06.jpg" alt="Image">
                                </a>
                                <div
                                    class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
                                    <button type="button"
                                        class="btn btn-sm btn-icon btn-light bg-light border-0 rounded-circle animate-pulse"
                                        aria-label="Add to wishlist">
                                        <i class="ci-heart animate-target fs-sm"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="card-body p-3">
                                <div class="d-flex min-w-0 justify-content-between gap-2 gap-sm-3 mb-2">
                                    <h3 class="nav min-w-0 mb-0">
                                        <a class="nav-link text-truncate p-0" href="#!">
                                            <span class="text-truncate animate-target">A stunning set of tablet pro
                                                mockups</span>
                                        </a>
                                    </h3>
                                    <div class="h6 mb-0">$18</div>
                                </div>
                                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
                                    <div class="nav align-items-center gap-1 fs-xs">
                                        <a class="nav-link fs-xs text-body gap-1 p-0" href="#!">
                                            <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
                                                <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
                                                    <img src="/img/shop/marketplace/avatars/04.png" alt="Avatar">
                                                </div>
                                            </div>
                                            Fireby
                                        </a>
                                        <div class="text-body-secondary">in</div>
                                        <a class="nav-link fs-xs text-body p-0" href="#!">Mockups</a>
                                    </div>
                                    <div class="fs-xs text-body-secondary">33 sales</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Product -->
                    <div class="swiper-slide h-auto">
                        <div
                            class="card h-100 animate-underline hover-effect-opacity hover-effect-scale rounded-4 overflow-hidden">
                            <div class="card-img-top position-relative bg-body-tertiary overflow-hidden">
                                <a class="ratio d-block hover-effect-target"
                                    style="--cz-aspect-ratio: calc(220 / 304 * 100%)" href="#!">
                                    <img src="/img/shop/marketplace/13.jpg" alt="Image">
                                </a>
                                <div
                                    class="position-absolute top-0 end-0 z-2 hover-effect-target opacity-0 pt-1 pt-sm-0 pe-1 pe-sm-0 mt-2 mt-sm-3 me-2 me-sm-3">
                                    <button type="button"
                                        class="btn btn-sm btn-icon btn-light bg-light border-0 rounded-circle animate-pulse"
                                        aria-label="Add to wishlist">
                                        <i class="ci-heart animate-target fs-sm"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="card-body p-3">
                                <div class="d-flex min-w-0 justify-content-between gap-2 gap-sm-3 mb-2">
                                    <h3 class="nav min-w-0 mb-0">
                                        <a class="nav-link text-truncate p-0" href="#!">
                                            <span class="text-truncate animate-target">Multi device mockup PSD</span>
                                        </a>
                                    </h3>
                                    <div class="h6 mb-0">$27</div>
                                </div>
                                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
                                    <div class="nav align-items-center gap-1 fs-xs">
                                        <a class="nav-link fs-xs text-body gap-1 p-0" href="#!">
                                            <div class="flex-shrink-0 border rounded-circle" style="width: 22px">
                                                <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
                                                    <img src="/img/shop/marketplace/avatars/01.png" alt="Avatar">
                                                </div>
                                            </div>
                                            Coderthemes
                                        </a>
                                        <div class="text-body-secondary">in</div>
                                        <a class="nav-link fs-xs text-body p-0" href="#!">Mockups</a>
                                    </div>
                                    <div class="fs-xs text-body-secondary">43 sales</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    @include('layouts.partials/footer3')
@endsection

@section('scripts')
@endsection
