/*
Theme Name:           Bookmall-theme
Theme URI:            http://sikabiz.com
Author:               sizable Co
Author URI:           http://sikabiz.com
Version:              1.0.0
Requires at least:    5.0.0
Requires PHP:         8.0
Text Domain:          shevi
*/

@import "assets/css/variable.css";

@font-face {
    font-family: 'YekanBakh';
    src: url('./assets/fonts/YekanBakh/YekanBakh-Black.otf') format('opentype');
    font-weight: 900;
    /* Black */
}

@font-face {
    font-family: 'YekanBakh';
    src: url('./assets/fonts/YekanBakh/YekanBakh-Bold.otf') format('opentype');
    font-weight: 700;
    /* Bold */
}

@font-face {
    font-family: 'YekanBakh';
    src: url('./assets/fonts/YekanBakh/YekanBakh-Regular.otf') format('opentype');
    font-weight: 400;
    /* Regular */
}

@font-face {
    font-family: 'YekanBakh';
    src: url('./assets/fonts/YekanBakh/YekanBakh-Light.otf') format('opentype');
    font-weight: 300;
    /* Light */
}

@font-face {
    font-family: 'YekanBakh';
    src: url('./assets/fonts/YekanBakh/YekanBakh-Thin.otf') format('opentype');
    font-weight: 100;
    /* Thin */
}

body {
    direction: rtl;
    font-family: 'YekanBakh', sans-serif;
    min-height: 100vh;
    display: flex;
    /*justify-content: space-between;*/
    flex-direction: column;
    background-color: var(--colors-gray-scale-01);
    padding-right: 0 !important;
}

