/*=================================
   CSS INDEX
===================================
    1. Default CSS
    2. Left Sidebar CSS
    3. Right Sidebar CSS
    4. Header CSS
    5. Footer CSS 
    6. Home Page CSS
    7. Faq Page CSS
    8. Policy Pages CSS
    9. Blog Pages CSS
    10. About Pages CSS
    11. Quick View Popup CSS
    12. My Account Page CSS
    13. Checkout Page CSS

 =================================*/
/* Urbanist */
@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --body-font: "Urbanist", sans-serif;
    --primary-bg: #FCFCFC;
    --secondary-light-bg: #F7FFF9;
    --primary-text-color: #111826;
    --gray-text-color: #707070;
    --light-border-color: rgba(112, 112, 112, 0.1);
}

/*==================================
    1. Default CSS
====================================*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    position: relative;
}

.bg_primary {
    background-color: var(--primary-bg);
}

.bg_secondary {
    background-color: var(--secondary-bg);
}

body {
    font-family: var(--body-font);
    background-color: var(--primary-bg);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--body-font);
    color: var(--primary-text-color);
    margin-bottom: 0;
    line-height: unset;
    font-weight: unset;
}

ul li {
    list-style: none;
}

a,
a:hover,
a:active {
    text-decoration: none;
}

input,
input:focus {
    outline: none;
    box-shadow: none !important;
}

button,
button:focus {
    outline: none;
    box-shadow: none !important;
}

select,
select:focus {
    outline: none;
    box-shadow: none !important;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.1);
}

.container {
    max-width: 1080px;
    width: 100%;
}

.sidebar {
    max-width: 325px;
    height: 100%;
    overflow-y: auto;
    z-index: 1;
}

@media screen and (min-width: 1599px) {
    .sidebar {
        max-width: 400px;
    }
}

@media screen and (max-width: 575px) {
    .sidebar {
        max-width: 100%;
    }
}

@media screen and (max-width: 1399px) {
    .sidebar {
        height: calc(100% - var(--bottom-menu-height));
    }
}

.product-card-sidebar {
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--light-border-color);
}

.product-card .product-card-info .product-img {
    width: 80px;
    min-width: 80px;
    height: 80px;
    border-radius: 5px;
}

.product-card .product-card-info .product-img img {
    object-fit: cover;
}

.product-card .product-card-info .product-content h5 {
    font-size: 18px;
    font-weight: 600;
}

.product-card .product-card-info .product-content span.unit {
    color: var(--gray-text-color);
    font-size: 14px;
}

.product-card .product-card-info .product-content h6 {
    font-size: 16px;
    font-weight: 600;
}

.product-card .product-card-info .product-content h6 ins {
    text-decoration: none;
}

.product-card .product-card-info .product-content .yith-wcqv-button {
    font-size: 12px;
    color: var(--secondary-text-color);
    font-weight: 600;
    background-color: var(--secondary-light-bg);
    max-width: 75px;
    height: 26px;
    line-height: 26px;
    border-radius: 5px;
    width: 100%;
    border: 1px solid var(--secondary-text-color);
    transition: all 0.3s ease-in-out;
    text-align: center;
}

.product-card .product-card-info:hover .product-content .yith-wcqv-button {
    background-color: var(--secondary-text-color);
    color: white;
}

@media screen and (max-width: 575px) {
    .logo a img {
        width: 160px !important;
    }
}

/*==================================
    2. Left Sidebar CSS
====================================*/

.left-sidebar {
    padding: 30px 50px 30px 40px;
    border: 1px solid var(--light-border-color);
}

@media screen and (max-width: 1599px) {
    .left-sidebar {
        padding: 30px 20px 30px 20px;
    }
}

@media screen and (max-width: 575px) {
    .left-sidebar {
        padding: 20px 12px 30px 12px;
    }
}

.left-sidebar .logo {
    padding-bottom: 28px;
    border-bottom: 1px solid var(--light-border-color);
}

.left-sidebar .top-seller h4 {
    color: var(--primary-text-color);
    font-weight: 600;
    padding-top: 28px;
    padding-bottom: 20px;
}

.left-sidebar .top-categories h4 {
    color: var(--primary-text-color);
    font-weight: 600;
    padding-top: 28px;
    padding-bottom: 20px;
}

.left-sidebar .list-categories ul li a {
    font-size: 16px;
    padding: 8px 15px;
    border-radius: 50px;
    border: 1px solid var(--light-border-color);
    color: var(--gray-text-color);
    background-color: var(--primary-bg);
    transition: all 0.3s ease-in-out;
}

.left-sidebar .list-categories ul li a:hover {
    color: white;
    background-color: var(--secondary-bg);
    border: 1px solid var(--secondary-border-color);
}


.left-sidebar .list-categories ul li.active a {
    color: white;
    background-color: var(--secondary-bg);
    border: 1px solid var(--secondary-border-color);
}


/*==================================
    3. Right Sidebar CSS
====================================*/

