/*
	*******************
	Template name:  6valley theme_aster
	Version:        1.0
	Author:         6amtech
	Author url:     https://6amtech.com/

	NOTE:
	-----
	Please DO NOT EDIT THIS CSS, you may need to use "custom.css" file for writing your custom css.
	We may release future updates so it will overwrite this file. it's better and safer to use "custom.css".

    ******** CSS INDEX ********
    01. Base
        1.1 Typography
        1.2 Spacing
        1.3 Color
    02. Components
        2.1 Helper
        2.2 Animation
        2.3 Social List
        2.4 Inputs
        2.5 Buttons
        2.6 Widget
        2.7 Pagination
        2.8 Customize
        2.9 Preloader
        2.10 Card
        2.11 Common
        2.12 BackToTop
        2.13 Order Timeline
    03. Layout
        3.1 Header
        3.2 Footer
        3.3 Aside
        3.4 Banner
        3.5 Theme Switcher
        3.6 RTL
        3.7 Filter Aside
        3.8 Login
    04. Theme
        4.1 Dark Theme
    05. Shop
        5.1 Product
        5.2 Store
        5.3 Cart
        5.4 Chat
    ********************/
    :root {
        --bs-primary: #347554;
        --bs-primary-rgb: 52, 117, 84;
        --bs-secondary-rgb: 219, 48, 34;
        --bs-secondary: #db3022;
        --primary-dark: #12452b;
        --primary-light: #e8ffef;
        --title-color: #222;
        --title-color-rgb: 34, 34, 34;
        --bs-body-color: #666;
        --secondary-body-color: #9b9b9b;
        --bs-light: #f6f6f6;
        --bs-light-rgb: 246, 246, 246;
        --absolute-dark: #222;
        --absolute-dark-rgb: 34, 34, 34;
        --absolute-white: #fff;
        --absolute-white-rgb: 255, 255, 255;
        --shadow-color: rgba(0, 0, 0, 0.05);
        --bs-body-bg-rgb: 248, 248, 250;
        --bs-body-bg: #f8f8fa;
        --bs-border-rgb: 221, 221, 221;
        --bs-border-color: #f4f4f4;
        --bs-dark-rgb: var(--title-color-rgb);
        --bs-dark: var(--title-color);
        --bg-badge: #ddd;
        --box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        --bs-body-font-family: "Mulish", sans-serif;
        --title-font: "Mulish", sans-serif;
        --thin: 100;
        --extra-light: 200;
        --light: 300;
        --regular: 400;
        --medium: 500;
        --semi-bold: 600;
        --bold: 700;
        --extra-bold: 800;
        --dark-color-bold: 900;
        --bs-body-font-size: 0.875rem;
        --h1_fs: 1.75rem;
        --h2_fs: 1.5rem;
        --h3_fs: 1.25rem;
        --h4_fs: 1.125rem;
        --h5_fs: 1rem;
        --h6_fs: 0.875rem;
        --bs-body-line-height: 1.4;
        --title-line-height: 1.2;
    }
    
    [theme="dark"] {
        --bs-body-color: #ccd0d3;
        --bs-white: #282828;
        --primary-light: #222;
        --bs-white-rgb: 35, 35, 37;
        --input-bg: #3a3a3a;
        --title-color: rgba(255, 255, 255, 0.8);
        --absolute-white: rgba(255, 255, 255, 0.8);
        --title-color-rgb: 255, 255, 255;
        --bs-dark-rgb: var(--title-color-rgb);
        --bs-dark: var(--title-color);
        --bs-light: #222;
        --bs-light-rgb: 34, 34, 34;
        --bs-body-bg-rgb: 24, 24, 26;
        --bs-body-bg: #18181a;
        --bs-border-rgb: 73, 73, 73;
        --bs-border-color: #494949;
        --bg-badge: #464646;
        --box-shadow: 0 2px 10px rgba(var(--bs-primary-rgb), 0.15);
    }
    
    /* ************************
       01.1: Reset
       ********************* */
    html {
        font-family: sans-serif;
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: transparent;
        scroll-behavior: smooth;
        accent-color: var(--bs-primary);
    }
    
    body {
        --bs-body-text-align: start;
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden !important;
    }
    
    [tabindex="-1"]:focus {
        outline: 0 !important;
    }
    
    label {
        text-transform: capitalize;
        color: var(--title-color);
    }
    
    hr {
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
        height: 0;
        overflow: visible;
    }
    
    h1,
    .h1,
    h2,
    .h2,
    h3,
    .h3,
    h4,
    .h4,
    h5,
    .h5,
    h6,
    .h6 {
        margin: 0;
        font-weight: var(--bold);
        line-height: var(--title-line-height);
        font-family: var(--title-font);
        color: var(--title-color);
    }
    
    h1,
    .h1 {
        font-size: var(--h1_fs);
    }
    
    h2,
    .h2 {
        font-size: var(--h2_fs);
    }
    
    h3,
    .h3 {
        font-size: var(--h3_fs);
    }
    
    h4,
    .h4 {
        font-size: var(--h4_fs);
    }
    
    h5,
    .h5 {
        font-size: var(--h5_fs);
    }
    
    h6,
    .h6 {
        font-size: var(--h6_fs);
    }
    
    p {
        -webkit-margin-before: 0rem;
        margin-block-start: 0rem;
        -webkit-margin-after: 1rem;
        margin-block-end: 1rem;
    }
    
    p:last-child {
        -webkit-margin-after: 0rem;
        margin-block-end: 0rem;
    }
    
    p:empty {
        -webkit-margin-after: 0rem;
        margin-block-end: 0rem;
    }
    
    a {
        color: var(--title-color);
        text-decoration: none;
    }
    
    a:hover {
        color: var(--bs-primary);
    }
    
    button {
        color: var(--title-color);
    }
    
    [disabled] {
        pointer-events: none;
        opacity: 0.6;
    }
    
    textarea {
        overflow: auto;
        resize: vertical;
    }
    
    [type="checkbox"] {
        -webkit-margin-end: 0.3125rem;
        margin-inline-end: 0.3125rem;
    }
    
    ::-moz-selection {
        text-shadow: none;
        color: var(--absolute-white);
        background-color: var(--bs-primary) !important;
    }
    
    ::selection {
        text-shadow: none;
        color: var(--absolute-white);
        background-color: var(--bs-primary) !important;
    }
    
    ::-webkit-input-placeholder {
        color: var(--title-color) !important;
        opacity: 0.4 !important;
    }
    
    ::-moz-placeholder {
        color: var(--title-color) !important;
        opacity: 0.4 !important;
    }
    
    :-ms-input-placeholder {
        color: var(--title-color) !important;
        opacity: 0.4 !important;
    }
    
    ::-ms-input-placeholder {
        color: var(--title-color) !important;
        opacity: 0.4 !important;
    }
    
    ::placeholder {
        color: var(--title-color) !important;
        opacity: 0.4 !important;
    }
    
    iframe {
        max-width: 100%;
    }
    
    button:focus,
    input:focus,
    select:focus,
    textarea:focus {
        outline: none !important;
    }
    
    img {
        max-inline-size: 100%;
        block-size: auto;
    }
    
    ul:not([class]),
    ol {
        -webkit-padding-start: 1.5rem;
        padding-inline-start: 1.5rem;
    }
    
    ul:not([class]) li:not(:last-child),
    ol li:not(:last-child) {
        -webkit-margin-after: 0.5rem;
        margin-block-end: 0.5rem;
    }
    
    [data-bs-toggle="tooltip"] {
        cursor: pointer;
    }
    
    label {
        -webkit-margin-after: 0.5rem;
        margin-block-end: 0.5rem;
    }
    
    /* ************************
       01.2: Padding/Margin
       ********************* */
    .mt-30 {
        -webkit-margin-before: 1.875rem;
        margin-block-start: 1.875rem;
    }
    
    .mb-30 {
        -webkit-margin-after: 1.875rem;
        margin-block-end: 1.875rem;
    }
    
    .row-gap-1 {
        row-gap: 0.25rem !important;
    }
    
    .column-gap-1 {
        -webkit-column-gap: 0.25rem !important;
        -moz-column-gap: 0.25rem !important;
        column-gap: 0.25rem !important;
    }
    
    .row-gap-2 {
        row-gap: 0.5rem !important;
    }
    
    .column-gap-2 {
        -webkit-column-gap: 0.5rem !important;
        -moz-column-gap: 0.5rem !important;
        column-gap: 0.5rem !important;
    }
    
    .row-gap-3 {
        row-gap: 1rem !important;
    }
    
    .column-gap-3 {
        -webkit-column-gap: 1rem !important;
        -moz-column-gap: 1rem !important;
        column-gap: 1rem !important;
    }
    
    .row-gap-4 {
        row-gap: 1.5rem !important;
    }
    
    .column-gap-4 {
        -webkit-column-gap: 1.5rem !important;
        -moz-column-gap: 1.5rem !important;
        column-gap: 1.5rem !important;
    }
    
    .row-gap-5 {
        row-gap: 3rem !important;
    }
    
    .column-gap-5 {
        -webkit-column-gap: 3rem !important;
        -moz-column-gap: 3rem !important;
        column-gap: 3rem !important;
    }
    
    .gap-10 {
        gap: 0.625rem !important;
    }
    
    .gap-30 {
        gap: 1.875rem !important;
    }
    
    .mt-n1 {
        -webkit-margin-before: -0.25rem !important;
        margin-block-start: -0.25rem !important;
    }
    
    .mb-n1 {
        -webkit-margin-after: -0.25rem !important;
        margin-block-end: -0.25rem !important;
    }
    
    .mt-n2 {
        -webkit-margin-before: -0.5rem !important;
        margin-block-start: -0.5rem !important;
    }
    
    .mb-n2 {
        -webkit-margin-after: -0.5rem !important;
        margin-block-end: -0.5rem !important;
    }
    
    .mt-n3 {
        -webkit-margin-before: -1rem !important;
        margin-block-start: -1rem !important;
    }
    
    .mb-n3 {
        -webkit-margin-after: -1rem !important;
        margin-block-end: -1rem !important;
    }
    
    .mt-n4 {
        -webkit-margin-before: -1.5rem !important;
        margin-block-start: -1.5rem !important;
    }
    
    .mb-n4 {
        -webkit-margin-after: -1.5rem !important;
        margin-block-end: -1.5rem !important;
    }
    
    .mt-n5 {
        -webkit-margin-before: -3rem !important;
        margin-block-start: -3rem !important;
    }
    
    .mb-n5 {
        -webkit-margin-after: -3rem !important;
        margin-block-end: -3rem !important;
    }
    
    .p-30 {
        padding: 1.875rem !important;
    }
    
    @media only screen and (max-width: 575px) {
        .p-30 {
            padding: 1rem !important;
        }
    }
    
    /* ************************
       01.3: Color
       ********************* */
    .bg-primary-light,
    .header-top {
        background-color: var(--primary-light);
    }
    
    .absolute-white {
        --opacity: 1;
        color: rgba(var(--absolute-white-rgb), var(--opacity)) !important;
    }
    
    .absolute-dark {
        --opacity: 1;
        color: rgba(var(--absolute-dark-rgb), var(--opacity)) !important;
    }
    
    .text-gold {
        color: #ffba49 !important;
    }
    
    .bg-badge {
        align-content: center;
        background-color: #fa8277;
    }
    
    .cookies,
    .aside,
    .store-product__action {
        -webkit-transition: all 200ms ease-in-out;
        -o-transition: all 200ms ease-in-out;
        transition: all 200ms ease-in-out;
    }
    
    a,
    .brand-item .hover__action,
    .brand-item::after,
    .shop-name-wrap .shop-info,
    .btn-circle,
    .eye-btn,
    .nav--tabs button::after,
    .nav--tabs a::after,
    .swiper-button-next,
    .swiper-button-prev,
    .hover-primary,
    .main-menu .sub-menu,
    .aside,
    .common-nav li.has-sub-item:after,
    .aside-body li.has-sub-item:after,
    .settings-sidebar .theme-bar button.active,
    .settings-sidebar .dir-bar button.active,
    .product__top::after,
    .store-product__top::after,
    .store-product h6,
    .product-share-icons ul {
        -webkit-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
    }
    
    .list-inline,
    .list-socials--white,
    .list-socials,
    .list-info,
    .option-select-btn,
    .list-rating,
    .widget ul,
    .sub-menu,
    .aside-body .nav li ul,
    .wizard .steps ul,
    .wizard .actions ul,
    .product-share-icons ul,
    .cart-step-list {
        padding: 0;
        margin: 0;
        list-style: none;
    }
    
    .list-inline li {
        display: inline-block;
    }
    
    .list-inline-dot {
        --padding-inline: 0.7rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
    
    .list-inline-dot > li {
        padding-inline: var(--padding-inline);
    }
    
    .list-inline-dot > li:last-child {
        -webkit-padding-end: 0rem;
        padding-inline-end: 0rem;
    }
    
    .list-inline-dot > li:first-child {
        -webkit-padding-start: 0rem;
        padding-inline-start: 0rem;
    }
    
    .list-inline-dot > li:not(:last-child) {
        position: relative;
    }
    
    .list-inline-dot > li:not(:last-child):after {
        position: absolute;
        inset-block-start: 50%;
        inset-inline-end: -0.125rem;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        inline-size: 0.25rem;
        block-size: 0.25rem;
        background-color: var(--bg-badge);
        content: "";
    }
    
    .list-separator {
        --padding-inline: 1.25rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
    
    .list-separator > li {
        padding-inline: var(--padding-inline);
    }
    
    .list-separator > li:last-child {
        -webkit-padding-end: 0rem;
        padding-inline-end: 0rem;
    }
    
    .list-separator > li:not(:last-child) {
        position: relative;
    }
    
    .list-separator > li:not(:last-child):after {
        position: absolute;
        inset-block-start: 50%;
        inset-inline-end: 0rem;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        inline-size: 0.0625rem;
        block-size: 1.375rem;
        background-color: rgba(185, 185, 185, 0.5);
        content: "";
    }
    
    @media only screen and (max-width: 1199px) {
        .list-separator > li.login-register {
            --padding-inline: 0;
        }
        .list-separator > li.login-register:after {
            display: none;
        }
    }
    
    .list-socials--white,
    .list-socials {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    
    .list-socials--white a {
        color: var(--absolute-white);
    }
    
    .list-socials--white a:hover {
        opacity: 0.8;
    }
    
    .list-info {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 0.875rem;
    }
    
    .list-info li {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 0.625rem;
    }
    
    .offer-text--vertical {
        border-radius: 0 !important;
    }
    
    .list-inline-dot > li:not(:last-child):after,
    .countdown-count,
    .btn-close.outside,
    .count,
    .btn-circle,
    .eye-btn,
    .swiper-button-next,
    .swiper-button-prev,
    .back-to-top,
    #timeline .state ul li .badge,
    .wizard .steps .number,
    .product__actions a,
    .store-product__action,
    .cart-step-list li span {
        border-radius: 100% !important;
    }
    
    .rounded-10,
    .upload-file__img img {
        border-radius: 0.625rem !important;
    }
    
    .filter-badge,
    .search-bar,
    .product__discount-badge {
        border-radius: 6.25rem !important;
    }
    
    .styled-title::after,
    .brand-item::after,
    .nav--tabs button::after,
    .nav--tabs a::after,
    .product__top::after,
    .store-product__top::after {
        position: absolute;
        content: "";
        inline-size: 100%;
        block-size: 100%;
        inset-block-start: 0rem;
        inset-inline-start: 0rem;
    }
    
    .ov-hidden {
        overflow: hidden !important;
    }
    
    .ovx-hidden {
        overflow-x: hidden !important;
    }
    
    .title-font {
        font-family: var(--title-font) !important;
    }
    
    .option-select-btn label input:checked ~ *,
    .range-slider input[type="range"]::-webkit-slider-thumb,
    .range-slider input[type="range"]::-ms-thumb,
    .range-slider input[type="range"]::-moz-range-thumb,
    .box-shadow,
    .header,
    .sub-menu {
        -webkit-box-shadow: var(--box-shadow) !important;
        box-shadow: var(--box-shadow) !important;
    }
    
    .range-slider input::-moz-range-track,
    .range-slider input:last-of-type::-moz-range-track,
    .range-slider input[type="range"]::-moz-focus-outer,
    .range-slider input[type="range"]::-webkit-slider-runnable-track,
    .range-slider input[type="range"]::-ms-track,
    .range-slider input[type="range"]::-moz-range-track {
        border: none !important;
    }
    
    .dropdown-menu--static {
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
    }
    
    .overlay {
        --bg-color: 0, 0, 0;
        --opacity: 0.9;
        position: relative;
        z-index: 1;
    }
    
    .overlay:after {
        inline-size: 100%;
        block-size: 100%;
        inset-inline-start: 0;
        inset-block-start: 0;
        position: absolute;
        z-index: -1;
        content: "";
        background-color: rgba(var(--bg-color), var(--opacity));
    }
    
    .img-fit,
    .img-fit-contain {
        inline-size: 100%;
        block-size: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        display: block;
    }
    
    .swiper-slide img {
        inline-size: 100%;
        block-size: auto;
        -o-object-fit: cover;
        object-fit: cover;
        display: block;
    }
    
    .quantity__qty,
    .quantity__minus,
    .quantity__plus,
    .btn,
    .swiper-slide,
    .flex-center,
    .cart-step-list li.current span,
    .cart-step-list li.done span {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
    
    .countdown-count,
    .btn-close.outside,
    .btn-circle,
    .eye-btn,
    .swiper-button-next,
    .swiper-button-prev,
    .grid-center,
    .back-to-top,
    .wizard .steps .number,
    .upload-file .temp-img-box,
    .product__power-badge,
    .product__actions a,
    .store-product__action {
        display: grid;
        place-items: center;
    }
    
    .flex-between-gap-3 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        gap: 1rem;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    
    .flex-middle-gap-2 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 0.5rem;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    
    .flex-middle-gap-3 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 1rem;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    
    .flex-end {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    
    .flex-middle {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    
    .quantity__qty,
    .quantity__minus,
    .quantity__plus,
    .btn,
    .swiper-slide,
    .flex-center,
    .cart-step-list li.current span,
    .cart-step-list li.done span {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    
    /* ************************
       02.1: Helper Classes
       ********************* */
    /* Option Select */
    .option-select-btn {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    
    .option-select-btn label {
        margin: 0;
    }
    
    .option-select-btn label > * {
        background-color: var(--bs-light);
        border-radius: 0.25rem;
        text-transform: capitalize;
        padding: 0.25rem 0.5rem;
        cursor: pointer;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        font-weight: var(--semi-bold);
        font-size: 0.75rem;
    }
    
    .option-select-btn label > *.payment-method {
        min-inline-size: 11.5rem;
        min-block-size: 3.875rem;
        background-color: var(--bs-body-bg);
        border-radius: 0.25rem;
        padding: 1rem 1.25rem;
    }
    
    .option-select-btn label input:checked ~ * {
        background-color: var(--bs-primary);
        color: var(--absolute-white);
    }
    
    .option-select-btn.weight-style--two label > span {
        padding: 0.625rem 1.125rem;
        position: relative;
    }
    
    .option-select-btn.weight-style--two label .item-count {
        position: absolute;
        inset-inline-end: 0.0625rem;
        inset-block-start: 0.0625rem;
        inline-size: 1.5rem;
        z-index: 1;
        block-size: 1.5rem;
        color: var(--bs-white);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        -webkit-padding-end: 0.25rem;
        padding-inline-end: 0.25rem;
        font-weight: var(--bold);
    }
    
    .option-select-btn.weight-style--two label .item-count::after {
        inline-size: 0;
        block-size: 0;
        -webkit-border-before: 1.5rem solid var(--bs-primary);
        border-block-start: 1.5rem solid var(--bs-primary);
        -webkit-border-start: 1.5rem solid transparent;
        border-inline-start: 1.5rem solid transparent;
        content: "";
        inset-inline-start: -0.0625rem;
        inset-block-start: 0.0625rem;
        position: absolute;
        z-index: -1;
    }
    
    .option-select-btn.weight-style--two label input:checked ~ span .item-count {
        color: var(--bs-primary);
    }
    
    .option-select-btn.weight-style--two
        label
        input:checked
        ~ span
        .item-count::after {
        -webkit-border-before: 1.5rem solid var(--bs-white);
        border-block-start: 1.5rem solid var(--bs-white);
    }
    
    .option-select-btn.style--two li {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 0.625rem;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
    
    .option-select-btn.style--two label > span {
        background-color: transparent;
        border-radius: 50rem;
        padding: 0.125rem;
        border: 1px solid #ced4da;
        inline-size: 1.875rem;
        block-size: 1.875rem;
    }
    
    .option-select-btn.style--two input:checked ~ span {
        background-color: var(--bs-primary);
        color: var(--absolute-white);
        border-color: var(--bs-primary);
    }
    
    .option-select-btn.product-view-option label {
        margin: 0;
    }
    
    .option-select-btn.product-view-option label > * {
        background-color: transparent;
        padding: 0rem;
        font-size: 0.875rem;
        opacity: 0.6;
    }
    
    .option-select-btn.product-view-option label input:checked ~ * {
        background-color: transparent;
        -webkit-box-shadow: none;
        box-shadow: none;
        color: var(--title-color);
        opacity: 1;
    }
    
    /* common List */
    .search-box .select-wrap {
        border-start-start-radius: 0.25rem;
        border-end-start-radius: 0.25rem;
    }
    
    .search-box button {
        border-radius: 0.25rem;
        border-start-start-radius: 0rem;
        border-end-start-radius: 0rem;
    }
    
    @media (min-width: 479px) {
        .search-box input {
            inline-size: 25rem;
        }
    }
    
    .border-primary-light {
        border: 1px solid rgba(52, 117, 84, 0.3) !important;
    }
    
    .custom-checkbox {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 0.375rem;
        -webkit-margin-after: 0rem;
        margin-block-end: 0rem;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    .common-nav li {
        padding-block: 0.5rem;
    }
    
    .common-nav ul {
        list-style: none;
        padding-block: 0.75rem;
        display: none;
    }
    
    .common-nav ul li.has-sub-item {
        -webkit-padding-after: 0rem;
        padding-block-end: 0rem;
    }
    
    .common-nav ul ul {
        -webkit-padding-after: 0rem;
        padding-block-end: 0rem;
    }
    
    .countdown-count {
        --size: 3.125rem;
        inline-size: var(--size);
        block-size: var(--size);
        background-color: rgba(var(--bs-primary-rgb), 0.1);
        font-weight: var(--medium);
        font-size: 1rem;
        color: var(--title-color);
    }
    
    @media (max-width: 479px) {
        .countdown-count {
            --size: 2.8rem;
        }
    }
    
    .countdown-text {
        color: var(--bs-body-color);
    }
    
    .flexible-grid {
        --width: 18.5rem;
        display: grid;
        grid-template-columns: var(--width) 1fr;
    }
    
    @media only screen and (max-width: 991px) {
        .flexible-grid.lg-down-1 {
            grid-template-columns: 1fr;
        }
    }
    
    @media only screen and (max-width: 767px) {
        .flexible-grid.md-down-1 {
            grid-template-columns: 1fr;
        }
    }
    
    @media only screen and (max-width: 479px) {
        .flexible-grid.sm-down-1 {
            grid-template-columns: 1fr;
        }
    }
    
    .styled-title {
        -webkit-padding-after: 0.625rem;
        padding-block-end: 0.625rem;
        position: relative;
    }
    
    .styled-title::after {
        block-size: 0.125rem;
        background-color: var(--bs-primary);
        inset-block-start: auto;
        inset-block-end: 0rem;
    }
    
    a .product__old-price {
        color: #6c757d !important;
    }
    
    .index-n1 {
        z-index: -1;
    }
    
    /* Product Quantity */
    .quantity {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        font-size: 0.875rem;
        white-space: nowrap;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 0.25rem;
    }
    
    .quantity__qty,
    .quantity__minus,
    .quantity__plus {
        --size: 1.5rem;
        inline-size: var(--size);
        block-size: var(--size);
        line-height: calc(var(--size) - 2px);
    }
    
    .quantity__minus,
    .quantity__plus {
        cursor: pointer;
        border: 0.03125rem solid;
        border-color: rgba(52, 117, 84, 0.5);
        color: var(--bs-primary);
        border-radius: 0.25rem;
    }
    
    .quantity__qty {
        border-right: none;
        border-radius: 3px 0 0 3px;
        color: var(--title-color);
        text-align: center;
        border: none;
        background-color: transparent;
    }
    
    .quantity--style-two {
        border: 0.03125rem solid;
        border-color: rgba(52, 117, 84, 0.5);
        border-radius: 0.25rem;
    }
    
    .quantity--style-two .quantity__minus,
    .quantity--style-two .quantity__plus {
        border: none;
        font-size: 1rem;
    }
    
    .app-bar {
        position: fixed;
        inset-block-end: 0rem;
        inset-inline-start: 0rem;
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
        background-color: var(--bs-white);
        inline-size: 100%;
        z-index: 999;
    }
    
    .app-bar a.collapsed {
        color: var(--bs-primary);
    }
    
    .app-bar .dropdown-menu,
    .app-bar .sub-menu {
        position: absolute;
        inset-block-end: 100%;
        inset-inline-start: 0rem;
    }
    
    .scrollY-60 {
        max-block-size: 60vh;
        overscroll-behavior-y: contain;
        overflow-y: auto;
    }
    
    .btn-close.outside {
        --size: 1.25rem;
        inline-size: var(--size);
        block-size: var(--size);
        position: absolute;
        inset-block-start: -1.875rem;
        inset-inline-end: -1.875rem;
        background-color: var(--absolute-white);
        font-size: 0.625rem;
        z-index: 9;
    }
    
    @media only screen and (max-width: 991px) {
        .btn-close.outside {
            inset-block-start: 1rem;
            inset-inline-end: 1rem;
        }
    }
    
    .cookies {
        position: fixed;
        z-index: 999;
        inset-block-end: 0rem;
        inset-inline-start: 0rem;
        background-color: rgba(var(--absolute-dark-rgb), 0.9);
        inline-size: 100%;
        opacity: 0;
        -webkit-transform: translateY(100%);
        -ms-transform: translateY(100%);
        transform: translateY(100%);
    }
    
    .cookies p {
        line-height: 1.7;
    }
    
    .cookies.active {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
    
    .filter-badge {
        background-color: var(--primary-light);
        padding: 0.3125rem 0.625rem;
        line-height: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 0.3125rem;
        font-size: 0.75rem;
        font-weight: var(--semi-bold);
        color: var(--bs-primary);
    }
    
    .filter-badge i {
        font-size: 1.125rem;
        cursor: pointer;
    }
    
    .brand-item {
        position: relative;
        z-index: 1;
        padding: 1rem;
        min-block-size: 9.375rem;
    }
    
    .brand-item .hover__action {
        position: absolute;
        z-index: 1;
        text-align: center;
        opacity: 0;
        -webkit-transform: translateY(0.8rem);
        -ms-transform: translateY(0.8rem);
        transform: translateY(0.8rem);
    }
    
    .brand-item::after {
        border-radius: 0.25rem;
        background-color: rgba(var(--title-color-rgb), 0.6);
        opacity: 0;
    }
    
    .brand-item:hover::after {
        opacity: 1;
    }
    
    .brand-item:hover .hover__action {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
    
    /* Rating Review */
    .rating-review__title {
        font-weight: var(--medium);
        font-size: 2.1875rem;
        -webkit-margin-after: 0.25rem;
        margin-block-end: 0.25rem;
    }
    
    .rating-review__out-of {
        font-size: 3.125rem;
        -webkit-margin-end: 0.3125rem;
        margin-inline-end: 0.3125rem;
        color: var(--bs-primary);
    }
    
    .rating-review__info {
        font-weight: var(--semi-bold);
    }
    
    .rating i {
        color: var(--text-primary);
    }
    
    .list-rating {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    
    .list-rating li {
        display: grid;
        grid-template-columns: 3.125rem 1fr;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 2.5rem;
    }
    
    .list-rating .review-count {
        text-align: end;
    }
    
    .h-45 {
        block-size: 2.8125rem;
    }
    
    .mn-w200 {
        min-inline-size: 12.5rem;
    }
    
    .mn-w {
        --width: 17rem;
        min-inline-size: var(--width);
    }
    
    .profile-menu {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    
    .profile-menu li a {
        padding: 0.625rem;
        border-radius: 0.25rem;
        -webkit-border-start: 0.1875rem solid transparent;
        border-inline-start: 0.1875rem solid transparent;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 0.625rem;
    }
    
    .profile-menu li.active a {
        background-color: var(--bs-light);
        border-color: var(--bs-primary);
        font-weight: var(--bold);
        color: var(--bs-primary);
    }
    
    .offer-bar {
        color: var(--bs-primary);
    }
    
    [theme="dark"] .offer-bar {
        color: var(--absolute-white);
    }
    
    .offer-bar-close {
        -webkit-padding-start: 1.875rem;
        padding-inline-start: 1.875rem;
        cursor: pointer;
    }
    
    @media only screen and (max-width: 575px) {
        .offer-bar-close {
            -webkit-padding-start: 0.625rem;
            padding-inline-start: 0.625rem;
        }
    }
    
    @media only screen and (max-width: 575px) {
        .top-offer-text {
            font-size: 0.625rem;
        }
    }
    
    @media only screen and (max-width: 991px) {
        .mobile-card {
            padding: 1rem;
            border: 1px solid var(--bs-border-color);
            border-radius: 0.25rem;
        }
    }
    
    .nav-nowrap {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    .custom-ps-3 {
        -webkit-padding-start: 1rem !important;
        padding-inline-start: 1rem !important;
    }
    
    .custom-pe-3 {
        -webkit-padding-end: 1rem !important;
        padding-inline-end: 1rem !important;
    }
    
    .custom-height {
        --height: 16.75rem;
        height: var(--height);
    }
    
    .club-card:hover .shop-name {
        text-decoration: underline;
    }
    
    .shop-name-wrap {
        position: relative;
    }
    
    .shop-name-wrap .shop-info {
        position: absolute;
        inset-inline-end: 0;
        inset-block-end: calc(100% + 0.5rem);
        z-index: 2;
        opacity: 0;
        visibility: hidden;
    }
    
    .shop-name-wrap:hover .shop-info {
        opacity: 1;
        visibility: visible;
    }
    
    .shiiping-method-btn {
        white-space: nowrap;
    }
    
    @media (max-width: 420px) {
        .shiiping-method-btn {
            font-size: 0.75rem !important;
        }
    }
    
    .privacy-policy-content h1,
    .privacy-policy-content h2,
    .privacy-policy-content h3,
    .privacy-policy-content h4,
    .privacy-policy-content h5,
    .privacy-policy-content h6 {
        -webkit-margin-after: 1rem;
        margin-block-end: 1rem;
    }
    
    .privacy-policy-content p {
        -webkit-margin-after: 1.875rem;
        margin-block-end: 1.875rem;
    }
    
    .otp-form .otp-field {
        --size: 3.75rem;
        inline-size: var(--size);
        block-size: var(--size);
        border: none;
        border-bottom: 0.0625rem solid var(--bs-primary);
        text-align: center;
        background-color: transparent;
    }
    
    [theme="dark"] .otp-form .otp-field {
        color: var(--absolute-white);
    }
    
    .otp-form .otp-field.style--two {
        background-color: var(--bs-light);
        border: 0.0625rem solid transparent;
        border-radius: 0.3125rem;
    }
    
    @media only screen and (max-width: 479px) {
        .otp-form .otp-field {
            --size: 2.5rem;
        }
    }
    
    .otp-form .otp-field:focus {
        border-color: var(--title-color);
    }
    
    @media only screen and (max-width: 991px) {
        .filter-toggle-aside {
            position: fixed;
            inset-inline-start: 0;
            inset-block-start: 0;
            z-index: 1055;
            -webkit-transform: translateX(-100%);
            -ms-transform: translateX(-100%);
            transform: translateX(-100%);
            -webkit-transition: -webkit-transform 300ms ease-in-out;
            transition: -webkit-transform 300ms ease-in-out;
            -o-transition: transform 300ms ease-in-out;
            transition: transform 300ms ease-in-out;
            transition: transform 300ms ease-in-out,
                -webkit-transform 300ms ease-in-out;
            inline-size: 18.75rem;
            border-radius: 0;
        }
    
        [dir="rtl"] .filter-toggle-aside {
            -webkit-transform: translateX(100%);
            -ms-transform: translateX(100%);
            transform: translateX(100%);
        }
    
        .filter-toggle-aside.active {
            -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
            transform: translateX(0);
        }
        .filter-toggle-aside.active .card-body {
            --height: calc(100vh - 38.8px);
        }
    }
    
    /* ************************
       02.2: Animations
       ********************* */
    .animated {
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: backwards;
        animation-fill-mode: backwards;
    }
    
    @-webkit-keyframes fadeInDown {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(0, -2.5rem, 0);
            transform: translate3d(0, -2.5rem, 0);
        }
        to {
            opacity: 1;
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }
    }
    
    @keyframes fadeInDown {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(0, -2.5rem, 0);
            transform: translate3d(0, -2.5rem, 0);
        }
        to {
            opacity: 1;
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }
    }
    
    .fadeInDown {
        -webkit-animation-name: fadeInDown;
        animation-name: fadeInDown;
    }
    
    /* ************************
       02.3: Social List
       ********************* */
    /* ************************
       03.4: Inputs
       ********************* */
    /* form control */
    .form-select,
    .form-control {
        background-color: var(--bs-white);
        color: var(--title-color);
        block-size: 2.8125rem;
        font-size: 0.875rem;
    }
    
    [theme="dark"] .form-control:disabled {
        background-color: #293036;
    }
    
    [theme="dark"] .form-select,
    [theme="dark"] .form-control {
        border-color: #505050;
    }
    
    .form-select::file-selector-button,
    .form-control::file-selector-button {
        block-size: 2.6875rem;
    }
    
    [theme="dark"] .form-select::file-selector-button,
    [theme="dark"] .form-control::file-selector-button {
        background-color: #959595;
    }
    
    .form-select:focus,
    .form-select:active,
    .form-control:focus,
    .form-control:active {
        border-color: var(--input-border-color-active);
        -webkit-box-shadow: none;
        box-shadow: none;
        background-color: var(--bs-white);
        color: var(--title-color);
    }
    
    .form-select--sm,
    .form-control--sm {
        block-size: 1.875rem;
        font-size: 0.75rem;
    }
    
    [theme="dark"] .form-select {
        background-blend-mode: screen;
    }
    
    textarea.form-control {
        block-size: auto;
    }
    
    /* Change the white to any color */
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 1.875rem var(--bs-white) inset !important;
        -webkit-text-fill-color: var(--title-color) !important;
    }
    
    .range-slider {
        position: relative;
        inline-size: 100%;
        block-size: 2.1875rem;
        text-align: center;
        -webkit-margin-before: 1rem;
        margin-block-start: 1rem;
    }
    
    .range-slider input {
        pointer-events: none;
        position: absolute;
        overflow: hidden;
        inset-inline-start: 0;
        inset-block-start: 0.9375rem;
        inline-size: 100%;
        block-size: 1.125rem;
        margin: 0;
        padding: 0;
    }
    
    .range-slider input::-webkit-slider-thumb {
        pointer-events: all;
        position: relative;
        z-index: 1;
    }
    
    .range-slider input::-moz-range-thumb {
        pointer-events: all;
        position: relative;
        z-index: 10;
        -moz-appearance: none;
        inline-size: 0.5625rem;
    }
    
    .range-slider input::-moz-range-track {
        position: relative;
        z-index: -1;
        background-color: black;
    }
    
    .range-slider input:last-of-type::-moz-range-track {
        -moz-appearance: none;
        background: none transparent;
    }
    
    .range-slider input[type="range"] {
        -webkit-appearance: none;
        background: none;
    }
    
    .range-slider input[type="range"]::-webkit-slider-runnable-track {
        block-size: 0.3125rem;
        border-radius: 0.25rem;
        background: transparent;
    }
    
    .range-slider input[type="range"]::-ms-track {
        block-size: 0.3125rem;
        background: transparent;
        border-radius: 0.25rem;
    }
    
    .range-slider input[type="range"]::-moz-range-track {
        block-size: 0.3125rem;
        background: transparent;
        border-radius: 0.25rem;
    }
    
    .range-slider input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        border: 0.125rem solid var(--bg-badge);
        block-size: 1rem;
        inline-size: 1rem;
        border-radius: 50%;
        background-color: var(--bs-white);
        -webkit-margin-before: -0.3125rem;
        margin-block-start: -0.3125rem;
        position: relative;
        z-index: 10000;
    }
    
    .range-slider input[type="range"]::-ms-thumb {
        -webkit-appearance: none;
        border: 0.125rem solid var(--bg-badge);
        block-size: 1rem;
        inline-size: 1rem;
        border-radius: 50%;
        background-color: var(--bs-white);
        margin-block-start: -0.3125rem;
        position: relative;
        z-index: 10000;
    }
    
    .range-slider input[type="range"]::-moz-range-thumb {
        -webkit-appearance: none;
        border: 0.125rem solid var(--bg-badge);
        block-size: 1rem;
        inline-size: 1rem;
        border-radius: 50%;
        background-color: var(--bs-white);
        margin-block-start: -0.3125rem;
        position: relative;
        z-index: 10000;
    }
    
    .range-slider input[type="range"]:focus {
        outline: none;
    }
    
    .range-slider .full-range,
    .range-slider .incl-range {
        inline-size: 100%;
        block-size: 0.3125rem;
        inset-inline-start: 0;
        inset-block-start: 1.3125rem;
        position: absolute;
        background: var(--bg-badge);
    }
    
    .range-slider .incl-range {
        background: var(--bs-primary);
    }
    
    /* ************************
       02.5: Buttons
       ********************* */
    .btn {
        -webkit-column-gap: 0.375rem;
        -moz-column-gap: 0.375rem;
        column-gap: 0.375rem;
        font-weight: var(--medium);
        text-transform: capitalize;
        --bs-btn-font-size: 0.75rem;
        --bs-btn-border-radius: 0.7rem;
        --bs-btn-padding-x: 1.5rem;
        --bs-btn-padding-y: 0.5rem;
    }
    
    .btn:hover,
    .btn:focus {
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
    }
    
    .btn:hover svg path,
    .btn:focus svg path {
        fill: var(--absolute-white);
    }
    
    .btn-primary {
        --bs-btn-bg: var(--bs-primary);
        --bs-btn-border-color: var(--bs-primary);
        --bs-btn-hover-bg: rgba(var(--bs-primary-rgb), 0.8);
        --bs-btn-hover-border-color: rgba(var(--bs-primary-rgb), 0.8);
        --bs-btn-active-bg: rgba(var(--bs-primary-rgb), 0.8);
        --bs-btn-active-border-color: rgba(var(--bs-primary-rgb), 0.8);
        --bs-btn-disabled-bg: var(--bs-primary);
        --bs-btn-disabled-border-color: var(--bs-primary);
    }
    
    .btn-secondary {
        --bs-btn-color: #293231;
        --bs-btn-bg: #d3d4d5;
        --bs-btn-border-color: #d3d4d5;
        --bs-btn-disabled-bg: #d3d4d5;
        --bs-btn-disabled-border-color: #d3d4d5;
        --bs-btn-hover-bg: #bec0c2;
        --bs-btn-hover-border-color: #bec0c2;
        --bs-btn-hover-color: var(--bs-btn-color);
    }
    
    [theme="dark"] .btn-secondary {
        --bs-btn-color: #fff;
        --bs-btn-bg: #676f75;
        --bs-btn-border-color: #676f75;
        --bs-btn-disabled-bg: #676f75;
        --bs-btn-disabled-border-color: #676f75;
    }
    
    .btn-outline-primary {
        --bs-btn-color: var(--bs-primary);
        --bs-btn-border-color: var(--bs-primary);
        --bs-btn-hover-bg: var(--bs-primary);
        --bs-btn-hover-border-color: var(--bs-primary);
        --bs-btn-active-bg: var(--bs-primary);
        --bs-btn-active-border-color: var(--bs-primary);
        --bs-btn-disabled-color: var(--bs-primary);
        --bs-btn-disabled-border-color: var(--bs-primary);
    }
    
    .btn-outline-secondary {
        --bs-btn-color: var(--title-color);
    }
    
    .btn.btn-secondary {
        --bs-btn-color: #ffffffff;
        --bs-btn-bg: var(--bs-secondary);
        --bs-btn-border-color: var(--bs-secondary);
        --bs-btn-disabled-bg: var(--bs-secondary);
        --bs-btn-disabled-border-color: rgba(var(--bs-secondary-rgb), 0.8);
        --bs-btn-hover-bg: rgba(var(--bs-secondary-rgb), 0.8);
        --bs-btn-hover-border-color: rgba(var(--bs-secondary-rgb), 0.8);
    }
    
    /*[theme="dark"] .btn.btn-secondary {*/
    /*    --bs-btn-bg: var(--bs-secondary);*/
    /*    --bs-btn-border-color: var(--bs-secondary);*/
    /*    --bs-btn-disabled-bg: var(--bs-secondary);*/
    /*    --bs-btn-disabled-border-color: #454545;*/
    /*    --bs-btn-hover-bg: #555;*/
    /*    --bs-btn-hover-border-color: #555;*/
    /*}*/
    
    .btn-block {
        inline-size: 100%;
    }
    
    .btn-link {
        text-decoration: none;
        font-weight: var(--semi-bold);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 0.375rem;
        border: none !important;
        background-color: transparent;
        padding: 0rem;
    }
    
    .btn-link:hover {
        color: var(--bs-primary);
        gap: 0.75rem;
    }
    
    [dir="rtl"] .btn-link i {
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    
    .count {
        position: absolute;
        inset-inline-end: -0.625rem;
        inset-block-start: -0.5rem;
        background-color: var(--bs-primary);
        color: var(--absolute-white);
        font-size: 0.625rem;
        inline-size: 1.0625rem;
        block-size: 1.0625rem;
        display: grid;
        place-items: center;
        border: 1px solid var(--bs-white);
    }
    
    .btn-circle,
    .eye-btn {
        --size: 1.8rem;
        inline-size: var(--size);
        block-size: var(--size);
        border: 0.0625rem solid var(--bs-white);
        color: var(--bs-white);
        background-color: rgba(var(--bs-white-rgb), 0.4);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        z-index: 2;
        line-height: 1;
    }
    
    .btn-circle {
        background-color: var(--bs-white);
        color: var(--bs-primary);
        border-color: var(--bs-primary);
        cursor: pointer;
    }
    
    .btn-circle:hover {
        background-color: var(--bs-primary);
        color: var(--absolute-white);
    }
    
    .btn-action {
        inline-size: 1.625rem;
        min-inline-size: 1.625rem;
        block-size: 1.625rem;
        border-radius: 0.3125rem;
        padding: 0.3125rem;
        display: grid;
        place-items: center;
        line-height: 1;
    }
    
    /* ************************
       02.6: Widget
       ********************* */
    .widget:not(:last-child) {
        -webkit-margin-after: 2.5rem;
        margin-block-end: 2.5rem;
    }
    
    .widget__title {
        -webkit-margin-after: 1.25rem;
        margin-block-end: 1.25rem;
    }
    
    .widget.absolute-white * {
        color: var(--absolute-white);
    }
    
    .widget.absolute-white a:hover {
        opacity: 0.8;
    }
    
    /* ************************
       02.7: Pagination
       ********************* */
    .pagination {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        gap: 0.625rem;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    
    .pagination li:first-child > a,
    .pagination li:first-child > span,
    .pagination li:last-child > a,
    .pagination li:last-child > span {
        border: 0.5px solid var(--bs-border-color);
        display: grid;
        place-items: center;
        font-size: 1.25rem;
    }
    
    .pagination li > a,
    .pagination li > span {
        inline-size: 2rem;
        block-size: 2rem;
        line-height: 1;
        position: relative;
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        font-size: 0.75rem;
        background-color: var(--bs-white);
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
        border-radius: 1rem;
    }
    
    .pagination li.active > a,
    .pagination li.active > span {
        background-color: var(--bs-primary);
        color: var(--absolute-white);
    }
    
    /* ************************
    02.8: Customize Bootstrap CSS
    ********************* */
    .dropdown-menu,
    .sub-menu {
        --bs-dropdown-border-width: 0;
        --bs-dropdown-bg: var(--bs-white);
        --bs-dropdown-min-width: 15rem;
        --bs-dropdown-font-size: 0.875rem;
        --bs-dropdown-color: var(--title-color);
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
        text-align: start;
    }
    
    .dropdown-menu li,
    .sub-menu li {
        padding: 0.625rem 1.25rem;
        position: relative;
        font-weight: var(--meidum);
    }
    
    .dropdown-menu li.menu-item-has-children:after,
    .sub-menu li.menu-item-has-children:after {
        position: absolute;
        font-family: bootstrap-icons !important;
        content: "\F285";
        inset-inline-end: 1rem;
        font-size: 0.75rem;
    }
    
    [dir="rtl"] .dropdown-menu li.menu-item-has-children:after,
    [dir="rtl"] .sub-menu li.menu-item-has-children:after {
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    
    .dropdown-menu li:not(:last-child),
    .sub-menu li:not(:last-child) {
        border-bottom: 1px solid var(--bs-border-color);
    }
    
    .dropdown-menu li.selected > a,
    .sub-menu li.selected > a {
        color: var(--bs-primary);
        font-weight: var(--bold);
    }
    
    .dropdown-menu li ul,
    .sub-menu li ul {
        position: absolute;
        inset-block-start: 0;
        background-color: var(--bs-white);
        inset-inline-start: 100%;
        list-style: none;
        inline-size: 15rem;
        -webkit-padding-start: 0;
        padding-inline-start: 0;
        -webkit-transform: translate3d(30px, 0, 0);
        transform: translate3d(30px, 0, 0);
        -webkit-transition: -webkit-transform 0.3s ease-out;
        transition: -webkit-transform 0.3s ease-out;
        -o-transition: transform 0.3s ease-out;
        transition: transform 0.3s ease-out;
        transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
        opacity: 0;
        visibility: hidden;
    }
    
    .dropdown-menu li:hover > ul,
    .sub-menu li:hover > ul {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
        visibility: visible;
    }
    
    .dropdown-menu--static {
        display: block !important;
        position: static;
    }
    
    .dropdown-menu--static > li {
        -webkit-padding-start: 0rem;
        padding-inline-start: 0rem;
        z-index: 2;
    }
    
    .nav--tabs button,
    .nav--tabs a {
        border: 0;
        background-color: transparent;
        padding: 0rem;
        -webkit-padding-after: 0.375rem;
        padding-block-end: 0.375rem;
        font-weight: var(--medium);
        position: relative;
    }
    
    .nav--tabs button::after,
    .nav--tabs a::after {
        block-size: 0.125rem;
        background-color: var(--bs-primary);
        inset-block-start: auto;
        inset-block-end: 0rem;
        -webkit-transform: scaleX(0);
        -ms-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        transform-origin: 0 0;
    }
    
    .nav--tabs button.active,
    .nav--tabs a.active {
        color: var(--bs-primary);
    }
    
    .nav--tabs button.active::after,
    .nav--tabs a.active::after {
        -webkit-transform: scaleX(1);
        -ms-transform: scaleX(1);
        transform: scaleX(1);
    }
    
    .compare--table th,
    .compare--table tr {
        border-width: 0;
    }
    
    .compare--table td {
        border-width: 1px;
    }
    
    /* Swiper */
    .swiper {
        inline-size: 100%;
        block-size: 100%;
    }
    
    .swiper .product {
        inline-size: 100%;
    }
    
    .swiper-container {
        overflow: hidden;
    }
    
    /* .swiper-slide {
        background-color: var(--bs-white);
    } */
    
    .quickviewSliderThumb .swiper-slide,
    .quickviewSliderThumb2 .swiper-slide {
        cursor: pointer;
    }
    
    [dir="rtl"] .swiper-nav {
        direction: ltr;
    }
    
    .swiper-button-next,
    .swiper-button-prev {
        --size: 2.1875rem;
        inline-size: var(--size);
        block-size: var(--size);
        background-color: rgba(var(--bs-primary-rgb), 0.8);
        color: var(--absolute-white);
        -webkit-margin-before: 0;
        margin-block-start: 0;
        padding: 0.3125rem;
        position: absolute;
        z-index: 2;
        inset-block-start: 50%;
    }
    
    .swiper-button-next:not(.position-static),
    .swiper-button-prev:not(.position-static) {
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    
    .swiper-button-next:after,
    .swiper-button-prev:after {
        font-size: calc(var(--size) / 2.5);
    }
    
    .swiper-button-next:hover,
    .swiper-button-prev:hover {
        background-color: rgba(var(--bs-primary-rgb), 1);
    }
    
    @media only screen and (max-width: 767px) {
        .swiper-button-next,
        .swiper-button-prev {
            --size: 1.5rem;
        }
    }
    
    .swiper-button-next {
        inset-inline-end: 0rem;
        inset-inline-start: auto;
    }
    
    .swiper-button-prev {
        inset-inline-start: 0rem;
        inset-inline-end: auto;
    }
    
    .quickviewSliderThumb .swiper-button-next,
    .quickviewSliderThumb .swiper-button-prev {
        -webkit-transform: scale(0.3) translateY(-50%);
        -ms-transform: scale(0.3) translateY(-50%);
        transform: scale(0.3) translateY(-50%);
        opacity: 0;
    }
    
    .quickviewSliderThumb:hover .swiper-button-next,
    .quickviewSliderThumb:hover .swiper-button-prev {
        -webkit-transform: scale(1) translateY(-50%);
        -ms-transform: scale(1) translateY(-50%);
        transform: scale(1) translateY(-50%);
        opacity: 1;
    }
    
    .modal {
        --bs-modal-bg: var(--bs-white);
    }
    
    .table {
        --bs-table-color: var(--title-color);
        --bs-table-striped-bg: rgba(248, 248, 250, 0.5);
    }
    
    .table-striped {
        --bs-table-border-color: rgba(248, 248, 250, 0.5);
    }
    
    [theme="dark"] .table-striped {
        --bs-table-border-color: rgba(52, 52, 52, 0.5);
        --bs-table-striped-bg: rgba(52, 52, 52, 0.5);
    }
    
    .table-light {
        --bs-table-color: var(--title-color);
        --bs-table-bg: var(--bs-light);
    }
    
    .table > :not(caption) > * > * {
        padding: 0.875rem 0.875rem;
    }
    
    .progress {
        --bs-progress-height: 0.5rem;
        --bs-progress-bg: var(--bg-badge);
        --bs-progress-bar-bg: var(--bs-primary);
    }
    
    .list-unstyled {
        -webkit-padding-start: 0 !important;
        padding-inline-start: 0 !important;
    }
    
    .text-start {
        text-align: start !important;
    }
    
    .text-end {
        text-align: end !important;
    }
    
    .border-grey {
        --bs-grey-rgb: 233, 233, 233;
        --bs-border-opacity: 1;
        border-color: rgba(var(--bs-grey-rgb), var(--bs-border-opacity)) !important;
    }
    
    [theme="dark"] .border-grey {
        --bs-grey-rgb: 45, 45, 45;
    }
    
    [theme="dark"] .text-muted {
        --bs-text-opacity: 1;
        color: #a7aaae !important;
    }
    
    .breadcrumb {
        --bs-breadcrumb-item-active-color: var(--title-color);
    }
    
    .breadcrumb-item.active {
        font-weight: 800;
    }
    
    [dir="rtl"] .dropdown-menu-end {
        --bs-position: start;
    }
    
    [dir="rtl"] .search-box .dropdown-menu,
    [dir="rtl"] .search-box .sub-menu {
        left: initial !important;
        right: 0 !important;
    }
    
    .pe-2 {
        -webkit-padding-end: 0.5rem !important;
        padding-inline-end: 0.5rem !important;
    }
    
    .border-end-logical-0 {
        -webkit-border-end: 0 !important;
        border-inline-end: 0 !important;
    }
    
    @media (min-width: 992px) {
        .modal-lg,
        .modal-xl {
            --bs-modal-width: 930px;
        }
    }
    
    .accordion {
        --bs-accordion-color: var(--title-color);
        --bs-accordion-bg: var(--bs-white);
        --bs-accordion-btn-focus-border-color: #86b7fe;
        --bs-accordion-active-color: var(--bs-primary);
        --bs-accordion-active-bg: var(--bs-white);
    }
    
    /* ************************
       02.9: Preloader
       ********************* */
    .preloader {
        position: fixed;
        inline-size: 100%;
        block-size: 100%;
        /*background-color: var(--bs-white);*/
        z-index: 9999999;
        display: grid;
        place-items: center;
    }
    
    .spinner-grow {
        background-color: var(--bs-primary);
    }
    
    /* ************************
       02.10: Card
       ********************* */
    .card {
        background-color: var(--bs-white);
        border-color: transparent;
        -webkit-box-shadow: 0px 0px 2px rgba(145, 158, 171, 0.2),
            0px 10px 20px -3px rgba(145, 158, 171, 0.05);
        box-shadow: 0px 0px 2px rgba(145, 158, 171, 0.2),
            0px 10px 20px -3px rgba(145, 158, 171, 0.05);
        border-radius: 1rem;
    }
    
    .card-header {
        background-color: var(--primary-light);
        border-color: transparent;
    }
    
    /* ************************
       02.11: Common
       ********************* */
    .overlay-primary::after {
        background-color: var(--bs-primary);
    }
    
    .overlay-custom {
        --color: linear-gradient(92.74deg, #1b7fed 2.45%, #176bc7 98.1%);
    }
    
    .overlay-custom:after {
        background: var(--color);
    }
    
    /* Fonts */
    .body-font {
        font-family: var(--bs-body-font-family) !important;
    }
    
    .custom-scrollbar {
        --size: 0.4rem;
        --height: 60vh;
        max-block-size: var(--height);
        overflow-x: hidden;
        overflow-y: auto;
        -ms-scroll-snap-type: y mandatory;
        scroll-snap-type: y mandatory;
        overscroll-behavior-y: contain;
        scroll-behavior: smooth;
    }
    
    .custom-scrollbar::-webkit-scrollbar {
        inline-size: var(--size);
        background-color: var(--bs-light);
        border-radius: var(--size);
        visibility: hidden;
    }
    
    .custom-scrollbar::-webkit-scrollbar-thumb {
        border-radius: var(--size);
        -webkit-box-shadow: inset 0 0 var(--size) rgba(0, 0, 0, 0.3);
        background-color: var(--bg-badge);
        visibility: hidden;
    }
    
    .custom-scrollbar:hover::-webkit-scrollbar-thumb,
    .custom-scrollbar:hover::-webkit-scrollbar {
        visibility: visible;
    }
    
    /* Gutter 60 */
    .media {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }
    
    .media-body {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
    }
    
    .fs-10 {
        font-size: 0.625rem !important;
    }
    
    .fs-12 {
        font-size: 0.75rem !important;
    }
    
    .fs-13 {
        font-size: 0.8125rem !important;
    }
    
    .fs-14 {
        font-size: 0.875rem !important;
    }
    
    .fs-16 {
        font-size: 1rem !important;
    }
    
    .fs-18 {
        font-size: 1.125rem !important;
    }
    
    .fs-28 {
        font-size: 1.75rem !important;
    }
    
    .fs-30 {
        font-size: 1.875rem !important;
    }
    
    .fs-36 {
        font-size: 2.25rem !important;
    }
    
    .max-content {
        inline-size: -webkit-max-content !important;
        inline-size: -moz-max-content !important;
        inline-size: max-content !important;
    }
    
    .mx-w200 {
        max-inline-size: 12.5rem;
    }
    
    .mx-w300 {
        max-inline-size: 18.75rem;
    }
    
    .mn-w180 {
        min-inline-size: 11.25rem;
    }
    
    .mx-w {
        --width: 16.875rem;
        max-inline-size: var(--width);
    }
    
    .hide-scrollbar::-webkit-scrollbar {
        display: none;
    }
    
    .hide-scrollbar {
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
    }
    
    .avatar {
        --size: 2.1875rem;
        block-size: var(--size);
        inline-size: var(--size);
        min-inline-size: var(--size);
        display: grid;
        place-items: center;
        background-color: var(--input-bg);
    }
    
    .avatar-sm {
        --size: 1.75rem;
    }
    
    .avatar-lg {
        --size: 3rem;
    }
    
    .avatar-xxl {
        --size: 5rem;
    }
    
    .avatar-auto {
        --size: auto;
        aspect-ratio: 1;
    }
    
    .bg-img {
        background-size: cover;
        background-repeat: no-repeat;
    }
    
    .img-fit-contain {
        -o-object-fit: contain;
        object-fit: contain;
    }
    
    /* Cursor */
    .cursor-pointer {
        cursor: pointer;
    }
    
    .disabled {
        opacity: 0.6;
        cursor: not-allowed;
        pointer-events: none;
    }
    
    /* Font Weight */
    .fw-medium {
        font-weight: 500 !important;
    }
    
    .fw-extra-bold {
        font-weight: var(--extra-bold) !important;
    }
    
    [data-bs-toggle="modal"] {
        cursor: pointer;
    }
    
    .bg-bottom {
        background-position: left bottom;
    }
    
    .bg-contain {
        background-size: contain;
    }
    
    .dot {
        --size: 0.5rem;
        inline-size: var(--size);
        min-inline-size: var(--size);
        block-size: var(--size);
        border-radius: var(--size);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    
    /* custom Radio */
    input[type="checkbox"] {
        --size: 1.125rem;
        -webkit-appearance: none;
        min-inline-size: var(--size);
        inline-size: var(--size);
        block-size: var(--size);
        border: 1px solid var(--bs-primary);
        border-radius: 0.3125rem;
        outline: none;
    }
    
    input[type="checkbox"]:checked {
        background-color: var(--bs-primary);
        position: relative;
    }
    
    input[type="checkbox"]:checked::after {
        content: "";
        inline-size: var(--size);
        block-size: var(--size);
        position: absolute;
        inset-inline-start: -0.0625rem;
        inset-block-start: -0.0625rem;
        background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjZmZmZmZmIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgdmVyc2lvbj0iMS4xIiB4PSIwcHgiIHk9IjBweCI+PHRpdGxlPmljb25fYnlfUG9zaGx5YWtvdjEwPC90aXRsZT48ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz48ZyBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyBmaWxsPSIjZmZmZmZmIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNi4wMDAwMDAsIDI2LjAwMDAwMCkiPjxwYXRoIGQ9Ik0xNy45OTk5ODc4LDMyLjQgTDEwLjk5OTk4NzgsMjUuNCBDMTAuMjI2Nzg5MSwyNC42MjY4MDE0IDguOTczMTg2NDQsMjQuNjI2ODAxNCA4LjE5OTk4Nzc5LDI1LjQgTDguMTk5OTg3NzksMjUuNCBDNy40MjY3ODkxNCwyNi4xNzMxOTg2IDcuNDI2Nzg5MTQsMjcuNDI2ODAxNCA4LjE5OTk4Nzc5LDI4LjIgTDE2LjU4NTc3NDIsMzYuNTg1Nzg2NCBDMTcuMzY2ODIyOCwzNy4zNjY4MzUgMTguNjMzMTUyOCwzNy4zNjY4MzUgMTkuNDE0MjAxNCwzNi41ODU3ODY0IEw0MC41OTk5ODc4LDE1LjQgQzQxLjM3MzE4NjQsMTQuNjI2ODAxNCA0MS4zNzMxODY0LDEzLjM3MzE5ODYgNDAuNTk5OTg3OCwxMi42IEw0MC41OTk5ODc4LDEyLjYgQzM5LjgyNjc4OTEsMTEuODI2ODAxNCAzOC41NzMxODY0LDExLjgyNjgwMTQgMzcuNzk5OTg3OCwxMi42IEwxNy45OTk5ODc4LDMyLjQgWiI+PC9wYXRoPjwvZz48L2c+PC9nPjwvc3ZnPg==");
        background-size: calc(var(--size) * 1.9);
        background-repeat: no-repeat;
        background-position: center;
    }
    
    /* Switcher */
    /* Offcanvas Overlay */
    .auto-col {
        --minWidth: 9.375rem;
        --maxWidth: 1fr;
        --repeat: auto-fit;
        display: grid;
        grid-template-columns: repeat(
            var(--repeat),
            minmax(var(--minWidth), var(--maxWidth))
        );
    }
    
    @media only screen and (min-width: 1400px) {
        .auto-col.xxl-items-6 {
            --repeat: 6;
        }
    }
    
    @media only screen and (max-width: 767px) {
        .auto-col.mobile-items-2 {
            --minWidth: 47% !important;
        }
    }
    
    .column-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        -webkit-column-gap: 2rem;
        -moz-column-gap: 2rem;
        column-gap: 2rem;
    }
    
    .text-truncate {
        --width: 90%;
        inline-size: var(--width) !important;
    }
    
    .mx-line-2 {
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: initial;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        line-clamp: 2;
        -webkit-line-clamp: 2;
    }
    
    .input-inner-end-ele {
        position: relative;
    }
    
    .input-inner-end-ele input {
        -webkit-padding-end: 2.5rem;
        padding-inline-end: 2.5rem;
    }
    
    .input-inner-end-ele i {
        position: absolute;
        inset-inline-end: 1rem;
        inset-block-end: 0.9375rem;
        cursor: pointer;
        line-height: 1;
        font-size: 1rem;
    }
    
    /* Combo Classes */
    .ad-hover {
        position: relative;
        display: block;
    }
    
    .ad-hover::before,
    .ad-hover::after {
        background-color: rgba(var(--bs-white-rgb), 0.2) !important;
        content: "";
        position: absolute;
        opacity: 1;
        z-index: 1;
    }
    
    .ad-hover::before {
        inset-block-start: 0;
        inset-block-end: 0;
        inset-inline-start: 50%;
        inset-inline-end: 51%;
    }
    
    .ad-hover::after {
        inset-block-start: 50%;
        inset-block-end: 50%;
        inset-inline-start: 0;
        inset-inline-end: 0;
    }
    
    .ad-hover:hover::before,
    .ad-hover:hover::after {
        opacity: 0;
        -webkit-transition: all 900ms linear;
        -o-transition: all 900ms linear;
        transition: all 900ms linear;
    }
    
    .ad-hover:hover::before {
        inset-inline-start: 0;
        inset-inline-end: 0;
    }
    
    .ad-hover:hover::after {
        inset-block-start: 0;
        inset-block-end: 0;
    }
    
    .hover-zoom-in img {
        -webkit-transition: -webkit-transform 0.2s ease-in-out;
        transition: -webkit-transform 0.2s ease-in-out;
        -o-transition: transform 0.2s ease-in-out;
        transition: transform 0.2s ease-in-out;
        transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
    }
    
    .hover-zoom-in:hover img {
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }
    
    .custom-border-color {
        --border-color: rgba(var(--bs-primary-rgb), 0.3);
        border-color: var(--border-color) !important;
    }
    
    .hover-primary:hover {
        color: var(--bs-primary) !important;
    }
    
    .hover-shadow {
        -webkit-transition: -webkit-box-shadow 0.3s ease-in-out;
        transition: -webkit-box-shadow 0.3s ease-in-out;
        -o-transition: box-shadow 0.3s ease-in-out;
        transition: box-shadow 0.3s ease-in-out;
        transition: box-shadow 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out;
        cursor: pointer;
    }
    
    .hover-shadow:hover {
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
    }
    
    /* .custom-height {
        --h: 6rem;
        block-size: var(--h) !important;
    } */
    
    /* ************************
       02.12: Back to Top
       ********************* */
    .back-to-top {
        --size: 2.187rem;
        inline-size: var(--size);
        block-size: var(--size);
        position: fixed;
        opacity: 0;
        visibility: hidden;
        -webkit-box-shadow: 0 0.25rem 0.875rem rgba(var(--bs-primary-rgb), 0.1);
        box-shadow: 0 0.25rem 0.875rem rgba(var(--bs-primary-rgb), 0.1);
        font-size: 1rem;
        inset-block-end: 5rem;
        inset-inline-end: 2%;
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
        color: var(--absolute-white) !important;
        background-color: var(--bs-primary);
    }
    
    .back-to-top.show {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        opacity: 1;
        visibility: visible;
        z-index: 9;
    }
    
    .back-to-top:hover {
        opacity: 0.6;
    }
    
    /* ************************
       02.13: Order Tracking Timeline
       ********************* */
    #timeline {
        --items: 4;
        position: relative;
    }
    
    #timeline .bar {
        background-color: var(--bg-badge);
        block-size: 0.125rem;
        inline-size: 75%;
        position: absolute;
        inset-block-start: 61px;
        inset-inline-start: 12%;
    }
    
    @media only screen and (max-width: 767px) {
        #timeline .bar {
            inset-inline-start: 0.75rem;
            inset-block-start: 1.25rem;
            block-size: 80%;
            inline-size: 0.125rem;
        }
    }
    
    #timeline .bar.progress:after {
        content: "";
        background-color: var(--bs-primary);
        block-size: 100%;
        position: absolute;
    }
    
    #timeline .bar.progress.one:after {
        /*inline-size: calc(1 * (100% / var(--items)));*/
        inline-size: 17%;
    }
    
    #timeline .bar.progress.two:after {
        /*inline-size: calc(2 * (100% / var(--items)));*/
        inline-size: 51%;
    }
    
    #timeline .bar.progress.three:after {
        /*inline-size: calc(3 * (100% / var(--items)));*/
        inline-size: 83%;
    }
    
    #timeline .bar.progress.four:after {
        /*inline-size: calc(4 * (100% / var(--items)));*/
        inline-size: 100%;
    }
    
    /*#timeline .bar.progress.five:after {*/
    /*    inline-size: calc(5 * (100% / var(--items)));*/
    /*}*/
    
    #timeline .state ul {
        list-style: none;
        position: relative;
        -webkit-margin-after: 0;
        margin-block-end: 0;
        -webkit-padding-start: 0;
        padding-inline-start: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding-left: 0;
    }
    
    @media only screen and (max-width: 767px) {
        #timeline .state ul {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
        }
    }
    
    #timeline .state ul li {
        text-align: center;
        inline-size: calc(100% / var(--items));
    }
    
    @media only screen and (max-width: 767px) {
        #timeline .state ul li {
            inline-size: auto;
            text-align: start;
            position: relative;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            gap: 1rem;
        }
        #timeline .state ul li:not(:last-child) {
            -webkit-margin-after: 2.5rem;
            margin-block-end: 2.5rem;
        }
    }
    
    #timeline .state ul li .badge {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin: 1.25rem auto;
        inline-size: 1.4375rem;
        block-size: 1.4375rem;
        color: var(--title-color);
        border: 0.1875rem solid var(--bs-white);
        background-color: var(--bs-white);
    }
    
    @media only screen and (max-width: 767px) {
        #timeline .state ul li .badge {
            margin: 0;
            position: absolute;
            inset-block-start: 0.3125rem;
        }
    }
    
    #timeline .state ul li .badge i {
        display: none;
        font-size: 1rem;
    }
    
    #timeline .state ul li .badge.active {
        border-color: var(--bs-white);
        background-color: var(--bs-primary);
        color: var(--bs-white);
    }
    
    #timeline .state ul li .badge.active i {
        display: block;
    }
    
    #timeline .state ul li .badge.active span {
        display: none;
    }
    
    #timeline .state ul li .state-text {
        color: var(--title-color);
    }
    
    @media only screen and (max-width: 767px) {
        #timeline .state ul li .state-img {
            -webkit-padding-start: 2.5rem;
            padding-inline-start: 2.5rem;
        }
    }
    
    /* ************************
       03.1: Header
       ********************* */
    .header {
        background-color: var(--bs-white);
    }
    
    .header-avatar {
        --size: 1.25rem;
    }
    
    @media only screen and (max-width: 1199px) {
        .header-avatar {
            --size: 2.0625rem;
        }
    }
    
    .header .sticky {
        position: fixed;
        inset-inline-start: 0;
        inset-block-start: 0;
        z-index: 999;
        inline-size: 100%;
        background-color: var(--bs-white);
    }
    
    .main-menu > li {
        text-transform: uppercase;
    }
    
    .main-menu > li a {
        padding: 0.875rem 0.625rem;
    }
    
    .main-menu a {
        font-size: 0.8125rem;
    }
    
    .main-menu .has-sub-item {
        position: relative;
        -webkit-padding-end: 0.8125rem;
        padding-inline-end: 0.8125rem;
    }
    
    .main-menu .has-sub-item::after {
        font-family: bootstrap-icons !important;
        content: "\F282";
        font-size: 0.625rem;
        position: absolute;
        inset-block-start: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        inset-inline-end: 0.5625rem;
    }
    
    .main-menu .has-sub-item .has-sub-item::after {
        inset-inline-end: 1rem;
    }
    
    .main-menu .sub-menu {
        --submenu-opacity: 0;
        inset-block-start: calc(100% + 0.625rem);
        position: absolute;
        text-transform: capitalize;
        opacity: var(--submenu-opacity);
        visibility: hidden;
        -webkit-transform: translateY(0.3rem);
        -ms-transform: translateY(0.3rem);
        transform: translateY(0.3rem);
        color: var(--bs-body-color);
    }
    
    .main-menu .sub-menu a {
        color: var(--bs-body-color);
    }
    
    .main-menu .sub-menu .sub-menu {
        inset-block-start: 0rem;
        inset-inline-start: 100%;
    }
    
    .main-menu li:hover > .sub-menu {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
        visibility: visible;
        --submenu-opacity: 1;
    }
    
    .sub-menu {
        --bs-dropdown-min-width: 13.75rem;
        min-inline-size: var(--bs-dropdown-min-width);
        font-size: var(--bs-dropdown-font-size);
        color: var(--bs-dropdown-color);
        background-color: var(--bs-dropdown-bg);
        background-clip: padding-box;
        border-radius: 0.25rem;
        z-index: 9;
    }
    
    .select-category-button {
        inline-size: 21.0625rem;
    }
    
    @media (max-width: 1399px) {
        .select-category-button {
            inline-size: 18.1875rem;
        }
    }
    
    /* ************************
       03.2: Footer
       ********************* */
    .footer {
        background-color: var(--primary-dark);
        z-index: 1;
        position: relative;
    }
    
    @media only screen and (max-width: 1199px) {
        .footer {
            -webkit-margin-after: 3.625rem;
            margin-block-end: 3.625rem;
        }
    }
    
    .footer-bottom,
    .footer-top {
        background-color: rgba(var(--bs-primary-rgb), 0.3);
        padding-block: 1.375rem;
    }
    
    .footer-main {
        padding-block: 1.25rem;
    }
    
    .footer .widget {
        text-align: start;
    }
    
    /* @media only screen and (max-width: 575px) {
        .footer .widget {
            text-align: center;
        }
    } */
    
    /* ************************
       03.3: aside
       ********************* */
    .aside {
        position: fixed;
        inset-inline-end: 0rem;
        inset-block-start: 0rem;
        z-index: 1031;
        background-color: var(--bs-white);
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
        inline-size: 17.5rem;
        block-size: 100vh;
        opacity: 0;
        visibility: hidden;
        -webkit-transform: translateX(100%);
        -ms-transform: translateX(100%);
        transform: translateX(100%);
    }
    
    [dir="rtl"] .aside {
        inset-inline-start: 0;
    }
    [dir="rtl"] .aside-close {
        text-align: left;
    }
    
    .aside::after {
        position: absolute;
        inset-inline-end: 17.5rem;
        inset-block-start: 0rem;
        z-index: 1030;
        background-color: var(--title-color-rgb);
        inline-size: calc(100vw - 17.5rem);
        block-size: 100vh;
        content: "";
        visibility: hidden;
        opacity: 0;
        transform: scale(0);
        transition: transform 200ms ease;
    }
    
    .aside.active::after {
        background-color: rgba(var(--title-color-rgb), 0.3);
        visibility: visible;
        opacity: 0.3;
        transform: scale(1);
    }
    
    .aside-body {
        padding: 1rem;
        max-block-size: 60vh;
        overflow-y: auto;
        position: relative;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        overscroll-behavior-y: contain;
    }
    
    .aside-body .main-nav > li {
        -webkit-margin-after: 0.625rem;
        margin-block-end: 0.625rem;
    }
    
    .aside-body .nav {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        text-transform: capitalize;
    }
    
    .aside-body .nav li > a {
        font-size: 0.875rem;
        padding: 0.375rem 0.625rem;
        display: block;
    }
    
    .aside-body .nav li.sub-menu-opened:after {
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    
    .aside-body .nav li.active > a {
        color: var(--bs-primary);
    }
    
    .aside-body .nav li.active:not(.has-sub-item) > a {
        color: var(--bs-primary);
    }
    
    .aside-body .nav li ul {
        padding-block: 0.25rem;
    }
    
    .aside-body .nav li ul li {
        text-transform: capitalize;
    }
    
    .aside-body .nav ul {
        padding-block: 0.625rem;
    }
    
    .aside-body .nav ul li {
        -webkit-padding-start: 1.5rem;
        padding-inline-start: 1.5rem;
    }
    
    .aside-body .nav ul.sub_menu {
        display: none;
    }
    
    .aside.active {
        visibility: visible;
        opacity: 1;
        -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
    }
    
    [dir="rtl"] .aside.active {
        inset-inline-start: 0;
        -webkit-transform: translateX(0);
        transform: translateX(0);
        -ms-transform: translateX(0);
    }
    
    .common-nav li.has-sub-item,
    .aside-body li.has-sub-item {
        position: relative;
        z-index: 1;
    }
    
    .common-nav li.has-sub-item:after,
    .aside-body li.has-sub-item:after {
        font-family: bootstrap-icons !important;
        content: "\F285";
        position: absolute;
        inset-inline-end: 0.625rem;
        inset-block-start: 0.625rem;
        z-index: -1;
        font-size: 0.625rem;
    }
    
    [dir="rtl"] .common-nav li.has-sub-item:after,
    [dir="rtl"] .aside-body li.has-sub-item:after {
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    
    .common-nav li.has-sub-item.sub-menu-opened:after,
    .aside-body li.has-sub-item.sub-menu-opened:after {
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    
    .search-bar {
        background-color: var(--bs-body-bg);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        block-size: 2.5rem;
    }
    
    .search-bar input {
        block-size: 2.5rem;
        background-color: transparent !important;
        border: 0;
        padding-inline: 1rem;
    }
    
    .search-bar button {
        border: 0;
        background-color: transparent;
        -webkit-padding-end: 1rem;
        padding-inline-end: 1rem;
    }
    
    .search-bar.style--two {
        border: 1px solid var(--bs-primary);
        background-color: transparent;
    }
    
    .search-bar.style--two button {
        -webkit-padding-end: 0rem;
        padding-inline-end: 0rem;
        -webkit-padding-start: 1rem;
        padding-inline-start: 1rem;
    }
    
    /* ************************
       03.4: Banner
       ********************* */
    /* ************************
       03.5: Theme Switcher
       ********************* */
    .settings-sidebar {
        position: fixed;
        inset-inline-end: 0rem;
        inset-block-start: 40%;
        z-index: 1029;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 0.5rem;
        -webkit-transform: translateX(100%);
        -ms-transform: translateX(100%);
        transform: translateX(100%);
    }
    
    .settings-sidebar .theme-bar,
    .settings-sidebar .dir-bar {
        background-color: var(--bs-white);
        padding: 0.5rem;
        border-start-start-radius: 0.625rem;
        border-end-start-radius: 0.625rem;
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 1rem;
        cursor: pointer;
        -webkit-transition: -webkit-transform 300ms ease-in-out;
        transition: -webkit-transform 300ms ease-in-out;
        -o-transition: transform 300ms ease-in-out;
        transition: transform 300ms ease-in-out;
        transition: transform 300ms ease-in-out, -webkit-transform 300ms ease-in-out;
        -webkit-transform: translateX(-20%);
        -ms-transform: translateX(-20%);
        transform: translateX(-20%);
    }
    
    [theme="light"] .dark-icon {
        display: none;
    }
    
    [theme="dark"] .light-icon {
        display: none;
    }
    
    [dir="rtl"] .settings-sidebar .theme-bar,
    [dir="rtl"] .settings-sidebar .dir-bar {
        -webkit-transform: translateX(-179%);
        -ms-transform: translateX(-179%);
        transform: translateX(-179%);
    }
    
    .settings-sidebar .theme-bar button,
    .settings-sidebar .dir-bar button {
        background-color: transparent;
        border: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 0.875rem;
        color: #b9b9b9;
        border-radius: 0.625rem;
        padding: 0.625rem;
        font-weight: 800;
        font-size: 0.875rem;
        /* -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1; */
    }
    
    .settings-sidebar .theme-bar button .svg,
    .settings-sidebar .dir-bar button .svg {
        -ms-flex-negative: 0;
        flex-shrink: 0;
    }
    
    .active-theme,
    .settings-sidebar .theme-bar button.active,
    .settings-sidebar .dir-bar button.active {
        background-color: rgba(var(--bs-primary-rgb), 0.2);
        color: var(--bs-primary);
        /* inline-size: 2.5rem;s */
        overflow: hidden;
        /* -webkit-box-ordinal-group: 1;
        -ms-flex-order: 0;
        order: 0; */
    }
    
    .active-theme {
        inline-size: 2.5rem;
        block-size: 2.5rem;
        border-radius: 0.5rem;
        display: grid;
        place-items: center;
        padding: 0.25rem;
        transform: scale(1);
        transition: all 300ms ease;
    }
    
    .settings-sidebar .theme-bar:hover,
    .settings-sidebar .dir-bar:hover {
        -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    
    .settings-sidebar .theme-bar:hover .active-theme {
        transform: scale(0);
        /* inline-size: 0; */
    }
    
    .active-theme-wrap {
        display: grid;
        gap: 1rem;
        grid-template-columns: 2.5rem 1fr;
        transition: all 300ms ease;
    }
    
    .settings-sidebar .theme-bar:hover .active-theme-wrap {
        grid-template-columns: 0rem 1fr;
        gap: 0;
    }
    
    /* ************************
       03.6: RTL
       ********************* */
    [dir="rtl"] .swiper-container,
    [dir="rtl"] .swiper {
        direction: ltr;
    }
    
    [dir="rtl"] .swiper.flash-deals-swiper {
        direction: rtl;
    }
    
    [dir="rtl"] .swiper-slide *:not(.easyzoom) {
        direction: rtl;
    }
    
    [dir="rtl"] .breadcrumb-item + .breadcrumb-item {
        padding-left: 0;
    }
    
    [dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
        padding-left: var(--bs-breadcrumb-item-padding-x);
        float: right;
    }
    
    [dir="rtl"] .flipX-in-rtl {
        -webkit-transform: scaleX(-1);
        -ms-transform: scaleX(-1);
        transform: scaleX(-1);
    }
    
    [dir="rtl"] .nav {
        -webkit-padding-start: 0;
        padding-inline-start: 0;
    }
    
    [dir="rtl"] .aside-body .nav li.has-sub-item:after {
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    
    [dir="rtl"] .aside-body .nav li.sub-menu-opened:after {
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    
    /* ************************
       03.7: Filter Aside
       ********************* */
    /* ************************
       03.8: Login
       ********************* */
    .wizard .steps {
        -webkit-margin-after: 1.875rem;
        margin-block-end: 1.875rem;
    }
    
    .wizard .steps ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    
    /* @media only screen and (max-width: 575px) {
        .wizard .steps ul {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
        }
    } */
    
    .wizard .steps ul li:not(:last-child) {
        position: relative;
        -webkit-padding-end: 3.4375rem;
        padding-inline-end: 3.4375rem;
    }
    
    /* @media only screen and (max-width: 575px) {
        .wizard .steps ul li:not(:last-child) {
            -webkit-padding-end: 0rem;
            padding-inline-end: 0rem;
            -webkit-padding-after: 0.6875rem;
            padding-block-end: 0.6875rem;
        }
    } */
    
    .wizard .steps ul li:not(:last-child)::after {
        position: absolute;
        content: "";
        background-color: var(--bs-primary);
        block-size: 0.0625rem;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        inset-block-start: 50%;
        inset-inline-end: 0.625rem;
        inline-size: 2.1875rem;
    }
    
    /* @media only screen and (max-width: 575px) {
        .wizard .steps ul li:not(:last-child)::after {
            inline-size: 0.0625rem;
            block-size: 0.625rem;
            -webkit-transform: none;
            -ms-transform: none;
            transform: none;
            inset-block-start: 1.875rem;
            inset-inline-start: 0.8125rem;
        }
    } */
    
    .wizard .steps ul li.done .number {
        background-color: var(--bs-primary);
        color: var(--absolute-white);
    }
    
    .wizard .steps .current-info {
        display: none;
    }
    
    .wizard .steps .number {
        inline-size: 1.625rem;
        min-inline-size: 1.625rem;
        block-size: 1.625rem;
        background-color: var(--bg-badge);
    }
    
    .wizard .steps a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        font-weight: var(--semi-bold);
        gap: 0.625rem;
    }
    
    .wizard .title {
        display: none;
    }
    
    .wizard .content .error {
        color: var(--bs-danger);
    }
    
    .wizard .actions {
        -webkit-margin-before: 1.875rem;
        margin-block-start: 1.875rem;
    }
    
    .wizard .actions ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 1rem;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }
    
    .wizard .actions li.disabled {
        display: none;
    }
    
    .wizard .actions a {
        background-color: var(--bs-primary);
        border-radius: 0.25rem;
        padding: 0.5rem 1.5rem;
        line-height: 1;
        color: var(--absolute-white);
    }
    
    /* upload file */
    .upload-file {
        position: relative;
        cursor: pointer;
        max-inline-size: 100%;
    }
    
    .upload-file__input {
        position: absolute;
        inset-inline-start: 0;
        inset-block-start: 0;
        inline-size: 100%;
        block-size: 100%;
        opacity: 0;
        cursor: pointer;
    }
    
    .upload-file__img {
        --size: 8.75rem;
        block-size: var(--size);
        inline-size: var(--size);
        min-inline-size: var(--size);
        max-inline-size: 100%;
    }
    
    .upload-file__img img {
        background-color: var(--bs-white);
    }
    
    .upload-file__img.style--two {
        inline-size: calc(var(--size) * 2);
    }
    
    .upload-file .temp-img-box {
        border: 1px dashed var(--bg-badge);
        border-radius: 0.625rem;
        inline-size: 100%;
        block-size: 100%;
    }
    
    /* ************************
       04.1: Dark Theme CSS
       ********************* */
    [theme="dark"] .card-header {
        background-color: rgba(255, 255, 255, 0.05);
        -webkit-box-shadow: 0;
        box-shadow: 0;
    }
    
    [theme="dark"] .btn-close:not(.outside) {
        -webkit-filter: invert(1);
        filter: invert(1);
    }
    
    [theme="dark"] ::-webkit-calendar-picker-indicator {
        -webkit-filter: invert(1);
        filter: invert(1);
    }
    
    [theme="dark"] .dark-support {
        -webkit-filter: brightness(0.8) contrast(1.2);
        filter: brightness(0.8) contrast(1.2);
    }
    
    /* ************************
       05.1: Product
       ********************* */
    .product {
        background-color: var(--bs-white);
        position: relative;
    }
    
    .product > a {
        position: absolute;
        inline-size: 100%;
        block-size: 100%;
    }
    
    .product__top {
        --width: 10rem;
        /* --height: 10.312rem; */
        inline-size: var(--width);
        max-block-size: var(--height);
        position: relative;
        overflow: hidden;
    }
    
    @media (max-width: 575px) {
        .product__top {
            --width: 7rem;
            /* --height: 7.312rem; */
        }
    }
    
    .product__top::after {
        border-radius: 0.25rem;
        background-color: rgba(var(--title-color-rgb), 0.3);
        opacity: 0;
        z-index: 2;
    }
    
    /*.product__thumbnail {*/
    /*    display: -webkit-box;*/
    /*    display: -ms-flexbox;*/
    /*    display: flex;*/
    /*    inline-size: 100%;*/
    /*    block-size: 100%;*/
    /*}*/
    
    .product__discount-badge {
        position: absolute;
        inset-block-start: 0.625rem;
        inset-inline-start: 0.625rem;
        z-index: 2;
        background-color: var(--bs-primary);
        font-weight: var(--extra-bold);
        font-size: 0.75rem;
        line-height: 1;
        padding: 0.375rem 0.4375rem;
        color: var(--absolute-white);
    }
    .product__discount-badge span {
        direction: ltr !important;
        display: inline-block;
    }
    
    .product__power-badge {
        inline-size: 12.5rem;
        block-size: 2.125rem;
        background-color: var(--bs-primary);
        position: absolute;
        inset-block-start: -0.25rem;
        inset-inline-end: -5.5rem;
        z-index: 1;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    
    [dir="rtl"] .product__power-badge {
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    
    .product__power-badge svg {
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -webkit-margin-before: 0.25rem;
        margin-block-start: 0.25rem;
        -webkit-margin-start: 0.25rem;
        margin-inline-start: 0.25rem;
    }
    
    [dir="rtl"] .product__power-badge svg {
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    
    .product__countdown,
    .product__notify {
        position: absolute;
        inset-inline-start: 0rem;
        inset-block-end: 0rem;
        background-color: rgba(var(--bs-white-rgb), 0.8);
        padding: 0.625rem;
        font-size: 0.6875rem;
        color: var(--title-color);
        inline-size: 100%;
    }
    
    .product__countdown .countdown-count {
        --size: 2.5rem;
        font-size: 0.875rem;
    }
    
    [theme="dark"] .product__countdown .countdown-count {
        background-color: rgba(var(--bs-primary-rgb), 0.3);
    }
    
    @media only screen and (max-width: 575px) {
        .product__countdown .countdown-count {
            --size: 1.5rem;
            font-size: 0.625rem;
        }
    }
    
    @media only screen and (max-width: 575px) {
        .product__countdown .countdown-text {
            font-size: 0.625rem;
        }
    }
    
    .product__old-price {
        font-weight: var(--medium);
        font-size: 0.75rem;
    }
    
    .product__new-price {
        text-decoration: none;
        font-weight: var(--semi-bold);
        color: var(--bs-primary);
    }
    
    .product__save-amount {
        text-transform: uppercase;
        border-radius: 0.25rem;
        background-color: var(--bs-primary);
        color: var(--absolute-white);
        font-size: 0.75rem;
        padding: 0.3125rem 0.625rem;
        font-weight: var(--bold);
    }
    
    @media (max-width: 575px) {
        .product__save-amount {
            padding: 0.125rem 0.25rem;
            font-size: 0.625rem;
        }
    }
    
    .product .product__actions {
        position: absolute;
        inset-inline-end: 0.5rem;
        inset-block-start: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        z-index: 3;
    }
    
    .product .product__actions a {
        opacity: 0;
        visibility: hidden;
        -webkit-transform: translateX(calc(var(--size) + 0.5rem));
        -ms-transform: translateX(calc(var(--size) + 0.5rem));
        transform: translateX(calc(var(--size) + 0.5rem));
    }
    
    [dir="rtl"] .product .product__actions a {
        -webkit-transform: translateX(-2.25rem);
        -ms-transform: translateX(-2.25rem);
        transform: translateX(-2.25rem);
    }
    
    .product .product__actions a:nth-child(1) {
        -webkit-transition-delay: 100ms;
        -o-transition-delay: 100ms;
        transition-delay: 100ms;
    }
    
    .product .product__actions a:nth-child(2) {
        -webkit-transition-delay: 150ms;
        -o-transition-delay: 150ms;
        transition-delay: 150ms;
    }
    
    .product .product__actions a:nth-child(3) {
        -webkit-transition-delay: 200ms;
        -o-transition-delay: 200ms;
        transition-delay: 200ms;
    }
    
    .product .product__actions a:nth-child(4) {
        -webkit-transition-delay: 250ms;
        -o-transition-delay: 250ms;
        transition-delay: 250ms;
    }
    
    .product__actions a {
        --size: 1.75rem;
        inline-size: var(--size);
        block-size: var(--size);
        border: 1px solid var(--bs-primary);
        color: var(--bs-primary);
        background-color: var(--absolute-white);
        font-size: 0.75rem;
        line-height: 1;
    }
    
    .product__actions a:focus-visible {
        outline: none;
    }
    
    .product__actions a:hover {
        background-color: var(--bs-primary);
        color: var(--absolute-white) !important;
    }
    
    .product:hover .product__actions a {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
    }
    
    .product:hover .product__top::after {
        opacity: 1;
    }
    
    .product:hover a {
        color: var(--bs-primary);
    }
    
    .mobile_two_items.product-list-view,
    .product-list-view {
        --minWidth: 21rem !important;
        --maxWidth: 1fr !important;
    }
    
    .product-list-view .product {
        -webkit-box-orient: horizontal !important;
        -webkit-box-direction: normal !important;
        -ms-flex-direction: row !important;
        flex-direction: row !important;
        gap: 1.25rem !important;
        padding: 1.25rem;
        overflow: hidden;
    }
    
    @media (max-width: 479px) {
        .product-list-view .product {
            padding: 0.75rem;
            gap: 0.75rem !important;
        }
        .mobile_two_items.product-list-view,
        .product-list-view {
            --minWidth: 18rem !important;
        }
    }
    
    .product-list-view .product .product__top {
        inline-size: 8rem !important;
        block-size: 8rem !important;
        min-inline-size: 8rem;
    }
    
    .product-list-view .product .product__summary {
        padding: 0rem !important;
        -webkit-box-align: start !important;
        -ms-flex-align: start !important;
        align-items: flex-start !important;
        text-align: start;
        gap: 0.5rem !important;
        max-inline-size: calc(100% - 10rem);
        flex-grow: 1;
    }
    
    .store-product__top {
        position: relative;
    }
    
    .store-product__top::after {
        border-radius: 0.25rem;
        background-color: rgba(var(--title-color-rgb), 0.3);
        opacity: 0;
    }
    
    .store-product__action {
        --size: 1.8rem;
        inline-size: var(--size);
        block-size: var(--size);
        border: 0.0625rem solid var(--bs-white);
        color: var(--bs-white);
        background-color: rgba(var(--bs-white-rgb), 0.4);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        position: absolute;
        inset-inline-start: calc(50% - (var(--size)/2));
        inset-block-start: calc(50% - (var(--size)/2));
        -webkit-transform: scale(0.3);
        -ms-transform: scale(0.3);
        transform:  scale(0.3);
        z-index: 2;
        opacity: 0;
    }
    
    .store-product:hover .store-product__action {
        opacity: 1;
        -webkit-transform: scale(1);
        -ms-transform:  scale(1);
        transform: scale(1);
    }
    
    .store-product:hover .store-product__top::after {
        opacity: 1;
    }
    
    .store-product:hover h6 {
        color: var(--bs-primary);
    }
    
    .auto-item-width {
        --width: 10rem;
    }
    
    .product__title {
        text-transform: capitalize;
    }
    
    @media (max-width: 575px) {
        .auto-item-width {
            --width: 7rem;
        }
    }
    
    .auto-item-width .swiper-slide {
        max-inline-size: var(--width);
        min-inline-size: 7.25rem;
    }
    
    @media (max-width: 575px) {
        .auto-item-width .swiper-slide {
            --width: 2.5rem;
        }
    }
    
    .offer-text {
        position: absolute;
        inset-inline-end: 0;
        inset-block-start: 0;
        background-color: var(--bs-secondary);
        color: var(--absolute-white);
        text-align: center;
        line-height: 1;
        border-start-end-radius: 0.625rem;
        border-end-start-radius: 1.25rem;
        padding: 0.5rem 1rem;
    }
    
    .offer-text--vertical {
        padding: 0.3125rem;
        -webkit-writing-mode: tb;
        -ms-writing-mode: tb;
        writing-mode: tb;
        inline-size: 100%;
    }
    
    .pd-img-wrap .product__actions {
        position: absolute;
        inset-inline-end: 1rem;
        inset-block-start: 1rem;
        z-index: 3;
    }
    
    [dir="rtl"] .pd-img-wrap .product__actions {
        inset-inline-start: 1rem;
    }
    
    .quickviewSlider,
    .quickviewSlider2 {
        position: relative;
    }
    
    .product-share-icons {
        position: relative;
    }
    
    .product-share-icons ul {
        -webkit-box-shadow: var(--box-shadow);
        box-shadow: var(--box-shadow);
        border-radius: 0.25rem;
        position: absolute;
        padding: 0.625rem 0.5rem;
        background-color: var(--bs-white);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 0.5rem;
        inset-block-start: calc(100% + 8px);
        inset-inline-start: -0.5rem;
        -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
        transform: scale(0.5);
        -webkit-transform-origin: 100% 0;
        -ms-transform-origin: 100% 0;
        transform-origin: 100% 0;
        opacity: 0;
        visibility: hidden;
    }
    
    .product-share-icons:hover ul {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        opacity: 1;
        visibility: visible;
    }
    
    .chat-btn {
        position: absolute;
        inset-inline-end: 1rem;
        inset-block-start: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    
    /* ************************
       05.2: Store
       ********************* */
    .store-banner {
        max-block-size: 9.375rem;
    }
    
    /* ************************
       05.3: Cart
       ********************* */
    .cart-step-list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-column-gap: 3.75rem;
        -moz-column-gap: 3.75rem;
        column-gap: 3.75rem;
        row-gap: 0.625rem;
    }
    
    @media only screen and (max-width: 479px) {
        .cart-step-list {
            -webkit-column-gap: 1.875rem;
            -moz-column-gap: 1.875rem;
            column-gap: 1.875rem;
        }
    }
    
    .cart-step-list li {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 0.5rem;
    }
    
    .cart-step-list li:not(:last-child)::after {
        position: absolute;
        inline-size: 2.5rem;
        block-size: 0.0625rem;
        background-color: var(--bg-badge);
        inset-inline-start: calc(100% + 10px);
        inset-block-start: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        content: "";
    }
    
    @media only screen and (max-width: 479px) {
        .cart-step-list li:not(:last-child)::after {
            inline-size: 0.625rem;
        }
    }
    
    .cart-step-list li span {
        block-size: 0.625rem;
        inline-size: 0.625rem;
        background-color: var(--bg-badge);
        font-size: 0.5rem;
        color: var(--absolute-white);
        display: none;
    }
    
    .cart-step-list li.current {
        color: var(--title-color);
        font-weight: var(--bold);
    }
    
    .cart-step-list li.current span i {
        display: none;
    }
    
    .cart-step-list li.done {
        color: var(--bs-primary);
        font-weight: var(--bold);
    }
    
    .cart-step-list li.done span {
        background-color: var(--bs-primary);
    }
    
    .cart-step-list li.done span i {
        display: block;
    }
    
    /* ************************
       05.4: Chat
       ********************* */
    .chat-list-item {
        padding: 0.625rem 0.5rem;
        border-radius: 0.5rem;
        cursor: pointer;
    }
    
    .chat-list-item.active {
        background-color: rgba(var(--bs-primary-rgb), 0.1);
    }
    
    .chat-people-name {
        display: grid;
        grid-template-columns: 1fr 4.2rem;
        color: var(--title-color);
    }
    
    .outgoing_msg,
    .received_msg {
        inline-size: 70%;
        -webkit-margin-after: 1rem;
        margin-block-end: 1rem;
    }
    
    @media only screen and (max-width: 575px) {
        .outgoing_msg,
        .received_msg {
            inline-size: 90%;
        }
    }
    
    .received_msg .message_text {
        background-color: var(--bg-badge);
    }
    
    .message_text {
        -webkit-margin-after: 0.3125rem;
        margin-block-end: 0.3125rem;
        padding: 0.625rem 1rem;
        border-radius: 0.75rem 0.75rem 0.75rem 0rem;
    }
    
    .outgoing_msg {
        -webkit-margin-start: auto;
        margin-inline-start: auto;
    }
    
    .outgoing_msg .message_text {
        background-color: var(--bs-primary);
        color: var(--absolute-white);
        border-radius: 0.75rem 0.75rem 0rem 0.75rem;
    }
    
    .time_date {
        font-size: 0.75rem;
    }
    
    .add-img,
    .add-attatchment {
        position: relative;
        cursor: pointer;
    }
    
    .add-img .material-icons,
    .add-attatchment .material-icons {
        cursor: pointer;
    }
    
    .add-img input,
    .add-attatchment input {
        opacity: 0;
        position: absolute;
        inline-size: 100%;
        block-size: 100%;
        inset-block-start: 0rem;
        inset-inline-start: 0rem;
        cursor: pointer;
    }
    
    .input_msg_write {
        position: relative;
    }
    
    .input_msg_write textarea {
        block-size: 2.5rem;
        border: none;
        background-color: transparent;
        color: var(--title-color);
    }
    
    .show-upload-file {
        background-color: var(--bs-light);
        padding: 0.5rem 1rem;
        -webkit-margin-after: 0.5rem;
        margin-block-end: 0.5rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        gap: 0.5rem;
    }
    
    .emoji-keyboard,
    .upload-file-close {
        cursor: pointer;
    }
    
    .z-n1 {
        z-index: -1 !important;
    }
    
    .store-list .avatar {
        --size: 6.875rem;
    }
    
    @media (max-width: 575px) {
        .store-list .avatar {
            --size: 5rem;
        }
        .store-list .product-count {
            font-size: 0.75rem;
        }
    }
    
    .aside .theme-bar {
        background-color: var(--bs-white);
        border-radius: 50rem;
        box-shadow: 0 0.125rem 1rem rgba(var(--title-color-rgb), 0.05) !important;
    }
    
    .aside .theme-bar button {
        background-color: transparent;
        border: 0;
        inline-size: 1.5rem;
        block-size: 1.5rem;
        border-radius: 50%;
        padding: 0;
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }
    
    .aside .theme-bar button svg {
        inline-size: 1rem;
        block-size: 1rem;
    }
    
    .aside .theme-bar button.active {
        background-color: rgba(var(--bs-primary-rgb), 0.2);
        border: 0;
    }
    
    @media (max-width: 575px) {
        .moble-border-0 {
            border-width: 0rem !important;
        }
    }
    
    .today-best-deal .sub-title {
        font-size: 1rem;
    }
    
    .today-best-deal .product__new-price {
        font-size: 1.875rem;
        margin-block-start: -0.5rem;
    }
    
    .today-best-deal .btn {
        font-size: 1rem;
    }
    
    .just-for-you {
        --minWidth: 7rem;
    }
    
    @media (min-width: 576px) {
        .feature-secton {
            background-color: var(--bs-white);
        }
    }
    
    @media (max-width: 575px) {
        .feature-section-inner {
            background-color: var(--bs-white);
            box-shadow: 0 0.125rem 0.25rem rgba(var(--title-color-rgb), 0.075) !important;
            padding: 1rem;
            padding-block-end: 0;
            border-radius: 0.5rem;
        }
    }
    
    @media (max-width: 575px) {
        .today-best-deal .sub-title {
            font-size: 0.75rem;
        }
        .today-best-deal .product__new-price,
        .today-best-deal .title {
            font-size: 1rem;
        }
        .today-best-deal .product__save-amount {
            font-size: 0.625rem;
            padding: 0.125rem 0.35rem;
            margin-block-start: 0;
        }
        .today-best-deal img {
            inline-size: 8.75rem;
        }
        .today-best-deal .btn {
            font-size: 0.75rem;
        }
        .just-for-you {
            --minWidth: 5rem;
        }
    }
    
    .square-btn {
        --size: 1.625rem;
        inline-size: var(--size);
        block-size: var(--size);
        padding: 0.25rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .product-details-content .product__new-price {
        font-size: 1.75rem;
        margin-block-start: -0.125rem;
    }
    
    @media (max-width: 575px) {
        .product-details-content .product__new-price {
            font-size: 1rem;
            margin-block-start: 0rem;
        }
    }
    
    .show-more--content.active {
        -webkit-mask-image: linear-gradient(
            #ffffff,
            #ffffff,
            rgba(255, 255, 255, 0)
        );
    }
    
    @media (max-width: 575px) {
        .track-order-details-info {
            font-size: 0.75rem;
        }
    
        .track-order-details-info .fw-bold {
            text-align: end;
        }
    }
    
    @media (max-width: 991px) {
        .flex-lg-down-grow-1 {
            flex-grow: 1;
        }
    }
    
    .store-avatar2,
    .store-avatar {
        --size: 7.312rem;
    }
    
    @media (max-width: 767px) {
        .store-avatar {
            --size: 6rem;
        }
        .store-avatar2 {
            --size: 5rem;
        }
    }
    
    .profile-sidebar-avatar {
        --size: 5rem;
    }
    
    @media (max-width: 991px) {
        .profile-sidebar-avatar {
            --size: 3rem;
        }
    }
    
    .end-1 {
        inset-inline-end: 1rem;
    }
    
    .top-1 {
        inset-block-start: 1rem;
    }
    
    @media (max-width: 991px) {
        .profile-menu-aside {
            position: fixed;
            inset-block-start: 0;
            inset-inline-end: 0;
            inline-size: 280px;
            block-size: 100vh;
            background-color: var(--bs-white);
            z-index: 9999;
            padding: 1rem;
            transform: translateX(100%);
            transition: transform 200ms ease;
        }
        [dir="rtl"] .profile-menu-aside {
            transform: translateX(-100%);
        }
        .profile-menu-aside::after {
            inline-size: 1000%;
            block-size: 100vh;
            background-color: var(--title-color);
            position: fixed;
            z-index: 9998;
            content: "";
            inset-inline-start: -1000%;
            inset-block-start: 0;
            transition: all 200ms ease;
            opacity: 0;
            visibility: hidden;
        }
        .profile-menu-aside > ul {
            max-block-size: 60vh;
            overflow-y: auto;
        }
        .profile-menu-aside.active {
            transform: translateX(0);
        }
        .profile-menu-aside.active::after {
            opacity: 0.3;
            visibility: visible;
        }
    }
    
    @media (min-width: 992px) {
        .h-lg-100 {
            block-size: 100% !important;
        }
    }
    
    .support-ticket-row .avatar {
        border-radius: 100%;
        overflow: hidden;
        --size: 3.75rem;
    }
    
    @media (max-width: 575px) {
        .support-ticket-row .avatar {
            border-radius: 0.5rem;
            --size: 3.125rem;
        }
        .support-ticket-row .btn {
            padding-inline: 0.5rem;
            padding-block: 0.25rem;
            --bs-btn-font-size: 0.625rem;
        }
        .btn {
            --bs-btn-padding-x: 1rem;
            --bs-btn-padding-y: 0.25rem;
        }
        #cart_dropdown .btn {
            --bs-btn-padding-y: 0.5rem;
        }
    }
    
    .quickviewSliderThumb2 .auto-item-width .swiper-slide {
        min-inline-size: 3rem;
    }
    
    @media (max-width: 1399px) {
        .discount-product-menu {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-inline-size: 6rem;
        }
    }
    
    @media (max-width: 575px) {
        .upload-img-content h5 {
            font-size: 0.85rem;
        }
        .upload-img-content div,
        .upload-img-content span,
        .upload-img-content p {
            font-size: 0.75rem;
        }
    }
    
    .text-absolute-white {
        color: var(--absolute-white) !important;
    }
    
    /* .profile-sidebar-sticky {
        position: static;
        inset-block-start: 150px;
        block-size: calc(100vh - 150px);
    } */
    
    .swal2-popup {
        background-color: var(--bs-white);
        color: var(--title-color);
    }
    
    .select2,
    .select2-dropdown,
    .select2-container--default .select2-search__field,
    .select2-container--default .select2-selection--single {
        background-color: var(--bs-white) !important;
        border-color: var(--bs-border-color) !important;
    }
    
    .select2-container--default .select2-search__field,
    .select2-container--default
        .select2-selection--single
        .select2-selection__rendered {
        color: var(--title-color) !important;
    }
    
    .select2-container--default
        .select2-selection--single
        .select2-selection__rendered {
        line-height: 40px !important;
    }
    
    .accordion-button::after {
        --bs-accordion-btn-icon: none;
        content: "\F282";
        font-family: bootstrap-icons !important;
        background-image: none !important;
    }
    
    .footer-bg-img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        opacity: 0.1;
    }
    
    .feature-icon-wrap {
        min-inline-size: 50px;
    }
    
    .app-bar .active {
        color: var(--bs-primary);
    }
    
    @media (min-width: 992px) {
        .profile-sidebar-sticky {
            position: sticky;
            top: 68px;
            min-height: calc(100vh - 240px);
            z-index: 99;
        }
    }
    
    .find-what-you-need-items {
        display: flex;
        gap: 1rem;
    }
    
    .find-what-you-need-items > a {
        min-inline-size: 4rem;
    }
    
    .find-what-you-need-items > a:not(:last-child) {
        max-inline-size: 6rem;
    }
    
    .find-what-you-need-items > a:last-child {
        flex-grow: 1;
    }
    
    .truncate {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .find-what-you-need-items .img-wrap {
        position: relative;
    }
    
    .find-what-you-need-items .img-wrap .floting-text {
        position: absolute;
        inset-inline-start: 0;
        inset-block-start: 0;
        background-color: rgba(var(--bs-primary-rgb), 0.6);
        inline-size: 100%;
        block-size: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 0.25rem;
        opacity: 0;
        visibility: hidden;
        transition: all 300ms ease;
        font-weight: 700;
        font-size: 13px;
        color: var(--absolute-white);
        z-index: 1;
        padding: 0.25rem;
    }
    
    .find-what-you-need-items .img-wrap .floting-text > span {
        transform: translateY(0.25rem);
        transition: all 300ms;
        opacity: 0;
        visibility: hidden;
        text-transform: capitalize;
    }
    
    .find-what-you-need-items > a:not(:nth-child(4)):last-child .floting-text,
    .find-what-you-need-items .img-wrap:hover .floting-text {
        opacity: 1;
        visibility: visible;
    }
    
    .find-what-you-need-items
        > a:not(:nth-child(4)):last-child
        .floting-text
        > span,
    .find-what-you-need-items .img-wrap:hover .floting-text span {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    
    .recommended-product-grid {
        --repeat: 5;
    }
    
    @media (max-width: 1399px) {
        .recommended-product-grid {
            --repeat: 4;
        }
    }
    
    @media (max-width: 1199px) {
        .recommended-product-grid {
            --repeat: 3;
        }
    }
    
    @media (max-width: 991px) {
        .recommended-product-grid {
            --repeat: 2;
        }
    }
    [theme="dark"] [title="reCAPTCHA"] {
        filter: invert(0.85);
        -webkit-filter: invert(0.85);
    }
    /*.find-what-you-need-items > a:last-child .text-truncate {*/
    /*    --width: 20ch;*/
    /*}*/