p {
    margin-bottom: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

.row {
    margin-left: 0;
    margin-right: 0;
}


/* Cart */
.cart-dropdown-menu {
    margin-bottom: 0;
}

.navbar-cart .btn.show {
    border: 1px solid var(--colors-white);
    color: var(--colors-white);
}

.cart-item-sp {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.dropdown-menu-cart-item div.cart-item-image {
    width: 130px;
    height: 130px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.name-cart-item a {
    text-decoration: none;
    color: var(--colors-gray-scale-04);
    display: grid;
}

.name-cart-item p {
    max-width: 14rem;
}

.badge-cart-number {
    background-color: var(--colors-error-color);
    display: flex;
    min-width: 16px;
    padding: var(--spacing-space-01) var(--spacing-space-02);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--colors-white);
    font-size: 8px !important;
    font-weight: 700;
    border-radius: var(--radius-radius-09);
}

/* End Cart */

/* Utility */

@media (min-width: 1200px) {

    .container,
    .container-xl {
        max-width: 1440px;
    }
}

.gap-1 {
    gap: var(--spacing-space-01) !important;
}

.gap-2 {
    gap: var(--spacing-space-02) !important;
}

.gap-3 {
    gap: var(--spacing-space-03) !important;
}

.gap-4 {
    gap: var(--spacing-space-04) !important;
}

.gap-5 {
    gap: var(--spacing-space-05) !important;
}

.gap-6 {
    gap: var(--spacing-space-06) !important;
}

.gap-7 {
    gap: var(--spacing-space-07) !important;
}

.gap-8 {
    gap: var(--spacing-space-08) !important;
}

.gap-9 {
    gap: var(--spacing-space-09) !important;
}

.gap-10 {
    gap: var(--spacing-space-10) !important;
}

/* Small (sm) */
@media (min-width: 576px) {
    .gap-sm-1 {
        gap: var(--spacing-space-01) !important;
    }

    .gap-sm-2 {
        gap: var(--spacing-space-02) !important;
    }

    .gap-sm-3 {
        gap: var(--spacing-space-03) !important;
    }

    .gap-sm-4 {
        gap: var(--spacing-space-04) !important;
    }

    .gap-sm-5 {
        gap: var(--spacing-space-05) !important;
    }

    .gap-sm-6 {
        gap: var(--spacing-space-06) !important;
    }

    .gap-sm-7 {
        gap: var(--spacing-space-07) !important;
    }

    .gap-sm-8 {
        gap: var(--spacing-space-08) !important;
    }

    .gap-sm-9 {
        gap: var(--spacing-space-09) !important;
    }

    .gap-sm-10 {
        gap: var(--spacing-space-10) !important;
    }
}

/* Medium (md) */
@media (min-width: 768px) {
    .gap-md-1 {
        gap: var(--spacing-space-01) !important;
    }

    .gap-md-2 {
        gap: var(--spacing-space-02) !important;
    }

    .gap-md-3 {
        gap: var(--spacing-space-03) !important;
    }

    .gap-md-4 {
        gap: var(--spacing-space-04) !important;
    }

    .gap-md-5 {
        gap: var(--spacing-space-05) !important;
    }

    .gap-md-6 {
        gap: var(--spacing-space-06) !important;
    }

    .gap-md-7 {
        gap: var(--spacing-space-07) !important;
    }

    .gap-md-8 {
        gap: var(--spacing-space-08) !important;
    }

    .gap-md-9 {
        gap: var(--spacing-space-09) !important;
    }

    .gap-md-10 {
        gap: var(--spacing-space-10) !important;
    }
}

/* Large (lg) */
@media (min-width: 992px) {
    .gap-lg-1 {
        gap: var(--spacing-space-01) !important;
    }

    .gap-lg-2 {
        gap: var(--spacing-space-02) !important;
    }

    .gap-lg-3 {
        gap: var(--spacing-space-03) !important;
    }

    .gap-lg-4 {
        gap: var(--spacing-space-04) !important;
    }

    .gap-lg-5 {
        gap: var(--spacing-space-05) !important;
    }

    .gap-lg-6 {
        gap: var(--spacing-space-06) !important;
    }

    .gap-lg-7 {
        gap: var(--spacing-space-07) !important;
    }

    .gap-lg-8 {
        gap: var(--spacing-space-08) !important;
    }

    .gap-lg-9 {
        gap: var(--spacing-space-09) !important;
    }

    .gap-lg-10 {
        gap: var(--spacing-space-10) !important;
    }
}

/* Extra Large (xl) */
@media (min-width: 1200px) {
    .gap-xl-1 {
        gap: var(--spacing-space-01) !important;
    }

    .gap-xl-2 {
        gap: var(--spacing-space-02) !important;
    }

    .gap-xl-3 {
        gap: var(--spacing-space-03) !important;
    }

    .gap-xl-4 {
        gap: var(--spacing-space-04) !important;
    }

    .gap-xl-5 {
        gap: var(--spacing-space-05) !important;
    }

    .gap-xl-6 {
        gap: var(--spacing-space-06) !important;
    }

    .gap-xl-7 {
        gap: var(--spacing-space-07) !important;
    }

    .gap-xl-8 {
        gap: var(--spacing-space-08) !important;
    }

    .gap-xl-9 {
        gap: var(--spacing-space-09) !important;
    }

    .gap-xl-10 {
        gap: var(--spacing-space-10) !important;
    }
}

/* Extra Extra Large (xxl) */
@media (min-width: 1400px) {
    .gap-xxl-1 {
        gap: var(--spacing-space-01) !important;
    }

    .gap-xxl-2 {
        gap: var(--spacing-space-02) !important;
    }

    .gap-xxl-3 {
        gap: var(--spacing-space-03) !important;
    }

    .gap-xxl-4 {
        gap: var(--spacing-space-04) !important;
    }

    .gap-xxl-5 {
        gap: var(--spacing-space-05) !important;
    }

    .gap-xxl-6 {
        gap: var(--spacing-space-06) !important;
    }

    .gap-xxl-7 {
        gap: var(--spacing-space-07) !important;
    }

    .gap-xxl-8 {
        gap: var(--spacing-space-08) !important;
    }

    .gap-xxl-9 {
        gap: var(--spacing-space-09) !important;
    }

    .gap-xxl-10 {
        gap: var(--spacing-space-10) !important;
    }
}


.mx-1 {
    margin-left: var(--spacing-space-01) !important;
    margin-right: var(--spacing-space-01) !important;
}

.mx-2 {
    margin-left: var(--spacing-space-02) !important;
    margin-right: var(--spacing-space-02) !important;
}

.mx-3 {
    margin-left: var(--spacing-space-03) !important;
    margin-right: var(--spacing-space-03) !important;
}

.mx-4 {
    margin-left: var(--spacing-space-04) !important;
    margin-right: var(--spacing-space-04) !important;
}

.mx-5 {
    margin-left: var(--spacing-space-05) !important;
    margin-right: var(--spacing-space-05) !important;
}

.mx-6 {
    margin-left: var(--spacing-space-06) !important;
    margin-right: var(--spacing-space-06) !important;
}

.mx-7 {
    margin-left: var(--spacing-space-07) !important;
    margin-right: var(--spacing-space-07) !important;
}

.mx-8 {
    margin-left: var(--spacing-space-08) !important;
    margin-right: var(--spacing-space-08) !important;
}

.mx-9 {
    margin-left: var(--spacing-space-09) !important;
    margin-right: var(--spacing-space-09) !important;
}

.mx-10 {
    margin-left: var(--spacing-space-10) !important;
    margin-right: var(--spacing-space-10) !important;
}

/* Small (sm) */
@media (min-width: 576px) {
    .mx-sm-1 {
        margin-left: var(--spacing-space-01) !important;
        margin-right: var(--spacing-space-01) !important;
    }

    .mx-sm-2 {
        margin-left: var(--spacing-space-02) !important;
        margin-right: var(--spacing-space-02) !important;
    }

    .mx-sm-3 {
        margin-left: var(--spacing-space-03) !important;
        margin-right: var(--spacing-space-03) !important;
    }

    .mx-sm-4 {
        margin-left: var(--spacing-space-04) !important;
        margin-right: var(--spacing-space-04) !important;
    }

    .mx-sm-5 {
        margin-left: var(--spacing-space-05) !important;
        margin-right: var(--spacing-space-05) !important;
    }

    .mx-sm-6 {
        margin-left: var(--spacing-space-06) !important;
        margin-right: var(--spacing-space-06) !important;
    }

    .mx-sm-7 {
        margin-left: var(--spacing-space-07) !important;
        margin-right: var(--spacing-space-07) !important;
    }

    .mx-sm-8 {
        margin-left: var(--spacing-space-08) !important;
        margin-right: var(--spacing-space-08) !important;
    }

    .mx-sm-9 {
        margin-left: var(--spacing-space-09) !important;
        margin-right: var(--spacing-space-09) !important;
    }

    .mx-sm-10 {
        margin-left: var(--spacing-space-10) !important;
        margin-right: var(--spacing-space-10) !important;
    }
}

/* Medium (md) */
@media (min-width: 768px) {
    .mx-md-1 {
        margin-left: var(--spacing-space-01) !important;
        margin-right: var(--spacing-space-01) !important;
    }

    .mx-md-2 {
        margin-left: var(--spacing-space-02) !important;
        margin-right: var(--spacing-space-02) !important;
    }

    .mx-md-3 {
        margin-left: var(--spacing-space-03) !important;
        margin-right: var(--spacing-space-03) !important;
    }

    .mx-md-4 {
        margin-left: var(--spacing-space-04) !important;
        margin-right: var(--spacing-space-04) !important;
    }

    .mx-md-5 {
        margin-left: var(--spacing-space-05) !important;
        margin-right: var(--spacing-space-05) !important;
    }

    .mx-md-6 {
        margin-left: var(--spacing-space-06) !important;
        margin-right: var(--spacing-space-06) !important;
    }

    .mx-md-7 {
        margin-left: var(--spacing-space-07) !important;
        margin-right: var(--spacing-space-07) !important;
    }

    .mx-md-8 {
        margin-left: var(--spacing-space-08) !important;
        margin-right: var(--spacing-space-08) !important;
    }

    .mx-md-9 {
        margin-left: var(--spacing-space-09) !important;
        margin-right: var(--spacing-space-09) !important;
    }

    .mx-md-10 {
        margin-left: var(--spacing-space-10) !important;
        margin-right: var(--spacing-space-10) !important;
    }
}

/* Large (lg) */
@media (min-width: 992px) {
    .mx-lg-1 {
        margin-left: var(--spacing-space-01) !important;
        margin-right: var(--spacing-space-01) !important;
    }

    .mx-lg-2 {
        margin-left: var(--spacing-space-02) !important;
        margin-right: var(--spacing-space-02) !important;
    }

    .mx-lg-3 {
        margin-left: var(--spacing-space-03) !important;
        margin-right: var(--spacing-space-03) !important;
    }

    .mx-lg-4 {
        margin-left: var(--spacing-space-04) !important;
        margin-right: var(--spacing-space-04) !important;
    }

    .mx-lg-5 {
        margin-left: var(--spacing-space-05) !important;
        margin-right: var(--spacing-space-05) !important;
    }

    .mx-lg-6 {
        margin-left: var(--spacing-space-06) !important;
        margin-right: var(--spacing-space-06) !important;
    }

    .mx-lg-7 {
        margin-left: var(--spacing-space-07) !important;
        margin-right: var(--spacing-space-07) !important;
    }

    .mx-lg-8 {
        margin-left: var(--spacing-space-08) !important;
        margin-right: var(--spacing-space-08) !important;
    }

    .mx-lg-9 {
        margin-left: var(--spacing-space-09) !important;
        margin-right: var(--spacing-space-09) !important;
    }

    .mx-lg-10 {
        margin-left: var(--spacing-space-10) !important;
        margin-right: var(--spacing-space-10) !important;
    }
}

/* Extra Large (xl) */
@media (min-width: 1200px) {
    .mx-xl-1 {
        margin-left: var(--spacing-space-01) !important;
        margin-right: var(--spacing-space-01) !important;
    }

    .mx-xl-2 {
        margin-left: var(--spacing-space-02) !important;
        margin-right: var(--spacing-space-02) !important;
    }

    .mx-xl-3 {
        margin-left: var(--spacing-space-03) !important;
        margin-right: var(--spacing-space-03) !important;
    }

    .mx-xl-4 {
        margin-left: var(--spacing-space-04) !important;
        margin-right: var(--spacing-space-04) !important;
    }

    .mx-xl-5 {
        margin-left: var(--spacing-space-05) !important;
        margin-right: var(--spacing-space-05) !important;
    }

    .mx-xl-6 {
        margin-left: var(--spacing-space-06) !important;
        margin-right: var(--spacing-space-06) !important;
    }

    .mx-xl-7 {
        margin-left: var(--spacing-space-07) !important;
        margin-right: var(--spacing-space-07) !important;
    }

    .mx-xl-8 {
        margin-left: var(--spacing-space-08) !important;
        margin-right: var(--spacing-space-08) !important;
    }

    .mx-xl-9 {
        margin-left: var(--spacing-space-09) !important;
        margin-right: var(--spacing-space-09) !important;
    }

    .mx-xl-10 {
        margin-left: var(--spacing-space-10) !important;
        margin-right: var(--spacing-space-10) !important;
    }
}

/* Extra Extra Large (xxl) */
@media (min-width: 1400px) {
    .mx-xxl-1 {
        margin-left: var(--spacing-space-01) !important;
        margin-right: var(--spacing-space-01) !important;
    }

    .mx-xxl-2 {
        margin-left: var(--spacing-space-02) !important;
        margin-right: var(--spacing-space-02) !important;
    }

    .mx-xxl-3 {
        margin-left: var(--spacing-space-03) !important;
        margin-right: var(--spacing-space-03) !important;
    }

    .mx-xxl-4 {
        margin-left: var(--spacing-space-04) !important;
        margin-right: var(--spacing-space-04) !important;
    }

    .mx-xxl-5 {
        margin-left: var(--spacing-space-05) !important;
        margin-right: var(--spacing-space-05) !important;
    }

    .mx-xxl-6 {
        margin-left: var(--spacing-space-06) !important;
        margin-right: var(--spacing-space-06) !important;
    }

    .mx-xxl-7 {
        margin-left: var(--spacing-space-07) !important;
        margin-right: var(--spacing-space-07) !important;
    }

    .mx-xxl-8 {
        margin-left: var(--spacing-space-08) !important;
        margin-right: var(--spacing-space-08) !important;
    }

    .mx-xxl-9 {
        margin-left: var(--spacing-space-09) !important;
        margin-right: var(--spacing-space-09) !important;
    }

    .mx-xxl-10 {
        margin-left: var(--spacing-space-10) !important;
        margin-right: var(--spacing-space-10) !important;
    }
}

.px-1 {
    padding-left: var(--spacing-space-01) !important;
    padding-right: var(--spacing-space-01) !important;
}

.px-2 {
    padding-left: var(--spacing-space-02) !important;
    padding-right: var(--spacing-space-02) !important;
}

.px-3 {
    padding-left: var(--spacing-space-03) !important;
    padding-right: var(--spacing-space-03) !important;
}

.px-4 {
    padding-left: var(--spacing-space-04) !important;
    padding-right: var(--spacing-space-04) !important;
}

.px-5 {
    padding-left: var(--spacing-space-05) !important;
    padding-right: var(--spacing-space-05) !important;
}

.px-6 {
    padding-left: var(--spacing-space-06) !important;
    padding-right: var(--spacing-space-06) !important;
}

.px-7 {
    padding-left: var(--spacing-space-07) !important;
    padding-right: var(--spacing-space-07) !important;
}

.px-8 {
    padding-left: var(--spacing-space-08) !important;
    padding-right: var(--spacing-space-08) !important;
}

.px-9 {
    padding-left: var(--spacing-space-09) !important;
    padding-right: var(--spacing-space-09) !important;
}

.px-10 {
    padding-left: var(--spacing-space-10) !important;
    padding-right: var(--spacing-space-10) !important;
}

/* Small (sm) */
@media (min-width: 576px) {
    .px-sm-1 {
        padding-left: var(--spacing-space-01) !important;
        padding-right: var(--spacing-space-01) !important;
    }

    .px-sm-2 {
        padding-left: var(--spacing-space-02) !important;
        padding-right: var(--spacing-space-02) !important;
    }

    .px-sm-3 {
        padding-left: var(--spacing-space-03) !important;
        padding-right: var(--spacing-space-03) !important;
    }

    .px-sm-4 {
        padding-left: var(--spacing-space-04) !important;
        padding-right: var(--spacing-space-04) !important;
    }

    .px-sm-5 {
        padding-left: var(--spacing-space-05) !important;
        padding-right: var(--spacing-space-05) !important;
    }

    .px-sm-6 {
        padding-left: var(--spacing-space-06) !important;
        padding-right: var(--spacing-space-06) !important;
    }

    .px-sm-7 {
        padding-left: var(--spacing-space-07) !important;
        padding-right: var(--spacing-space-07) !important;
    }

    .px-sm-8 {
        padding-left: var(--spacing-space-08) !important;
        padding-right: var(--spacing-space-08) !important;
    }

    .px-sm-9 {
        padding-left: var(--spacing-space-09) !important;
        padding-right: var(--spacing-space-09) !important;
    }

    .px-sm-10 {
        padding-left: var(--spacing-space-10) !important;
        padding-right: var(--spacing-space-10) !important;
    }
}

/* Medium (md) */
@media (min-width: 768px) {
    .px-md-1 {
        padding-left: var(--spacing-space-01) !important;
        padding-right: var(--spacing-space-01) !important;
    }

    .px-md-2 {
        padding-left: var(--spacing-space-02) !important;
        padding-right: var(--spacing-space-02) !important;
    }

    .px-md-3 {
        padding-left: var(--spacing-space-03) !important;
        padding-right: var(--spacing-space-03) !important;
    }

    .px-md-4 {
        padding-left: var(--spacing-space-04) !important;
        padding-right: var(--spacing-space-04) !important;
    }

    .px-md-5 {
        padding-left: var(--spacing-space-05) !important;
        padding-right: var(--spacing-space-05) !important;
    }

    .px-md-6 {
        padding-left: var(--spacing-space-06) !important;
        padding-right: var(--spacing-space-06) !important;
    }

    .px-md-7 {
        padding-left: var(--spacing-space-07) !important;
        padding-right: var(--spacing-space-07) !important;
    }

    .px-md-8 {
        padding-left: var(--spacing-space-08) !important;
        padding-right: var(--spacing-space-08) !important;
    }

    .px-md-9 {
        padding-left: var(--spacing-space-09) !important;
        padding-right: var(--spacing-space-09) !important;
    }

    .px-md-10 {
        padding-left: var(--spacing-space-10) !important;
        padding-right: var(--spacing-space-10) !important;
    }
}

/* Large (lg) */
@media (min-width: 992px) {
    .px-lg-1 {
        padding-left: var(--spacing-space-01) !important;
        padding-right: var(--spacing-space-01) !important;
    }

    .px-lg-2 {
        padding-left: var(--spacing-space-02) !important;
        padding-right: var(--spacing-space-02) !important;
    }

    .px-lg-3 {
        padding-left: var(--spacing-space-03) !important;
        padding-right: var(--spacing-space-03) !important;
    }

    .px-lg-4 {
        padding-left: var(--spacing-space-04) !important;
        padding-right: var(--spacing-space-04) !important;
    }

    .px-lg-5 {
        padding-left: var(--spacing-space-05) !important;
        padding-right: var(--spacing-space-05) !important;
    }

    .px-lg-6 {
        padding-left: var(--spacing-space-06) !important;
        padding-right: var(--spacing-space-06) !important;
    }

    .px-lg-7 {
        padding-left: var(--spacing-space-07) !important;
        padding-right: var(--spacing-space-07) !important;
    }

    .px-lg-8 {
        padding-left: var(--spacing-space-08) !important;
        padding-right: var(--spacing-space-08) !important;
    }

    .px-lg-9 {
        padding-left: var(--spacing-space-09) !important;
        padding-right: var(--spacing-space-09) !important;
    }

    .px-lg-10 {
        padding-left: var(--spacing-space-10) !important;
        padding-right: var(--spacing-space-10) !important;
    }
}

/* Extra Large (xl) */
@media (min-width: 1200px) {
    .px-xl-1 {
        padding-left: var(--spacing-space-01) !important;
        padding-right: var(--spacing-space-01) !important;
    }

    .px-xl-2 {
        padding-left: var(--spacing-space-02) !important;
        padding-right: var(--spacing-space-02) !important;
    }

    .px-xl-3 {
        padding-left: var(--spacing-space-03) !important;
        padding-right: var(--spacing-space-03) !important;
    }

    .px-xl-4 {
        padding-left: var(--spacing-space-04) !important;
        padding-right: var(--spacing-space-04) !important;
    }

    .px-xl-5 {
        padding-left: var(--spacing-space-05) !important;
        padding-right: var(--spacing-space-05) !important;
    }

    .px-xl-6 {
        padding-left: var(--spacing-space-06) !important;
        padding-right: var(--spacing-space-06) !important;
    }

    .px-xl-7 {
        padding-left: var(--spacing-space-07) !important;
        padding-right: var(--spacing-space-07) !important;
    }

    .px-xl-8 {
        padding-left: var(--spacing-space-08) !important;
        padding-right: var(--spacing-space-08) !important;
    }

    .px-xl-9 {
        padding-left: var(--spacing-space-09) !important;
        padding-right: var(--spacing-space-09) !important;
    }

    .px-xl-10 {
        padding-left: var(--spacing-space-10) !important;
        padding-right: var(--spacing-space-10) !important;
    }
}

/* Extra Extra Large (xxl) */
@media (min-width: 1400px) {
    .px-xxl-1 {
        padding-left: var(--spacing-space-01) !important;
        padding-right: var(--spacing-space-01) !important;
    }

    .px-xxl-2 {
        padding-left: var(--spacing-space-02) !important;
        padding-right: var(--spacing-space-02) !important;
    }

    .px-xxl-3 {
        padding-left: var(--spacing-space-03) !important;
        padding-right: var(--spacing-space-03) !important;
    }

    .px-xxl-4 {
        padding-left: var(--spacing-space-04) !important;
        padding-right: var(--spacing-space-04) !important;
    }

    .px-xxl-5 {
        padding-left: var(--spacing-space-05) !important;
        padding-right: var(--spacing-space-05) !important;
    }

    .px-xxl-6 {
        padding-left: var(--spacing-space-06) !important;
        padding-right: var(--spacing-space-06) !important;
    }

    .px-xxl-7 {
        padding-left: var(--spacing-space-07) !important;
        padding-right: var(--spacing-space-07) !important;
    }

    .px-xxl-8 {
        padding-left: var(--spacing-space-08) !important;
        padding-right: var(--spacing-space-08) !important;
    }

    .px-xxl-9 {
        padding-left: var(--spacing-space-09) !important;
        padding-right: var(--spacing-space-09) !important;
    }

    .px-xxl-10 {
        padding-left: var(--spacing-space-10) !important;
        padding-right: var(--spacing-space-10) !important;
    }
}

.mb-1 {
    margin-bottom: var(--spacing-space-01) !important;
}

.mb-2 {
    margin-bottom: var(--spacing-space-02) !important;
}

.mb-3 {
    margin-bottom: var(--spacing-space-03) !important;
}

.mb-4 {
    margin-bottom: var(--spacing-space-04) !important;
}

.mb-5 {
    margin-bottom: var(--spacing-space-05) !important;
}

.mb-6 {
    margin-bottom: var(--spacing-space-06) !important;
}

.mb-7 {
    margin-bottom: var(--spacing-space-07) !important;
}

.mb-8 {
    margin-bottom: var(--spacing-space-08) !important;
}

.mb-9 {
    margin-bottom: var(--spacing-space-09) !important;
}

.mb-10 {
    margin-bottom: var(--spacing-space-10) !important;
}

/* Small (sm) */
@media (min-width: 576px) {
    .mb-sm-1 {
        margin-bottom: var(--spacing-space-01) !important;
    }

    .mb-sm-2 {
        margin-bottom: var(--spacing-space-02) !important;
    }

    .mb-sm-3 {
        margin-bottom: var(--spacing-space-03) !important;
    }

    .mb-sm-4 {
        margin-bottom: var(--spacing-space-04) !important;
    }

    .mb-sm-5 {
        margin-bottom: var(--spacing-space-05) !important;
    }

    .mb-sm-6 {
        margin-bottom: var(--spacing-space-06) !important;
    }

    .mb-sm-7 {
        margin-bottom: var(--spacing-space-07) !important;
    }

    .mb-sm-8 {
        margin-bottom: var(--spacing-space-08) !important;
    }

    .mb-sm-9 {
        margin-bottom: var(--spacing-space-09) !important;
    }

    .mb-sm-10 {
        margin-bottom: var(--spacing-space-10) !important;
    }
}

/* Medium (md) */
@media (min-width: 768px) {
    .mb-md-1 {
        margin-bottom: var(--spacing-space-01) !important;
    }

    .mb-md-2 {
        margin-bottom: var(--spacing-space-02) !important;
    }

    .mb-md-3 {
        margin-bottom: var(--spacing-space-03) !important;
    }

    .mb-md-4 {
        margin-bottom: var(--spacing-space-04) !important;
    }

    .mb-md-5 {
        margin-bottom: var(--spacing-space-05) !important;
    }

    .mb-md-6 {
        margin-bottom: var(--spacing-space-06) !important;
    }

    .mb-md-7 {
        margin-bottom: var(--spacing-space-07) !important;
    }

    .mb-md-8 {
        margin-bottom: var(--spacing-space-08) !important;
    }

    .mb-md-9 {
        margin-bottom: var(--spacing-space-09) !important;
    }

    .mb-md-10 {
        margin-bottom: var(--spacing-space-10) !important;
    }
}

/* Large (lg) */
@media (min-width: 992px) {
    .mb-lg-1 {
        margin-bottom: var(--spacing-space-01) !important;
    }

    .mb-lg-2 {
        margin-bottom: var(--spacing-space-02) !important;
    }

    .mb-lg-3 {
        margin-bottom: var(--spacing-space-03) !important;
    }

    .mb-lg-4 {
        margin-bottom: var(--spacing-space-04) !important;
    }

    .mb-lg-5 {
        margin-bottom: var(--spacing-space-05) !important;
    }

    .mb-lg-6 {
        margin-bottom: var(--spacing-space-06) !important;
    }

    .mb-lg-7 {
        margin-bottom: var(--spacing-space-07) !important;
    }

    .mb-lg-8 {
        margin-bottom: var(--spacing-space-08) !important;
    }

    .mb-lg-9 {
        margin-bottom: var(--spacing-space-09) !important;
    }

    .mb-lg-10 {
        margin-bottom: var(--spacing-space-10) !important;
    }
}

/* Extra Large (xl) */
@media (min-width: 1200px) {
    .mb-xl-1 {
        margin-bottom: var(--spacing-space-01) !important;
    }

    .mb-xl-2 {
        margin-bottom: var(--spacing-space-02) !important;
    }

    .mb-xl-3 {
        margin-bottom: var(--spacing-space-03) !important;
    }

    .mb-xl-4 {
        margin-bottom: var(--spacing-space-04) !important;
    }

    .mb-xl-5 {
        margin-bottom: var(--spacing-space-05) !important;
    }

    .mb-xl-6 {
        margin-bottom: var(--spacing-space-06) !important;
    }

    .mb-xl-7 {
        margin-bottom: var(--spacing-space-07) !important;
    }

    .mb-xl-8 {
        margin-bottom: var(--spacing-space-08) !important;
    }

    .mb-xl-9 {
        margin-bottom: var(--spacing-space-09) !important;
    }

    .mb-xl-10 {
        margin-bottom: var(--spacing-space-10) !important;
    }
}

/* Extra Extra Large (xxl) */
@media (min-width: 1400px) {
    .mb-xxl-1 {
        margin-bottom: var(--spacing-space-01) !important;
    }

    .mb-xxl-2 {
        margin-bottom: var(--spacing-space-02) !important;
    }

    .mb-xxl-3 {
        margin-bottom: var(--spacing-space-03) !important;
    }

    .mb-xxl-4 {
        margin-bottom: var(--spacing-space-04) !important;
    }

    .mb-xxl-5 {
        margin-bottom: var(--spacing-space-05) !important;
    }

    .mb-xxl-6 {
        margin-bottom: var(--spacing-space-06) !important;
    }

    .mb-xxl-7 {
        margin-bottom: var(--spacing-space-07) !important;
    }

    .mb-xxl-8 {
        margin-bottom: var(--spacing-space-08) !important;
    }

    .mb-xxl-9 {
        margin-bottom: var(--spacing-space-09) !important;
    }

    .mb-xxl-10 {
        margin-bottom: var(--spacing-space-10) !important;
    }
}


.p-1 {
    padding: var(--spacing-space-01) !important;
}

.p-2 {
    padding: var(--spacing-space-02) !important;
}

.p-3 {
    padding: var(--spacing-space-03) !important;
}

.p-4 {
    padding: var(--spacing-space-04) !important;
}

.p-5 {
    padding: var(--spacing-space-05) !important;
}

.p-6 {
    padding: var(--spacing-space-06) !important;
}

.p-7 {
    padding: var(--spacing-space-07) !important;
}

.p-8 {
    padding: var(--spacing-space-08) !important;
}

.p-9 {
    padding: var(--spacing-space-09) !important;
}

.p-10 {
    padding: var(--spacing-space-10) !important;
}

.ms-6 {
    margin-right: var(--spacing-space-06);
}

.me-6 {
    margin-left: var(--spacing-space-06);
}

.mx-6 {
    margin-left: var(--spacing-space-06);
    margin-right: var(--spacing-space-06);
}

.mt-6 {
    margin-top: var(--spacing-space-06);
}

.mt-7 {
    margin-top: var(--spacing-space-07);
}

.mt-9 {
    margin-top: var(--spacing-space-09);
}

.ps-6 {
    padding-right: var(--spacing-space-06);
}

.pe-6 {
    padding-left: var(--spacing-space-06);
}

.px-6 {
    padding-left: var(--spacing-space-06);
    padding-right: var(--spacing-space-06);
}

.px-9 {
    padding-left: var(--spacing-space-09);
    padding-right: var(--spacing-space-09);
}

.text-colors-gray-scale1 {
    color: var(--colors-gray-scale-01) !important;
}

.text-colors-gray-scale2 {
    color: var(--colors-gray-scale-02) !important;
}

.text-colors-gray-scale3 {
    color: var(--colors-gray-scale-03) !important;
}

.text-colors-gray-scale4 {
    color: var(--colors-gray-scale-04) !important;
}

.text-colors-gray-scale5 {
    color: var(--colors-gray-scale-05) !important;
}

.text-colors-gray-scale6 {
    color: var(--colors-gray-scale-06) !important;
}

.text-colors-gray-scale6-hover:hover {
    color: var(--colors-gray-scale-06) !important;
}

.text-colors-error-color {
    color: var(--colors-error-color) !important;
}

.text-colors-error-color-hover:hover {
    color: var(--colors-error-color);
}

.text-colors-success-color {
    color: var(--colors-success-color) !important;
}

.text-colors-primary-color {
    color: var(--colors-primary-color) !important;
}

.text-colors-blue-color {
    color: var(--colors-blue) !important;
}

.text-colors-error-color-hover:hover {
    color: var(--colors-error-color) !important;
}

.text-colors-white {
    color: var(--colors-white) !important;
}

.text-colors-sika {
    color: var(--sika-purple) !important;
}

.two-line-ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 3em;
    line-height: 1.5em;
}

.btn-md {
    display: inline-flex;
    height: 48px;
    min-width: 120px;
    padding: 0px var(--spacing-space-04) 0px var(--spacing-space-03);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-space-03);
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .px-md-0 {
        padding-left: 0;
        padding-right: 0;
    }
}