.right-sidebar {
    padding: 30px 40px 30px 50px;
    border: 1px solid var(--light-border-color);
}

.right-sidebar h4.title {
    color: var(--primary-text-color);
    font-weight: 600;
    padding-top: 28px;
    padding-bottom: 20px;
}

@media screen and (max-width: 1599px) {
    .right-sidebar {
        padding: 30px 20px 30px 20px;
    }
}

@media screen and (max-width: 575px) {
    .right-sidebar {
        padding: 20px 12px 30px 12px;
    }
}

.right-sidebar .logo {
    padding-bottom: 28px;
    border-bottom: 1px solid var(--light-border-color);
}

.right-sidebar .accordion .accordion-item .accordion-header .accordion-button {
    font-weight: 600;
    font-size: 20px;
    color: var(--primary-text-color);
}

.right-sidebar .accordion .accordion-item .accordion-body ul {
    padding-bottom: 10px;
}

.right-sidebar .accordion .accordion-item .accordion-body ul li {
    margin-bottom: 8px;
    margin-top: 8px;
}

.right-sidebar .accordion .accordion-item .accordion-body ul li a {
    font-size: 16px;
    color: var(--gray-text-color);
    font-weight: 400;
}

.right-sidebar .accordion .accordion-item .accordion-body ul li a:hover {
    color: var(--secondary-text-color);
}

/*==================================
    4. Header CSS
====================================*/

header {
    border-bottom: 1px solid var(--light-border-color);
}


header nav {
    padding: 20px 0;
}

header .mobile-menu .mobile-link a {
    font-size: 14px;
    font-weight: 600;
    color: var(--secondary-text-color);
    text-decoration: underline;
    text-underline-offset: 3px;
}


header .address-info h4 {
    font-size: 16px;
    font-weight: 600;
}

header .address-info h5 {
    font-size: 14px;
    font-weight: 600;
}

@media screen and (max-width: 575px) {
    header .address-info h5 {
        font-size: 11px;
    }
}

header .address-info h5 span {
    color: var(--gray-text-color);
}

header .search-form form {
    position: relative;
}

header .search-form form span {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
}

header .search-form form input {
    background-color: var(--primary-bg);
    border: 1px solid var(--light-border-color);
    font-size: 14px;
    font-weight: 400;
    color: var(--gray-text-color);
    height: 48px;
    padding-left: 48px;
    outline: none;
}

header .search-form form input:focus {
    border: 1px solid var(--secondary-border-color);
}

header .user-info-cart .dropdown button {
    font-size: 16px;
    font-weight: 500;
}

header .user-info-cart .dropdown button img {
    width: 60px;
    height: 60px;
    min-width: 60px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
}

header .user-info-cart .dropdown .dropdown-menu {
    border-radius: 5px;
}

header .user-info-cart .dropdown .dropdown-menu {
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--light-border-color);
}

header .user-info-cart .dropdown .dropdown-menu li .dropdown-item.active,
.dropdown-item:active {
    background-color: var(--secondary-bg);
    color: white !important;
}

header .user-info-cart .dropdown .dropdown-menu li {
    padding: 0;
}

header .user-info-cart .dropdown .dropdown-menu li a {
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-text-color);
    padding: 10px 12px;
}

header .user-info-cart .cart-info .cart-btn {
    border-radius: 5px;
    background-color: var(--secondary-bg);

}

header .user-info-cart .cart-info .cart-btn .xoo-wsc-sc-subt {
    display: none;
}

header .user-info-cart .cart-info .cart-btn .xoo-wsc-sc-bki {
    font-size: 28px;
    color: white;
}

header .user-info-cart .cart-info .cart-btn .xoo-wsc-sc-count {
    background-color: white;
    color: var(--primary-text-color);
}

header .user-info-cart .cart-info a img {
    margin-right: 10px;
}

header .user-info-cart .cart-info a span {
    width: 20px;
    height: 20px;
    min-width: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    background-color: var(--primary-bg);
    border-radius: 50%;
    color: var(--primary-text-color);
    position: absolute;
    top: 10px;
    right: 10px;
}

header .user-info-cart .back-to-store-btn a {
    background-color: var(--secondary-bg);
    border-radius: 5px;
    color: white;
}

.bottom-menu-mobile {
    background-color: var(--primary-bg);
    border: 1px solid var(--light-border-color);
    z-index: 2;
}

.bottom-menu-mobile ul {
    padding: 15px 0;
}

.bottom-menu-mobile ul li a {
    font-size: 15px;
    font-weight: 500;
    color: var(--primary-text-color);
    text-transform: capitalize;
}

.bottom-menu-mobile ul li a span img {
    height: 30px;
}

/* Header Search CSS */

#ajax-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

#ajax-search-results {
    position: absolute;
    width: 100%;
    top: 100%;
    left: 0;
    padding-left: 12px;
    padding-right: 12px;
    z-index: 999;
}

