代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cartzilla | Shop list right sidebar</title>
<!-- SEO Meta Tags-->
<meta name="description" content="Cartzilla - Bootstrap E-commerce Template">
<meta name="keywords" content="bootstrap, shop, e-commerce, market, modern, responsive, business, mobile, bootstrap, html5, css3, js, gallery, slider, touch, creative, clean">
<meta name="author" content="Createx Studio">
<!-- Viewport-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Favicon and Touch Icons-->
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link rel="mask-icon" color="#fe6a6a" href="safari-pinned-tab.svg">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">
<!-- Vendor Styles including: Font Icons, Plugins, etc.-->
<link rel="stylesheet" media="screen" href="vendor/simplebar/dist/simplebar.min.css"/>
<link rel="stylesheet" media="screen" href="vendor/tiny-slider/dist/tiny-slider.css"/>
<link rel="stylesheet" media="screen" href="vendor/nouislider/distribute/nouislider.min.css"/>
<link rel="stylesheet" media="screen" href="vendor/drift-zoom/dist/drift-basic.min.css"/>
<!-- Main Theme Styles + Bootstrap-->
<link rel="stylesheet" media="screen" href="css/theme.min.css">
<!-- Google Tag Manager-->
<script>
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-WKV3GT5');
</script>
</head>
<!-- Body-->
<body class="handheld-toolbar-enabled">
<!-- Google Tag Manager (noscript)-->
<noscript>
<iframe src="//www.googletagmanager.com/ns.html?id=GTM-WKV3GT5" height="0" width="0" style="display: none; visibility: hidden;"></iframe>
</noscript>
<!-- Sign in / sign up modal-->
<div class="modal fade" id="signin-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header bg-secondary">
<ul class="nav nav-tabs card-header-tabs" role="tablist">
<li class="nav-item"><a class="nav-link fw-medium active" href="#signin-tab" data-bs-toggle="tab" role="tab" aria-selected="true"><i class="ci-unlocked me-2 mt-n1"></i>Sign in</a></li>
<li class="nav-item"><a class="nav-link fw-medium" href="#signup-tab" data-bs-toggle="tab" role="tab" aria-selected="false"><i class="ci-user me-2 mt-n1"></i>Sign up</a></li>
</ul>
<button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body tab-content py-4">
<form class="needs-validation tab-pane fade show active" autocomplete="off" novalidate id="signin-tab">
<div class="mb-3">
<label class="form-label" for="si-email">Email address</label>
<div class="invalid-feedback">Please provide a valid email address.</div>
</div>
<div class="mb-3">
<label class="form-label" for="si-password">Password</label>
<div class="password-toggle">
<input class="form-control" type="password" id="si-password" required>
<label class="password-toggle-btn" aria-label="Show/hide password">
<input class="password-toggle-check" type="checkbox"><span class="password-toggle-indicator"></span>
</label>
</div>
</div>
<div class="mb-3 d-flex flex-wrap justify-content-between">
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="si-remember">
<label class="form-check-label" for="si-remember">Remember me</label>
</div><a class="fs-sm" href="#">Forgot password?</a>
</div>
<button class="btn btn-primary btn-shadow d-block w-100" type="submit">Sign in</button>
</form>
<form class="needs-validation tab-pane fade" autocomplete="off" novalidate id="signup-tab">
<div class="mb-3">
<label class="form-label" for="su-name">Full name</label>
<input class="form-control" type="text" id="su-name" placeholder="John Doe" required>
<div class="invalid-feedback">Please fill in your name.</div>
</div>
<div class="mb-3">
<label for="su-email">Email address</label>
<div class="invalid-feedback">Please provide a valid email address.</div>
</div>
<div class="mb-3">
<label class="form-label" for="su-password">Password</label>
<div class="password-toggle">
<input class="form-control" type="password" id="su-password" required>
<label class="password-toggle-btn" aria-label="Show/hide password">
<input class="password-toggle-check" type="checkbox"><span class="password-toggle-indicator"></span>
</label>
</div>
</div>
<div class="mb-3">
<label class="form-label" for="su-password-confirm">Confirm password</label>
<div class="password-toggle">
<input class="form-control" type="password" id="su-password-confirm" required>
<label class="password-toggle-btn" aria-label="Show/hide password">
<input class="password-toggle-check" type="checkbox"><span class="password-toggle-indicator"></span>
</label>
</div>
</div>
<button class="btn btn-primary btn-shadow d-block w-100" type="submit">Sign up</button>
</form>
</div>
</div>
</div>
</div>
<!-- Quick View Modal-->
<div class="modal-quick-view modal fade" id="quick-view" tabindex="-1">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title product-title"><a href="shop-single-v1.html" data-bs-toggle="tooltip" data-bs-placement="right" title="Go to product page">Sports Hooded Sweatshirt<i class="ci-arrow-right fs-lg ms-2"></i></a></h4>
<button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row">
<!-- Product gallery-->
<div class="col-lg-7 pe-lg-0">
<div class="product-gallery">
<div class="product-gallery-preview order-sm-2">
<div class="product-gallery-preview-item active" id="first"><img class="image-zoom" src="img/shop/single/gallery/01.jpg" data-zoom="img/shop/single/gallery/01.jpg" alt="Product image">
<div class="image-zoom-pane"></div>
</div>
<div class="product-gallery-preview-item" id="second"><img class="image-zoom" src="img/shop/single/gallery/02.jpg" data-zoom="img/shop/single/gallery/02.jpg" alt="Product image">
<div class="image-zoom-pane"></div>
</div>
<div class="product-gallery-preview-item" id="third"><img class="image-zoom" src="img/shop/single/gallery/03.jpg" data-zoom="img/shop/single/gallery/03.jpg" alt="Product image">
<div class="image-zoom-pane"></div>
</div>
<div class="product-gallery-preview-item" id="fourth"><img class="image-zoom" src="img/shop/single/gallery/04.jpg" data-zoom="img/shop/single/gallery/04.jpg" alt="Product image">
<div class="image-zoom-pane"></div>
</div>
</div>
<div class="product-gallery-thumblist order-sm-1"><a class="product-gallery-thumblist-item active" href="#first"><img src="img/shop/single/gallery/th01.jpg" alt="Product thumb"></a><a class="product-gallery-thumblist-item" href="#second"><img src="img/shop/single/gallery/th02.jpg" alt="Product thumb"></a><a class="product-gallery-thumblist-item" href="#third"><img src="img/shop/single/gallery/th03.jpg" alt="Product thumb"></a><a class="product-gallery-thumblist-item" href="#fourth"><img src="img/shop/single/gallery/th04.jpg" alt="Product thumb"></a></div>
</div>
</div>
<!-- Product details-->
<div class="col-lg-5 pt-4 pt-lg-0 image-zoom-pane">
<div class="product-details ms-auto pb-3">
<div class="d-flex justify-content-between align-items-center mb-2"><a href="shop-single-v1.html#reviews">
<div class="star-rating"><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star"></i>
</div><span class="d-inline-block fs-sm text-body align-middle mt-1 ms-1">74 Reviews</span></a>
<button class="btn-wishlist" type="button" data-bs-toggle="tooltip" title="Add to wishlist"><i class="ci-heart"></i></button>
</div>
<div class="mb-3"><span class="h3 fw-normal text-accent me-1">$18.<small>99</small></span>
<del class="text-muted fs-lg me-3">$25.<small>00</small></del><span class="badge bg-danger badge-shadow align-middle mt-n2">Sale</span>
</div>
<div class="fs-sm mb-4"><span class="text-heading fw-medium me-1">Color:</span><span class="text-muted" id="colorOptionText">Red/Dark blue/White</span></div>
<div class="position-relative me-n4 mb-3">
<div class="form-check form-option form-check-inline mb-2">
<input class="form-check-input" type="radio" name="color" id="color1" data-bs-label="colorOptionText" value="Red/Dark blue/White" checked>
<label class="form-option-label rounded-circle" for="color1"><span class="form-option-color rounded-circle" style="background-image: url(img/shop/single/color-opt-1.png)"></span></label>
</div>
<div class="form-check form-option form-check-inline mb-2">
<input class="form-check-input" type="radio" name="color" id="color2" data-bs-label="colorOptionText" value="Beige/White/Black">
<label class="form-option-label rounded-circle" for="color2"><span class="form-option-color rounded-circle" style="background-image: url(img/shop/single/color-opt-2.png)"></span></label>
</div>
<div class="form-check form-option form-check-inline mb-2">
<input class="form-check-input" type="radio" name="color" id="color3" data-bs-label="colorOptionText" value="Dark grey/White/Mustard">
<label class="form-option-label rounded-circle" for="color3"><span class="form-option-color rounded-circle" style="background-image: url(img/shop/single/color-opt-3.png)"></span></label>
</div>
<div class="product-badge product-available mt-n1"><i class="ci-security-check"></i>Product available</div>
</div>
<form class="mb-grid-gutter">
<div class="mb-3">
<label class="fw-medium pb-1" for="product-size">Size:</label>
<select class="form-select" required id="product-size">
<option value="">Select size</option>
<option value="xs">XS</option>
<option value="s">S</option>
<option value="m">M</option>
<option value="l">L</option>
<option value="xl">XL</option>
</select>
</div>
<div class="mb-3 d-flex align-items-center">
<select class="form-select me-3" style="width: 5rem;">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<button class="btn btn-primary btn-shadow d-block w-100" type="submit"><i class="ci-cart fs-lg me-2"></i>Add to Cart</button>
</div>
</form>
<h5 class="h6 mb-3 pb-2 border-bottom"><i class="ci-announcement text-muted fs-lg align-middle mt-n1 me-2"></i>Product info</h5>
<h6 class="fs-sm mb-2">Style</h6>
<ul class="fs-sm ps-4">
<li>Hooded top</li>
</ul>
<h6 class="fs-sm mb-2">Composition</h6>
<ul class="fs-sm ps-4">
<li>Elastic rib: Cotton 95%, Elastane 5%</li>
<li>Lining: Cotton 100%</li>
<li>Cotton 80%, Polyester 20%</li>
</ul>
<h6 class="fs-sm mb-2">Art. No.</h6>
<ul class="fs-sm ps-4 mb-0">
<li>183260098</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Navbar 3 Level (Light)-->
<header class="shadow-sm">
<!-- Topbar-->
<div class="topbar topbar-dark bg-dark">
<div class="container">
<div class="topbar-text dropdown d-md-none"><a class="topbar-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Useful links</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="tel:00331697720"><i class="ci-support text-muted me-2"></i>(00) 33 169 7720</a></li>
<li><a class="dropdown-item" href="order-tracking.html"><i class="ci-location text-muted me-2"></i>Order tracking</a></li>
</ul>
</div>
<div class="topbar-text text-nowrap d-none d-md-inline-block"><i class="ci-support"></i><span class="text-muted me-1">Support</span><a class="topbar-link" href="tel:00331697720">(00) 33 169 7720</a></div>
<div class="tns-carousel tns-controls-static d-none d-md-block">
<div class="tns-carousel-inner" data-carousel-options="{"mode": "gallery", "nav": false}">
<div class="topbar-text">Free shipping for order over $200</div>
<div class="topbar-text">We return money within 30 days</div>
<div class="topbar-text">Friendly 24/7 customer support</div>
</div>
</div>
<div class="ms-3 text-nowrap"><a class="topbar-link me-4 d-none d-md-inline-block" href="order-tracking.html"><i class="ci-location"></i>Order tracking</a>
<div class="topbar-text dropdown disable-autohide"><a class="topbar-link dropdown-toggle" href="#" data-bs-toggle="dropdown"><img class="me-2" src="img/flags/en.png" width="20" alt="English">Eng / $</a>
<ul class="dropdown-menu dropdown-menu-end">
<li class="dropdown-item">
<select class="form-select form-select-sm">
<option value="usd">$ USD</option>
<option value="eur">€ EUR</option>
<option value="ukp">£ UKP</option>
<option value="jpy">¥ JPY</option>
</select>
</li>
<li><a class="dropdown-item pb-1" href="#"><img class="me-2" src="img/flags/fr.png" width="20" alt="Français">Français</a></li>
<li><a class="dropdown-item pb-1" href="#"><img class="me-2" src="img/flags/de.png" width="20" alt="Deutsch">Deutsch</a></li>
<li><a class="dropdown-item" href="#"><img class="me-2" src="img/flags/it.png" width="20" alt="Italiano">Italiano</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Remove "navbar-sticky" class to make navigation bar scrollable with the page.-->
<div class="navbar-sticky bg-light">
<div class="navbar navbar-expand-lg navbar-light">
<div class="container"><a class="navbar-brand d-none d-sm-block flex-shrink-0" href="index.html"><img src="img/logo-dark.png" width="142" alt="Cartzilla"></a><a class="navbar-brand d-sm-none flex-shrink-0 me-2" href="index.html"><img src="img/logo-icon.png" width="74" alt="Cartzilla"></a>
<div class="input-group d-none d-lg-flex mx-4">
<input class="form-control rounded-end pe-5" type="text" placeholder="Search for products"><i class="ci-search position-absolute top-50 end-0 translate-middle-y text-muted fs-base me-3"></i>
</div>
<div class="navbar-toolbar d-flex flex-shrink-0 align-items-center">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"><span class="navbar-toggler-icon"></span></button><a class="navbar-tool navbar-stuck-toggler" href="#"><span class="navbar-tool-tooltip">Expand menu</span>
<div class="navbar-tool-icon-box"><i class="navbar-tool-icon ci-menu"></i></div></a><a class="navbar-tool d-none d-lg-flex" href="account-wishlist.html"><span class="navbar-tool-tooltip">Wishlist</span>
<div class="navbar-tool-icon-box"><i class="navbar-tool-icon ci-heart"></i></div></a><a class="navbar-tool ms-1 ms-lg-0 me-n1 me-lg-2" href="#signin-modal" data-bs-toggle="modal">
<div class="navbar-tool-icon-box"><i class="navbar-tool-icon ci-user"></i></div>
<div class="navbar-tool-text ms-n3"><small>Hello, Sign in</small>My Account</div></a>
<div class="navbar-tool dropdown ms-3"><a class="navbar-tool-icon-box bg-secondary dropdown-toggle" href="shop-cart.html"><span class="navbar-tool-label">4</span><i class="navbar-tool-icon ci-cart"></i></a><a class="navbar-tool-text" href="shop-cart.html"><small>My Cart</small>$265.00</a>
<!-- Cart dropdown-->
<div class="dropdown-menu dropdown-menu-end">
<div class="widget widget-cart px-3 pt-2 pb-3" style="width: 20rem;">
<div style="height: 15rem;" data-simplebar data-simplebar-auto-hide="false">
<div class="widget-cart-item pb-2 border-bottom">
<button class="btn-close text-danger" type="button" aria-label="Remove"><span aria-hidden="true">×</span></button>
<div class="d-flex align-items-center"><a class="flex-shrink-0" href="shop-single-v1.html"><img src="img/shop/cart/widget/01.jpg" width="64" alt="Product"></a>
<div class="ps-2">
<h6 class="widget-product-title"><a href="shop-single-v1.html">Women Colorblock Sneakers</a></h6>
<div class="widget-product-meta"><span class="text-accent me-2">$150.<small>00</small></span><span class="text-muted">x 1</span></div>
</div>
</div>
</div>
<div class="widget-cart-item py-2 border-bottom">
<button class="btn-close text-danger" type="button" aria-label="Remove"><span aria-hidden="true">×</span></button>
<div class="d-flex align-items-center"><a class="flex-shrink-0" href="shop-single-v1.html"><img src="img/shop/cart/widget/02.jpg" width="64" alt="Product"></a>
<div class="ps-2">
<h6 class="widget-product-title"><a href="shop-single-v1.html">TH Jeans City Backpack</a></h6>
<div class="widget-product-meta"><span class="text-accent me-2">$79.<small>50</small></span><span class="text-muted">x 1</span></div>
</div>
</div>
</div>
<div class="widget-cart-item py-2 border-bottom">
<button class="btn-close text-danger" type="button" aria-label="Remove"><span aria-hidden="true">×</span></button>
<div class="d-flex align-items-center"><a class="flex-shrink-0" href="shop-single-v1.html"><img src="img/shop/cart/widget/03.jpg" width="64" alt="Product"></a>
<div class="ps-2">
<h6 class="widget-product-title"><a href="shop-single-v1.html">3-Color Sun Stash Hat</a></h6>
<div class="widget-product-meta"><span class="text-accent me-2">$22.<small>50</small></span><span class="text-muted">x 1</span></div>
</div>
</div>
</div>
<div class="widget-cart-item py-2 border-bottom">
<button class="btn-close text-danger" type="button" aria-label="Remove"><span aria-hidden="true">×</span></button>
<div class="d-flex align-items-center"><a class="flex-shrink-0" href="shop-single-v1.html"><img src="img/shop/cart/widget/04.jpg" width="64" alt="Product"></a>
<div class="ps-2">
<h6 class="widget-product-title"><a href="shop-single-v1.html">Cotton Polo Regular Fit</a></h6>
<div class="widget-product-meta"><span class="text-accent me-2">$9.<small>00</small></span><span class="text-muted">x 1</span></div>
</div>
</div>
</div>
</div>
<div class="d-flex flex-wrap justify-content-between align-items-center py-3">
<div class="fs-sm me-2 py-2"><span class="text-muted">Subtotal:</span><span class="text-accent fs-base ms-1">$265.<small>00</small></span></div><a class="btn btn-outline-secondary btn-sm" href="shop-cart.html">Expand cart<i class="ci-arrow-right ms-1 me-n1"></i></a>
</div><a class="btn btn-primary btn-sm d-block w-100" href="checkout-details.html"><i class="ci-card me-2 fs-base align-middle"></i>Checkout</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="navbar navbar-expand-lg navbar-light navbar-stuck-menu mt-n2 pt-0 pb-2">
<div class="container">
<div class="collapse navbar-collapse" id="navbarCollapse">
<!-- Search-->
<div class="input-group d-lg-none my-3"><i class="ci-search position-absolute top-50 start-0 translate-middle-y text-muted fs-base ms-3"></i>
<input class="form-control rounded-start" type="text" placeholder="Search for products">
</div>
<!-- Departments menu-->
<ul class="navbar-nav navbar-mega-nav pe-lg-2 me-lg-2">
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle ps-lg-0" href="#" data-bs-toggle="dropdown"><i class="ci-view-grid me-2"></i>Departments</a>
<div class="dropdown-menu px-2 pb-4">
<div class="d-flex flex-wrap flex-sm-nowrap">
<div class="mega-dropdown-column pt-3 pt-sm-4 px-2 px-lg-3">
<div class="widget widget-links"><a class="d-block overflow-hidden rounded-3 mb-3" href="#"><img src="img/shop/departments/01.jpg" alt="Clothing"></a>
<h6 class="fs-base mb-2">Clothing</h6>
<ul class="widget-list">
<li class="widget-list-item mb-1"><a class="widget-list-link" href="#">Women's clothing</a></li>
<li class="widget-list-item mb-1"><a class="widget-list-link" href="#">Men's clothing</a></li>
<li class="widget-list-item mb-1"><a class="widget-list-link" href="#">Kid's clothing</a></li>
</ul>
</div>
</div>
<div class="mega-dropdown-column pt-4 px-2 px-lg-3">
<div class="widget widget-links"><a class="d-block overflow-hidden rounded-3 mb-3" href="#"><img src="img/shop/departments/02.jpg" alt="Shoes"></a>
<h6 class="fs-base mb-2">Shoes</h6>
<ul class="widget-list">
<li class="widget-list-item mb-1"><a class="widget-list-link" href="#">Women's shoes</a></li>
<li class="widget-list-item mb-1"><a class="widget-list-link" href="#">Men's shoes</a></li>
<li class="widget-list-item mb-1"><a class="widget-list-link" href="#">Kid's shoes</a></li>
</ul>
</div>
</div>
<div class="mega-dropdown-column pt-4 px-2 px-lg-3">
<div class="widget widget-links"><a class="d-block overflow-hidden rounded-3 mb-3" href="#"><img src="img/shop/departments/03.jpg" alt="Gadgets"></a>
<h6 class="fs-base mb-2">Gadgets</h6>
<ul class="widget-list">
<li class="widget-list-item mb-1"><a class="widget-list-link" href="#">Smartphones & Tablets</a></li>
<li class="widget-list-item mb-1"><a class="widget-list-link" href="#">Wearable gadgets</a></li>
<li class="widget-list-item mb-1"><a class="widget-list-link" href="#">E-book readers</a></li>
</ul>
</div>
</div>
</div>
<div class="d-flex flex-wrap flex-sm-nowrap">
<div class="mega-dropdown-column pt-4 px-2 px-lg-3">
<div class="widget widget-links"><a class="d-block overflow-hidden rounded-3 mb-3" href="#"><img src="img/shop/departments/04.jpg" alt="Furniture"></a>
<h6 class="fs-base mb-2">Furniture & Decor</h6>
<ul class="widget-list">
<li class="widget-list-item mb-1"><a class="widget-list-link" href="#">Home furniture</a></li>
<li class="widget-list-item mb-1"><a class="widget-list-link" href="#">Office furniture</a></li>
<li class="widget-list-item mb-1"><a class="widget-list-link" href="#">Lighting and decoration</a></li>
</ul>
</div>
</div>
<div class="mega-dropdown-column pt-4 px-2 px-lg-3">
<div class="widget widget-links"><a class="d-block overflow-hidden rounded-3 mb-3" href="#"><img src="img/shop/departments/05.jpg" alt="Accessories"></a>
<h6 class="fs-base mb-2">Accessories</h6>
<ul class="widget-list">
<li class="widget-list-item mb-1"><a class="widget-list-link" href="#">Hats</a></li>
<li class="widget-list-item mb-1"><a class="widget-list-link" href="#">Sunglasses</a></li>
<li class="widget-list-item mb-1"><a class="widget-list-link" href="#">Bags</a></li>
</ul>
</div>
</div>
<div class="mega-dropdown-column pt-4 px-2 px-lg-3">
<div class="widget widget-links"><a class="d-block overflow-hidden rounded-3 mb-3" href="#"><img src="img/shop/departments/06.jpg" alt="Entertainment"></a>
<h6 class="fs-base mb-2">Entertainment</h6>
<ul class="widget-list">
<li class="widget-list-item mb-1"><a class="widget-list-link" href="#">Kid's toys</a></li>
<li class="widget-list-item mb-1"><a class="widget-list-link" href="#">Video games</a></li>
<li class="widget-list-item mb-1"><a class="widget-list-link" href="#">Outdoor / Camping</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
<!-- Primary menu-->
<ul class="navbar-nav">
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Home</a>
<ul class="dropdown-menu">
<li class="dropdown position-static mb-0"><a class="dropdown-item py-2 border-bottom" href="home-fashion-store-v1.html"><span class="d-block text-heading">Fashion Store v.1</span><small class="d-block text-muted">Classic shop layout</small></a>
<div class="dropdown-menu h-100 animation-none mt-0 p-3"><a class="d-block" href="home-fashion-store-v1.html" style="width: 250px;"><img src="img/home/preview/th01.jpg" alt="Fashion Store v.1"></a></div>
</li>
<li class="dropdown position-static mb-0"><a class="dropdown-item py-2 border-bottom" href="home-electronics-store.html"><span class="d-block text-heading">Electronics Store</span><small class="d-block text-muted">Slider + Promo banners</small></a>
<div class="dropdown-menu h-100 animation-none mt-0 p-3"><a class="d-block" href="home-electronics-store.html" style="width: 250px;"><img src="img/home/preview/th03.jpg" alt="Electronics Store"></a></div>
</li>
<li class="dropdown position-static mb-0"><a class="dropdown-item py-2 border-bottom" href="home-marketplace.html"><span class="d-block text-heading">Marketplace</span><small class="d-block text-muted">Multi-vendor, digital goods</small></a>
<div class="dropdown-menu h-100 animation-none mt-0 p-3"><a class="d-block" href="home-marketplace.html" style="width: 250px;"><img src="img/home/preview/th04.jpg" alt="Marketplace"></a></div>
</li>
<li class="dropdown position-static mb-0"><a class="dropdown-item py-2 border-bottom" href="home-grocery-store.html"><span class="d-block text-heading">Grocery Store</span><small class="d-block text-muted">Full width + Side menu</small></a>
<div class="dropdown-menu h-100 animation-none mt-0 p-3"><a class="d-block" href="home-grocery-store.html" style="width: 250px;"><img src="img/home/preview/th06.jpg" alt="Grocery Store"></a></div>
</li>
<li class="dropdown position-static mb-0"><a class="dropdown-item py-2 border-bottom" href="home-food-delivery.html"><span class="d-block text-heading">Food Delivery Service</span><small class="d-block text-muted">Food & Beverages delivery</small></a>
<div class="dropdown-menu h-100 animation-none mt-0 p-3"><a class="d-block" href="home-food-delivery.html" style="width: 250px;"><img src="img/home/preview/th07.jpg" alt="Food Delivery Service"></a></div>
</li>
<li class="dropdown position-static mb-0"><a class="dropdown-item py-2 border-bottom" href="home-fashion-store-v2.html"><span class="d-block text-heading">Fashion Store v.2</span><small class="d-block text-muted">Slider + Featured categories</small></a>
<div class="dropdown-menu h-100 animation-none mt-0 p-3"><a class="d-block" href="home-fashion-store-v2.html" style="width: 250px;"><img src="img/home/preview/th02.jpg" alt="Fashion Store v.2"></a></div>
</li>
<li class="dropdown position-static mb-0"><a class="dropdown-item py-2" href="home-single-store.html"><span class="d-block text-heading">Single Product Store</span><small class="d-block text-muted">Single product / mono brand</small></a>
<div class="dropdown-menu h-100 animation-none mt-0 p-3"><a class="d-block" href="home-single-store.html" style="width: 250px;"><img src="img/home/preview/th05.jpg" alt="Single Product / Brand Store"></a></div>
</li>
</ul>
</li>
<li class="nav-item dropdown active"><a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Shop</a>
<div class="dropdown-menu p-0">
<div class="d-flex flex-wrap flex-sm-nowrap px-2">
<div class="mega-dropdown-column pt-1 pt-lg-4 pb-4 px-2 px-lg-3">
<div class="widget widget-links mb-4">
<h6 class="fs-base mb-3">Shop layouts</h6>
<ul class="widget-list">
<li class="widget-list-item"><a class="widget-list-link" href="shop-grid-ls.html">Shop Grid - Left Sidebar</a></li>
<li class="widget-list-item"><a class="widget-list-link" href="shop-grid-rs.html">Shop Grid - Right Sidebar</a></li>
<li class="widget-list-item"><a class="widget-list-link" href="shop-grid-ft.html">Shop Grid - Filters on Top</a></li>
<li class="widget-list-item"><a class="widget-list-link" href="shop-list-ls.html">Shop List - Left Sidebar</a></li>
<li class="widget-list-item"><a class="widget-list-link" href="shop-list-rs.html">Shop List - Right Sidebar</a></li>
<li class="widget-list-item"><a class="widget-list-link" href="shop-list-ft.html">Shop List - Filters on Top</a></li>
</ul>
</div>
<div class="widget widget-links">
<h6 class="fs-base mb-3">Marketplace</h6>
<ul class="widget-list">
<li class="widget-list-item"><a class="widget-list-link" href="marketplace-category.html">Category Page</a></li>
<li class="widget-list-item"><a class="widget-list-link" href="marketplace-single.html">Single Item Page</a></li>
<li class="widget-list-item"><a class="widget-list-link" href="marketplace-vendor.html">Vendor Page</a></li>
<li class="widget-list-item"><a class="widget-list-link" href="marketplace-cart.html">Cart</a></li>
<li class="widget-list-item"><a class="widget-list-link" href="marketplace-checkout.html">Checkout</a></li>
</ul>
</div>
</div>
<div class="mega-dropdown-column pt-1 pt-lg-4 pb-4 px-2 px-lg-3">
<div class="widget widget-links">
<h6 class="fs-base mb-3">Shop pages</h6>
<ul class="widget-list">
<li class="widget-list-item"><a class="widget-list-link" href="shop-categories.html">Shop Categories</a></li>
<li class="widget-list-item"><a class="widget-list-link" href="shop-single-v1.html">Product Page v.1</a></li>
<li class="widget-list-item"><a class="widget-list-link" href="shop-single-v2.html">Product Page v.2</a></li>
<li class="widget-list-item"><a class="widget-list-link" href="shop-cart.html">Cart</a></li>
<li class="widget-list-item"><a class="widget-list-link" href="checkout-details.html">Checkout - Details</a></li>
<li class="widget-list-item"><a class="widget-list-link" href="checkout-shipping.html">Checkout - Shipping</a></li>
<li class="widget-list-item"><a class="widget-list-link" href="checkout-payment.html">Checkout - Payment</a></li>
<li class="widget-list-item"><a class="widget-list-link" href="checkout-review.html">Checkout - Review</a></li>
<li class="widget-list-item"><a class="widget-list-link" href="checkout-complete.html">Checkout - Complete</a></li>
<li class="widget-list-item"><a class="widget-list-link" href="order-tracking.html">Order Tracking</a></li>
<li class="widget-list-item"><a class="widget-list-link" href="comparison.html">Product Comparison</a></li>
</ul>
</div>
</div>
<div class="mega-dropdown-column pt-1 pt-lg-4 pb-4 px-2 px-lg-3">
<div class="widget widget-links mb-4">
<h6 class="fs-base mb-3">Grocery store</h6>
<ul class="widget-list">
<li class="widget-list-item"><a class="widget-list-link" href="grocery-catalog.html">Product Catalog</a></li>
<li class="widget-list-item"><a class="widget-list-link" href="grocery-single.html">Single Product Page</a></li>
<li class="widget-list-item"><a class="widget-list-link" href="grocery-checkout.html">Checkout</a></li>
</ul>
</div>
<div class="widget widget-links">
<h6 class="fs-base mb-3">Food Delivery</h6>
<ul class="widget-list">
<li class="widget-list-item"><a class="widget-list-link" href="food-delivery-category.html">Category Page</a></li>
<li class="widget-list-item"><a class="widget-list-link" href="food-delivery-single.html">Single Item (Restaurant)</a></li>
<li class="widget-list-item"><a class="widget-list-link" href="food-delivery-cart.html">Cart (Your Order)</a></li>
<li class="widget-list-item"><a class="widget-list-link" href="food-delivery-checkout.html">Checkout (Address & Payment)</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Account</a>
<ul class="dropdown-menu">
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Shop User Account</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="account-orders.html">Orders History</a></li>
<li><a class="dropdown-item" href="account-profile.html">Profile Settings</a></li>
<li><a class="dropdown-item" href="account-address.html">Account Addresses</a></li>
<li><a class="dropdown-item" href="account-payment.html">Payment Methods</a></li>
<li><a class="dropdown-item" href="account-wishlist.html">Wishlist</a></li>
<li><a class="dropdown-item" href="account-tickets.html">My Tickets</a></li>
<li><a class="dropdown-item" href="account-single-ticket.html">Single Ticket</a></li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Vendor Dashboard</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="dashboard-settings.html">Settings</a></li>
<li><a class="dropdown-item" href="dashboard-purchases.html">Purchases</a></li>
<li><a class="dropdown-item" href="dashboard-favorites.html">Favorites</a></li>
<li><a class="dropdown-item" href="dashboard-sales.html">Sales</a></li>
<li><a class="dropdown-item" href="dashboard-products.html">Products</a></li>
<li><a class="dropdown-item" href="dashboard-add-new-product.html">Add New Product</a></li>
<li><a class="dropdown-item" href="dashboard-payouts.html">Payouts</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="account-signin.html">Sign In / Sign Up</a></li>
<li><a class="dropdown-item" href="account-password-recovery.html">Password Recovery</a></li>
</ul>
</li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Pages</a>
<ul class="dropdown-menu">
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Navbar Variants</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="navbar-1-level-light.html">1 Level Light</a></li>
<li><a class="dropdown-item" href="navbar-1-level-dark.html">1 Level Dark</a></li>
<li><a class="dropdown-item" href="navbar-2-level-light.html">2 Level Light</a></li>
<li><a class="dropdown-item" href="navbar-2-level-dark.html">2 Level Dark</a></li>
<li><a class="dropdown-item" href="navbar-3-level-light.html">3 Level Light</a></li>
<li><a class="dropdown-item" href="navbar-3-level-dark.html">3 Level Dark</a></li>
<li><a class="dropdown-item" href="home-electronics-store.html">Electronics Store</a></li>
<li><a class="dropdown-item" href="home-marketplace.html">Marketplace</a></li>
<li><a class="dropdown-item" href="home-grocery-store.html">Side Menu (Grocery)</a></li>
</ul>
</li>
<li class="dropdown-divider"></li>
<li><a class="dropdown-item" href="about.html">About Us</a></li>
<li><a class="dropdown-item" href="contacts.html">Contacts</a></li>
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Help Center</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="help-topics.html">Help Topics</a></li>
<li><a class="dropdown-item" href="help-single-topic.html">Single Topic</a></li>
<li><a class="dropdown-item" href="help-submit-request.html">Submit a Request</a></li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">404 Not Found</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="404-simple.html">404 - Simple Text</a></li>
<li><a class="dropdown-item" href="404-illustration.html">404 - Illustration</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog</a>
<ul class="dropdown-menu">
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog List Layouts</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="blog-list-sidebar.html">List with Sidebar</a></li>
<li><a class="dropdown-item" href="blog-list.html">List no Sidebar</a></li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Blog Grid Layouts</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="blog-grid-sidebar.html">Grid with Sidebar</a></li>
<li><a class="dropdown-item" href="blog-grid.html">Grid no Sidebar</a></li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Single Post Layouts</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="blog-single-sidebar.html">Article with Sidebar</a></li>
<li><a class="dropdown-item" href="blog-single.html">Article no Sidebar</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Docs / Components</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="docs/dev-setup.html">
<div class="d-flex">
<div class="lead text-muted pt-1"><i class="ci-book"></i></div>
<div class="ms-2"><span class="d-block text-heading">Documentation</span><small class="d-block text-muted">Kick-start customization</small></div>
</div></a></li>
<li class="dropdown-divider"></li>
<li><a class="dropdown-item" href="components/typography.html">
<div class="d-flex">
<div class="lead text-muted pt-1"><i class="ci-server"></i></div>
<div class="ms-2"><span class="d-block text-heading">Components<span class="badge bg-info ms-2">40+</span></span><small class="d-block text-muted">Faster page building</small></div>
</div></a></li>
<li class="dropdown-divider"></li>
<li><a class="dropdown-item" href="docs/changelog.html">
<div class="d-flex">
<div class="lead text-muted pt-1"><i class="ci-edit"></i></div>
<div class="ms-2"><span class="d-block text-heading">Changelog<span class="badge bg-success ms-2">v2.0</span></span><small class="d-block text-muted">Regular updates</small></div>
</div></a></li>
<li class="dropdown-divider"></li>
<div class="d-flex">
<div class="lead text-muted pt-1"><i class="ci-help"></i></div>
<div class="ms-2"><span class="d-block text-heading">Support</span><small class="d-block text-muted">[email protected]</small></div>
</div></a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</header>
<!-- Page Title-->
<div class="page-title-overlap bg-dark pt-4">
<div class="container d-lg-flex justify-content-between py-2 py-lg-3">
<div class="order-lg-2 mb-3 mb-lg-0 pt-lg-2">
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-light flex-lg-nowrap justify-content-center justify-content-lg-start">
<li class="breadcrumb-item"><a class="text-nowrap" href="index.html"><i class="ci-home"></i>Home</a></li>
<li class="breadcrumb-item text-nowrap"><a href="#">Shop</a>
</li>
<li class="breadcrumb-item text-nowrap active" aria-current="page">List right sidebar</li>
</ol>
</nav>
</div>
<div class="order-lg-1 pe-lg-4 text-center text-lg-start">
<h1 class="h3 text-light mb-0">Shop list right sidebar</h1>
</div>
</div>
</div>
<div class="container pb-5 mb-2 mb-md-4">
<div class="row">
<!-- Content -->
<section class="col-lg-8">
<!-- Toolbar-->
<div class="d-flex justify-content-center justify-content-sm-between align-items-center pt-2 pb-4 pb-sm-5">
<div class="d-flex flex-wrap">
<div class="d-flex align-items-center flex-nowrap me-3 me-sm-4 pb-3">
<label class="text-light fs-sm opacity-75 text-nowrap me-2 d-none d-sm-block" for="sorting">Sort by:</label>
<select class="form-select" id="sorting">
<option>Popularity</option>
<option>Low - Hight Price</option>
<option>High - Low Price</option>
<option>Average Rating</option>
<option>A - Z Order</option>
<option>Z - A Order</option>
</select><span class="fs-sm text-light opacity-75 text-nowrap ms-2 d-none d-md-block">of 287 products</span>
</div>
</div>
<div class="d-flex pb-3"><a class="nav-link-style nav-link-light me-3" href="#"><i class="ci-arrow-left"></i></a><span class="fs-md text-light">1 / 5</span><a class="nav-link-style nav-link-light ms-3" href="#"><i class="ci-arrow-right"></i></a></div>
<div class="d-none d-sm-flex pb-3"><a class="btn btn-icon nav-link-style nav-link-light me-2" href="shop-grid-rs.html"><i class="ci-view-grid"></i></a><a class="btn btn-icon nav-link-style bg-light text-dark disabled opacity-100" href="#"><i class="ci-view-list"></i></a></div>
</div>
<!-- Products list-->
<!-- Product-->
<div class="card product-card product-list">
<button class="btn-wishlist btn-sm" type="button" data-bs-toggle="tooltip" data-bs-placement="left" title="Add to wishlist"><i class="ci-heart"></i></button>
<div class="d-sm-flex align-items-center"><a class="product-list-thumb" href="shop-single-v1.html"><img src="img/shop/catalog/01.jpg" alt="Product"></a>
<div class="card-body py-2"><a class="product-meta d-block fs-xs pb-1" href="#">Sneakers & Keds</a>
<h3 class="product-title fs-base"><a href="shop-single-v1.html">Women Colorblock Sneakers</a></h3>
<div class="d-flex justify-content-between">
<div class="product-price"><span class="text-accent">$154.<small>00</small></span></div>
<div class="star-rating"><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star-half active"></i><i class="star-rating-icon ci-star"></i><i class="star-rating-icon ci-star"></i>
</div>
</div>
<div class="card-body card-body-hidden">
<div class="pb-2">
<div class="form-check form-option form-check-inline mb-2">
<input class="form-check-input" type="radio" name="size1" id="s-75">
<label class="form-option-label" for="s-75">7.5</label>
</div>
<div class="form-check form-option form-check-inline mb-2">
<input class="form-check-input" type="radio" name="size1" id="s-80" checked>
<label class="form-option-label" for="s-80">8</label>
</div>
<div class="form-check form-option form-check-inline mb-2">
<input class="form-check-input" type="radio" name="size1" id="s-85">
<label class="form-option-label" for="s-85">8.5</label>
</div>
<div class="form-check form-option form-check-inline mb-2">
<input class="form-check-input" type="radio" name="size1" id="s-90">
<label class="form-option-label" for="s-90">9</label>
</div>
</div>
<button class="btn btn-primary btn-sm mb-2" type="button"><i class="ci-cart fs-sm me-1"></i>Add to Cart</button>
<div class="text-start"><a class="nav-link-style fs-ms" href="#quick-view" data-bs-toggle="modal"><i class="ci-eye align-middle me-1"></i>Quick view</a></div>
</div>
</div>
</div>
</div>
<div class="border-top pt-3 mt-3"></div>
<!-- Product-->
<div class="card product-card product-list"><span class="badge bg-danger badge-shadow">Sale</span>
<button class="btn-wishlist btn-sm" type="button" data-bs-toggle="tooltip" data-bs-placement="left" title="Add to wishlist"><i class="ci-heart"></i></button>
<div class="d-sm-flex align-items-center"><a class="product-list-thumb" href="shop-single-v1.html"><img src="img/shop/catalog/02.jpg" alt="Product"></a>
<div class="card-body py-2"><a class="product-meta d-block fs-xs pb-1" href="#">Women’s T-shirt</a>
<h3 class="product-title fs-base"><a href="shop-single-v1.html">Cotton Lace Blouse</a></h3>
<div class="d-flex justify-content-between">
<div class="product-price"><span class="text-accent">$28.<small>50</small></span>
<del class="fs-sm text-muted">38.<small>50</small></del>
</div>
<div class="star-rating"><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star-half active"></i><i class="star-rating-icon ci-star"></i>
</div>
</div>
<div class="card-body card-body-hidden">
<div class="pb-2">
<div class="form-check form-option form-check-inline mb-2">
<input class="form-check-input" type="radio" name="color1" id="white" checked>
<label class="form-option-label rounded-circle" for="white"><span class="form-option-color rounded-circle" style="background-color: #eaeaeb;"></span></label>
</div>
<div class="form-check form-option form-check-inline mb-2">
<input class="form-check-input" type="radio" name="color1" id="blue">
<label class="form-option-label rounded-circle" for="blue"><span class="form-option-color rounded-circle" style="background-color: #d1dceb;"></span></label>
</div>
<div class="form-check form-option form-check-inline mb-2">
<input class="form-check-input" type="radio" name="color1" id="yellow">
<label class="form-option-label rounded-circle" for="yellow"><span class="form-option-color rounded-circle" style="background-color: #f4e6a2;"></span></label>
</div>
<div class="form-check form-option form-check-inline mb-2">
<input class="form-check-input" type="radio" name="color1" id="pink">
<label class="form-option-label rounded-circle" for="pink"><span class="form-option-color rounded-circle" style="background-color: #f3dcff;"></span></label>
</div>
</div>
<div class="d-flex mb-2">
<select class="form-select form-select-sm me-2" style="max-width: 6rem;">
<option>XS</option>
<option>S</option>
<option>M</option>
<option>L</option>
<option>XL</option>
</select>
<button class="btn btn-primary btn-sm" type="button"><i class="ci-cart fs-sm me-1"></i>Add to Cart</button>
</div>
<div class="text-start"><a class="nav-link-style fs-ms" href="#quick-view" data-bs-toggle="modal"><i class="ci-eye align-middle me-1"></i>Quick view</a></div>
</div>
</div>
</div>
</div>
<div class="border-top pt-3 mt-3"></div>
<!-- Product-->
<div class="card product-card product-list">
<button class="btn-wishlist btn-sm" type="button" data-bs-toggle="tooltip" data-bs-placement="left" title="Add to wishlist"><i class="ci-heart"></i></button>
<div class="d-sm-flex align-items-center"><a class="product-list-thumb" href="shop-single-v1.html"><img src="img/shop/catalog/03.jpg" alt="Product"></a>
<div class="card-body py-2"><a class="product-meta d-block fs-xs pb-1" href="#">Women’s Shorts</a>
<h3 class="product-title fs-base"><a href="shop-single-v1.html">Mom High Waist Shorts</a></h3>
<div class="d-flex justify-content-between">
<div class="product-price"><span class="text-accent">$39.<small>50</small></span></div>
<div class="star-rating"><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star-filled active"></i>
</div>
</div>
<div class="card-body card-body-hidden">
<div class="pb-2">
<div class="form-check form-option form-check-inline mb-2">
<input class="form-check-input" type="radio" name="size2" id="xs">
<label class="form-option-label" for="xs">XS</label>
</div>
<div class="form-check form-option form-check-inline mb-2">
<input class="form-check-input" type="radio" name="size2" id="s" checked>
<label class="form-option-label" for="s">S</label>
</div>
<div class="form-check form-option form-check-inline mb-2">
<input class="form-check-input" type="radio" name="size2" id="m">
<label class="form-option-label" for="m">M</label>
</div>
<div class="form-check form-option form-check-inline mb-2">
<input class="form-check-input" type="radio" name="size2" id="l">
<label class="form-option-label" for="l">L</label>
</div>
</div>
<button class="btn btn-primary btn-sm mb-2" type="button"><i class="ci-cart fs-sm me-1"></i>Add to Cart</button>
<div class="text-start"><a class="nav-link-style fs-ms" href="#quick-view" data-bs-toggle="modal"><i class="ci-eye align-middle me-1"></i>Quick view</a></div>
</div>
</div>
</div>
</div>
<div class="border-top pt-3 mt-3"></div>
<!-- Product-->
<div class="card product-card product-list">
<button class="btn-wishlist btn-sm" type="button" data-bs-toggle="tooltip" data-bs-placement="left" title="Add to wishlist"><i class="ci-heart"></i></button>
<div class="d-sm-flex align-items-center"><a class="product-list-thumb" href="shop-single-v1.html"><img src="img/shop/catalog/04.jpg" alt="Product"></a>
<div class="card-body py-2"><a class="product-meta d-block fs-xs pb-1" href="#">Sportswear</a>
<h3 class="product-title fs-base"><a href="shop-single-v1.html">Women Sports Jacket</a></h3>
<div class="d-flex justify-content-between">
<div class="product-price"><span class="text-accent">$68.<small>40</small></span></div>
<div class="star-rating"><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star"></i>
</div>
</div>
<div class="card-body card-body-hidden">
<div class="pb-2">
<div class="form-check form-option form-check-inline mb-2">
<input class="form-check-input" type="radio" name="size3" id="xs2" checked>
<label class="form-option-label" for="xs2">XS</label>
</div>
<div class="form-check form-option form-check-inline mb-2">
<input class="form-check-input" type="radio" name="size3" id="s2">
<label class="form-option-label" for="s2">S</label>
</div>
<div class="form-check form-option form-check-inline mb-2">
<input class="form-check-input" type="radio" name="size3" id="m2">
<label class="form-option-label" for="m2">M</label>
</div>
<div class="form-check form-option form-check-inline mb-2">
<input class="form-check-input" type="radio" name="size3" id="l2">
<label class="form-option-label" for="l2">L</label>
</div>
</div>
<button class="btn btn-primary btn-sm mb-2" type="button"><i class="ci-cart fs-sm me-1"></i>Add to Cart</button>
<div class="text-start"><a class="nav-link-style fs-ms" href="#quick-view" data-bs-toggle="modal"><i class="ci-eye align-middle me-1"></i>Quick view</a></div>
</div>
</div>
</div>
</div>
<div class="border-top pt-3 mt-3"></div>
<!-- Product-->
<div class="card product-card product-list">
<button class="btn-wishlist btn-sm" type="button" data-bs-toggle="tooltip" data-bs-placement="left" title="Add to wishlist"><i class="ci-heart"></i></button>
<div class="d-sm-flex align-items-center"> <a class="product-list-thumb" href="shop-single-v1.html"><img src="img/shop/catalog/05.jpg" alt="Product"></a>
<div class="card-body py-2"><a class="product-meta d-block fs-xs pb-1" href="#">Men’s Sunglasses</a>
<h3 class="product-title fs-base"><a href="shop-single-v1.html">Polarized Sunglasses</a></h3>
<div class="d-flex justify-content-between">
<div class="product-price"><span class="text-muted fs-sm">Out of stock</span></div>
<div class="star-rating"><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star"></i>
</div>
</div>
<div class="card-body card-body-hidden"><a class="btn btn-secondary btn-sm mb-2" href="shop-single-v1.html">View details</a>
<div class="text-start"><a class="nav-link-style fs-ms" href="#quick-view" data-bs-toggle="modal"><i class="ci-eye align-middle me-1"></i>Quick view</a></div>
</div>
</div>
</div>
</div>
<div class="border-top pt-3 mt-3"></div>
<!-- Product-->
<div class="card product-card product-list">
<button class="btn-wishlist btn-sm" type="button" data-bs-toggle="tooltip" data-bs-placement="left" title="Add to wishlist"><i class="ci-heart"></i></button>
<div class="d-sm-flex align-items-center"><a class="product-list-thumb" href="shop-single-v1.html"><img src="img/shop/catalog/06.jpg" alt="Product"></a>
<div class="card-body py-2"><a class="product-meta d-block fs-xs pb-1" href="#">Backpacks</a>
<h3 class="product-title fs-base"><a href="shop-single-v1.html">TH Jeans City Backpack</a></h3>
<div class="d-flex justify-content-between">
<div class="product-price"><span class="text-accent">$79.<small>50</small></span></div>
<div class="star-rating"><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star"></i><i class="star-rating-icon ci-star"></i>
</div>
</div>
<div class="card-body card-body-hidden">
<div class="pb-2">
<div class="form-check form-option form-check-inline mb-2">
<input class="form-check-input" type="radio" name="color2" id="khaki" checked>
<label class="form-option-label rounded-circle" for="khaki"><span class="form-option-color rounded-circle" style="background-color: #97947c;"></span></label>
</div>
<div class="form-check form-option form-check-inline mb-2">
<input class="form-check-input" type="radio" name="color2" id="jeans">
<label class="form-option-label rounded-circle" for="jeans"><span class="form-option-color rounded-circle" style="background-color: #99a8be;"></span></label>
</div>
<div class="form-check form-option form-check-inline mb-2">
<input class="form-check-input" type="radio" name="color2" id="white2">
<label class="form-option-label rounded-circle" for="white2"><span class="form-option-color rounded-circle" style="background-color: #eaeaeb;"></span></label>
</div>
</div>
<button class="btn btn-primary btn-sm mb-2" type="button"><i class="ci-cart fs-sm me-1"></i>Add to Cart</button>
<div class="text-start"><a class="nav-link-style fs-ms" href="#quick-view" data-bs-toggle="modal"><i class="ci-eye align-middle me-1"></i>Quick view</a></div>
</div>
</div>
</div>
</div>
<!-- Banner-->
<div class="d-sm-flex justify-content-between align-items-center bg-secondary overflow-hidden my-4 rounded-3">
<div class="py-4 my-2 my-md-0 py-md-5 px-4 ms-md-3 text-center text-sm-tart">
<h4 class="fs-lg fw-light mb-2">Converse All Star</h4>
<h3 class="mb-4">Make Your Day Comfortable</h3><a class="btn btn-primary btn-shadow btn-sm" href="#">Shop Now</a>
</div><img class="d-block ms-auto" src="img/shop/catalog/banner.jpg" alt="Shop Converse">
</div>
<!-- Product-->
<div class="card product-card product-list">
<button class="btn-wishlist btn-sm" type="button" data-bs-toggle="tooltip" data-bs-placement="left" title="Add to wishlist"><i class="ci-heart"></i></button>
<div class="d-sm-flex align-items-center"><a class="product-list-thumb" href="shop-single-v1.html"><img src="img/shop/catalog/07.jpg" alt="Product"></a>
<div class="card-body py-2"><a class="product-meta d-block fs-xs pb-1" href="#">Women's Swimwear</a>
<h3 class="product-title fs-base"><a href="shop-single-v1.html">Two-Piece Bikini in Print</a></h3>
<div class="d-flex justify-content-between">
<div class="product-price"><span class="text-accent">$18.<small>99</small></span></div>
<div class="star-rating"><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star"></i>
</div>
</div>
<div class="card-body card-body-hidden">
<div class="pb-2">
<div class="form-check form-option form-check-inline mb-2">
<input class="form-check-input" type="radio" name="size4" id="xs3" checked>
<label class="form-option-label" for="xs3">XS</label>
</div>
<div class="form-check form-option form-check-inline mb-2">
<input class="form-check-input" type="radio" name="size4" id="s3">
<label class="form-option-label" for="s3">S</label>
</div>
<div class="form-check form-option form-check-inline mb-2">
<input class="form-check-input" type="radio" name="size4" id="m3">
<label class="form-option-label" for="m3">M</label>
</div>
</div>
<button class="btn btn-primary btn-sm mb-2" type="button"><i class="ci-cart fs-sm me-1"></i>Add to Cart</button>
<div class="text-start"><a class="nav-link-style fs-ms" href="#quick-view" data-bs-toggle="modal"><i class="ci-eye align-middle me-1"></i>Quick view</a></div>
</div>
</div>
</div>
</div>
<div class="border-top pt-3 mt-3"></div>
<!-- Product-->
<div class="card product-card product-list">
<button class="btn-wishlist btn-sm" type="button" data-bs-toggle="tooltip" data-bs-placement="left" title="Add to wishlist"><i class="ci-heart"></i></button>
<div class="d-sm-flex align-items-center"><a class="product-list-thumb" href="shop-single-v1.html"><img src="img/shop/catalog/08.jpg" alt="Product"></a>
<div class="card-body py-2"><a class="product-meta d-block fs-xs pb-1" href="#">Kid's Toys</a>
<h3 class="product-title fs-base"><a href="shop-single-v1.html">Soft Panda Teddy Bear</a></h3>
<div class="d-flex justify-content-between">
<div class="product-price"><span class="text-accent">$14.<small>99</small></span></div>
<div class="star-rating"><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star-filled active"></i>
</div>
</div>
<div class="card-body card-body-hidden">
<button class="btn btn-primary btn-sm mb-2" type="button"><i class="ci-cart fs-sm me-1"></i>Add to Cart</button>
<div class="text-start"><a class="nav-link-style fs-ms" href="#quick-view" data-bs-toggle="modal"><i class="ci-eye align-middle me-1"></i>Quick view</a></div>
</div>
</div>
</div>
</div>
<div class="border-top pt-3 mt-3"></div>
<!-- Product-->
<div class="card product-card product-list">
<button class="btn-wishlist btn-sm" type="button" data-bs-toggle="tooltip" data-bs-placement="left" title="Add to wishlist"><i class="ci-heart"></i></button>
<div class="d-sm-flex align-items-center"><a class="product-list-thumb" href="shop-single-v1.html"><img src="img/shop/catalog/09.jpg" alt="Product"></a>
<div class="card-body py-2"><a class="product-meta d-block fs-xs pb-1" href="#">Cosmetics</a>
<h3 class="product-title fs-base"><a href="shop-single-v1.html">Metallic Lipstick (Crimson)</a></h3>
<div class="d-flex justify-content-between">
<div class="product-price"><span class="text-accent">$12.<small>99</small></span></div>
<div class="star-rating"><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star"></i>
</div>
</div>
<div class="card-body card-body-hidden">
<div class="pb-2">
<div class="form-check form-option form-check-inline mb-2">
<input class="form-check-input" type="radio" name="color3" id="crimson" checked>
<label class="form-option-label rounded-circle" for="crimson"><span class="form-option-color rounded-circle" style="background-color: #bd3c82;"></span></label>
</div>
<div class="form-check form-option form-check-inline mb-2">
<input class="form-check-input" type="radio" name="color3" id="creamy">
<label class="form-option-label rounded-circle" for="creamy"><span class="form-option-color rounded-circle" style="background-color: #ebae81;"></span></label>
</div>
<div class="form-check form-option form-check-inline mb-2">
<input class="form-check-input" type="radio" name="color3" id="palm">
<label class="form-option-label rounded-circle" for="palm"><span class="form-option-color rounded-circle" style="background-color: #ca8799;"></span></label>
</div>
</div>
<button class="btn btn-primary btn-sm mb-2" type="button"><i class="ci-cart fs-sm me-1"></i>Add to Cart</button>
<div class="text-start"><a class="nav-link-style fs-ms" href="#quick-view" data-bs-toggle="modal"><i class="ci-eye align-middle me-1"></i>Quick view</a></div>
</div>
</div>
</div>
</div>
<div class="border-top pt-3 mt-3"></div>
<!-- Product-->
<div class="card product-card product-list">
<button class="btn-wishlist btn-sm" type="button" data-bs-toggle="tooltip" data-bs-placement="left" title="Add to wishlist"><i class="ci-heart"></i></button>
<div class="d-sm-flex align-items-center"><a class="product-list-thumb" href="shop-single-v1.html"><img src="img/shop/catalog/10.jpg" alt="Product"></a>
<div class="card-body py-2"><a class="product-meta d-block fs-xs pb-1" href="#">Men’s Accessories</a>
<h3 class="product-title fs-base"><a href="shop-single-v1.html">5-Pack Multicolor Bracelets</a></h3>
<div class="d-flex justify-content-between">
<div class="product-price"><span class="text-accent">$7.<small>99</small></span></div>
<div class="star-rating"><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star-filled active"></i>
</div>
</div>
<div class="card-body card-body-hidden">
<button class="btn btn-primary btn-sm mb-2" type="button"><i class="ci-cart fs-sm me-1"></i>Add to Cart</button>
<div class="text-start"><a class="nav-link-style fs-ms" href="#quick-view" data-bs-toggle="modal"><i class="ci-eye align-middle me-1"></i>Quick view</a></div>
</div>
</div>
</div>
</div>
<div class="border-top pt-3 mt-3"></div>
<!-- Product-->
<div class="card product-card product-list">
<button class="btn-wishlist btn-sm" type="button" data-bs-toggle="tooltip" data-bs-placement="left" title="Add to wishlist"><i class="ci-heart"></i></button>
<div class="d-sm-flex align-items-center"><a class="product-list-thumb" href="shop-single-v1.html"><img src="img/shop/catalog/11.jpg" alt="Product"></a>
<div class="card-body py-2"><a class="product-meta d-block fs-xs pb-1" href="#">Men’s Sandals</a>
<h3 class="product-title fs-base"><a href="shop-single-v1.html">Soft Footbed Sandals</a></h3>
<div class="d-flex justify-content-between">
<div class="product-price"><span class="text-accent">$99.<small>50</small></span></div>
<div class="star-rating"><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star"></i>
</div>
</div>
<div class="card-body card-body-hidden">
<div class="pb-2">
<div class="form-check form-option form-check-inline mb-2">
<input class="form-check-input" type="radio" name="color4" id="blue2" checked>
<label class="form-option-label rounded-circle" for="blue2"><span class="form-option-color rounded-circle" style="background-color: #879fb3;"></span></label>
</div>
<div class="form-check form-option form-check-inline mb-2">
<input class="form-check-input" type="radio" name="color4" id="brown">
<label class="form-option-label rounded-circle" for="brown"><span class="form-option-color rounded-circle" style="background-color: #9c6d4a;"></span></label>
</div>
<div class="form-check form-option form-check-inline mb-2">
<input class="form-check-input" type="radio" name="color4" id="black">
<label class="form-option-label rounded-circle" for="black"><span class="form-option-color rounded-circle" style="background-color: #333333;"></span></label>
</div>
</div>
<div class="d-flex mb-2">
<select class="form-select form-select-sm me-2" style="max-width: 6rem;">
<option>9.5</option>
<option>10</option>
<option>10.5</option>
<option>11</option>
<option>11.5</option>
</select>
<button class="btn btn-primary btn-sm" type="button"><i class="ci-cart fs-sm me-1"></i>Add to Cart</button>
</div>
<div class="text-start"><a class="nav-link-style fs-ms" href="#quick-view" data-bs-toggle="modal"><i class="ci-eye align-middle me-1"></i>Quick view</a></div>
</div>
</div>
</div>
</div>
<div class="border-top pt-3 mt-3"></div>
<!-- Product-->
<div class="card product-card product-list">
<button class="btn-wishlist btn-sm" type="button" data-bs-toggle="tooltip" data-bs-placement="left" title="Add to wishlist"><i class="ci-heart"></i></button>
<div class="d-sm-flex align-items-center"><a class="product-list-thumb" href="shop-single-v1.html"><img src="img/shop/catalog/12.jpg" alt="Product"></a>
<div class="card-body py-2"><a class="product-meta d-block fs-xs pb-1" href="#">Men’s Hats</a>
<h3 class="product-title fs-base"><a href="shop-single-v1.html">3-Color Sun Stash Hat</a></h3>
<div class="d-flex justify-content-between">
<div class="product-price"><span class="text-accent">$25.<small>99</small></span></div>
<div class="star-rating"><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star-filled active"></i><i class="star-rating-icon ci-star-filled active"></i>
</div>
</div>
<div class="card-body card-body-hidden">
<div class="pb-2">
<div class="form-check form-option form-check-inline mb-2">
<input class="form-check-input" type="radio" name="size5" id="s4" checked>
<label class="form-option-label" for="s4">S</label>
</div>
<div class="form-check form-option form-check-inline mb-2">
<input class="form-check-input" type="radio" name="size5" id="m4">
<label class="form-option-label" for="m4">M</label>
</div>
<div class="form-check form-option form-check-inline mb-2">
<input class="form-check-input" type="radio" name="size5" id="l4">
<label class="form-option-label" for="l4">L</label>
</div>
</div>
<button class="btn btn-primary btn-sm mb-2" type="button"><i class="ci-cart fs-sm me-1"></i>Add to Cart</button>
<div class="text-start"><a class="nav-link-style fs-ms" href="#quick-view" data-bs-toggle="modal"><i class="ci-eye align-middle me-1"></i>Quick view</a></div>
</div>
</div>
</div>
</div>
<div class="border-top pt-3 mt-3"></div>
<!-- Pagination-->
<nav class="d-flex justify-content-between pt-2" aria-label="Page navigation">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#"><i class="ci-arrow-left me-2"></i>Prev</a></li>
</ul>
<ul class="pagination">
<li class="page-item d-sm-none"><span class="page-link page-link-static">1 / 5</span></li>
<li class="page-item active d-none d-sm-block" aria-current="page"><span class="page-link">1<span class="visually-hidden">(current)</span></span></li>
<li class="page-item d-none d-sm-block"><a class="page-link" href="#">2</a></li>
<li class="page-item d-none d-sm-block"><a class="page-link" href="#">3</a></li>
<li class="page-item d-none d-sm-block"><a class="page-link" href="#">4</a></li>
<li class="page-item d-none d-sm-block"><a class="page-link" href="#">5</a></li>
</ul>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#" aria-label="Next">Next<i class="ci-arrow-right ms-2"></i></a></li>
</ul>
</nav>
</section>
<!-- Sidebar-->
<aside class="col-lg-4">
<!-- Sidebar-->
<div class="offcanvas offcanvas-collapse offcanvas-end bg-white w-100 rounded-3 shadow-lg ms-lg-auto py-1" id="shop-sidebar" style="max-width: 22rem;">
<div class="offcanvas-cap align-items-center shadow-sm">
<h2 class="h5 mb-0">Filters</h2>
<button class="btn-close ms-auto" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body py-grid-gutter px-lg-grid-gutter">
<!-- Categories-->
<div class="widget widget-categories mb-4 pb-4 border-bottom">
<h3 class="widget-title">Categories</h3>
<div class="accordion mt-n1" id="shop-categories">
<!-- Shoes-->
<div class="accordion-item">
<h3 class="accordion-header"><a class="accordion-button collapsed" href="#shoes" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="shoes">Shoes</a></h3>
<div class="accordion-collapse collapse" id="shoes" data-bs-parent="#shop-categories">
<div class="accordion-body">
<div class="widget widget-links widget-filter">
<div class="input-group input-group-sm mb-2">
<input class="widget-filter-search form-control rounded-end" type="text" placeholder="Search"><i class="ci-search position-absolute top-50 end-0 translate-middle-y fs-sm me-3"></i>
</div>
<ul class="widget-list widget-filter-list pt-1" style="height: 12rem;" data-simplebar data-simplebar-auto-hide="false">
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">View all</span><span class="fs-xs text-muted ms-3">1,953</span></a></li>
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Pumps & High Heels</span><span class="fs-xs text-muted ms-3">247</span></a></li>
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Ballerinas & Flats</span><span class="fs-xs text-muted ms-3">156</span></a></li>
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Sandals</span><span class="fs-xs text-muted ms-3">310</span></a></li>
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Sneakers</span><span class="fs-xs text-muted ms-3">402</span></a></li>
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Boots</span><span class="fs-xs text-muted ms-3">393</span></a></li>
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Ankle Boots</span><span class="fs-xs text-muted ms-3">50</span></a></li>
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Loafers</span><span class="fs-xs text-muted ms-3">93</span></a></li>
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Slip-on</span><span class="fs-xs text-muted ms-3">122</span></a></li>
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Flip Flops</span><span class="fs-xs text-muted ms-3">116</span></a></li>
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Clogs & Mules</span><span class="fs-xs text-muted ms-3">24</span></a></li>
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Athletic Shoes</span><span class="fs-xs text-muted ms-3">31</span></a></li>
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Oxfords</span><span class="fs-xs text-muted ms-3">9</span></a></li>
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Smart Shoes</span><span class="fs-xs text-muted ms-3">18</span></a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Clothing-->
<div class="accordion-item">
<h3 class="accordion-header"><a class="accordion-button" href="#clothing" role="button" data-bs-toggle="collapse" aria-expanded="true" aria-controls="clothing">Clothing</a></h3>
<div class="accordion-collapse collapse show" id="clothing" data-bs-parent="#shop-categories">
<div class="accordion-body">
<div class="widget widget-links widget-filter">
<div class="input-group input-group-sm mb-2">
<input class="widget-filter-search form-control rounded-end" type="text" placeholder="Search"><i class="ci-search position-absolute top-50 end-0 translate-middle-y fs-sm me-3"></i>
</div>
<ul class="widget-list widget-filter-list pt-1" style="height: 12rem;" data-simplebar data-simplebar-auto-hide="false">
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">View all</span><span class="fs-xs text-muted ms-3">2,548</span></a></li>
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Blazers & Suits</span><span class="fs-xs text-muted ms-3">235</span></a></li>
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Blouses</span><span class="fs-xs text-muted ms-3">410</span></a></li>
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Cardigans & Jumpers</span><span class="fs-xs text-muted ms-3">107</span></a></li>
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Dresses</span><span class="fs-xs text-muted ms-3">93</span></a></li>
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Hoodie & Sweatshirts</span><span class="fs-xs text-muted ms-3">122</span></a></li>
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Jackets & Coats</span><span class="fs-xs text-muted ms-3">116</span></a></li>
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Jeans</span><span class="fs-xs text-muted ms-3">215</span></a></li>
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Lingerie</span><span class="fs-xs text-muted ms-3">150</span></a></li>
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Maternity Wear</span><span class="fs-xs text-muted ms-3">8</span></a></li>
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Nightwear</span><span class="fs-xs text-muted ms-3">26</span></a></li>
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Shirts</span><span class="fs-xs text-muted ms-3">164</span></a></li>
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Shorts</span><span class="fs-xs text-muted ms-3">147</span></a></li>
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Socks & Tights</span><span class="fs-xs text-muted ms-3">139</span></a></li>
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Sportswear</span><span class="fs-xs text-muted ms-3">65</span></a></li>
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Swimwear</span><span class="fs-xs text-muted ms-3">18</span></a></li>
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">T-shirts & Vests</span><span class="fs-xs text-muted ms-3">209</span></a></li>
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Tops</span><span class="fs-xs text-muted ms-3">132</span></a></li>
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Trousers</span><span class="fs-xs text-muted ms-3">105</span></a></li>
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Underwear</span><span class="fs-xs text-muted ms-3">87</span></a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Bags-->
<div class="accordion-item">
<h3 class="accordion-header"><a class="accordion-button collapsed" href="#bags" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="bags">Bags</a></h3>
<div class="accordion-collapse collapse" id="bags" data-bs-parent="#shop-categories">
<div class="accordion-body">
<div class="widget widget-links widget-filter">
<div class="input-group input-group-sm mb-2">
<input class="widget-filter-search form-control rounded-end" type="text" placeholder="Search"><i class="ci-search position-absolute top-50 end-0 translate-middle-y fs-sm me-3"></i>
</div>
<ul class="widget-list widget-filter-list pt-1" style="height: 12rem;" data-simplebar data-simplebar-auto-hide="false">
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">View all</span><span class="fs-xs text-muted ms-3">801</span></a></li>
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Handbags</span><span class="fs-xs text-muted ms-3">238</span></a></li>
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Backpacks</span><span class="fs-xs text-muted ms-3">116</span></a></li>
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Wallets</span><span class="fs-xs text-muted ms-3">104</span></a></li>
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Luggage</span><span class="fs-xs text-muted ms-3">115</span></a></li>
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Lumbar Packs</span><span class="fs-xs text-muted ms-3">17</span></a></li>
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Duffle Bags</span><span class="fs-xs text-muted ms-3">9</span></a></li>
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Bag / Travel Accessories</span><span class="fs-xs text-muted ms-3">93</span></a></li>
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Diaper Bags</span><span class="fs-xs text-muted ms-3">5</span></a></li>
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Lunch Bags</span><span class="fs-xs text-muted ms-3">8</span></a></li>
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Messenger Bags</span><span class="fs-xs text-muted ms-3">2</span></a></li>
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Laptop Bags</span><span class="fs-xs text-muted ms-3">31</span></a></li>
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Briefcases</span><span class="fs-xs text-muted ms-3">45</span></a></li>
<li class="widget-list-item widget-filter-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span class="widget-filter-item-text">Sport Bags</span><span class="fs-xs text-muted ms-3">18</span></a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Sunglasses-->
<div class="accordion-item">
<h3 class="accordion-header"><a class="accordion-button collapsed" href="#sunglasses" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sunglasses">Sunglasses</a></h3>
<div class="collapse" id="sunglasses" data-bs-parent="#shop-categories">
<div class="accordion-body">
<div class="widget widget-links">
<ul class="widget-list">
<li class="widget-list-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span>View all</span><span class="fs-xs text-muted ms-3">1,842</span></a></li>
<li class="widget-list-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span>Fashion Sunglasses</span><span class="fs-xs text-muted ms-3">953</span></a></li>
<li class="widget-list-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span>Sport Sunglasses</span><span class="fs-xs text-muted ms-3">589</span></a></li>
<li class="widget-list-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span>Classic Sunglasses</span><span class="fs-xs text-muted ms-3">300</span></a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Watches-->
<div class="accordion-item">
<h3 class="accordion-header"><a class="accordion-button collapsed" href="#watches" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="watches">Watches</a></h3>
<div class="accordion-collapse collapse" id="watches" data-bs-parent="#shop-categories">
<div class="accordion-body">
<div class="widget widget-links">
<ul class="widget-list">
<li class="widget-list-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span>View all</span><span class="fs-xs text-muted ms-3">734</span></a></li>
<li class="widget-list-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span>Fashion Watches</span><span class="fs-xs text-muted ms-3">572</span></a></li>
<li class="widget-list-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span>Casual Watches</span><span class="fs-xs text-muted ms-3">110</span></a></li>
<li class="widget-list-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span>Luxury Watches</span><span class="fs-xs text-muted ms-3">34</span></a></li>
<li class="widget-list-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span>Sport Watches</span><span class="fs-xs text-muted ms-3">18</span></a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Accessories-->
<div class="accordion-item">
<h3 class="accordion-header"><a class="accordion-button collapsed" href="#accessories" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="accessories">Accessories</a></h3>
<div class="accordion-collapse collapse" id="accessories" data-bs-parent="#shop-categories">
<div class="accordion-body">
<div class="widget widget-links">
<ul class="widget-list">
<li class="widget-list-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span>View all</span><span class="fs-xs text-muted ms-3">920</span></a></li>
<li class="widget-list-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span>Belts</span><span class="fs-xs text-muted ms-3">364</span></a></li>
<li class="widget-list-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span>Hats</span><span class="fs-xs text-muted ms-3">405</span></a></li>
<li class="widget-list-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span>Jewelry</span><span class="fs-xs text-muted ms-3">131</span></a></li>
<li class="widget-list-item"><a class="widget-list-link d-flex justify-content-between align-items-center" href="#"><span>Cosmetics</span><span class="fs-xs text-muted ms-3">20</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Price range-->
<div class="widget mb-4 pb-4 border-bottom">
<h3 class="widget-title">Price</h3>
<div class="range-slider" data-start-min="250" data-start-max="680" data-min="0" data-max="1000" data-step="1">
<div class="range-slider-ui"></div>
<div class="d-flex pb-1">
<div class="w-50 pe-2 me-2">
<div class="input-group input-group-sm"><span class="input-group-text">$</span>
<input class="form-control range-slider-value-min" type="text">
</div>
</div>
<div class="w-50 ps-2">
<div class="input-group input-group-sm"><span class="input-group-text">$</span>
<input class="form-control range-slider-value-max" type="text">
</div>
</div>
</div>
</div>
</div>
<!-- Filter by Brand-->
<div class="widget widget-filter mb-4 pb-4 border-bottom">
<h3 class="widget-title">Brand</h3>
<div class="input-group input-group-sm mb-2">
<input class="widget-filter-search form-control rounded-end pe-5" type="text" placeholder="Search"><i class="ci-search position-absolute top-50 end-0 translate-middle-y fs-sm me-3"></i>
</div>
<ul class="widget-list widget-filter-list list-unstyled pt-1" style="max-height: 11rem;" data-simplebar data-simplebar-auto-hide="false">
<li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="adidas">
<label class="form-check-label widget-filter-item-text" for="adidas">Adidas</label>
</div><span class="fs-xs text-muted">425</span>
</li>
<li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="ataylor">
<label class="form-check-label widget-filter-item-text" for="ataylor">Ann Taylor</label>
</div><span class="fs-xs text-muted">15</span>
</li>
<li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="armani">
<label class="form-check-label widget-filter-item-text" for="armani">Armani</label>
</div><span class="fs-xs text-muted">18</span>
</li>
<li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="banana">
<label class="form-check-label widget-filter-item-text" for="banana">Banana Republic</label>
</div><span class="fs-xs text-muted">103</span>
</li>
<li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="bilabong">
<label class="form-check-label widget-filter-item-text" for="bilabong">Bilabong</label>
</div><span class="fs-xs text-muted">27</span>
</li>
<li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="birkenstock">
<label class="form-check-label widget-filter-item-text" for="birkenstock">Birkenstock</label>
</div><span class="fs-xs text-muted">10</span>
</li>
<li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="klein">
<label class="form-check-label widget-filter-item-text" for="klein">Calvin Klein</label>
</div><span class="fs-xs text-muted">365</span>
</li>
<li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="columbia">
<label class="form-check-label widget-filter-item-text" for="columbia">Columbia</label>
</div><span class="fs-xs text-muted">508</span>
</li>
<li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="converse">
<label class="form-check-label widget-filter-item-text" for="converse">Converse</label>
</div><span class="fs-xs text-muted">176</span>
</li>
<li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="dockers">
<label class="form-check-label widget-filter-item-text" for="dockers">Dockers</label>
</div><span class="fs-xs text-muted">54</span>
</li>
<li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="fruit">
<label class="form-check-label widget-filter-item-text" for="fruit">Fruit of the Loom</label>
</div><span class="fs-xs text-muted">739</span>
</li>
<li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="hanes">
<label class="form-check-label widget-filter-item-text" for="hanes">Hanes</label>
</div><span class="fs-xs text-muted">92</span>
</li>
<li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="choo">
<label class="form-check-label widget-filter-item-text" for="choo">Jimmy Choo</label>
</div><span class="fs-xs text-muted">17</span>
</li>
<li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="levis">
<label class="form-check-label widget-filter-item-text" for="levis">Levi's</label>
</div><span class="fs-xs text-muted">361</span>
</li>
<li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="lee">
<label class="form-check-label widget-filter-item-text" for="lee">Lee</label>
</div><span class="fs-xs text-muted">264</span>
</li>
<li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="wearhouse">
<label class="form-check-label widget-filter-item-text" for="wearhouse">Men's Wearhouse</label>
</div><span class="fs-xs text-muted">75</span>
</li>
<li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="newbalance">
<label class="form-check-label widget-filter-item-text" for="newbalance">New Balance</label>
</div><span class="fs-xs text-muted">218</span>
</li>
<li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="nike">
<label class="form-check-label widget-filter-item-text" for="nike">Nike</label>
</div><span class="fs-xs text-muted">810</span>
</li>
<li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="navy">
<label class="form-check-label widget-filter-item-text" for="navy">Old Navy</label>
</div><span class="fs-xs text-muted">147</span>
</li>
<li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="polo">
<label class="form-check-label widget-filter-item-text" for="polo">Polo Ralph Lauren</label>
</div><span class="fs-xs text-muted">64</span>
</li>
<li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="puma">
<label class="form-check-label widget-filter-item-text" for="puma">Puma</label>
</div><span class="fs-xs text-muted">370</span>
</li>
<li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="reebok">
<label class="form-check-label widget-filter-item-text" for="reebok">Reebok</label>
</div><span class="fs-xs text-muted">506</span>
</li>
<li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="skechers">
<label class="form-check-label widget-filter-item-text" for="skechers">Skechers</label>
</div><span class="fs-xs text-muted">209</span>
</li>
<li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="hilfiger">
<label class="form-check-label widget-filter-item-text" for="hilfiger">Tommy Hilfiger</label>
</div><span class="fs-xs text-muted">487</span>
</li>
<li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="armour">
<label class="form-check-label widget-filter-item-text" for="armour">Under Armour</label>
</div><span class="fs-xs text-muted">90</span>
</li>
<li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="urban">
<label class="form-check-label widget-filter-item-text" for="urban">Urban Outfitters</label>
</div><span class="fs-xs text-muted">152</span>
</li>
<li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="vsecret">
<label class="form-check-label widget-filter-item-text" for="vsecret">Victoria's Secret</label>
</div><span class="fs-xs text-muted">238</span>
</li>
<li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="wolverine">
<label class="form-check-label widget-filter-item-text" for="wolverine">Wolverine</label>
</div><span class="fs-xs text-muted">29</span>
</li>
<li class="widget-filter-item d-flex justify-content-between align-items-center">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="wrangler">
<label class="form-check-label widget-filter-item-text" for="wrangler">Wrangler</label>
</div><span class="fs-xs text-muted">115</span>
</li>
</ul>
</div>
<!-- Filter by Size-->
<div class="widget widget-filter mb-4 pb-4 border-bottom">
<h3 class="widget-title">Size</h3>
<div class="input-group input-group-sm mb-2">
<input class="widget-filter-search form-control rounded-end pe-5" type="text" placeholder="Search"><i class="ci-search position-absolute top-50 end-0 translate-middle-y fs-sm me-3"></i>
</div>
<ul class="widget-list widget-filter-list list-unstyled pt-1" style="max-height: 11rem;" data-simplebar data-simplebar-auto-hide="false">
<li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="size-xs">
<label class="form-check-label widget-filter-item-text" for="size-xs">XS</label>
</div><span class="fs-xs text-muted">34</span>
</li>
<li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="size-s">
<label class="form-check-label widget-filter-item-text" for="size-s">S</label>
</div><span class="fs-xs text-muted">57</span>
</li>
<li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="size-m">
<label class="form-check-label widget-filter-item-text" for="size-m">M</label>
</div><span class="fs-xs text-muted">198</span>
</li>
<li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="size-l">
<label class="form-check-label widget-filter-item-text" for="size-l">L</label>
</div><span class="fs-xs text-muted">72</span>
</li>
<li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="size-xl">
<label class="form-check-label widget-filter-item-text" for="size-xl">XL</label>
</div><span class="fs-xs text-muted">46</span>
</li>
<li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="size-39">
<label class="form-check-label widget-filter-item-text" for="size-39">39</label>
</div><span class="fs-xs text-muted">112</span>
</li>
<li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="size-40">
<label class="form-check-label widget-filter-item-text" for="size-40">40</label>
</div><span class="fs-xs text-muted">85</span>
</li>
<li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="size-41">
<label class="form-check-label widget-filter-item-text" for="size-40">41</label>
</div><span class="fs-xs text-muted">210</span>
</li>
<li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="size-42">
<label class="form-check-label widget-filter-item-text" for="size-42">42</label>
</div><span class="fs-xs text-muted">57</span>
</li>
<li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="size-43">
<label class="form-check-label widget-filter-item-text" for="size-43">43</label>
</div><span class="fs-xs text-muted">30</span>
</li>
<li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="size-44">
<label class="form-check-label widget-filter-item-text" for="size-44">44</label>
</div><span class="fs-xs text-muted">61</span>
</li>
<li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="size-45">
<label class="form-check-label widget-filter-item-text" for="size-45">45</label>
</div><span class="fs-xs text-muted">23</span>
</li>
<li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="size-46">
<label class="form-check-label widget-filter-item-text" for="size-46">46</label>
</div><span class="fs-xs text-muted">19</span>
</li>
<li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="size-47">
<label class="form-check-label widget-filter-item-text" for="size-47">47</label>
</div><span class="fs-xs text-muted">15</span>
</li>
<li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="size-48">
<label class="form-check-label widget-filter-item-text" for="size-48">48</label>
</div><span class="fs-xs text-muted">12</span>
</li>
<li class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="size-49">
<label class="form-check-label widget-filter-item-text" for="size-49">49</label>
</div><span class="fs-xs text-muted">8</span>
</li>
<li class="widget-filter-item d-flex justify-content-between align-items-center">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="size-50">
<label class="form-check-label widget-filter-item-text" for="size-50">50</label>
</div><span class="fs-xs text-muted">6</span>
</li>
</ul>
</div>
<!-- Filter by Color-->
<div class="widget">
<h3 class="widget-title">Color</h3>
<div class="d-flex flex-wrap">
<div class="form-check form-option text-center mb-2 mx-1" style="width: 4rem;">
<input class="form-check-input" type="checkbox" id="color-blue-gray">
<label class="form-option-label rounded-circle" for="color-blue-gray"><span class="form-option-color rounded-circle" style="background-color: #b3c8db;"></span></label>
<label class="d-block fs-xs text-muted mt-n1" for="color-blue-gray">Blue-gray</label>
</div>
<div class="form-check form-option text-center mb-2 mx-1" style="width: 4rem;">
<input class="form-check-input" type="checkbox" id="color-burgundy">
<label class="form-option-label rounded-circle" for="color-burgundy"><span class="form-option-color rounded-circle" style="background-color: #ca7295;"></span></label>
<label class="d-block fs-xs text-muted mt-n1" for="color-burgundy">Burgundy</label>
</div>
<div class="form-check form-option text-center mb-2 mx-1" style="width: 4rem;">
<input class="form-check-input" type="checkbox" id="color-teal">
<label class="form-option-label rounded-circle" for="color-teal"><span class="form-option-color rounded-circle" style="background-color: #91c2c3;"></span></label>
<label class="d-block fs-xs text-muted mt-n1" for="color-teal">Teal</label>
</div>
<div class="form-check form-option text-center mb-2 mx-1" style="width: 4rem;">
<input class="form-check-input" type="checkbox" id="color-brown">
<label class="form-option-label rounded-circle" for="color-brown"><span class="form-option-color rounded-circle" style="background-color: #9a8480;"></span></label>
<label class="d-block fs-xs text-muted mt-n1" for="color-brown">Brown</label>
</div>
<div class="form-check form-option text-center mb-2 mx-1" style="width: 4rem;">
<input class="form-check-input" type="checkbox" id="color-coral-red">
<label class="form-option-label rounded-circle" for="color-coral-red"><span class="form-option-color rounded-circle" style="background-color: #ff7072;"></span></label>
<label class="d-block fs-xs text-muted mt-n1" for="color-coral-red">Coral red</label>
</div>
<div class="form-check form-option text-center mb-2 mx-1" style="width: 4rem;">
<input class="form-check-input" type="checkbox" id="color-navy">
<label class="form-option-label rounded-circle" for="color-navy"><span class="form-option-color rounded-circle" style="background-color: #696dc8;"></span></label>
<label class="d-block fs-xs text-muted mt-n1" for="color-navy">Navy</label>
</div>
<div class="form-check form-option text-center mb-2 mx-1" style="width: 4rem;">
<input class="form-check-input" type="checkbox" id="color-charcoal">
<label class="form-option-label rounded-circle" for="color-charcoal"><span class="form-option-color rounded-circle" style="background-color: #4e4d4d;"></span></label>
<label class="d-block fs-xs text-muted mt-n1" for="color-charcoal">Charcoal</label>
</div>
<div class="form-check form-option text-center mb-2 mx-1" style="width: 4rem;">
<input class="form-check-input" type="checkbox" id="color-sky-blue">
<label class="form-option-label rounded-circle" for="color-sky-blue"><span class="form-option-color rounded-circle" style="background-color: #8bcdf5;"></span></label>
<label class="d-block fs-xs text-muted mt-n1" for="color-sky-blue">Sky blue</label>
</div>
</div>
</div>
</div>
</div>
</aside>
</div>
</div>
<!-- Footer-->
<footer class="bg-dark pt-5">
<div class="container">
<div class="row pb-2">
<div class="col-md-4 col-sm-6">
<div class="widget widget-links widget-light pb-2 mb-4">
<h3 class="widget-title text-light">Shop departments</h3>
<ul class="widget-list">
<li class="widget-list-item"><a class="widget-list-link" href="#">Sneakers & Athletic</a></li>
<li class="widget-list-item"><a class="widget-list-link" href="#">Athletic Apparel</a></li>
<li class="widget-list-item"><a class="widget-list-link" href="#">Sandals</a></li>
<li class="widget-list-item"><a class="widget-list-link" href="#">Jeans</a></li>
<li class="widget-list-item"><a class="widget-list-link" href="#">Shirts & Tops</a></li>
<li class="widget-list-item"><a class="widget-list-link" href="#">Shorts</a></li>
<li class="widget-list-item"><a class="widget-list-link" href="#">T-Shirts</a></li>
<li class="widget-list-item"><a class="widget-list-link" href="#">Swimwear</a></li>
<li class="widget-list-item"><a class="widget-list-link" href="#">Clogs & Mules</a></li>
<li class="widget-list-item"><a class="widget-list-link" href="#">Bags & Wallets</a></li>
<li class="widget-list-item"><a class="widget-list-link" href="#">Accessories</a></li>
<li class="widget-list-item"><a class="widget-list-link" href="#">Sunglasses & Eyewear</a></li>
<li class="widget-list-item"><a class="widget-list-link" href="#">Watches</a></li>
</ul>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="widget widget-links widget-light pb-2 mb-4">
<h3 class="widget-title text-light">Account & shipping info</h3>
<ul class="widget-list">
<li class="widget-list-item"><a class="widget-list-link" href="#">Your account</a></li>
<li class="widget-list-item"><a class="widget-list-link" href="#">Shipping rates & policies</a></li>
<li class="widget-list-item"><a class="widget-list-link" href="#">Refunds & replacements</a></li>
<li class="widget-list-item"><a class="widget-list-link" href="#">Order tracking</a></li>
<li class="widget-list-item"><a class="widget-list-link" href="#">Delivery info</a></li>
<li class="widget-list-item"><a class="widget-list-link" href="#">Taxes & fees</a></li>
</ul>
</div>
<div class="widget widget-links widget-light pb-2 mb-4">
<h3 class="widget-title text-light">About us</h3>
<ul class="widget-list">
<li class="widget-list-item"><a class="widget-list-link" href="#">About company</a></li>
<li class="widget-list-item"><a class="widget-list-link" href="#">Our team</a></li>
<li class="widget-list-item"><a class="widget-list-link" href="#">Careers</a></li>
<li class="widget-list-item"><a class="widget-list-link" href="#">News</a></li>
</ul>
</div>
</div>
<div class="col-md-4">
<div class="widget pb-2 mb-4">
<h3 class="widget-title text-light pb-1">Stay informed</h3>
<form class="subscription-form validate" action="https://studio.us12.list-manage.com/subscribe/post?u=c7103e2c981361a6639545bd5&amp;id=29ca296126" method="post" name="mc-embedded-subscribe-form" target="_blank" novalidate>
<div class="input-group flex-nowrap"><i class="ci-mail position-absolute top-50 translate-middle-y text-muted fs-base ms-3"></i>
<input class="form-control rounded-start" type="email" name="EMAIL" placeholder="Your email" required>
<button class="btn btn-primary" type="submit" name="subscribe">Subscribe*</button>
</div>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true">
<input class="subscription-form-antispam" type="text" name="b_c7103e2c981361a6639545bd5_29ca296126" tabindex="-1">
</div>
<div class="form-text text-light opacity-50">*Subscribe to our newsletter to receive early discount offers, updates and new products info.</div>
<div class="subscription-status"></div>
</form>
</div>
<div class="widget pb-2 mb-4">
<h3 class="widget-title text-light pb-1">Download our app</h3>
<div class="d-flex flex-wrap">
<div class="me-2 mb-2"><a class="btn-market btn-apple" href="#" role="button"><span class="btn-market-subtitle">Download on the</span><span class="btn-market-title">App Store</span></a></div>
<div class="mb-2"><a class="btn-market btn-google" href="#" role="button"><span class="btn-market-subtitle">Download on the</span><span class="btn-market-title">Google Play</span></a></div>
</div>
</div>
</div>
</div>
</div>
<div class="pt-5 bg-darker">
<div class="container">
<div class="row pb-3">
<div class="col-md-3 col-sm-6 mb-4">
<div class="d-flex"><i class="ci-rocket text-primary" style="font-size: 2.25rem;"></i>
<div class="ps-3">
<h6 class="fs-base text-light mb-1">Fast and free delivery</h6>
<p class="mb-0 fs-ms text-light opacity-50">Free delivery for all orders over $200</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 mb-4">
<div class="d-flex"><i class="ci-currency-exchange text-primary" style="font-size: 2.25rem;"></i>
<div class="ps-3">
<h6 class="fs-base text-light mb-1">Money back guarantee</h6>
<p class="mb-0 fs-ms text-light opacity-50">We return money within 30 days</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 mb-4">
<div class="d-flex"><i class="ci-support text-primary" style="font-size: 2.25rem;"></i>
<div class="ps-3">
<h6 class="fs-base text-light mb-1">24/7 customer support</h6>
<p class="mb-0 fs-ms text-light opacity-50">Friendly 24/7 customer support</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 mb-4">
<div class="d-flex"><i class="ci-card text-primary" style="font-size: 2.25rem;"></i>
<div class="ps-3">
<h6 class="fs-base text-light mb-1">Secure online payment</h6>
<p class="mb-0 fs-ms text-light opacity-50">We possess SSL / Secure сertificate</p>
</div>
</div>
</div>
</div>
<hr class="hr-light mb-5">
<div class="row pb-2">
<div class="col-md-6 text-center text-md-start mb-4">
<div class="text-nowrap mb-4"><a class="d-inline-block align-middle mt-n1 me-3" href="#"><img class="d-block" src="img/footer-logo-light.png" width="117" alt="Cartzilla"></a>
<div class="btn-group dropdown disable-autohide">
<button class="btn btn-outline-light border-light btn-sm dropdown-toggle px-2" type="button" data-bs-toggle="dropdown"><img class="me-2" src="img/flags/en.png" width="20" alt="English">Eng / $</button>
<ul class="dropdown-menu my-1">
<li class="dropdown-item">
<select class="form-select form-select-sm">
<option value="usd">$ USD</option>
<option value="eur">€ EUR</option>
<option value="ukp">£ UKP</option>
<option value="jpy">¥ JPY</option>
</select>
</li>
<li><a class="dropdown-item pb-1" href="#"><img class="me-2" src="img/flags/fr.png" width="20" alt="Français">Français</a></li>
<li><a class="dropdown-item pb-1" href="#"><img class="me-2" src="img/flags/de.png" width="20" alt="Deutsch">Deutsch</a></li>
<li><a class="dropdown-item" href="#"><img class="me-2" src="img/flags/it.png" width="20" alt="Italiano">Italiano</a></li>
</ul>
</div>
</div>
<div class="widget widget-links widget-light">
<ul class="widget-list d-flex flex-wrap justify-content-center justify-content-md-start">
<li class="widget-list-item me-4"><a class="widget-list-link" href="#">Outlets</a></li>
<li class="widget-list-item me-4"><a class="widget-list-link" href="#">Affiliates</a></li>
<li class="widget-list-item me-4"><a class="widget-list-link" href="#">Support</a></li>
<li class="widget-list-item me-4"><a class="widget-list-link" href="#">Privacy</a></li>
<li class="widget-list-item me-4"><a class="widget-list-link" href="#">Terms of use</a></li>
</ul>
</div>
</div>
<div class="col-md-6 text-center text-md-end mb-4">
<div class="mb-3"><a class="btn-social bs-light bs-twitter ms-2 mb-2" href="#"><i class="ci-twitter"></i></a><a class="btn-social bs-light bs-facebook ms-2 mb-2" href="#"><i class="ci-facebook"></i></a><a class="btn-social bs-light bs-instagram ms-2 mb-2" href="#"><i class="ci-instagram"></i></a><a class="btn-social bs-light bs-pinterest ms-2 mb-2" href="#"><i class="ci-pinterest"></i></a><a class="btn-social bs-light bs-youtube ms-2 mb-2" href="#"><i class="ci-youtube"></i></a></div><img class="d-inline-block" src="img/cards-alt.png" width="187" alt="Payment methods">
</div>
</div>
<div class="pb-4 fs-xs text-light opacity-50 text-center text-md-start">© All rights reserved. Made by <a class="text-light" href="https://createx.studio/" target="_blank" rel="noopener">Createx Studio</a></div>
</div>
</div>
</footer>
<!-- Toolbar for handheld devices (Shop)-->
<div class="handheld-toolbar">
<div class="d-table table-layout-fixed w-100"><a class="d-table-cell handheld-toolbar-item" href="#" data-bs-toggle="offcanvas" data-bs-target="#shop-sidebar"><span class="handheld-toolbar-icon"><i class="ci-filter-alt"></i></span><span class="handheld-toolbar-label">Filters</span></a><a class="d-table-cell handheld-toolbar-item" href="account-wishlist.html"><span class="handheld-toolbar-icon"><i class="ci-heart"></i></span><span class="handheld-toolbar-label">Wishlist</span></a><a class="d-table-cell handheld-toolbar-item" href="javascript:void(0)" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" onclick="window.scrollTo(0, 0)"><span class="handheld-toolbar-icon"><i class="ci-menu"></i></span><span class="handheld-toolbar-label">Menu</span></a><a class="d-table-cell handheld-toolbar-item" href="shop-cart.html"><span class="handheld-toolbar-icon"><i class="ci-cart"></i><span class="badge bg-primary rounded-pill ms-1">4</span></span><span class="handheld-toolbar-label">$265.00</span></a></div>
</div>
<!-- Back To Top Button--><a class="btn-scroll-top" href="#top" data-scroll><span class="btn-scroll-top-tooltip text-muted fs-sm me-2">Top</span><i class="btn-scroll-top-icon ci-arrow-up"> </i></a>
<!-- Vendor scrits: js libraries and plugins-->
<script src="vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="vendor/simplebar/dist/simplebar.min.js"></script>
<script src="vendor/tiny-slider/dist/min/tiny-slider.js"></script>
<script src="vendor/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>
<script src="vendor/nouislider/distribute/nouislider.min.js"></script>
<script src="vendor/drift-zoom/dist/Drift.min.js"></script>
<!-- Main theme script-->
<script src="js/theme.min.js"></script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手