.dropdown-menu-popup {
    z-index: 1000;
    width: 32rem;
    min-width: 32rem;
    max-width: 32rem;
    margin-top: 0 !important;
    left: 0;
    right: unset !important;
}

.cursor-pointer {
    cursor: pointer;
}

.dropdown-menu-header-action-buttons {
    flex: 1;
    justify-content: end;
    display: flex;
}

.dropdown-item:active {
    color: unset !important;
    text-decoration: unset !important;
    background-color: unset !important;
}

.bg-primary {
    background-color: var(--colors-primary-color) !important;
}

.link-pm,
.link-pm:hover {
    color: var(--colors-primary-color);
}

button {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}

button.btn,
a.btn {
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
}

.btn-md {
    height: 48px !important;
}

.border-start-3px {
    border-right-width: 3px;
}

.border-primary {
    border-color: var(--colors-primary-color) !important;
}

.border-gray-scale4 {
    border-color: var(--colors-gray-scale-04) !important;
}

.border-gray-scale2 {
    border-color: var(--colors-gray-scale-02) !important;
}

.border-radius-6 {
    border-radius: var(--radius-radius-06);
}

.fs-title1 {
    font-size: var(--typo-title-01) !important;
}

.fs-title2 {
    font-size: var(--typo-title-02) !important;
}

.fs-body1 {
    font-size: var(--typo-body-01) !important;
}

.fs-body2 {
    font-size: var(--typo-body-02) !important;
}

.fs-description1 {
    font-size: var(--typo-description-01) !important;
}

.fs-description2 {
    font-size: var(--typo-description-02) !important;
}

.fw-400 {
    font-weight: 400;
}

.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.fw-700 {
    font-weight: 700 !important;
}

.badge {
    display: flex;
    height: 16px;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-space-02);
    border: 1px solid;
    border-radius: 50px;
    top: 10px;
}

.badge-outline-primary {
    color: var(--colors-primary-color);
    border-color: var(--colors-primary-color);
}

.currency {
    color: var(--colors-gray-scale-04) !important;
    text-align: center;
    /*font-size: 8px;*/
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.discount .currency {
    text-decoration-line: none !important;
}

del span.currency {
    display: inline-block;
    content: '';
    visibility: hidden;
}


.height-40 {
    height: 40px;
}

.align-items-unset {
    align-items: unset !important;
}

.bg-gray-scale1 {
    background-color: var(--colors-gray-scale-01) !important;
}

.bg-gray-scale2 {
    background-color: var(--colors-gray-scale-02) !important;
}

.bg-gray-scale3 {
    background-color: var(--colors-gray-scale-03) !important;
}

.bg-gray-scale4 {
    background-color: var(--colors-gray-scale-04) !important;
}

.bg-gray-scale5 {
    background-color: var(--colors-gray-scale-05) !important;
}

.bg-gray-scale6 {
    background-color: var(--colors-gray-scale-06) !important;
}

.text-colors-yellow-color {
    color: var(--colors-yellow);
}

.text-colors-light-pink-color {
    color: var(--colors-light-pink);
}

.btn-outline-gray-scale2 {
    border: 1px solid var(--colors-gray-scale-02);
    color: var(--colors-gray-scale-04);
}

.btn-outline-gray-scale2:hover {
    border: 1px solid var(--colors-gray-scale-02);
    color: var(--colors-gray-scale-04);
}


.btn-outline-gray-scale4 {
    border: 1px solid var(--colors-gray-scale-04);
    color: var(--colors-gray-scale-04);
    border-radius: var(--radius-radius-02);
    background-color: var(--colors-white);
}

.btn-outline-gray-scale4:hover {
    background-color: var(--colors-white);
    border: 1px solid var(--colors-gray-scale-04);
    color: var(--colors-gray-scale-04);
    border-radius: var(--radius-radius-02);
}

.cursor-point {
    cursor: pointer;
}

.title-border {
    border-right: 3px solid var(--colors-primary-color)
}

.rounded-4 {
    border-radius: var(--radius-radius-04);
}

.rounded-3 {
    border-radius: var(--radius-radius-03) !important;
}

.rounded-5 {
    border-radius: var(--radius-radius-05) !important;
}

.rounded-9 {
    border-radius: var(--radius-radius-09) !important;
}

@media (min-width: 1024px) {
    .max-h-lg-120px {
        max-height: 120px;
    }
}

.mdi-trash-can-outline,
.mdi-trash-can {
    color: var(--colors-error-color);
}

/* Base (default for all screens unless overridden) */
.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}

.text-center {
    text-align: center !important;
}

/* Small screens (≥576px) */
@media (min-width: 576px) {
    .text-sm-left {
        text-align: left !important;
    }

    .text-sm-right {
        text-align: right !important;
    }

    .text-sm-center {
        text-align: center !important;
    }
}

/* Medium screens (≥768px) */
@media (min-width: 768px) {
    .text-md-left {
        text-align: left !important;
    }

    .text-md-right {
        text-align: right !important;
    }

    .text-md-center {
        text-align: center !important;
    }
}

/* Large screens (≥992px) */
@media (min-width: 992px) {
    .text-lg-left {
        text-align: left !important;
    }

    .text-lg-right {
        text-align: right !important;
    }

    .text-lg-center {
        text-align: center !important;
    }
}

/* Extra large screens (≥1200px) */
@media (min-width: 1200px) {
    .text-xl-left {
        text-align: left !important;
    }

    .text-xl-right {
        text-align: right !important;
    }

    .text-xl-center {
        text-align: center !important;
    }
}

/* Extra extra large screens (≥1400px) */
@media (min-width: 1400px) {
    .text-xxl-left {
        text-align: left !important;
    }

    .text-xxl-right {
        text-align: right !important;
    }

    .text-xxl-center {
        text-align: center !important;
    }
}

/* Small devices (sm) */
@media (min-width: 576px) {
    .w-sm-100 {
        width: 100% !important;
    }

    .w-sm-75 {
        width: 75% !important;
    }

    .w-sm-50 {
        width: 50% !important;
    }

    .w-sm-25 {
        width: 25% !important;
    }
}

/* Medium devices (md) */
@media (min-width: 768px) {
    .w-md-100 {
        width: 100% !important;
    }

    .w-md-75 {
        width: 75% !important;
    }

    .w-md-50 {
        width: 50% !important;
    }

    .w-md-25 {
        width: 25% !important;
    }
}

/* Large devices (lg) */
@media (min-width: 992px) {
    .w-lg-100 {
        width: 100% !important;
    }

    .w-lg-75 {
        width: 75% !important;
    }

    .w-lg-50 {
        width: 50% !important;
    }

    .w-lg-25 {
        width: 25% !important;
    }
}

/* Extra large devices (xl) */
@media (min-width: 1200px) {
    .w-xl-100 {
        width: 100% !important;
    }

    .w-xl-75 {
        width: 75% !important;
    }

    .w-xl-50 {
        width: 50% !important;
    }

    .w-xl-25 {
        width: 25% !important;
    }
}

/* Extra extra large devices (xxl) */
@media (min-width: 1400px) {
    .w-xxl-100 {
        width: 100% !important;
    }

    .w-xxl-75 {
        width: 75% !important;
    }

    .w-xxl-50 {
        width: 50% !important;
    }

    .w-xxl-25 {
        width: 25% !important;
    }
}

input::placeholder {
    color: var(--colors-gray-scale-03) !important;
    opacity: 1;
}

::-webkit-input-placeholder {
    color: var(--colors-gray-scale-03) !important;
}

:-moz-placeholder {
    color: var(--colors-gray-scale-03) !important;
}