#ajax-search-results ul {
    padding: 20px;
    border-radius: 5px;
    border: 1px solid var(--light-border-color);
    background-color: white;
}

#ajax-search-results ul li {
    margin-bottom: 15px;
}

#ajax-search-results ul li:last-child {
    margin-bottom: 0;
}

/*==================================
    5. Footer CSS
====================================*/

footer {
    margin-top: 30px;
    margin-bottom: 20px;
}

footer .footer-content {
    padding: 35px;
    border: 1px solid var(--light-border-color);
    border-radius: 5px;
}

@media screen and (max-width: 575px) {
    footer .footer-content {
        padding: 25px;
    }
}

footer .footer-content .footer-col-one p {
    margin-top: 20px;
    color: var(--gray-text-color);
    font-weight: 400;
    letter-spacing: 0.32px;
    line-height: 28px;
}

footer .footer-content .footer-links h4 {
    color: var(--primary-text-color);
    font-weight: 600;
    font-size: 24px;
}

footer .footer-content .footer-links ul li {
    margin-bottom: 10px;
}

footer .footer-content .footer-links ul li a {
    color: var(--gray-text-color);
    line-height: 26px;
    font-size: 16px;
    letter-spacing: 0.32px;
}

footer .footer-content .footer-links ul li a:hover {
    color: var(--secondary-text-color);
}

footer .footer-content .copyright-text p {
    color: var(--gray-text-color);
    font-size: 14px;
    margin-bottom: 0;
}

/*==================================
    6. Home Page CSS
====================================*/

@media screen and (max-width: 1399px) {
    .home-content .middle-content {
        padding-bottom: 100px;
    }
}



.middle-content {
    padding-left: 325px;
    padding-right: 325px;
}

@media screen and (min-width: 1599px) {
    .middle-content {
        padding-left: 400px;
        padding-right: 400px;
    }
}

.disable-middle-content {
    opacity: 0.4;
    height: 100vh;
    overflow: hidden;
    z-index: -1;
}

@media screen and (max-width: 1399px) {
    .middle-content {
        padding-right: 0;
        padding-left: 0;
    }
}

.product-card-main {
    padding: 15px;
    border: 1px solid var(--light-border-color);
    border-radius: 5px;
}

.list-section {
    padding-top: 40px;
}

.list-section .back-to-home {
    font-weight: 600;
    font-size: 18px;
    color: var(--gray-text-color);
}

@media screen and (max-width: 768px) {
    .list-section {
        padding-top: 30px;
    }
}

.list-section h3 {
    font-weight: 600;
    font-size: 24px;
    padding-bottom: 25px;
}

@media screen and (max-width: 768px) {
    .list-section li {
        width: 100%;
    }
}

@media (min-width: 769px) and (max-width: 1599px) {
    .list-section li {
        width: calc(50% - 12px);
    }
}

@media screen and (min-width: 1600px) {
    .list-section li {
        width: calc(33.33% - 6px);
    }
}

/*==================================
    7. Faq Page CSS
====================================*/

.faq-section .sec-title {
    font-size: 35px;
    color: var(--primary-text-color);
    font-weight: 600;
    padding-bottom: 60px;
}

@media screen and (max-width: 768px) {
    .faq-section .sec-title {
        font-size: 30px;
        padding-bottom: 30px;
    }
}

.faq-section .faq-content .single-content {
    padding-top: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid var(--light-border-color);
}

.faq-section .faq-content .single-content h4 {
    color: var(--primary-text-color);
    font-weight: 600;
    font-size: 20px;
    letter-spacing: 0.34px;
}

.faq-section .faq-content .single-content h5 {
    padding-top: 8px;
    font-weight: 400;
    font-size: 18px;
    color: var(--gray-text-color);
    letter-spacing: 0.34px;
}

/*==================================
    8. Policy Pages CSS
====================================*/

.policy-section .sec-title {
    font-size: 35px;
    color: var(--primary-text-color);
    font-weight: 600;
    padding-bottom: 60px;
}

@media screen and (max-width: 768px) {
    .policy-section .sec-title {
        font-size: 30px;
        padding-bottom: 30px;
    }
}

.policy-section .policy-content .single-content {
    margin-top: 45px;
}

@media screen and (max-width: 768px) {
    .policy-section .policy-content .single-content {
        margin-top: 30px;
    }
}

.policy-section .policy-content .single-content:first-child {
    margin-top: 0;
}

.policy-section .policy-content .single-content h4 {
    color: var(--primary-text-color);
    font-weight: 600;
    font-size: 20px;
    letter-spacing: 0.34px;
}

.policy-section .policy-content .single-content h5 {
    padding-top: 15px;
}

.policy-section .policy-content .single-content h5,
.policy-section .policy-content .single-content ul li {
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    color: var(--gray-text-color);
    letter-spacing: 0.34px;
}

/*==================================
    9. Blog Pages CSS
====================================*/

.blog-section {
    padding-top: 65px;
    padding-bottom: 35px;
}

