maison_alexandra/project-data/themeforest-beluxe-beauty-c.../Template/collection4.html

3879 lines
374 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Beluxe - Beauty & Cosmetics eCommerce HTML5 Template</title>
<meta name="description" content="Beluxe is a modern HTML5 beauty eCommerce template built with Bootstrap 5, ideal for cosmetics, skincare, makeup, and salon online stores.">
<meta name="keywords" content="beauty eCommerce template, cosmetics store HTML, skincare shop, makeup online store, Bootstrap 5 beauty theme, responsive beauty website">
<meta name="author" content="spacingtech_webify">
<!-- favicon -->
<link rel="shortcut icon" type="image/favicon" href="assets/image/index4/favicon.png">
<!-- plugin css -->
<link rel="stylesheet" type="text/css" href="assets/css/plugin.css">
<!-- theme css -->
<link rel="stylesheet" type="text/css" href="assets/css/theme4.css">
<!-- collection css -->
<link rel="stylesheet" type="text/css" href="assets/css/collection4.css">
</head>
<body>
<!-- preloader start -->
<div class="preloader position-fixed top-0 start-0 w-100 h-100 body-bg z-index-5">
<div class="loader-img position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center">
<img src="assets/image/index4/logo.png" class="width-88 width-xl-120 img-fluid" alt="logo">
</div>
</div>
<!-- preloader end -->
<!-- header start -->
<header id="header" class="main-header">
<!-- header-top start -->
<div class="header-top-area">
<!-- notification-bar start -->
<div class="notification-bar ptb-12 primary-bg">
<div class="container-fluid d-none d-md-block">
<div class="extra-color text-center">Receive 15% off & free shipping on orders over $90</div>
</div>
<div class="notification-marquee d-flex d-md-none overflow-hidden">
<div class="notification-marquee-row d-flex align-items-center">
<div class="extra-color psl-15 text-uppercase text-nowrap">Receive 15% off & free shipping on orders over $90</div>
<div class="extra-color psl-15 text-uppercase text-nowrap">Receive 15% off & free shipping on orders over $90</div>
</div>
<div class="notification-marquee-row d-flex align-items-center">
<div class="extra-color psl-15 text-uppercase text-nowrap">Receive 15% off & free shipping on orders over $90</div>
<div class="extra-color psl-15 text-uppercase text-nowrap">Receive 15% off & free shipping on orders over $90</div>
</div>
</div>
</div>
<!-- notification-bar end -->
<!-- header-top-first start -->
<div class="header-top-first ptb-10 ptb-xl-20">
<div class="container-fluid">
<div class="row align-items-center header-area">
<!-- header-logo start -->
<div class="col-6 col-xl-3 header-element header-logo">
<div class="header-theme-logo">
<a href="index.html" class="d-inline-block theme-logo">
<img src="assets/image/index4/logo.png" class="width-88 width-xl-112 img-fluid" alt="logo">
</a>
</div>
</div>
<!-- header-logo end -->
<!-- header-menu start -->
<div class="col-xl-6 d-none d-xl-block header-element header-menu">
<div class="mainmenu-content">
<div class="main-wrap">
<ul class="menu-ul d-flex flex-wrap justify-content-center">
<li class="menu-li">
<a href="index.html" class="menu-link d-flex align-items-center ptb-5 plr-15">
<span class="menu-title text-uppercase heading-weight">Home</span>
<span class="icon-16 fw-normal"><i class="ri-arrow-down-s-line d-block"></i></span>
</a>
<div class="menu-dropdown collapse position-absolute top-auto start-0 end-0 body-bg z-2 DropDownSlide box-shadow">
<div class="container ptb-30 text-center">
<div class="row row-cols-xl-5">
<div class="col">
<div class="banner-hover">
<a href="index.html" class="d-block banner-img br-hidden">
<img src="assets/image/menu/menu-banner1.jpg" class="w-100 img-fluid" alt="menu-banner1">
</a>
</div>
<a href="index.html" class="d-inline-block primary-link mst-15 heading-weight">01 Classic beauty store</a>
</div>
<div class="col">
<div class="banner-hover">
<a href="index2.html" class="d-block banner-img br-hidden">
<img src="assets/image/menu/menu-banner2.jpg" class="w-100 img-fluid" alt="menu-banner2">
</a>
</div>
<a href="index2.html" class="d-inline-block primary-link mst-15 heading-weight">02 Skincare Shop</a>
</div>
<div class="col">
<div class="banner-hover">
<a href="index3.html" class="d-block banner-img br-hidden">
<img src="assets/image/menu/menu-banner3.jpg" class="w-100 img-fluid" alt="menu-banner3">
</a>
</div>
<a href="index3.html" class="d-inline-block primary-link mst-15 heading-weight">03 Makeup & cosmetics</a>
</div>
<div class="col">
<div class="banner-hover">
<a href="index4.html" class="d-block banner-img br-hidden">
<img src="assets/image/menu/menu-banner4.jpg" class="w-100 img-fluid" alt="menu-banner4">
</a>
</div>
<a href="index4.html" class="d-inline-block primary-link mst-15 heading-weight">04 Fragrance boutique</a>
</div>
<div class="col">
<div class="banner-hover">
<a href="index5.html" class="d-block banner-img br-hidden">
<img src="assets/image/menu/menu-banner5.jpg" class="w-100 img-fluid" alt="menu-banner5">
</a>
</div>
<a href="index5.html" class="d-inline-block primary-link mst-15 heading-weight">05 Organic beauty</a>
</div>
</div>
</div>
</div>
</li>
<li class="menu-li">
<a href="collection.html" class="menu-link d-flex align-items-center ptb-5 plr-15">
<span class="menu-title text-uppercase heading-weight">Product</span>
<span class="icon-16 fw-normal"><i class="ri-arrow-down-s-line d-block"></i></span>
</a>
<div class="menu-dropdown collapse position-absolute top-auto start-0 end-0 body-bg z-2 DropDownSlide box-shadow">
<div class="container ptb-25">
<div class="row">
<div class="col-3">
<div class="shop-title">
<span class="d-block ptb-5 heading-weight"><a href="collection.html" class="d-inline-block primary-link">01 Classic card style</a></span>
<span class="d-block ptb-5 heading-weight"><a href="collection2.html" class="d-inline-block primary-link">02 Stylish card style</a></span>
<span class="d-block ptb-5 heading-weight"><a href="collection3.html" class="d-inline-block primary-link">03 Modern card style</a></span>
<span class="d-block ptb-5 heading-weight"><a href="collection4.html" class="d-inline-block primary-link">04 Overlay card style</a></span>
<span class="d-block ptb-5 heading-weight"><a href="collection5.html" class="d-inline-block primary-link">05 Elegant card style</a></span>
<span class="d-block ptb-5 heading-weight"><a href="collections.html" class="d-inline-block primary-link">Collections</a></span>
<span class="d-block ptb-5 heading-weight"><a href="collection-category.html" class="d-inline-block primary-link">Collection category</a></span>
<span class="d-block ptb-5 heading-weight"><a href="collection-without.html" class="d-inline-block primary-link">Collection full</a></span>
<span class="d-block ptb-5 heading-weight"><a href="collection.html" class="d-inline-block primary-link">Collection left</a></span>
<span class="d-block ptb-5 heading-weight"><a href="collection-right.html" class="d-inline-block primary-link">Collection right</a></span>
<span class="d-block ptb-5 heading-weight"><a href="collection-list-without.html" class="d-inline-block primary-link">Collection list full</a></span>
<span class="d-block ptb-5 heading-weight"><a href="collection-list.html" class="d-inline-block primary-link">Collection list left</a></span>
<span class="d-block ptb-5 heading-weight"><a href="collection-list-right.html" class="d-inline-block primary-link">Collection list right</a></span>
<span class="d-block ptb-5 heading-weight"><a href="search-empty.html" class="d-inline-block primary-link">Search empty</a></span>
<span class="d-block ptb-5 heading-weight"><a href="search-product.html" class="d-inline-block primary-link">Search product</a></span>
</div>
</div>
<div class="col-3">
<div class="d-block heading-color ptb-5 heading-weight">Product layout</div>
<div class="mst-10">
<span class="d-block ptb-5"><a href="product.html" class="d-inline-block body-primary-color">01 Bottom thumbnail tab details</a></span>
<span class="d-block ptb-5"><a href="product2.html" class="d-inline-block body-primary-color">02 Left thumbnail accordion details</a></span>
<span class="d-block ptb-5"><a href="product3.html" class="d-inline-block body-primary-color">03 Right thumbnail details</a></span>
<span class="d-block ptb-5"><a href="product4.html" class="d-inline-block body-primary-color">04 Modern layout</a></span>
<span class="d-block ptb-5"><a href="product5.html" class="d-inline-block body-primary-color">05 Creative layout</a></span>
<span class="d-block ptb-5"><a href="product6.html" class="d-inline-block body-primary-color">06 Solo thumbnail tab details</a></span>
<span class="d-block ptb-5"><a href="product7.html" class="d-inline-block body-primary-color">07 Classic template</a></span>
<span class="d-block ptb-5"><a href="product8.html" class="d-inline-block body-primary-color">08 Single grid layout</a></span>
<span class="d-block ptb-5"><a href="product9.html" class="d-inline-block body-primary-color">09 Two grid layout</a></span>
<span class="d-block ptb-5"><a href="product-comparison.html" class="d-inline-block body-primary-color">Product comparision</a></span>
</div>
</div>
<div class="col-3">
<div class="d-block heading-color ptb-5 heading-weight">Product features</div>
<div class="mst-10">
<span class="d-block ptb-5"><a href="product.html" class="d-inline-block body-primary-color">Special promotions offers</a></span>
<span class="d-block ptb-5"><a href="product.html" class="d-inline-block body-primary-color">Ask a question</a></span>
<span class="d-block ptb-5"><a href="product.html" class="d-inline-block body-primary-color">Size guide</a></span>
<span class="d-block ptb-5"><a href="product.html" class="d-inline-block body-primary-color">Pincode service availability</a></span>
<span class="d-block ptb-5"><a href="product.html" class="d-inline-block body-primary-color">Product wishlist</a></span>
<span class="d-block ptb-5"><a href="product.html" class="d-inline-block body-primary-color">Top social buzz</a></span>
<span class="d-block ptb-5"><a href="product.html" class="d-inline-block body-primary-color">Product compare option</a></span>
<span class="d-block ptb-5"><a href="product9.html" class="d-inline-block body-primary-color">Back in stock</a></span>
<span class="d-block ptb-5"><a href="product.html" class="d-inline-block body-primary-color">Quick buy now button</a></span>
<span class="d-block ptb-5"><a href="product8.html" class="d-inline-block body-primary-color">Pre-order</a></span>
<span class="d-block ptb-5"><a href="product2.html" class="d-inline-block body-primary-color">Frequently bought together</a></span>
<span class="d-block ptb-5"><a href="product.html" class="d-inline-block body-primary-color">Pickup availability option</a></span>
<span class="d-block ptb-5"><a href="product.html" class="d-inline-block body-primary-color">Delivery options details</a></span>
<span class="d-block ptb-5"><a href="product.html" class="d-inline-block body-primary-color">Trusted payment badge</a></span>
<span class="d-block ptb-5"><a href="product.html" class="d-inline-block body-primary-color">Recommended product</a></span>
</div>
</div>
<div class="col-3">
<div class="d-block heading-color ptb-5 heading-weight">Product details</div>
<div class="mst-10">
<span class="d-block ptb-5"><a href="product.html" class="d-inline-block body-primary-color">Currently views count</a></span>
<span class="d-block ptb-5"><a href="product.html" class="d-inline-block body-primary-color">Stock count down</a></span>
<span class="d-block ptb-5"><a href="product.html" class="d-inline-block body-primary-color">Items sold count</a></span>
<span class="d-block ptb-5"><a href="product.html" class="d-inline-block body-primary-color">Deal count down timer</a></span>
<span class="d-block ptb-5"><a href="product.html" class="d-inline-block body-primary-color">Product short description</a></span>
<span class="d-block ptb-5"><a href="product.html" class="d-inline-block body-primary-color">Color swatch option</a></span>
<span class="d-block ptb-5"><a href="product2.html" class="d-inline-block body-primary-color">Image swatch option</a></span>
<span class="d-block ptb-5"><a href="product3.html" class="d-inline-block body-primary-color">Dropdown select option</a></span>
<span class="d-block ptb-5"><a href="product.html" class="d-inline-block body-primary-color">Product sku code</a></span>
<span class="d-block ptb-5"><a href="product.html" class="d-inline-block body-primary-color">Tab description</a></span>
<span class="d-block ptb-5"><a href="product3.html" class="d-inline-block body-primary-color">Product detailed inline description</a></span>
<span class="d-block ptb-5"><a href="product4.html" class="d-inline-block body-primary-color">Accordian description</a></span>
<span class="d-block ptb-5"><a href="product7.html" class="d-inline-block body-primary-color">Vertical-tab description</a></span>
<span class="d-block ptb-5"><a href="product8.html" class="d-inline-block body-primary-color">Product flat inline description</a></span>
<span class="d-block ptb-5"><a href="product.html" class="d-inline-block body-primary-color">Product video</a></span>
<span class="d-block ptb-5"><a href="product.html" class="d-inline-block body-primary-color">Product review</a></span>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="menu-li">
<a href="collection.html" class="menu-link d-flex align-items-center ptb-5 plr-15">
<span class="menu-title text-uppercase heading-weight">Shop</span>
<span class="icon-16 fw-normal"><i class="ri-arrow-down-s-line d-block"></i></span>
</a>
<div class="menu-dropdown menu-mega collapse position-absolute top-auto start-0 end-0 body-bg z-2 DropDownSlide box-shadow">
<div class="container ptb-25">
<div class="menu-overview">
<div class="heading-color ptb-5 heading-weight">Account</div>
<span class="d-block ptb-5"><a href="login.html" class="d-inline-block body-primary-color">Login</a></span>
<span class="d-block ptb-5"><a href="forgot-password.html" class="d-inline-block body-primary-color">Forgot password</a></span>
<span class="d-block ptb-5"><a href="register.html" class="d-inline-block body-primary-color">Register</a></span>
<div class="heading-color ptb-5 heading-weight">Other</div>
<span class="d-block ptb-5"><a href="404.html" class="d-inline-block body-primary-color">404</a></span>
<span class="d-block ptb-5"><a href="cart-empty.html" class="d-inline-block body-primary-color">Cart empty</a></span>
<span class="d-block ptb-5"><a href="cart-page.html" class="d-inline-block body-primary-color">Cart</a></span>
<span class="d-block ptb-5"><a href="checkout.html" class="d-inline-block body-primary-color">Checkout</a></span>
<span class="d-block ptb-5"><a href="coming-soon.html" class="d-inline-block body-primary-color">Comingsoon</a></span>
<span class="d-block ptb-5"><a href="invoice.html" class="d-inline-block body-primary-color">Invoice</a></span>
<div class="heading-color ptb-5 heading-weight">Order</div>
<span class="d-block ptb-5"><a href="order-complete.html" class="d-inline-block body-primary-color">Order complete</a></span>
<span class="d-block ptb-5"><a href="order.html" class="d-inline-block body-primary-color">Order</a></span>
<span class="d-block ptb-5"><a href="order-info.html" class="d-inline-block body-primary-color">Order info</a></span>
<span class="d-block ptb-5"><a href="order-info-default.html" class="d-inline-block body-primary-color">Order default</a></span>
<span class="d-block ptb-5"><a href="order-info-unfulfilled.html" class="d-inline-block body-primary-color">Order unfulfilled</a></span>
<span class="d-block ptb-5"><a href="order-info-fulfilled.html" class="d-inline-block body-primary-color">Order fulfilled</a></span>
<span class="d-block ptb-5"><a href="order-info-inprogress.html" class="d-inline-block body-primary-color">Order inprogress</a></span>
<span class="d-block ptb-5"><a href="order-info-intransit.html" class="d-inline-block body-primary-color">Order intransit</a></span>
<span class="d-block ptb-5"><a href="order-info-indelivery.html" class="d-inline-block body-primary-color">Order indelivery</a></span>
<span class="d-block ptb-5"><a href="order-info-delivered.html" class="d-inline-block body-primary-color">Order delivered</a></span>
<span class="d-block ptb-5"><a href="order-info-pickup.html" class="d-inline-block body-primary-color">Order pickup</a></span>
<span class="d-block ptb-5"><a href="order-info-cancel.html" class="d-inline-block body-primary-color">Order cancel</a></span>
<div class="heading-color ptb-5 heading-weight">Profile</div>
<span class="d-block ptb-5"><a href="profile.html" class="d-inline-block body-primary-color">Profile</a></span>
<span class="d-block ptb-5"><a href="profile-address.html" class="d-inline-block body-primary-color">Profile address</a></span>
<span class="d-block ptb-5"><a href="profile-notification.html" class="d-inline-block body-primary-color">Profile notification</a></span>
<span class="d-block ptb-5"><a href="profile-order.html" class="d-inline-block body-primary-color">Profile order</a></span>
<span class="d-block ptb-5"><a href="profile-order-empty.html" class="d-inline-block body-primary-color">Profile order empty</a></span>
<span class="d-block ptb-5"><a href="profile-ticket.html" class="d-inline-block body-primary-color">Profile ticket</a></span>
<span class="d-block ptb-5"><a href="profile-ticket-empty.html" class="d-inline-block body-primary-color">Profile ticket empty</a></span>
<span class="d-block ptb-5"><a href="profile-wishlist.html" class="d-inline-block body-primary-color">Profile wishlist</a></span>
<span class="d-block ptb-5"><a href="profile-wishlist-empty.html" class="d-inline-block body-primary-color">Profile wishlist empty</a></span>
<div class="heading-color ptb-5 heading-weight">Ticket</div>
<span class="d-block ptb-5"><a href="ticket.html" class="d-inline-block body-primary-color">Ticket</a></span>
<span class="d-block ptb-5"><a href="ticket-create.html" class="d-inline-block body-primary-color">Ticket create</a></span>
<span class="d-block ptb-5"><a href="ticket-edit.html" class="d-inline-block body-primary-color">Ticket edit</a></span>
<span class="d-block ptb-5"><a href="ticket-info.html" class="d-inline-block body-primary-color">Ticket info</a></span>
<div class="heading-color ptb-5 heading-weight">Policies</div>
<span class="d-block ptb-5"><a href="cancellation.html" class="d-inline-block body-primary-color">Cancellation</a></span>
<span class="d-block ptb-5"><a href="cookie.html" class="d-inline-block body-primary-color">Cookie</a></span>
<span class="d-block ptb-5"><a href="legal.html" class="d-inline-block body-primary-color">Legal</a></span>
<span class="d-block ptb-5"><a href="payment-policy.html" class="d-inline-block body-primary-color">Payment policy</a></span>
<span class="d-block ptb-5"><a href="privacy-policy.html" class="d-inline-block body-primary-color">Privacy policy</a></span>
<span class="d-block ptb-5"><a href="return-policy.html" class="d-inline-block body-primary-color">Return policy</a></span>
<span class="d-block ptb-5"><a href="shipping-policy.html" class="d-inline-block body-primary-color">Shipping policy</a></span>
<span class="d-block ptb-5"><a href="terms-condition.html" class="d-inline-block body-primary-color">Terms & condition</a></span>
<div class="heading-color ptb-5 heading-weight">Features</div>
<span class="d-block ptb-5"><a href="button.html" class="d-inline-block body-primary-color">Button</a></span>
<span class="d-block ptb-5"><a href="cart-drawer-empty.html" class="d-inline-block body-primary-color">Cart drawer empty</a></span>
</div>
</div>
</div>
</li>
<li class="menu-li">
<a href="blog.html" class="menu-link d-flex align-items-center ptb-5 plr-15">
<span class="menu-title text-uppercase heading-weight">Blog</span>
<span class="icon-16 fw-normal"><i class="ri-arrow-down-s-line d-block"></i></span>
</a>
<div class="menu-dropdown menu-sub collapse position-absolute top-auto body-bg z-2 DropDownSlide box-shadow">
<ul class="menudrop-ul ptb-25">
<li class="menudrop-li">
<div class="ptb-5 plr-30"><a href="blog-without.html" class="d-inline-block body-primary-color">Blog</a></div>
</li>
<li class="menudrop-li">
<div class="ptb-5 plr-30"><a href="blog.html" class="d-inline-block body-primary-color">Blog left</a></div>
</li>
<li class="menudrop-li">
<div class="ptb-5 plr-30"><a href="blog-right.html" class="d-inline-block body-primary-color">Blog right</a></div>
</li>
<li class="menudrop-li">
<div class="ptb-5 plr-30"><a href="article-without.html" class="d-inline-block body-primary-color">Article</a></div>
</li>
<li class="menudrop-li">
<div class="ptb-5 plr-30"><a href="article.html" class="d-inline-block body-primary-color">Article left</a></div>
</li>
<li class="menudrop-li">
<div class="ptb-5 plr-30"><a href="article-right.html" class="d-inline-block body-primary-color">Article right</a></div>
</li>
<li class="menudrop-li">
<div class="ptb-5 plr-30"><a href="search-blog.html" class="d-inline-block body-primary-color">Search blog</a></div>
</li>
</ul>
</div>
</li>
<li class="menu-li">
<a href="javascript:void(0)" class="menu-link d-flex align-items-center ptb-5 plr-15">
<span class="menu-title text-uppercase heading-weight">Page</span>
<span class="icon-16 fw-normal"><i class="ri-arrow-down-s-line d-block"></i></span>
</a>
<div class="menu-dropdown menu-sub collapse position-absolute top-auto body-bg z-2 DropDownSlide box-shadow">
<ul class="menudrop-ul ptb-25">
<li class="menudrop-li position-relative">
<div class="menu-sublink ptb-5 plr-30">
<a href="about-us.html" class="d-flex flex-wrap align-items-center">
<span class="menusub-title width-calc-16">About us</span>
<span class="width-16 icon-16 fw-normal"><i class="ri-arrow-right-s-line d-block lh-1"></i></span>
</a>
</div>
<div class="menusub-dropdown collapse position-absolute w-100 body-bg DropDownSlide box-shadow">
<ul class="menusub-ul ptb-25">
<li class="menusub-li">
<span class="d-block ptb-5 plr-30"><a href="about-us.html" class="d-inline-block body-primary-color">01 Modern aboutus</a></span>
</li>
<li class="menusub-li">
<span class="d-block ptb-5 plr-30"><a href="about-us2.html" class="d-inline-block body-primary-color">02 Creative aboutus</a></span>
</li>
</ul>
</div>
</li>
<li class="menudrop-li position-relative">
<div class="menu-sublink ptb-5 plr-30">
<a href="contact-us.html" class="d-flex flex-wrap align-items-center">
<span class="menusub-title width-calc-16">Contact us</span>
<span class="width-16 icon-16 fw-normal"><i class="ri-arrow-right-s-line d-block lh-1"></i></span>
</a>
</div>
<div class="menusub-dropdown collapse position-absolute w-100 body-bg DropDownSlide box-shadow">
<ul class="menusub-ul ptb-25">
<li class="menusub-li">
<span class="d-block ptb-5 plr-30"><a href="contact-us.html" class="d-inline-block body-primary-color">01 Creative contactus</a></span>
</li>
<li class="menusub-li">
<span class="d-block ptb-5 plr-30"><a href="contact-us2.html" class="d-inline-block body-primary-color">02 Standard contactus</a></span>
</li>
</ul>
</div>
</li>
<li class="menudrop-li position-relative">
<div class="menu-sublink ptb-5 plr-30"><a href="faqs.html" class="d-block">Faqs</a></div>
</li>
<li class="menudrop-li position-relative">
<div class="menu-sublink ptb-5 plr-30"><a href="sitemap.html" class="d-block">Sitemap</a></div>
</li>
<li class="menudrop-li position-relative">
<div class="menu-sublink ptb-5 plr-30"><a href="store.html" class="d-block">Store</a></div>
</li>
<li class="menudrop-li position-relative">
<div class="menu-sublink ptb-5 plr-30"><a href="track-order.html" class="d-block">Track order</a></div>
</li>
<li class="menudrop-li position-relative">
<div class="menu-sublink ptb-5 plr-30">
<a href="wishlist.html" class="d-flex flex-wrap align-items-center">
<span class="menusub-title width-calc-16">Wishlist</span>
<span class="width-16 icon-16 fw-normal"><i class="ri-arrow-right-s-line d-block lh-1"></i></span>
</a>
</div>
<div class="menusub-dropdown collapse position-absolute w-100 body-bg DropDownSlide box-shadow">
<ul class="menusub-ul ptb-25">
<li class="menusub-li">
<span class="d-block ptb-5 plr-30"><a href="wishlist.html" class="d-inline-block body-primary-color">Wishlist</a></span>
</li>
<li class="menusub-li">
<span class="d-block ptb-5 plr-30"><a href="wishlist-empty.html" class="d-inline-block body-primary-color">Wishlist empty</a></span>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- header-menu end -->
<!-- header-icon start -->
<div class="col-6 col-xl-3 header-element header-icon">
<div class="header-icon-block d-flex justify-content-end">
<ul class="ul-mt15 flex-nowrap align-items-center header-icon-element">
<li class="header-icon-wrap toggler-wrap d-xl-none">
<div class="header-icon-wrapper">
<a href="javascript:void(0)" class="d-block header-icon-toggler toggler-btn" aria-label="Menu toggler button">
<span class="d-block header-block-icon icon-16"><i class="ri-menu-line"></i></span>
</a>
</div>
</li>
<li class="header-icon-wrap search-wrap d-md-block">
<div class="header-icon-wrapper">
<a href="#searchmodal" class="d-block header-icon-search" data-bs-toggle="modal" aria-label="Search modal">
<span class="d-block header-block-icon icon-16"><i class="ri-search-line"></i></span>
</a>
</div>
</li>
<li class="header-icon-wrap user-wrap d-none d-md-block">
<div class="header-icon-wrapper">
<a href="login.html" class="d-block header-icon-user" aria-label="Login user">
<span class="d-block header-block-icon icon-16"><i class="ri-user-3-line"></i></span>
</a>
</div>
</li>
<li class="header-icon-wrap wishlist-wrap d-none d-md-block">
<div class="header-icon-wrapper">
<a href="wishlist.html" class="d-block header-icon-wishlist">
<span class="header-block-icon-wrap primary-link ul-mt5 align-items-center">
<span class="header-block-icon icon-16"><i class="ri-heart-line"></i></span>
<span class="heading-weight">-</span>
<span class="header-block-counter wishlist-counter">4</span>
</span>
</a>
</div>
</li>
<li class="header-icon-wrap cart-wrap d-none d-md-block">
<div class="header-icon-wrapper">
<a href="javascript:void(0)" class="d-block header-icon-cart js-cart-drawer">
<span class="header-block-icon-wrap primary-link ul-mt5 align-items-center"></span>
<span class="header-block-icon icon-16"><i class="ri-shopping-bag-3-line"></i>
<span class="heading-weight">-</span>
<span class="header-block-counter cart-counter">4</span>
</span>
</a>
</div>
</li>
</ul>
</div>
</div>
<!-- header-icon end -->
</div>
</div>
</div>
<!-- header-top-first end -->
</div>
<!-- header-top end -->
</header>
<!-- header end -->
<!-- breadcrumb-area start -->
<div class="breadcrumb-area ptb-30 bg-img text-center" data-bgimg="assets/image/other/breadcrumb-bgimg3.jpg">
<div class="container">
<span class="d-block primary-color"><a href="index.html" class="primary-color">Home</a> / Collection left sidebar</span>
<h2 class="font-24 font-xl-32 mst-2 mst-xl-6">Collection left sidebar</h2>
</div>
</div>
<!-- breadcrumb-area end -->
<!-- main start -->
<main id="main">
<!-- shop-content start -->
<section class="shop-content section-ptb">
<div class="container">
<div class="row align-items-xl-start">
<!-- shop-sidebar start -->
<div class="col-12 col-xl-3 p-xl-sticky top-0">
<div class="shop-sidebar-wrap shop-filter-sidebar" data-animate="animate__fadeIn">
<button type="button" class="shop-sidebar-close body-secondary-color icon-16 position-absolute" aria-label="Close"><i class="ri-close-large-line d-block lh-1"></i></button>
<form class="shop-form" action="javascript:void(0)" id="shopForm">
<!-- shop-sidebar categories start -->
<div class="shop-sidebar shop-categories">
<h6 class="font-18">Categories</h6>
<div class="shop-cat-post mst-19">
<div class="shop-cat ul-mtm-15">
<a href="collection-category.html" class="body-primary-color d-flex align-items-center justify-content-between">
<span>Collection category</span>
<span>12</span>
</a>
<a href="collection-without.html" class="body-primary-color d-flex align-items-center justify-content-between">
<span>Collection without</span>
<span>12</span>
</a>
<a href="javascript:void(0)" class="primary-color d-flex align-items-center justify-content-between">
<span>Collection left</span>
<span>12</span>
</a>
<a href="collection-right.html" class="body-primary-color d-flex align-items-center justify-content-between">
<span>Collection right</span>
<span>12</span>
</a>
<a href="collection-list-without.html" class="body-primary-color d-flex align-items-center justify-content-between">
<span>Collection-list without</span>
<span>12</span>
</a>
<a href="collection-list.html" class="body-primary-color d-flex align-items-center justify-content-between">
<span>Collection-list left</span>
<span>12</span>
</a>
<a href="collection-list-right.html" class="body-primary-color d-flex align-items-center justify-content-between">
<span>Collection-list right</span>
<span>12</span>
</a>
</div>
</div>
</div>
<!-- shop-sidebar categories end -->
<!-- shop-sidebar availability start -->
<div class="shop-sidebar availability">
<h6 class="font-18">Availability</h6>
<div class="shop-header d-flex justify-content-between mst-19">
<span class="shop-selected">2 selected</span>
<button type="submit" class="shop-reset body-secondary-color text-decoration-underline">Reset</button>
</div>
<div class="shop-element mst-20">
<ul class="shop-filters ul-mtm-15">
<li>
<label class="cust-checkbox-label d-flex align-items-center justify-content-between">
<input type="checkbox" id="shop-in-stock" name="shop-in-stock" class="cust-checkbox" value="in-stock" checked>
<span class="d-block cust-check"></span>
<span class="shop-name me-auto">In stock</span>
<span class="shop-count">12</span>
</label>
</li>
<li>
<label class="cust-checkbox-label d-flex align-items-center justify-content-between disabled">
<input type="checkbox" id="shop-out-of-stock" name="shop-out-of-stock" class="cust-checkbox" value="out-of-stock" checked>
<span class="d-block cust-check"></span>
<span class="shop-name me-auto">Out of stock</span>
<span class="shop-count">1</span>
</label>
</li>
</ul>
</div>
</div>
<!-- shop-sidebar availability end -->
<!-- shop-sidebar price start -->
<div class="shop-sidebar price">
<h6 class="font-18">Price</h6>
<div class="shop-header d-flex justify-content-between mst-19">
<span class="shop-selected">The highest price is $89.00</span>
<button type="submit" class="shop-reset body-secondary-color text-decoration-underline">Reset</button>
</div>
<div class="shop-element mst-25">
<div class="price-input-range">
<div class="price-range">
<div class="price-container">
<div class="price-slider"></div>
</div>
<div class="range-input position-relative">
<input type="range" class="min-range position-absolute w-100 p-0 bg-transparent border-0" min="0" max="89" value="0" step="1">
<input type="range" class="max-range position-absolute w-100 p-0 bg-transparent border-0" min="0" max="89" value="89" step="1">
</div>
</div>
<div class="price-input d-flex align-items-center mst-30">
<div class="price-field position-relative w-100">
<span class="price-input-title position-absolute top-0 start-0">From</span>
<span class="price-input-prefix position-absolute top-50 translate-middle-y">$</span>
<input type="number" id="min-price" name="min-price" class="min-input w-100 h-100 text-end" min="0" max="89" value="0">
</div>
<div class="price-input-separator mlr-15">-</div>
<div class="price-field position-relative w-100">
<span class="price-input-title position-absolute top-0 start-0">To</span>
<span class="price-input-prefix position-absolute top-50 translate-middle-y">$</span>
<input type="number" id="max-price" name="max-price" class="max-input w-100 h-100 text-end" min="0" max="89" value="89">
</div>
</div>
</div>
</div>
</div>
<!-- shop-sidebar price end -->
<!-- shop-sidebar color start -->
<div class="shop-sidebar color">
<h6 class="font-18">Color</h6>
<div class="shop-header d-flex justify-content-between mst-19">
<span class="shop-selected">1 selected</span>
<button type="submit" class="shop-reset body-secondary-color text-decoration-underline">Reset</button>
</div>
<div class="shop-element mst-25">
<ul class="shop-filters ul-mt10">
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-aliceblue" name="shop-aliceblue" class="cust-checkbox" value="aliceblue" checked>
<span class="d-block cust-check aliceblue"></span>
</label>
</li>
<li>
<label class="cust-checkbox-label disabled">
<input type="checkbox" id="shop-antiquewhite" name="shop-antiquewhite" class="cust-checkbox" value="antiquewhite">
<span class="d-block cust-check antiquewhite"></span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-azure" name="shop-azure" class="cust-checkbox" value="azure">
<span class="d-block cust-check azure"></span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-beige" name="shop-beige" class="cust-checkbox" value="beige">
<span class="d-block cust-check beige"></span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-bisque" name="shop-bisque" class="cust-checkbox" value="bisque">
<span class="d-block cust-check bisque"></span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-black" name="shop-black" class="cust-checkbox" value="black">
<span class="d-block cust-check black"></span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-cadetblue" name="shop-cadetblue" class="cust-checkbox" value="cadetblue">
<span class="d-block cust-check cadetblue"></span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-chocolate" name="shop-chocolate" class="cust-checkbox" value="chocolate">
<span class="d-block cust-check chocolate"></span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-coral" name="shop-coral" class="cust-checkbox" value="coral">
<span class="d-block cust-check coral"></span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-darkcyan" name="shop-darkcyan" class="cust-checkbox" value="darkcyan">
<span class="d-block cust-check darkcyan"></span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-darkgoldenrod" name="shop-darkgoldenrod" class="cust-checkbox" value="darkgoldenrod">
<span class="d-block cust-check darkgoldenrod"></span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-darkgray" name="shop-darkgray" class="cust-checkbox" value="darkgray">
<span class="d-block cust-check darkgray"></span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-floralwhite" name="shop-floralwhite" class="cust-checkbox" value="floralwhite">
<span class="d-block cust-check floralwhite"></span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-gainsboro" name="shop-gainsboro" class="cust-checkbox" value="gainsboro">
<span class="d-block cust-check gainsboro"></span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-ghostwhite" name="shop-ghostwhite" class="cust-checkbox" value="ghostwhite">
<span class="d-block cust-check ghostwhite"></span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-gold" name="shop-gold" class="cust-checkbox" value="gold">
<span class="d-block cust-check gold"></span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-honeydew" name="shop-honeydew" class="cust-checkbox" value="honeydew">
<span class="d-block cust-check honeydew"></span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-hotpink" name="shop-hotpink" class="cust-checkbox" value="hotpink">
<span class="d-block cust-check hotpink"></span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-ivory" name="shop-ivory" class="cust-checkbox" value="ivory">
<span class="d-block cust-check ivory"></span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-khaki" name="shop-khaki" class="cust-checkbox" value="khaki">
<span class="d-block cust-check khaki"></span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-lavender" name="shop-lavender" class="cust-checkbox" value="lavender">
<span class="d-block cust-check lavender"></span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-lavenderblush" name="shop-lavenderblush" class="cust-checkbox" value="lavenderblush">
<span class="d-block cust-check lavenderblush"></span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-lemonchiffon" name="shop-lemonchiffon" class="cust-checkbox" value="lemonchiffon">
<span class="d-block cust-check lemonchiffon"></span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-lightblue" name="shop-lightblue" class="cust-checkbox" value="lightblue">
<span class="d-block cust-check lightblue"></span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-mintcream" name="shop-mintcream" class="cust-checkbox" value="mintcream">
<span class="d-block cust-check mintcream"></span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-navajowhite" name="shop-navajowhite" class="cust-checkbox" value="navajowhite">
<span class="d-block cust-check navajowhite"></span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-oldlace" name="shop-oldlace" class="cust-checkbox" value="oldlace">
<span class="d-block cust-check oldlace"></span>
</label>
</li>
</ul>
</div>
</div>
<!-- shop-sidebar color end -->
<!-- shop-sidebar size start -->
<div class="shop-sidebar size">
<h6 class="font-18">Size</h6>
<div class="shop-header d-flex justify-content-between mst-19">
<span class="shop-selected">1 selected</span>
<button type="submit" class="shop-reset body-secondary-color text-decoration-underline">Reset</button>
</div>
<div class="shop-element mst-25">
<ul class="shop-filters ul-mt5">
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-10ml" name="shop-10ml" class="cust-checkbox" value="10ml" checked>
<span class="d-flex align-items-center justify-content-center cust-check">10ml</span>
</label>
</li>
<li>
<label class="cust-checkbox-label disabled">
<input type="checkbox" id="shop-20ml" name="shop-20ml" class="cust-checkbox" value="20ml">
<span class="d-flex align-items-center justify-content-center cust-check">20ml</span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-30ml" name="shop-30ml" class="cust-checkbox" value="30ml">
<span class="d-flex align-items-center justify-content-center cust-check">30ml</span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-50ml" name="shop-50ml" class="cust-checkbox" value="50ml">
<span class="d-flex align-items-center justify-content-center cust-check">50ml</span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-60ml" name="shop-60ml" class="cust-checkbox" value="60ml">
<span class="d-flex align-items-center justify-content-center cust-check">60ml</span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-100ml" name="shop-100ml" class="cust-checkbox" value="100ml">
<span class="d-flex align-items-center justify-content-center cust-check">100ml</span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-200ml" name="shop-200ml" class="cust-checkbox" value="200ml">
<span class="d-flex align-items-center justify-content-center cust-check">200ml</span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-single" name="shop-single" class="cust-checkbox" value="single">
<span class="d-flex align-items-center justify-content-center cust-check">Single</span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-pack-of-3" name="shop-pack-of-3" class="cust-checkbox" value="pack-of-3">
<span class="d-flex align-items-center justify-content-center cust-check">Pack of 3</span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-20-strips" name="shop-20-strips" class="cust-checkbox" value="20-strips">
<span class="d-flex align-items-center justify-content-center cust-check">20 Strips</span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-40-strips" name="shop-40-strips" class="cust-checkbox" value="40-strips">
<span class="d-flex align-items-center justify-content-center cust-check">40 Strips</span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-250g" name="shop-250g" class="cust-checkbox" value="250g">
<span class="d-flex align-items-center justify-content-center cust-check">250g</span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-500g" name="shop-500g" class="cust-checkbox" value="500g">
<span class="d-flex align-items-center justify-content-center cust-check">500g</span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-small" name="shop-small" class="cust-checkbox" value="small">
<span class="d-flex align-items-center justify-content-center cust-check">Small</span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-large" name="shop-large" class="cust-checkbox" value="large">
<span class="d-flex align-items-center justify-content-center cust-check">Large</span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-travel" name="shop-travel" class="cust-checkbox" value="travel">
<span class="d-flex align-items-center justify-content-center cust-check">Travel</span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-full-set" name="shop-full-set" class="cust-checkbox" value="full-set">
<span class="d-flex align-items-center justify-content-center cust-check">Full set</span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-standard" name="shop-standard" class="cust-checkbox" value="standard">
<span class="d-flex align-items-center justify-content-center cust-check">Standard</span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-pro" name="shop-pro" class="cust-checkbox" value="pro">
<span class="d-flex align-items-center justify-content-center cust-check">Pro</span>
</label>
</li>
</ul>
</div>
</div>
<!-- shop-sidebar size end -->
<!-- shop-sidebar tag start -->
<div class="shop-sidebar tag">
<h6 class="font-18">Tag</h6>
<div class="shop-header d-flex justify-content-between mst-19">
<span class="shop-selected">1 selected</span>
<button type="submit" class="shop-reset body-secondary-color text-decoration-underline">Reset</button>
</div>
<div class="shop-element mst-25">
<ul class="shop-filters ul-mt5">
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-skincare" name="shop-skincare" class="cust-checkbox" value="skincare" checked>
<span class="d-block cust-check">Skincare</span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-makeup" name="shop-makeup" class="cust-checkbox" value="makeup">
<span class="d-block cust-check">Makeup</span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-hair-care-styling" name="shop-hair-care-styling" class="cust-checkbox" value="hair-care-styling">
<span class="d-block cust-check">Hair-care-styling</span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-hair-removal" name="shop-hair-removal" class="cust-checkbox" value="hair-removal">
<span class="d-block cust-check">Hair-removal</span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-fragrances" name="shop-fragrances" class="cust-checkbox" value="fragrances">
<span class="d-block cust-check">Fragrances</span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-nails-manicure" name="shop-nails-manicure" class="cust-checkbox" value="nails-manicure">
<span class="d-block cust-check">Nails-manicure</span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-bath-body" name="shop-bath-body" class="cust-checkbox" value="bath-body">
<span class="d-block cust-check">Bath-body</span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-tools-accessories" name="shop-tools-accessories" class="cust-checkbox" value="tools-accessories">
<span class="d-block cust-check">Tools-accessories</span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-natural-organic-beauty" name="shop-natural-organic-beauty" class="cust-checkbox" value="natural-organic-beauty">
<span class="d-block cust-check">Natural-organic-beauty</span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-mens-grooming" name="shop-mens-grooming" class="cust-checkbox" value="mens-grooming">
<span class="d-block cust-check">Mens-grooming</span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-beauty-devices" name="shop-beauty-devices" class="cust-checkbox" value="beauty-devices">
<span class="d-block cust-check">Beauty-devices</span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="checkbox" id="shop-gift-sets-bundles" name="shop-gift-sets-bundles" class="cust-checkbox" value="gift-sets-bundles">
<span class="d-block cust-check">Gift-sets-bundles</span>
</label>
</li>
</ul>
</div>
</div>
<!-- shop-sidebar tag end -->
</form>
</div>
<!-- collection-product-list start -->
<div class="collection-product-list d-none d-xl-block pst-30 mst-30 bst">
<div class="side-collection-category">
<div class="d-flex flex-wrap align-items-center">
<h6 class="width-calc-32 font-18" data-animate="animate__fadeIn">Special products</h6>
<div class="swiper-buttons width-32 lh-1" data-animate="animate__fadeIn">
<div class="swiper-buttons-wrap d-flex">
<button type="button" class="swiper-prev swiper-prev-special-product primary-link" aria-label="Arrow previous"><i class="ri-arrow-left-line d-block lh-1"></i></button>
<button type="button" class="swiper-next swiper-next-special-product primary-link" aria-label="Arrow next"><i class="ri-arrow-right-line d-block lh-1"></i></button>
</div>
</div>
</div>
<div class="side-collection-wrap mst-24">
<div class="collection-slider swiper" id="special-product-slider">
<div class="swiper-wrapper">
<div class="swiper-slide" data-animate="animate__fadeIn">
<div class="single-product-list">
<div class="single-product-wrap d-flex flex-wrap">
<div class="width-120 product-image">
<a href="product.html" class="pro-img"><img src="assets/image/product/p-1.jpg" class="w-100 img-fluid" alt="p-1"></a>
</div>
<div class="width-calc-120 product-content">
<div class="pro-content">
<div class="product-title">
<span class="d-block"><a href="product.html" class="d-block w-100 primary-link text-truncate">Glow boost face cream</a></span>
</div>
<div class="product-ratting">
<span class="review-ratting">
<span class="review-star">
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-line"></i>
</span>
<span class="review-average">4.0<span class="review-caption">2.0</span></span>
</span>
</div>
<div class="product-price">
<div class="price-box heading-weight">
<span class="new-price primary-color">$79.00</span>
<span class="old-price text-decoration-line-through">$89.00</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide" data-animate="animate__fadeIn">
<div class="single-product-list">
<div class="single-product-wrap d-flex flex-wrap">
<div class="width-120 product-image">
<a href="product.html" class="pro-img"><img src="assets/image/product/p-3.jpg" class="w-100 img-fluid" alt="p-3"></a>
</div>
<div class="width-calc-120 product-content">
<div class="pro-content">
<div class="product-title">
<span class="d-block"><a href="product.html" class="d-block w-100 primary-link text-truncate">Velvet kiss lipstick set</a></span>
</div>
<div class="product-ratting">
<span class="review-ratting">
<span class="review-star">
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
</span>
<span class="review-average">0.0<span class="review-caption">0</span></span>
</span>
</div>
<div class="product-price">
<div class="price-box heading-weight">
<span class="new-price primary-color">$49.00</span>
<span class="old-price text-decoration-line-through">$59.00</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide" data-animate="animate__fadeIn">
<div class="single-product-list">
<div class="single-product-wrap d-flex flex-wrap">
<div class="width-120 product-image">
<a href="product.html" class="pro-img"><img src="assets/image/product/p-5.jpg" class="w-100 img-fluid" alt="p-5"></a>
</div>
<div class="width-calc-120 product-content">
<div class="pro-content">
<div class="product-title">
<span class="d-block"><a href="product.html" class="d-block w-100 primary-link text-truncate">Herbal shine hair oil</a></span>
</div>
<div class="product-ratting">
<span class="review-ratting">
<span class="review-star">
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
</span>
<span class="review-average">0.0<span class="review-caption">0</span></span>
</span>
</div>
<div class="product-price">
<div class="price-box heading-weight">
<span class="new-price primary-color">$69.00</span>
<span class="old-price text-decoration-line-through">$79.00</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide" data-animate="animate__fadeIn">
<div class="single-product-list">
<div class="single-product-wrap d-flex flex-wrap">
<div class="width-120 product-image">
<a href="product.html" class="pro-img"><img src="assets/image/product/p-7.jpg" class="w-100 img-fluid" alt="p-7"></a>
</div>
<div class="width-calc-120 product-content">
<div class="pro-content">
<div class="product-title">
<span class="d-block"><a href="product.html" class="d-block w-100 primary-link text-truncate">Smooth touch wax strips</a></span>
</div>
<div class="product-ratting">
<span class="review-ratting">
<span class="review-star">
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
</span>
<span class="review-average">0.0<span class="review-caption">0</span></span>
</span>
</div>
<div class="product-price">
<div class="price-box heading-weight">
<span class="new-price primary-color">$49.00</span>
<span class="old-price text-decoration-line-through">$54.00</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide" data-animate="animate__fadeIn">
<div class="single-product-list">
<div class="single-product-wrap d-flex flex-wrap">
<div class="width-120 product-image">
<a href="product.html" class="pro-img"><img src="assets/image/product/p-9.jpg" class="w-100 img-fluid" alt="p-9"></a>
</div>
<div class="width-calc-120 product-content">
<div class="pro-content">
<div class="product-title">
<span class="d-block"><a href="product.html" class="d-block w-100 primary-link text-truncate">Mystic bloom perfume mist</a></span>
</div>
<div class="product-ratting">
<span class="review-ratting">
<span class="review-star">
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
</span>
<span class="review-average">0.0<span class="review-caption">0</span></span>
</span>
</div>
<div class="product-price">
<div class="price-box heading-weight">
<span class="new-price primary-color">$89.00</span>
<span class="old-price text-decoration-line-through">$99.00</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide" data-animate="animate__fadeIn">
<div class="single-product-list">
<div class="single-product-wrap d-flex flex-wrap">
<div class="width-120 product-image">
<a href="product.html" class="pro-img"><img src="assets/image/product/p-11.jpg" class="w-100 img-fluid" alt="p-11"></a>
</div>
<div class="width-calc-120 product-content">
<div class="pro-content">
<div class="product-title">
<span class="d-block"><a href="product.html" class="d-block w-100 primary-link text-truncate">Glossy nails polish pack</a></span>
</div>
<div class="product-ratting">
<span class="review-ratting">
<span class="review-star">
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
</span>
<span class="review-average">0.0<span class="review-caption">0</span></span>
</span>
</div>
<div class="product-price">
<div class="price-box heading-weight">
<span class="new-price primary-color">$79.00</span>
<span class="old-price text-decoration-line-through">$84.00</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- collection-product-list end -->
<!-- shop-sidebar banner start -->
<div class="sidebar-banner d-none d-xl-block banner-hover mst-30" data-animate="animate__fadeIn">
<a href="collection.html" class="d-block banner-img position-relative br-hidden">
<span class="banner-icon primary-color icon-16 position-absolute top-50 start-50 width-48 height-48 d-flex align-items-center justify-content-center body-bg z-1 rounded-circle"><i class="ri-arrow-right-line d-block lh-1"></i></span>
<img src="assets/image/collection/side-image.jpg" class="w-100 img-fluid" alt="side-image">
</a>
</div>
<!-- shop-sidebar banner end -->
</div>
<!-- shop-sidebar end -->
<div class="col-12 col-xl-9 p-xl-sticky top-0">
<!-- collection-info start -->
<div class="row row-mtm" data-animate="animate__fadeIn">
<div class="col-12">
<div class="row row-mtm15">
<!-- collection-title start -->
<div class="collection-title">
<h6 class="font-18">Collection left (12)</h6>
</div>
<!-- collection-title end -->
<!-- collection-img start -->
<div class="collection-img">
<img src="assets/image/collection/collection-banner.jpg" class="w-100 img-fluid border-radius" alt="collection-banner">
</div>
<!-- collection-img end -->
<!-- shop-top-bar start -->
<div class="shop-top-bar">
<div class="row row-mtm15 align-items-md-center">
<div class="col-12 col-md-7 col-lg-8">
<div class="shop-filter-view ul-mt15 align-items-center">
<!-- shop-filter start -->
<div class="shop-filter">
<button type="button" class="shop-filter-btn secondary-color d-flex align-items-center"><i class="ri-filter-line icon-16 mer-5"></i>Filter</button>
</div>
<!-- shop-filter end -->
<!-- shop-view-mode start -->
<div class="shop-view-mode">
<div class="ul-mt10">
<button type="button" class="shop-view-btn primary-color icon-16 opacity-100 disabled" data-view="grid" aria-label="Grid view"><i class="ri-layout-grid-line"></i></button>
<button type="button" class="shop-view-btn body-color icon-16 opacity-100" data-view="list" aria-label="List view"><i class="ri-list-unordered"></i></button>
</div>
</div>
<!-- shop-view-mode end -->
<!-- shop-show-product start -->
<div class="shop-show-product">Showing 12 of 12 products</div>
<!-- shop-show-product end -->
</div>
</div>
<div class="col-12 col-md-5 col-lg-4">
<!-- shop-short start -->
<div class="shop-short d-flex flex-wrap position-relative">
<label for="sortby" class="width-64 secondary-color heading-weight">Sort by:</label>
<select id="sortby" name="sortby" class="d-xl-none width-calc-64 h-auto ptb-0 bg-transparent border-0">
<option value="manual">Featured</option>
<option value="best-selling">Best selling</option>
<option value="title-ascending" selected>Alphabetically, A-Z</option>
<option value="title-descending">Alphabetically, Z-A</option>
<option value="price-ascending">Price, low to high</option>
<option value="price-descending">Price, high to low</option>
<option value="created-descending">Date, new to old</option>
<option value="created-ascending">Date, old to new</option>
</select>
<a href="javascript:void(0)" class="short-title width-calc-64 body-color d-none d-xl-flex align-items-xl-start justify-content-xl-between">
<span class="sort-title">Alphabetically, A-Z</span>
<span class="sort-icon heading-weight"><i class="ri-arrow-down-s-line d-block lh-1"></i></span>
</a>
<ul class="collapse position-absolute top-100 start-0 end-0 ptb-5 body-bg z-1 DropDownSlide br-hidden box-shadow" id="select-wrap">
<li><a href="javascript:void(0)" data-value="manual" class="d-block body-primary-color ptb-5 plr-15">Featured</a></li>
<li><a href="javascript:void(0)" data-value="best-selling" class="d-block body-primary-color ptb-5 plr-15">Best selling</a></li>
<li class="selected"><a href="javascript:void(0)" data-value="title-ascending" class="d-block secondary-color ptb-5 plr-15 extra-bg">Alphabetically, A-Z</a></li>
<li><a href="javascript:void(0)" data-value="title-descending" class="d-block body-primary-color ptb-5 plr-15">Alphabetically, Z-A</a></li>
<li><a href="javascript:void(0)" data-value="price-ascending" class="d-block body-primary-color ptb-5 plr-15">Price, low to high</a></li>
<li><a href="javascript:void(0)" data-value="price-descending" class="d-block body-primary-color ptb-5 plr-15">Price, high to low</a></li>
<li><a href="javascript:void(0)" data-value="created-descending" class="d-block body-primary-color ptb-5 plr-15">Date, new to old</a></li>
<li><a href="javascript:void(0)" data-value="created-ascending" class="d-block body-primary-color ptb-5 plr-15">Date, old to new</a></li>
</ul>
</div>
<!-- shop-short end -->
</div>
</div>
</div>
<!-- shop-top-bar end -->
<!-- shop-border start -->
<div class="shop-border">
<div class="bst"></div>
</div>
<!-- shop-border end -->
<!-- shop-filter-list start -->
<div class="shop-filter-list d-flex align-items-start justify-content-between">
<ul class="shop-filter-ul ul-mt5 align-items-center">
<li class="shop-filter-li"><a href="javascript:void(0)" class="shop-filter-active text-white font-14 d-flex align-items-center secondary-bg ptb-4 plr-15 border-radius">Out of stock<i class="ri-close-large-line d-block font-10 lh-1"></i></a></li>
<li class="shop-filter-li"><a href="javascript:void(0)" class="shop-filter-active text-white font-14 d-flex align-items-center secondary-bg ptb-4 plr-15 border-radius">In stock<i class="ri-close-large-line d-block font-10 lh-1"></i></a></li>
<li class="shop-filter-li"><a href="javascript:void(0)" class="shop-filter-active text-white font-14 d-flex align-items-center secondary-bg ptb-4 plr-15 border-radius">Aliceblue<i class="ri-close-large-line d-block font-10 lh-1"></i></a></li>
<li class="shop-filter-li"><a href="javascript:void(0)" class="shop-filter-active text-white font-14 d-flex align-items-center secondary-bg ptb-4 plr-15 border-radius">10ml<i class="ri-close-large-line d-block font-10 lh-1"></i></a></li>
<li class="shop-filter-li"><a href="javascript:void(0)" class="shop-filter-active text-white font-14 d-flex align-items-center secondary-bg ptb-4 plr-15 border-radius">Skincare<i class="ri-close-large-line d-block font-10 lh-1"></i></a></li>
<li class="shop-filter-li"><button type="submit" class="shop-filter-active text-decoration-underline">Clear all</button></li>
</ul>
<div class="shop-filter-loader"><svg aria-hidden="true" focusable="false" role="presentation" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg"><circle fill="none" stroke="var(--heading-font-color)" stroke-width="3" cx="33" cy="33" r="30"></circle></svg></div>
</div>
<!-- shop-filter-list end -->
</div>
</div>
<div class="col-12">
<div class="shop-product-wrap data-grid">
<!-- shop-grid start -->
<div class="row row-mtm">
<div class="col-6 col-md-4 shop-col" data-animate="animate__fadeIn">
<div class="single-product">
<div class="row single-product-wrap">
<div class="product-image-col">
<div class="product-image">
<a href="product.html" class="pro-img">
<img src="assets/image/product/p-1.jpg" class="w-100 img-fluid img1" alt="p-1">
<img src="assets/image/product/p-2.jpg" class="w-100 img-fluid img2" alt="p-2">
</a>
<div class="product-action-wrap">
<div class="product-action">
<a href="javascript:void(0)" class="add-to-wishlist">
<span class="product-icon"><i class="ri-heart-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">wishlist</span>
</a>
<a href="javascript:void(0)" class="add-to-cart">
<span class="product-icon">
<span class="product-bag-icon icon-16"><i class="ri-shopping-bag-3-line d-block lh-1"></i></span>
<span class="product-loader-icon icon-16"><i class="ri-loader-4-line d-block lh-1"></i></span>
<span class="product-check-icon icon-16"><i class="ri-check-line d-block lh-1"></i></span>
</span>
<span class="tooltip-text">add to cart</span>
</a>
<a href="#quickview-modal" data-bs-toggle="modal" class="quick-view">
<span class="product-icon"><i class="ri-eye-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">quickview</span>
</a>
</div>
</div>
</div>
</div>
<div class="product-content">
<div class="pro-content">
<div class="product-title">
<span class="d-block"><a href="product.html" class="primary-link">Glow boost face cream</a></span>
</div>
<div class="product-ratting">
<span class="review-ratting">
<span class="review-star">
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-line"></i>
</span>
<span class="review-average">4.0<span class="review-caption">2.0</span></span>
</span>
</div>
<div class="product-price">
<div class="price-box heading-weight">
<span class="new-price primary-color">$79.00</span>
<span class="old-price text-decoration-line-through">$89.00</span>
</div>
</div>
<div class="product-description">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry It is a long established fact that a will be distracted by the readable of at</p>
</div>
<div class="product-action-wrap">
<div class="product-action">
<a href="javascript:void(0)" class="add-to-wishlist">
<span class="product-icon"><i class="ri-heart-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">wishlist</span>
</a>
<a href="javascript:void(0)" class="add-to-cart">
<span class="product-icon">
<span class="product-bag-icon icon-16"><i class="ri-shopping-bag-3-line d-block lh-1"></i></span>
<span class="product-loader-icon icon-16"><i class="ri-loader-4-line d-block lh-1"></i></span>
<span class="product-check-icon icon-16"><i class="ri-check-line d-block lh-1"></i></span>
</span>
<span class="tooltip-text">add to cart</span>
</a>
<a href="#quickview-modal" data-bs-toggle="modal" class="quick-view">
<span class="product-icon"><i class="ri-eye-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">quickview</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 col-md-4 shop-col" data-animate="animate__fadeIn">
<div class="single-product">
<div class="row single-product-wrap">
<div class="product-image-col">
<div class="product-image">
<a href="product.html" class="pro-img">
<img src="assets/image/product/p-3.jpg" class="w-100 img-fluid img1" alt="p-3">
<img src="assets/image/product/p-4.jpg" class="w-100 img-fluid img2" alt="p-4">
<span class="product-label product-label-new product-label-left">New</span>
</a>
<div class="product-action-wrap">
<div class="product-action">
<a href="javascript:void(0)" class="add-to-wishlist">
<span class="product-icon"><i class="ri-heart-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">wishlist</span>
</a>
<a href="javascript:void(0)" class="add-to-cart">
<span class="product-icon">
<span class="product-bag-icon icon-16"><i class="ri-shopping-bag-3-line d-block lh-1"></i></span>
<span class="product-loader-icon icon-16"><i class="ri-loader-4-line d-block lh-1"></i></span>
<span class="product-check-icon icon-16"><i class="ri-check-line d-block lh-1"></i></span>
</span>
<span class="tooltip-text">add to cart</span>
</a>
<a href="#quickview-modal" data-bs-toggle="modal" class="quick-view">
<span class="product-icon"><i class="ri-eye-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">quickview</span>
</a>
</div>
</div>
</div>
</div>
<div class="product-content">
<div class="pro-content">
<div class="product-title">
<span class="d-block"><a href="product.html" class="primary-link">Velvet kiss lipstick set</a></span>
</div>
<div class="product-ratting">
<span class="review-ratting">
<span class="review-star">
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
</span>
<span class="review-average">0.0<span class="review-caption">0</span></span>
</span>
</div>
<div class="product-price">
<div class="price-box heading-weight">
<span class="new-price primary-color">$49.00</span>
<span class="old-price text-decoration-line-through">$59.00</span>
</div>
</div>
<div class="product-description">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry It is a long established fact that a will be distracted by the readable of at</p>
</div>
<div class="product-action-wrap">
<div class="product-action">
<a href="javascript:void(0)" class="add-to-wishlist">
<span class="product-icon"><i class="ri-heart-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">wishlist</span>
</a>
<a href="javascript:void(0)" class="add-to-cart">
<span class="product-icon">
<span class="product-bag-icon icon-16"><i class="ri-shopping-bag-3-line d-block lh-1"></i></span>
<span class="product-loader-icon icon-16"><i class="ri-loader-4-line d-block lh-1"></i></span>
<span class="product-check-icon icon-16"><i class="ri-check-line d-block lh-1"></i></span>
</span>
<span class="tooltip-text">add to cart</span>
</a>
<a href="#quickview-modal" data-bs-toggle="modal" class="quick-view">
<span class="product-icon"><i class="ri-eye-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">quickview</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 col-md-4 shop-col" data-animate="animate__fadeIn">
<div class="single-product">
<div class="row single-product-wrap">
<div class="product-image-col">
<div class="product-image">
<a href="product.html" class="pro-img">
<img src="assets/image/product/p-5.jpg" class="w-100 img-fluid img1" alt="p-5">
<img src="assets/image/product/p-6.jpg" class="w-100 img-fluid img2" alt="p-6">
</a>
<div class="product-action-wrap">
<div class="product-action">
<a href="javascript:void(0)" class="add-to-wishlist">
<span class="product-icon"><i class="ri-heart-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">wishlist</span>
</a>
<a href="javascript:void(0)" class="add-to-cart">
<span class="product-icon">
<span class="product-bag-icon icon-16"><i class="ri-shopping-bag-3-line d-block lh-1"></i></span>
<span class="product-loader-icon icon-16"><i class="ri-loader-4-line d-block lh-1"></i></span>
<span class="product-check-icon icon-16"><i class="ri-check-line d-block lh-1"></i></span>
</span>
<span class="tooltip-text">add to cart</span>
</a>
<a href="#quickview-modal" data-bs-toggle="modal" class="quick-view">
<span class="product-icon"><i class="ri-eye-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">quickview</span>
</a>
</div>
</div>
</div>
</div>
<div class="product-content">
<div class="pro-content">
<div class="product-title">
<span class="d-block"><a href="product.html" class="primary-link">Herbal shine hair oil</a></span>
</div>
<div class="product-ratting">
<span class="review-ratting">
<span class="review-star">
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
</span>
<span class="review-average">0.0<span class="review-caption">0</span></span>
</span>
</div>
<div class="product-price">
<div class="price-box heading-weight">
<span class="new-price primary-color">$69.00</span>
<span class="old-price text-decoration-line-through">$79.00</span>
</div>
</div>
<div class="product-description">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry It is a long established fact that a will be distracted by the readable of at</p>
</div>
<div class="product-action-wrap">
<div class="product-action">
<a href="javascript:void(0)" class="add-to-wishlist">
<span class="product-icon"><i class="ri-heart-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">wishlist</span>
</a>
<a href="javascript:void(0)" class="add-to-cart">
<span class="product-icon">
<span class="product-bag-icon icon-16"><i class="ri-shopping-bag-3-line d-block lh-1"></i></span>
<span class="product-loader-icon icon-16"><i class="ri-loader-4-line d-block lh-1"></i></span>
<span class="product-check-icon icon-16"><i class="ri-check-line d-block lh-1"></i></span>
</span>
<span class="tooltip-text">add to cart</span>
</a>
<a href="#quickview-modal" data-bs-toggle="modal" class="quick-view">
<span class="product-icon"><i class="ri-eye-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">quickview</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 col-md-4 shop-col" data-animate="animate__fadeIn">
<div class="single-product">
<div class="row single-product-wrap">
<div class="product-image-col">
<div class="product-image">
<a href="product.html" class="pro-img">
<img src="assets/image/product/p-7.jpg" class="w-100 img-fluid img1" alt="p-7">
<img src="assets/image/product/p-8.jpg" class="w-100 img-fluid img2" alt="p-8">
<span class="product-label product-label-discount product-label-left">5% Off</span>
</a>
<div class="product-action-wrap">
<div class="product-action">
<a href="javascript:void(0)" class="add-to-wishlist">
<span class="product-icon"><i class="ri-heart-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">wishlist</span>
</a>
<a href="javascript:void(0)" class="add-to-cart">
<span class="product-icon">
<span class="product-bag-icon icon-16"><i class="ri-shopping-bag-3-line d-block lh-1"></i></span>
<span class="product-loader-icon icon-16"><i class="ri-loader-4-line d-block lh-1"></i></span>
<span class="product-check-icon icon-16"><i class="ri-check-line d-block lh-1"></i></span>
</span>
<span class="tooltip-text">add to cart</span>
</a>
<a href="#quickview-modal" data-bs-toggle="modal" class="quick-view">
<span class="product-icon"><i class="ri-eye-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">quickview</span>
</a>
</div>
</div>
</div>
</div>
<div class="product-content">
<div class="pro-content">
<div class="product-title">
<span class="d-block"><a href="product.html" class="primary-link">Smooth touch wax strips</a></span>
</div>
<div class="product-ratting">
<span class="review-ratting">
<span class="review-star">
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
</span>
<span class="review-average">0.0<span class="review-caption">0</span></span>
</span>
</div>
<div class="product-price">
<div class="price-box heading-weight">
<span class="new-price primary-color">$49.00</span>
<span class="old-price text-decoration-line-through">$54.00</span>
</div>
</div>
<div class="product-description">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry It is a long established fact that a will be distracted by the readable of at</p>
</div>
<div class="product-action-wrap">
<div class="product-action">
<a href="javascript:void(0)" class="add-to-wishlist">
<span class="product-icon"><i class="ri-heart-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">wishlist</span>
</a>
<a href="javascript:void(0)" class="add-to-cart">
<span class="product-icon">
<span class="product-bag-icon icon-16"><i class="ri-shopping-bag-3-line d-block lh-1"></i></span>
<span class="product-loader-icon icon-16"><i class="ri-loader-4-line d-block lh-1"></i></span>
<span class="product-check-icon icon-16"><i class="ri-check-line d-block lh-1"></i></span>
</span>
<span class="tooltip-text">add to cart</span>
</a>
<a href="#quickview-modal" data-bs-toggle="modal" class="quick-view">
<span class="product-icon"><i class="ri-eye-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">quickview</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 col-md-4 shop-col" data-animate="animate__fadeIn">
<div class="single-product">
<div class="row single-product-wrap">
<div class="product-image-col">
<div class="product-image">
<a href="product.html" class="pro-img">
<img src="assets/image/product/p-9.jpg" class="w-100 img-fluid img1" alt="p-9">
<img src="assets/image/product/p-10.jpg" class="w-100 img-fluid img2" alt="p-10">
</a>
<div class="product-action-wrap">
<div class="product-action">
<a href="javascript:void(0)" class="add-to-wishlist">
<span class="product-icon"><i class="ri-heart-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">wishlist</span>
</a>
<a href="javascript:void(0)" class="add-to-cart">
<span class="product-icon">
<span class="product-bag-icon icon-16"><i class="ri-shopping-bag-3-line d-block lh-1"></i></span>
<span class="product-loader-icon icon-16"><i class="ri-loader-4-line d-block lh-1"></i></span>
<span class="product-check-icon icon-16"><i class="ri-check-line d-block lh-1"></i></span>
</span>
<span class="tooltip-text">add to cart</span>
</a>
<a href="#quickview-modal" data-bs-toggle="modal" class="quick-view">
<span class="product-icon"><i class="ri-eye-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">quickview</span>
</a>
</div>
</div>
</div>
</div>
<div class="product-content">
<div class="pro-content">
<div class="product-title">
<span class="d-block"><a href="product.html" class="primary-link">Mystic bloom perfume mist</a></span>
</div>
<div class="product-ratting">
<span class="review-ratting">
<span class="review-star">
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
</span>
<span class="review-average">0.0<span class="review-caption">0</span></span>
</span>
</div>
<div class="product-price">
<div class="price-box heading-weight">
<span class="new-price primary-color">$89.00</span>
<span class="old-price text-decoration-line-through">$99.00</span>
</div>
</div>
<div class="product-description">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry It is a long established fact that a will be distracted by the readable of at</p>
</div>
<div class="product-action-wrap">
<div class="product-action">
<a href="javascript:void(0)" class="add-to-wishlist">
<span class="product-icon"><i class="ri-heart-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">wishlist</span>
</a>
<a href="javascript:void(0)" class="add-to-cart">
<span class="product-icon">
<span class="product-bag-icon icon-16"><i class="ri-shopping-bag-3-line d-block lh-1"></i></span>
<span class="product-loader-icon icon-16"><i class="ri-loader-4-line d-block lh-1"></i></span>
<span class="product-check-icon icon-16"><i class="ri-check-line d-block lh-1"></i></span>
</span>
<span class="tooltip-text">add to cart</span>
</a>
<a href="#quickview-modal" data-bs-toggle="modal" class="quick-view">
<span class="product-icon"><i class="ri-eye-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">quickview</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 col-md-4 shop-col" data-animate="animate__fadeIn">
<div class="single-product">
<div class="row single-product-wrap">
<div class="product-image-col">
<div class="product-image">
<a href="product.html" class="pro-img">
<img src="assets/image/product/p-11.jpg" class="w-100 img-fluid img1" alt="p-11">
<img src="assets/image/product/p-12.jpg" class="w-100 img-fluid img2" alt="p-12">
<span class="product-label product-label-sale product-label-left">Sale</span>
</a>
<div class="product-action-wrap">
<div class="product-action">
<a href="javascript:void(0)" class="add-to-wishlist">
<span class="product-icon"><i class="ri-heart-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">wishlist</span>
</a>
<a href="javascript:void(0)" class="add-to-cart">
<span class="product-icon">
<span class="product-bag-icon icon-16"><i class="ri-shopping-bag-3-line d-block lh-1"></i></span>
<span class="product-loader-icon icon-16"><i class="ri-loader-4-line d-block lh-1"></i></span>
<span class="product-check-icon icon-16"><i class="ri-check-line d-block lh-1"></i></span>
</span>
<span class="tooltip-text">add to cart</span>
</a>
<a href="#quickview-modal" data-bs-toggle="modal" class="quick-view">
<span class="product-icon"><i class="ri-eye-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">quickview</span>
</a>
</div>
</div>
</div>
</div>
<div class="product-content">
<div class="pro-content">
<div class="product-title">
<span class="d-block"><a href="product.html" class="primary-link">Glossy nails polish pack</a></span>
</div>
<div class="product-ratting">
<span class="review-ratting">
<span class="review-star">
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
</span>
<span class="review-average">0.0<span class="review-caption">0</span></span>
</span>
</div>
<div class="product-price">
<div class="price-box heading-weight">
<span class="new-price primary-color">$79.00</span>
<span class="old-price text-decoration-line-through">$84.00</span>
</div>
</div>
<div class="product-description">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry It is a long established fact that a will be distracted by the readable of at</p>
</div>
<div class="product-action-wrap">
<div class="product-action">
<a href="javascript:void(0)" class="add-to-wishlist">
<span class="product-icon"><i class="ri-heart-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">wishlist</span>
</a>
<a href="javascript:void(0)" class="add-to-cart">
<span class="product-icon">
<span class="product-bag-icon icon-16"><i class="ri-shopping-bag-3-line d-block lh-1"></i></span>
<span class="product-loader-icon icon-16"><i class="ri-loader-4-line d-block lh-1"></i></span>
<span class="product-check-icon icon-16"><i class="ri-check-line d-block lh-1"></i></span>
</span>
<span class="tooltip-text">add to cart</span>
</a>
<a href="#quickview-modal" data-bs-toggle="modal" class="quick-view">
<span class="product-icon"><i class="ri-eye-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">quickview</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 col-md-4 shop-col" data-animate="animate__fadeIn">
<div class="single-product">
<div class="row single-product-wrap">
<div class="product-image-col">
<div class="product-image">
<a href="product.html" class="pro-img">
<img src="assets/image/product/p-13.jpg" class="w-100 img-fluid img1" alt="p-13">
<img src="assets/image/product/p-14.jpg" class="w-100 img-fluid img2" alt="p-14">
</a>
<div class="product-action-wrap">
<div class="product-action">
<a href="javascript:void(0)" class="add-to-wishlist">
<span class="product-icon"><i class="ri-heart-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">wishlist</span>
</a>
<a href="javascript:void(0)" class="add-to-cart">
<span class="product-icon">
<span class="product-bag-icon icon-16"><i class="ri-shopping-bag-3-line d-block lh-1"></i></span>
<span class="product-loader-icon icon-16"><i class="ri-loader-4-line d-block lh-1"></i></span>
<span class="product-check-icon icon-16"><i class="ri-check-line d-block lh-1"></i></span>
</span>
<span class="tooltip-text">add to cart</span>
</a>
<a href="#quickview-modal" data-bs-toggle="modal" class="quick-view">
<span class="product-icon"><i class="ri-eye-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">quickview</span>
</a>
</div>
</div>
</div>
</div>
<div class="product-content">
<div class="pro-content">
<div class="product-title">
<span class="d-block"><a href="product.html" class="primary-link">Rose petal bath soak</a></span>
</div>
<div class="product-ratting">
<span class="review-ratting">
<span class="review-star">
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
</span>
<span class="review-average">0.0<span class="review-caption">0</span></span>
</span>
</div>
<div class="product-price">
<div class="price-box heading-weight">
<span class="new-price primary-color">$29.00</span>
<span class="old-price text-decoration-line-through">$39.00</span>
</div>
</div>
<div class="product-description">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry It is a long established fact that a will be distracted by the readable of at</p>
</div>
<div class="product-action-wrap">
<div class="product-action">
<a href="javascript:void(0)" class="add-to-wishlist">
<span class="product-icon"><i class="ri-heart-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">wishlist</span>
</a>
<a href="javascript:void(0)" class="add-to-cart">
<span class="product-icon">
<span class="product-bag-icon icon-16"><i class="ri-shopping-bag-3-line d-block lh-1"></i></span>
<span class="product-loader-icon icon-16"><i class="ri-loader-4-line d-block lh-1"></i></span>
<span class="product-check-icon icon-16"><i class="ri-check-line d-block lh-1"></i></span>
</span>
<span class="tooltip-text">add to cart</span>
</a>
<a href="#quickview-modal" data-bs-toggle="modal" class="quick-view">
<span class="product-icon"><i class="ri-eye-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">quickview</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 col-md-4 shop-col" data-animate="animate__fadeIn">
<div class="single-product">
<div class="row single-product-wrap">
<div class="product-image-col">
<div class="product-image">
<a href="product.html" class="pro-img">
<img src="assets/image/product/p-15.jpg" class="w-100 img-fluid img1" alt="p-15">
<img src="assets/image/product/p-16.jpg" class="w-100 img-fluid img2" alt="p-16">
</a>
<div class="product-action-wrap">
<div class="product-action">
<a href="javascript:void(0)" class="add-to-wishlist">
<span class="product-icon"><i class="ri-heart-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">wishlist</span>
</a>
<a href="javascript:void(0)" class="add-to-cart">
<span class="product-icon">
<span class="product-bag-icon icon-16"><i class="ri-shopping-bag-3-line d-block lh-1"></i></span>
<span class="product-loader-icon icon-16"><i class="ri-loader-4-line d-block lh-1"></i></span>
<span class="product-check-icon icon-16"><i class="ri-check-line d-block lh-1"></i></span>
</span>
<span class="tooltip-text">add to cart</span>
</a>
<a href="#quickview-modal" data-bs-toggle="modal" class="quick-view">
<span class="product-icon"><i class="ri-eye-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">quickview</span>
</a>
</div>
</div>
</div>
</div>
<div class="product-content">
<div class="pro-content">
<div class="product-title">
<span class="d-block"><a href="product.html" class="primary-link">Pro blend makeup brush</a></span>
</div>
<div class="product-ratting">
<span class="review-ratting">
<span class="review-star">
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
</span>
<span class="review-average">0.0<span class="review-caption">0</span></span>
</span>
</div>
<div class="product-price">
<div class="price-box heading-weight">
<span class="new-price primary-color">$14.00</span>
<span class="old-price text-decoration-line-through">$19.00</span>
</div>
</div>
<div class="product-description">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry It is a long established fact that a will be distracted by the readable of at</p>
</div>
<div class="product-action-wrap">
<div class="product-action">
<a href="javascript:void(0)" class="add-to-wishlist">
<span class="product-icon"><i class="ri-heart-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">wishlist</span>
</a>
<a href="javascript:void(0)" class="add-to-cart">
<span class="product-icon">
<span class="product-bag-icon icon-16"><i class="ri-shopping-bag-3-line d-block lh-1"></i></span>
<span class="product-loader-icon icon-16"><i class="ri-loader-4-line d-block lh-1"></i></span>
<span class="product-check-icon icon-16"><i class="ri-check-line d-block lh-1"></i></span>
</span>
<span class="tooltip-text">add to cart</span>
</a>
<a href="#quickview-modal" data-bs-toggle="modal" class="quick-view">
<span class="product-icon"><i class="ri-eye-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">quickview</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 col-md-4 shop-col" data-animate="animate__fadeIn">
<div class="single-product">
<div class="row single-product-wrap">
<div class="product-image-col">
<div class="product-image">
<a href="product.html" class="pro-img">
<img src="assets/image/product/p-17.jpg" class="w-100 img-fluid img1" alt="p-17">
<img src="assets/image/product/p-18.jpg" class="w-100 img-fluid img2" alt="p-18">
</a>
<div class="product-action-wrap">
<div class="product-action">
<a href="javascript:void(0)" class="add-to-wishlist">
<span class="product-icon"><i class="ri-heart-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">wishlist</span>
</a>
<a href="javascript:void(0)" class="add-to-cart">
<span class="product-icon">
<span class="product-bag-icon icon-16"><i class="ri-shopping-bag-3-line d-block lh-1"></i></span>
<span class="product-loader-icon icon-16"><i class="ri-loader-4-line d-block lh-1"></i></span>
<span class="product-check-icon icon-16"><i class="ri-check-line d-block lh-1"></i></span>
</span>
<span class="tooltip-text">add to cart</span>
</a>
<a href="#quickview-modal" data-bs-toggle="modal" class="quick-view">
<span class="product-icon"><i class="ri-eye-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">quickview</span>
</a>
</div>
</div>
</div>
</div>
<div class="product-content">
<div class="pro-content">
<div class="product-title">
<span class="d-block"><a href="product.html" class="primary-link">Organic aloe face serum</a></span>
</div>
<div class="product-ratting">
<span class="review-ratting">
<span class="review-star">
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
</span>
<span class="review-average">0.0<span class="review-caption">0</span></span>
</span>
</div>
<div class="product-price">
<div class="price-box heading-weight">
<span class="new-price primary-color">$64.00</span>
<span class="old-price text-decoration-line-through">$74.00</span>
</div>
</div>
<div class="product-description">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry It is a long established fact that a will be distracted by the readable of at</p>
</div>
<div class="product-action-wrap">
<div class="product-action">
<a href="javascript:void(0)" class="add-to-wishlist">
<span class="product-icon"><i class="ri-heart-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">wishlist</span>
</a>
<a href="javascript:void(0)" class="add-to-cart">
<span class="product-icon">
<span class="product-bag-icon icon-16"><i class="ri-shopping-bag-3-line d-block lh-1"></i></span>
<span class="product-loader-icon icon-16"><i class="ri-loader-4-line d-block lh-1"></i></span>
<span class="product-check-icon icon-16"><i class="ri-check-line d-block lh-1"></i></span>
</span>
<span class="tooltip-text">add to cart</span>
</a>
<a href="#quickview-modal" data-bs-toggle="modal" class="quick-view">
<span class="product-icon"><i class="ri-eye-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">quickview</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 col-md-4 shop-col" data-animate="animate__fadeIn">
<div class="single-product">
<div class="row single-product-wrap">
<div class="product-image-col">
<div class="product-image">
<a href="product.html" class="pro-img">
<img src="assets/image/product/p-19.jpg" class="w-100 img-fluid img1" alt="p-19">
<img src="assets/image/product/p-20.jpg" class="w-100 img-fluid img2" alt="p-20">
<span class="product-label product-label-sold product-label-left">Sold</span>
</a>
<div class="product-action-wrap">
<div class="product-action">
<a href="javascript:void(0)" class="add-to-wishlist">
<span class="product-icon"><i class="ri-heart-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">wishlist</span>
</a>
<a href="javascript:void(0)" class="add-to-cart disabled">
<span class="product-icon">
<span class="product-bag-icon icon-16"><i class="ri-shopping-bag-3-line d-block lh-1"></i></span>
<span class="product-loader-icon icon-16"><i class="ri-loader-4-line d-block lh-1"></i></span>
<span class="product-check-icon icon-16"><i class="ri-check-line d-block lh-1"></i></span>
</span>
<span class="tooltip-text">add to cart</span>
</a>
<a href="#quickview-modal" data-bs-toggle="modal" class="quick-view">
<span class="product-icon"><i class="ri-eye-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">quickview</span>
</a>
</div>
</div>
</div>
</div>
<div class="product-content">
<div class="pro-content">
<div class="product-title">
<span class="d-block"><a href="product.html" class="primary-link">Beard luxe grooming kit</a></span>
</div>
<div class="product-ratting">
<span class="review-ratting">
<span class="review-star">
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
</span>
<span class="review-average">0.0<span class="review-caption">0</span></span>
</span>
</div>
<div class="product-price">
<div class="price-box heading-weight">
<span class="new-price primary-color">$34.00</span>
<span class="old-price text-decoration-line-through">$44.00</span>
</div>
</div>
<div class="product-description">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry It is a long established fact that a will be distracted by the readable of at</p>
</div>
<div class="product-action-wrap">
<div class="product-action">
<a href="javascript:void(0)" class="add-to-wishlist">
<span class="product-icon"><i class="ri-heart-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">wishlist</span>
</a>
<a href="javascript:void(0)" class="add-to-cart disabled">
<span class="product-icon">
<span class="product-bag-icon icon-16"><i class="ri-shopping-bag-3-line d-block lh-1"></i></span>
<span class="product-loader-icon icon-16"><i class="ri-loader-4-line d-block lh-1"></i></span>
<span class="product-check-icon icon-16"><i class="ri-check-line d-block lh-1"></i></span>
</span>
<span class="tooltip-text">add to cart</span>
</a>
<a href="#quickview-modal" data-bs-toggle="modal" class="quick-view">
<span class="product-icon"><i class="ri-eye-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">quickview</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 col-md-4 shop-col" data-animate="animate__fadeIn">
<div class="single-product">
<div class="row single-product-wrap">
<div class="product-image-col">
<div class="product-image">
<a href="product.html" class="pro-img">
<img src="assets/image/product/p-21.jpg" class="w-100 img-fluid img1" alt="p-21">
<img src="assets/image/product/p-22.jpg" class="w-100 img-fluid img2" alt="p-22">
</a>
<div class="product-action-wrap">
<div class="product-action">
<a href="javascript:void(0)" class="add-to-wishlist">
<span class="product-icon"><i class="ri-heart-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">wishlist</span>
</a>
<a href="javascript:void(0)" class="add-to-cart">
<span class="product-icon">
<span class="product-bag-icon icon-16"><i class="ri-shopping-bag-3-line d-block lh-1"></i></span>
<span class="product-loader-icon icon-16"><i class="ri-loader-4-line d-block lh-1"></i></span>
<span class="product-check-icon icon-16"><i class="ri-check-line d-block lh-1"></i></span>
</span>
<span class="tooltip-text">add to cart</span>
</a>
<a href="#quickview-modal" data-bs-toggle="modal" class="quick-view">
<span class="product-icon"><i class="ri-eye-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">quickview</span>
</a>
</div>
</div>
</div>
</div>
<div class="product-content">
<div class="pro-content">
<div class="product-title">
<span class="d-block"><a href="product.html" class="primary-link">Radiance LED skin mask</a></span>
</div>
<div class="product-ratting">
<span class="review-ratting">
<span class="review-star">
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
</span>
<span class="review-average">0.0<span class="review-caption">0</span></span>
</span>
</div>
<div class="product-price">
<div class="price-box heading-weight">
<span class="new-price primary-color">$4.00</span>
<span class="old-price text-decoration-line-through">$9.00</span>
</div>
</div>
<div class="product-description">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry It is a long established fact that a will be distracted by the readable of at</p>
</div>
<div class="product-action-wrap">
<div class="product-action">
<a href="javascript:void(0)" class="add-to-wishlist">
<span class="product-icon"><i class="ri-heart-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">wishlist</span>
</a>
<a href="javascript:void(0)" class="add-to-cart">
<span class="product-icon">
<span class="product-bag-icon icon-16"><i class="ri-shopping-bag-3-line d-block lh-1"></i></span>
<span class="product-loader-icon icon-16"><i class="ri-loader-4-line d-block lh-1"></i></span>
<span class="product-check-icon icon-16"><i class="ri-check-line d-block lh-1"></i></span>
</span>
<span class="tooltip-text">add to cart</span>
</a>
<a href="#quickview-modal" data-bs-toggle="modal" class="quick-view">
<span class="product-icon"><i class="ri-eye-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">quickview</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 col-md-4 shop-col" data-animate="animate__fadeIn">
<div class="single-product">
<div class="row single-product-wrap">
<div class="product-image-col">
<div class="product-image">
<a href="product.html" class="pro-img">
<img src="assets/image/product/p-23.jpg" class="w-100 img-fluid img1" alt="p-23">
<img src="assets/image/product/p-24.jpg" class="w-100 img-fluid img2" alt="p-24">
</a>
<div class="product-action-wrap">
<div class="product-action">
<a href="javascript:void(0)" class="add-to-wishlist">
<span class="product-icon"><i class="ri-heart-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">wishlist</span>
</a>
<a href="javascript:void(0)" class="add-to-cart">
<span class="product-icon">
<span class="product-bag-icon icon-16"><i class="ri-shopping-bag-3-line d-block lh-1"></i></span>
<span class="product-loader-icon icon-16"><i class="ri-loader-4-line d-block lh-1"></i></span>
<span class="product-check-icon icon-16"><i class="ri-check-line d-block lh-1"></i></span>
</span>
<span class="tooltip-text">add to cart</span>
</a>
<a href="#quickview-modal" data-bs-toggle="modal" class="quick-view">
<span class="product-icon"><i class="ri-eye-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">quickview</span>
</a>
</div>
</div>
</div>
</div>
<div class="product-content">
<div class="pro-content">
<div class="product-title">
<span class="d-block"><a href="product.html" class="primary-link">Luxury glow gift box</a></span>
</div>
<div class="product-ratting">
<span class="review-ratting">
<span class="review-star">
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
</span>
<span class="review-average">0.0<span class="review-caption">0</span></span>
</span>
</div>
<div class="product-price">
<div class="price-box heading-weight">
<span class="new-price primary-color">$9.00</span>
<span class="old-price text-decoration-line-through">$14.00</span>
</div>
</div>
<div class="product-description">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry It is a long established fact that a will be distracted by the readable of at</p>
</div>
<div class="product-action-wrap">
<div class="product-action">
<a href="javascript:void(0)" class="add-to-wishlist">
<span class="product-icon"><i class="ri-heart-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">wishlist</span>
</a>
<a href="javascript:void(0)" class="add-to-cart">
<span class="product-icon">
<span class="product-bag-icon icon-16"><i class="ri-shopping-bag-3-line d-block lh-1"></i></span>
<span class="product-loader-icon icon-16"><i class="ri-loader-4-line d-block lh-1"></i></span>
<span class="product-check-icon icon-16"><i class="ri-check-line d-block lh-1"></i></span>
</span>
<span class="tooltip-text">add to cart</span>
</a>
<a href="#quickview-modal" data-bs-toggle="modal" class="quick-view">
<span class="product-icon"><i class="ri-eye-line d-block icon-16 lh-1"></i></span>
<span class="tooltip-text">quickview</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- shop-grid end -->
<!-- paginatoin start -->
<div class="paginatoin-area section-pt" data-animate="animate__fadeIn">
<nav aria-label="Page navigation example">
<ul class="pagination ul-mt5 align-items-center justify-content-center pagination-box">
<li class="page-item first">
<a href="javascript:void(0)" class="page-link p-0 m-0 bg-transparent heading-weight border-0 lh-1" aria-label="First page">First</a>
</li>
<li class="page-item prev">
<a href="javascript:void(0)" class="page-link icon-16 d-flex align-items-center justify-content-center p-0 m-0 bg-transparent heading-weight border-0 border-radius" aria-label="Previous"><i class="ri-arrow-left-line d-block lh-1"></i></a>
</li>
<li class="page-item">
<a href="javascript:void(0)" class="page-link d-flex align-items-center justify-content-center p-0 m-0 heading-weight border-0 border-radius lh-1" aria-label="Page number">1</a>
</li>
<li class="page-item">
<a href="javascript:void(0)" class="page-link active d-flex align-items-center justify-content-center p-0 m-0 heading-weight border-0 border-radius lh-1" aria-label="Page number">2</a>
</li>
<li class="page-item">
<a href="javascript:void(0)" class="page-link d-flex align-items-center justify-content-center p-0 m-0 heading-weight border-0 border-radius lh-1" aria-label="Page number">3</a>
</li>
<li class="page-item next">
<a href="javascript:void(0)" class="page-link icon-16 d-flex align-items-center justify-content-center p-0 m-0 bg-transparent heading-weight border-0 border-radius" aria-label="Next"><i class="ri-arrow-right-line d-block lh-1"></i></a>
</li>
<li class="page-item last">
<a href="javascript:void(0)" class="page-link p-0 m-0 bg-transparent heading-weight border-0 lh-1" aria-label="Last page">Last</a>
</li>
</ul>
</nav>
</div>
<!-- paginatoin end -->
</div>
</div>
</div>
<!-- collection-info end -->
</div>
</div>
</div>
</section>
<!-- shop-content end -->
</main>
<!-- main end -->
<!-- footer start -->
<footer id="footer">
<!-- footer-text start -->
<section class="footer-text ptb-30 ptb-xl-50 bg-img text-center" data-bgimg="assets/image/index4/footer-text-bgimg.jpg">
<div class="container">
<h2 class="extra-color font-24 font-xl-40">20% off all beauty products to first purchase</h2>
</div>
</section>
<!-- footer-text end -->
<!-- footer-insta start -->
<div class="footer-insta section-pt extra-bg">
<div class="container">
<div class="insta-category">
<div class="insta-wrap">
<div class="insta-slider swiper" id="insta-slider">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="banner-hover">
<a href="collection.html" class="d-block banner-img position-relative br-hidden">
<span class="insta-icon extra-color icon-24 position-absolute top-0 start-0 end-0 bottom-0 d-inline-flex align-items-center justify-content-center primary-bg z-1 mtb-10 mtb-md-15 mlr-10 mlr-md-15 border-radius"><i class="ri-instagram-line d-block lh-1"></i></span>
<img src="assets/image/instagram/insta-1.jpg" class="w-100 img-fluid" alt="insta-1">
</a>
</div>
</div>
<div class="swiper-slide">
<div class="banner-hover">
<a href="collection.html" class="d-block banner-img position-relative br-hidden">
<span class="insta-icon extra-color icon-24 position-absolute top-0 start-0 end-0 bottom-0 d-inline-flex align-items-center justify-content-center primary-bg z-1 mtb-10 mtb-md-15 mlr-10 mlr-md-15 border-radius"><i class="ri-instagram-line d-block lh-1"></i></span>
<img src="assets/image/instagram/insta-2.jpg" class="w-100 img-fluid" alt="insta-2">
</a>
</div>
</div>
<div class="swiper-slide">
<div class="banner-hover">
<a href="collection.html" class="d-block banner-img position-relative br-hidden">
<span class="insta-icon extra-color icon-24 position-absolute top-0 start-0 end-0 bottom-0 d-inline-flex align-items-center justify-content-center primary-bg z-1 mtb-10 mtb-md-15 mlr-10 mlr-md-15 border-radius"><i class="ri-instagram-line d-block lh-1"></i></span>
<img src="assets/image/instagram/insta-3.jpg" class="w-100 img-fluid" alt="insta-3">
</a>
</div>
</div>
<div class="swiper-slide">
<div class="banner-hover">
<a href="collection.html" class="d-block banner-img position-relative br-hidden">
<span class="insta-icon extra-color icon-24 position-absolute top-0 start-0 end-0 bottom-0 d-inline-flex align-items-center justify-content-center primary-bg z-1 mtb-10 mtb-md-15 mlr-10 mlr-md-15 border-radius"><i class="ri-instagram-line d-block lh-1"></i></span>
<img src="assets/image/instagram/insta-4.jpg" class="w-100 img-fluid" alt="insta-4">
</a>
</div>
</div>
<div class="swiper-slide">
<div class="banner-hover">
<a href="collection.html" class="d-block banner-img position-relative br-hidden">
<span class="insta-icon extra-color icon-24 position-absolute top-0 start-0 end-0 bottom-0 d-inline-flex align-items-center justify-content-center primary-bg z-1 mtb-10 mtb-md-15 mlr-10 mlr-md-15 border-radius"><i class="ri-instagram-line d-block lh-1"></i></span>
<img src="assets/image/instagram/insta-5.jpg" class="w-100 img-fluid" alt="insta-5">
</a>
</div>
</div>
<div class="swiper-slide">
<div class="banner-hover">
<a href="collection.html" class="d-block banner-img position-relative br-hidden">
<span class="insta-icon extra-color icon-24 position-absolute top-0 start-0 end-0 bottom-0 d-inline-flex align-items-center justify-content-center primary-bg z-1 mtb-10 mtb-md-15 mlr-10 mlr-md-15 border-radius"><i class="ri-instagram-line d-block lh-1"></i></span>
<img src="assets/image/instagram/insta-6.jpg" class="w-100 img-fluid" alt="insta-6">
</a>
</div>
</div>
<div class="swiper-slide">
<div class="banner-hover">
<a href="collection.html" class="d-block banner-img position-relative br-hidden">
<span class="insta-icon extra-color icon-24 position-absolute top-0 start-0 end-0 bottom-0 d-inline-flex align-items-center justify-content-center primary-bg z-1 mtb-10 mtb-md-15 mlr-10 mlr-md-15 border-radius"><i class="ri-instagram-line d-block lh-1"></i></span>
<img src="assets/image/instagram/insta-7.jpg" class="w-100 img-fluid" alt="insta-7">
</a>
</div>
</div>
<div class="swiper-slide">
<div class="banner-hover">
<a href="collection.html" class="d-block banner-img position-relative br-hidden">
<span class="insta-icon extra-color icon-24 position-absolute top-0 start-0 end-0 bottom-0 d-inline-flex align-items-center justify-content-center primary-bg z-1 mtb-10 mtb-md-15 mlr-10 mlr-md-15 border-radius"><i class="ri-instagram-line d-block lh-1"></i></span>
<img src="assets/image/instagram/insta-8.jpg" class="w-100 img-fluid" alt="insta-8">
</a>
</div>
</div>
</div>
</div>
<div class="swiper-buttons">
<div class="swiper-buttons-wrap">
<button type="button" class="swiper-prev swiper-prev-insta" aria-label="Arrow previous"><i class="ri-arrow-left-line d-block lh-1"></i></button>
<button type="button" class="swiper-next swiper-next-insta" aria-label="Arrow next"><i class="ri-arrow-right-line d-block lh-1"></i></button>
</div>
</div>
<div class="swiper-dots">
<div class="swiper-pagination swiper-pagination-insta"></div>
</div>
</div>
</div>
</div>
</div>
<!-- footer-insta end -->
<!-- footer-top start -->
<div class="footer-area section-ptb extra-bg">
<div class="container">
<div class="row row-mtm">
<div class="col-12 col-md-6 col-lg-3">
<div class="footer-info">
<div class="footer-theme-logo">
<a href="index.html" class="d-inline-block theme-logo">
<img src="assets/image/index4/logo.png" class="width-88 width-xl-112 img-fluid" alt="logo">
</a>
</div>
<div class="footer-contact mst-25">
<ul class="ul-ft">
<li><span class="d-block heading-color"><span class="primary-color">Address</span> - 1234 MG road, Bengaluru, Karnataka 560001, India</span></li>
<li><span class="d-block heading-color"><span class="primary-color mer-4"><i class="ri-phone-line"></i></span><a href="tel:+919876543210" class="primary-link">+91 98765-43210</a></span></li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-lg-6 order-md-last order-lg-0 footer-list">
<div class="row">
<div class="col-12 col-md-4 ft-list">
<div class="footer-menu">
<h6 class="ft-title d-none d-md-block primary-color font-18">Information</h6>
<a href="#collapse-information" class="ft-title font-18 d-flex d-md-none flex-wrap align-items-center justify-content-between" data-bs-toggle="collapse" aria-expanded="false">
<span class="ftmenu-title width-calc-16 heading-weight">Information</span>
<span class="ftmenu-icon width-16 icon-16"><i class="ri-add-line"></i></span>
</a>
<div class="ft-link collapse" id="collapse-information">
<ul class="ftlink-ul ul-ft pst-19 peb-1 peb-md-0">
<li class="ftlink-li">
<a href="about-us.html" class="d-inline-block primary-link">About us</a>
</li>
<li class="ftlink-li">
<a href="contact-us.html" class="d-inline-block primary-link">Contact us</a>
</li>
<li class="ftlink-li">
<a href="faqs.html" class="d-inline-block primary-link">Faqs</a>
</li>
<li class="ftlink-li">
<a href="blog.html" class="d-inline-block primary-link">News</a>
</li>
<li class="ftlink-li">
<a href="store.html" class="d-inline-block primary-link">Store</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-md-4 ft-list">
<div class="footer-menu">
<h6 class="ft-title d-none d-md-block primary-color font-18">Policies</h6>
<a href="#collapse-policies" class="ft-title font-18 d-flex d-md-none flex-wrap align-items-center justify-content-between" data-bs-toggle="collapse" aria-expanded="false">
<span class="ftmenu-title width-calc-16 heading-weight">Policies</span>
<span class="ftmenu-icon width-16 icon-16"><i class="ri-add-line"></i></span>
</a>
<div class="ft-link collapse" id="collapse-policies">
<ul class="ftlink-ul ul-ft pst-19 peb-1 peb-md-0">
<li class="ftlink-li">
<a href="payment-policy.html" class="d-inline-block primary-link">Payment policy</a>
</li>
<li class="ftlink-li">
<a href="privacy-policy.html" class="d-inline-block primary-link">Privacy policy</a>
</li>
<li class="ftlink-li">
<a href="return-policy.html" class="d-inline-block primary-link">Return policy</a>
</li>
<li class="ftlink-li">
<a href="shipping-policy.html" class="d-inline-block primary-link">Shipping policy</a>
</li>
<li class="ftlink-li">
<a href="terms-condition.html" class="d-inline-block primary-link">Terms & condition</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-md-4 ft-list">
<div class="footer-menu">
<h6 class="ft-title d-none d-md-block primary-color font-18">Quick link</h6>
<a href="#collapse-quick-link" class="ft-title font-18 d-flex d-md-none flex-wrap align-items-center justify-content-between" data-bs-toggle="collapse" aria-expanded="false">
<span class="ftmenu-title width-calc-16 heading-weight">Quick link</span>
<span class="ftmenu-icon width-16 icon-16"><i class="ri-add-line"></i></span>
</a>
<div class="ft-link collapse" id="collapse-quick-link">
<ul class="ftlink-ul ul-ft pst-19 peb-1 peb-md-0">
<li class="ftlink-li">
<a href="404.html" class="d-inline-block primary-link">404</a>
</li>
<li class="ftlink-li">
<a href="coming-soon.html" class="d-inline-block primary-link">Comingsoon</a>
</li>
<li class="ftlink-li">
<a href="cookie.html" class="d-inline-block primary-link">Cookie</a>
</li>
<li class="ftlink-li">
<a href="legal.html" class="d-inline-block primary-link">Legal</a>
</li>
<li class="ftlink-li">
<a href="sitemap.html" class="d-inline-block primary-link">Sitemap</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="footer-news">
<h6 class="primary-color font-18">Newsletter</h6>
<form method="post" class="news-form mst-24">
<div class="news-wrap d-flex">
<input type="email" id="newsletter-email" name="newsletter-email" class="width-calc-48 border-0" placeholder="Enter your email" required>
<button type="submit" class="news-btn width-48 tertiary-btn" aria-label="Subscribe button"><i class="ri-mail-line d-block fw-normal lh-1"></i></button>
</div>
</form>
</div>
<div class="footer-social mst-30">
<ul class="social-ul ul-mt15">
<li class="social-li">
<a href="javascript:void(0)" class="d-block primary-color icon-16" aria-label="Social link"><i class="ri-facebook-fill d-block lh-1"></i></a>
</li>
<li class="social-li">
<a href="javascript:void(0)" class="d-block primary-color icon-16" aria-label="Social link"><i class="ri-twitter-x-fill d-block lh-1"></i></a>
</li>
<li class="social-li">
<a href="javascript:void(0)" class="d-block primary-color icon-16" aria-label="Social link"><i class="ri-linkedin-fill d-block lh-1"></i></a>
</li>
<li class="social-li">
<a href="javascript:void(0)" class="d-block primary-color icon-16" aria-label="Social link"><i class="ri-telegram-fill d-block lh-1"></i></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- footer-top end -->
<!-- footer-bottom start -->
<div class="copyright ptb-10 primary-bg">
<div class="container">
<div class="row align-items-md-center">
<div class="col-12 col-md-6 extra-color text-center text-md-start">Powered by spacingtech<sup>TM</sup></div>
<div class="col-12 col-md-6 mst-10 mst-md-0">
<ul class="payment-ul">
<li class="payment-li ul-mt5 justify-content-center justify-content-md-end">
<a href="javascript:void(0)" class="d-block"><img src="assets/image/other/paying-paypal.png" class="width-40 img-fluid border-radius" alt="paying-paypal"></a>
<a href="javascript:void(0)" class="d-block"><img src="assets/image/other/paying-visa.png" class="width-40 img-fluid border-radius" alt="paying-visa"></a>
<a href="javascript:void(0)" class="d-block"><img src="assets/image/other/paying-maestro.png" class="width-40 img-fluid border-radius" alt="paying-maestro"></a>
<a href="javascript:void(0)" class="d-block"><img src="assets/image/other/paying-american.png" class="width-40 img-fluid border-radius" alt="paying-american"></a>
<a href="javascript:void(0)" class="d-block"><img src="assets/image/other/paying-discover.png" class="width-40 img-fluid border-radius" alt="paying-discover"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- footer-bottom end -->
</footer>
<!-- footer end -->
<!-- quickview-modal start -->
<div class="quickview-modal modal fade" id="quickview-modal" data-bs-backdrop="static">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content body-bg border-0 br-hidden">
<div class="modal-body ptb-30 plr-15 plr-md-30">
<div class="quickview-modal-header d-flex align-items-center justify-content-between meb-30">
<h6 class="font-18">Quickview</h6>
<button type="button" class="body-secondary-color icon-16" data-bs-dismiss="modal" aria-label="Close"><i class="ri-close-large-line d-block lh-1"></i></button>
</div>
<div class="row row-mtm quickview-modal-content">
<div class="col-12 col-md-6">
<!-- quickview-detail-slider start -->
<div class="quickview-detail-slider">
<div class="row ul-mt15">
<div class="col-12">
<!-- quickview-img-big start -->
<div class="quickview-img-big quickview-slider-big position-relative br-hidden">
<div class="swiper" id="quickview-slider-big">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="assets/image/product/product-1.jpg" class="w-100 img-fluid" alt="product-1">
</div>
<div class="swiper-slide">
<img src="assets/image/product/product-2.jpg" class="w-100 img-fluid" alt="product-2">
</div>
<div class="swiper-slide">
<img src="assets/image/product/product-3.jpg" class="w-100 img-fluid" alt="product-3">
</div>
<div class="swiper-slide">
<img src="assets/image/product/product-4.jpg" class="w-100 img-fluid" alt="product-4">
</div>
<div class="swiper-slide">
<img src="assets/image/product/product-5.jpg" class="w-100 img-fluid" alt="product-5">
</div>
</div>
<div class="swiper-buttons">
<button type="button" class="swiper-prev swiper-prev-quickview-big tertiary-btn icon-16 width-32 height-32 position-absolute top-50 translate-middle-y z-1 rounded-circle" aria-label="Arrow previous"><i class="ri-arrow-left-line d-block lh-1"></i></button>
<button type="button" class="swiper-next swiper-next-quickview-big tertiary-btn icon-16 width-32 height-32 position-absolute top-50 translate-middle-y z-1 rounded-circle" aria-label="Arrow next"><i class="ri-arrow-right-line d-block lh-1"></i></button>
</div>
</div>
</div>
<!-- quickview-img-big end -->
</div>
<div class="col-12">
<!-- quickview-img-small start -->
<div class="quickview-img-small quickview-slider-small">
<div class="swiper" id="quickview-slider-small">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="assets/image/product/product-1.jpg" class="w-100 img-fluid border-radius" alt="product-1">
</div>
<div class="swiper-slide">
<img src="assets/image/product/product-2.jpg" class="w-100 img-fluid border-radius" alt="product-2">
</div>
<div class="swiper-slide">
<img src="assets/image/product/product-3.jpg" class="w-100 img-fluid border-radius" alt="product-3">
</div>
<div class="swiper-slide">
<img src="assets/image/product/product-4.jpg" class="w-100 img-fluid border-radius" alt="product-4">
</div>
<div class="swiper-slide">
<img src="assets/image/product/product-5.jpg" class="w-100 img-fluid border-radius" alt="product-5">
</div>
</div>
</div>
</div>
<!-- quickview-img-small end -->
</div>
</div>
</div>
<!-- quickview-detail-slider end -->
</div>
<div class="col-12 col-md-6">
<!-- quickview-info start -->
<div class="quickview-info p-md-relative height-md-100">
<div class="quickview-detail-info p-md-absolute top-0 bottom-0 start-0 psl-md-3 per-md-30">
<div class="quick-info">
<div class="product-title">
<h2 class="font-20">Glow boost face cream</h2>
</div>
</div>
<div class="quick-info mst-10">
<div class="product-ratting">
<div class="pro-review">
<span class="review-ratting">
<span class="review-star icon-16">
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-line"></i>
</span>
<span class="review-total"><span class="review-average">4.0</span> / 5.0 & <span class="review-caption heading-color heading-weight">2 Ratings</span></span>
</span>
</div>
</div>
</div>
<div class="quick-info mst-5">
<div class="product-view">
<span class="heading-color heading-weight"><i class="ri-eye-line icon-16 mer-4 fw-normal blinking"></i>You're not alone - <span class="product-live-visitor primary-color"></span> others are browsing this item</span>
</div>
</div>
<div class="quick-info mst-10">
<div class="product-price">
<div class="pro-price-box">
<span class="new-price primary-color font-20 heading-weight">$79.00</span>
<span class="old-price font-20 heading-weight">
<span class="text-uppercase">M.r.p</span>
<span class="text-decoration-line-through">$89.00</span>
</span>
<span class="discount-price text-danger font-20 heading-weight">11% off</span>
</div>
<div class="font-12 mst-2">Inclusive of all taxes. <a href="shipping-policy.html" class="body-secondary-color text-decoration-underline">Shipping</a> calculated at checkout.</div>
</div>
</div>
<div class="quick-info mst-10">
<div class="product-availability">
<span class="d-inline-block text-success"><span class="heading-color heading-weight">Availability:</span> In stock</span>
</div>
</div>
<div class="quick-info mst-5">
<div class="product-stock">
<span class="d-inline-block stock-fill">Selling quickly - <span class="text-success"><span class="available-stock">66</span> items left</span></span>
<div class="product-stock-bar product-stock-fill mst-6 br-hidden"></div>
</div>
</div>
<div class="quick-info mst-5">
<div class="product-sold">
<span class="text-danger heading-weight"><i class="ri-fire-line icon-16 mer-4 fw-normal blinking"></i>Just <span class="product-sold-count"></span> sold in the last <span class="product-hours-count"></span> hours</span>
</div>
</div>
<div class="quick-info mst-5">
<div class="product-timer">
<div class="product-timer-countdown">
<span class="heading-color heading-weight"><i class="ri-timer-line text-danger icon-16 mer-4 fw-normal"></i>Hurry! Discounts disappearing fast -
<span class="countdown" data-time="2027/12/31 00:00:00">
<span class="text-danger"><span class="day"></span>D</span>
<span class="text-danger"><span class="hrs"></span>H</span>
<span class="text-danger"><span class="min"></span>M</span>
<span class="text-danger"><span class="sec"></span>S</span>
</span>
</span>
</div>
</div>
</div>
<div class="quick-info mst-20">
<div class="product-border bst"></div>
</div>
<div class="quick-info mst-15">
<div class="product-desc">
<p>Glow Boost Face Cream hydrates, brightens, and refreshes dull skin with a lightweight, vitamin-rich formula designed for daily use.</p>
</div>
</div>
<div class="quick-info mst-15">
<div class="product-border bst"></div>
</div>
<div class="quick-info mst-20">
<div class="product-variant">
<div class="product-variant-option">
<span class="d-inline-block meb-10"><span class="heading-color heading-weight">Size:</span> 50ml</span>
<div class="product-option-block size">
<ul class="ul-mt5">
<li>
<label class="cust-checkbox-label">
<input type="radio" name="quick-glow-boost-face-cream-size" class="cust-checkbox" value="50ml" checked>
<span class="d-flex align-items-center justify-content-center cust-check">50ml</span>
</label>
</li>
<li>
<label class="cust-checkbox-label disabled">
<input type="radio" name="quick-glow-boost-face-cream-size" class="cust-checkbox" value="100ml">
<span class="d-flex align-items-center justify-content-center cust-check">100ml</span>
</label>
</li>
</ul>
</div>
</div>
<div class="product-variant-option mst-15">
<span class="d-inline-block heading-color meb-10 heading-weight"><span class="">Color:</span> Aliceblue</span>
<div class="product-option-block color">
<ul class="ul-mt10">
<li>
<label class="cust-checkbox-label">
<input type="radio" name="quick-glow-boost-face-cream-color" class="cust-checkbox" value="aliceblue" checked>
<span class="d-block cust-check aliceblue"></span>
</label>
</li>
<li>
<label class="cust-checkbox-label disabled">
<input type="radio" name="quick-glow-boost-face-cream-color" class="cust-checkbox" value="antiquewhite">
<span class="d-block cust-check antiquewhite"></span>
</label>
</li>
<li>
<label class="cust-checkbox-label">
<input type="radio" name="quick-glow-boost-face-cream-color" class="cust-checkbox" value="azure">
<span class="d-block cust-check azure"></span>
</label>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="quick-info mst-15">
<div class="product-quantity-action">
<span class="d-inline-block meb-11"><span class="heading-color heading-weight">Quantity:</span></span>
<div class="product-quantity-wishlist d-flex flex-wrap align-items-center">
<div class="product-quantity">
<div class="js-qty-wrapper">
<div class="js-qty-wrap d-flex body-bg border-full br-hidden">
<button type="button" class="js-qty-adjust js-qty-adjust-minus body-color icon-16" aria-label="Remove item"><i class="ri-subtract-line d-block lh-1"></i></button>
<input type="number" name="quick-glow-boost-face-cream-50ml-aliceblue" class="js-qty-num p-0 text-center border-0" value="1" min="1">
<button type="button" class="js-qty-adjust js-qty-adjust-plus body-color icon-16" aria-label="Add item"><i class="ri-add-line d-block lh-1"></i></button>
</div>
</div>
</div>
<div class="product-wishlist">
<a href="javascript:void(0)" class="add-to-wishlist"><i class="ri-heart-line icon-16 mer-4"></i><span class="text-decoration-underline heading-weight">Save to wishlist</span></a>
</div>
<div class="product-compare">
<a href="product-comparison.html" class="add-to-compare"><i class="ri-stack-line icon-16 mer-4"></i><span class="text-decoration-underline heading-weight">Compare</span></a>
</div>
</div>
<div class="product-action mst-15">
<div class="row btn-row15">
<div class="col-12 col-md-6">
<button type="submit" class="w-100 btn-style quaternary-btn add-to-cart">
<span class="product-icon">
<span class="product-bag-icon">Add to cart</span>
<span class="product-loader-icon icon-16"><i class="ri-loader-4-line d-block lh-1"></i></span>
<span class="product-check-icon icon-16"><i class="ri-check-line d-block lh-1"></i></span>
</span>
</button>
</div>
<div class="col-12 col-md-6">
<a href="checkout.html" class="w-100 btn-style secondary-btn">Buy now</a>
</div>
</div>
</div>
</div>
</div>
<div class="quick-info mst-20">
<div class="product-border bst"></div>
</div>
<div class="quick-info mst-20">
<div class="product-payment">
<span class="d-inline-block heading-color meb-10 heading-weight">Payment protection guaranteed</span>
<ul class="payment-ul">
<li class="payment-li ul-mt5 lh-0">
<a href="javascript:void(0)" class="d-block"><img src="assets/image/other/paying-american.png" class="width-40 img-fluid border-radius" alt="paying-american"></a>
<a href="javascript:void(0)" class="d-block"><img src="assets/image/other/paying-club.png" class="width-40 img-fluid border-radius" alt="paying-club"></a>
<a href="javascript:void(0)" class="d-block"><img src="assets/image/other/paying-discover.png" class="width-40 img-fluid border-radius" alt="paying-discover"></a>
<a href="javascript:void(0)" class="d-block"><img src="assets/image/other/paying-maestro.png" class="width-40 img-fluid border-radius" alt="paying-maestro"></a>
<a href="javascript:void(0)" class="d-block"><img src="assets/image/other/paying-paypal.png" class="width-40 img-fluid border-radius" alt="paying-paypal"></a>
<a href="javascript:void(0)" class="d-block"><img src="assets/image/other/paying-visa.png" class="width-40 img-fluid border-radius" alt="paying-visa"></a>
</li>
</ul>
</div>
</div>
<div class="quick-info mst-10">
<div class="product-sku">
<span class="d-inline-block"><span class="heading-color heading-weight">SKU:</span> ER-ABC456</span>
</div>
</div>
<div class="quick-info mst-5">
<div class="product-share d-flex align-items-center">
<span class="heading-color heading-weight">Share:</span>
<div class="product-social">
<ul class="social-ul ul-mt5">
<li class="social-li">
<a href="javascript:void(0)" class="dribbble icon-16" aria-label="Social link"><i class="ri-dribbble-fill d-block lh-1"></i></a>
</li>
<li class="social-li">
<a href="javascript:void(0)" class="facebook icon-16" aria-label="Social link"><i class="ri-facebook-fill d-block lh-1"></i></a>
</li>
<li class="social-li">
<a href="javascript:void(0)" class="instagram icon-16" aria-label="Social link"><i class="ri-instagram-fill d-block instagram lh-1"></i></a>
</li>
<li class="social-li">
<a href="javascript:void(0)" class="linkedin icon-16" aria-label="Social link"><i class="ri-linkedin-fill d-block lh-1"></i></a>
</li>
<li class="social-li">
<a href="javascript:void(0)" class="pinterest icon-16" aria-label="Social link"><i class="ri-pinterest-fill d-block lh-1"></i></a>
</li>
<li class="social-li">
<a href="javascript:void(0)" class="twitter icon-16" aria-label="Social link"><i class="ri-twitter-x-fill d-block lh-1"></i></a>
</li>
</ul>
</div>
</div>
</div>
<div class="quick-info mst-5">
<div class="product-view-link">
<a href="product.html" class="d-inline-block font-12"><i class="ri-file-info-line mer-4"></i><span class="text-decoration-underline">View full details of this product</span></a>
</div>
</div>
</div>
</div>
<!-- quickview-info end -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- quickview-modal end -->
<!-- mobile-menu start -->
<div class="mobile-menu d-xl-none position-fixed top-0 bottom-0 body-bg z-index-5 invisible box-shadow" id="mobile-menu">
<div class="mobile-contents d-flex flex-column">
<div class="menu-close ptb-10 plr-15 beb">
<button type="button" class="menu-close-btn d-block body-secondary-color icon-16 ms-auto" aria-label="Menu close"><i class="ri-close-large-line d-block lh-1"></i></button>
</div>
<div class="mobilemenu-content beb">
<div class="main-wrap">
<ul class="menu-ul">
<li class="menu-li bst">
<div class="menu-btn d-flex flex-row-reverse">
<button type="button" class="width-48 icon-16 ptb-10 bsl" data-bs-toggle="collapse" data-bs-target="#menu-home" aria-expanded="false" aria-label="Menu accordion"><i class="ri-add-line d-block lh-1"></i></button>
<span class="width-calc-48 ptb-10 plr-15"><a href="index.html" class="d-inline-block body-color">Home</a></span>
</div>
<div class="menu-dropdown collapse" id="menu-home">
<ul class="menudrop-ul">
<li class="menudrop-li bst">
<span class="d-block ptb-10 psl-20 per-15"><a href="index.html" class="d-inline-block body-color">01 Classic beauty store</a></span>
</li>
<li class="menudrop-li bst">
<span class="d-block ptb-10 psl-20 per-15"><a href="index2.html" class="d-inline-block body-color">02 Skincare Shop</a></span>
</li>
<li class="menudrop-li bst">
<span class="d-block ptb-10 psl-20 per-15"><a href="index3.html" class="d-inline-block body-color">03 Makeup & cosmetics</a></span>
</li>
<li class="menudrop-li bst">
<span class="d-block ptb-10 psl-20 per-15"><a href="index4.html" class="d-inline-block body-color">04 Fragrance boutique</a></span>
</li>
<li class="menudrop-li bst">
<span class="d-block ptb-10 psl-20 per-15"><a href="index5.html" class="d-inline-block body-color">05 Organic beauty</a></span>
</li>
</ul>
</div>
</li>
<li class="menu-li bst">
<div class="menu-btn d-flex flex-row-reverse">
<button type="button" class="width-48 icon-16 ptb-10 bsl" data-bs-toggle="collapse" data-bs-target="#menu-product" aria-expanded="false" aria-label="Menu accordion"><i class="ri-add-line d-block lh-1"></i></button>
<span class="width-calc-48 ptb-10 plr-15"><a href="product.html" class="d-inline-block body-color">Product</a></span>
</div>
<div class="menu-dropdown collapse" id="menu-product">
<ul class="menudrop-ul">
<li class="menudrop-li bst">
<span class="d-block ptb-10 psl-20 per-15"><a href="collection.html" class="d-inline-block body-color">01 Classic card style</a></span>
</li>
<li class="menudrop-li bst">
<span class="d-block ptb-10 psl-20 per-15"><a href="collection2.html" class="d-inline-block body-color">02 Stylish card style</a></span>
</li>
<li class="menudrop-li bst">
<span class="d-block ptb-10 psl-20 per-15"><a href="collection3.html" class="d-inline-block body-color">03 Modern card style</a></span>
</li>
<li class="menudrop-li bst">
<span class="d-block ptb-10 psl-20 per-15"><a href="collection4.html" class="d-inline-block body-color">04 Overlay card style</a></span>
</li>
<li class="menudrop-li bst">
<span class="d-block ptb-10 psl-20 per-15"><a href="collection5.html" class="d-inline-block body-color">05 Elegant card style</a></span>
</li>
<li class="menudrop-li bst">
<span class="d-block ptb-10 psl-20 per-15"><a href="collections.html" class="d-inline-block body-color">Collections</a></span>
</li>
<li class="menudrop-li bst">
<span class="d-block ptb-10 psl-20 per-15"><a href="collection-category.html" class="d-inline-block body-color">Collection category</a></span>
</li>
<li class="menudrop-li bst">
<span class="d-block ptb-10 psl-20 per-15"><a href="collection-without.html" class="d-inline-block body-color">Collection full</a></span>
</li>
<li class="menudrop-li bst">
<span class="d-block ptb-10 psl-20 per-15"><a href="collection.html" class="d-inline-block body-color">Collection left</a></span>
</li>
<li class="menudrop-li bst">
<span class="d-block ptb-10 psl-20 per-15"><a href="collection-right.html" class="d-inline-block body-color">Collection right</a></span>
</li>
<li class="menudrop-li bst">
<span class="d-block ptb-10 psl-20 per-15"><a href="collection-list-without.html" class="d-inline-block body-color">Collection list full</a></span>
</li>
<li class="menudrop-li bst">
<span class="d-block ptb-10 psl-20 per-15"><a href="collection-list.html" class="d-inline-block body-color">Collection list left</a></span>
</li>
<li class="menudrop-li bst">
<span class="d-block ptb-10 psl-20 per-15"><a href="collection-list-right.html" class="d-inline-block body-color">Collection list right</a></span>
</li>
<li class="menudrop-li bst">
<span class="d-block ptb-10 psl-20 per-15"><a href="search-empty.html" class="d-inline-block body-color">Search empty</a></span>
</li>
<li class="menudrop-li bst">
<span class="d-block ptb-10 psl-20 per-15"><a href="search-product.html" class="d-inline-block body-color">Search product</a></span>
</li>
<li class="menudrop-li bst">
<div class="menu-btn d-flex flex-row-reverse">
<button type="button" class="width-48 icon-16 ptb-10 bsl" data-bs-toggle="collapse" data-bs-target="#menu-productlayout1" aria-expanded="false" aria-label="Menu accordion"><i class="ri-add-line d-block lh-1"></i></button>
<span class="width-calc-48 ptb-10 psl-20 per-15"><a href="collection.html" class="d-inline-block body-color">Product layout</a></span>
</div>
<div class="menusub-dropdown collapse" id="menu-productlayout1">
<ul class="menusub-ul">
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="product.html" class="d-inline-block body-color">01 Bottom thumbnail tab details</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="product2.html" class="d-inline-block body-color">02 Left thumbnail accordion details</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="product3.html" class="d-inline-block body-color">03 Right thumbnail details</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="product4.html" class="d-inline-block body-color">04 Modern layout</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="product5.html" class="d-inline-block body-color">05 Creative layout</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="product6.html" class="d-inline-block body-color">06 Solo thumbnail tab details</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="product7.html" class="d-inline-block body-color">07 Classic template</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="product8.html" class="d-inline-block body-color">08 Single grid layout</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="product9.html" class="d-inline-block body-color">09 Two grid layout</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="product-comparison.html" class="d-inline-block body-color">Product comparision</a></span>
</li>
</ul>
</div>
</li>
<li class="menudrop-li bst">
<div class="menu-btn d-flex flex-row-reverse">
<button type="button" class="width-48 icon-16 ptb-10 bsl" data-bs-toggle="collapse" data-bs-target="#menu-productfeatures" aria-expanded="false" aria-label="Menu accordion"><i class="ri-add-line d-block lh-1"></i></button>
<span class="width-calc-48 ptb-10 psl-20 per-15"><a href="product.html" class="d-inline-block body-color">Product features</a></span>
</div>
<div class="menusub-dropdown collapse" id="menu-productfeatures">
<ul class="menusub-ul">
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="product.html" class="d-inline-block body-color">Special promotions offers</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="product.html" class="d-inline-block body-color">Ask a question</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="product.html" class="d-inline-block body-color">Size guide</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="product.html" class="d-inline-block body-color">Pincode service availability</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="product.html" class="d-inline-block body-color">Product wishlist</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="product.html" class="d-inline-block body-color">Top social buzz</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="product.html" class="d-inline-block body-color">Product compare option</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="product9.html" class="d-inline-block body-color">Back in stock</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="product.html" class="d-inline-block body-color">Quick buy now button</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="product8.html" class="d-inline-block body-color">Pre-order</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="product2.html" class="d-inline-block body-color">Frequently bought together</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="product.html" class="d-inline-block body-color">Pickup availability option</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="product.html" class="d-inline-block body-color">Delivery options details</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="product.html" class="d-inline-block body-color">Trusted payment badge</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="product.html" class="d-inline-block body-color">Recommended product</a></span>
</li>
</ul>
</div>
</li>
<li class="menudrop-li bst">
<div class="menu-btn d-flex flex-row-reverse">
<button type="button" class="width-48 icon-16 ptb-10 bsl" data-bs-toggle="collapse" data-bs-target="#menu-productdetails" aria-expanded="false" aria-label="Menu accordion"><i class="ri-add-line d-block lh-1"></i></button>
<span class="width-calc-48 ptb-10 psl-20 per-15"><a href="product.html" class="d-inline-block body-color">Product details</a></span>
</div>
<div class="menusub-dropdown collapse" id="menu-productdetails">
<ul class="menusub-ul">
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="product.html" class="d-inline-block body-color">Currently views count</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="product.html" class="d-inline-block body-color">Stock count down</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="product.html" class="d-inline-block body-color">Items sold count</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="product.html" class="d-inline-block body-color">Deal count down timer</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="product.html" class="d-inline-block body-color">Product short description</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="product.html" class="d-inline-block body-color">Color swatch option</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="product2.html" class="d-inline-block body-color">Image swatch option</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="product3.html" class="d-inline-block body-color">Dropdown select option</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="product.html" class="d-inline-block body-color">Product sku code</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="product.html" class="d-inline-block body-color">Tab description</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="product3.html" class="d-inline-block body-color">Product detailed inline description</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="product4.html" class="d-inline-block body-color">Accordian description</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="product7.html" class="d-inline-block body-color">Vertical-tab description</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="product8.html" class="d-inline-block body-color">Product flat inline description</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="product.html" class="d-inline-block body-color">Product video</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="product.html" class="d-inline-block body-color">Product review</a></span>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="menu-li bst">
<div class="menu-btn d-flex flex-row-reverse">
<button type="button" class="width-48 icon-16 ptb-10 bsl" data-bs-toggle="collapse" data-bs-target="#menu-shop" aria-expanded="false" aria-label="Menu accordion"><i class="ri-add-line d-block lh-1"></i></button>
<span class="width-calc-48 ptb-10 plr-15"><a href="collection.html" class="d-inline-block body-color">Shop</a></span>
</div>
<div class="menu-dropdown collapse" id="menu-shop">
<ul class="menudrop-ul">
<li class="menudrop-li bst">
<div class="menu-btn d-flex flex-row-reverse">
<button type="button" class="width-48 icon-16 ptb-10 bsl" data-bs-toggle="collapse" data-bs-target="#menu-account" aria-expanded="false" aria-label="Menu accordion"><i class="ri-add-line d-block lh-1"></i></button>
<span class="width-calc-48 ptb-10 psl-20 per-15"><a href="javascript:void(0)" class="d-inline-block body-color">Account</a></span>
</div>
<div class="menusub-dropdown collapse" id="menu-account">
<ul class="menusub-ul">
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="login.html" class="d-inline-block body-color">Login</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="forgot-password.html" class="d-inline-block body-color">Forgot password</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="register.html" class="d-inline-block body-color">Register</a></span>
</li>
</ul>
</div>
</li>
<li class="menudrop-li bst">
<div class="menu-btn d-flex flex-row-reverse">
<button type="button" class="width-48 icon-16 ptb-10 bsl" data-bs-toggle="collapse" data-bs-target="#menu-other" aria-expanded="false" aria-label="Menu accordion"><i class="ri-add-line d-block lh-1"></i></button>
<span class="width-calc-48 ptb-10 psl-20 per-15"><a href="cart-page.html" class="d-inline-block body-color">Other</a></span>
</div>
<div class="menusub-dropdown collapse" id="menu-other">
<ul class="menusub-ul">
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="cancellation.html" class="d-inline-block body-color">404</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="cart-empty.html" class="d-inline-block body-color">Cart empty</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="cart-page.html" class="d-inline-block body-color">Cart</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="checkout.html" class="d-inline-block body-color">Checkout</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="coming-soon.html" class="d-inline-block body-color">Comingsoon</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="invoice.html" class="d-inline-block body-color">Invoice</a></span>
</li>
</ul>
</div>
</li>
<li class="menudrop-li bst">
<div class="menu-btn d-flex flex-row-reverse">
<button type="button" class="width-48 icon-16 ptb-10 bsl" data-bs-toggle="collapse" data-bs-target="#menu-order" aria-expanded="false" aria-label="Menu accordion"><i class="ri-add-line d-block lh-1"></i></button>
<span class="width-calc-48 ptb-10 psl-20 per-15"><a href="order.html" class="d-inline-block body-color">Order</a></span>
</div>
<div class="menusub-dropdown collapse" id="menu-order">
<ul class="menusub-ul">
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="order-complete.html" class="d-inline-block body-color">Order complete</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="order.html" class="d-inline-block body-color">Order</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="order-info.html" class="d-inline-block body-color">Order info</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="order-info-default.html" class="d-inline-block body-color">Order default</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="order-info-unfulfilled.html" class="d-inline-block body-color">Order unfulfilled</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="order-info-fulfilled.html" class="d-inline-block body-color">Order fulfilled</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="order-info-inprogress.html" class="d-inline-block body-color">Order inprogress</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="order-info-intransit.html" class="d-inline-block body-color">Order intransit</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="order-info-indelivery.html" class="d-inline-block body-color">Order indelivery</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="order-info-delivered.html" class="d-inline-block body-color">Order delivered</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="order-info-pickup.html" class="d-inline-block body-color">Order pickup</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="order-info-cancel.html" class="d-inline-block body-color">Order cancel</a></span>
</li>
</ul>
</div>
</li>
<li class="menudrop-li bst">
<div class="menu-btn d-flex flex-row-reverse">
<button type="button" class="width-48 icon-16 ptb-10 bsl" data-bs-toggle="collapse" data-bs-target="#menu-profile" aria-expanded="false" aria-label="Menu accordion"><i class="ri-add-line d-block lh-1"></i></button>
<span class="width-calc-48 ptb-10 psl-20 per-15"><a href="profile.html" class="d-inline-block body-color">Profile</a></span>
</div>
<div class="menusub-dropdown collapse" id="menu-profile">
<ul class="menusub-ul">
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="profile.html" class="d-inline-block body-color">Profile</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="profile-address.html" class="d-inline-block body-color">Profile address</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="profile-notification.html" class="d-inline-block body-color">Profile notification</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="profile-order.html" class="d-inline-block body-color">Profile order</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="profile-order-empty.html" class="d-inline-block body-color">Profile order empty</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="profile-ticket.html" class="d-inline-block body-color">Profile ticket</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="profile-ticket-empty.html" class="d-inline-block body-color">Profile ticket empty</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="profile-wishlist.html" class="d-inline-block body-color">Profile wishlist</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="profile-wishlist-empty.html" class="d-inline-block body-color">Profile wishlist empty</a></span>
</li>
</ul>
</div>
</li>
<li class="menudrop-li bst">
<div class="menu-btn d-flex flex-row-reverse">
<button type="button" class="width-48 icon-16 ptb-10 bsl" data-bs-toggle="collapse" data-bs-target="#menu-ticket" aria-expanded="false" aria-label="Menu accordion"><i class="ri-add-line d-block lh-1"></i></button>
<span class="width-calc-48 ptb-10 psl-20 per-15"><a href="ticket.html" class="d-inline-block body-color">Ticket</a></span>
</div>
<div class="menusub-dropdown collapse" id="menu-ticket">
<ul class="menusub-ul">
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="ticket.html" class="d-inline-block body-color">Ticket</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="ticket-create.html" class="d-inline-block body-color">Ticket create</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="ticket-edit.html" class="d-inline-block body-color">Ticket edit</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="ticket-info.html" class="d-inline-block body-color">Ticket info</a></span>
</li>
</ul>
</div>
</li>
<li class="menudrop-li bst">
<div class="menu-btn d-flex flex-row-reverse">
<button type="button" class="width-48 icon-16 ptb-10 bsl" data-bs-toggle="collapse" data-bs-target="#menu-policies" aria-expanded="false" aria-label="Menu accordion"><i class="ri-add-line d-block lh-1"></i></button>
<span class="width-calc-48 ptb-10 psl-20 per-15"><a href="javascript:void(0)" class="d-inline-block">Policies</a></span>
</div>
<div class="menusub-dropdown collapse" id="menu-policies">
<ul class="menusub-ul">
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="cancellation.html" class="d-inline-block body-color">Cancellation</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="cookie.html" class="d-inline-block body-color">Cookie</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="legal.html" class="d-inline-block body-color">Legal</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="payment-policy.html" class="d-inline-block body-color">Payment policy</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="privacy-policy.html" class="d-inline-block body-color">Privacy policy</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="return-policy.html" class="d-inline-block body-color">Return policy</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="shipping-policy.html" class="d-inline-block body-color">Shipping policy</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="terms-condition.html" class="d-inline-block body-color">Terms & condition</a></span>
</li>
</ul>
</div>
</li>
<li class="menudrop-li bst">
<div class="menu-btn d-flex flex-row-reverse">
<button type="button" class="width-48 icon-16 ptb-10 bsl" data-bs-toggle="collapse" data-bs-target="#menu-features" aria-expanded="false" aria-label="Menu accordion"><i class="ri-add-line d-block lh-1"></i></button>
<span class="width-calc-48 ptb-10 psl-20 per-15"><a href="javascript:void(0)" class="d-inline-block body-color">Features</a></span>
</div>
<div class="menusub-dropdown collapse" id="menu-features">
<ul class="menusub-ul">
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="button.html" class="d-inline-block body-color">Button</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="cart-drawer-empty.html" class="d-inline-block body-color">Cart drawer empty</a></span>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="menu-li bst">
<div class="menu-btn d-flex flex-row-reverse">
<button type="button" class="width-48 icon-16 ptb-10 bsl" data-bs-toggle="collapse" data-bs-target="#menu-blog" aria-expanded="false" aria-label="Menu accordion"><i class="ri-add-line d-block lh-1"></i></button>
<span class="width-calc-48 ptb-10 plr-15"><a href="blog.html" class="d-inline-block body-color">Blog</a></span>
</div>
<div class="menu-dropdown collapse" id="menu-blog">
<ul class="menudrop-ul">
<li class="menudrop-li bst">
<span class="d-block ptb-10 psl-20 per-15"><a href="blog-without.html" class="d-inline-block body-color">Blog</a></span>
</li>
<li class="menudrop-li bst">
<span class="d-block ptb-10 psl-20 per-15"><a href="blog.html" class="d-inline-block body-color">Blog left</a></span>
</li>
<li class="menudrop-li bst">
<span class="d-block ptb-10 psl-20 per-15"><a href="blog-right.html" class="d-inline-block body-color">Blog right</a></span>
</li>
<li class="menudrop-li bst">
<span class="d-block ptb-10 psl-20 per-15"><a href="article-without.html" class="d-inline-block body-color">Article</a></span>
</li>
<li class="menudrop-li bst">
<span class="d-block ptb-10 psl-20 per-15"><a href="article.html" class="d-inline-block body-color">Article left</a></span>
</li>
<li class="menudrop-li bst">
<span class="d-block ptb-10 psl-20 per-15"><a href="article-right.html" class="d-inline-block body-color">Article right</a></span>
</li>
<li class="menudrop-li bst">
<span class="d-block ptb-10 psl-20 per-15"><a href="search-blog.html" class="d-inline-block body-color">Search blog</a></span>
</li>
</ul>
</div>
</li>
<li class="menu-li bst">
<div class="menu-btn d-flex flex-row-reverse">
<button type="button" class="width-48 icon-16 ptb-10 bsl" data-bs-toggle="collapse" data-bs-target="#menu-page" aria-expanded="false" aria-label="Menu accordion"><i class="ri-add-line d-block lh-1"></i></button>
<span class="width-calc-48 ptb-10 plr-15"><a href="javascript:void(0)" class="d-inline-block body-color">Page</a></span>
</div>
<div class="menu-dropdown collapse" id="menu-page">
<ul class="menudrop-ul">
<li class="menudrop-li bst">
<div class="menu-btn d-flex flex-row-reverse">
<button type="button" class="width-48 icon-16 ptb-10 bsl" data-bs-toggle="collapse" data-bs-target="#menu-about" aria-expanded="false" aria-label="Menu accordion"><i class="ri-add-line d-block lh-1"></i></button>
<span class="width-calc-48 ptb-10 psl-20 per-15"><a href="about-us.html" class="d-inline-block body-color">About us</a></span>
</div>
<div class="menusub-dropdown collapse" id="menu-about">
<ul class="menusub-ul">
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="about-us.html" class="d-inline-block body-color">01 Modern aboutus</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="about-us2.html" class="d-inline-block body-color">02 Creative aboutus</a></span>
</li>
</ul>
</div>
</li>
<li class="menudrop-li bst">
<div class="menu-btn d-flex flex-row-reverse">
<button type="button" class="width-48 icon-16 ptb-10 bsl" data-bs-toggle="collapse" data-bs-target="#menu-contact" aria-expanded="false" aria-label="Menu accordion"><i class="ri-add-line d-block lh-1"></i></button>
<span class="width-calc-48 ptb-10 psl-20 per-15"><a href="contact-us.html" class="d-inline-block body-color">Contact us</a></span>
</div>
<div class="menusub-dropdown collapse" id="menu-contact">
<ul class="menusub-ul">
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="contact-us.html" class="d-inline-block body-color">01 Creative contactus</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="contact-us2.html" class="d-inline-block body-color">02 Standard contactus</a></span>
</li>
</ul>
</div>
</li>
<li class="menudrop-li bst">
<span class="d-block ptb-10 psl-20 per-15"><a href="faqs.html" class="d-inline-block body-color">Faqs</a></span>
</li>
<li class="menudrop-li bst">
<span class="d-block ptb-10 psl-20 per-15"><a href="sitemap.html" class="d-inline-block body-color">Sitemap</a></span>
</li>
<li class="menudrop-li bst">
<span class="d-block ptb-10 psl-20 per-15"><a href="store.html" class="d-inline-block body-color">Store</a></span>
</li>
<li class="menudrop-li bst">
<span class="d-block ptb-10 psl-20 per-15"><a href="track-order.html" class="d-inline-block body-color">Track order</a></span>
</li>
<li class="menudrop-li bst">
<div class="menu-btn d-flex flex-row-reverse">
<button type="button" class="width-48 icon-16 ptb-10 bsl" data-bs-toggle="collapse" data-bs-target="#menu-wishlist" aria-expanded="false" aria-label="Menu accordion"><i class="ri-add-line d-block lh-1"></i></button>
<span class="width-calc-48 ptb-10 psl-20 per-15"><a href="wishlist.html" class="d-inline-block body-color">Wishlist</a></span>
</div>
<div class="menusub-dropdown collapse" id="menu-wishlist">
<ul class="menusub-ul">
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="wishlist.html" class="d-inline-block body-color">Wishlist</a></span>
</li>
<li class="menusub-li bst">
<span class="d-block ptb-10 psl-25 per-15"><a href="wishlist-empty.html" class="d-inline-block body-color">Wishlist empty</a></span>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- mobile-menu end -->
<!-- search-modal start -->
<div class="search-modal modal fade" id="searchmodal">
<div class="modal-dialog mw-100 m-0">
<div class="modal-content body-bg border-0 rounded-0">
<div class="modal-body p-0">
<div class="container">
<div class="search-content ptb-30">
<div class="search-box d-flex flex-row-reverse">
<button type="button" class="d-block search-close body-secondary-color icon-16" data-bs-dismiss="modal" aria-label="Close"><i class="ri-close-large-line d-block lh-1"></i></button>
<form method="get" action="javascript:void(0)" class="search-form w-100">
<div class="search-bar position-relative">
<div class="form-search d-flex flex-row-reverse">
<input type="search" name="search-input" class="search-input w-100 h-auto ptb-0 plr-15 bg-transparent border-0" value="" placeholder="Search here" required>
<button type="submit" onclick="window.location.href='search-product.html'" class="d-block search-btn body-secondary-color icon-16" aria-label="Go to search" disabled><i class="ri-search-line d-block lh-1"></i></button>
</div>
<div class="d-none search-results position-absolute top-100 start-0 end-0 body-bg z-1 border-full border-radius box-shadow">
<div class="search-for ptb-10 plr-15 beb">Search for <span class="search-text">a</span></div>
<ul class="search-ul">
<li class="search-li ptb-5 plr-15 bst">
<a href="product.html" class="body-primary-color d-flex flex-wrap align-items-center">
<span class="width-48"><img src="assets/image/search/search-product1.jpg" class="w-100 img-fluid border-radius" alt="search-product1"></span>
<span class="width-calc-48 psl-15 text-truncate">Glow boost face cream</span>
</a>
</li>
<li class="search-li ptb-5 plr-15 bst">
<a href="product.html" class="body-primary-color d-flex flex-wrap align-items-center">
<span class="width-48"><img src="assets/image/search/search-product2.jpg" class="w-100 img-fluid border-radius" alt="search-product2"></span>
<span class="width-calc-48 psl-15 text-truncate">Velvet kiss lipstick set</span>
</a>
</li>
<li class="search-li ptb-5 plr-15 bst">
<a href="product.html" class="body-primary-color d-flex flex-wrap align-items-center">
<span class="width-48"><img src="assets/image/search/search-product3.jpg" class="w-100 img-fluid border-radius" alt="search-product3"></span>
<span class="width-calc-48 psl-15 text-truncate">Herbal shine hair oil</span>
</a>
</li>
<li class="search-li ptb-5 plr-15 bst">
<a href="product.html" class="body-primary-color d-flex flex-wrap align-items-center">
<span class="width-48"><img src="assets/image/search/search-product4.jpg" class="w-100 img-fluid border-radius" alt="search-product4"></span>
<span class="width-calc-48 psl-15 text-truncate">Smooth touch wax strips</span>
</a>
</li>
<li class="search-li ptb-5 plr-15 bst">
<a href="product.html" class="body-primary-color d-flex flex-wrap align-items-center">
<span class="width-48"><img src="assets/image/search/search-product5.jpg" class="w-100 img-fluid border-radius" alt="search-product5"></span>
<span class="width-calc-48 psl-15 text-truncate">Mystic bloom perfume mist</span>
</a>
</li>
<li class="search-li ptb-5 plr-15 bst">
<a href="product.html" class="body-primary-color d-flex flex-wrap align-items-center">
<span class="width-48"><img src="assets/image/search/search-product6.jpg" class="w-100 img-fluid border-radius" alt="search-product6"></span>
<span class="width-calc-48 psl-15 text-truncate">Glossy nails polish pack</span>
</a>
</li>
<li class="search-li ptb-5 plr-15 bst">
<a href="product.html" class="body-primary-color d-flex flex-wrap align-items-center">
<span class="width-48"><img src="assets/image/search/search-product7.jpg" class="w-100 img-fluid border-radius" alt="search-product7"></span>
<span class="width-calc-48 psl-15 text-truncate">Rose petal bath soak</span>
</a>
</li>
<li class="search-li ptb-5 plr-15 bst">
<a href="product.html" class="body-primary-color d-flex flex-wrap align-items-center">
<span class="width-48"><img src="assets/image/search/search-product8.jpg" class="w-100 img-fluid border-radius" alt="search-product8"></span>
<span class="width-calc-48 psl-15 text-truncate">Pro blend makeup brush</span>
</a>
</li>
<li class="search-li ptb-5 plr-15 bst">
<a href="product.html" class="body-primary-color d-flex flex-wrap align-items-center">
<span class="width-48"><img src="assets/image/search/search-product9.jpg" class="w-100 img-fluid border-radius" alt="search-product9"></span>
<span class="width-calc-48 psl-15 text-truncate">Organic aloe face serum</span>
</a>
</li>
<li class="search-li ptb-5 plr-15 bst">
<a href="product.html" class="body-primary-color d-flex flex-wrap align-items-center">
<span class="width-48"><img src="assets/image/search/search-product10.jpg" class="w-100 img-fluid border-radius" alt="search-product10"></span>
<span class="width-calc-48 psl-15 text-truncate">Beard luxe grooming kit</span>
</a>
</li>
<li class="search-li ptb-5 plr-15 bst">
<a href="product.html" class="body-primary-color d-flex flex-wrap align-items-center">
<span class="width-48"><img src="assets/image/search/search-product11.jpg" class="w-100 img-fluid border-radius" alt="search-product11"></span>
<span class="width-calc-48 psl-15 text-truncate">Radiance LED skin mask</span>
</a>
</li>
<li class="search-li ptb-5 plr-15 bst">
<a href="product.html" class="body-primary-color d-flex flex-wrap align-items-center">
<span class="width-48"><img src="assets/image/search/search-product12.jpg" class="w-100 img-fluid border-radius" alt="search-product12"></span>
<span class="width-calc-48 psl-15 text-truncate">Luxury glow gift box</span>
</a>
</li>
</ul>
<div class="search-more ptb-10 plr-15 bst"><a href="search-product.html" class="body-secondary-color text-decoration-underline">See all results (12)</a></div>
<div class="search-fail ptb-10 plr-15">Search not found</div>
</div>
</div>
</form>
</div>
<div class="search-example-text mst-15">Trending search: a, e, skincare...</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- search-modal end -->
<!-- cart-drawer start -->
<div class="cart-drawer position-fixed top-0 bottom-0 body-bg z-index-5 invisible box-shadow" id="cart-drawer">
<form method="post" action="javascript:void(0)" class="drawer-contents d-flex flex-column">
<div class="drawer-fixed-header ptb-10 plr-15 beb">
<div class="drawer-header d-flex align-items-center justify-content-between">
<h6 class="font-18">My shopping cart</h6>
<div class="drawer-close">
<button type="button" class="drawer-close-btn body-secondary-color icon-16" aria-label="Close"><i class="ri-close-large-line d-block lh-1"></i></button>
</div>
</div>
</div>
<div class="pst-10 plr-15 text-center">
<div class="extra-color font-14 ptb-6 plr-15 primary-bg">First order? Get 11% off with code <span class="heading-weight blinking">11%OFF</span>.</div>
</div>
<div class="drawer-cart-empty d-none h-100 ptb-30 plr-15">
<div class="drawer-scrollable h-100 d-flex flex-column align-items-center justify-content-center text-center">
<span class="heading-color icon-32 meb-24"><i class="ri-shopping-bag-3-line d-block lh-1"></i></span>
<h2 class="font-24">No items in your shopping cart - yet!</h2>
<a href="collection.html" class="btn-style secondary-btn mst-24">Continue shopping</a>
</div>
</div>
<div class="drawer-inner h-100 d-flex flex-column justify-content-between overflow-hidden">
<div class="drawer-scrollable h-100 overflow-auto">
<div class="cart-drawer-table plr-15">
<div class="cart-drawer-info ptb-15 bst">
<div class="cart-drawer-content d-flex flex-wrap">
<div class="cart-drawer-image width-88">
<a href="product.html" class="d-block br-hidden"><img src="assets/image/cart/cart-1.jpg" class="w-100 img-fluid" alt="cart-1"></a>
</div>
<div class="cart-drawer-info width-calc-88 psl-15">
<div class="cart-drawer-detail">
<a href="product.html" class="primary-link">Glow boost face cream</a>
<span class="d-block mst-5">50ml / Aliceblue</span>
</div>
<div class="heading-color heading-weight mst-5">$79.00</div>
<div class="cart-drawer-qty-remove d-flex align-items-end justify-content-between mst-15">
<div class="js-qty-wrapper">
<div class="js-qty-wrap d-flex body-bg border-full br-hidden">
<button type="button" class="js-qty-adjust js-qty-adjust-minus body-color icon-16" aria-label="Remove item"><i class="ri-subtract-line d-block lh-1"></i></button>
<input type="number" name="glow-boost-face-cream-50ml-aliceblue" class="js-qty-num p-0 text-center border-0" value="1" min="1">
<button type="button" class="js-qty-adjust js-qty-adjust-plus body-color icon-16" aria-label="Add item"><i class="ri-add-line d-block lh-1"></i></button>
</div>
</div>
<button type="submit" class="cart-drawer-remove text-danger icon-16" aria-label="Remove item"><i class="ri-delete-bin-line d-block lh-1"></i></button>
</div>
<div class="text-danger font-14 mst-6"><i class="ri-error-warning-line mer-4"></i>Hurry! Only <span class="heading-weight">15</span> in stock.</div>
</div>
</div>
</div>
<div class="cart-drawer-info ptb-15 bst">
<div class="cart-drawer-content d-flex flex-wrap">
<div class="cart-drawer-image width-88">
<a href="product.html" class="d-block br-hidden"><img src="assets/image/cart/cart-2.jpg" class="w-100 img-fluid" alt="cart-2"></a>
</div>
<div class="cart-drawer-info width-calc-88 psl-15">
<div class="cart-drawer-detail">
<a href="product.html" class="primary-link">Velvet kiss lipstick set</a>
<span class="d-block mst-5">Single / Azure</span>
</div>
<div class="heading-color heading-weight mst-5">$49.00</div>
<div class="cart-drawer-qty-remove d-flex align-items-end justify-content-between mst-15">
<div class="js-qty-wrapper">
<div class="js-qty-wrap d-flex body-bg border-full br-hidden">
<button type="button" class="js-qty-adjust js-qty-adjust-minus body-color icon-16" aria-label="Remove item"><i class="ri-subtract-line d-block lh-1"></i></button>
<input type="number" name="velvet-kiss-lipstick-set-single-azure" class="js-qty-num p-0 text-center border-0" value="1" min="1">
<button type="button" class="js-qty-adjust js-qty-adjust-plus body-color icon-16" aria-label="Add item"><i class="ri-add-line d-block lh-1"></i></button>
</div>
</div>
<button type="submit" class="cart-drawer-remove text-danger icon-16" aria-label="Remove item"><i class="ri-delete-bin-line d-block lh-1"></i></button>
</div>
<div class="text-danger font-14 mst-6"><i class="ri-error-warning-line mer-4"></i>Hurry! Only <span class="heading-weight">9</span> in stock.</div>
</div>
</div>
</div>
<div class="cart-drawer-info ptb-15 bst">
<div class="cart-drawer-content d-flex flex-wrap">
<div class="cart-drawer-image width-88">
<a href="product.html" class="d-block br-hidden"><img src="assets/image/cart/cart-3.jpg" class="w-100 img-fluid" alt="cart-3"></a>
</div>
<div class="cart-drawer-info width-calc-88 psl-15">
<div class="cart-drawer-detail">
<a href="product.html" class="primary-link">Herbal shine hair oil</a>
<span class="d-block mst-5">100ml / Aliceblue</span>
</div>
<div class="heading-color heading-weight mst-5">$69.00</div>
<div class="cart-drawer-qty-remove d-flex align-items-end justify-content-between mst-15">
<div class="js-qty-wrapper">
<div class="js-qty-wrap d-flex body-bg border-full br-hidden">
<button type="button" class="js-qty-adjust js-qty-adjust-minus body-color icon-16" aria-label="Remove item"><i class="ri-subtract-line d-block lh-1"></i></button>
<input type="number" name="Herbal-shine-hair-oil-100ml-aliceblue" class="js-qty-num p-0 text-center border-0" value="1" min="1">
<button type="button" class="js-qty-adjust js-qty-adjust-plus body-color icon-16" aria-label="Add item"><i class="ri-add-line d-block lh-1"></i></button>
</div>
</div>
<button type="submit" class="cart-drawer-remove text-danger icon-16" aria-label="Remove item"><i class="ri-delete-bin-line d-block lh-1"></i></button>
</div>
</div>
</div>
</div>
<div class="cart-drawer-info ptb-15 bst">
<div class="cart-drawer-content d-flex flex-wrap">
<div class="cart-drawer-image width-88">
<a href="product.html" class="d-block br-hidden"><img src="assets/image/cart/cart-4.jpg" class="w-100 img-fluid" alt="cart-4"></a>
</div>
<div class="cart-drawer-info width-calc-88 psl-15">
<div class="cart-drawer-detail">
<a href="product.html" class="primary-link">Smooth touch wax strips</a>
<span class="d-block mst-5">20 Strips / Azure</span>
</div>
<div class="heading-color heading-weight mst-5">$49.00</div>
<div class="cart-drawer-qty-remove d-flex align-items-end justify-content-between mst-15">
<div class="js-qty-wrapper">
<div class="js-qty-wrap d-flex body-bg border-full br-hidden">
<button type="button" class="js-qty-adjust js-qty-adjust-minus body-color icon-16" aria-label="Remove item"><i class="ri-subtract-line d-block lh-1"></i></button>
<input type="number" name="smooth-touch-wax-strips-20-strips-azure" class="js-qty-num p-0 text-center border-0" value="1" min="1">
<button type="button" class="js-qty-adjust js-qty-adjust-plus body-color icon-16" aria-label="Add item"><i class="ri-add-line d-block lh-1"></i></button>
</div>
</div>
<button type="submit" class="cart-drawer-remove text-danger icon-16" aria-label="Remove item"><i class="ri-delete-bin-line d-block lh-1"></i></button>
</div>
</div>
</div>
</div>
</div>
<div class="drawer-recommended-product ptb-15 plr-15 bst">
<div class="d-flex flex-wrap align-items-center justify-content-between">
<div class="heading-color"><i class="ri-thumb-up-line icon-16 mer-4"></i>Recommended for you</div>
<div class="swiper-buttons lh-1">
<div class="swiper-buttons-wrap">
<button type="button" class="swiper-prev swiper-prev-drawer-recommended-product primary-link icon-16" aria-label="Arrow previous"><i class="ri-arrow-left-line d-block lh-1"></i></button>
<button type="button" class="swiper-next swiper-next-drawer-recommended-product primary-link icon-16" aria-label="Arrow next"><i class="ri-arrow-right-line d-block lh-1"></i></button>
</div>
</div>
</div>
<div class="drawer-recommended-product-wrap pst-15">
<div class="drawer-recommended-product-slider swiper" id="drawer-recommended-product-slider">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="drawer-recommended-product">
<div class="row drawer-recommended-single-product-wrap">
<div class="product-image">
<a href="product.html" class="pro-img"><img src="assets/image/product/p-1.jpg" class="w-100 img-fluid" alt="p-1"></a>
</div>
<div class="product-content">
<div class="pro-content">
<div class="product-title">
<span class="d-block font-14"><a href="product.html" class="d-block w-100 text-truncate">Glow boost face cream</a></span>
</div>
<div class="product-price">
<div class="price-box font-14 heading-weight">
<span class="new-price secondary-color">$79.00</span>
<span class="old-price text-decoration-line-through">$89.00</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="drawer-recommended-product">
<div class="row drawer-recommended-single-product-wrap">
<div class="product-image">
<a href="product.html" class="pro-img"><img src="assets/image/product/p-3.jpg" class="w-100 img-fluid" alt="p-3"></a>
</div>
<div class="product-content">
<div class="pro-content">
<div class="product-title">
<span class="d-block font-14"><a href="product.html" class="d-block w-100 text-truncate">Velvet kiss lipstick set</a></span>
</div>
<div class="product-price">
<div class="price-box font-14 heading-weight">
<span class="new-price secondary-color">$49.00</span>
<span class="old-price text-decoration-line-through">$59.00</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="drawer-recommended-product">
<div class="row drawer-recommended-single-product-wrap">
<div class="product-image">
<a href="product.html" class="pro-img"><img src="assets/image/product/p-5.jpg" class="w-100 img-fluid" alt="p-5"></a>
</div>
<div class="product-content">
<div class="pro-content">
<div class="product-title">
<span class="d-block font-14"><a href="product.html" class="d-block w-100 text-truncate">Herbal shine hair oil</a></span>
</div>
<div class="product-price">
<div class="price-box font-14 heading-weight">
<span class="new-price secondary-color">$69.00</span>
<span class="old-price text-decoration-line-through">$79.00</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="drawer-recommended-product">
<div class="row drawer-recommended-single-product-wrap">
<div class="product-image">
<a href="product.html" class="pro-img"><img src="assets/image/product/p-7.jpg" class="w-100 img-fluid" alt="p-7"></a>
</div>
<div class="product-content">
<div class="pro-content">
<div class="product-title">
<span class="d-block font-14"><a href="product.html" class="d-block w-100 text-truncate">Smooth touch wax strips</a></span>
</div>
<div class="product-price">
<div class="price-box font-14 heading-weight">
<span class="new-price secondary-color">$49.00</span>
<span class="old-price text-decoration-line-through">$54.00</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="drawer-instruction ptb-15 plr-15 bst">
<a href="#collapse-drawer-note" class="d-flex flex-wrap align-items-center justify-content-between" data-bs-toggle="collapse" aria-expanded="true">
<span class="drawer-instruction-title width-calc-16"><i class="ri-edit-line icon-16 mer-4"></i>Type a note for the seller</span>
<span class="drawer-instruction-icon width-16 icon-16"><i class="ri-arrow-down-s-line"></i></span>
</a>
<div class="collapse show" id="collapse-drawer-note">
<div class="pst-15">
<textarea rows="3" id="drawernote" name="drawernote" class="w-100" placeholder="Write your message..." autocomplete="off"></textarea>
</div>
</div>
</div>
<div class="drawer-instruction ptb-15 plr-15 bst">
<a href="#collapse-drawer-discount" class="d-flex flex-wrap align-items-center justify-content-between" data-bs-toggle="collapse" aria-expanded="true">
<span class="drawer-instruction-title width-calc-16"><i class="ri-discount-percent-line icon-16 mer-4"></i>Have a code? Apply here</span>
<span class="drawer-instruction-icon width-16 icon-16"><i class="ri-arrow-down-s-line"></i></span>
</a>
<div class="collapse show" id="collapse-drawer-discount">
<div class="pst-15">
<div class="d-flex flex-wrap height-48 body-bg border-full br-hidden">
<input type="text" id="drawerdiscount" name="drawerdiscount" class="width-calc-48 h-auto border-0 rounded-0" placeholder="Type your code here" autocomplete="off" required>
<button type="button" class="width-48 icon-16 primary-link drawer-dis-btn" aria-label="Discount code button"><i class="ri-arrow-right-up-line"></i></button>
</div>
</div>
</div>
</div>
</div>
<div class="drawer-footer ptb-15 plr-15 bst">
<div class="drawer-total d-flex justify-content-between">
<span>Subtotal</span>
<span class="heading-color heading-weight">$246.00</span>
</div>
<div class="font-12 mst-7">Shipping, taxes, and discount codes calculated at checkout</div>
<div class="drawer-cart-checkout mst-11">
<div class="drawer-cart-box meb-10">
<label class="cust-checkbox-label checkbox-agree">
<input type="checkbox" id="drawer-terms" name="drawer-terms" class="cust-checkbox checkboxbtn">
<span class="d-block cust-check"></span>
<span class="login-read">I have agree with the <a href="terms-condition.html" class="body-secondary-color text-decoration-underline">terms & conditions</a>.</span>
</label>
</div>
<div class="row btn-row15">
<div class="col-12 col-md-6">
<a href="cart-page.html" class="w-100 btn-style quaternary-btn">View cart</a>
</div>
<div class="col-12 col-md-6">
<a href="checkout.html" class="w-100 btn-style secondary-btn hide-btn opacity-50 disabled pe-none">Checkout</a>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<!-- cart-drawer end -->
<!-- bottom-menu start -->
<div class="bottom-menu d-md-none position-sticky bottom-0 body-bg z-1 box-shadow">
<div class="bottom-menu-element d-flex flex-wrap align-items-center">
<div class="col">
<a href="index.html" class="d-flex flex-column align-items-center ptb-10 text-center">
<span class="bottom-menu-icon heading-color icon-16"><i class="ri-home-8-line d-block lh-1"></i></span>
<span class="bottom-menu-title body-color font-10 mst-4 text-uppercase lh-1">Home</span>
</a>
</div>
<div class="col">
<a href="account.html" class="d-flex flex-column align-items-center ptb-10 text-center">
<span class="bottom-menu-icon heading-color icon-16"><i class="ri-user-3-line d-block lh-1"></i></span>
<span class="bottom-menu-title body-color font-10 mst-4 text-uppercase lh-1">Account</span>
</a>
</div>
<div class="col">
<a href="collection.html" class="d-flex flex-column align-items-center ptb-10 text-center">
<span class="bottom-menu-icon heading-color icon-16"><i class="ri-layout-grid-line d-block lh-1"></i></span>
<span class="bottom-menu-title body-color font-10 mst-4 text-uppercase lh-1">Shop</span>
</a>
</div>
<div class="col">
<a href="wishlist.html" class="d-flex flex-column align-items-center ptb-10 text-center">
<span class="bottom-menu-icon-wrap d-flex flex-wrap align-items-center justify-content-center">
<span class="d-block bottom-menu-icon heading-color icon-16"><i class="ri-heart-line d-block lh-1"></i></span>
<span class="heading-weight lh-1">-</span>
<span class="bottom-menu-counter wishlist-counter heading-color lh-1">5</span>
</span>
<span class="bottom-menu-title body-color font-10 mst-4 text-uppercase lh-1">Wishlist</span>
</a>
</div>
<div class="col">
<a href="javascript:void(0)" class="js-cart-drawer d-flex flex-column align-items-center ptb-10 text-center">
<span class="bottom-menu-icon-wrap d-flex flex-wrap align-items-center justify-content-center">
<span class="bottom-menu-icon heading-color icon-16"><i class="ri-shopping-bag-3-line d-block lh-1"></i></span>
<span class="heading-weight lh-1">-</span>
<span class="bottom-menu-counter cart-counter heading-color lh-1">4</span>
</span>
<span class="bottom-menu-title body-color font-10 mst-4 text-uppercase lh-1">Cart</span>
</a>
</div>
</div>
</div>
<!-- bottom-menu end -->
<!-- bg-screen start -->
<div class="bg-screen">
<div class="bg-back position-fixed top-0 end-0 bottom-0 start-0 bg-black z-index-4 opacity-0 invisible"></div>
<div class="bg-shop position-fixed top-0 end-0 bottom-0 start-0 bg-black z-index-4 opacity-0 invisible"></div>
</div>
<!-- bg-screen end -->
<!-- back-to-top start -->
<a href="javascript:void(0)" id="top" class="icon-16 tertiary-btn position-fixed width-32 height-32 d-flex align-items-center justify-content-center z-1 opacity-0 invisible rounded-circle" aria-label="Back to top"><i class="ri-arrow-up-line d-block lh-1"></i></a>
<!-- back-to-top end -->
<!-- plugin js -->
<script src="assets/js/plugin.js"></script>
<!-- theme js -->
<script src="assets/js/theme4.js"></script>
</body>
</html>