::-moz-placeholder {
    color: var(--colors-gray-scale-03) !important;
}

:-ms-input-placeholder {
    color: var(--colors-gray-scale-03) !important;
}

.w-fitcontent {
    width: fit-content;
}

.loading {
    width: 24px;
    --b: 2px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--colors-white);
    -webkit-mask: repeating-conic-gradient(#0000 0deg, #000 1deg 57deg, #0000 57deg 90deg),
        radial-gradient(farthest-side, #0000 calc(100% - var(--b) - 1px), #000 calc(100% - var(--b)));
    -webkit-mask-composite: destination-in;
    mask-composite: intersect;
    animation: l5 1s infinite;
    display: block;
    margin-right: auto;
    margin-left: auto;
}

@keyframes l5 {
    to {
        transform: rotate(.5turn)
    }
}

.bg-header-color {
    background-color: var(--header-bg-color, var(--colors-gray-scale-06));
}

.h-64p {
    height: 64px;
}

/* End Utility */

/* Header */
.navbar-logo {
    max-width: 372px;
    height: 36px;
}

.mobile-nav .first-nav {
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mobile-nav .second-nav {
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-link {
    color: var(--colors-gray-scale-04);
}

nav.first-navbar {
    height: 80px;
    background-color: var(--header-bg-color, var(--colors-gray-scale-06));
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav.second-navbar {
    height: 80px;
    background-color: var(--colors-white);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav.first-navbar img.navbar-logo {
    width: 47px;
    height: 36px;
}

nav.first-navbar input.search-input {
    border-radius: var(--radius-radius-02);
    border-left: 0;
    width: 320px;
    height: 36px;
    padding-right: var(--spacing-space-04);
    padding-left: var(--spacing-space-04);
}

nav.first-navbar input.search-input:focus {
    box-shadow: unset;
    border-color: var(--colors-white);
}

nav.first-navbar span.search-icon {
    border-radius: var(--radius-radius-02);
    background-color: var(--colors-white);
    height: 36px;
}

nav.first-navbar .btn-login.show {
    background: var(--colors-white);
    color: var(--colors-primary-color);
}

ul.menu-user {
    left: 0 !important;
    margin-top: 0 !important;
}

ul.menu-user li {
    padding: 1em 1.25em;
}

ul.menu-user li:hover {
    background-color: var(--colors-gray-scale-02);
}

ul.menu-user li a {
    color: var(--colors-gray-scale-04);
    text-decoration: none;
}

/* End Header */

/* Component */

.btn {
    display: inline-flex;
    height: 2.25rem;
    min-width: 7.5rem;
    padding: 0 var(--spacing-space-03) 0 var(--spacing-space-03);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-space-03);
    flex-shrink: 0;
    border-radius: var(--radius-radius-02);
}

.btn-sm {
    display: inline-flex !important;
    height: 36px !important;
    min-width: 120px;
    padding: 0px var(--spacing-space-03) 0px var(--spacing-space-03);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-space-03);
    flex-shrink: 0;
}

.btn:focus-visible {
    color: unset;
    background-color: unset;
    border-color: unset;
    box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, .5);
}

.btn-white:hover {
    background: var(--colors-white);
    color: var(--colors-primary-color);
}

.btn-white {
    background: var(--colors-white);
    color: var(--colors-primary-color);
}

.btn-outline-white:hover {
    border: 1px solid var(--colors-white);
    color: var(--colors-white);
}

.btn-outline-white {
    border: 1px solid var(--colors-white);
    color: var(--colors-white);
}

.btn-outline-primary:hover,
.btn-outline-primary:active {
    border-color: var(--colors-primary-color) !important;
    background-color: var(--colors-primary-color) !important;
    color: var(--colors-white);
}

.btn-outline-primary {
    border: 1px solid var(--colors-primary-color);
    color: var(--colors-primary-color);
    background-color: var(--colors-white);
}

.btn-outline-error:hover,
.btn-outline-error:active {
    border-color: var(--colors-error-color) !important;
    background-color: var(--colors-error-color) !important;
    color: var(--colors-white);
    border-radius: var(--radius-radius-03);
}

.btn-outline-error {
    border: 1px solid var(--colors-error-color);
    color: var(--colors-error-color);
    background-color: var(--colors-white);
    border-radius: var(--radius-radius-03);
}

.btn-primary {
    border: 1px solid var(--colors-white);
    color: var(--colors-white);
    background-color: var(--colors-primary-color);
    border-color: var(--colors-primary-color);
}

.btn-primary:hover,
.btn-primary:active {
    border: 1px solid var(--colors-white);
    color: var(--colors-white);
    background-color: var(--colors-primary-color) !important;
    border-color: var(--colors-primary-color) !important;
}

.btn-error {
    border: 1px solid var(--colors-white);
    color: var(--colors-white);
    background-color: var(--colors-error-color);
    border-color: var(--colors-error-color);
    border-radius: var(--radius-radius-03);
}

.btn-error:hover,
.btn-error:active {
    border: 1px solid var(--colors-white);
    color: var(--colors-white);
    background-color: var(--colors-error-color) !important;
    border-color: var(--colors-error-color) !important;
    border-radius: var(--radius-radius-03);
}

.btn-check:checked+.btn-primary {
    border: 1px solid var(--colors-white);
    color: var(--colors-white);
    background-color: var(--colors-primary-color) !important;
    border-color: var(--colors-primary-color) !important;
}

.btn:active,
.btn:first-child:active {
    color: inherit;
    background-color: inherit;
    border-color: inherit;
}

/* Stock Card */

.stock-card {
    padding: var(--spacing-space-05);
    background-color: var(--colors-white);
    border-radius: var(--radius-radius-03);
    display: flex;
    gap: var(--spacing-space-03);
}

.stock-card .title {
    color: var(--colors-gray-scale-05);
    font-size: var(--typo-body-02);
    font-weight: 700;
}

.stock-card .wrapper-rate,
.stock-card .wrapper-delivery {
    display: flex;
    flex-direction: row;
    justify-content: start;
    gap: var(--spacing-space-05);
    font-size: 8px;
    font-weight: 700;
    padding: var(--spacing-space-03);
    padding-right: 0;
}

@media (max-width: 410px) {

    .stock-card .wrapper-rate,
    .stock-card .wrapper-delivery {
        flex-direction: column;
        gap: 0;
    }
}

.stock-card .wrapper-rate {
    color: var(--colors-primary-color);
}


.stock-card .wrapper-delivery {
    color: var(--colors-blue);
}

.stock-card .wrapper-rate .wrapper-user-rate,
.stock-card .wrapper-delivery .wrapper-delivery-time {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: var(--spacing-space-02);
}

.stock-card .wrapper-rate .wrapper-user-rate .title-user-rate,
.stock-card .wrapper-delivery .wrapper-delivery-time .title-delivery-time {
    font-weight: 500;
}


.stock-card .wrapper-rate .wrapper-users-rate,
.stock-card .wrapper-delivery .wrapper-delivery-cost {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: var(--spacing-space-02);
}

/* End Stock Card */

/* Product Card */

@media (max-width: 767.98px) {
    .product-card {
        min-width: unset !important;
        height: auto !important;
        padding: var(--spacing-space-03) !important;
    }

    .product-card .mobile-wrapper-button {
        position: relative;
    }


    .product-card .wrapper-text {
        width: 100%;
        gap: var(--spacing-space-03) !important;
    }

    .product-card .wrapper-text .product-title {
        height: 1.5rem !important;
    }

    .product-card .btn-details {
        background-color: var(--colors-primary-color) !important;
        ;
        color: var(--colors-white) !important;
        width: 40px !important;
        height: 40px;
        min-width: unset !important;
    }

    .product-card .wrapper-img .product-img {
        width: 100% !important;
        height: 156px !important;
    }
}

#basket-product-grid {
    font-size: 65px;
}

.product-card {
    position: relative;
    display: flex;
    min-width: 204px;
    height: 355px;
    padding: var(--spacing-space-04);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-space-03);
    border-radius: var(--radius-radius-04);
    background: var(--colors-white);
}

.product-card .badge-off {
    min-width: 37px;
    height: 24px;
    position: absolute;
    background-color: var(--colors-error-color);
    z-index: 1;
    color: var(--colors-white);
    padding: var(--spacing-space-02);
    font-size: var(--typo-body-02);
    font-style: normal;
    font-weight: 700;
    line-height: 10px;
    text-align: center;
    left: 5%;
    border-radius: var(--radius-radius-02);
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
}


.product-card .wrapper-img .product-img {
    /* width: 180px; */
    height: 180px;
}

.product-card .wrapper-img .product-img img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.product-card .wrapper-img {
    display: flex;
    width: 100%;
    justify-content: center;
    position: relative;
    flex-direction: column;
}

.product-card .wrapper-img .stock-name {
    position: absolute;
    border-radius: var(--radius-radius-03);
    border: 1px solid var(--colors-gray-scale-01);
    background: var(--colors-white);
    display: flex;
    padding: var(--spacing-space-02);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-space-01);
    right: var(--spacing-space-03);
    bottom: var(--spacing-space-03);
    color: var(--colors-gray-scale-06);
    text-align: center;
    font-size: var(--typo-description-02);
    font-style: normal;
    font-weight: 500;
    line-height: 10px;
}

.product-card .wrapper-img .stock-name span.mdi {
    color: var(--colors-primary-color);
}

.product-card .wrapper-text {
    display: flex;
    justify-content: flex-start;
    align-items: start;
    flex-direction: column;
}

.product-card .wrapper-text .product-title {
    color: var(--colors-gray-scale-06);
    text-align: right;
    font-size: var(--typo-body-01);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 3em;
    line-height: 1.5em;
}

.product-card .wrapper-text .wrapper-price {
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    gap: var(--spacing-space-02);
}

.product-card .wrapper-text .wrapper-price .discount {
    color: var(--colors-gray-scale-04);
    text-align: right;
    font-size: var(--typo-description-01);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-decoration-line: line-through;
}

.product-card .wrapper-text .wrapper-price .price {
    color: var(--colors-primary-color);
    text-align: right;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    font-size: var(--typo-body-02);
}

.product-card .wrapper-text .wrapper-price .price .currency {
    color: var(--colors-primary-color) !important;
}

.product-card .wrapper-button {
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: flex-end;
    flex: 1 0 0;
    align-self: stretch;
}

.product-card .btn-details {
    background-color: var(--colors-white);
    color: var(--colors-primary-color);
    display: flex;
    height: 36px;
    min-width: 80px;
    width: 100%;
    padding: 0px var(--spacing-space-04);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-space-03);
    align-self: stretch;
    border-radius: var(--radius-radius-02);
    border: 1px solid var(--colors-primary-color);
    font-size: var(--typo-body-01);
    font-weight: 700;
}

.product-card .btn-details:hover {
    color: var(--colors-white);
    background-color: var(--colors-primary-color);
}

.btn-product-footer {
    display: flex;
    width: 100%;
    height: 40px;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-space-01);
    border-radius: var(--radius-radius-03);
    border: 1px solid var(--colors-gray-scale-02);
    background: var(--colors-white);
}

.btn-product-footer .btn-plus-cart,
.btn-product-footer .btn-minus-cart {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    min-width: auto !important;
    color: var(--colors-gray-scale-04);
    padding: var(--spacing-space-03);
}


.btn-product-footer .btn-plus-cart {
    border-left: 1px solid var(--colors-gray-scale-02);
}

.btn-product-footer .btn-minus-cart {
    border-right: 1px solid var(--colors-gray-scale-02);
}

.btn-product-footer input {
    border: unset;
    width: 100%;
    color: var(--colors-gray-scale-04);
    padding: 0;
}

/* End Product Card */

/* Product Swiper Effectcoverflow Card */

.product-swiper-effectcoverflow {
    position: relative;
    display: flex;
    padding: var(--spacing-space-04);
    flex-direction: column;
    align-items: center;
}


.product-swiper-effectcoverflow .wrapper-img .product-img {
    width: 140px;
    height: 140px;
}

.product-swiper-effectcoverflow .wrapper-img .product-img img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.product-swiper-effectcoverflow .wrapper-img {
    display: flex;
    width: 100%;
    justify-content: center;
    position: relative;
}

.product-swiper-effectcoverflow .wrapper-text {
    display: flex;
    justify-content: flex-start;
    align-items: start;
    flex-direction: column;
    margin-top: var(--spacing-space-03);
}

.product-swiper-effectcoverflow .wrapper-text .product-title {
    color: var(--colors-gray-scale-05);
    text-align: right;
    font-size: var(--typo-body-01);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 3em;
    line-height: 1.5em;
    justify-content: center;
    display: flex;
    align-items: center;
}

.product-swiper-effectcoverflow .wrapper-text .wrapper-price {
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    gap: var(--spacing-space-02);
}

.product-swiper-effectcoverflow .wrapper-price .discount {
    color: var(--colors-gray-scale-04);
    text-align: right;
    font-size: var(--typo-description-01);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-decoration-line: line-through;
    margin-top: var(--spacing-space-02);
}

.product-swiper-effectcoverflow .wrapper-price .price {
    color: var(--colors-primary-color);
    text-align: right;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    font-size: var(--typo-body-02);
}


/* End Product Swiper Effectcoverflow Card */

/* Comment Card */
.comment-section {
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 100%), url('/assets/img/commect-section-bg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    height: 418px;
    padding: var(--spacing-space-08);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-space-08);
}

.comment-section .comment-section-title {
    border-bottom: 1px solid var(--colors-white);
    display: flex;
    justify-content: center;
    align-items: center;
}

.comment-section .comment-section-title .title {
    color: var(--colors-white);
    font-size: var(--typo-title-02);
    padding-bottom: var(--spacing-space-03)
}