@media screen and (max-width: 768px) {
    .blog-section {
        padding-top: 30px;
    }
}

.blog-section .main-blog .main-blog-img {
    height: 390px;
    border-radius: 5px;
    overflow: hidden;
}

.blog-section .main-blog .main-blog-img img {
    object-fit: cover;
    transition: all 0.3s ease-in-out;
}

.blog-section .main-blog:hover .main-blog-img img {
    transform: scale(1.1);
}

.blog-section .main-blog .main-blog-content h5 {
    color: var(--secondary-text-color);
    font-size: 20px;
    font-weight: 600;
}

@media screen and (max-width: 768px) {
    .blog-section .main-blog .main-blog-content h5 {
        font-size: 16px;
    }
}

.blog-section .main-blog .main-blog-content h2 {
    color: var(--primary-text-color);
    font-size: 32px;
    font-weight: 600;
    line-height: 42px;
    margin-top: 15px;
}

@media screen and (max-width: 768px) {
    .blog-section .main-blog .main-blog-content h2 {
        font-size: 24px;
        line-height: 32px;
    }
}

.blog-section .main-blog .main-blog-content h6 {
    color: var(--gray-text-color);
    font-size: 17px;
    font-weight: 400;
    line-height: 28px;
    margin-top: 15px;
}

@media screen and (max-width: 768px) {
    .blog-section .main-blog .main-blog-content h6 {
        font-size: 14px;
        line-height: 25px;
    }
}

.blog-section .main-blog .main-blog-content ul {
    margin-top: 20px;
}

.blog-section .main-blog .main-blog-content ul li {
    font-size: 16px;
    padding: 8px 15px;
    border-radius: 50px;
    border: 1px solid var(--light-border-color);
    color: var(--gray-text-color);
    background-color: var(--primary-bg);
    transition: all 0.3s ease-in-out;
}

.blog-section .filter-btn-row {
    padding-top: 55px;
    padding-bottom: 65px;

}

.blog-section .filter-btn-row ul li button {
    font-size: 16px;
    padding: 8px 15px;
    border-radius: 50px;
    border: 1px solid var(--light-border-color);
    color: var(--gray-text-color);
    background-color: var(--primary-bg);
    transition: all 0.3s ease-in-out;
}

.blog-section .filter-btn-row ul li.active button {
    border: 1px solid var(--secondary-border-color);
    background-color: var(--secondary-bg);
    color: white;
}

.blog-section .single-blog-card {
    border: 1px solid var(--light-border-color);
    border-radius: 5px;
    background-color: white;
    overflow: hidden;
    margin-bottom: 25px;
}

.blog-section .single-blog-card:hover .blog-img img {
    transform: scale(1.1);
}

.blog-section .single-blog-card .blog-img {
    height: 200px;
    overflow: hidden;
}

.blog-section .single-blog-card .blog-img ul li {
    background-color: var(--primary-bg);
    border-radius: 25px;
    padding: 4px 12px;
    font-size: 12px;
    color: var(--gray-text-color);
}

.blog-section .single-blog-card .blog-img img {
    object-fit: cover;
    transition: all 0.3s ease-in-out;
}

.blog-section .single-blog-card .blog-content {
    padding: 20px 30px 20px 20px;
}

.blog-section .single-blog-card .blog-content h5 {
    color: var(--secondary-text-color);
    font-size: 14px;
    font-weight: 600;
}

.blog-section .single-blog-card .blog-content h4 {
    color: var(--primary-text-color);
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
    margin-top: 10px;
}

.blog-section .single-blog-card .blog-content p {
    margin-top: 10px;
    color: var(--gray-text-color);
    font-size: 14px;
    font-weight: 400;
}

.blog-section .loadmore-btn-row {
    margin-top: 40px;
}

.blog-section .loadmore-btn-row button {
    color: white;
    background-color: var(--secondary-bg);
    border-radius: 5px;
    font-size: 18px;
    font-weight: 600;
    padding: 10px 35px;
}

.blog-archive-section {
    padding-top: 80px;
    padding-bottom: 40px;
}

@media screen and (max-width: 768px) {
    .blog-archive-section {
        padding-top: 30px;
        padding-bottom: 30px;
    }
}

.blog-archive-section .single-blog-wrapper .back-top-all-blog {
    margin-bottom: 30px;
}

.blog-archive-section .single-blog-wrapper .back-top-all-blog a {
    color: var(--gray-text-color);
    font-weight: 400;
    font-size: 16px;
}

.blog-archive-section .single-blog-wrapper .blog-date p {
    font-weight: 600;
    font-size: 20px;
    line-height: 20px;
    color: var(--secondary-text-color);
    margin-bottom: 15px;
}

.blog-archive-section .single-blog-wrapper h3.blog-title {
    font-weight: 600;
    font-size: 32px;
    line-height: 48px;
    color: var(--primary-text-color);
    margin-bottom: 15px;
}