.comment-card {
    display: flex;
    min-height: 187px;
    padding: var(--spacing-space-06);
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-space-04);
    flex: 1 0 0;
    border-radius: var(--radius-radius-03);
    border: 1px solid var(--colors-gray-scale-04);
}

.comment-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    width: 100%;
}

.comment-card .comment-card-header .profile {
    display: flex;
    justify-content: center;
    flex-direction: row;
    gap: var(--spacing-space-03);
}

.comment-card .comment-card-header .wrapper-name {
    display: flex;
    justify-content: center;
    align-items: center;
}

.comment-card .comment-card-header .profile .wrapper-img {
    width: 32px;
    height: 32px;
}

.comment-card .comment-card-header .profile .wrapper-img img {
    border-radius: var(--spacing-space-06);
}

.comment-card .comment-card-header .profile .wrapper-name .name {
    color: var(--colors-white);
    font-size: var(--typo-body-01);
}

.comment-card .comment-card-header .rate .mdi {
    color: var(--colors-yellow);
}

.comment-card .comment-card-body p {
    color: var(--colors-white);
}

/* End Comment Card */

/* Swiper */

.swiper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}


.swiper-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-space-05);
    justify-content: center;
}

.swiper-button {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--colors-white);
    cursor: pointer;
}

.swiper-mypagination {
    display: flex;
    gap: var(--spacing-space-03);
    width: fit-content !important;
    justify-content: center;
    align-items: center;
}

.swiper-pagination-bullet {
    width: 14px;
    height: 14px;
    background-color: var(--colors-gray-scale-05);
    border-radius: 50%;
    opacity: 0.5;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-pagination-bullet-active {
    background-color: var(--colors-white) !important;
    opacity: 1;
}


.swiper-products .swiper-pagination-effectcoverflow {
    display: flex;
    justify-content: center;
    gap: var(--spacing-space-03);
    position: static;
    align-items: center;
}

.swiper-products .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: var(--colors-gray-scale-02);
    opacity: 0.6;
    border-radius: 50%;
    transition: opacity 0.3s, transform 0.3s;
}

.swiper-products .swiper-pagination-bullet-active {
    opacity: 1;
    transform: scale(1.2);
    /* Scale active bullet */
    background: var(--colors-gray-scale-06) !important;
}

.swiper-products .swiper-button-prev,
.swiper-products .swiper-button-next {
    color: var(--colors-gray-scale-06);
    font-size: 20px;
    cursor: pointer;
}

.swiper-products .pagination-container-swiper-pagination-effectcoverflow {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-space-05);
}

.swiper-products .pagination-container-swiper-pagination-effectcoverflow .swiper-button-next,
.swiper-products .pagination-container-swiper-pagination-effectcoverflow .swiper-button-prev {
    position: unset;
    margin-top: unset;
}

/* End Swiper */

.brand-section {
    background: var(--colors-gray-scale-02);
    display: flex;
    padding: var(--spacing-space-06) var(--spacing-space-08);
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-space-06);
}

.brand-section .brand-section-header .title {
    color: var(--colors-primary-color);
    text-align: center;
    font-size: var(--typo-body-01);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    border-bottom: 1px solid var(--colors-primary-color);
    padding: var(--spacing-space-03) 0;
}

.brand-section .brand-section-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

/* Brand Card */
.brand-card {
    display: flex;
    min-width: 120px;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-space-03);
}

.brand-card .wrapper-img {
    width: 100px;
    height: 100px;
    background-color: var(--colors-white);
    border-radius: 50%;
}

.brand-card .wrapper-text {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-space-02);
    flex-direction: column;
}

.brand-card .wrapper-text .brand-title {
    color: var(--colors-gray-scale-06);
    text-align: center;
    font-size: var(--typo-body-01);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.brand-card .wrapper-text .brand-items {
    color: var(--colors-gray-scale-05);
    text-align: center;
    font-size: var(--typo-body-02);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.brand-section .brand-section-footer {
    display: flex;
    justify-content: center;
    align-items: center;
}

.brand-section .brand-section-footer button {
    padding: var(--spacing-space-03) var(--spacing-space-09);
}


/* End Brand Card */

/* Back To Top */
#backToTop {
    display: none;
    position: fixed;
    width: 50px;
    height: 50px;
    bottom: 30px;
    left: 30px;
    z-index: 100;
    background-color: var(--colors-white);
    border: none;
    padding: 10px;
    border-radius: 50px;
    cursor: pointer;
    font-size: 16px;
}

/* End Back To Top */

.btn.disabled,
.btn:disabled,
.disabled,
fieldset:disabled .btn {
    background-color: var(--colors-gray-scale-02) !important;
    border-color: var(--colors-gray-scale-02) !important;
    color: var(--colors-gray-scale-03) !important;
}

/* Pagination Code */
.pagination {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-space-04);
    margin-bottom: 0;
}

.pagination .active>.page-link,
.page-link.active {
    z-index: 3;
    color: var(--colors-white);
    background-color: var(--colors-primary-color);
    border-color: var(--colors-primary-color);
}

.disabled>.page-link {
    border-radius: var(--radius-radius-03);
}

.pagination li.page-item:first-child a,
.pagination li.page-item:last-child a {
    border: 0 !important;
    color: var(--colors-primary-color);
}

.pagination li.page-item a.active {
    color: var(--colors-white);
}

.pagination li.page-item a,
.pagination li.page-item a span {
    border-radius: var(--radius-radius-03);
    display: flex;
    min-width: 32px;
    height: 38px;
    padding: 8px;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-space-03);
    color: var(--colors-gray-scale-05);
}

/* End Pagination Code */

/* Swiper */
.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 15px;
    font-weight: bolder;
    content: "" !important;
}

/* End Swiper */

/* Sort Section */
.sort-section {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    gap: var(--spacing-space-07);
    margin-right: var(--spacing-space-03);
    margin-bottom: var(--spacing-space-05);
}

.sort-section .sort-section-label {
    color: var(--colors-gray-scale-06);
    text-align: right;
    font-size: var(--typo-body-02);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.sort-section .sort-section-link {
    font-style: normal;
    font-weight: 500;
    text-align: right;
    font-size: var(--typo-body-02);
}

/* End Sort Section */
@media (max-width: 767.98px) {
    .dropdown-sort {
        margin-right: var(--spacing-space-03) !important;
    }
}

.dropdown-sort {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    margin-bottom: var(--spacing-space-02);
    margin-right: var(--spacing-space-05);
}

/* DropDown Sort */

/* End DropDown Sort */


/* Address Item */
.radio-color-primary:checked[type=radio] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}


.radio-color-primary:checked {
    background-color: var(--colors-primary-color);
    border-color: var(--colors-primary-color);
}

.address-items-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.address-items-wrapper .address-items {
    display: flex;
    flex-direction: column;
    justify-content: start;
    max-height: 640px;
    overflow-y: auto;
}

.address-items-wrapper .address-items .address-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    gap: var(--spacing-space-03);
    margin-bottom: var(--spacing-space-05);
    border-bottom: 1px solid var(--colors-gray-scale-02);
    padding-bottom: var(--spacing-space-05);
}

.address-items-wrapper .address-items .address-item-title-section {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.address-items-wrapper .address-items .address-item-title-section .address-item-title label {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: var(--spacing-space-02);
    font-weight: 700;
    font-size: var(--typo-body-02);
}

.address-items-wrapper .address-items .address-item-title-section .address-item-icon-wrapper .radio-color-primary:checked {
    background-color: var(--colors-primary-color);
    border-color: var(--colors-primary-color);
}

.address-items-wrapper .address-items .address-item-title-section .address-item-icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-space-05);
}

.address-items-wrapper .address-items .address-item .address-item-text-wrapper {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    font-weight: 400;
    font-size: var(--typo-body-02);
}

/* End Address Item */

/* Radio button */
.form-check-input:checked {
    background-color: var(--colors-primary-color);
    border-color: var(--colors-primary-color);
}

.form-check-input:checked+label.form-check-label {
    color: var(--black);
}

.form-check-input:focus {
    box-shadow: none !important;
}

/* End Radio button */

/* Bottom Navigation */
.wrapper-bottom-nav {
    position: fixed;
    bottom: 16px;
    padding-right: var(--spacing-space-05);
    padding-left: var(--spacing-space-05);
    z-index: 1000;
    width: 100%;
}

.bottom-nav {
    box-shadow: 0px 0px 40px 0px #00000052;
    background-color: var(--colors-white);
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 64px;
    z-index: 1000;
    border-radius: var(--radius-radius-04);
}

.bottom-nav .nav-item {
    flex: 1;
    text-align: center;
    text-decoration: none;
    color: var(--colors-gray-scale-04);
    transition: background-color 0.3s ease;
    height: 100%;
}

.bottom-nav .nav-item.active {
    color: var(--colors-primary-color);
}

.bottom-nav .nav-item.active .mdi {
    border-bottom: 4px solid var(--colors-primary-color);
}

.bottom-nav .nav-item:hover {
    background-color: #0000001a;
}

.bottom-nav .nav-item i {
    display: block;
    font-size: 24px;
    margin-bottom: 5px;
}

.bottom-nav .nav-item span {
    font-size: 26px;
}

/* End Bottom Navigation */


/* Active Orders */

.wrapper-active-order-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    background-color: var(--colors-success-color-Light);
}

.active-order-spinner {
    display: inline-block;
    vertical-align: text-bottom;
    background-color: var(--colors-success-color);
    border-radius: 50%;
    opacity: 0;
    animation: spinner 2s infinite ease-out;
    width: 8px;
    height: 8px;
}

@keyframes spinner {
    0% {
        transform: scale(0);
        opacity: 1;
    }

    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

.active-orders-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-space-05);
    padding: var(--colors-gray-scale-06);
}

.active-orders-list .active-orders-list-item {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-space-03);
    max-width: 592px;
    border-bottom: 1px solid var(--colors-gray-scale-01);
    padding-bottom: var(--spacing-space-05);
}

.active-orders-list .active-orders-list-item:last-child {
    border-bottom: none;
}

.active-orders-list .active-orders-list-item .image-section-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-space-03);
    border-radius: var(--radius-radius-02);
    background: var(--colors-gray-scale-01);
}

.active-orders-list .active-orders-list-item .image-section-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    border-radius: var(--radius-radius-02);
    background-color: var(--colors-gray-scale-01);
    padding: var(--spacing-space-03);
    gap: var(--spacing-space-03);
    width: 120px;
    height: 120px;
}

.active-orders-list .active-orders-list-item .image-section-wrapper .image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-radius-02);
    background-color: var(--colors-white);
    padding: var(--spacing-space-03);
    width: 100%;
    height: 100%;
}


.active-orders-list .active-orders-list-item .image-section-wrapper.multi-items .image-wrapper {
    width: 48px;
    height: 48px;
}

.active-orders-list .active-orders-list-item .content-section {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    max-width: 464px;
    width: 464px;
    height: 120px;
}

@media screen and (max-width: 425px) {
    .active-orders-list .active-orders-list-item .content-section {
        width: unset;
    }
}

.active-orders-list .active-orders-list-item .content-section .header-wrapper .header {
    color: var(--colors-gray-scale-06);
    text-align: right;
    font-size: var(--typo-body-01);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}


@media screen and (max-width: 425px) {
    .active-orders-list .active-orders-list-item .content-section .header-wrapper .header {
        display: none;
    }

}

.active-orders-list .active-orders-list-item .content-section .body-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-space-05);
}

.active-orders-list .active-orders-list-item .content-section .body-wrapper .label {
    text-align: right;
}

.active-orders-list .active-orders-list-item .content-section .body-wrapper .price {
    text-align: center;
}

.active-orders-list .active-orders-list-item .content-section .body-wrapper .label,
.active-orders-list .active-orders-list-item .content-section .body-wrapper .price {
    color: var(--colors-gray-scale-05);
    font-size: var(--typo-body-01);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.active-orders-list .active-orders-list-item .content-section .footer-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.active-orders-list .active-orders-list-item .content-section .footer-wrapper .badge-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-space-03);
}


.offcanvas-cart {
    height: 83vh !important;
    padding: var(--spacing-space-05);
}


@media (min-width: 576px) {
    .offcanvas-cart {
        height: 72.6vh !important;
    }
}


@media (min-width: 768px) {
    .offcanvas-cart {
        height: 58.1vh !important;
    }
}

.offcanvas-cart .offcanvas-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--colors-gray-scale-04);
    padding-right: 0;
    padding-left: 0;
    padding-top: 0;
    padding-bottom: var(--spacing-space-05);
    border-top-left-radius: var(--radius-radius-05);
    border-top-right-radius: var(--radius-radius-05);
}

.offcanvas-cart .offcanvas-header .offcanvas-title {
    color: var(--colors-gray-scale-06);
    font-size: var(--typo-title-02);
}

.offcanvas-cart .offcanvas-body .items {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-right: 0;
}

.offcanvas-cart .offcanvas-body .items .item {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: var(--spacing-space-04);
    border-bottom: 1px solid var(--colors-gray-scale-01);
    width: 100%;
    padding-right: 0;
    padding-left: 0;
    overflow-x: auto;
}

.offcanvas-cart .offcanvas-body .items .item .wrapper-images {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding: var(--spacing-space-03);
    gap: var(--spacing-space-03);
    background-color: var(--colors-gray-scale-01);
}

.offcanvas-cart .offcanvas-body .items .item .wrapper-images .wrapper-image {
    width: 48px;
    height: 48px;
    background-color: var(--colors-white);
}

.offcanvas-cart .offcanvas-body .items .item .wrapper-images .wrapper-text {
    width: 48px;
    height: 48px;
    background-color: var(--colors-white);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: var(--typo-body-01);
    color: var(--colors-gray-scale-06);
}

.offcanvas-cart .offcanvas-body .items .item .header {
    font-size: var(--typo-body-02);
    font-weight: 400;
}

.offcanvas-cart .offcanvas-body .items .item .body-wrapper {
    font-size: var(--typo-body-01);
    font-weight: 400;
    display: flex;
    justify-content: center;
    align-items: start;
    gap: var(--spacing-space-05);

}

.offcanvas-cart .offcanvas-body .items .item .body-wrapper .price {
    font-size: var(--typo-body-01);
    font-weight: 700;
}

.offcanvas-cart .offcanvas-body .items .item .footer-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-space-04);
}

.offcanvas-cart .offcanvas-body .items .item .footer-wrapper .badge-wrapper {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-space-03);
}

/* End Active Orders */

/* Compare Section */

.compare-section {
    display: flex;
    padding: var(--spacing-space-06);
    justify-content: flex-end;
    align-items: flex-start;
    gap: var(--spacing-space-06);
    border-radius: var(--radius-radius-04);
    background: var(--colors-white);
}

.compare-section .button-add-product-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    align-self: center;
    height: 100%;
}

.compare-section .column {
    background-color: var(--colors-white);
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: var(--spacing-space-06);
    align-self: stretch;
    padding-left: var(--spacing-space-06);
    align-items: center;
}

.compare-section .column .image-section-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
}

.compare-section .column .image-section-wrapper .wrapper-trash {
    border-radius: var(--radius-radius-03);
    border: 1px solid var(--colors-gray-scale-02);
    background: var(--colors-white);
    display: flex;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-space-01);
    flex-shrink: 0;
    position: absolute;
    right: var(--spacing-space-05);
    top: var(--spacing-space-03);
}

.compare-section .column .title-section {
    overflow: hidden;
    color: var(--colors-gray-scale-06);
    text-align: right;
    text-overflow: ellipsis;
    font-size: var(--typo-body-01);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 3em;
    line-height: 1.5em;
    border-bottom: 1px solid var(--colors-gray-scale-02);
    width: 100%;
}


.compare-section .column .image-wrapper {
    max-width: 100%;
    max-height: 100%;
    width: 282px;
    height: 282px;
}

.compare-section .column .image-section-wrapper .score {
    background: var(--colors-white);
    position: absolute;
    padding: var(--spacing-space-03) var(--spacing-space-04) var(--spacing-space-03) var(--spacing-space-05);
    border-radius: var(--radius-radius-03);
    border: 1px solid var(--colors-gray-scale-01);
    bottom: var(--spacing-space-05);
    right: var(--spacing-space-05);
}

.compare-section .column .image-section-wrapper .score .mdi {
    color: var(--colors-yellow);
}

.compare-section .column .attr-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-space-02);
    align-self: stretch;
    padding-block: var(--spacing-space-06);
    border-bottom: 1px solid var(--colors-gray-scale-01);
}

.compare-section .column .attr-wrapper .attr-title {
    overflow: hidden;
    color: var(--colors-gray-scale-04);
    text-align: right;
    text-overflow: ellipsis;
    font-size: var(--typo-description-01);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.compare-section .column .attr-wrapper .attr-value {
    overflow: hidden;
    color: var(--colors-gray-scale-05);
    text-align: right;
    text-overflow: ellipsis;
    font-size: var(--typo-description-01);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.compare-section .button-add-product-wrapper .btn {
    width: 242px;
}

.modal-compare-products .modal-dialog {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-space-05);
    background: var(--colors-white);
    box-shadow: 0px 0px 30px 0px rgba(46, 46, 46, 0.15);

}

.modal-compare-products {
    padding: var(--spacing-space-06);
    border-radius: var(--radius-radius-05);
}

.modal-compare-products .modal-content {
    border: unset;
}

.modal-compare-products .modal-title {
    color: var(--colors-gray-scale-06);
    text-align: right;
    font-size: var(--typo-title-02);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

/* End Compare Section */

/* Shipping Info */

.shipping-info-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: var(--spacing-space-10);
    border-radius: var(--radius-radius-06);
    border: 1px solid var(--colors-gray-scale-02);
    background: var(--colors-white);
    padding: var(--spacing-space-06);
}

.shipping-info-row {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: var(--spacing-space-06);
    width: 100%;
}

.shipping-info-row .address {

    flex-direction: column;
    justify-content: center;
}

.shipping-info-row .shipping-info-title {
    color: var(--colors-gray-scale-06);
    text-align: right;
    font-size: var(--typo-title-02);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    border-bottom: 1px solid var(--colors-gray-scale-02);
    padding-bottom: var(--spacing-space-03);
    width: 100%;
}

.shipping-info-row .shipping-info-content {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-space-02);
}

.shipping-info-row .shipping-info-content .title {
    color: var(--colors-gray-scale-06);
    text-align: right;
    font-size: var(--typo-body-01);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.shipping-info-row .shipping-info-content .paragraph {
    color: var(--colors-gray-scale-04);
    text-align: right;
    font-size: var(--typo-body-02);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.btn-select-time {
    display: flex;
    height: 40px;
    width: 150px;
    padding: 0 var(--spacing-space-05);
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-radius-03);
    border: 1px solid var(--colors-gray-scale-04);
}

/* End Shipping Info */

/* Checkout */

@media (max-width: 767.98px) {

    .checkout-wrapper,
    .payment-info {
        border: 0 !important;
        border-radius: unset !important;
        border-top: 1px solid var(--colors-gray-scale-02) !important;
    }

    .checkout-wrapper .cart-items .item {
        padding: 0 !important;
    }

    .checkout-wrapper .cart-items .item .content-wrapper {
        padding: var(--spacing-space-03);
    }

    .checkout-wrapper .cart-items .item .img-wrapper {
        justify-content: start !important;
        width: 96px;
        height: 111px;
    }
}

.checkout-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    border-radius: var(--radius-radius-06);
    border: 1px solid var(--colors-gray-scale-02);
    background: var(--colors-white);
    padding: var(--spacing-space-06);
}

.checkout-wrapper .title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    padding-bottom: var(--spacing-space-03);
    border-bottom: 1px solid var(--colors-gray-scale-02);
}

.checkout-wrapper .title-row .content-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--spacing-space-02);
}

.checkout-wrapper .title-row .content-wrapper .title {
    color: var(--colors-gray-scale-06);
    text-align: right;
    font-size: var(--typo-title-02);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.checkout-wrapper .title-row .form-delete-cart {
    display: flex;
    justify-content: end;
}

.checkout-wrapper .cart-items {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-space-06);
    width: 100%;
    margin-top: var(--spacing-space-06);
}

.checkout-wrapper .cart-items .item {
    display: flex;
    gap: var(--spacing-space-04);
    padding: var(--spacing-space-05);
    border-radius: var(--radius-radius-03);
    border: 1px solid var(--colors-gray-scale-02);
    background: var(--colors-white);
    width: 100%;
    justify-content: space-between;
}

.checkout-wrapper .cart-items .item .img-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    width: 140px;
    height: 140px;
}

.checkout-wrapper .cart-items .item .img-wrapper .sikapp-shevi-btn-cart-delete {
    display: flex;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-space-01);
    flex-shrink: 0;
    border-radius: var(--radius-radius-03);
    border: 1px solid var(--colors-gray-scale-02);
    background: var(--colors-white);
    color: var(--colors-error-color);
    bottom: 8px;
    right: 8px;
    position: absolute;
}

.checkout-wrapper .cart-items .item .img-wrapper .badge-off {
    display: flex;
    height: 16px;
    position: absolute;
    top: 8px;
    right: 8px;
    padding: var(--spacing-space-02);
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-radius-02);
    background: var(--colors-error-color);
    color: var(--colors-white);
    text-align: center;
    font-size: var(--typo-description-01);
    font-style: normal;
    font-weight: 400;
    line-height: 10px;
}

.checkout-wrapper .cart-items .item .content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
}

.checkout-wrapper .cart-items .item .content-wrapper .first-row {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: var(--spacing-space-03);
}

.checkout-wrapper .cart-items .item .content-wrapper .first-row .title {
    overflow: hidden;
    color: var(--colors-gray-scale-06);
    text-align: right;
    text-overflow: ellipsis;
    font-size: var(--typo-body-02);
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.checkout-wrapper .cart-items .item .content-wrapper .first-row .specifications {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-space-03);
}

.checkout-wrapper .cart-items .item .second-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: end;
    flex-wrap: wrap;
}

.checkout-wrapper .cart-items .item .second-row .wrapper-price {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--spacing-space-03);
    flex: 1 0 0;
}

.checkout-wrapper .cart-items .item .second-row .wrapper-price .discount {
    color: var(--colors-gray-scale-04);
    text-align: center;
    font-size: var(--typo-body-02);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-decoration-line: line-through;
}

/* End Checkout */

/* Order Details */

.order-details-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: var(--spacing-space-10);
    border-radius: var(--radius-radius-06);
    border: 1px solid var(--colors-gray-scale-02);
    background: var(--colors-white);
    padding: var(--spacing-space-06);
}

.order-details-row {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: var(--spacing-space-06);
    width: 100%;
}

.order-details-row .order-details-title {
    color: var(--colors-gray-scale-06);
    text-align: right;
    font-size: var(--typo-title-02);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    border-bottom: 1px solid var(--colors-gray-scale-02);
    padding-bottom: var(--spacing-space-03);
    width: 100%;
}

.order-details-row .order-details-content {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-space-02);
}

.order-details-row .order-details-content .title {
    color: var(--colors-gray-scale-06);
    text-align: right;
    font-size: var(--typo-body-01);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.order-details-row .order-details-content .paragraph {
    color: var(--colors-gray-scale-04);
    text-align: right;
    font-size: var(--typo-body-02);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}


/* End Order Details */

/* Summary Product Card */
.summary-product-card-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: var(--spacing-space-04);
    align-self: stretch;
}

.summary-product-card {
    display: flex;
    align-items: center;
    padding: var(--spacing-space-05);
    justify-content: flex-end;
    gap: var(--spacing-space-04);
    align-self: stretch;
    width: 100%;
    border-radius: var(--radius-radius-03);
    border: 1px solid var(--colors-gray-scale-01);
    height: 172px;
}

.summary-product-card .image-wrapper {
    width: 140px;
    height: 140px;
}

.summary-product-card .image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.summary-product-card .content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    height: 100%;
    width: 100%;
}

.summary-product-card .content .wrapper-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: var(--spacing-space-03);
}

.summary-product-card .content .wrapper-title .title {
    overflow: hidden;
    color: var(--colors-gray-scale-06);
    text-align: right;
    text-overflow: ellipsis;
    font-size: var(--typo-body-02);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.summary-product-card .content .badge-wrapper {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-space-03);
}

.summary-product-card .content .badge-wrapper .badge {
    display: flex;
    height: 24px;
    min-width: 24px;
    padding: 0px var(--spacing-space-04);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-space-03);
    border-radius: var(--radius-radius-07);
    border: 1px solid var(--colors-gray-scale-01);
    background: var(--colors-white);
    color: var(--colors-gray-scale-06);
    text-align: center;
    font-size: var(--typo-body-02);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.summary-product-card .content .wrapper-price {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.summary-product-card .content .wrapper-price .price,
.summary-product-card .content .wrapper-price .discount {
    color: var(--colors-gray-scale-06);
    text-align: center;
    font-size: var(--typo-body-01);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

/* End Summary Product Card */

/* Order Details Payment Info */

.payment-info {
    display: flex;
    padding: var(--spacing-space-06);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-space-05);
    flex-shrink: 0;
    align-self: stretch;
    border-radius: var(--radius-radius-06);
    border: 1px solid var(--colors-gray-scale-02);
    background: var(--colors-white);
}

.payment-info .payment-info-title {
    color: var(--colors-gray-scale-06);
    text-align: right;
    font-size: var(--typo-title-02);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    border-bottom: 1px solid var(--colors-gray-scale-02);
    padding-bottom: var(--spacing-space-03);
    width: 100%;
}

.payment-info .payment-info-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-space-05);
    width: 100%;
    flex-wrap: wrap;
}