@media screen and (max-width: 768px) {
    .blog-archive-section .single-blog-wrapper h3.blog-title {
        font-size: 28px;
        line-height: 38px;
    }
}

.blog-archive-section .single-blog-wrapper .blog-excerpt p {
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: var(--gray-text-color);
    letter-spacing: 0.32px;
    margin-bottom: 15px;
}

.blog-archive-section .single-blog-wrapper .blog-categories ul {
    margin-bottom: 25px;

}

.blog-archive-section .single-blog-wrapper .blog-categories ul li {
    font-size: 16px;
    padding: 8px 15px;
    border-radius: 50px;
    border: 1px solid var(--light-border-color);
    color: var(--gray-text-color);
    background-color: var(--primary-bg);
}

.blog-archive-section .single-blog-wrapper .blog-image {
    height: 518px;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 25px;
}

@media screen and (max-width: 768px) {
.blog-archive-section .single-blog-wrapper .blog-image {
    height: 420px;
}
}

.blog-archive-section .single-blog-wrapper .blog-image img {
    object-fit: cover;
}

.blog-archive-section .single-blog-wrapper .blog-content h4 {
    font-weight: 600;
    margin-bottom: 15px;
}

.blog-archive-section .single-blog-wrapper .blog-content p {
    font-weight: 400;
    font-size: 17px;
    line-height: 28px;
    color: var(--gray-text-color);
    letter-spacing: 0.32px;
    margin-bottom: 25px;
}

/*==================================
    10. About Pages CSS
====================================*/

.about-intro-section .about-img {
    height: 620px;
    border-radius: 5px;
    overflow: hidden;
}

@media screen and (max-width: 991px) {
    .about-intro-section .about-img {
        height: 540px;
    }
}

@media screen and (max-width: 768px) {
    .about-intro-section .about-img {
        height: 420px;
    }
}

.about-intro-section .about-img img {
    object-fit: cover;
}

.about-intro-section h3 {
    font-size: 32px;
    font-weight: 600;
    color: var(--primary-text-color);
    line-height: 42px;
}

@media screen and (max-width: 768px) {
    .about-intro-section h3 {
        font-size: 28px;
        line-height: 36px;
    }
}

.about-intro-section p {
    margin-top: 15px;
    font-size: 17px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0.34px;
    color: var(--gray-text-color);
}

.why-choose-us-section .sec-title {
    font-weight: 600;
    font-size: 32px;
    color: var(--primary-text-color);
    margin-bottom: 25px;
}

.why-choose-us-section .card {
    border-radius: 5px;
    border: 1px solid var(--light-border-color);
    padding: 25px;
}

.why-choose-us-section .card img {
    height: 78px;
    width: 78px;
    min-width: 78px;
}

.why-choose-us-section .card h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-text-color);
    margin-top: 16px;
}

.why-choose-us-section .card p {
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    color: var(--gray-text-color);
    margin-top: 12px;
}

.testimonial-section .sec-title {
    font-weight: 600;
    font-size: 32px;
    color: var(--primary-text-color);
    margin-bottom: 45px;
}


.testimonial-section .card {
    border-radius: 5px;
    border: 1px solid var(--light-border-color);
    padding: 15px;
    margin-bottom: 25px;
}

.testimonial-section .card .client-img {
    height: 170px;
    width: 120px;
    min-width: 120px;
    border-radius: 5px;
}

.testimonial-section .card h4 {
    font-weight: 600;
    font-size: 16px;
    color: var(--primary-text-color);
    text-transform: capitalize;
}

.testimonial-section .card p {
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    color: var(--gray-text-color);
    margin-top: 10px;
}

/*==================================
    11. Quick View Popup CSS
====================================*/

#yith-quick-view-modal .yith-quick-view-overlay {
    background: rgba(94, 94, 94, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

#yith-quick-view-modal .yith-wcqv-wrapper {
    height: 440px;
    width: 900px;
}

#yith-quick-view-modal.open .yith-wcqv-main {
    border-radius: 5px;
    border: 1px solid var(--light-border-color);
    box-shadow: none;
}

#yith-quick-view-modal div#yith-quick-view-content div[id^="product"] {
    height: 440px;
}

#yith-quick-view-modal #yith-quick-view-content div.images {
    padding: 20px;
}

@media screen and (max-width: 768px) {
    #yith-quick-view-modal #yith-quick-view-content div.images {
        padding: 0;
    }
}

#yith-quick-view-modal #yith-quick-view-content div.images a {
    max-height: 440px;
}

#yith-quick-view-modal #yith-quick-view-content div.images a img {
    border-radius: 5px;
}

@media screen and (max-width: 768px) {
    #yith-quick-view-modal #yith-quick-view-content div.images a img {
        border-radius: 0;
    }
}

#yith-quick-view-modal.open .yith-wcqv-main .yith-wcqv-head .yith-quick-view-close svg {
    stroke: var(--gray-text-color);
}

#yith-quick-view-modal #yith-quick-view-content div.summary {
    max-height: 440px;
}

@media screen and (max-width: 768px) {
    #yith-quick-view-modal #yith-quick-view-content div.summary {
        padding: 30px 12px;
    }
}

#yith-quick-view-modal #yith-quick-view-content div.summary .summary-content .product_title {
    font-size: 35px;
    font-weight: 600;
    color: var(--primary-text-color);
    margin-bottom: 12px;
}

@media screen and (max-width: 768px) {
    #yith-quick-view-modal #yith-quick-view-content div.summary .summary-content .product_title {
        font-size: 28px;
    }
}

#yith-quick-view-modal #yith-quick-view-content div.summary .summary-content .woocommerce-Price-amount {
    font-size: 24px;
    font-weight: 600;
    color: var(--primary-text-color);
    margin-top: 12px;
}

#yith-quick-view-modal #yith-quick-view-content div.summary .summary-content .woocommerce-product-details__short-description {
    font-size: 18px;
    font-weight: 400;
    color: var(--gray-text-color);
    letter-spacing: 0.34px;
}

#yith-quick-view-modal #yith-quick-view-content div.summary .summary-content .woocommerce-variation-price {
    margin-bottom: 12px;
}

#yith-quick-view-modal #yith-quick-view-content div.summary .summary-content .product_meta {
    display: none;
}

#yith-quick-view-modal .yith-quick-view-content.woocommerce div.summary table.variations .label {
    vertical-align: middle;
}

#yith-quick-view-modal .yith-quick-view-content.woocommerce div.summary table.variations label {
    font-weight: 600;
}

#yith-quick-view-modal .yith-quick-view-content.woocommerce div.product form.cart .variations select {
    padding: 8px;
    border: 1px solid var(--light-border-color);
    font-weight: 600;
    color: var(--gray-text-color);
}

#yith-quick-view-modal .yith-quick-view-content.woocommerce div.product form.cart .variations .reset_variations {
    display: none !important;
}

#yith-quick-view-modal .yith-quick-view-content .woocommerce-variation-add-to-cart {
    margin-top: 30px;
}

#yith-quick-view-modal .yith-quick-view-content.woocommerce div.product form.cart div.quantity .qty {
    width: 100%;
    max-width: 160px;
    height: 48px;
    font-size: 16px;
    color: var(--primary-text-color);
    font-weight: 600;
    border: 1px solid var(--light-border-color);
}

#yith-quick-view-modal .yith-quick-view-content.woocommerce div.product form.cart .button {
    height: 48px;
    background-color: var(--secondary-bg);
    border-radius: 5px;
    font-size: 16px;
    color: white;
    font-weight: 600;
}

/*==================================
    12. My Account Page CSS
====================================*/

/* Login & Register Form CSS */

.woocommerce-account #customer_login {
    padding: 0;
}

.woocommerce-account #customer_login h2 {
    color: var(--primary-text-color);
    font-weight: 600;
    font-size: 24px;
}

.woocommerce-account #customer_login form {
    background-color: white;
    border: 1px solid var(--light-border-color);

}

.woocommerce-account #customer_login form .form-row label {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-text-color);
}

.woocommerce-account #customer_login form .form-row input.input-text,
.woocommerce-account .lost_reset_password .form-row input.input-text {
    background-color: var(--primary-bg);
    border: 1px solid var(--light-border-color);
    font-size: 14px;
    font-weight: 400;
    color: var(--gray-text-color);
    height: 48px;
    padding-left: 20px;
    padding-right: 20px;
    outline: none;
}

.woocommerce-account .woocommerce .woocommerce-form-login .woocommerce-form-login__submit,
.woocommerce-account .woocommerce .woocommerce-form-register .woocommerce-form-register__submit {
    background-color: var(--secondary-bg);
    color: white;
    font-size: 16px;
    font-weight: 600;
    display: block;
    width: 100%;
    margin-top: 20px;
}

/* Forgot Password Page CSS */
.woocommerce-account .woocommerce .woocommerce-form-login .lost_password a {
    color: var(--gray-text-color);
    line-height: 26px;
    font-size: 16px;
    letter-spacing: 0.32px;
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-top: 20px;
    display: inline-block;
    border-radius: 5px;

}

.woocommerce-account .woocommerce .woocommerce-form-login .lost_password a:hover {
    color: var(--secondary-text-color);
}

.woocommerce-account .woocommerce .woocommerce-form-register .woocommerce-privacy-policy-text p {
    color: var(--gray-text-color);
    font-weight: 400;
    letter-spacing: 0.32px;
    font-size: 15px;
}

.woocommerce-account .woocommerce .woocommerce-form-register .woocommerce-privacy-policy-text p a {
    color: var(--secondary-text-color);
    font-weight: 600;
}


.woocommerce-account.woocommerce-lost-password .woocommerce {
    margin-top: 32px;
    padding: 20px;
    background-color: white;
    border-radius: 5px;
    border: 1px solid var(--light-border-color);
}