.payment-info .payment-info-content .label {
    color: var(--colors-gray-scale-06);
    text-align: right;
    font-size: var(--typo-body-01);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.payment-info .payment-info-content .context {
    color: var(--colors-gray-scale-04);
    text-align: center;
    font-size: var(--typo-body-02);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.payment-info .payment-info-content .context.text-colors-primary-color .currency {
    color: var(--colors-primary-color) !important;
}

/* End Order Details Payment Info */


/* Order Details Stepper */

.steps .step {
    display: block;
    width: 100%;
    text-align: center
}

.steps .step .step-icon-wrap {
    display: block;
    position: relative;
    width: 100%;
    height: 80px;
    text-align: center
}

.steps .step.completed:first-child .step-icon-wrap::before {
    background-color: var(--colors-success-color);
}

.steps .step.completed:first-child .step-icon-wrap::after {
    left: 0;
    right: unset;
}

.steps .step:last-child .step-icon-wrap::before {
    left: unset;
    right: 0;
}

.steps .step .step-icon-wrap::before,
.steps .step .step-icon-wrap::after {
    display: block;
    position: absolute;
    top: 50%;
    width: 50%;
    height: 3px;
    margin-top: -1px;
    background-color: #e1e7ec;
    content: '';
    z-index: 1
}

.steps .step .step-icon-wrap::before {
    left: 0
}

.steps .step .step-icon-wrap::after {
    right: 0
}

.steps .step .step-icon {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
    border: 1px solid var(--colors-gray-scale-01);
    border-radius: 50%;
    background-color: var(--colors-gray-scale-01);
    color: var(--colors-gray-scale-01);
    font-size: 38px;
    line-height: 81px;
    z-index: 5
}

.steps .step .step-title {
    margin-top: var(--spacing-space-03);
    margin-bottom: 0;
    color: var(--colors-gray-scale-05);
    font-size: var(--typo-body-02);
    font-weight: 500
}

.steps .step:first-child .step-icon-wrap::before {
    display: none
}

.steps .step:last-child .step-icon-wrap::after {
    display: none
}

.steps .step.completed .step-icon-wrap::before,
.steps .step.completed .step-icon-wrap::after {
    background-color: var(--colors-success-color)
}

.steps .step.completed .step-icon {
    border-color: var(--colors-success-color);
    background-color: var(--colors-success-color);
    color: var(--colors-white)
}

@media (max-width: 576px) {

    .flex-sm-nowrap .step .step-icon-wrap::before,
    .flex-sm-nowrap .step .step-icon-wrap::after {
        display: none
    }
}

@media (max-width: 768px) {

    .flex-md-nowrap .step .step-icon-wrap::before,
    .flex-md-nowrap .step .step-icon-wrap::after {
        display: none
    }
}

@media (max-width: 991px) {

    .flex-lg-nowrap .step .step-icon-wrap::before,
    .flex-lg-nowrap .step .step-icon-wrap::after {
        display: none
    }
}

@media (max-width: 1200px) {

    .flex-xl-nowrap .step .step-icon-wrap::before,
    .flex-xl-nowrap .step .step-icon-wrap::after {
        display: none
    }
}

.bg-faded,
.bg-secondary {
    background-color: var(--colors-gray-scale-01, #F2F2F2);
}

/* End Order Details Stepper */

/* Nav Pills */

.nav-pills .nav-link.active {
    color: var(--colors-white);
    background-color: var(--colors-primary-color);
    border-color: var(--colors-primary-color) !important;
}

.nav-pills .nav-item {
    display: flex;
    height: 40px;
}

.nav-pills .nav-item .nav-link {
    border-radius: var(--radius-radius-09);
    padding: 0px var(--spacing-space-07);
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--colors-gray-scale-04);
}

.nav-link:hover {
    color: inherit;
}

/* End Nav Pills */

/* Payment Card */
.payment-card {
    display: flex;
    flex-direction: row;
    justify-content: start;
    padding: var(--spacing-space-05) var(--spacing-space-04) var(--spacing-space-05) var(--spacing-space-05);
    align-items: center;
    gap: var(--spacing-space-04);
    flex: 1 0 0;
    border-radius: var(--spacing-space-03);
    border: 1px solid var(--colors-gray-scale-01);
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.payment-card .payment-card-radio {
    height: 100%;
}

.payment-card .payment-card-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    width: 100%;
    height: 100%;
}

.payment-card:has(input[type="radio"]:checked) {
    border: 1px solid var(--colors-primary-color);
    color: var(--colors-primary-color);
}

/* End Payment Card */

.finalization-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-space-07);
}

.finalization-wrapper .first-row {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-space-03);
}

.finalization-wrapper .first-row .title {
    color: var(--colors-primary-color);
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
}


.finalization-wrapper .card-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-space-02);
}

.finalization-wrapper .card-details .title {
    color: var(--colors-gray-scale-04);
    text-align: center;
    font-size: var(--typo-title-02);
    font-style: normal;
    font-weight: 700;
}

.finalization-wrapper .card-details .sub-title {
    color: var(--colors-gray-scale-06);
    text-align: center;
    font-size: var(--typo-title-01);
    font-style: normal;
    font-weight: 500;
}

/* Canvas */

#offcanvasfilter div.wrapper-filter-button {
    background-color: var(--colors-white);
}

.offcanvas-body ul li {
    border-bottom: 1px solid var(--colors-gray-scale-01);
    padding: .5rem 1rem;
}

#offcanvasCart {
    width: 500px !important;
}

.offcanvas {
    z-index: 99999;
}

#offcanvasCart li.dropdown-menu-cart-item .btn-product-footer input {
    width: 100%;
}

.dropdown-menu-cart-item li.dropdown-menu-cart-item {
    border-bottom: 1px solid #5C5C5C;
}

#offcanvasCart li.dropdown-menu-cart-item .btn-product-footer input {
    width: 100%;
}

/* End Canvas */


/* wpcf7 Form */
.wpcf7-form label {
    width: 100%;
}

.wpcf7-submit {
    display: flex;
    width: 200px;
    height: 36px;
    min-width: 120px;
    padding: 0px var(--spacing-space-04);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-space-03);
    border-radius: var(--radius-radius-02);
    border: 1px solid var(--colors-primary-color);
    color: var(--colors-primary-color, #219B90);
    text-align: center;
    font-size: var(--typo-body-02);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

/* End wpcf7 Form */


/* Branch Code */

.branch-card {
    height: inherit;
    border-radius: 20px;
    border: 1px solid #CCCCCC;
    overflow: hidden;
    background-color: var(--colors-white);
}

.branch-card .branch-info {
    padding: 16px;
}

.branch-card p.address-branch {
    text-align: justify;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 6em;
    line-height: 1.6em;
    height: 50px;
}

/*End Branch Code*/

/* Accordion */

.accordion-button::after {
    content: "\F0415";
    color: var(--colors-primary-color);
    background-image: unset;
    display: inline-block;
    font: normal normal normal 30px / 1 "Material Design Icons";
    font-size: 25px;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    transition: none;
}

.accordion-button:not(.collapsed)::after {
    content: "\F0374";
    background-image: unset;
    display: inline-block;
    font: normal normal normal 30px / 1 "Material Design Icons";
    font-size: 25px;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

/* End Accordion */

/* Branch List View */

.branch-list-view {
    display: flex;
    flex-direction: row;
    padding: var(--spacing-space-05);
    justify-content: space-between;
    background-color: var(--colors-white);
    border-radius: var(--radius-radius-03);
}

.branch-list-view .store-info {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-space-03);
}

.branch-list-view .store-info .wrapper-image {
    width: 119px;
    height: 119px;
}

.branch-list-view .store-info .wrapper-image img {
    border-radius: var(--radius-radius-02);
}

.branch-list-view .store-info .wrapper-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
    width: 527px;
    height: 120px;
    gap: var(--spacing-space-02);
}

.branch-list-view .store-info .wrapper-info .store-name {
    color: var(--colors-gray-scale-05);
    text-align: right;
    font-size: var(--typo-body-02);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.branch-list-view .store-info .wrapper-info .store-bio {
    color: var(--colors-gray-scale-04);
    text-align: right;
    font-size: var(--typo-description-02);
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    overflow-y: auto;
    max-height: 50px;
}

.branch-list-view .card-details {
    display: flex;
    width: 180px;
    height: 120px;
    padding: var(--spacing-space-03);
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-space-03);
    border-radius: var(--radius-radius-03);
    border: 1px solid var(--colors-gray-scale-01);
}

.branch-list-view .card-details .wrapper-icon {
    display: flex;
    align-items: center;
    gap: var(--spacing-space-02);
}

.branch-list-view .card-details .wrapper-icon .text {
    color: var(--colors-gray-scale-06);
    text-align: center;
    font-size: var(--typo-body-01);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.branch-list-view .card-details .wrapper-icon .mdi-star-outline {
    color: var(--colors-yellow);
}

.branch-list-view .card-details .wrapper-title {
    color: var(--colors-gray-scale-05);
    text-align: right;
    font-size: var(--typo-body-02);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.branch-list-view .card-details .wrapper-text {
    color: var(--colors-gray-scale-04);
    text-align: right;
    font-size: var(--typo-description-02);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.branch-list-view .card-details .wrapper-subtext {
    color: var(--colors-gray-scale-04);
    text-align: right;
    font-size: var(--typo-description-02);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

/* End Branch List View */

/* Product Swiper Effect */

.product-swiper-effect.swiper {
    width: 100%;
}

.product-swiper-effect .swiper-slide {
    background-position: center;
    background-size: cover;
    width: 300px;
    height: 200px;
}

.product-swiper-effect .swiper-slide img {
    display: block;
    width: 100%;
}

.product-swiper-effect .swiper-pagination-effectcoverflow {
    display: flex;
    justify-content: center;
    gap: var(--spacing-space-03);
    position: static;
    align-items: center;
}

.product-swiper-effect .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: var(--colors-gray-scale-02);
    opacity: 0.6;
    border-radius: 50%;
    transition: opacity 0.3s, transform 0.3s;
}

.product-swiper-effect .swiper-pagination-bullet-active {
    opacity: 1;
    transform: scale(1.2);
    /* Scale active bullet */
    background: var(--colors-gray-scale-06) !important;
}

.product-swiper-effect .swiper-button-prev,
.product-swiper-effect .swiper-button-next {
    color: var(--colors-gray-scale-06);
    font-size: 20px;
    cursor: pointer;
}

.product-swiper-effect .pagination-container-swiper-pagination-effectcoverflow {
    margin-top: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--Spacing-Space05);
}

.product-swiper-effect .pagination-container-swiper-pagination-effectcoverflow .swiper-button-next,
.product-swiper-effect .pagination-container-swiper-pagination-effectcoverflow .swiper-button-prev {
    position: unset;
    margin-top: unset;
}

/* End Product Swiper Effect */

/* Spec */

.spec {
    border-radius: var(--radius-radius-07);
    border: 1px solid var(--colors-gray-scale-01);
    background: var(--colors-white);
    display: flex;
    height: 24px;
    min-width: 24px;
    padding: 0 var(--spacing-space-04);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-space-03);
    color: var(--colors-gray-scale-06, #1A1A1A);
    text-align: center;
    font-size: var(--typo-description-01);
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

/* End Spec */
.breadcrumb {
    margin-bottom: 0;
}

/* Mobile Category */

.mobile-category .categories-card {
    height: 120px;
    position: sticky;
    z-index: 2;
    top: 1px;
}


.mobile-category .category-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: var(--spacing-space-04) var(--spacing-space-05);
    gap: var(--spacing-space-03);
    height: 100%;
    width: 88px;
}

.mobile-category .category-card .wrapper-img {
    background-color: var(--colors-white);
    border: 1px solid var(--colors-gray-scale-02);
    border-radius: var(--radius-radius-03);
    overflow: hidden;
    width: 55px;
    height: 55px;
}

.mobile-category .category-card .title {
    font-size: var(--typo-description-02);
    font-weight: 700;
    text-align: center;
}

.mobile-category .category-card.active {
    background-color: var(--colors-white);
    box-shadow: -8px 0px 16px 0px rgba(0, 0, 0, 0.24);
    color: var(--colors-primary-color) !important;
    z-index: 2;
    position: relative;
}

.mobile-category .category-card.active .wrapper-img {
    border-color: var(--colors-primary-color) !important;
    border-width: 2px;
}

.mobile-category .subcategory-wrapper {
    background-color: var(--colors-white);
    padding: var(--spacing-space-05);
    z-index: 2;
    position: relative;
}

.mobile-category .subcategory {
    background-color: var(--colors-white);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-space-05);
    padding: var(--spacing-space-05);
    min-height: 50vh;
    align-items: center;
}

.mobile-category .subcategory .subcategory-card {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--spacing-space-03);
    width: 100%;
}

.mobile-category .subcategory .subcategory-card .title-section {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: var(--spacing-space-03);
    border-bottom: 1px solid var(--colors-primary-color);
    padding-bottom: var(--spacing-space-03);
    width: 100%;
}

.mobile-category .subcategory .subcategory-card .title-section .wrapper-img {
    background-color: var(--colors-white);
    border: 1px solid var(--colors-gray-scale-02);
    border-radius: var(--radius-radius-03);
    overflow: hidden;
    width: 32px;
    height: 32px;
}

.mobile-category .subcategory .subcategory-card .title-section .title {
    color: var(--colors-primary-color);
    font-size: var(--typo-body-02);
    font-width: 700;
}

.mobile-category .subcategory .subcategory-card .body-section {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    column-gap: var(--spacing-space-03);
    row-gap: var(--spacing-space-05);
    width: 100%;
}

.mobile-category .subcategory .subcategory-card .body-section .item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48%;
    height: 35px;
    font-size: var(--typo-description-01);
    color: var(--colors-gray-scale-05);
    font-weight: 400;
    border: 1px solid var(--colors-gray-scale-02);
    border-radius: var(--spacing-space-03);
}

/* End Mobile Category */

/* End Component */

/* Product Details */
.product-page .right-section {
    /* display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--spacing-space-05); */
    padding: var(--spacing-space-05);
    border-radius: var(--radius-radius-04);
    background: var(--colors-white);
}

.product-page .right-section .gallery-wrapper {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.product-page .wrapper-gallery-button {
    position: absolute;
    display: flex;
    gap: var(--spacing-space-03);
    bottom: 16px;
    right: 16px;
    z-index: 1;
}

.product-page .compare-button,
.product-page .zoom-button {
    display: flex;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-space-01);
    border-radius: var(--radius-radius-03);
    border: 1px solid var(--colors-gray-scale-02);
    background: var(--colors-white);
}

.product-page .right-section .gallery-wrapper .swiper-slide img,
.product-page .right-section .gallery-wrapper .gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-height: 385px;
}

.product-page .right-section .gallery-container .gallery-thumbs .swiper-wrapper {
    display: flex;
    justify-content: center;
    align-items: start;
    gap: var(--spacing-space-03);
    flex-wrap: wrap;
}

.product-page .right-section .gallery-container .gallery-thumbs .swiper-slide-thumb-active {
    border: 1px solid var(--colors-primary-color) !important;
}

.product-page .right-section .gallery-container .gallery-thumbs .swiper-slide {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-radius-02);
    border: 1px solid var(--colors-gray-scale-02);
    background: var(--colors-white);
}

.product-page .right-section .gallery-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: var(--spacing-space-03);
    border-left: 1px solid var(--colors-gray-scale-01);
}


.product-page .right-section .gallery-container .swiper-button-next,
.product-page .right-section .gallery-container .swiper-button-prev {
    display: flex;
    width: 40px;
    height: 40px;
    padding: 4px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: var(--radius-radius-09);
    border: 1px solid var(--colors-gray-scale-01);
    background: var(--colors-white);
    color: var(--colors-gray-scale-05);
}