.woocommerce-account.woocommerce-lost-password .woocommerce form .form-row label {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-text-color);
}

.woocommerce-account.woocommerce-lost-password .woocommerce form p:first-child {
    color: var(--gray-text-color);
    font-weight: 400;
    letter-spacing: 0.32px;
    font-size: 15px;
}

.woocommerce-account.woocommerce-lost-password .woocommerce form button {
    background-color: var(--secondary-bg);
    color: white;
    font-size: 16px;
    font-weight: 600;
}

/* My Account Dashboard Page CSS */
.woocommerce-account .woocommerce {
    margin-top: 32px;
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation ul {
    margin-bottom: 0;
    background-color: white;
    border-radius: 5px;
    border: 1px solid var(--light-border-color);
    padding: 15px 0;
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation ul li {
    padding: 8px 20px;
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation ul li a {
    color: var(--gray-text-color);
    font-size: 16px;
    letter-spacing: 0.32px;
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation ul li a:hover {
    color: var(--secondary-text-color);
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-content {
    background-color: white;
    border-radius: 5px;
    border: 1px solid var(--light-border-color);
    padding: 20px;
}

.woocommerce-account.woocommerce-dashboard .woocommerce .woocommerce-MyAccount-content p {
    color: var(--gray-text-color);
    font-weight: 400;
    letter-spacing: 0.32px;
    font-size: 15px;
}

.woocommerce-account.woocommerce-dashboard .woocommerce .woocommerce-MyAccount-content p a {
    color: var(--secondary-text-color);
    font-weight: 600;
}

.woocommerce-account.woocommerce-orders .woocommerce .woocommerce-MyAccount-content .woocommerce-info {
    border-top-color: var(--secondary-border-color);
    background-color: var(--secondary-light-bg);
    color: var(--primary-text-color);
}

.woocommerce-account.woocommerce-orders .woocommerce .woocommerce-MyAccount-content .woocommerce-info::before {
    color: var(--secondary-text-color);
}

.woocommerce-account.woocommerce-orders .woocommerce .woocommerce-MyAccount-content .woocommerce-info a {
    background-color: var(--secondary-bg);
    color: white;
    font-size: 16px;
    font-weight: 600;
}

.woocommerce-account.woocommerce-orders .woocommerce .woocommerce-MyAccount-content .woocommerce-orders-table {
    margin-bottom: 0;
    font-size: 14px;
    color: var(--primary-text-color);
    border: none;
}

.woocommerce-account.woocommerce-orders .woocommerce .woocommerce-MyAccount-content .woocommerce-orders-table th a {
    color: var(--primary-text-color);
}

.woocommerce-account.woocommerce-orders .woocommerce .woocommerce-MyAccount-content .woocommerce-orders-table th,
.woocommerce-account.woocommerce-orders .woocommerce .woocommerce-MyAccount-content .woocommerce-orders-table td {
    color: var(--primary-text-color);
    padding: 16px 15px;
}

.woocommerce-account.woocommerce-orders .woocommerce .woocommerce-MyAccount-content .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button {
    background-color: var(--secondary-bg);
    color: white;
    font-size: 16px;
    font-weight: 600;
}

.woocommerce-account.woocommerce-view-order .woocommerce .woocommerce-MyAccount-content .woocommerce-order-details h2,
.woocommerce-account.woocommerce-view-order .woocommerce .woocommerce-MyAccount-content .woocommerce-customer-details h2 {
    color: var(--primary-text-color);
    font-weight: 600;
    font-size: 28px;
    margin-bottom: 12px;
}

.woocommerce-account.woocommerce-view-order .woocommerce .woocommerce-MyAccount-content .woocommerce-order-details tbody,
.woocommerce-account.woocommerce-view-order .woocommerce .woocommerce-MyAccount-content .woocommerce-order-details td,
.woocommerce-account.woocommerce-view-order .woocommerce .woocommerce-MyAccount-content .woocommerce-order-details tfoot,
.woocommerce-account.woocommerce-view-order .woocommerce .woocommerce-MyAccount-content .woocommerce-order-details th,
.woocommerce-account.woocommerce-view-order .woocommerce .woocommerce-MyAccount-content .woocommerce-order-details thead,
.woocommerce-account.woocommerce-view-order .woocommerce .woocommerce-MyAccount-content .woocommerce-order-details tr,
.woocommerce-account.woocommerce-view-order .woocommerce .woocommerce-MyAccount-content .woocommerce-order-details .shop_table {
    border-color: var(--light-border-color);
}

.woocommerce-account.woocommerce-view-order .woocommerce .woocommerce-MyAccount-content .woocommerce-order-details td {
    padding: 16px 10px;
}

.woocommerce-account.woocommerce-view-order .woocommerce .woocommerce-MyAccount-content .woocommerce-order-details td,
.woocommerce-account.woocommerce-view-order .woocommerce .woocommerce-MyAccount-content .woocommerce-order-details td strong {
    color: var(--gray-text-color);
    font-weight: 400;
}

.woocommerce-account.woocommerce-view-order .woocommerce .woocommerce-MyAccount-content .woocommerce-customer-details address {
    color: var(--gray-text-color);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
}

.woocommerce-account.woocommerce-edit-address .woocommerce .woocommerce-MyAccount-content p {
    color: var(--gray-text-color);
    font-weight: 400;
    letter-spacing: 0.32px;
    font-size: 15px;
}

.woocommerce-account.woocommerce-edit-address .woocommerce .woocommerce-MyAccount-content .woocommerce-Address-title h2 {
    color: var(--primary-text-color);
    font-weight: 600;
    font-size: 28px;
}

.woocommerce-account.woocommerce-edit-address .woocommerce .woocommerce-MyAccount-content .woocommerce-Address-title a {
    float: left;
    display: inline-block;
    margin: 10px 0;
    color: var(--secondary-text-color);
}

.woocommerce-account.woocommerce-edit-address .woocommerce .woocommerce-MyAccount-content address {
    color: var(--gray-text-color);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: 0.32px;
    margin-top: 15px;
}

.woocommerce-account.woocommerce-edit-address form h2 {
    color: var(--primary-text-color);
    font-weight: 600;
    font-size: 28px;
}


.woocommerce-account.woocommerce-edit-address form .form-row label,
.woocommerce-account.woocommerce-edit-account form .form-row label {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-text-color);
}

.woocommerce-account.woocommerce-edit-address form .form-row em,
.woocommerce-account.woocommerce-edit-account form .form-row em {
    color: var(--gray-text-color);
    font-size: 14px;
}

.woocommerce-account.woocommerce-edit-address form .form-row input,
.woocommerce-account.woocommerce-edit-account form .form-row input,
.woocommerce-account.woocommerce-edit-address form .form-row span .select2-selection,
.woocommerce-account.woocommerce-edit-account form .form-row span .select2-selection {
    background-color: var(--primary-bg);
    border: 1px solid var(--light-border-color);
    font-size: 14px;
    font-weight: 400;
    color: var(--gray-text-color);
    height: 48px;
    outline: none;
    padding: 0 15px;
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-content fieldset {
    margin-top: 28px;
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-content fieldset legend {
    color: var(--primary-text-color);
    font-weight: 600;
    font-size: 28px;
}

.woocommerce-account :where(.woocommerce) .select2-container .select2-selection--single .select2-selection__rendered {
    height: 48px;
    line-height: 48px;
    padding: 0;
    font-size: 14px;
    font-weight: 400;
    color: var(--gray-text-color);
}

.woocommerce-edit-account .woocommerce .woocommerce-MyAccount-content form button.button,
.woocommerce-edit-address .woocommerce .woocommerce-MyAccount-content form button.button {
    background-color: var(--secondary-bg);
    color: white;
    font-size: 16px;
    font-weight: 600;
    margin-top: 24px;
}


/*==================================
    13. Checkout Page CSS
====================================*/

body.woocommerce-checkout form.wc-block-checkout__form {
    background-color: white;
    border: 1px solid var(--light-border-color);
    padding: 20px;
    border-radius: 5px;
}

body.woocommerce-checkout form.wc-block-checkout__form label {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--gray-text-color) !important;
}

body.woocommerce-checkout form.wc-block-checkout__form input:not([type="radio"]):not([type="checkbox"]),
body.woocommerce-checkout form.wc-block-checkout__form select {
    background-color: var(--primary-bg) !important;
    border: 1px solid var(--light-border-color) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--gray-text-color) !important;
    height: 48px !important;
    outline: none;
}


body.woocommerce-checkout form.wc-block-checkout__form textarea {
    background-color: var(--primary-bg) !important;
    border: 1px solid var(--light-border-color) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--gray-text-color) !important;
    padding-left: 20px;
    padding-right: 20px;
    outline: none;
}

body.woocommerce-checkout form.wc-block-checkout__form h2 {
    font-weight: 600;
}

body.woocommerce-checkout form.wc-block-checkout__form .wc-block-components-checkout-place-order-button {
    background-color: var(--secondary-bg);
    color: white;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 5px;
}

body.woocommerce-checkout .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
    background-color: white;
    border: 1px solid var(--light-border-color);
}

body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-totals-block {
    border-top: 1px solid var(--light-border-color);
}

body.woocommerce-checkout .wc-block-components-totals-wrapper {
    border: none;
}

body.woocommerce-checkout .wc-block-components-totals-coupon__form input {
    background-color: var(--primary-bg) !important;
    border: 1px solid var(--light-border-color) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--gray-text-color) !important;
    height: 48px !important;
    padding-left: 20px;
    padding-right: 20px;
    outline: none;
}

body.woocommerce-checkout .wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__button {
    background-color: var(--secondary-bg);
    color: white;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 5px;
}