.product-page .right-section .first-row {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-space-05);
    justify-content: center;
}

.product-page .right-section .first-row .details-card {
    display: flex;
    height: 120px;
    width: 175px;
    padding: var(--spacing-space-03);
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-space-03);
    border-radius: var(--radius-radius-03);
    border: 1px solid var(--colors-gray-scale-01);
}

@media screen and (max-width: 900px) {
    .product-page .right-section .first-row .details-card {
        width: 167px;
    }
}

.product-page .right-section .first-row .details-card .wrapper-icon {
    display: flex;
    align-items: center;
    gap: var(--spacing-space-02);
}

.product-page .right-section .first-row .details-card .wrapper-icon .text {
    color: var(--colors-gray-scale-06);
    text-align: center;
    font-size: var(--typo-body-01);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.product-page .right-section .first-row .details-card .wrapper-icon .mdi-star-outline {
    color: var(--colors-yellow);
}

.product-page .right-section .first-row .details-card .wrapper-title {
    color: var(--colors-gray-scale-05);
    text-align: right;
    font-size: var(--typo-body-02);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.product-page .right-section .first-row .details-card .wrapper-text {
    color: var(--colors-gray-scale-04);
    text-align: right;
    font-size: var(--typo-description-02);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.product-page .right-section .first-row .details-card .wrapper-subtext {
    color: var(--colors-gray-scale-04);
    text-align: right;
    font-size: var(--typo-description-02);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.product-page .right-section .second-row {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-space-02);
    width: 100%;
}

.product-page .right-section .second-row .product-title {
    color: var(--colors-gray-scale-06);
    text-align: right;
    font-size: var(--typo-title-02);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.product-page .right-section .second-row .product-subtitle {
    color: var(--colors-gray-scale-05);
    text-align: right;
    font-size: var(--typo-body-02);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-space-02);
}

.product-page .right-section .second-row .product-subtitle .circle {
    width: 6px;
    height: 6px;
    background-color: var(--colors-gray-scale-03);
    border-radius: 50%;
}

.product-page .right-section .third-row {
    overflow: hidden;
    color: var(--colors-gray-scale-04);
    text-align: right;
    text-overflow: ellipsis;
    font-size: var(--typo-body-02);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.product-page .context {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-space-07);
    margin-top: var(--spacing-space-07);
}

.product-page .context .section-title {
    display: flex;
    max-width: 82px;
    padding: var(--spacing-space-03) 0px var(--spacing-space-03) var(--radius-radius-04);
    align-items: center;
    border-bottom: 1px solid var(--colors-primary-color);
}

.product-page .context .section-title p {
    color: var(--colors-primary-color);
    text-align: right;
    font-size: var(--typo-title-02);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.product-page .context .paragraph {
    color: var(--colors-gray-scale-05);
    text-align: justify;
    font-size: var(--typo-body-02);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-top: var(--spacing-space-05);
}

.product-page .show-features .features-list {
    max-width: 100%;
    width: 444px;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--colors-gray-scale-01);
}

.product-page .show-features .features-list .features:last-child {
    border-bottom: unset;
}

.product-page .show-features .features-list .features {
    display: flex;
    padding: var(--spacing-space-04) 0px var(--spacing-space-04) var(--spacing-space-04);
    justify-content: flex-start;
    gap: var(--spacing-space-08);
    align-items: center;
    align-self: stretch;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    font-size: var(--typo-description-01);
    border-bottom: 1px solid var(--colors-gray-scale-02);
}


.product-page .show-features .features-list .features .title {
    color: var(--colors-gray-scale-04);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    width: 240px;
}

.product-page .show-features .features-list .features .value {
    color: var(--colors-gray-scale-05);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.product-page .comments .comment {
    display: flex;
    padding: var(--spacing-space-05);
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacing-space-04, 12px);
    align-self: stretch;
    border-bottom: 1px solid var(--colors-gray-scale-02);
    background: var(--colors-white);
}

.product-page .comments {
    display: flex;
    padding: var(--spacing-space-05);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-space-06);
    align-self: stretch;
    border-radius: var(--radius-radius-03);
    background: var(--colors-white);
}

.product-page .comments .comment-first-row {
    display: flex;
    justify-content: start;
    align-items: flex-start;
    gap: var(--spacing-space-05);
    align-self: stretch;
}


.product-page .comments .wrapper-avatar-name {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: flex-start;
    gap: var(--spacing-space-05);
}

.product-page .comments .wrapper-avatar-name .avatar {
    width: 48px;
    height: 48px;
}

.product-page .comments .wrapper-avatar-name .avatar img {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-radius-09);
}

.product-page .comments .wrapper-avatar-name .wrapper-name-date {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: start;
    gap: var(--spacing-space-03);
}

.product-page .comments .wrapper-avatar-name .wrapper-name-date .wrapper-name-badge {
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-space-03);
}

.product-page .comments .wrapper-avatar-name .wrapper-name-date .wrapper-name-badge .name {
    color: var(--colors-gray-scale-05);
    text-align: right;
    font-size: var(--typo-body-01);
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
}

.product-page .comments .wrapper-avatar-name .wrapper-name-date .wrapper-name-badge .badge-buyer {
    display: flex;
    height: 22px;
    min-width: 100px;
    padding: 0px var(--spacing-space-03) 0px var(--spacing-space-04);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-space-02);
    border-radius: var(--radius-radius-02);
    background: var(--colors-primary-light-color);
    color: var(--colors-primary-color);
    text-align: right;
    font-size: var(--typo-description-02, 10px);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.product-page .comments .wrapper-avatar-name .wrapper-name-date .wrapper-date {
    color: var(--colors-gray-scale-04);
    text-align: right;
    font-size: var(--typo-body-02);
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
}

.product-page .comments .wrapper-like-button {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-space-05);
}

.product-page .comments .wrapper-like-button .wrapper-like {
    color: var(--colors-gray-scale-04);
    text-align: right;
    font-size: var(--typo-body-01);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    display: flex;
}

.product-page .comments .wrapper-like-button .answers-button {
    display: flex;
    height: 24px;
    min-width: 80px;
    padding: 0px var(--spacing-space-03) 0px var(--spacing-space-04);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-space-03);
    color: var(--colors-gray-scale-04);
    text-align: right;
    font-size: var(--typo-description-01);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.product-page .comments .comment-second-row {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--spacing-space-05);
    align-self: stretch;
}

.product-page .comments .comment-second-row .comment-text {
    color: var(--colors-gray-scale-06);
    text-align: right;
    font-size: var(--typo-body-01);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.product-page .comments .comment-second-row .show-more {
    display: flex;
    height: 24px;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-space-03);
    color: var(--colors-gray-scale-04);
    text-align: right;
    font-size: var(--typo-description-01);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-wrap: nowrap;
    text-decoration: none;
}

.product-page .comments .sub-comment {
    display: flex;
    padding: var(--spacing-space-05);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-space-05);
    align-self: stretch;
    border-radius: var(--radius-radius-03);
    background: var(--colors-gray-scale-01);
    width: 100%;
}

.product-page .comments .sub-comment .first-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.badge-admin {
    display: flex;
    height: 22px;
    min-width: 100px;
    padding: 0px var(--spacing-space-03) 0px var(--spacing-space-04);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-space-02);
    flex-shrink: 0;
    border-radius: var(--radius-radius-02);
    background: var(--colors-blue-light);
    color: var(--colors-blue-02);
    text-align: right;
    font-size: var(--typo-description-02);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.product-page .comments .sub-comment {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

.product-page .comments .sub-comment .wrapper-date .date {
    display: flex;
    padding: var(--spacing-space-05);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-space-05);
    align-self: stretch;
}

.product-page .comments .sub-comment .date {
    color: var(--colors-gray-scale-04);
    text-align: right;
    font-size: var(--typo-body-02);
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
}

.product-page .comments .sub-comment .second-row {
    color: var(--colors-gray-scale-06);
    text-align: right;
    font-size: var(--typo-body-01);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.product-page .comments .wrapper-button {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--spacing-space-05);
}

.product-page .left-section {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--spacing-space-06);
    padding: var(--spacing-space-04);
    border-radius: var(--radius-radius-04);
    background: var(--colors-white);
}

.product-page .left-section .top {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-space-06);
}

.product-page .left-section .top .features-title {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.product-page .left-section .top .features-title .title {
    color: var(--colors-gray-scale-05);
    text-align: right;
    font-size: var(--typo-body-01);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.product-page .left-section .top .features-title .subtitle {
    color: var(--colors-gray-scale-04);
    text-align: right;
    font-size: var(--typo-description-02);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.product-page .left-section .top .features-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--colors-gray-scale-01);
}

.product-page .left-section .top .features-list:last-child {
    border-bottom: unset;
}

.product-page .left-section .top .features-list .features {
    display: flex;
    padding: var(--spacing-space-04) 0px var(--spacing-space-04) var(--spacing-space-04);
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    font-size: var(--typo-description-01);
}


.product-page .left-section .top .features-list .features .title {
    color: var(--colors-gray-scale-04);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.product-page .left-section .top .features-list .features .value {
    color: var(--colors-gray-scale-05);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.product-page .left-section .middle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: var(--spacing-space-06);
    width: 100%;
}

.product-page .left-section .middle .specification {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-space-03);
}

.product-page .left-section .middle .specification .values {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-space-04);
    flex-wrap: wrap;
}

.product-page .left-section .middle .specification .values .btn-check+.btn:hover {
    color: inherit;
    background-color: inherit;
    border-color: inherit;
}

.product-page .left-section .middle .specification .values .btn-check+.btn {
    display: flex;
    height: 36px;
    min-width: 80px;
    padding: var(--spacing-space-03);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-space-03);
    border-radius: var(--radius-radius-03);
    color: var(--colors-gray-scale-04, #808080);
    text-align: right;
    font-size: var(--typo-description-02);
    font-style: normal;
    font-weight: 700;
}

input.color-input {
    display: none;
}

input.color-input+label {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50px;
    border: 2px solid #ccc;
    cursor: pointer;
}

input.color-input:checked+label {
    border-color: var(--colors-primary-color) !important;
    border-width: 3px;

}

.product-page .left-section .middle .specification .values .btn-check:checked+.btn {
    background: var(--colors-primary-color);
    color: var(--colors-white);
}

.product-page .left-section .bottom {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-space-03);
    width: 100%;
}

.product-page .left-section .bottom .wrapper-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-page .left-section .bottom .wrapper-price .price {
    color: var(--colors-primary-color);
    text-align: right;
    font-size: var(--typo-title-02);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    align-self: self-end;
}

.product-page .left-section .bottom .wrapper-price .price .currency {

    color: var(--colors-primary-color) !important;
}

.product-page .left-section .bottom .wrapper-price .discount {
    color: var(--colors-gray-scale-04);
    text-align: right;
    font-size: var(--typo-body-01);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-decoration-line: line-through;
}

.product-page .left-section .bottom .wrapper-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-space-04);
    align-self: stretch;
}

.product-page .left-section .bottom .wrapper-button button {
    height: 48px;
    min-width: 80px;
}

/* End Product Details */


/* Footer */
footer {
    background-color: var(--colors-gray-scale-06);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-space-07);
    padding: var(--spacing-space-07) var(--spacing-space-09);
}

@media screen and (max-width: 900px) {
    footer {
        text-align: center;
    }
}

footer li::marker {
    content: '';
}

footer .first-section {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: start;
    width: 100%;
}

footer .first-section .first-column,
footer .first-section .second-column,
footer .first-section .third-column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: start;
    gap: var(--spacing-space-03);
    padding-left: 0;
    padding-right: 0;
}

footer .first-section .first-column .title,
footer .first-section .second-column .title,
footer .first-section .third-column .title {
    color: var(--colors-white);
    text-align: right;
    font-size: var(--typo-body-01);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

footer .first-section ul.list {
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    gap: var(--spacing-space-03);
    list-style: none;
    padding-right: 0;
    margin-bottom: 0;
}

footer .first-section ul.list li {
    color: var(--colors-gray-scale-02);
    text-align: right;
    font-size: var(--typo-body-02);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

footer div.border {
    border-color: var(--colors-gray-scale-05) !important;
    width: 100%;
}

footer .second-section .wrapper-info,
footer .second-section .wrapper-social-media {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    width: 100%;
}

footer .second-section .wrapper-info {
    gap: var(--spacing-space-07);
}

footer .second-section .wrapper-social-media {
    gap: var(--spacing-space-06);
}

footer .second-section .wrapper-logo {
    width: 47px;
    height: 36px;
}

footer .second-section .wrapper-store-info p {
    color: var(--colors-gray-scale-02);
    text-align: right;
    font-size: var(--typo-body-02);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

footer .second-section .wrapper-social-media-namads {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-space-06);
}

footer .second-section .wrapper-social-media {
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-space-06);
    color: var(--colors-gray-scale-02);
}

footer .second-section .wrapper-namads {
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-space-05);
}

footer .second-section .wrapper-namads div {
    border-radius: var(--radius-radius-03);
    border: 1px solid var(--colors-gray-scale-05);
    padding: var(--spacing-space-03);
    width: 59px;
    height: 59px;
}

footer .second-section .wrapper-namads * {
    width: 100%;
    height: 100%;
}

footer .copyright {
    text-align: center;
    color: var(--colors-gray-scale-02);
    font-size: var(--typo-body-02);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-top: var(--spacing-space-07);
}

/* End Footer */


/* Wordpress */
.home-page.wp-block-image img {
    width: 100% !important;
}

.home-page.wp-block-image .aligncenter {
    width: 100%;
}

.home-page.rounded-3 img {
    border-radius: var(--radius-radius-03);
}

/* End Wordpress */