.menu-badge {
    font-size: 10px;
    padding: 0px 5px;
    margin-left: 5px;
    line-height: 18px;
    border-radius: 3px;
    letter-spacing: 0.3px;
    display: inline-block;
    text-transform: uppercase;
    color: var(--white);
    background: var(--red);
    text-shadow: var(--primary-tshadow)
}

.dropdown-arrow {
    position: relative;
    padding-right: 18px !important
}

.dropdown-arrow:hover::before {
    color: var(--primaryColor)
}

.dropdown-arrow::before {
    position: absolute;
    content: "\ea99";
    top: 50%;
    right: 0px;
    font-size: var(--font-size-h6);
    line-height: 15px;
    color: var(--text);
    font-family: IcoFont;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.dropdown-link {
    position: relative;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.dropdown-link:hover {
    color: var(--primaryColor);
    background: var(--chalk)
}

.dropdown-link:hover::before {
    color: var(--primaryColor)
}

.dropdown-link::before {
    position: absolute;
    top: 50%;
    right: 18px;
    content: "\f054";
    font-size: 10px;
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
    z-index: 1;
}

.dropdown-link.active {
    color: var(--primaryColor);
}

.dropdown-link.active::before {
    color: var(--primaryColor);
    -webkit-transform: translateY(-50%) rotate(90deg);
    transform: translateY(-50%) rotate(90deg);
}

@media only screen and (max-width: 1199px) {
    .category-item .dropdown-link::before {
        color: var(--white);
        display: flex;
        justify-content: center;
        width: 25px;
        
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        transition: all linear .3s;
        -webkit-transition: all linear .3s;
        -moz-transition: all linear .3s;
        -ms-transition: all linear .3s;
        -o-transition: all linear .3s;
        z-index: 1;
    }

    .category-item .dropdown-link::after {
        background: var(--primaryColor);
        content: "";
        display: flex;
        position: absolute;
        top: 26%;
        right: 18px;
        width: 25px;
        height: 25px;
    }

    .sublinks .dropdown-link::before,
    .sublinks .dropdown-link::after{
        content: none;
    }

    .category-item .dropdown-link.active {
        color: var(--white)
    }
    
    .category-item .dropdown-link.active::before {
        color: var(--white);
    }

    .category-item .dropdown-link:hover::before {
        color: var(--white);
    }
}

.dropdown-list {
    display: none;
    padding: 0px 20px;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.dropdown-list li a {
    width: 100%;
    font-size: var(--font-size-h6);
    line-height: 18px;
    border-radius: 8px;
    padding: 10px 15px 10px 35px;
    color: var(--text);
    background: var(--white);
    position: relative;
    white-space: nowrap;
    text-transform: capitalize;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.dropdown-list li a:hover {
    color: var(--primaryColor);
    background: var(--chalk);
}

.dropdown-list li a::before {
    position: absolute;
    top: 50%;
    left: 15px;
    content: "\f068";
    font-size: 10px;
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.dropdown:hover .dropdown-position-list {
    visibility: visible;
    opacity: 1;
    top: 70px;
}

.dropdown-position-list {
    position: absolute;
    top: 100px;
    left: 0px;
    z-index: 2;
    width: 200px;
    height: auto;
    visibility: hidden;
    opacity: 0;
    padding: 10px;
    border-radius: 8px;
    background: var(--white);
    border: 1px solid var(--border);
    -webkit-box-shadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.dropdown-position-list::before {
    position: absolute;
    content: "";
    z-index: -1;
    top: -7px;
    left: 12px;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    background: var(--white);
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border)
}

.dropdown-position-list li a {
    width: 100%;
    font-size: var(--font-size-h6);
    line-height: 18px;
    border-radius: 8px;
    padding: 8px 15px;
    color: var(--text);
    background: var(--white);
    white-space: nowrap;
    text-transform: capitalize;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.dropdown-position-list li a:hover {
    color: var(--primaryColor);
    background: var(--chalk)
}

.dropdown-megamenu {
    position: static
}

.dropdown-megamenu:hover .megamenu {
    visibility: visible;
    opacity: 1;
    top: 199px
}

.megamenu {
    position: absolute;
    top: 230px;
    left: 50%;
    z-index: 2;
    width: 1180px;
    border-radius: 8px;
    padding: 30px;
    background: var(--white);
    border: 1px solid var(--border);
    -webkit-box-shadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    visibility: hidden;
    opacity: 0;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.megamenu-scroll {
    height: 380px;
    overflow-y: scroll
}

.megamenu-wrap {
    margin-bottom: 1.875rem
}

.megamenu-title {
    padding-bottom: 1.125rem;
    margin-bottom: 1.25rem;
    position: relative;
    text-transform: capitalize;
    border-bottom: 1px solid var(--border)
}

.megamenu-title::before {
    position: absolute;
    content: "";
    bottom: -2px;
    left: 0px;
    width: 50px;
    height: 2px;
    background: var(--primaryColor)
}

.megamenu-list {
    border-left: 1px solid var(--border)
}

.megamenu-list li a {
    width: 100%;
    border-radius: 5px;
    padding: 5px 0px 5px 25px;
    color: var(--text);
    white-space: nowrap;
    text-transform: capitalize;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.megamenu-list li a:hover {
    color: var(--primaryColor);
    background: var(--chalk)
}

.megamenu-promo a img {
    width: 100%;
    border-radius: 3px
}

@media (max-width: 1199px) {
    .megamenu {
        width: 100%
    }
}

.flex-column {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
}

.nav-tabs {
    border: none;
    padding: 20px;
    padding-right: 0;
    border-radius: 8px;
    margin-bottom: 1.563rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: var(--white)
}

.nav-tabs li {
    padding: 0px 25px;
    border-right: 1px solid var(--border)
}

.nav-tabs li:first-child {
    padding-left: 0px;
}

.nav-tabs li:last-child {
    padding-right: 0px;
    border: none
}

.tab-link {
    font-size: var(--font-size-h6);
    font-weight: 500;
    text-transform: uppercase;
    color: var(--heading);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.tab-link:hover {
    color: var(--primaryColor)
}

.tab-link i {
    font-size: 18px;
    margin-right: 3px
}

.tab-link.active {
    color: var(--primaryColor)
}

.tab-pane {
    display: none;
    padding: 0px
}

.tab-pane.active {
    display: block
}

@media only screen and (max-width: 1199px) {
    .nav-tabs li {
        padding: 0 15px;
    }

    .tab-link {
        font-size: 14px;
    }
}

@media (max-width: 575px) {
    .nav-tabs {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .nav-tabs li {
        padding: 5px;
        border: none;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .nav-tabs {
        padding: 25px 0 25px 10px;
    }

    .nav-tabs li {
        padding: 0px 6px;
    }

    .tab-link {
        font-size: 13px;
    }
}

.pagination {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.page-item {
    margin-left: 10px
}

.page-item:first-child .page-link,
.page-item:last-child .page-link {
    border-radius: 50%
}

.page-item .active {
    color: var(--white);
    background: var(--primaryColor)
}

.page-link {
    width: 2.5rem;
    height: 2.5rem;
    line-height: 2.5rem;
    text-align: center;
    border-radius: 50%;
    font-weight: 400;
    border: none;
    padding: 0px;
    color: var(--text);
    background: var(--white)
}

.page-link:hover {
    color: var(--white);
    background: var(--primaryColor)
}

.page-link:focus {
    -webkit-box-shadow: none;
    box-shadow: none
}

@media (max-width: 991px) {
    .page-link {
        width: 35px;
        height: 35px;
        line-height: 35px
    }
}

@media (max-width: 767px) {
    .page-item {
        margin: 0px 3px
    }
}

.productAdd,
.detail-productAdd {
    width: 100%;
    font-size: var(--font-size-h6);
    padding: 6px 0px;
    border-radius: 6px;
    text-align: center;
    text-transform: capitalize;
    color: var(--heading);
    background: var(--border);
    text-shadow: var(-primary-tshadow);
    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;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.productAdd i,
.detail-productAdd i {
    font-size: 14px;
    margin-right: 5px
}

.productAction {
    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;
    /* display: none */
}

.productAction button i,
.productAction a i {
    width: 30px;
    height: 30px;
    font-size: 12px;
    line-height: 30px;
    border-radius: var(--radius-half);
    text-align: center;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: var(--heading);
    text-shadow: var(--primary-tshadow);
    cursor: pointer;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
    background-color: var(--colorLight);
}
.productAction button i:hover,
.productAction a i:hover {
    color: var(--white);
    background: var(--primaryColor)
}

.productAction input {
    width: 100%;
    font-size: var(--font-size-h6);
    margin: 0px 5px;
    padding: 6px 0px;
    border-radius: var(--radius-md);
    text-align: center;
    background: none;
    text-shadow: var(--primary-tshadow);
}

.table-list {
    width: 100%
}

thead tr {
    background: var(--primaryColor)
}

thead tr th {
    font-size: 17px;
    font-weight: 500;
    white-space: nowrap;
    text-align: center;
    text-transform: capitalize;
    padding: 12px 20px;
    color: var(--white);
    border-right: 1px solid var(--border);
}

thead tr th:first-child {
    border-radius: 0px 0px 0px 6px;
}

thead tr th:last-child {
    border-right: none;
    border-radius: 0px 0px 6px;
}

tbody tr {
    border-bottom: 1px solid var(--border);
}

tbody tr td {
    padding: 12px 20px;
    text-align: center;
    border-right: 1px solid var(--border);
}

tbody tr td:last-child {
    border-right: none;
}

.table-name {
    text-transform: capitalize;
}

.table-image img {
    width: auto;
    height: 100px;
}

.table-price h6 {
    white-space: nowrap;
}

.table-price h6 small {
    font-size: 13px;
    margin-left: 3px;
    color: var(--gray);
    font-family: sans-serif;
}

.table-desc p {
    width: 150px;
    font-size: var(--font-size-h6);
    text-align: left;
}

.table-desc p a {
    text-transform: capitalize;
}

.table-desc p a:hover {
    text-decoration: underline;
}

.table-vendor a {
    font-weight: 500;
    color: var(--heading);
    text-transform: capitalize;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.table-vendor a:hover {
    color: var(--primaryColor);
}

.table-status h6 {
    text-transform: capitalize;
}

.table-status .stock-in {
    color: var(--purple);
}

.table-status .stock-out {
    color: var(--orange);
}

.table-shop {
    width: 180px;
}

.table-shop .productAdd {
    color: var(--white);
    background: var(--primaryColor);
}

.table-shop .pb-action-plus i,
.table-shop .pb-action-minus i {
    background: var(--white);
}

.table-action a i {
    width: 35px;
    height: 35px;
    font-size: 16px;
    line-height: 35px;
    text-align: center;
    display: inline-block;
    border-radius: 5px;
    margin: 3px;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.table-action .view i {
    color: var(--green);
    background: var(--white);
}

.table-action .view i:hover {
    color: var(--white);
    background: var(--green);
}

.table-action .wish i {
    color: var(--green);
    background: var(--white);
}

.table-action .wish.active i {
    color: var(--white);
    background: var(--green);
}

.table-action .trash i {
    color: var(--red);
    background: var(--white);
}

.table-action .trash i:hover {
    color: var(--white);
    background: var(--red);
}

@media (max-width: 1199px) {
    .table-scroll {
        overflow-x: scroll;
    }
}

.modal-dialog {
    max-width: -webkit-max-content;
    max-width: -moz-max-content;
    max-width: max-content;
}

.modal-content {
    border: none;
    background: none;
    border-radius: 0px;
}

.modal-close {
    position: absolute;
    top: -15px;
    right: -15px;
    z-index: 1;
    width: 35px;
    height: 35px;
    font-size: 18px;
    line-height: 35px;
    border-radius: 50%;
    text-align: center;
    display: inline-block;
    background: var(--white);
    -webkit-box-shadow: 0px 5px 12px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 5px 12px 0px rgba(0, 0, 0, 0.2);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.modal-close:hover {
    color: var(--white);
    background: var(--primaryColor);
}

.modal-form {
    /* width: 400px; */
    padding: 30px;
    border-radius: 8px;
    background: var(--white);
}

@media (max-width: 400px) {

    .modal-form,
    .modal-dialog {
        width: 100%;
        max-width: inherit;
    }
}

@media (max-width: 1100px) {
    .modal-dialog {
        margin: 80px auto 50px;
    }

    .modal-close {
        right: 50%;
        top: -45px;
        -webkit-transform: translateX(50%);
        transform: translateX(50%);
    }
}

.order-track {
    margin-bottom: 1.563rem;
}

.order-track-list {
    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;
    padding: 25px 25px;
    border-radius: 8px;
    background: var(--chalk);
}

.order-track-item {
    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;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    text-align: center;
    width: 100%;
    z-index: 1;
}

.order-track-item::before {
    position: absolute;
    content: "";
    top: 20px;
    left: 0px;
    width: 100%;
    height: 5px;
    z-index: -1;
    background: var(--white);
}

.order-track-item:first-child::before {
    border-radius: 50px 0px 0px 50px;
}

.order-track-item:last-child::before {
    border-radius: 0px 50px 50px 0px;
}

.order-track-item i {
    width: 2.813rem;
    height: 2.813rem;
    font-size: 20px;
    line-height: 42px;
    border-radius: 50%;
    margin-bottom: 0.625rem;
    text-align: center;
    display: inline-block;
    color: var(--primaryColor);
    background: var(--white);
    border: 2px dotted var(--primaryColor);
}

.order-track-item span {
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
    color: var(--heading);
    text-transform: capitalize;
}

.order-track-item.active::before {
    background: var(--primaryColor);
}

.order-track-item.active i {
    color: var(--white);
    background: var(--primaryColor);
}

.order-track-item.active span {
    color: var(--primaryColor);
}

@media (max-width: 575px) {
    .order-track {
        overflow-x: scroll;
    }

    .order-track-list {
        width: 575px;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .order-track-item span {
        white-space: inherit;
    }
}

.nav-pills .nav-link {
    font-weight: 400;
    list-style: decimal;
}

.nav-pills .nav-link.active {
    color: var(--primaryColor);
    background: transparent;
}

@media (max-width: 991px) {
    .nav {
        margin-bottom: 1.875rem;
    }
}

.suggest-card {
    position: relative;
}

.suggest-card::before {
    position: absolute;
    content: "";
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.4);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.suggest-card:hover::before {
    background: rgba(17, 151, 68, 0.9);
}

.suggest-slider li {
    margin: 0px 10px;
}

.suggest-card img {
    width: 100%;
    border-radius: 8px;
}

.suggest-card h5 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    text-align: center;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: var(--white);
    font-weight: 400;
    text-transform: capitalize;
    text-shadow: var(--primary-tshadow);
}

.suggest-card h5 span {
    display: block;
    font-size: var(--font-size-h6);
    font-weight: 300;
}

@media (max-width: 400px) {
    .suggest-card h5 {
        font-size: 16px;
        line-height: 24px;
    }

    .suggest-card h5 span {
        font: 14px;
    }
}

/* Product Card */
.product-grid {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.product-grid > .product-grid-col {
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.productCard {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    /* margin-bottom: 1.563rem; */
    padding: 15px 18px;
    border-radius: 8px;
    background: var(--white);
    border: 1px solid var(--white);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.productCard:hover {
    border-color: var(--primaryColor);
    -webkit-box-shadow: 0px 8px 15px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 8px 15px 0px rgba(0, 0, 0, 0.1)
}

.productCard:hover .productWidget {
    opacity: 1;
    bottom: 15px;
}

.productCard:hover .productAdd {
    color: var(--white);
    background: var(--primaryColor);
}
e
.productMedia {
    position: relative;
    text-align: center;
}

.productMedia .product-label {
    text-align: left;
}

.productLabel {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: absolute;
    top: 0px;
    left: 0px;
}

.label-text {
    font-size: 14px;
    padding: 5px 8px;
    line-height: 13px;
    border-radius: 3px;
    margin-bottom: 5px;
    color: var(--white);
    text-align: center;
    text-transform: capitalize;
}

.label-text.off {
    background: var(--red);
}

.label-text.new {
    /* background: var(--primaryColor); */
    background: #FF9F00;
}

.label-text.sale {
    background: var(--orange);
}

.label-text.feat {
    background: var(--purple);
}

.label-text.rate {
    background: var(--yellow);
}

.label-text.order {
    background: var(--blue);
}

.productWish {
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 18px;
    color: var(--gray-chalk);
}

.productWish.active {
    color: var(--primaryColor);
}

.productImage img {
    width: 100%;
}

.productWidget {
    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;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    opacity: 0;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.productWidget a {
    width: 2.5rem;
    height: 2.5rem;
    font-size: var(--font-size-h6);
    margin: 0px 6px;
    line-height: 2.5rem;
    text-align: center;
    border-radius: 8px;
    color: var(--white);
    background: var(--primaryColor);
    text-shadow: var(-primary-tshadow);
    -webkit-box-shadow: 0px 7px 12px 0px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 7px 12px 0px rgba(0, 0, 0, 0.12);
}

.productContent {
    padding-top: 12px;
    text-align: center;
    border-top: 1px solid var(--border);
}

.productRating {
    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-bottom: 3px;
}

.productRating i,
.productRating a {
    font-size: 14px;
    margin: 0px 2px;
    color: var(--gray);
}

.productRating a {
    white-space: nowrap;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.productRating a:hover {
    color: var(--primaryColor);
    text-decoration: underline;
}

.productRating .active {
    color: var(--yellow);
}

.product-title {
    margin-bottom: 3px;
    text-transform: capitalize;
}

.product-title a {
    color: var(--sub-heading);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.product-title a:hover {
    color: var(--primaryColor);
}

.productPrice {
    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;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    margin-bottom: 13px;
}

.productPrice del {
    color: var(--sub-heading);
    margin-right: 8px;
}

.productPrice span {
    color: var(--primaryColor);
    white-space: nowrap;
}

.productPrice span small {
    font-weight: 400;
}

.productDisable {
    position: relative;
}

.productDisable:hover {
    border-color: var(--border);
    -webkit-box-shadow: none;
    box-shadow: none;
}

.productDisable:hover .productAdd {
    color: var(--heading);
    background: var(--border)
}

.productDisable .productWidget {
    visibility: hidden;
}

.productDisable::before {
    position: absolute;
    content: "Out of Stock";
    top: 40%;
    left: 50%;
    z-index: 2;
    width: 100%;
    font-size: var(--font-size-h6);
    font-weight: 400;
    padding: 15px 0px;
    text-align: center;
    text-transform: uppercase;
    text-shadow: var(--primary-tshadow);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: var(--white);
    background: rgba(224, 152, 22, 0.9);
}

.productDisable::after {
    position: absolute;
    content: "";
    top: 0px;
    left: 0px;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.6);
}

@media (max-width: 767px) {
    
}

@media (max-width: 575px) {
    .productCard {
        padding: 8px;
        margin-bottom: 0;
    }

    .product-title {
        font-size: var(--font-size-h6);
        line-height: 22px;
    }
}

.feature-card {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-bottom: 1.563rem;
    padding: 18px 18px;
    border-radius: 8px;
    background: var(--white);
    border: 1px solid var(--white);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.feature-card:hover {
    border-color: var(--primaryColor);
    -webkit-box-shadow: 0px 8px 15px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 8px 15px 0px rgba(0, 0, 0, 0.1)
}

.feature-card:hover .feature-widget {
    opacity: 1;
    bottom: 15px;
}

.feature-card:hover .feature-add {
    color: var(--white);
    background: var(--primaryColor);
}

.feature-media {
    position: relative;
}

.feature-label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: absolute;
    top: 0px;
    left: 0px;
}

.feature-wish {
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 18px;
    color: var(--gray-chalk);
}

.feature-wish.active {
    color: var(--primaryColor);
}

.feature-image img {
    width: 220px;
}

.feature-widget {
    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;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    opacity: 0;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.feature-widget a {
    width: 2.5rem;
    height: 2.5rem;
    font-size: var(--font-size-h6);
    margin: 0px 6px;
    line-height: 2.5rem;
    text-align: center;
    border-radius: 8px;
    color: var(--white);
    background: var(--primaryColor);
    text-shadow: var(-primary-tshadow);
    -webkit-box-shadow: 0px 7px 12px 0px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 7px 12px 0px rgba(0, 0, 0, 0.12);
}

.feature-content {
    width: 100%;
    padding-left: 25px;
    margin-left: 25px;
    border-left: 1px solid var(--border);
}

.feature-rating {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    margin-bottom: 3px;
}

.feature-rating i,
.feature-rating a {
    font-size: 12px;
    margin: 0px 2px;
    color: var(--gray);
}

.feature-rating a {
    white-space: nowrap;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.feature-rating a:hover {
    color: var(--primaryColor);
    text-decoration: underline;
}

.feature-rating .active {
    color: var(--yellow);
}

@media only screen and (max-width: 1199px) {
    .feature-rating {
        display: inline-block;
        margin-bottom: 5px;
    }
}

.feature-name {
    margin-bottom: 3px;
    text-transform: capitalize;
}

.feature-name a {
    color: var(--sub-heading);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.feature-name a:hover {
    color: var(--primaryColor);
}

.feature-price {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    margin-bottom: 0.625rem;
}

.feature-price del {
    color: var(--red);
    margin-right: 8px;
}

.feature-price span {
    color: var(--primaryColor);
    white-space: nowrap;
}

.feature-price span small {
    font-weight: 400;
}

.feature-desc {
    font-size: var(--font-size-h6);
    line-height: 25px;
    margin-bottom: 15px;
}

@media (max-width: 575px) {
    .feature-card {
        padding: 8px;
        margin-bottom: 15px;
    }

    .feature-image img {
        width: 100%;
    }

    .feature-name {
        font-size: var(--font-size-h6);
        line-height: 22px;
    }
}

@media (max-width: 450px) {
    .feature-card {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .feature-content {
        padding-left: 12px;
        margin-left: 12px;
    }

    .feature-desc {
        display: none;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .feature-image img {
        width: 190px;
    }
}

.product-standard {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-bottom: 1.563rem;
    padding: 15px 15px;
    border-radius: 8px;
    background: var(--white);
    border: 1px solid var(--border);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.product-standard:hover {
    border-color: var(--primaryColor);
    -webkit-box-shadow: 0px 8px 15px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 8px 15px 0px rgba(0, 0, 0, 0.1);
}

.product-standard:hover .standard-widget {
    opacity: 1;
    bottom: 15px;
}

.product-standard:hover .standard-add {
    color: var(--white);
    background: var(--primaryColor);
}

.standard-media {
    position: relative;
}

.standard-label-group {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 1;
}

.standard-label {
    font-size: 14px;
    padding: 5px 8px;
    line-height: 13px;
    border-radius: 3px;
    text-transform: capitalize;
    color: var(--white);
}

.standard-label.off {
    background: var(--red);
}

.standard-label.new {
    background: var(--green);
}

.standard-label.sale {
    background: var(--orange);
}

.standard-label.feat {
    background: var(--purple);
}

.standard-label.rate {
    background: var(--yellow);
}

.standard-image img {
    width: 220px;
}

.standard-widget {
    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;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    opacity: 0;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.standard-widget a {
    width: 2.5rem;
    height: 2.5rem;
    font-size: var(--font-size-h6);
    margin: 0px 6px;
    line-height: 2.5rem;
    text-align: center;
    border-radius: 8px;
    color: var(--white);
    background: var(--primaryColor);
    text-shadow: var(-primary-tshadow);
    -webkit-box-shadow: 0px 7px 12px 0px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 7px 12px 0px rgba(0, 0, 0, 0.12);
}

.standard-content {
    width: 100%;
    margin-left: 30px;
    padding-left: 30px;
    border-left: 1px solid var(--border);
}

.standard-name {
    margin-bottom: 5px;
    text-transform: capitalize;
}

.standard-name a {
    color: var(--sub-heading);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.standard-name a:hover {
    color: var(--primaryColor);
}

.standard-price {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    margin-bottom: 5px;
}

.standard-price del {
    color: var(--red);
    margin-right: 12px;
}

.standard-price span {
    color: var(--primaryColor);
    white-space: nowrap;
}

.standard-price span small {
    font-weight: 400;
}

.standard-rating {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    margin-bottom: 0.625rem;
}

.standard-rating i,
.standard-rating a {
    font-size: 14px;
    margin-right: 3px;
    color: var(--gray);
}

.standard-rating a {
    white-space: nowrap;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.standard-rating a:hover {
    color: var(--primaryColor);
    text-decoration: underline;
}

.standard-rating .active {
    color: var(--yellow);
}

.standard-desc {
    margin-bottom: 1.25rem;
}

.standard-action-group {
    display: -ms-grid;
    display: grid;
    grid-gap: 15px;
    -ms-grid-columns: (minmax(180px, 1fr))[auto-fit];
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.standard-action-group .productAdd,
.standard-action-group .pb-action-input {
    padding: 10px 0px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--white);
    background: var(--primaryColor);
}

.standard-action-group .productAdd {
    font-size: 14px;
    font-weight: 500;
}

.standard-wish {
    padding: 10px 0px;
    border-radius: 8px;
    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;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.standard-wish i {
    font-size: 16px;
    margin-right: 6px;
}

.standard-wish span {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.standard-wish {
    color: var(--primaryColor);
    background: var(--border);
}

.standard-wish.active {
    color: var(--white);
    background: var(--primaryColor);
}

.standard-action {
    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;
    display: none;
}

.standard-action button i,
.standard-action a i {
    width: 35px;
    height: 35px;
    font-size: var(--font-size-h6);
    line-height: 35px;
    border-radius: 5px;
    text-align: center;
    display: inline-block;
    color: var(--text);
    background: var(--border);
    text-shadow: var(--primary-tshadow);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.standard-action button i:hover,
.standard-action a i:hover {
    color: var(--white);
    background: var(--primaryColor);
}

.standard-action input {
    width: 100%;
    height: 2.813rem;
    margin: 0px 8px;
    font-size: var(--font-size-h6);
    line-height: 14px;
    border-radius: 5px;
    letter-spacing: 0.3px;
    text-align: center;
    color: var(--white);
    background: var(--primaryColor);
    text-shadow: var(--primary-tshadow);
}

@media (max-width: 575px) {
    .product-standard {
        padding: 10px 10px;
    }

    .standard-image img {
        width: 130px;
    }

    .standard-content {
        margin-left: 10px;
        padding-left: 10px;
    }

    .standard-name {
        font-size: 16px;
        margin-bottom: 3px;
    }

    .standard-price {
        font-size: var(--font-size-h6);
        margin-bottom: 3px;
    }

    .standard-rating {
        margin-bottom: 6px;
    }

    .standard-desc {
        display: none;
    }

    .standard-action-group {
        grid-gap: 10px;
        -ms-grid-columns: (minmax(140px, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }

    .productAdd,
    .standard-wish {
        padding: 8px 0px;
    }

    .productAdd i,
    .standard-wish i {
        display: none;
    }

    .standard-action input {
        height: 38px;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .standard-image img {
        width: 150px;
    }

    .standard-content {
        margin-left: 10px;
        padding-left: 10px;
    }

    .standard-name {
        font-size: 18px;
    }

    .standard-price {
        font-size: 16px;
    }

    .standard-desc {
        display: none;
    }

    .standard-action-group {
        grid-gap: 10px;
        -ms-grid-columns: (minmax(140px, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }

    .productAdd,
    .standard-wish {
        padding: 8px 0px;
    }

    .productAdd i,
    .standard-wish i {
        display: none;
    }

    .standard-action input {
        height: 38px;
    }
}


.category-wrap:hover .category-overlay {
    -webkit-transform: scale(1);
    transform: scale(1);
}

.category-media {
    position: relative;
    margin-bottom: 15px;
}

.category-media img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.category-overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    text-align: center;
    background: rgba(0, 0, 0, 0.4);
    -webkit-transform: scale(0);
    transform: scale(0);
    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;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.category-overlay a i {
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
    text-align: center;
    color: var(--white);
    background: var(--primaryColor);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.category-overlay a i:hover {
    color: var(--primaryColor);
    background: var(--white);
}

.category-meta {
    padding: 0px 10px;
}

.category-meta h4 {
    text-transform: capitalize;
    margin-bottom: 3px;
}

@media (max-width: 575px) {
    .category-wrap {
        width: 150px;
    }
}

@media (max-width: 1199px) {
    .category-meta {
        padding: 0px 5px;
    }

    .category-meta h4 {
        font-size: 17px;
        margin-bottom: 0px;
    }

    .category-meta p {
        font-size: var(--font-size-h6);
    }
}

.brand-wrap {
    text-align: center;
    padding-top: 15px;
}

.brand-wrap:hover .brand-media::before {
    border-color: var(--primaryColor);
    -webkit-animation-play-state: running;
    animation-play-state: running;
}

.brand-wrap:hover .brand-overlay {
    -webkit-transform: scale(1);
    transform: scale(1);
}

.brand-media {
    display: inline-block;
    position: relative;
    margin-bottom: 15px;
    z-index: 1;
}

.brand-media::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    z-index: -1;
    width: 175px;
    height: 175px;
    border-radius: 50%;
    background: var(--white);
    border: 2px dashed var(--border);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-animation: rotate360 1.2s linear infinite;
    animation: rotate360 1.2s linear infinite;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

.brand-media img {
    width: 150px;
    height: 150px;
    border-radius: 50%
}

@-webkit-keyframes rotate360 {
    to {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        transform: translate(-50%, -50%) rotate(360deg)
    }
}

@keyframes rotate360 {
    to {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        transform: translate(-50%, -50%) rotate(360deg)
    }
}

.brand-overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    text-align: center;
    background: rgba(0, 0, 0, 0.4);
    -webkit-transform: scale(0);
    transform: scale(0);
    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;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.brand-overlay a i {
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
    text-align: center;
    color: var(--white);
    background: var(--primaryColor);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.brand-overlay a i:hover {
    color: var(--primaryColor);
    background: var(--white)
}

.brand-meta h4 {
    text-transform: capitalize;
    margin-bottom: 6px
}

.brand-meta ul {
    margin-bottom: 3px
}

.brand-meta ul li {
    font-size: 13px;
    margin: 0px 1px;
    color: var(--gray);
    display: inline-block
}

.brand-meta ul .active {
    color: var(--yellow)
}

.brand-meta ul .total {
    color: var(--heading)
}

@media (max-width: 575px) {
    .brand-wrap {
        width: 200px
    }
}

.choose-card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.choose-card:hover i {
    color: var(--white);
    background: var(--primaryColor)
}

.choose-icon i {
    width: 4.688rem;
    height: 4.688rem;
    font-size: 2.5rem;
    line-height: 4.688rem;
    border-radius: 50%;
    margin-right: 30px;
    text-align: center;
    display: inline-block;
    color: var(--primaryColor);
    background: var(--white);
    text-shadow: var(--primary-tshadow);
    -webkit-box-shadow: var(--primary-bshadow);
    box-shadow: var(--primary-bshadow);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.choose-text h4 {
    margin-bottom: 0.625rem;
    text-transform: capitalize;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.blog-card {
    margin-bottom: 1.875rem
}

.blog-card:hover .blog-img img {
    -webkit-transform: scale(1.05);
    transform: scale(1.05)
}

.blog-media {
    position: relative
}

.blog-calender {
    position: absolute;
    top: 20px;
    right: 20px;
    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;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 55px;
    height: 55px;
    border-radius: 6px;
    color: var(--white);
    background: rgba(0, 0, 0, 0.6)
}

.blog-calender span {
    line-height: 20px
}

.blog-date {
    font-size: 20px;
    font-weight: 500
}

.blog-month {
    font-size: 14px;
    letter-spacing: 0.3px;
    text-transform: uppercase
}

.blog-img {
    overflow: hidden;
    border-radius: 8px
}

.blog-img img {
    width: 100%;
    border-radius: 8px;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.blog-content {
    padding: 15px 15px 0px
}

.blog-meta {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 15px
}

.blog-meta li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-right: 30px
}

.blog-meta li:last-child {
    margin: 0px
}

.blog-meta li i {
    color: var(--primaryColor);
    margin-right: 8px;
    font-size: 14px
}

.blog-meta li a,
.blog-meta li span {
    font-size: var(--font-size-h6);
    font-weight: 400;
    white-space: nowrap;
    text-transform: uppercase
}

.blog-meta li a {
    color: var(--text);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.blog-meta li a:hover {
    color: var(--primaryColor)
}

.blog-title {
    font-size: 22px;
    line-height: 30px;
    margin-bottom: 15px
}

.blog-title a {
    color: var(--heading);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.blog-title a:hover {
    color: var(--primaryColor)
}

.blog-desc {
    font-size: 17px;
    line-height: 28px;
    color: var(--gray);
    margin-bottom: 1.563rem
}

.blog-btn {
    font-size: var(--font-size-h6);
    font-weight: 500;
    color: var(--primaryColor);
    text-transform: uppercase;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.blog-btn i {
    font-size: 17px;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.blog-btn:hover {
    color: var(--primaryColor);
    text-decoration: underline
}

.blog-btn:hover i {
    margin-left: 5px
}

@media (max-width: 575px) {
    .blog-meta li {
        margin-right: 25px
    }

    .blog-content {
        padding: 15px 8px 0px
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .blog-content {
        padding: 15px 12px 0px
    }
}

.offer-card {
    margin-bottom: 1.875rem
}

.offer-card a {
    width: 100%
}

.offer-card a img {
    width: 100%;
    border-radius: 8px
}

.offer-div {
    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;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 10px 15px;
    margin: 0px 15px;
    border-radius: 0px 0px 8px 8px;
    background: var(--white)
}

.offer-div h5 {
    font-size: var(--font-size-h6);
    font-weight: 400;
    text-transform: uppercase
}

.offer-div button,
.offer-div span {
    font-size: var(--font-size-h6);
    font-weight: 500;
    color: var(--primaryColor);
    text-transform: capitalize
}

@media (min-width: 351px) and (max-width: 575px) {
    .offer-card {
        width: 320px;
        margin: 0px auto 30px
    }
}

.account-card {
    margin-bottom: 1.875rem;
    border-radius: 8px;
    padding: 15px
}

@media only screen and (max-width: 420px) {
    .account-card {
        padding: 20px;
    }
}

.account-card.bg-gray {
    background: var(--thm-body);
}

.account-title {
    padding: 18px 0px;
    margin-bottom: 1.563rem;
    position: relative;
    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;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    border-bottom: 1px solid var(--border)
}

.account-title::before {
    position: absolute;
    content: "";
    bottom: -2px;
    left: 0px;
    width: 50px;
    height: 2px;
    background: var(--primaryColor)
}

.account-title h4 {
    text-transform: capitalize
}

.account-title button,
.account-title a {
    border: none;
    font-size: var(--font-size-h6);
    font-weight: 500;
    border-radius: 6px;
    letter-spacing: 0.3px;
    padding: 5px 15px;
    white-space: nowrap;
    text-transform: capitalize;
    color: var(--primaryColor);
    background: var(--primary-chalk);
    text-shadow: var(--primary-tshadow);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.account-title button:hover,
.account-title a:hover {
    color: var(--white);
    background: var(--primaryColor)
}

@media (max-width: 991px) {
    .account-orders .account-card {
        margin-bottom: 1.875rem;
    }
}

@media (max-width: 575px) {
    .account-card {
        /* padding: 0px 15px 15px */
    }
}

@media (max-width: 399.98px) {
    .account-card, .account-card .mypayment-container {
        padding: 20px
    }
    
}

.profile-card {
    /* padding: 25px; */
    border-radius: 8px;
    margin-bottom: 1.563rem;
    background: var(--chalk);
    /* border: 1px solid var(--border); */
    position: relative;
    cursor: pointer
}

.profile-card.address {
    flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
}

.profile-card.address {
    display: flex;
    position: relative;
}

.profile-card.address input[type=radio] {
    position: absolute;
    top: 0;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.profile-card.address label {
    /* width: 190px; */
    width: 100%;
    border: 1px solid var(--border);
    padding: 25px;
    display: block;
    cursor: pointer;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    border-radius: 8px;
    /* margin-right: 15px; */
    /* text-align: center; */
    color: #666;
    font-size: 16px;
    font-weight: 400;
    /* margin-bottom: 5px; */
}

.profile-card.address input:checked + label, .profile-card.address input:checked + label {
    background: var(--primary-chalk);
    border-color: var(--primaryColor);
}


.profile-card:hover ul {
    visibility: visible;
    opacity: 1
}

.profile-card h6 {
    color: var(--text);
    margin-bottom: 8px;
    text-transform: capitalize;
}

.profile-card p {
    text-transform: capitalize;
}

.profile-card ul {
    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;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: absolute;
    top: 50%;
    right: 15px;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.profile-card ul li {
    margin: 5px 0px
}

.profile-card ul li button {
    width: 30px;
    height: 32px;
    line-height: 32px;
    border-radius: 6px;
    text-align: center;
    display: inline-block;
    background: var(--white);
    text-shadow: var(--primary-tshadow);
    -webkit-box-shadow: var(--primary-bshadow);
    box-shadow: var(--primary-bshadow);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.profile-card ul .edit {
    color: var(--primaryColor)
}

.profile-card ul .edit:hover {
    color: var(--white);
    background: var(--primaryColor)
}

.profile-card ul .trash {
    color: var(--red)
}

.profile-card ul .trash:hover {
    color: var(--white);
    background: var(--red)
}

.profile-card.active {
    background: var(--primary-chalk);
    border-color: var(--primaryColor)
}

/* ======================================================== */
/* ADD / EDIT SHIPPING ADDRESS MODAL (REFERENCE STYLING)    */
/* ======================================================== */
.address-addedit .modal-dialog {
   width: 600px; 
}
.custom-address-modal {
    background-color: var(--white);
    border-radius: 4px;
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    padding: 10px 12px;
}

.custom-address-modal .modal-header {
    padding: 16px 20px 8px 20px;
}

.custom-address-modal .modal-title {
    font-size: 1.18rem;
    font-weight: 500;
    color: var(--heading, #333333);
    letter-spacing: -0.2px;
    margin: 0;
}

.btn-close-modal {
    background: transparent;
    border: none;
    padding: 4px;
    color: #9e9e9e;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s ease;
}

.btn-close-modal:hover {
    color: #333333;
}

/* Modal Form Labels */
.modal-field-label {
    font-size: 12px;
    color: #757575;
    font-weight: 400;
    margin-bottom: 6px;
    display: block;
}

/* Inputs & Select Elements */
.modal-input,
.modal-select {
    height: 2.5rem;
    border: 1px solid #dadada;
    border-radius: 2px;
    background-color: var(--white);
    font-size: 13px;
    color: #333333;
    padding: 0px 1.25rem 0px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.modal-input::placeholder {
    color: #b0b0b0;
    font-size: 13px;
}

.modal-input:focus,
.modal-select:focus {
    border-color: var(--primaryColor, #069c4d);
    box-shadow: none;
    outline: none;
}

/* Label Selection (Home / Office) */
.address-label-selector {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.label-badge-radio {
    cursor: pointer;
    margin: 0;
    flex: 1;
}

.label-badge-radio input[type="radio"] {
    display: none;
}

.label-badge-radio .badge-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 16px;
    border-radius: 4px;
    border: 1.5px solid #e0e0e0;
    background-color: var(--white);
    color: #666666;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
    transition: all 0.2s ease;
}

.label-badge-radio .badge-icon {
    transition: color 0.2s ease;
}

/* Badge Styling */
.office-badge .badge-content,
.home-badge .badge-content {
    color: #555555;
}
.office-badge input[type="radio"]:checked + .badge-content,
.home-badge input[type="radio"]:checked + .badge-content {
    border-color: var(--secondaryColor, #f85606);
    color: var(--secondaryColor, #f85606);
    background-color: rgba(248, 86, 6, 0.04);
}
.office-badge input[type="radio"]:checked + .badge-content .badge-icon,
.home-badge input[type="radio"]:checked + .badge-content .badge-icon {
    color: var(--secondaryColor, #f85606);
}

/* Error messages */
.error-message {
    font-size: 11px;
    color: #e53935;
    margin-top: 3px;
    margin-bottom: 0;
}

/* Footer Action Buttons */
.btn-modal-cancel,
.btn-modal-save {
    min-width: 130px;
    background-color: #edf1f5;
    color: #607284;
    border: none;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.5px;
    border-radius: 2px;
    transition: background-color 0.2s ease;
}

.btn-modal-cancel:hover {
    background-color: #e2e7ec;
    color: #405264;
}

.btn-modal-save {
    background-color: var(--primaryColor, #069c4d);
    color: var(--white);
}

.btn-modal-save:hover {
    opacity: 0.92;
    color: var(--white);
}

@media (max-width: 576px) {
    .address-label-selector {
        flex-direction: column;
        gap: 8px;
    }
    .custom-address-modal .modal-footer {
        flex-direction: column-reverse;
    }
    .btn-modal-cancel, .btn-modal-save {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .address-addedit .modal-dialog {
        width: 95%;
    }
}

.address-addedit .nice-select {
    width: 100%;
}

.nice-select .list {
  max-height: 165px;
  overflow-y: scroll !important;
}

.payment-card {
    padding: 25px;
    border-radius: 6px;
    margin-bottom: 1.563rem;
    background: var(--chalk);
    border: 1px solid var(--border);
    position: relative;
    cursor: pointer
}

.payment-card:hover button {
    visibility: visible;
    opacity: 1
}

.payment-card img {
    margin-bottom: 18px
}

.payment-card h4 {
    font-size: 12px;
    line-height: 20px;
    margin-bottom: 5px;
    text-transform: capitalize
}

.payment-card p {
    color: var(--heading);
    margin-bottom: 5px
}

.payment-card p span {
    font-size: 20px;
    margin-right: 15px;
    letter-spacing: 2px
}

.payment-card p sup {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2px
}

.payment-card h5 {
    font-size: 14px;
    line-height: 22px;
    text-transform: capitalize
}

.payment-card button {
    position: absolute;
    top: 15px;
    right: 15px;
    opacity: 0;
    visibility: hidden;
    width: 30px;
    height: 32px;
    line-height: 32px;
    border-radius: 6px;
    text-align: center;
    display: inline-block;
    background: var(--white);
    text-shadow: var(--primary-tshadow);
    -webkit-box-shadow: var(--primary-bshadow);
    box-shadow: var(--primary-bshadow);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.payment-card .trash {
    color: var(--red)
}

.payment-card .trash:hover {
    color: var(--white);
    background: var(--red)
}

.payment-card.active {
    background: var(--primary-chalk);
    border-color: var(--primaryColor)
}

@media (max-width: 575px) {
    .payment-card p span {
        margin-right: 8px
    }
}

.paymethod-tabs {
    width: 450px;
}

.paymethod-tabs ul.nav-pills {
    padding: 0 15px;
}

.paymenttab-content {
    padding: 30px;
    border-radius: 8px;
    background: var(--white);
}

.contact-card {
    text-align: center;
    border-radius: 8px;
    margin: 0px 2.5px 30px;
    padding: 60px 15px 55px;
    background: var(--white);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.contact-card:hover {
    background: var(--primaryColor)
}

.contact-card:hover i {
    color: var(--primaryColor);
    background: var(--white)
}

.contact-card:hover h4,
.contact-card:hover p,
.contact-card:hover a {
    color: var(--white)
}

.contact-card i {
    width: 50px;
    height: 50px;
    font-size: 22px;
    line-height: 50px;
    border-radius: 50%;
    margin-bottom: 15px;
    text-align: center;
    display: inline-block;
    color: var(--white);
    background: var(--primaryColor);
    text-shadow: var(--primary-tshadow);
    -webkit-box-shadow: var(--primary-bshadow);
    box-shadow: var(--primary-bshadow);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.contact-card h4 {
    margin-bottom: 18px;
    text-transform: capitalize;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.contact-card p {
    width: 250px;
    font-size: 18px;
    line-height: 30px;
    margin: 0 auto;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.contact-card p a {
    font-size: 18px;
    line-height: 30px;
    display: block;
    color: var(--text);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.contact-card.active {
    background: var(--primaryColor)
}

.contact-card.active i {
    color: var(--primaryColor);
    background: var(--white)
}

.contact-card.active h4,
.contact-card.active p,
.contact-card.active a {
    color: var(--white)
}

.branch-card {
    margin: 0px 2.5px 30px;
    position: relative
}

.branch-card:hover::before {
    background: rgba(17, 151, 68, 0.85)
}

.branch-card:hover .branch-overlay {
    top: 50%
}

.branch-card:hover .branch-overlay p {
    opacity: 1
}

.branch-card::before {
    position: absolute;
    content: "";
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.45);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.branch-card img {
    width: 100%;
    border-radius: 8px
}

.branch-overlay {
    position: absolute;
    top: 60%;
    left: 0px;
    width: 100%;
    padding: 0px 15px;
    text-align: center;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.branch-overlay h3 {
    color: var(--white);
    letter-spacing: 0.3px;
    margin-bottom: 8px;
    text-transform: capitalize;
    text-shadow: var(--primary-tshadow)
}

.branch-overlay p {
    width: 200px;
    margin: 0 auto;
    letter-spacing: 0.3px;
    color: var(--white);
    opacity: 0;
    text-transform: capitalize;
    text-shadow: var(--primary-tshadow);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.team-media {
    overflow: hidden;
    position: relative;
    border-radius: 8px
}

.team-media:hover img {
    -webkit-transform: scale(1.05);
    transform: scale(1.05)
}

.team-media:hover .team-overlay {
    top: 0px;
    opacity: 1
}

.team-media:hover .team-overlay a {
    padding-top: 0px
}

.team-media img {
    width: 100%;
    border-radius: 8px;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.team-overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    opacity: 0;
    background: rgba(0, 0, 0, 0.3);
    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;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.team-overlay a {
    width: 36px;
    height: 36px;
    font-size: var(--font-size-h6);
    line-height: 36px;
    margin: 0px 5px;
    padding-top: 30px;
    text-align: center;
    border-radius: 50%;
    color: var(--text);
    background: var(--white);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.team-meta {
    text-align: center
}

.team-meta h5 {
    text-transform: capitalize
}

.team-meta h5 a {
    color: var(--heading);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.team-meta h5 a:hover {
    color: var(--primaryColor)
}

.team-meta p {
    font-size: var(--font-size-h6);
    text-transform: capitalize
}

@media (max-width: 575px) {
    .team-card {
        width: 290px;
        margin: 0px auto 50px
    }
}

.header-top {
    padding: 8px 0px;
    background: var(--chalk)
}

.header-top-welcome p {
    font-size: 14px;
    color: var(--text);
    letter-spacing: 0.3px
}

.header-top-nselect {
    margin-top: 3px;
    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
}

.header-nselect {
    width: 100%;
    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;
    border-right: 1px solid var(--gray-chalk);
}

.header-nselect:last-child {
    border: none
}

.header-nselect i {
    font-size: 16px;
    margin-right: 8px;
    color: var(--text);
}

.header-nselect .nice-select {
    height: 20px;
    line-height: initial;
    background-color: transparent;
    border: none;
    padding: 0 12px 0 0;
}

.header-nselect .nice-select::after {
    border-right-color: var(--text);
    border-bottom-color: var(--text);
    right: 0;
}

.header-nselect .nice-select .current {
    color: var(--text);
    text-transform: capitalize;
    font-size: var(--font-size-h6);
}

.header_toplist {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.header_toplist li {
    margin-left: 35px
}

.header_toplist li a {
    font-size: 14px;
    color: var(--text);
    letter-spacing: 0.3px;
    white-space: nowrap;
    text-transform: capitalize;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.header_toplist li a:hover {
    color: var(--orange-chalk)
}

@media (max-width: 767px) {

    .header-top-welcome,
    .header_toplist {
        display: none
    }

    .header-top-nselect {
        width: 270px;
        margin: 0px auto
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .header-top-welcome {
        text-align: center;
        margin-bottom: 0.625rem
    }
}

.header-part {
    background: var(--white);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.header-part.active {
    /* position: -webkit-sticky;
    position: sticky;
    top: 0px;
    left: 0px; */
    width: 100%;
    z-index: 3;
    background: var(--white);
    -webkit-box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

@media only screen and (max-width: 991px) {
    .header-part.active {
        position: -webkit-sticky;
        position: sticky;
        top: 0px;
        left: 0px;
    }
}

.header-part.active .header-content {
    padding: 15px 0px
}

.header-part.active .header_widget:hover i {
    background: var(--primaryColor);
    color: var(--white)
}

.header-part.active .header_widget sup {
    border-color: var(--white)
}

.header-part.active .form-header {
    background: var(--white);
    border-color: var(--primaryColor)
}

.header-content {
    padding: 18px 0px;
    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;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.header-logo {
    margin-right: 50px
}

.header-logo img {
    width: auto;
    height: 2.813rem;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.header_widget_group {
    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
}

.header_widget_group .header_widget {
    margin-left: 20px;
    padding: 0 0 0 10px;
    box-shadow: none;
}

.header_widget_group .header-widget:first-child {
    margin-left: 0px
}

.header_widget {
    position: relative;
    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
}

.header-widget:hover i {
    color: var(--white);
    background: var(--primaryColor);
    text-shadow: var(--primary-tshadow)
}

.header-widget:hover span {
    color: var(--primaryColor)
}

.header_widget img {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%
}

button.header_widget {
    border: none;
}

button.header_widget:after {
    content: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.profile-menu {
  position: relative;
}

.icon-circle {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-half);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  font-size: 17px;
  background: var(--white);
  transition: var(--transition);
}

.profile-trigger {
  cursor: pointer;
  padding: 0 12px 0 10px;
  gap: 8px;
  min-width: 42px;
  width: auto;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.profile-trigger img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
  background: var(--thm-body);
}

.profile-trigger span {
  font-size: var(--font-size-h8);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
  white-space: nowrap;
}

.icon-circle:hover {
  border-color: var(--secondaryColor);
  color: var(--secondaryColor);
  background: var(--thm-body);
}

.dropdown .dropdown-menu.show {
    position: absolute;
    top: 50px !important;
    left: 20px !important;
    z-index: 2;
    width: 200px;
    height: auto;
    padding: 10px;
    border-radius: 8px;
    background: var(--white);
    border: 1px solid var(--border);
    -webkit-box-shadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.dropdown .dropdown-menu::before {
    position: absolute;
    content: "";
    z-index: -1;
    top: -7px;
    left: 12px;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    background: var(--white);
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
}

/* 3-Dots Dropdown */
.mobile-detail-dropdown .dropdown-menu {
    border-radius: 12px;
    border: 1px solid var(--border);
    padding: 8px;
    min-width: 200px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    pointer-events: auto;
    z-index: 1050;
}

.mobile-detail-dropdown .dropdown-item {
    font-size: 14px;
    font-weight: 500;
    padding: 9px 12px;
    border-radius: 6px;
    color: var(--text-dark);
    display: flex;
    align-items: center;
}


.mobile-detail-dropdown .dropdown-item:hover,
.mobile-detail-dropdown .dropdown-item:focus {
    background-color: var(--chalk);
    color: var(--primaryColor);
}

.dropdown-item-custom {
    padding: 10px 14px;
    border-radius: 9px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.15s ease;
}

.dropdown-item-custom > svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #64748b;
    stroke-width: 2;
    transition: all 0.15s ease;
}

.dropdown-item-custom:hover > svg,
.dropdown-item-custom:focus > svg {
    color: var(--primaryColor);
    stroke: var(--primaryColor);
}

@media only screen and (max-width: 991px) {
    
    .mobile-detail-dropdown .dropdown-menu {
        z-index: 21;
    }

    .mobile-detail-dropdown,
    .mobile-detail-dropdown .dropdown-menu {
        pointer-events: auto;
    }

    .dropdown.mobile-detail-dropdown .dropdown-menu::before {
        right: 12px;
        left: inherit;
    }

    .mobile-detail-dropdown .dropdown-menu.show {
        top: calc(100% + 6px) !important;
        right: 0 !important;
        left: auto !important;
        transform: none !important;
    }
}

@media (min-width: 768px) {
    .animate {
        animation-duration: 0.3s;
        -webkit-animation-duration: 0.3s;
        animation-fill-mode: both;
        -webkit-animation-fill-mode: both;
    }
}

@keyframes slideIn {
    0% {
        transform: translateY(1rem);
        opacity: 0;
    }

    100% {
        transform: translateY(0rem);
        opacity: 1;
    }

    0% {
        transform: translateY(1rem);
        opacity: 0;
    }
}

@-webkit-keyframes slideIn {
    0% {
        -webkit-transform: transform;
        -webkit-opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        -webkit-opacity: 1;
    }

    0% {
        -webkit-transform: translateY(1rem);
        -webkit-opacity: 0;
    }
}

.slideIn {
    -webkit-animation-name: slideIn;
    animation-name: slideIn;
}

.header_widget i {
    width: 2.5rem;
    height: 2.5rem;
    font-size: var(--font-size-h6);
    line-height: 2.5rem;
    text-align: center;
    display: inline-block;
    border-radius: 50%;
    color: var(--text);
    background: var(--chalk);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.header_widget span {
    font-size: var(--font-size-h6);
    font-weight: 400;
    margin-left: 8px;
    letter-spacing: 0.3px;
    white-space: nowrap;
    text-align: left;
    text-transform: capitalize;
    color: var(--heading);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.header_widget span small {
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    font-family: sans-serif;
    display: block
}

.header_widget sup {
    position: absolute;
    top: -12px;
    left: 20px;
    width: 24px;
    height: 24px;
    font-size: 12px;
    line-height: 20px;
    border-radius: 50%;
    text-align: center;
    color: var(--white);
    background: var(--primaryColor);
    border: 2px solid var(--white);
    text-shadow: var(--primary-tshadow)
}

.headerCart span {
    font-size: 12px;
    margin-left: 15px;
    line-height: 20px;
    text-transform: uppercase
}

.form-header {
    width: 100%;
    margin: 0px 10px 0 0;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    background: var(--chalk);
    border: 2px solid var(--chalk);
    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;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.form-header:focus-within {
    background: var(--white);
    border-color: var(--primaryColor)
}

.form-header input {
    width: 100%;
    height: 2.813rem;
    font-size: var(--font-size-h6);
    padding-left: 15px
}

.form-header button i {
    width: 2.813rem;
    height: 2.813rem;
    font-size: var(--font-size-h6);
    line-height: 2.813rem;
    text-align: center;
    border-radius: 8px;
    color: var(--text);
    display: inline-block;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.form-header button i:hover {
    color: var(--primaryColor)
}

.header-media-group {
    display: none;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.header-media-group a img {
    width: auto;
    height: 2.813rem
}

.header-user img,
.header-src img {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%
}

.header-user i,
.header-src i {
    width: 2.5rem;
    height: 2.5rem;
    font-size: var(--font-size-h6);
    line-height: 2.5rem;
    text-align: center;
    display: inline-block;
    border-radius: 50%;
    color: var(--text);
    background: var(--chalk);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.header-user i:hover,
.header-src i:hover {
    color: var(--white);
    background: var(--primaryColor)
}

@media (max-width: 991px) {
    .header-content {
        padding: 10px 0px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .header-media-group {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }

    .header_widget_group,
    .category-menu,
    .header-widget,
    .header-logo {
        display: none
    }

    .form_header {
        width: 100%;
    }

    .form-header {
        display: none;
        margin: 10px 0px 0px
    }

    .form-header.active,
    .form-header.active .category-menu {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }
}


@media (min-width: 992px) and (max-width: 1199px) {
    .header_widget span {
        display: none;
    }
}

/* Category Menu */

.category-menu {
    position: relative;
    border-right: 1px solid #e7e7e7;
    margin: 0;
    height: auto;
    width: 100%;
    max-width: 215px;
}

.category-menu .dropdown-trigger {
    background-color: #f5f5f5;
    border-radius: 0;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    line-height: 1;
    padding: 16px 42px;
    display: block;
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
    font-size: 1rem;
    font-weight: 500;
    text-align: left;
    max-height: 60px
}

.category-menu .dropdown-trigger,
.category-menu .dropdown-trigger:hover {
    background-color: #f5f5f5;
    color: #333e48;
}

.category-menu .dropdown-trigger:hover{
    color: var(--primaryColor);
}

.category-menu .dropdown-trigger i {
    margin-right: 5px
}

.category-menu .dropdown-arrow::before {
    right: 15px;
}

.category-menu .category-dropdown {
    top: calc(100% + 22px);
    -webkit-box-shadow: none;
    box-shadow: none;
    width: 100%;
    z-index: 9999;
    position: relative;
}

.header-part.active .category-menu .category-dropdown {
    top: 64px;
}

.category-menu .category-dropdown::before {
    position: absolute;
    content: "";
    top: -12px;
    left: 50%;
    -webkit-transform: translateX(-50%) rotate(45deg);
    -ms-transform: translateX(-50%) rotate(45deg);
    transform: translateX(-50%) rotate(45deg);
    width: 24px;
    height: 24px;
    background-color: #fff;
    border-left: 2px solid;
    border-top: 2px solid
}

.category-menu .category-dropdown:before {
    border-color: #f5f5f5;
}

.category-menu .category-dropdown ul.vertical {
    box-shadow: 0 0 2px 0 rgb(0 0 0 / 25%);
    display: inline-block;
    position: relative;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
    width: 100%;
}

.category-menu .category-dropdown .vertical ul {
    background-color: #ffffff;
}

.category-menu .category-dropdown .vertical li>ul.visible {
    display: block;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
    /* height: 100%; */
}

.vertical li>* {
    display: block;
    position: relative;
}

.category-menu .category-dropdown ul li {
    display: block;
    white-space: nowrap;
    word-break: keep-all;
}

.category-menu .category-dropdown .vertical li a {
    color: #232323;
    padding: 10px 28px 10px 20px;
    text-transform: capitalize;
}

.category-menu .category-dropdown .vertical li>a:first-child {
    transition: background-color 0.2s;
}

.category-menu .category-dropdown .vertical li.active>span:after {
    display: block;
    position: absolute;

    width: 8px;
    height: 8px;
    right: 15px;
    bottom: 0px;
    top: 0px;
    margin: auto 0px;

    transform: rotate(45deg);
    border-width: 1px;
    border-color: black;
    border-style: solid solid none none;

    content: "";
}

.category-menu .category-dropdown .vertical li a:hover,
.category-menu .category-dropdown .vertical li a:focus,
.category-menu .category-dropdown .vertical li a:active,
.category-menu .category-dropdown .vertical li.active>a {
    color: var(--primaryColor);
}

.category-menu .category-dropdown .vertical li:hover>a:first-child,
.category-menu .category-dropdown .vertical li.active>a:first-child {
    color: var(--primaryColor);
    background: var(--chalk);
}


.vertical li>ul {
    display: none;
    position: absolute;
    min-width: 100%;
    top: 0px;
    left: 100%;
    margin-left: 1px;
}

/* menu animation */
.category-menu .category-dropdown .vertical li>ul {
    opacity: 1;
    transform: scale(1) translateY(0px);
    transform-origin: left top;
}

.category-menu .category-dropdown .vertical li>ul.animating {
    opacity: 0 !important;
    transform: scale(0.96) translateX(-16px);
}

.category-menu .category-dropdown .vertical li>ul.animating {
    z-index: -1 !important;
}

.category-menu .category-dropdown .vertical.alignRight li>ul.animating {
    transform: scale(0.96) translateX(16px);
}

.close-btn {
    padding: 20px;
    font-size: 18px;
    color: #232323;
    font-weight: 500;
    text-transform: uppercase;
    border-bottom: 1px solid #ced4da;
    cursor: pointer;
    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;
}

.close-btn i {
    font-size: 14px;
}

@media (min-width: 1200px) {
    .category-menu {
        position: relative;
    }

    .category-menu .category-dropdown {
        top: 68px;
        opacity: 0;
        visibility: hidden;
        position: absolute;
        z-index: 8;
        background-color: #fff;
        -webkit-transition: all linear 0.3s;
        transition: all linear 0.3s;
        min-width: 250px;
        -webkit-box-shadow: 3.346px 3.716px 22.5px rgb(0 0 0 / 7%);
        box-shadow: 3.346px 3.716px 22.5px rgb(0 0 0 / 7%);
    }

    .category-menu:hover .category-dropdown {

        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        visibility: visible;
    }
}

@media (min-width: 1200px) {}

@media (min-width: 1366px) {}

.category-menu .category-dropdown .title-category h6 {
    font-size: 14px;
}

@media only screen and (max-width: 1199px) {

    .category-menu {
        width: 280px;
    }

    .category-menu .category-dropdown {
        position: fixed;
        background-color: #fff;
        width: 300px;
        border-radius: 0;
        border: 1px solid #ddd;
        top: 0;
        height: 100vh;
        left: -320px;
        z-index: 99;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        /* overflow: scroll; */
        padding: 0 !important;

        box-shadow: -15px 0px 25px 0px rgba(0, 0, 0, 0.15);
        -webkit-box-shadow: -15px 0px 25px 0px rgba(0, 0, 0, 0.15);
    }

    .header-part.active .category-menu .category-dropdown {
        top: 0;
    }

    .category-menu .category-dropdown.open {
        left: 0;
    }

    .category-menu .dropdown-trigger {
        font-weight: 400;
        padding: 18px;
        font-size: 0.813rem;
    }

    .category-menu .dropdown-arrow::before {
        right: 7px;
    }

    .category-menu .category-dropdown ul.vertical{
        border: none;
        box-shadow: none;
    }

    .category-menu .category-dropdown .vertical li>ul.visible {
        border-top: 1px solid #ddd;
        padding: 0 15px;
        height: auto;
    }

    .category-menu .category-dropdown ul li {
        /* position: relative; */
        letter-spacing: 0.8px;
        /* line-height: 1; */
        border-bottom: 1px solid #ddd;
    }

    .category-menu .category-dropdown ul li:last-child{
        border-bottom: none;
    }

    .category-menu .category-dropdown .vertical li.hasSubmenu>span::after {
        display: block;
        position: absolute;
        width: 8px;
        height: 8px;
        right: 15px;
        bottom: 0px;
        top: 0px;
        margin: auto 0px;
        transform: rotate(45deg);
        border-width: 1px;
        border-color: black;
        border-style: solid solid none none;
        content: "";
    }

    .category-menu .category-dropdown .vertical ul.visible li.hasSubmenu>span::before {
        content: '';
        border-left: 1px solid #ddd;
        position: absolute;
        right: 0px;
        display: block;
        z-index: 1;
        width: 33px;
        height: 25px;
        top: 11px;
}

    .category-menu .category-dropdown>ul>li>a {
        font-weight: 500;
        font-size: 14px;
        text-transform: uppercase;
    }


}

@media (max-width: 991px) {
    .category-menu .category-dropdown {
        overflow: inherit;
    }



    .category-menu .dropdown-arrow::before {
        content: none;
    }

    .category-menu {
        width: 235px;
    }


}

@media (max-width: 767px) {
    .category-menu {
        width: 230px;
    }

    .category-menu .dropdown-trigger {
        font-size: 13px;
        padding: 12px;
    }

    .category-menu .dropdown-trigger i {
        display: none;
    }
}

/* @media (max-width: 417px){
    .category-menu{
        width: 335px;
    }
} */


.isOverlayActive .nav-cover {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 10000;
    background-color: #222;
    opacity: .5;
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
}

.navbar-part {
    background: var(--white)
}

.navbar-content {
    border-top: 1px solid var(--border);
    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
}

.navbar-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.navbar-item {
    margin-right: 30px
}

.navbar-item:last-child {
    margin-right: 0px
}

.navbar-link {
    padding: 22px 0px;
    font-weight: 500;
    color: var(--text);
    text-transform: capitalize;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.navbar-link:hover {
    color: var(--primaryColor)
}

.navbar-focus-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.navbar-focus-list li {
    margin-left: 30px
}

.navbar-focus-list li:first-child {
    margin-left: 0px
}

.navbar-focus-list li a {
    font-weight: 500;
    color: var(--text);
    text-transform: capitalize;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.navbar-focus-list li a:hover {
    color: var(--primaryColor)
}

.navbar-focus-list li a i {
    font-size: 18px;
    margin-right: 5px
}

.navbar-info-group {
    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
}

.navbar-info {
    margin-right: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.navbar-info:last-child {
    margin-right: 0px
}

.navbar-info i {
    font-size: 30px;
    margin-right: 15px;
    color: var(--primaryColor)
}

.navbar-info p small {
    font-size: 14px;
    line-height: 16px;
    display: block;
    text-align: left;
    text-transform: capitalize
}

.navbar-info p span {
    font-size: var(--font-size-h6);
    font-weight: 500
}

@media (max-width: 991px) {
    .navbar-part {
        display: none
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .navbar-list li {
        margin-right: 18px
    }

    .navbar-link {
        font-size: var(--font-size-h6)
    }

    .navbar-info {
        margin-right: 15px
    }

    .navbar-info p span {
        font-size: 14px
    }

    .navbar-info i {
        margin-right: 10px
    }
}

.nav-sidebar {
    position: fixed;
    top: 0px;
    left: -320px;
    width: 280px;
    height: 100vh;
    padding: 0px;
    z-index: 5;
    background: var(--white);
    -webkit-box-shadow: 15px 0px 25px 0px rgba(0, 0, 0, 0.15);
    box-shadow: 15px 0px 25px 0px rgba(0, 0, 0, 0.15);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.nav-sidebar.active {
    left: 0px
}

.nav-header {
    padding: 15px 0px;
    position: relative;
    text-align: center;
    border-bottom: 1px solid var(--border)
}

.nav-header a img {
    width: auto;
    height: 2.5rem
}

.nav-close {
    position: absolute;
    top: 50%;
    right: -18px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.nav-close i {
    width: 35px;
    height: 35px;
    font-size: 18px;
    line-height: 35px;
    border-radius: 50%;
    text-align: center;
    display: inline-block;
    color: var(--text);
    background: var(--white);
    text-shadow: var(--primary-tshadow);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.nav-close i:hover {
    color: var(--white);
    background: var(--primaryColor)
}

.nav-content {
    padding: 0px 18px;
    overflow-y: scroll;
    max-height: calc(100vh - 100px)
}

.nav-btn {
    width: 100%;
    padding: 50px 0px;
    margin-bottom: 1.25rem;
    text-align: center;
    background: var(--chalk)
}

.nav-btn .btn {
    font-size: 14px;
    padding: 12px 28px;
    letter-spacing: 0.3px
}

.nav-btn .btn i {
    font-size: 14px
}

.nav-profile {
    width: 100%;
    text-align: center;
    padding: 18px 0px 0px
}

.nav-user {
    margin-bottom: 0.625rem;
    border-radius: 50%;
    border: 2px solid var(--primaryColor)
}

.nav-user img {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    border: 2px solid var(--white)
}

.nav-name {
    margin-bottom: 18px;
    text-transform: capitalize
}

.nav-name a {
    color: var(--heading);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.nav-name a:hover {
    color: var(--primaryColor)
}

.nav-select-group {
    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;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border)
}

.nav-select {
    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-right: 18px;
    padding-right: 18px;
    line-height: 20px;
    border-right: 1px solid var(--gray-chalk)
}

.nav-select:last-child {
    padding: 0px;
    margin: 0px;
    border: none
}

.nav-select i {
    margin-right: 5px
}

.nav-list {
    width: 100%
}

.nav-list li {
    width: 100%
}

.nav-link {
    width: 100%;
    font-weight: 500;
    padding: 12px 15px;
    border-radius: 8px;
    color: var(--text);
    text-transform: capitalize;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.nav-link:hover {
    color: var(--primaryColor);
    background: var(--chalk)
}

.nav-link::before {
    right: 15px
}

.nav-link i {
    font-size: 20px;
    margin-right: 12px
}

.nav-link.active {
    color: var(--primaryColor);
    background: var(--primary-chalk)
}

.nav-info-group {
    padding: 20px 0px;
    margin-top: 15px;
    margin-bottom: 1.563rem;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border)
}

.nav-info {
    margin-bottom: 1.25rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.nav-info:last-child {
    margin-bottom: 0px
}

.nav-info i {
    font-size: 30px;
    margin-right: 15px;
    color: var(--primaryColor)
}

.nav-info p small {
    font-size: 14px;
    line-height: 18px;
    display: block;
    text-align: left;
    text-transform: capitalize
}

.nav-info p span {
    font-size: 16px;
    font-weight: 500
}

.nav-footer {
    text-align: center
}

.nav-footer p {
    font-size: 14px;
    color: var(--gray)
}

.nav-footer p a {
    color: var(--primaryColor)
}

.cart-sidebar {
    position: fixed;
    top: 0px;
    right: -450px;
    width: 400px;
    height: 100vh;
    z-index: 5;
    background: var(--white);
    -webkit-box-shadow: -15px 0px 25px 0px rgba(0, 0, 0, 0.15);
    box-shadow: -15px 0px 25px 0px rgba(0, 0, 0, 0.15);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.cart-sidebar.active {
    right: 0px
}

.cart-header {
    padding: 18px 25px;
    text-align: center;
    position: relative;
    border-bottom: 1px solid var(--border)
}

.cart-total {
    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
}

.cart-total i {
    font-size: 20px;
    margin-right: 8px;
    color: var(--primaryColor)
}

.cart-total span {
    font-weight: 500;
    color: var(--primaryColor);
    text-transform: capitalize
}

.cart-close,
.back-category {
    position: absolute;
    top: 50%;
    left: -18px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.cart-close i,
.back-category i {
    width: 35px;
    height: 35px;
    font-size: 18px;
    line-height: 35px;
    border-radius: 50%;
    text-align: center;
    display: inline-block;
    color: var(--text);
    background: var(--white);
    text-shadow: var(--primary-tshadow);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.cart-close i:hover {
    color: var(--white);
    background: var(--primaryColor)
}

.voucher-input {
    border-radius: 2px 0 0 2px;
    font-size: 13px;
    height: 2.5rem;
    border-color: #dadada;
    background-color: #f3f4f7;
}

.close-btn {
    position: relative;
}

.back-category {
    right: -18px;
    left: inherit;
}

.cart-list {
    height: 100%;
    padding: 0px 15px;
    max-height: calc(100vh - 210px);
    overflow-y: scroll
}

.cart-item {
    padding: 15px 0px;
    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;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: center;
    border-bottom: 1px solid var(--border)
}

.cart-item:hover .cart-media button {
    -webkit-transform: scale(1);
    transform: scale(1)
}

.cart-item:last-child {
    border-bottom: none
}

.cart-media {
    position: relative;
    margin-right: 25px
}

.cart-media a img {
    width: 100px;
    border-radius: 8px
}

.cart-media button {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
    -webkit-transform: scale(0);
    transform: scale(0);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.cart-media button i {
    width: 32px;
    height: 32px;
    font-size: 18px;
    line-height: 32px;
    text-align: center;
    border-radius: 5px;
    display: inline-block;
    color: var(--red);
    background: rgba(255, 255, 255, 0.9);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.cart-media button i:hover {
    color: var(--white);
    background: var(--red)
}

.cart-info-group {
    width: 100%
}

.cart-info {
    margin-bottom: 13px
}

.cart-info h6 {
    font-weight: 400;
    text-transform: capitalize
}

.cart-info h6 a {
    color: var(--heading)
}

.cart-info p {
    font-size: 14px
}

.cart-action-group {
    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;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.cart-action-group .productAction {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.cart-action-group .productAction button i {
    width: 30px;
    height: 30px;
    font-size: 12px;
    line-height: 30px;
    border-radius: 5px
}

.cart-action-group .productAction input {
    width: 2.813rem;
    height: 30px;
    font-size: 14px;
    border-radius: 5px;
    color: var(--primaryColor);
    background: var(--chalk)
}

.cart-action-group h6 {
    font-weight: 500;
    color: var(--primaryColor)
}

.cart-footer {
    padding: 20px 15px 0px;
    text-align: center;
    -webkit-box-shadow: 0px -3px 7px 0px rgba(0, 0, 0, 0.08);
    box-shadow: 0px -3px 7px 0px rgba(0, 0, 0, 0.08)
}

.cart-detail {
    font-weight: 500;
    margin-bottom: 1.25rem;
    color: var(--primaryColor);
    text-shadow: var(--primary-tshadow)
}

.cart-detail:hover {
    text-decoration: underline
}

.coupon-form {
    padding: 3px;
    border-radius: 8px;
    margin-bottom: 18px;
    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;
    border: 1px solid var(--border);
    -webkit-box-shadow: 0px 7px 13px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 7px 13px 0px rgba(0, 0, 0, 0.1);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
    display: none
}

.coupon-form:focus-within {
    border-color: var(--primaryColor)
}

.coupon-form input {
    width: 100%;
    height: 38px;
    padding: 0px 15px
}

.coupon-form button span {
    width: 100px;
    height: 38px;
    font-size: 14px;
    line-height: 38px;
    border-radius: 8px;
    display: block;
    text-align: center;
    text-transform: uppercase;
    color: var(--white);
    background: var(--primaryColor)
}

.cart-checkout-btn {
    padding: 10px 0px;
    border-radius: 8px;
    background: var(--primaryColor);
    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;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.cart-checkout-btn:hover {
    background: var(--heading)
}

.checkout-label {
    width: 100%;
    height: 30px;
    font-size: var(--font-size-h6);
    line-height: 30px;
    letter-spacing: 0.3px;
    text-align: center;
    text-transform: capitalize;
    color: var(--white)
}

.checkout-price {
    padding: 0px 25px;
    letter-spacing: 0.3px;
    color: var(--white);
    border-left: 1px solid var(--border)
}

@media (max-width: 450px) {
    .cart-sidebar {
        right: 0px;
        width: 100%;
        height: 100vh;
        -webkit-transform: scale(0);
        transform: scale(0);
        margin: 80px 0px 0px;
        border-radius: 15px 15px 0px 0px;
        transition: all linear .3s;
        -webkit-transition: all linear .3s;
        -moz-transition: all linear .3s;
        -ms-transition: all linear .3s;
        -o-transition: all linear .3s
    }

    .cart-sidebar.active {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: top;
        transform-origin: top
    }

    .cart-close {
        left: 50%;
        top: -45px;
        bottom: inherit;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        border-radius: 50px 50px 0px 0px;
        -webkit-box-shadow: 0px -8px 10px 0px rgba(0, 0, 0, 0.15);
        box-shadow: 0px -8px 10px 0px rgba(0, 0, 0, 0.15)
    }

    .cart-list {
        max-height: calc(100vh - 290px)
    }

    .cart-media a img {
        width: 80px
    }
}

.category-sidebar {
    position: fixed;
    top: 0px;
    left: -320px;
    width: 280px;
    height: 100vh;
    z-index: 5;
    background: var(--white);
    -webkit-box-shadow: 15px 0px 25px 0px rgba(0, 0, 0, 0.15);
    box-shadow: 15px 0px 25px 0px rgba(0, 0, 0, 0.15);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.category-sidebar.active {
    left: 0px
}

.category-header {
    padding: 15px 18px;
    position: relative;
    border-bottom: 1px solid var(--border);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.category-title {
    color: var(--primaryColor);
    text-transform: capitalize;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.category-title i {
    margin-right: 8px
}

.category-close {
    position: absolute;
    top: 50%;
    right: -18px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.category-close i {
    width: 35px;
    height: 35px;
    font-size: 18px;
    line-height: 35px;
    border-radius: 50%;
    text-align: center;
    display: inline-block;
    color: var(--text);
    background: var(--white);
    text-shadow: var(--primary-tshadow);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.category-close i:hover {
    color: var(--white);
    background: var(--primaryColor)
}

.category-list {
    width: 100%;
    padding: 0px 15px;
    overflow-y: scroll;
    height: calc(100vh - 130px);
}

.category-item {
    width: 100%;
    border-bottom: 1px solid var(--border);
    position: relative;
}

.category-link {
    font-size: 16px;
    font-weight: 400;
    padding: 12px 15px;
    color: var(--text);
    text-transform: capitalize;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.category-link i {
    font-size: 25px;
    margin-right: 15px;
    display: inline-block
}

@media only screen and (max-width: 1199px) {
    .category-list .category-item > ul.category-list {
        overflow: inherit;
        height: auto;
    }

    .category-list .category-item > ul.category-list > li:last-child {
        border-bottom: none;
    }
}

.mobile-menu {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    z-index: 3;
    background: var(--white);
    border-radius: 10px 10px 0px 0px;
    -webkit-box-shadow: 0px -5px 15px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px -5px 15px 0px rgba(0, 0, 0, 0.1);
    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;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    display: none
}

.mobile-menu a,
.mobile-menu button {
    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;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 80px;
    padding: 8px 0px;
    border-radius: 8px;
    position: relative
}

.mobile-menu a:hover,
.mobile-menu button:hover {
    background: var(--chalk)
}

.mobile-menu a:hover i,
.mobile-menu button:hover i {
    color: var(--primaryColor)
}

.mobile-menu a:hover span,
.mobile-menu button:hover span {
    color: var(--primaryColor)
}

.mobile-menu a i,
.mobile-menu button i {
    font-size: var(--font-size-h6);
    margin-bottom: 5px;
    color: var(--text);
    text-shadow: 2px 3px 8px rgba(0, 0, 0, 0.1)
}

.mobile-menu a span,
.mobile-menu button span {
    font-size: 10px;
    line-height: 12px;
    color: var(--text);
    text-transform: uppercase
}

.mobile-menu a sup,
.mobile-menu button sup {
    position: absolute;
    top: -5px;
    left: 75%;
    width: 24px;
    height: 24px;
    font-size: 12px;
    line-height: 20px;
    border-radius: 50%;
    text-align: center;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    color: var(--white);
    background: var(--primaryColor);
    border: 2px solid var(--primary-chalk);
    text-shadow: var(--primary-tshadow)
}

.mobile-menu a .fas fa-shopping-basket,
.mobile-menu button .fas fa-shopping-basket {
    font-size: 18px
}

@media (max-width: 991px) {
    .mobile-menu {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }
}

/*--------------------------------------------------------------
#  Hero slider
---------------------------------------------------------------*/
.banner-section {
    min-height: 460px;
}

.pb-banner-image {
    position: relative;
    min-height: 460px;
    width: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
}

.hero-content {
  padding: 0 60px;
  max-width: 560px;
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.hero-eyebrow span:first-child {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text);
}

.hero-badge {
  background: #d1f5e0;
  color: #0f7f45;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radius-30);
  text-transform: uppercase;
}

.hero-title {
  font-size: 52px;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-bottom: 14px;
}

.hero-sub {
  font-size: 16px;
  color: var(--text);
  margin-bottom: 22px;
}

.hero-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 26px;
}
.hero-price span {
  font-size: var(--font-size-h6);
  color: var(--text);
}

.hero-price strong {
  font-family: var(--thm-font-secondary);
  font-size: 38px;
  color: var(--priceColor);
}

.hero-dots {
  position: absolute;
  bottom: 26px;
  left: 60px;
  display: flex;
  gap: 8px;
  z-index: 4;
}

.hero-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: var(--radius-half);
  border: none;
  background: var(--colorInfoDark);
  transition: var(--transition);
}

.hero-dots button.active {
  background: var(--text);
}

/* ========================================
   Responsive Banner Styles (Mobile First)
   ======================================== */

/* Max-width: 767px */
@media (max-width: 767px) {
    /* Banner section responsive fixes */
    .banner-section {
        min-height: auto;
        height: auto;
    }

    .pb-banner-image {
        min-height: 250px;
        height: auto;
        background-position: center center;
        background-size: cover;
    }

    .hero-content {
        padding: 20px 15px;
        width: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .hero-eyebrow {
        justify-content: center;
        margin-bottom: 12px;
        gap: 8px;
    }

    .hero-eyebrow span:first-child {
        font-size: 11px;
        letter-spacing: 0.4px;
    }

    .hero-badge {
        font-size: 10px;
        padding: 3px 10px;
    }

    .hero-title {
        font-size: 28px;
        line-height: 1.2;
        margin-bottom: 0.625rem;
        letter-spacing: -0.3px;
    }

    .hero-sub {
        font-size: 14px;
        margin-bottom: 16px;
        line-height: 1.4;
    }

    .hero-price {
        margin-bottom: 18px;
        gap: 6px;
    }

    .hero-price span {
        font-size: 13px;
    }

    .hero-price strong {
        font-size: 24px;
    }

    .hero-content .btn-thm {
        font-size: 14px;
        padding: 10px 20px;
    }

    /* Handle banners with only image (no content) */
    .pb-banner-image:has(.hero-content:empty) {
        min-height: 200px;
    }

    .pb-banner-image:has(.hero-content:empty) img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    /* Fallback for browsers without :has() support */
    .pb-banner-image:not(:has(.hero-content)) {
        min-height: 200px;
    }

    .pb-banner-image:not(:has(.hero-content)) img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
}

/* Min-width: 576px and Max-width: 767px */
@media (min-width: 576px) and (max-width: 767px) {
    /* Banner section responsive fixes for 576px-767px */
    .banner-section {
        min-height: auto;
        height: auto;
    }

    .pb-banner-image {
        min-height: 340px;
        height: auto;
        background-position: center center;
        background-size: cover;
    }

    .hero-content {
        padding: 25px 20px;
        width: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .hero-eyebrow {
        justify-content: center;
        margin-bottom: 14px;
        gap: 10px;
    }

    .hero-eyebrow span:first-child {
        font-size: 12px;
        letter-spacing: 0.5px;
    }

    .hero-badge {
        font-size: 11px;
        padding: 4px 12px;
    }

    .hero-title {
        font-size: 32px;
        line-height: 1.15;
        margin-bottom: 12px;
        letter-spacing: -0.4px;
    }

    .hero-sub {
        font-size: var(--font-size-h6);
        margin-bottom: 18px;
        line-height: 1.4;
    }

    .hero-price {
        margin-bottom: 1.25rem;
        gap: 8px;
    }

    .hero-price span {
        font-size: 14px;
    }

    .hero-price strong {
        font-size: 28px;
    }

    .hero-content .btn-thm {
        font-size: var(--font-size-h6);
        padding: 12px 24px;
    }

    /* Handle banners with only image (no content) */
    .pb-banner-image:has(.hero-content:empty) {
        min-height: 250px;
    }

    .pb-banner-image:has(.hero-content:empty) img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    /* Fallback for browsers without :has() support */
    .pb-banner-image:not(:has(.hero-content)) {
        min-height: 250px;
    }

    .pb-banner-image:not(:has(.hero-content)) img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
}

/* Max-width: 575px */
@media (max-width: 575px) {
    /* Banner section responsive fixes for max-width: 575px */
    .banner-section {
        min-height: auto;
        height: auto;
    }

    .pb-banner-image {
        min-height: 270px;
        height: auto;
        background-position: center center;
        background-size: cover;
    }

    .hero-content {
        padding: 15px 12px;
        width: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .hero-eyebrow {
        justify-content: center;
        margin-bottom: 0.625rem;
        gap: 6px;
    }

    .hero-eyebrow span:first-child {
        font-size: 10px;
        letter-spacing: 0.3px;
    }

    .hero-badge {
        font-size: 9px;
        padding: 2px 8px;
    }

    .hero-title {
        font-size: 30px;
        line-height: 1.1;
        margin-bottom: 8px;
        letter-spacing: -0.2px;
    }

    .hero-sub {
        font-size: 13px;
        margin-bottom: 14px;
        line-height: 1.3;
    }

    .hero-price {
        margin-bottom: 16px;
        gap: 5px;
    }

    .hero-price span {
        font-size: 12px;
    }

    .hero-price strong {
        font-size: 20px;
    }

    .hero-content .btn-thm {
        font-size: 13px;
        padding: 8px 16px;
    }

    /* Handle banners with only image (no content) */
    .pb-banner-image:has(.hero-content:empty) {
        min-height: 180px;
    }

    .pb-banner-image:has(.hero-content:empty) img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    /* Fallback for browsers without :has() support */
    .pb-banner-image:not(:has(.hero-content)) {
        min-height: 180px;
    }

    .pb-banner-image:not(:has(.hero-content)) img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
}

@media (max-width: 420px) {
    .hero-title {
        font-size: 25px;
    }
}


/* ========================= Slick Button ========================= */
.slider-arrow:hover .right-arrow,
.slider-arrow:hover .left-arrow {
    visibility: visible;
    opacity: 1
}

.right-arrow,
.left-arrow {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 20px;
    width: 2.813rem;
    height: 2.813rem;
    line-height: 2.813rem;
    text-align: center;
    border-radius: var(--radius-half);
    color: var(--secondaryColor);
    background: var(--white);
    border: 1px solid var(--border);
    text-shadow: var(--primary-tshadow);
    -webkit-box-shadow: var(--primary-bshadow);
    box-shadow: var(--primary-bshadow);
    visibility: hidden;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.right-arrow:hover,
.left-arrow:hover {
    color: var(--white);
    background: var(--secondaryColor);
    border: 1px solid var(--secondaryColor)
}

.right-arrow {
    right: -20px
}

.left-arrow {
    left: -20px
}

.slider-dots ul {
    position: absolute;
    bottom: 20px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    display: none !important;
}

@media (min-width: 360px) {
    .slider-dots ul {
        display: block !important;
    }
}

.slider-dots ul li {
    width: 9px;
    height: 9px;
    margin: 0px 5px;
    border-radius: var(--radius-30);
    cursor: pointer;
    display: inline-block;
    background: var(--primaryColor);
    -webkit-box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.slider-dots ul li button {
    display: none
}

.slider-dots ul li.slick-active {
    width: 25px;
    background: var(--primaryColor);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.slick-dots li {
    display: inline-block;
}

.slick-dots li button{
    width: 8px;
    height: 8px;
    margin: 5px 6px;
    border: .1rem solid #333;
    background: 0 0;
    display: block;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    transition: all .3s ease;
    border-radius: var(--radius-30);
    text-indent: -99999px;
}

.slick-dots li.slick-active button {
    width: 18px;
    border-color: #333;
    background-color: #333;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {

    .right-arrow,
    .left-arrow {
        font-size: 16px
    }
}

@media (max-width: 767px) {
    /* Ensure slider dots are properly positioned on mobile */
    .slider-dots ul {
        bottom: 15px;
    }

    .slider-dots ul li {
        width: 8px;
        height: 8px;
        margin: 0 4px;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .slider-dots ul {
        bottom: 20px
    }

    .slider-dots ul li {
        margin: 0px 6px
    }
}

@media (max-width: 575px) {
     .slider-dots ul {
        bottom: 10px
    }

    .slider-dots ul li {
        margin: 0px 6px
    }
}

/* End Index Slider */

/* ========================= Category ========================= */
.category-part h5 a {
    font-family: var(--thm-font-secondary);
    color: var(--heading);
    font-weight: 700;
}

.category-part h5 a:hover {
    color: var(--secondaryColor);
}

/* ========================= Promo banner (sidebar) ========================= */
.promo-card {
  /* background: #e9e9e9; */
  border-radius: var(--radius-lg);
  padding: 20px 28px 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  min-height: 430px;
}
.promo-card .promo-kicker {
  font-size: var(--font-size-h7);
  color: var(--primaryColor);
  margin-bottom: 12px;
}
.promo-card h3 {
  font-size: var(--font-size-h3);
  font-weight: 400;
  line-height: 1.25;
}
.promo-card h3 strong {
  display: block;
  font-weight: 700;
}
.promo-card .promo-price-label {
  margin-top: 18px;
  font-size: var(--font-size-h7);
  color: var(--primaryColor);
}
.promo-card .promo-price {
  font-family: var(--thm-font-secondary);
  font-size: 30px;
  font-weight: 700;
  color: var(--priceColor);
  margin-bottom: 18px;
  line-height: 1.4;
}
.promo-card img {
  margin-top: auto;
  border-radius: var(--radius-sm);
}

/************************************************************************************************
   Product Card Listing
*************************************************************************************************/
.collected-slider .slick-list,
.browse-product .slick-list {
    background-color: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.inner-content-section.related-part .slick-track {
    margin-left: 0;
    margin-right: 0;
}
.collected-slider .slick-track,
.browse-product .slick-track {
    display: flex;
    align-items: stretch;
}

.collected-slider .slick-slide,
.browse-product .slick-slide {
    height: auto;
}
.collected-slider .slick-slide > .item,
.browse-product .slick-slide > .item {
    height: 100%;
}
.products-column-wrapper .products {
    background: var(--white);
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    margin: 0;
    padding: 5px 0 0 5px;
    list-style: none;
}
.products-column-wrapper .products::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 1px solid var(--colorLight);
    border-radius: var(--radius-lg);
    pointer-events: none;
}
.products-column-wrapper .products .product {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0px;
    flex: 1 1 0px;
    min-width: 0;
    z-index: 1;
    border-right: 1px solid var(--colorLight);
    border-bottom: 1px solid var(--colorLight);
    -webkit-transition: z-index 0.2s cubic-bezier(0.28, 0.12, 0.22, 1);
    transition: z-index 0.2s cubic-bezier(0.28, 0.12, 0.22, 1);
}
@media screen and (min-width: 320px) {
    .products-column-wrapper .products.mobile-column-2 .product {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 50%;
              flex: 0 0 50%;
      max-width: 50%; } 
}
@media screen and (min-width: 768px) {
    .products-column-wrapper .products.column-4 .product {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 33.3333333333%;
              flex: 0 0 33.3333333333%;
      max-width: 33.3333333333%; } 
}
  @media screen and (min-width: 1200px) {
    .products-column-wrapper .products.column-4 .product {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 25%;
              flex: 0 0 25%;
      max-width: 25%; } 
}

@media screen and (max-width: 399px) {
    .products-column-wrapper .products.mobile-column-2 .product {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
        max-width: 100%;
    }
}

.product-card {
  position: relative;
  background: var(--white);
  border: 1px solid transparent;
  padding: 20px 15px 22px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
}
/* .product-card:hover {
  border-color: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadowHover);
  z-index: 5;
} */
.product-labels {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 3;
}
.label-pill {
  font-size: 11px;
  font-weight: 400;
  padding: 3px 5px;
  border-radius: var(--radius-sm);
  color: var(--white);
  text-transform: uppercase;
  width: fit-content;
  line-height: 1.4;
}
.label-sale {
  background: var(--secondaryColor);
}
.label-sale-offer {
  position: absolute;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 600;
  width: 4.125rem;
  height: 4.125rem;
  top: 0;
  left: 0;
  color: #fff;
  background-color: var(--secondaryColor);
  border-radius: var(--radius-half);
  z-index: 3;
}
.label-recommended {
  background: #6c7293;
}
.label-organic {
  background: var(--green);
}
.wishlist-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-half);
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--textLighter);
  font-size: 14px;
  opacity: 0;
  -webkit-transform: translateX(8px);
  transform: translateX(8px);
  transition: var(--transition);
  z-index: 3;
}
.product-card:hover .wishlist-btn {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
}
.wishlist-btn.active,
.wishlist-btn:hover {
  color: var(--dangerColor);
  border-color: var(--dangerColor);
}
.product-thumb {
  display: block;
  text-align: center;
  margin-bottom: 16px;
  overflow: hidden;
}
.product-thumb img {
  height: 170px;
  object-fit: contain;
  -webkit-transition: -webkit-transform 0.4s ease;
  transition: transform 0.4s ease;
}
.product-card:hover .product-thumb img {
  -webkit-transform: scale(1.06);
  transform: scale(1.06);
}
.product-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 6px;
}
.product-title a {
  color: var(--heading);
}
.product-title a:hover {
  color: var(--secondaryColor);
}
.product-unit {
  font-size: 12px;
  color: var(--textLighter);
}
.stock-ok {
  font-size: 12px;
  color: var(--green);
  font-weight: 600;
  margin-bottom: 5px;
}
.rating-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}
.stars {
  color: var(--yellow);
  font-size: 12px;
  letter-spacing: 1px;
}
.stars .empty {
  color: var(--colorInfoDark);
}
.rating-count {
  font-size: 12px;
  color: var(--textLighter);
}
.price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
  margin-top: auto;
}
.price-now {
  font-family: var(--thm-font-secondary);
  font-size: var(--font-size-h6);
  font-weight: 600;
  color: var(--priceColor);
}
.price-old {
  font-size: var(--font-size-h6);
  color: var(--sub-heading);
  text-decoration: line-through;
}
.slider-part .price-row {
    /* display: block; */
}
.slider-part .price-now, .slider-part .price-old {
    display: inline-block;
    /* width: 100%; */
}
.add-cart {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--heading);
  border-radius: var(--radius-30);
  font-size: var(--font-size-h7);
  font-weight: 600;
  padding: 9px 14px;
  transition: var(--transition);
}
.add-cart:hover,
.add-cart.added {
  background: var(--primaryColor);
  border-color: var(--primaryColor);
  color: var(--white);
}
.variant-note {
  font-size: 11px;
  color: #71778e;
  margin: 8px 0 0;
  line-height: 1.4;
}

/************************************************************************************************
   Promo Section Part
*************************************************************************************************/
.pb-banner-promo {
    display: block;
    position: relative;
    overflow: hidden;
}

.promo-section .pb-banner-promo img {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transition: opacity 0.35s ease 0s;
    -o-transition: opacity 0.35s ease 0s;
    transition: opacity 0.35s ease 0s;
}

.promo-section .pb-banner-promo a {
    display: inline-block;
    position: relative;
    overflow: hidden;
    background: #000;
    vertical-align: top;
}

.promo-section .pb-banner-promo a:hover img {
    opacity: 0.5;
    filter: alpha(opacity=50);
}

.promo-section .pb-banner-promo a:before,
.promo-section .pb-banner-promo a:after {
    bottom: 20px;
    content: "";
    left: 20px;
    opacity: 0;
    position: absolute;
    right: 20px;
    top: 20px;
    -webkit-transition: opacity 0.35s ease 0s, transform 0.35s ease 0s;
    -o-transition: opacity 0.35s ease 0s, transform 0.35s ease 0s;
    transition: opacity 0.35s ease 0s, transform 0.35s ease 0s;
    z-index: 1;
}

.promo-section .pb-banner-promo a:before {
    border-bottom: 1px solid #fff;
    border-top: 1px solid #fff;
    -webkit-transform: scale(0, 1);
    -ms-transform: scale(0, 1);
    -o-transform: scale(0, 1);
    transform: scale(0, 1);
}

.promo-section .pb-banner-promo a:after {
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0);
}

.promo-section .pb-banner-promo a:hover:before,
.promo-section .pb-banner-promo a:hover:after {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

/************************************************************************************************
   Featured Categories
*************************************************************************************************/
.card-2 {
    position: relative;
    background: #F4F6FA;
    text-align: center;
    border: 1px solid #F4F6FA;
    border-radius: 10px;
    padding: 20px 0px 18px 0px;
    margin-bottom: 1.25rem;
    min-height: 180px;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}

.card-2:hover {
    background: #fff;
    border: 1px solid #e3cfbc;
    -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
    -webkit-transition: 0.2s;
    transition: 0.2s;
}

.featuredCategories .card-2 {
    margin-right: 12px;
    margin-left: 12px;
}

.card-2 h6 a {
    color: #483f3f;
}

.card-2:hover a {
    color: var(--primaryColor);
}

.card-2 figure {
    text-align: center;
    margin-bottom: 0.625rem;
}

.img-hover-scale img {
    -webkit-transition: -webkit-transform .5s;
    transition: -webkit-transform .5s;
    transition: transform .5s;
    transition: transform .5s, -webkit-transform .5s;
    transition: transform .5s, -webkit-transform .5s;
}

.card-2 figure img {
    border-radius: 10px;
    display: inline-block;
    max-width: 80px;
}


.product-view {
    max-width: 1000px;
    border-radius: 8px;
    background: var(--white)
}

.view-gallery {
    margin: 30px;
    position: relative
}

.view-label-group {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.view-label {
    font-size: var(--font-size-h6);
    padding: 6px 10px;
    margin-bottom: 6px;
    line-height: 13px;
    border-radius: 3px;
    text-align: center;
    text-transform: capitalize;
    color: var(--white)
}

.view-label:last-child {
    margin-bottom: 0px
}

.view-label.off {
    background: var(--red)
}

.view-label.new {
    background: var(--green)
}

.view-label.sale {
    background: var(--orange)
}

.view-label.feat {
    background: var(--purple)
}

.view-label.rate {
    background: var(--yellow)
}

.view-details {
    margin: 30px
}

.view-name {
    font-size: 26px;
    line-height: 34px;
    margin-bottom: 5px;
    text-transform: capitalize
}

.view-name a {
    color: var(--heading)
}

.view-name a:hover {
    color: var(--primaryColor)
}

.view-meta {
    margin-bottom: 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.view-meta p {
    font-size: 13px;
    margin-right: 20px;
    text-transform: uppercase;
    color: var(--placeholder)
}

.view-meta span,
.view-meta a {
    margin-left: 5px;
    color: var(--placeholder)
}

.view-meta a:hover {
    text-decoration: underline;
    color: var(--primaryColor)
}

.view-rating {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    margin-bottom: 15px
}

.view-rating i,
.view-rating a {
    font-size: var(--font-size-h6);
    margin-right: 3px;
    color: var(--gray)
}

.view-rating a {
    margin-left: 8px;
    white-space: nowrap;
    text-transform: capitalize;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.view-rating a:hover {
    color: var(--primaryColor);
    text-decoration: underline
}

.view-rating .active {
    color: var(--yellow)
}

.view-price {
    margin-bottom: 1.25rem
}

.view-price del {
    color: var(--red);
    margin-right: 25px
}

.view-price span {
    color: var(--primaryColor)
}

.view-price span small {
    font-size: 14px;
    font-weight: 400;
    text-transform: capitalize
}

.view-desc {
    margin-bottom: 1.563rem
}

.view-list-group {
    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;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    margin-bottom: 1.563rem
}

.view-list-group:last-child {
    margin-bottom: 0px
}

.view-list-title {
    font-weight: 500;
    margin-right: 15px;
    color: var(--heading);
    text-transform: capitalize
}

.view-tag-list {
    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
}

.view-tag-list li {
    margin-right: 8px
}

.view-tag-list li a {
    font-size: 14px;
    line-height: 12px;
    padding: 8px 10px;
    border-radius: 5px;
    letter-spacing: 0.3px;
    text-transform: capitalize;
    color: var(--text);
    background: var(--chalk);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.view-tag-list li a:hover {
    color: var(--white);
    background: var(--primaryColor)
}

.view-share-list {
    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
}

.view-share-list li {
    margin-right: 8px
}

.view-share-list li a {
    width: 35px;
    height: 35px;
    font-size: 16px;
    line-height: 35px;
    border-radius: 50%;
    text-align: center;
    color: var(--text);
    background: var(--chalk);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.view-share-list li a:hover {
    color: var(--white);
    background: var(--primaryColor)
}

.view-add-group {
    margin: 2.813rem 0px 0.938rem
}

.view-add-group .productAdd,
.view-add-group .action-input {
    height: 46px;
    line-height: 46px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--white);
    background: var(--primaryColor);
    margin-bottom: 15px;
}

.view-action-group {
    display: -ms-grid;
    display: grid;
    grid-gap: 15px;
    -ms-grid-columns: (minmax(200px, 1fr))[auto-fit];
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    position: relative
}

.view-action-group a {
    padding: 10px 0px;
    border-radius: 8px;
    color: var(--text);
    background: var(--border);
    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;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.view-action-group a i {
    font-size: 16px;
    margin-right: 8px
}

.view-action-group a span {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase
}

.view-wish.active {
    color: var(--white);
    background: var(--primaryColor)
}

.preview-slider {
    margin-bottom: 1.25rem
}

.preview-slider li img {
    width: 100%;
    border-radius: 8px
}

.thumb-slider li {
    margin: 0px 10px;
    cursor: pointer
}

.thumb-slider li img {
    width: 100%;
    border-radius: 8px;
    border: 1px solid var(--border)
}

.thumb-slider .slick-center img {
    border: 1px solid var(--primaryColor)
}

@media (max-width: 500px) {

    .view-gallery,
    .view-details {
        margin: 25px
    }

    .view-list-group {
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .view-list-title {
        margin: 0px 0px 10px
    }
}

@media (max-width: 767px) {
    .product-view {
        max-width: 480px
    }
}

.news-part {
    background-size: cover !important;
    padding: 70px 0px;
    position: relative;
    z-index: 1
}

.news-part::before {
    position: absolute;
    content: "";
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(linear, left top, right top, from(rgba(6, 23, 56, 0.8)), to(rgba(255, 50, 77, 0.8)));
    /* background: linear-gradient(to right, rgba(6, 23, 56, 0.8), rgba(232, 127, 59, 0.8)); */
    background: linear-gradient(to right, rgba(6, 23, 56, 0.8), rgba(255, 50, 77, 0.8));
    z-index: -1;
}

.news-text h2 {
    font-size: 35px;
    color: var(--white);
    margin-bottom: 5px
}

.news-text p {
    font-size: 18px;
    font-weight: 300;
    color: var(--white)
}

.news-form {
    width: 100%;
    padding: 6px;
    border-radius: 8px;
    background: var(--white);
    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
}

.news-form input {
    width: 100%;
    height: 50px;
    padding: 0px 20px;
    line-height: 50px
}

.news-form button span {
    width: 180px;
    font-size: 14px;
    font-weight: 500;
    padding: 12px 0px;
    border-radius: 8px;
    text-align: center;
    display: inline-block;
    text-transform: uppercase;
    color: var(--white);
    background: var(--primaryColor)
}

.news-form button span i {
    margin-right: 5px
}

@media (max-width: 575px) {
    .news-form {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }
}

@media (max-width: 767px) {
    .news-text {
        margin-bottom: 1.875rem
    }
}

@media (max-width: 991px) {
    .news-part {
        padding: 3.125rem 1.875rem 3.75rem
    }

    .news-part .container-fluid {
        padding: 0px
    }
}

.intro-part {
    padding: 80px 0px;
    background: var(--intro-bg)
}

.intro-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.intro-wrap:hover .intro-icon i {
    color: var(--white);
    background: var(--primaryColor)
}

.intro-icon {
    margin-right: 20px
}

.intro-icon i {
    width: 50px;
    height: 50px;
    font-size: 18px;
    line-height: 43px;
    border-radius: 50%;
    text-align: center;
    display: inline-block;
    color: var(--primaryColor);
    background: var(--white);
    border: 3px double var(--primaryColor);
    -webkit-box-shadow: var(--primary-bshadow);
    box-shadow: var(--primary-bshadow);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.intro-content h5 {
    font-size: 17px;
    margin-bottom: 8px;
    text-transform: capitalize
}

.intro-content p {
    font-size: var(--font-size-h6);
    line-height: 22px
}

@media (max-width: 767px) {
    .intro-part {
        padding: 60px 0px 30px
    }

    .intro-wrap {
        margin-bottom: 1.875rem
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .intro-part {
        padding: 80px 0px 50px
    }

    .intro-wrap {
        margin-bottom: 1.875rem
    }
}

.footer-part {
    background-color: var(--thm-body);
    padding-top: 55px
}

.small-container {
    max-width: 850px;
    margin: 0 auto;
}

.footer-part .footer-logo {
    text-align: center;
	display: inline-block;
	margin-bottom: 0;
}

.footer-part .footer-logo figure {
	margin-bottom: 0;
}

.footer-part .footer-logo img.img-fluid {
    display: inline-block;
	width: 110px;
}

.footer-part .links-menu {
    position: relative;
    margin: 20px 0px;
}

.footer-part .links-menu li {
    display: inline-block;
    padding: 20px 0px;
    margin: 0px 15px;
}

.footer-part .links-menu li a {
    font-size: 16px;
    line-height: 30px;
    font-weight: 600;
    color: #121111;
}

.footer-part .links-menu li a:hover {
    color: var(--primaryColor);
}

@media (max-width:575px) {
    .footer-part .links-menu li {
        padding: 5px 0px;
        margin: 0;
        width: 100%;
    }
}






















.footer-widget {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%
}

.footer-logo {
    margin-bottom: 1.563rem
}

.footer-logo img {
    width: 180px
}

.footer-desc {
    margin-bottom: 1.875rem
}

.footer-social li {
    display: inline-block;
    margin-right: 7px
}

.footer-social li:last-child {
    margin-right: 0px
}

.footer-social li a {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 16px;
    line-height: 2.5rem;
    border-radius: 50%;
    text-align: center;
    color: var(--primaryColor);
    background: var(--white);
    text-shadow: var(--primary-tshadow);
    -webkit-box-shadow: var(--primary-bshadow);
    box-shadow: var(--primary-bshadow);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.footer-social li a:hover {
    color: var(--white);
    background: var(--primaryColor)
}

.footer-title {
    margin-bottom: 1.563rem;
    letter-spacing: -0.3px;
    text-transform: capitalize
}

.footer-widget.contact {
    margin-left: 30px
}

.footer-contact li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 18px
}

.footer-contact li:last-child {
    margin-bottom: 0px
}

.footer-contact li i {
    font-size: 30px;
    margin-right: 15px;
    color: var(--primaryColor)
}

.footer-contact li p span {
    display: block
}

.footer-links {
    display: -ms-grid;
    display: grid;
    grid-gap: 50px;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr
}

.footer-links ul li {
    margin-bottom: 15px
}

.footer-links ul li:last-child {
    margin-bottom: 0px
}

.footer-links ul li a {
    color: var(--text);
    text-transform: capitalize;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.footer-links ul li a:hover {
    color: var(--primaryColor);
    text-decoration: underline
}

.footer-app {
    display: -ms-grid;
    display: grid;
    grid-gap: 10px;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr
}

.footer-app a img {
    width: 100%
}

.footer-bottom {
    margin-top: 30px;
    padding: 20px 35px 15px;
    border-radius: 8px 8px 0px 0px;
    background: var(--primaryColor);
    border-top: 1px solid var(--border);
    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
}

.footer-copytext {
    font-size: var(--font-size-h6);
    color: var(--white)
}

.footer-copytext a {
    color: var(--primary-chalk)
}

.footer-copytext a:hover {
    text-decoration: underline
}

.developby, .developby:hover {
    color: var(--white);
}

.footer-card a {
    margin-left: 10px
}

.footer-card a img {
    width: 50px;
    border-radius: 3px
}

@media (max-width: 768px) {
    .footer-part .container-fluid {
        padding: 0px 25px
    }

    .footer-widget.contact {
        margin-left: 0px
    }
}

@media (max-width: 1199px) {
    .footer-part {
        padding-top: 50px
    }

    .footer-widget {
        margin-bottom: 2.5rem
    }

    .footer-bottom {
        margin-top: 0.625rem
    }
}

@media (max-width: 991px) {
    .footer-bottom {
        padding: 25px 15px 75px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        text-align: center
    }

    .footer-copytext {
        margin-bottom: 0.625rem
    }

    .developby {
        margin-top: 0.625rem;
    }

    .footer-card a {
        margin: 0px 3px
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .footer-bottom {
        padding: 25px 30px 75px
    }
}

.blog-widget {
    margin-bottom: 1.875rem;
    margin-left: 5px;
    border-radius: 8px;
    padding: 18px 25px 25px;
    background: var(--white)
}

.blog-widget:last-child {
    margin-bottom: 0px
}

.blog-widget-title {
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
    position: relative;
    text-transform: capitalize;
    border-bottom: 1px solid var(--border)
}

.blog-widget-title::before {
    position: absolute;
    content: "";
    bottom: -2px;
    left: 0px;
    width: 50px;
    height: 2px;
    background: var(--primaryColor)
}

.blog-widget-form {
    position: relative
}

.blog-widget-form input {
    width: 100%;
    height: 2.813rem;
    padding: 0px 0.938rem 0px 3.75rem;
    border-radius: 8px;
    background: var(--chalk);
    border: 1px solid var(--border);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.blog-widget-form input:focus-within {
    border-color: var(--primaryColor)
}

.blog-widget-form button {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 2.813rem;
    height: 2.813rem;
    line-height: 2.813rem;
    text-align: center;
    color: var(--white);
    background: var(--primaryColor);
    border-radius: 8px 0px 0px 8px
}

.blog-widget-feed li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 1.563rem;
    padding-bottom: 1.563rem;
    border-bottom: 1px solid var(--border)
}

.blog-widget-feed li:last-child {
    margin: 0px;
    padding: 0px;
    border: none
}

.blog-widget-media img {
    width: 100px;
    border-radius: 8px;
    margin-right: 20px;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.blog-widget-text {
    font-size: 17px;
    line-height: 24px
}

.blog-widget-text a {
    color: var(--heading);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.blog-widget-text a:hover {
    color: var(--primaryColor)
}

.blog-widget-text span {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase
}

.blog-widget-category li {
    margin-bottom: 15px;
    padding-bottom: 0.938rem;
    border-bottom: 1px solid var(--border)
}

.blog-widget-category li:last-child {
    margin: 0px;
    padding: 0px;
    border: none
}

.blog-widget-category li:hover a {
    color: var(--primaryColor)
}

.blog-widget-category li:hover a span {
    background: var(--primaryColor)
}

.blog-widget-category li a {
    width: 100%;
    font-size: 17px;
    color: var(--text);
    text-transform: capitalize;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.blog-widget-category li a span {
    font-size: 14px;
    float: right;
    width: 30px;
    height: 30px;
    line-height: 32px;
    text-align: center;
    border-radius: 50%;
    color: var(--white);
    background: var(--heading);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.blog-widget-tag li {
    display: inline-block;
    margin: 0px 8px 12px 0px
}

.blog-widget-tag li a {
    font-size: 14px;
    padding: 5px 12px;
    border-radius: 3px;
    color: var(--text);
    background: var(--chalk);
    text-transform: capitalize;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.blog-widget-tag li a:hover {
    color: var(--white);
    background: var(--primaryColor)
}

.blog-widget-social li {
    display: inline-block;
    margin-right: 10px
}

.blog-widget-social li a {
    width: 2.813rem;
    height: 2.813rem;
    font-size: 18px;
    line-height: 2.813rem;
    text-align: center;
    border-radius: 3px;
    color: var(--white);
    background: var(--heading);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.blog-widget-social li a:hover {
    background: var(--primaryColor)
}

@media (max-width: 575px) {
    .blog-widget-social li {
        margin-right: 5px
    }

    .blog-widget-social li a {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 16px;
        line-height: 2.5rem
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .blog-widget-media img {
        width: 95px
    }

    .blog-widget-social li {
        margin-right: 5px
    }

    .blog-widget-social li a {
        width: 2.5rem;
        height: 2.5rem;
        font-size: var(--font-size-h6);
        line-height: 2.5rem
    }
}

@media (max-width: 991px) {
    .blog-widget {
        margin-left: 0px
    }
}

/* custom accordion */
.custom-accordion a.collapsed i.accor-down-icon:before {
    content: "\f107";
}



/*PRODUCT DETAILS*/
@media only screen and (min-width: 1024px) {
    .product-section .product-content > .product {
        padding: 2.5rem;
    }

    .product-content .product .product-header {
        margin-bottom: 1.875rem;
    }
}

@media only screen and (max-width: 991px) {
    .product-section .product-content {
        padding-bottom: 1.875rem;
    }
    .product-section .product-content > .product.mb-60 {
        margin-bottom: 0;
        padding: 0;
    }
}

.inner-content-section.product-section.single-gray,
.inner-content-section.related-part.single-gray {
    background-color: var(--thm-body);
}

.product-section .product-content > .product {
    background-color: #fff;
    border-radius: 8px;
    padding: 1.25rem;
}

.product-content .product .details-name {
    font-size: 1.5rem;
    margin-bottom: .9375rem;
}

@media only screen and (max-width: 991px) {
    .product-content .product .product-header {
        margin-bottom: .9375rem;
    }
    .product-content .product .details-name {
        margin-bottom: 0;
    }
}

.product-content .product .seller-name-wrapper .seller-name-title {
    color: var(--colorInfoDark);
}

.product-content .product .icon-messages {
    padding: 1.875rem;
    width: 100%;
    background-color: var(--thm-body);
    border-radius: 4px;
}

.product-content .product .icon-messages ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.product-content .product .icon-messages ul li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.product-content .product .icon-messages ul li + li {
    margin-top: 1.575rem;
}

.product-content .product .icon-messages ul li .icon {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    font-size: 1rem;
    margin-right: 1.25rem;
}

.product-content .product .icon-messages ul li .icon i {
    position: relative;
    top: -1px;
}

.product-content .product .icon-messages ul li .message {
    font-size: .75rem;
    line-height: 1.5;
}

.detail-gallery .product-image-slider {
    background-color: #fff;
    margin-bottom: 1.875rem;
    border-radius: 15px;
    border: 1px solid #ececec;
    overflow: hidden;
}

.detail-gallery .product-image-slider figure {
    cursor: zoom-in;
    margin-bottom: 0;
}

.detail-gallery .product-image-slider img {
    opacity: 1;
    border-radius: 16px;
    background-color: #ffffff;
}

.detail-gallery .product-image-slider.slider-nav-thumbnails {
    background: none;
    border-radius: 0;
}

.detail-gallery .product-image-slider button.slick-arrow {
    background: none;
    border: 0;
    padding: 0;
    font-size: 14px;
}

.detail-gallery .product-image-slider button.slick-arrow i {
    color: #adadad;
}

.detail-gallery {
    position: relative;
}

.zoomContainer,
.zoomWindow {
    z-index: 9999;
}

.slick-slider-pagination {
    display: none;
}

.slick-slider-pagination > div {
    display: inline-block;
    padding: 0 7px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    color: #fff;
    background-color: rgba(0,0,0,.4);
    border-radius: 10px;
}

@media only screen and (max-width: 1024px) {
    .zoomContainer {
        display: none
    }
}

@media only screen and (max-width: 991px) {
    .detail-gallery {
        width: 100vw;
        max-width: 100vw;
        margin: 0 0 0 calc(50% - 50vw);
    }

    .slick-slider-pagination {
        display: block;
        position: absolute;
        bottom: 15px;
        left: 0;
        right: 0;
        text-align: center;
    }
    .slider-nav-thumbnails button {
        display: none !important;
    }

    .slider-nav-thumbnails {
        display: none;
        margin-bottom: 1.563rem;
    }
}

@media only screen and (max-width: 575px) {
    .detail-gallery .product-image-slider {
        border-radius: 0
    }

    .detail-gallery {
        margin-left: calc(50% - 50vw);
    }
}

.pb-social-tigger {
    position: relative;
    margin: 1% auto;
    height: 50px;
    width: 50px;
}

.detail-gallery .pb-social-tigger {
    position: absolute;
    left: -135px;
    top: 45%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 2;
}

.pb-social-tigger li {
    height: 100%;
}

.pb-social-tigger li a {
    width: 50px;
    height: 50px;
    line-height: 50px;
    background-color: var(--primaryColor);
    text-align: center;
    color: #FFFFFF;
    font-size: 1em;
    border-radius: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    opacity: 0;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    visibility: hidden;
}

.pb-social-tigger.active li a {
    opacity: 1;
    visibility: visible;
}

.pb-social-tigger li a.pb-google-plus {
    background-color: #DD4B39;
}

.pb-social-tigger li a.pb-facebook {
    background-color: #3B5999;
}

.pb-social-tigger li a.pb-twitter {
    background-color: #55ACEE;
}

.pb-social-tigger li a.pb-instagram {
    background-color: #E4405F;
}

.pb-social-tigger li a.tigger-icon {
    opacity: 1;
    -webkit-transform: translate(0%, 0%) !important;
    -ms-transform: translate(0%, 0%) !important;
    transform: translate(0%, 0%) !important;
    visibility: visible;
}

.pb-social-tigger li:nth-child(1) a {
    -webkit-transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.6s;
    -o-transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.6s;
    transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.6s;
}

.pb-social-tigger.active li:nth-child(1) a {
    -webkit-transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.6s;
    -o-transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.6s;
    transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.6s;
    -webkit-transform: translate(0, -80px);
    -ms-transform: translate(0, -80px);
    transform: translate(0, -80px);
}

.pb-social-tigger li:nth-child(2) a {
    -webkit-transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.9s;
    -o-transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.9s;
    transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.9s;
}

.pb-social-tigger.active li:nth-child(2) a {
    -webkit-transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.9s;
    -o-transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.9s;
    transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.9s;
    -webkit-transform: translate(70px, -40px);
    -ms-transform: translate(70px, -40px);
    transform: translate(70px, -40px);
}

.pb-social-tigger li:nth-child(3) a {
    -webkit-transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 1.2s;
    -o-transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 1.2s;
    transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 1.2s;
}

.pb-social-tigger.active li:nth-child(3) a {
    -webkit-transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 1.2s;
    -o-transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 1.2s;
    transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 1.2s;
    -webkit-transform: translate(70px, 40px);
    -ms-transform: translate(70px, 40px);
    transform: translate(70px, 40px);
}

.pb-social-tigger li:nth-child(4) a {
    -webkit-transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 1.5s;
    -o-transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 1.5s;
    transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 1.5s;
}

.pb-social-tigger.active li:nth-child(4) a {
    -webkit-transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 1.5s;
    -o-transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 1.5s;
    transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 1.5s;
    -webkit-transform: translate(0, 80px);
    -ms-transform: translate(0, 80px);
    transform: translate(0, 80px);
}


.details-label-group {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.details-label {
    font-size: 14px;
    padding: 6px 10px;
    margin-bottom: 6px;
    line-height: 13px;
    border-radius: 3px;
    text-transform: capitalize;
    text-align: center;
    color: var(--white);
}

.details-label.new {
    background: var(--green);
}

.details-label.off {
    background: var(--red);
}

.detail-gallery .zoom-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2;
    font-size: 22px;
    opacity: 0.6;
}

.slider-nav-thumbnails .slick-list {
    margin: 0 -10px;
}

.slider-nav-thumbnails .slick-slide {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
}

.slider-nav-thumbnails .slick-slide img {
    border-radius: 17px;
}

.slider-nav-thumbnails .slick-slide.slick-current::before {
    border-bottom: 5px solid #333;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    content: "";
    height: 0;
    left: 50%;
    margin-left: -5px;
    position: absolute;
    top: -6px;
    width: 0;
}

.slider-nav-thumbnails .slick-slide.slick-current img {
    border: 2px solid #a2d2c9;
}

.slider-nav-thumbnails div.slick-slide {
    margin: 0 10px;
}

.slider-nav-thumbnails button {
    opacity: 0;
}

.slider-nav-thumbnails button.slick-arrow {
    margin: 0;
    border: 0;
    background: #F2F3F4;
    border-radius: 40px;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 24px;
    z-index: 9;
    color: #7E7E7E;
}

.slider-nav-thumbnails button.slick-arrow:hover {
    color: #fff;
    background-color: var(--primaryColor);
}

.slider-nav-thumbnails button.slick-arrow.slick-prev {
    left: -20px;
}

.slider-nav-thumbnails button.slick-arrow.slick-next {
    right: -20px;
}

.slider-nav-thumbnails:hover button {
    opacity: 1;
}

.slider-nav-thumbnails .slick-prev,
.slider-nav-thumbnails .slick-next {
    font-size: 12px;
    position: absolute;
    top: 50%;
    line-height: 20px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

/* Product Detail Right */
.details-content {
    padding: 35px 0;
    border-radius: 8px;
    background: var(--white);
}

@media only screen and (max-width: 991px) {
   .details-content { padding: 0 } 
}

.details-name {
    font-size: 26px;
    line-height: 34px;
    margin-bottom: 5px;
    text-transform: capitalize;
}

.details-name a {
    color: var(--heading);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.details-meta {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.details-meta p {
    font-size: var(--font-size-h6);
    margin-right: 20px;
    white-space: nowrap;
    color: var(--placeholder);
}

.details-meta span,
.details-meta a {
    color: var(--placeholder);
}

.details-meta a:hover {
    text-decoration: underline;
    color: var(--primaryColor);
}

.details-icons-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.details-rating {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    margin-bottom: 15px;
}

.details-rating i,
.details-rating a {
    font-size: var(--font-size-h6);
    margin-right: 3px;
    color: var(--gray);
}

.details-rating .active {
    color: var(--yellow);
}

.details-rating a {
    margin-left: 8px;
    white-space: nowrap;
    text-transform: capitalize;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.details-rating a:hover {
    color: var(--primaryColor);
    text-decoration: underline;
}

.details-icons-wrapper .details-action-group .details-wish {
    display: inherit;
    padding: 0 15px;
}

.details-icons-wrapper .details-action-group {
    -ms-grid-columns: (minmax(35px, 1fr))[auto-fit];
    grid-template-columns: repeat(auto-fit, minmax(35px, 1fr));
    display: flex;
}

.details-icons-wrapper .details-action-group .details-wish {
    background: none;
    border: 1px solid var(--border);
}

.details-icons-wrapper .details-action-group .details-wish i {
    font-size: 16px;
    margin-right: 0;
}

/* Share Button */
.details-icons-wrapper .details-action-group label {
    position: relative;
    width: 80px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    background: none;
    border: 1px solid var(--border);
    text-transform: uppercase;
    display: block;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
}

.details-icons-wrapper .details-action-group label::before {
    content: 'Cancel';
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: #ffffff;
    font-size: 13px;
    left: 0;
    top: 0;
    opacity: 0;
}

#check {
    display: none;
}

#check:checked~label::before {
    opacity: 1;
}

.details-icons-wrapper .media-icons {
    position: absolute;
    left: 50%;
    top: -70px;
    transform: translateX(-30%);
    background: var(--chalk);
    height: 110%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    border-radius: 4px;
    padding: 4px 10px;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

#check:checked~.media-icons {
    opacity: 1;
    pointer-events: auto;
    top: -45px;
}

.details-icons-wrapper .media-icons::before {
    content: '';
    width: 18px;
    height: 18px;
    position: absolute;
    left: 50%;
    background: var(--chalk);
    bottom: -9px;
    transform: translateX(-50%) rotate(45deg);
    z-index: -1;
}

.details-icons-wrapper .media-icons a {
    display: inline-block;
    background-color: transparent;
    padding: 0;
    margin-right: 15px;
    transition: all 0.3s ease;
}

.details-icons-wrapper .media-icons a:last-child {
    margin-right: 0;
}

.details-icons-wrapper .media-icons a i {
    margin-right: 0;
}

.details-icons-wrapper .media-icons a:hover {
    transform: translateY(-2px);
}

.details-icons-wrapper .media-icons a:nth-child(1):hover {
    color: #426782;
}

.details-icons-wrapper .media-icons a:nth-child(2):hover {
    color: #1da1f2;
}

.details-icons-wrapper .media-icons a:nth-child(3):hover {
    color: #e1306c;
}

.details-icons-wrapper .media-icons a:nth-child(4):hover {
    color: #ff0000;
}


.details-price del, 
.cart-pro-price del {
    color: #A8A1A5;
    margin-right: 10px;
    font-size: 16px;
    font-weight: 400;
}

@media only screen and (max-width:767px) {
    .details-price del, 
    .cart-pro-price del {
        display: block;
    }
}

.details-price span, 
.cart-pro-price span {
    color: var(--primaryColor);
    font-size: 20px;
    white-space: nowrap;
}

.desktop-price-stack {
    display: flex;
    align-items: center;
    gap: 8px;
}

.desktop-discount-badge {
    padding: 2px 5px;
    border-radius: 2px;
    background: #fff0f2;
    color: #ff334f;
    font-size: 12px;
    white-space: nowrap;
}

.details-desc {
    margin-bottom: 1.563rem;
}

.details-list-group {
    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;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    margin-bottom: 1.563rem;
}

.details-list-group.attr-size div > label {
    
    margin-right:7px;
    color:var(--text);
    line-height: 32px;
    text-align: center;
    cursor: pointer;
}

.details-list-group.attr-size div > label span {
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 0 10px;
}

.details-list-group.attr-size div > label input {
    position:absolute;
    top:-20px;
}

.details-list-group.attr-size  input:checked + span {
    background-color: var(--primaryColor);
    border-color: var(--primaryColor);
    color:#F7F7F7;
}


.details-list-title {
    font-weight: 500;
    margin-right: 15px;
    color: var(--heading);
    text-transform: capitalize;
}

.details-tag-list {
    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;
}

.details-tag-list li {
    margin-right: 8px;
}

.details-tag-list li a {
    font-size: 14px;
    line-height: 12px;
    padding: 8px 10px;
    border-radius: 5px;
    letter-spacing: 0.3px;
    text-transform: capitalize;
    color: var(--text);
    background: var(--chalk);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.attr-color,
.attr-size {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.list-filter {
    margin: 0;
    padding: 0;
    list-style: none;
}

.list-filter li {
    display: inline-block;
}

.list-filter li a {
    color: #555;
    display: block;
    min-width: 30px;
    text-align: center;
    position: relative;
    transition: all 0.5s ease-out 0s;
    -webkit-transition: all 0.5s ease-out 0s;
}

.color-filter.list-filter a span {
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 40px;
}

.color-filter.list-filter a span.product-color-white {
    border: 1px solid #ddd;
}

.color-filter.list-filter li.active a::before {
    content: "";
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    position: absolute;
    right: 3px;
    top: -3px;
    background: #4cd964;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid #fff;
}

.size-filter.list-filter li a {
    color: #7E7E7E;
    height: 32px;
    line-height: 32px;
    min-width: 2.5rem;
    text-align: center;
    border-radius: 5px;
    padding: 0 9px;
    background: #fff;
}

.size-filter.list-filter li a:hover,
.size-filter.list-filter li.active a {
    color: #fff;
    background-color: var(--primaryColor);
    border-color: var(--primaryColor);
}

.details-add-group {
    margin: 25px 0px 15px;
}

.detail-product-group .productAction {
    width: 120px;
}

.details-add-group .productAdd,
.details-add-group .detail-productAdd,
.details-add-group .pb-action-input {
    padding: 10px 0px;
    color: var(--white);
    background: var(--primaryColor);
    text-transform: uppercase;
}

.details-action-group {
    display: -ms-grid;
    display: grid;
    grid-gap: 10px;
    -ms-grid-columns: (minmax(123px, 1fr))[auto-fit];
    grid-template-columns: repeat(auto-fit, minmax(127px, 1fr));
    position: relative;
}

.details-action-group.addToCart {
    width: 50%;
    margin: 30px auto 0 auto;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .details-action-group.addToCart {
        width: 60%;
    }
}

.details-add-group .detail-productAdd {
    font-size: 13px;
}

.details-action-group a,
.details-action-group label {
    padding: 10px 0px;
    border-radius: 6px;
    color: var(--text);
    background: var(--chalk);
    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;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.details-action-group a i {
    font-size: 13px;
    margin-right: 8px;
}

.details-action-group a span {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.details-action-group a:hover {
    color: var(--primaryColor);
}

.details-action-group.details-add-group a i {
    margin-right: 0;
}


/* Drawer */
.detail-product-info .drawer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 80%;
    background-color: var(--white);
    z-index: 1001;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease-in-out;
    overflow: auto;
    padding: 30px;
    color: #434343;
    transform: translateY(100%);
}

.detail-product-info .drawer.open {
    padding-top: 0;
    transform: translateY(0);
}

.detail-product-info .backdrop,
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
    display: block;
}

.detail-product-info .backdrop.visible,
#overlay.visible {
    opacity: 1;
    pointer-events: all;
}

.detail-product-info .close_drawer_button {
    float: right;
    cursor: pointer;
    color: #434343;
    font-size: var(--font-size-h4);
}

.detail-product-info .toggleDrawer {
    cursor: pointer;
    color: #434343;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    font-size: var(--font-size-h6);
    padding: 10px 0;
    margin-bottom: 0.625rem;
    border-bottom: 1px solid #f8f0f0;
}

.detail-product-info .toggleDrawer i {
    color: #434343;
    font-size: var(--font-size-h5);
}

.detail-product-info .toggleDrawer:nth-last-of-type {
    margin-bottom: 0;
}

.detail-product-info .card {
    border: none;
    border-radius: 0;
}

.detail-product-info .card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    position: sticky;
    top: 0;
    padding: 20px 0;
    background: #fff;
    width: 100%;
    left: 0;
    right: 0;
}

.detail-product-info .card .card-header .h5 {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 0;
}

.detail-product-info .card .card-body {
    font-size: 16px;
    padding: 0;
}


/* Delivery Seller */
.module-shopwidget {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}

.delivery-seller {
    display: inline-block;
    vertical-align: top;
}

.seller-container {
    background-color: #ffffff;
    font-size: 12px;
    color: #212121;
}

.seller-name-retail {
    padding: 0 16px 10px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}

.seller-name-retail .seller-name-wrapper {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.seller-name-title {
    color: var(--placeholder);
    font-size: var(--font-size-h6);
    margin-bottom: 0;
    line-height: 1;
}

.seller-name-detail {
    font-size: var(--font-size-h6);
}

.link-theme-black:active,
.link_theme-black:focus,
.link-theme-black:hover,
.link-theme-black:visited {
    color: #424242;
    text-decoration: none;
}

.seller-name-detail .seller-badge {
    display: block;
    margin-top: 4px;
    max-height: 16px;
}

.seller-info-pc {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-top: 1px solid #eff0f5;
}

.seller-info-pc .info-content {
    padding: 8px 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-left: 1px solid #eff0f5;
    font-size: 14px;
    text-align: left;
    display: table-cell;
    width: 33.3333333333%;
    vertical-align: top;
    position: relative;
    cursor: pointer;
}

.seller-info-pc .info-content:first-child {
    border-left: none;
    padding-left: 16px;
}

.seller-info-pc .info-content .seller-info-title {
    margin-bottom: 1.25rem;
    font-size: 12px;
    line-height: 14px;
    height: 28px;
    overflow: hidden;
    color: #757575;
}

.seller-info-pc .info-content .seller-info-value {
    font-size: 26px;
    line-height: 30px;
}

.seller-info-pc .info-content .seller-info-value.rating-neutral,
.seller-info-pc .info-content .seller-info-value.rating-positive {
    color: #212121;
}

.seller-info-pc .info-content .seller-info-value.gray-text {
    font-size: 12px;
    color: #ccc;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 30px;
}

.seller-link {
    padding: 15px 0 0;
    text-align: center;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    border-top: 1px solid #eff0f5;
    text-transform: capitalize;
}

@media (max-width: 991px) {
    .module-shopwidget {
        margin-top: 25px;
    }
}

.delivery {
    font-size: 14px;
    color: #212121;
}

.delivery-header {
    display: table;
    padding: 20px 16px 2px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.delivery-header-title {
    display: table-cell;
    font-size: 12px;
    color: #757575;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    width: 300px;
}

.delivery-header-tooltip {
    display: table-cell;
    text-align: right;
}

.delivery-tooltip-icon {
    color: #757575;
    cursor: pointer;
}

.delivery_header {
    margin-bottom: 8px;
    border-bottom: 1px solid #eff0f5;
}

.delivery-location,
.delivery-option .delivery-option-item {
    padding: 10px 16px;
}

.delivery-location .location-current {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.location-body {
    display: table;
    width: 100%;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.location-icon.flexicon {
    display: table-cell;
    vertical-align: middle;

}

.flexicon {
    position: relative;
    width: 26px;
}

.flexicon:before {
    background-image: url(../images/collection.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 26px;
    height: 30px;
    position: absolute;
    content: "";
    display: block;
    top: 0;
    left: 0;
}

.delivery-location .location-address {
    background-position: 0 0;
    word-break: break-word;
    line-height: 1.15;
    padding-left: 10px;
}

.location-link-change {
    font-size: 13px;
    display: table-cell;
    vertical-align: middle;
    text-align: right;
    text-transform: uppercase;
    white-space: nowrap;
    padding-left: 10px;
}

.delivery-content {
    position: relative;
    padding-bottom: 0.25rem;
}

.delivery-option-item__body {
    display: table;
    border-collapse: collapse;
    width: 100%;
}

.delivery-option-item__info {
    display: table-cell;
    vertical-align: middle;
    padding-left: 10px;
}

.delivery-option-item__icon.homeDelivery::before {
    background-position: -30px 0;
}

.delivery-option-item__icon.fast-delivery::before {
    background-position: -71px 0;
}

.delivery-option-item__icon.cash-on-delivery::before {
    background-position: -112px 0;
}

.delivery-option-item__icon.daysReturn::before {
    background-position: 0 -30px;
}

.delivery-option-item__icon.warranty::before {
    background-position: -35px -30px;
}

.delivery-option-item__title {
    line-height: 14px;
}

.delivery-option-item__subtitle,
.delivery-option-item__time {
    color: #9e9e9e;
    font-size: 12px;
    line-height: 12px;
    margin-top: 5px;
}

.delivery-option-item__icon {
    position: relative;
    display: table-cell;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.delivery-option-item__shipping-fee {
    font-weight: 500;
    padding-left: 5px;
    display: table-cell;
    text-align: right;
    white-space: nowrap;
}

.warranty {
    font-size: 14px;
    color: #212121;
}

.warranty-option-item {
    padding: 10px 16px;
}

.product-more-infor li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 0 10px;
    position: relative;
}

.product-more-infor li span {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 165px;
    flex: 0 0 165px;
    display: inline-block;
}

.product-more-infor li ::before {
    position: absolute;
    left: -14px;
    top: 9px;
    content: "";
    height: 6px;
    width: 6px;
    border-radius: 100%;
    background-color: #9b9b9b;
}

/* Review Section */
.product-details-frame {
    padding: 50px;
    border-radius: 8px;
    margin-bottom: 1.875rem;
    background: var(--white);
}

.comments-area h4 {
    margin-bottom: 35px;
    color: #2a2a2a;
    font-size: 18px;
}

.comments-area .comment-list {
    padding-bottom: 3rem;
}

.comments-area .comment-list:last-child {
    margin-bottom: 0px;
}

.comments-area .comment-list .single-comment {
    margin: 0 0 15px 0;
    border: 1px solid #f2f2f2;
    border-radius: 15px;
    padding: 20px;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}

.comments-area .comment-list .single-comment:last-child {
    margin-bottom: 0;
}

.comments-area .comment-list .single-comment:not(:last-child) {
    border-bottom: 1px solid #ececec;
}

.comments-area .comment-list .single-comment:hover {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    -webkit-transition: 0.2s;
    transition: 0.2s;
}

.comments-area .thumb {
    margin-right: 20px;
}

.comments-area .thumb figure {
    border-radius: 50%;
    border: 2px solid var(--primaryColor);
    width: 50px;
    height: 50px;
}

.comments-area .thumb img {
    width: 65px;
    border-radius: 50%;
    border: 2px solid var(--white);
}

.comments-area .comment-list .single-comment .reply {
    opacity: 0;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}

.comments-area .comment-list .single-comment:hover .reply {
    opacity: 1;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}


/* Rating Review */
.product-rate {
    background-image: url("../images/rating-stars.png");
    background-position: 0 -12px;
    background-repeat: repeat-x;
    height: 12px;
    width: 60px;
    transition: all 0.5s ease-out 0s;
    -webkit-transition: all 0.5s ease-out 0s;
}

.product-rate.review-rating {
    float: right;
}

.product-rating {
    height: 12px;
    background-repeat: repeat-x;
    background-image: url("../images/rating-stars.png");
    background-position: 0 0;
}

.progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: var(--primaryColor);
    transition: width .6s ease;
}

.progress {
    display: flex;
    height: 1rem;
    overflow: hidden;
    font-size: .75rem;
    background-color: #FFFFFF;
    border-radius: .25rem;
}

.progress+.progress {
    margin-top: 1rem;
}

.progress span {
    line-height: 16px;
    background: var(--body);
    padding-right: 10px;
    width: 2.813rem;
}

/* Product Detail Page View Styles */
    .pb-action-plus.disabled {
        pointer-events: none; /* Disable click */
        opacity: 0.5; /* Visual indication of being disabled */
    }

    #quantityGroup.quantity-hidden {
        display: none !important;
    }

    .detail-productAdd:disabled,
    .detail-productAdd.out-of-stock {
        /* background-color: #6c757d;
        border-color: #6c757d;
        color: #fff; */
        background-color: var(--chalk);
        border-color: var(--chalk);
        color: var(--text);
        cursor: not-allowed;
        opacity: 1;
    }


    /* Container for all attributes */
    .product-attributes-wrapper {
        display: flex;
        flex-direction: column;
        gap: 1.25rem; /* Space between Size group and Color group */
        margin: 1.5rem 0;
    }

    /* Individual attribute row/group */
    .attribute-group {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    /* Label: "Size: Medium" */
    .attribute-title-wrap {
        font-size: 0.95rem;
        color: #222;
        margin-bottom: 0.5rem;
    }

    .attribute-title-wrap .attribute-name {
        font-weight: 600;
    }

    .attribute-title-wrap .selected-attribute-value {
        font-weight: 700;
        color: var(--primaryColor);
        margin-left: 4px;
    }

    /* Container for the pill buttons */
    .attribute-values-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Hidden native radio button */
    .attribute-pill input[type="radio"] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
        pointer-events: none;
    }

    /* The clickable Pill button */
    .attribute-pill {
        cursor: pointer;
        margin: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 48px;
        height: 38px;
        padding: 0 16px;
        background-color: var(--white);
        border: 1px solid #dcdfe6;
        border-radius: 6px;
        font-size: 0.9rem;
        font-weight: var(--font-weight-medium);
        color: #333333;
        transition: all 0.2s ease-in-out;
        user-select: none;
    }

    /* Hover state */
    .attribute-pill:hover:not(.is-disabled) {
        border-color: var(--primaryColor);
        color: #333333;
    }

    /* Selected state (using modern CSS :has selector) */
    .attribute-pill:has(input:checked) {
        background-color: var(--primaryColor);
        border-color: var(--primaryColor);
        color: var(--white);
        box-shadow: 0 2px 6px rgba(255, 42, 81, 0.3);
    }

    .attribute-pill:has(input:checked) .pill-text {
        color: var(--white);
    }

    /* Fallback for active state if adding an .active class via JS */
    .attribute-pill.active {
        background-color: var(--primaryColor);
        border-color: var(--primaryColor);
        color: var(--white);
    }

    /* Disabled / Out of stock state */
    .attribute-pill.is-disabled,
    .attribute-pill input:disabled + .pill-text {
        background-color: #f8f9fa;
        border-color: #e9ecef;
        color: #adb5bd;
        cursor: not-allowed;
        text-decoration: line-through;
        opacity: 0.7;
    }

    .reviews-tab-layout .reviews-section-title {
        color: #212121;
        font-size: 20px;
        font-weight: 600;
    }

    .reviews-section-title span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 28px;
        height: 28px;
        margin-left: 6px;
        padding: 0 8px;
        border-radius: 14px;
        background: #eef2f5;
        color: #616161;
        font-size: 12px;
        vertical-align: middle;
    }

    .review-list-card,
    .review-summary-card {
        border: 1px solid #eceff1;
        border-radius: 6px;
        background: var(--white);
        box-shadow: 0 2px 8px rgba(33, 33, 33, 0.04);
    }

    .review-item {
        padding: 20px;
        border-bottom: 1px solid #f0f2f5;
    }

    .review-item:last-child {
        border-bottom: 0;
    }

    .review-avatar {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin-right: 14px;
        border-radius: 50%;
        background: #f1f5f9;
        color: #475569;
        font-size: 14px;
        font-weight: 700;
    }

    .reviewer-name {
        color: #212121;
        font-size: 14px;
    }

    .review-item .product-rate {
        flex-shrink: 0;
        margin-left: 16px;
    }

    .review-item .desc p {
        margin-top: 10px;
        color: #616161;
        line-height: 1.6;
    }

    .review-summary-card {
        padding: 24px;
    }

    .review-summary-card .d-flex.mb-30 {
        align-items: center;
        padding-bottom: 18px;
        border-bottom: 1px solid #f0f2f5;
    }

    .review-summary-card .progress {
        display: flex;
        align-items: center;
        height: 22px;
        margin-bottom: 10px;
        gap: 10px;
        background: transparent;
    }

    .review-summary-card .progress > span {
        flex: 0 0 42px;
        color: #757575;
        font-size: 12px;
    }

    .review-summary-card .progress-bar {
        flex: 0 0 auto;
        height: 7px;
        border-radius: 4px;
        background: #f59e0b;
        color: transparent;
        font-size: 0;
    }

    @media (max-width: 767px) {
        .review-item {
            padding: 16px;
        }

        .review-item .d-flex.justify-content-between {
            align-items: flex-start;
            gap: 10px;
        }

        .review-item .product-rate {
            margin-left: 0;
        }
    }

    @media (max-width: 991px) {
        .desktop-price-stock {
            display: none !important;
        }

        .larg-image {
            position: relative;
        }

        .mobile-detail-header {
            position: absolute;
            top: 8px;
            right: 12px;
            left: 12px;
            padding: 0 10px;
            z-index: 20;
            display: flex;
            align-items: center;
            justify-content: space-between;
            pointer-events: none;
        }

        .mobile-detail-actions {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .mobile-detail-icon {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            padding: 0;
            border: 0;
            border-radius: 50%;
            background: var(--chalk);
            color: var(--heading);
            font-size: 15px;
            text-decoration: none;
            pointer-events: auto;
        }

        .mobile-detail-icon:hover,
        .mobile-detail-icon:focus {
            color: var(--heading);
            background: rgb(255, 229, 233);
        }

        .mobile-cart-count {
            position: absolute;
            top: -3px;
            right: -3px;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 16px;
            height: 16px;
            padding: 0 4px;
            border-radius: 10px;
            background: var(--primaryColor);
            color: #fff;
            font-size: 10px;
            line-height: 1;
        }

        .mobile-promo-line {
            margin-bottom: 2px;
            color: #ff334f;
            font-size: 14px;
        }

        .mobile-price-actions,
        .mobile-price-stack,
        .mobile-product-actions,
        .mobile-stock-sku-row {
            display: flex;
            align-items: center;
        }

        .mobile-price-actions {
            justify-content: space-between;
            gap: 12px;
        }

        .mobile-price-availability {
            font-family: var(--thm-font-secondary);
            flex: 0 0 auto;
            margin-left: auto;
            text-align: right;
            white-space: nowrap;
            font-size: var(--font-size-body);
        }

        .mobile-price-stack {
            flex-wrap: wrap;
            gap: 7px;
            min-width: 0;
        }

        .mobile-price-container {
            font-family: var(--thm-font-secondary);
            display: inline-flex;
            align-items: baseline;
            flex-wrap: wrap;
            gap: 7px;
        }

        .mobile-current-price {
            color: #ff334f;
            font-size: 21px;
            font-weight: 700;
            white-space: nowrap;
        }

        .mobile-original-price {
            color: #929292;
            font-size: 13px;
            white-space: nowrap;
        }

        .mobile-discount-badge {
            padding: 2px 5px;
            border-radius: 2px;
            background: #fff0f2;
            color: #ff334f;
            font-size: 12px;
            white-space: nowrap;
        }

        .mobile-product-actions {
            flex: 0 0 auto;
            gap: 14px;
        }

        .mobile-summary-action {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 32px;
            padding: 0;
            border: 0;
            background: transparent;
            color: #858585;
            font-size: 18px;
        }

        .mobile-wishlist-button[aria-pressed="true"] {
            color: #ff334f;
        }

        .mobile-product-name {
            font-family: var(--thm-font-secondary);
            font-size: var(--font-size-h5);
            font-weight: var(--font-weight-medium);
            display: flex;
            align-items: flex-start;
            gap: 7px;
            margin-top: 9px;
            color: var(--heading);
            line-height: 1.45;
        }

        .mobile-product-brand {
            margin: 9px 0 0;
            color: #727272;
            font-size: 13px;
            line-height: 1.4;
        }

        .mobile-product-brand span {
            color: #333;
        }
        
        .mobile-stock-sku-row {
            justify-content: space-between;
            gap: 8px;
            margin-top: 8px;
            color: #727272;
            font-size: 12px;
        }

        .mobile-stock-sku-row .product-available {
            font-family: var(--thm-font-secondary);
            text-align: right;
        }

        .service-drawer-trigger {
            gap: 10px;
        }

        .service-drawer-summary {
            display: flex;
            flex: 1 1 auto;
            flex-direction: column;
            margin-left: auto;
            color: #333;
            font-size: 12px;
            line-height: 1.35;
        }

        .service-policy-item {
            border-bottom: 1px solid #eceff1;
        }

        .service-policy-item > summary {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 2px;
            padding: 12px 22px 12px 14px;
            color: #333;
            cursor: pointer;
            list-style: none;
        }

        .service-policy-item > summary::-webkit-details-marker {
            display: none;
        }

        .service-policy-item > summary::before {
            position: absolute;
            left: 2px;
            content: '\25AA';
            color: #555;
        }

        .service-policy-item > summary::after {
            position: absolute;
            top: 12px;
            right: 2px;
            content: '\f107';
            color: #888;
            font-family: 'Line Awesome Free';
            font-weight: 900;
        }

        .service-policy-item[open] > summary::after {
            content: '\f106';
        }

        .service-policy-item > summary small {
            color: #858585;
            font-size: 11px;
        }

        .service-policy-copy {
            padding: 14px 15px;
            background: #f7f7f9;
            color: #666;
            font-size: 13px;
            line-height: 1.4;
        }

        .service-policy-copy p {
            margin: 0 0 14px;
        }

        .service-policy-copy ul {
            margin: 0 0 14px;
            padding-left: 16px;
        }

        .service-policy-copy li {
            margin-bottom: 2px;
        }

        .detail-product-add-fixed {
            position: fixed;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 1030;
            padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
            background: #fff;
            border-top: 1px solid #e5e5e5;
            box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
        }

        .detail-product-add-fixed .details-add-group.details-action-group.addToCart {
            width: 100%;
            margin: 0;
        }

        /* .product-section {
            padding-bottom: 72px;
        } */
    }




.shop-filter {
    padding: 20px 30px;
    border-radius: 8px;
    margin-bottom: 1.563rem;
    background: var(--white);
    border: 1px solid var(--border);
    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
}

.shop-filter .nice-select {
    border-radius: 6px;
    background: var(--chalk);
    padding: 8px 35px 8px 20px;
    border: 1px solid var(--border)
}

.shop-filter .nice-select::after {
    right: 20px
}

.shop-filter .nice-select .current {
    font-size: var(--font-size-h6)
}

.shop-filter .nice-select .list {
    top: 45px;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.shop-filter ul {
    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
}

.shop-filter ul li {
    margin: 0px 5px
}

.shop-filter ul li a {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 16px;
    line-height: 2.5rem;
    border-radius: 50%;
    text-align: center;
    color: var(--text);
    background: var(--chalk)
}

.shop-filter ul li .active {
    color: var(--white);
    background: var(--primaryColor)
}

.shop-filter p {
    font-size: var(--font-size-h6);
    text-transform: capitalize
}

@media (max-width: 767px) {
    .shop-filter {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .shop-filter .nice-select {
        margin-bottom: 15px
    }

    .shop-filter ul {
        margin-bottom: 15px
    }
}

.shopPromo_widget {
    margin-bottom: 1.563rem;
    border-radius: 8px;
    text-align: center;
    overflow: hidden
}

.shopPromo_widget img {
    width: 100%;
    border-radius: 8px;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.shopPromo_widget img:hover {
    -webkit-transform: scale(1.05);
    transform: scale(1.05)
}

.shopWidget {
    padding: 20px 20px;
    border-radius: 8px;
    margin-bottom: 1.563rem;
    background: var(--white);
    border: 1px solid var(--white)
}

.shopWidget:last-child {
    margin-bottom: 0px
}

.shop_widget_title {
    position: relative;
    padding-bottom: 0.75rem;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
}

.shop_widget_title::after {
    content: "";
    width: 80px;
    height: 2px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: var(--primaryColor);
}

.widget-category ul li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    line-height: 48px;
    border-radius: 5px;
    border: 1px solid #F2F3F4;
    padding: 9px 18px;
    margin: 0 0 15px 0;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
    -o-transition: .3s;
}

.widget-category ul li:hover {
    border: 1px solid var(--orange-light);
    -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
    transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
    -o-transition: .3s;
}

.widget-category ul li a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0;
    line-height: 1.5;
    color: #483f3f;
    font-size: 14px;
}

.widget-category ul li a img {
    max-width: 30px;
    margin-right: 15px;
}

.widget-category .count {
    display: inline-block;
    background-color: var(--orange-light);
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 20px;
    margin-left: 5px;
    font-size: 12px;
    color: #483f3f;
}

.shop-widget-btn {
    width: 100%;
    font-size: var(--font-size-h6);
    padding: 8px 0px;
    border-radius: 8px;
    color: var(--heading);
    background: var(--border);
    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;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.shop-widget-btn:hover {
    color: var(--white);
    background: var(--primaryColor)
}

.shop-widget-btn i {
    margin-right: 8px;
    margin-top: -1px
}

.shop-widget-btn span {
    text-transform: capitalize
}

.shop-widget-group {
    display: -ms-grid;
    display: grid;
    grid-gap: 10px;
    /* -ms-grid-columns: (1fr)[2]; */
    grid-template-columns: repeat(2, 1fr);
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    margin: 15px 0px;
}

.shop-widget-group input {
    width: 100%;
    height: 2.813rem;
    border-radius: 5px;
    background: var(--chalk);
    text-align: center
}

.shopWidget_list {
    margin: 18px 0px 20px
}

.custom-accordion .collapse ul.shopWidget_list {
    padding-top: 20px;
    margin-top: 0;

    max-height: calc(100% - 219px);
    overflow-y: auto;
    scrollbar-width: thin;
    -webkit-scrollbar-width: thin;
}


.shopWidget_list li {
    margin-bottom: 12px;
    color: var(--gray);
    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;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.shopWidget_list li:hover {
    color: var(--primaryColor)
}

.shopWidget_list li:last-child {
    margin-bottom: 0px
}

.shopWidget-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.shopWidget-content input {
    width: 15px;
    height: 15px;
    margin-right: 12px;
    cursor: pointer
}

.shopWidget-content label {
    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;
    text-transform: capitalize
}

.shopWidget-content label i {
    font-size: var(--font-size-h6);
    margin-left: 8px;
    color: var(--gray)
}

.shopWidget-content label i:first-child {
    margin-left: 0px
}

.shopWidget-content label i.active {
    color: var(--yellow)
}

.shopWidget_number {
    font-size: var(--font-size-h6)
}

.shop-widget-search {
    width: 100%;
    height: 2.5rem;
    padding: 0px 0.938rem;
    border-radius: 5px;
    background: var(--chalk);
    border: 1px solid var(--border);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.shop-widget-search:focus-within {
    border-color: var(--primaryColor)
}

.shop-widget-scroll {
    height: 279px;
    overflow-y: scroll;
    padding-right: 7px
}

/* .single-banner {
    background-size: cover !important;
    padding: 100px 0px;
    text-align: center;
    position: relative;
    z-index: 1
}

.single-banner::before {
    position: absolute;
    content: "";
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: -webkit-gradient(linear, right top, left top, from(rgba(6, 23, 56, 0.6)), to(rgba(232, 127, 59, 0.6)));
    background: linear-gradient(to left, rgba(6, 23, 56, 0.6), rgba(232, 127, 59, 0.6));
    z-index: -1
}

.single-banner h2 {
    font-size: 38px;
    margin-bottom: 15px;
    color: var(--white);
    text-transform: uppercase
}

@media (max-width: 767px) {
    .single-banner {
        padding: 60px 0px
    }

    .single-banner h2 {
        font-size: 32px;
        margin-bottom: 12px
    }
} */

.single-banner {
    background: #f3f3f3 !important;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 4px !important;
    padding-bottom: 0.25rem !important;
    width: 100%;
    border-bottom: solid 1px #eeeeee;
    margin-bottom: 0px;
    margin: 0px auto;
    display: block !important;
}


/* range slider */
.range .price-filter {
    display: block;
    margin-top: 20px;
}

.range #slider-range {
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
    height: 4px;
    border-radius: 0px;
    background: var(--primaryColor);
    color: var(--primaryColor);
}

.range .price-filter-inner .caption,
.range .price-filter-inner .caption strong {
    font-size: 14px;
    font-weight: normal;
}

/* sort by Product */
.shop-product-fillter {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 0 30px;
}

.shop-product-fillter.style-2 {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #ececec;
}

.shop-product-fillter .sort-by-product-area {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.shop-product-fillter .sort-by-product-area .sort-by-cover {
    position: relative;
    margin-right: 1rem;
}

.shop-product-fillter .sort-by-product-area .sort-by-product-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #fff;
    border: 1px solid #f7f8f9;
    color: #777;
    padding: 9px 16px;
    border-radius: 10px;
    -webkit-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
    cursor: pointer;
    border: 1px solid #ececec;
}

.shop-product-fillter .sort-by-product-area .sort-by-product-wrap .nice-select {
    border: none;
    padding-left: 0;
    height: inherit;
    line-height: normal;
    position: static;
}

.shop-product-fillter .sort-by-product-area .sort-by-product-wrap:hover {
    -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
}

.shop-product-fillter .sort-by-product-area .sort-by-product-wrap .sort-by i {
    margin-right: 10px;
    font-size: 14px;
    color: #ababab;
    position: relative;
    top: 1px;
}

.shop-product-fillter .sort-by-product-area .sort-by-product-wrap .sort-by span {
    font-size: 13px;
    font-weight: 500;
}

.shop-product-fillter .sort-by-product-area .sort-by-product-wrap .sort-by-dropdown-wrap span,
.shop-product-fillter .sort-by-product-area .sort-by-product-wrap .btn {
    font-size: 13px;
    font-weight: 500;
    color: #7E7E7E;
}

.shop-product-fillter .sort-by-product-area .sort-by-product-wrap .sort-by-dropdown-wrap span i,
.shop-product-fillter .sort-by-product-area .sort-by-product-wrap .btn i {
    font-size: var(--font-size-h6);
    color: #7E7E7E;
    margin-left: 10px;
    position: relative;
    top: 2px;
}

.sort-by-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 99;
    right: 0;
    padding: 16px 0 21px;
    background: #fff;
    border: 0;
    border-radius: 5px;
    visibility: hidden;
    opacity: 0;
    min-width: 100%;
    -webkit-box-shadow: 0 -3px 23px rgba(0, 0, 0, 0.06);
    box-shadow: 0 -3px 23px rgba(0, 0, 0, 0.06);
    color: #7E7E7E;
    font-weight: 500;
}

.sort-by-dropdown.show {
    opacity: 1;
    visibility: visible;
}

.sort-by-dropdown ul li {
    display: block;
}

.sort-by-dropdown ul li a {
    font-weight: 500;
    font-size: 13px;
    padding: 5px 30px;
    display: block;
    position: relative;
    color: #7E7E7E;
}

.sort-by-dropdown ul li a.active::before {
    content: "\f00c";
    position: absolute;
    top: 5px;
    left: 10px;
    font-size: 12px;
    color: var(--primaryColor);
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.sort-by-dropdown ul li a.active:hover::before {
    color: #fff;
}

.sort-by-dropdown ul li a:hover {
    background-color: var(--primaryColor);
    color: #ffffff;
}

@media only screen and (max-width: 575px) {
    .shop-product-fillter {
        display: block;
    }

    .shop-product-fillter .sort-by-product-area {
        width: 100%;
    }

    .shop-product-fillter .sort-by-product-area .sort-by-cover {
        text-align: center;
        margin-right: 14px;
    }

    .shop-product-fillter .sort-by-product-area .sort-by-cover:last-child {
        margin-right: 0;
    }

    .shop-product-fillter .sort-by-product-area .filters .sort-by-product-wrap{
        padding: 0;
    }
    .shop-product-fillter .sort-by-product-area .filters .sort-by-product-wrap .btn{
        border: none;
        padding: 9px 10px;
        cursor: pointer;
    }

    .shop-product-fillter .filters .sort-by-product-area .sort-by-product-wrap .btn i {
        color: #ffffff;
        margin-right: 0;
        margin-left: 0;
    }

    .shop-product-fillter .filterCollectionFullwidth {
        margin-top: 15px;
    }

    .shop-product-fillter .filterCollectionFullwidth .btn span{
        color: #ffffff;
        font-family: "Font Awesome 5 Free";
        font-size: 14px;
    }

    .shop-product-fillter .filterCollectionFullwidth .btn span::before{
        content: "\f0b0";
        
        
    }

}

.offcanvas-bottom {
    visibility: visible !important;
    opacity: 1;
    border: none;
    position: relative;
    display: inline-block;
    transform: translateY(0px);
    height: auto;
    background-color: transparent;
    z-index: 1;
}

.offcanvas-header{
    display: none;
}

/* .offcanvas-body{
    padding: 0;
} */

.offcanvas-backdrop .overlay-widget {
    background: #000;
    z-index: 1;
    display: block;
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    opacity: .7;
}

@media only screen and (max-width: 991px){
    /* .offcanvas-backdrop aside.sidebar-filter{
        display: block !important;
    }
    .offcanvas {
        background-color: #ffffff;
    } */
    .offcanvas-header{
        display: flex;
    } 

    .offcanvas {
        position: fixed;
        bottom: 0;
        z-index: 1050;
        display: flex;
        flex-direction: column;
        max-width: 100%;
        background-color: #fff;
        background-clip: padding-box;
        outline: 0;
        transition: transform .3s ease-in-out;
    }
    
    /* .offcanvas-bottom {
        height: 100vh;
    } */

    

    .offcanvas-bottom {
        height: 100vh;
        max-height: 100%;
        border-top: 1px solid rgba(0,0,0,.2);
        transform: translateY(100%);
    }

    /* .offcanvas-body{
        padding: 1rem;
    } */

    .offcanvas-backdrop aside.sidebar-filter{
        display: block !important;
    }
}

.bottom-paginate {
    padding-top: 25px;
    border-top: 1px solid var(--border);
    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
}

.page-info {
    font-weight: 400;
    color: var(--text)
}

@media (max-width: 575px) {
    .bottom-paginate {
        margin-bottom: 1.875rem;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .page-info {
        margin-bottom: 15px
    }
}

@media (min-width: 576px) and (max-width: 991px) {
    .bottom-paginate {
        margin-bottom: 1.875rem
    }
}

/* Summary cart */
.form-button button {
    width: 100%;
    height: 2.813rem;
    font-size: var(--font-size-h7);
    font-weight: 500;
    line-height: 15px;
    border-radius: 8px;
    letter-spacing: 0.3px;
    text-align: center;
    text-transform: uppercase;
    color: var(--white);
    background: var(--primaryColor);
}

.form-button button:hover {
    color: #ffffff;
}

.shopping-cart-header-section {
    border-left: none;
    padding: 10px;
    padding-left: 0;
}

.shopping-cart-header-section span {
    color: var(--primaryColor);
}

.shopping-cart-header-section a {
    color: var(--text);
}

.checkout-shop {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 0;
    position: sticky;
    top: 0;
    z-index: 1;
}

.checkout-pro-item .cart-pro {
    /* flex-grow: 1; */
}

.checkout-qty-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background-color: var(--white);
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    font-size: 14px;
}

.shopping-summery .account-card .input-group-control .input-group-btn button i {
    background-color: var(--primaryColor);
    color: #ffffff;
}


.shopping-summery .account-card .table-scroll {
    margin-bottom: 1.875rem;
}

.shopping-summery .account-card .table-scroll:last-child {
    margin-bottom: 0;
}

.shopping-summery .account-card .table-scroll .productAction button i {
    width: 25px;
    height: 25px;
    line-height: 25px;
}

.shopping-summery tbody tr td {
    padding: 12px 15px;
}

.account-card .table-scroll .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.account-card .table-scroll .form-button button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.intercom {
    display: inline-block;
    width: 100%;
    padding: 14px 0;
}

.intercom.checkout {
    border-bottom: 1px solid var(--colorLight);
}

.apply-coupon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.apply-coupon input {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-family: var(--thm-font);
    font-size: .9375rem;
    width: 100%;
    height: 2.75rem;
    padding: 0 .9375rem;
    border-radius: var(--radius-sm);
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: var(--heading);
    background-color: #f3f4f7;
    border: 1px solid transparent;
    -webkit-transition: all 0.2s cubic-bezier(0.28, 0.12, 0.22, 1);
    transition: all 0.2s cubic-bezier(0.28, 0.12, 0.22, 1);
}

.intercom .apply-coupon input.form-control:focus-within {
    background-color: #f3f4f7;
    border-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: 0;
}

.apply-coupon button {
    height: 2.75rem;
    color: #ffffff;
    background-color: var(--primaryColor);
    padding: 5px 10px;
    line-height: 1;
}

.apply-coupon button:hover {
    color: #ffffff;
}

@media only screen and (max-width:767px) {
    .intercom .apply-coupon {
        flex-wrap: nowrap;
    }

    .intercom .apply-coupon input {
        width: auto;
        min-width: 0;
        flex: 1 1 auto;
    }

    .intercom .apply-coupon button {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

.checkout-check {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    margin-bottom: 1.563rem;
    margin-top: 15px;
}

.checkout-check input {
    width: 15px;
    height: 15px;
    margin-right: 10px;
    margin-top: 4px;
    cursor: pointer;
}

.checkout-check label {
    line-height: 22px;
}

.checkout-check label a {
    color: var(--primaryColor);
}

@media (max-width:991px) {
    .checkout-check {
        margin-top: 20px;
    }
}

/* no-cart page css */

.empty-cart #cart-animation {
    max-width: 200px;
    height: 200px;
    margin: 0 auto;
    padding: 20px;
}

.empty-cart .emptycart-container {
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.empty-cart .emptycart-heading {
    color: var(--primaryColor);
    font-size: 24px;
    font-weight: 600;
    margin: 0px;
}

.empty-cart .emptycart-content {
    color: #333;
    font-size: 16px;
    margin: 4px 0px 30px;
    font-weight: 500;
}

.empty-cart .emptycart-shooping-btn {  
    padding: 8px 20px;
    color: var(--white);
    background: var(--primaryColor);
    border: 1px solid var(--primaryColor);
    font-size: 16px;
    font-weight: 600;
    border-radius: 6px;
}
.empty-cart .heading-sec h2 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #151515; 
}
.empty-cart .heading-sec {
    position: relative;
    margin-bottom: 1.25rem;
    display: inline-block;
    width: 100%;
    padding-bottom: 0.625rem;
    border-bottom: solid 1px #f2f2f2;
}
.empty-cart .heading-sec::after {
    content: '';
    width: 180px;
    height: 2px;
    background: var(--primaryColor);
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
}
@media (max-width: 820px) {
    .empty-cart .emptycart-shooping-btn {
        align-items: center;
        justify-content: center;
        display: inline-block;
        margin: 0 auto;
    }
    .empty-cart .emptycart-container {
        display: block;
        text-align: center;
    }
    .empty-cart .emptycart-heading {
        text-align: center;
    }
    .empty-cart .emptycart-content {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .empty-cart .emptycart-heading {
        font-size: 20px;
    }
    .empty-cart .emptycart-content {
        font-size: 14px;
    }
}

/* cart page css */
.cart-area,
.item-area {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--colorLight);
}

.shopping-summery .cart-toolbar {
    display: flex;
    justify-content: flex-start;
    padding: 0 0 12px
}

.shopping-summery .cart-toolbar .remove-all {
    background: transparent;
    /* border: 1px solid var(--secondaryColor); */
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--text);
    font-size: var(--font-size-h7);
    line-height: 1.2;
    padding: 8px 16px;
    margin-left: auto;
}

.shopping-summery .cart-toolbar .remove-all:hover {
    color: var(--secondaryColor);
}

.shopping-summery .cart-toolbar .remove-all:focus-visible {
    outline: 2px solid var(--primaryColor);
    outline-offset: 2px;
}

@media (max-width: 575px) {
    .shopping-summery .cart-toolbar {
        justify-content: stretch;
    }

    .shopping-summery .cart-toolbar .remove-all {
        justify-content: center;
    }
}

.cart-area:last-child,
.item-area:last-child {
    border-bottom: none;
    padding-bottom: 0px;
}

.cart-area .cart-details:not(:last-child) {
    /* margin: 0 0 2rem 0; */
    /* border-bottom: 1px solid var(--border); */
    /* padding: 0 0 3rem 0; */
}

.cart-area .cart-details:last-child {
    margin: 0;
    border: none;
    padding: 0;
}

.cart-area .cart-details .cart-item,
.item-area .item-details .card-item {
    padding: 6px 0px;
    border-top: 1px solid var(--colorLight);
    border-bottom: 1px solid var(--colorLight);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cart-area .cart-details .cart-item span.cart-head,
.item-area .item-details .card-item span.item-head {
    font-family: var(--thm-font-secondary);
    font-weight: 600;
    color: #212529;
}

.cart-area .cart-details .cart-item span.c-items {
    border-bottom: 1px solid #000;
    font-family: var(--thm-font-secondary);
    margin-bottom: 3px;
}

.cart-area .cart-details .cart-all-pro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

/* .cart-area .cart-details .cart-all-pro:not(:last-child) {
    border-bottom: 1px solid #efefef;
    padding-bottom: 1.25rem;
    padding-top: 20px;
} */

.cart-area .cart-details .cart-all-pro {
    border-bottom: 1px solid var(--thm-border);
    padding-bottom: 1.25rem;
    padding-top: 20px;
}

.cart-area .cart-details .cart-all-pro:last-child {
    border-bottom: none;
}

.cart-area .cart-details:has(.payment-retry-options) .cart-all-pro {
    border-bottom: none;
}

.cart-area .cart-details .cart-all-pro .custome-checkbox {
    width: 3%;
}

.item-area .item-details .item-all-pro {
    padding-bottom: 1.875rem;
    border-bottom: 1px solid rgba(var(--light-border), 1);
    margin-bottom: 1.563rem;
}

.item-area .item-details .item-all-pro:last-child {
    border: none;
    padding-bottom: 0;
}

.cart-area .cart-details .cart-all-pro .cart-pro {
    width: 58%;
    display: flex;
    align-items: center;
    gap: 20px;
}

.cart-area .cart-details .cart-all-pro .cart-pro .cart-pro-image img {
    -o-object-fit: cover;
    object-fit: cover;
    /* width: calc(-13.2px + 6.5vw); */
}

.cart-area .cart-details .cart-all-pro .cart-pro .pro-details {
    width: calc(100% - 130px);
}

/* .item-area .item-details .item-all-pro .item-pro .item-pro-image {
    margin-right: 0;
    gap: 10px;
} */

.cart-area .cart-details .cart-all-pro .cart-pro .pro-details h4,
.item-area .item-details .item-all-pro .item-pro .card-details h4 {
    font-size: var(--font-size-h6);
    line-height: 1.2;
}

.cart-area .cart-details .cart-all-pro .cart-pro .pro-details h4 > a {
    color: var(--heading);
}

.cart-area .cart-details .cart-all-pro .cart-pro .pro-details span.pro-size {
    font-size: var(--font-size-h8);
    color: var(--gray);
    margin-top: 10px;
    /* display: block; */
    line-height: 1;
}

.cart-area .cart-details .cart-all-pro .cart-pro .pro-details span.pro-size span.size {
    font-weight: 600;
}

.cart-area .cart-details .cart-all-pro .cart-pro .pro-details span.pro-shop {
    font-size: var(--font-size-h8);
    color: var(--gray);
    margin-top: 0;
    display: block;
    line-height: 1;
}

.cart-area .cart-details .cart-all-pro .cart-pro .pro-details span.cart-pro-price {
    margin-top: 10px;
    display: block;
    line-height: 1;
}

.cart-area .cart-details .cart-all-pro .qty-item {
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: end;
}

.cart-area .cart-details .cart-all-pro .qty-item .productAction input {
    width: 50px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .cart-area .cart-details .cart-all-pro .qty-item .productAction input {
        width: 35px;
    }
}

.cart-area .cart-details .cart-all-pro .qty-item .center a.pro-remove,
.item-area .item-details .item-all-pro .del-item .center a.item-remove {
    color: var(--secondaryColor);
    /* margin-top: 15px; */
    text-decoration: underline;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-area .item-details .item-all-pro .del-item .center a.item-remove {
    margin-top: 0;
}

@media only screen and (max-width: 767px) {

    .mypayment-container .row>[class*="col-md"],
    .mypayment-container .row>[class^="col-md"] {
        width: 50%;
    }
}

.cart-area .cart-details .cart-all-pro .all-pro-price {
    width: 15%;
    text-align: right;
    display: flex;
    justify-content: end;
}

.cart-area .cart-details .cart-all-pro .all-pro-price.myOrders {
    width: 50%;
}

.cart-area .cart-details .cart-all-pro .all-pro-price span {
    font-size: var(--font-size-h5);
    display: block;
    font-weight: 500;
}

.cart-area .cart-details .cart-all-pro .all-pro-price del {
    font-size: var(--font-size-h7);
    font-weight: 500;
}

@media (max-width: 991px) {
    .cart-area .cart-details .cart-all-pro .custome-checkbox {
        width: 5%;
    }

    .cart-area .cart-details .cart-all-pro .qty-item {
        width: 60%;
    }

    .cart-area .cart-details .cart-all-pro .all-pro-price {
        width: 40%;
    }

    .order-content .cart-area .cart-details .cart-all-pro .qty-item {
        width: 50%;
    }

    .order-content .cart-area .cart-details .cart-all-pro .all-pro-price {
        width: 50%;
    }

    .cart-area .cart-details .cart-all-pro .qty-item .center {
        display: flex;
        align-items: center;
        margin-left: auto;
    }

    .cart-area .cart-details .cart-all-pro .qty-item .plus-minus {
        margin-top: 0px;
    }

    .cart-area .cart-details .cart-all-pro .qty-item .center a.pro-remove {
        margin-top: 0px;
        margin-left: auto;
    }

    .shopping-summery .cart-action {
        margin-bottom: 1.875rem;
    }

    .shopping-summery .cart-action .btn {
        padding: 14px 20px;
    }

}

@media (max-width: 991px) {
    .cart-area .cart-details .cart-all-pro .cart-pro .cart-pro-image img {
        -o-object-fit: cover;
        object-fit: cover;
        width: calc(-13.2px + 8.5vw);
    }
    .cart-area .cart-details .cart-all-pro .cart-pro {
        width: 100%;
        margin-bottom: 1.25rem;
        padding-bottom: 1.25rem;
        border-bottom: 1px solid rgba(var(--light-border), 1);

    }

    .cart-area .cart-details .cart-all-pro .all-pro-price.myOrders {
        width: 100%;
        justify-content: center;
    }

    .cart-area .cart-details .cart-all-pro .all-pro-price span {
        float: none !important;
    }
}

@media (max-width: 767px) {
    .cart-area .cart-details .cart-item span.cart-head {
        font-size: 14px;
        font-weight: 600;
    }

    .cart-area .cart-details .cart-all-pro .custome-checkbox {
        width: 7%;
    }

    .cart-area .cart-details .cart-all-pro .cart-pro .cart-pro-image a img {
        width: calc(-13.2px + 18.5vw);
    }

    .cart-area .cart-details .cart-all-pro .cart-pro .pro-details {
        width: 70%;
    }

    .cart-area .cart-details .cart-all-pro .cart-pro .pro-details h4 {
        font-size: 14px;
    }

    .cart-area .cart-details .cart-all-pro .cart-pro .pro-details span.pro-shop {
        font-size: var(--font-size-h7);
    }

    .cart-area .cart-details .cart-all-pro .cart-pro .pro-details span.cart-pro-price {
        font-size: var(--font-size-h7);
    }
}

@media (max-width: 420px) {
    .cart-area .cart-details .cart-all-pro .cart-pro .cart-pro-image a img {
        width: calc(-13.2px + 25.5vw);
    }
}

@media (max-width: 360px) {
    .shopping-summery .cart-action .btn {
        padding: 14px 10px;
    }
}

.cart-total {
    font-size: var(--font-size-h6);
    font-weight: 700;
    color: var(--text);
    display: inline-block;
    width: 100%;
}

.cart-totals {
    border: 1px solid var(--colorLight);
    padding: 20px;
    position: sticky;
    top: 20px;
}

@media (max-width: 991px) {
    .cart-totals {
        position: static;
        margin-bottom: 85px;
    }
}

.cart-total .cart-price {
     /* padding-top: 15px; */
    padding-bottom: 0.625rem;
    /* margin-bottom: 26px; */
    /* border-top: 1px solid var(--colorLight); */
    /* border-bottom: 1px solid var(--colorLight); */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cart-totals .cart-total span {
    color: #222;
    font-weight: 400;
}

.cart-total .cart-price span.total,
.cart-total .cart-shipping span.total {
    font-weight: 600;
}

.cart-total .cart-shipping {
    padding-top: 15px;
    padding-bottom: 0.875rem;
    /* margin-bottom: 26px; */
    border-top: 1px solid var(--colorLight);
    /* border-bottom: 1px solid var(--colorLight); */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cart-totals .cart-total .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.cart-totals .cart-total .form-button button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    line-height: 1.2;
    align-items: center;
}

.cart-totals .cart-total .btn i {
    font-size: 14px;
    color: #ffffff;
}

.cart-total .shop-total {
    /* margin-top: 15px; */
    padding: 10px 0px;
    border-top: 1px solid var(--colorLight);
    border-bottom: 1px solid var(--colorLight);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cart-total .shop-total span.total-amount {
    font-weight: 600;
    color: var(--primaryColor);
}

.cart-total a.check-link {
    color: var(--primaryColor);
    margin-top: 25px;
    text-decoration: underline;
    display: flex;
    align-items: center;
    justify-content: center;
}

.additional-info-wrapper {
    position: relative;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    background: #fff;
    margin-top: 15px;
    border-bottom: 1px solid var(--colorLight);
    padding-bottom: 1rem;
}

.additional-info-wrapper .additional-info-title {
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-medium);
    color: #212121;
}

.additional-info-wrapper .additional-info-action {
    font-size: var(--font-size-h6);
    font-weight: var(--font-weight-semibold);
    color: var(--secondaryColor);
    cursor: pointer;
    margin-left: auto;
}

/* Voucher */
.voucher-input {
    border-radius: 2px 0 0 2px;
    font-size: 13px;
    height: 2.5rem;
    border-color: #dadada;
}
.btn-voucher-apply {
    background-color: var(--primaryColor);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    padding: 0 20px;
    border-radius: 0 2px 2px 0;
    border: none;
}
.btn-voucher-apply:hover {
    background-color: var(--primaryColor);
    color: #fff;
}

/* Total */
.total-line {
    border-top: 1px solid #eff0f5;
}
.total-label {
    font-size: var(--font-size-h6);
    font-weight: 500;
    color: #212121;
}
.total-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--primaryColor);
}

/* .coupon-code-btn .intercom {
    -webkit-box-align: center;
    align-items: center;
    background: var(--primaryColor);
    border-radius: 2rem;
    bottom: 100px;
    box-shadow: rgba(27, 39, 51, 0.04) 0px 2px 4px, rgba(27, 39, 51, 0.08) 0px 8px 12px;
    color: rgb(255, 255, 255);
    cursor: pointer;
    display: flex;
    flex-flow: wrap;
    font-size: 0.875rem;
    -webkit-box-pack: center;
    justify-content: center;
    line-height: 1.5rem;
    gap: 0.5rem;
    padding: 8px 20px;
    position: fixed;
    right: 20px;
    text-decoration: none;
    z-index: 1;
} */

/* order complete page css */
.order-area .order-price ul.total-order {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.order-area .order-price ul.total-order li:last-child {
    text-align: right;
}

.order-area .order-price ul.total-order li span.order-no {
    display: block;
    font-weight: 600;
}

.order-area .order-price ul.total-order li span.order-date {
    color: #bbbbbb;
    margin-top: 5px;
}

.order-area .order-price ul.total-order li span.total-price {
    display: block;
    text-align: right;
    font-weight: 600;
}

.order-area .order-price ul.total-order li span.amount {
    margin-top: 5px;
    text-align: right;
    font-weight: 600;
}

.order-area .order-details {
    text-align: center;
}

.order-area .order-details span.order-i {
    font-size: 30px;
    line-height: 1;
}

.order-area .order-details span.order-s {
    display: block;
    margin-top: 8px;
}

.order-area .order-details a.tracking-link {
    margin-top: 24px;
}

.order-area .order-delivery {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid var(--colorLight);
}

.order-area .order-delivery ul.delivery-payment {
    display: flex;
    flex-wrap: wrap;
    margin: -30px 0px 0px -30px;
}

.order-area .order-delivery ul.delivery-payment li {
    width: calc(50% - 30px);
    margin: 30px 0px 0px 30px;
    border-right: 1px solid var(--colorLight);
}

.order-area .order-delivery ul.delivery-payment li:last-child {
    border-right: none;
}

.order-area .order-delivery ul.delivery-payment li h5 {
    font-size: var(--font-size-h6);
}

.order-area .order-delivery ul.delivery-payment li p {
    margin-top: 6px;
}

.order-area .order-delivery ul.delivery-payment li.delivery p {
    font-weight: 600;
}

.order-area .order-delivery ul.delivery-payment li.pay p {
    color: #bbb;
}

.order-area .order-delivery ul.delivery-payment li span.order-span {
    display: block;
    margin-top: 9px;
}

.order-area .order-delivery ul.delivery-payment li span.order-span:first-of-type {
    margin-top: 7px;
}

.order-area .order-delivery ul.delivery-payment li span.p-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.order-area .order-delivery ul.delivery-payment li span.p-label span.o-price {
    font-weight: 600;
}

.success-icon {
    padding: 2.5rem 1.25rem;
    background-color: #f0f3f8; 
    border-radius: 1rem;
    border: 1px solid var(--colorLight);
}
@media (max-width: 575px) {
    .success-icon {
    padding: 30px 20px; } 
}
.success-icon .check-container {
    width: 100px;
    height: 120px;
    margin: 0 auto;
    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;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column;
            flex-flow: column;
    -webkit-animation: mover 1s infinite alternate;
            animation: mover 1s infinite alternate; 
}
.success-icon .check-container .check-background {
    width: 100%;
    height: calc(100% - 20px);
    background: -webkit-gradient(linear, left top, right bottom, from(#069c4d), to(#069c4d));
    background: linear-gradient(to bottom right, #069c4d, #069c4d);
    -webkit-box-shadow: 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset;
            box-shadow: 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset;
    -webkit-transform: scale(0.84);
            transform: scale(0.84);
    border-radius: var(--radius-half);
    -webkit-animation: animateContainer 0.75s ease-out forwards 0.75s;
            animation: animateContainer 0.75s ease-out forwards 0.75s;
    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;
    opacity: 0; 
}
.success-icon .check-container .check-background svg {
    width: 65%;
    -webkit-transform: translateY(4px);
            transform: translateY(4px);
    stroke-dasharray: 80;
    stroke-dashoffset: 80;
    -webkit-animation: animateCheck 0.35s forwards 1.25s ease-out;
            animation: animateCheck 0.35s forwards 1.25s ease-out; }
.success-icon .check-container .check-shadow {
    bottom: calc(-15% - 5px);
    left: 0;
    border-radius: var(--radius-half);
    background: radial-gradient(closest-side, #49da83, transparent);
    -webkit-animation: animateShadow 0.75s ease-out forwards 0.75s;
            animation: animateShadow 0.75s ease-out forwards 0.75s; 
}
@-webkit-keyframes animateContainer {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
                transform: scale(0);
        -webkit-box-shadow: 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset;
                box-shadow: 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset; }
    25% {
        opacity: 1;
        -webkit-transform: scale(0.9);
                transform: scale(0.9);
        -webkit-box-shadow: 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset;
                box-shadow: 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset; }
    43.75% {
        -webkit-transform: scale(1.15);
                transform: scale(1.15);
        -webkit-box-shadow: 0px 0px 0px 43.334px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset;
                box-shadow: 0px 0px 0px 43.334px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset; }
    62.5% {
        -webkit-transform: scale(1);
                transform: scale(1);
        -webkit-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 21.667px rgba(255, 255, 255, 0.25) inset;
                box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 21.667px rgba(255, 255, 255, 0.25) inset; }
    81.25% {
        -webkit-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset;
                box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset; }
    100% {
        opacity: 1;
        -webkit-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset;
                box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset; } 
}

@keyframes animateContainer {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
                transform: scale(0);
        -webkit-box-shadow: 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset;
                box-shadow: 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset; }
    25% {
        opacity: 1;
        -webkit-transform: scale(0.9);
                transform: scale(0.9);
        -webkit-box-shadow: 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset;
                box-shadow: 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset; }
    43.75% {
        -webkit-transform: scale(1.15);
                transform: scale(1.15);
        -webkit-box-shadow: 0px 0px 0px 43.334px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset;
                box-shadow: 0px 0px 0px 43.334px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset; }
    62.5% {
        -webkit-transform: scale(1);
                transform: scale(1);
        -webkit-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 21.667px rgba(255, 255, 255, 0.25) inset;
                box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 21.667px rgba(255, 255, 255, 0.25) inset; }
    81.25% {
        -webkit-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset;
                box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset; }
    100% {
        opacity: 1;
        -webkit-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset;
                box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset, 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset; } 
}

@-webkit-keyframes animateCheck {
    from {
        stroke-dashoffset: 80; }
    to {
        stroke-dashoffset: 0; } 
}

@keyframes animateCheck {
    from {
        stroke-dashoffset: 80; }
    to {
        stroke-dashoffset: 0; } 
}

@-webkit-keyframes animateShadow {
    0% {
        opacity: 0;
        width: 100%;
        height: 15%; }
    25% {
        opacity: 0.25; }
    43.75% {
        width: 40%;
        height: 7%;
        opacity: 0.35; }
    100% {
        width: 85%;
        height: 15%;
        opacity: 0.25; } 
}

@keyframes animateShadow {
    0% {
        opacity: 0;
        width: 100%;
        height: 15%; }
    25% {
        opacity: 0.25; }
    43.75% {
        width: 40%;
        height: 7%;
        opacity: 0.35; }
    100% {
        width: 85%;
        height: 15%;
        opacity: 0.25; } 
}
@-webkit-keyframes mover {
    0% {
        -webkit-transform: translateY(0);
                transform: translateY(0); }
    100% {
        -webkit-transform: translateY(-7px);
                transform: translateY(-7px); } 
}

@keyframes mover {
    0% {
        -webkit-transform: translateY(0);
                transform: translateY(0); }
    100% {
        -webkit-transform: translateY(-7px);
                transform: translateY(-7px); } 
}
.status-icon-circle {
    width: 80px;
    height: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-half);
    margin-bottom: 1.25rem;
}

/* Modernized Order Timeline Component */
.tracker-card {
    background: #ffffff;
    border: 1px solid var(--colorLight);
    border-radius: 1rem;
    padding: 1.25rem 1rem 1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.order-timeline-wrapper {
    border-radius: 1rem;
    padding: 1.5rem 1rem 1.25rem;
    margin: 2rem 0 1.75rem;
}

.order-timeline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.timeline-step {
    position: relative;
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Segmented Track Lines */
.timeline-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 50%;
    width: 100%;
    height: 3px;
    background: #e2e8f0;
    z-index: 1;
    border-radius: 999px;
    transition: background-color 0.3s ease;
}

/* Active progress connector lines */
.timeline-step.completed:not(:last-child)::after {
    background: var(--primaryColor);
}
.timeline-step.failed:not(:last-child)::after {
    background: #dc3545;
}

.timeline-icon-wrap {
    position: relative;
    z-index: 2;
    margin-bottom: 0.5rem;
}

.timeline-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #cbd5e1;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
}

.timeline-icon svg {
    width: 17px;
    height: 17px;
}

.timeline-step .step-num {
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #64748b;
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
}

/* Timeline Step Nodes */


.timeline-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-half);
    background: var(--white);
    border: 2px solid #cbd5e1;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease-in-out;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.timeline-step .step-num {
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #64748b;
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
}


/* SVG Icon styles */
.timeline-icon svg {
    width: 18px;
    height: 18px;
    transition: transform 0.2s ease;
}

/* Completed Step */
.timeline-step.completed .timeline-icon {
    background: var(--primaryColor);
    border-color: var(--primaryColor);
    color: var(--white);
    box-shadow: 0 4px 10px rgba(6, 156, 77, 0.25);
}

.timeline-step.completed .step-num {
    background: var(--primaryColor);
}

/* Current/Active Step */
.timeline-step.current .timeline-icon {
    background: var(--secondaryColor);
    border-color: var(--secondaryColor);
    color: var(--white);
    box-shadow: 0 0 0 5px rgba(236, 36, 44, 0.18), 0 4px 12px rgba(236, 36, 44, 0.3);
    animation: pulseStep 2.5s infinite;
}

.timeline-step.current .step-num {
    background: var(--primaryColor);
}

/* Failed Step */
.timeline-step.failed .timeline-icon {
    background: var(--secondaryColor);
    border-color: var(--secondaryColor);
    color: var(--white);
    box-shadow: 0 0 0 5px rgba(220, 53, 69, 0.18), 0 4px 12px rgba(220, 53, 69, 0.25);
}

@keyframes pulseStep {
    0%, 100% {
        box-shadow: 0 0 0 5px rgba(236, 36, 44, 0.18), 0 4px 12px rgba(236, 36, 44, 0.3);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(236, 36, 44, 0.08), 0 4px 14px rgba(236, 36, 44, 0.4);
    }
}

.timeline-step.failed .step-num {
    background: var(--secondaryColor, #dc3545);
}

.timeline-step.current .step-num {
    background: var(--primaryColor);
}

/* Labels & Meta */
.timeline-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #64748b;
    line-height: 1.25;
    transition: color 0.2s ease;
    padding: 0 0.25rem;
}

.timeline-step.completed .timeline-label {
    color: #1e293b;
}
.timeline-step.current .timeline-label {
    color: var(--secondaryColor);
    font-weight: 700;
}
.timeline-step.failed .timeline-label {
    color: #dc3545;
    font-weight: 700;
}

@media (max-width: 576px) {
    .order-timeline-wrapper {
        padding: 1.25rem 0.5rem 1rem;
    }
    .timeline-icon {
        width: 34px;
        height: 34px;
    }
    .timeline-icon svg {
        width: 15px;
        height: 15px;
    }
    .timeline-step:not(:last-child)::after {
        top: 17px;
        height: 2px;
    }
    .timeline-label {
        font-size: 0.7rem;
    }
}

.receipt-box {
    background-color: var(--white);
    border: 1px dashed #cbd5e1;
    border-radius: 1rem;
}
.order-badge-pill {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.78rem;
}
.copy-btn {
    cursor: pointer;
    transition: opacity 0.2s;
}
.copy-btn:hover {
    opacity: 0.7;
}



/* Step Wizard */
#multi-step-track-container {
    margin-top: 2rem;
}
ul.track-stepper {
    counter-reset: section;
    margin-bottom: 3rem;
}
ul.track-stepper .track-stepper-circle {
    position: relative;
}
ul.track-stepper .track-stepper-circle span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

ul.track-stepper .track-stepper-list .track-stepper-circle span svg path {
    /* fill: #6c757d; */
}
ul.track-stepper .track-stepper-active .track-stepper-circle span svg path,
ul.track-stepper .track-stepper-completed .track-stepper-circle span svg path {
    fill: var(--white);
}
.track-stepper-horizontal {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
ul.track-stepper > li:not(:last-of-type) {
    margin-bottom: 0.625rem;
    -webkit-transition: margin-bottom 0.4s;
    -o-transition: margin-bottom 0.4s;
    transition: margin-bottom 0.4s;
}
.track-stepper-horizontal > li:not(:last-of-type) {
    margin-bottom: 0 !important;
}
.track-stepper-horizontal li {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
.track-stepper-horizontal li:not(:last-child):after {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 1px;
    content: "";
    top: 32%;
}
.track-stepper-horizontal li:after {
    background-color: #dee2e6;
}
.track-stepper-horizontal li.track-stepper-completed:after {
    background-color: var(--green);
}
.track-stepper-horizontal li:last-child {
    flex: unset;
}
ul.track-stepper li a .track-stepper-circle {
    display: inline-block;
    width: 50px;
    height: 50px;
    margin-right: 0;
    line-height: 1.7rem;
    text-align: center;
    background: rgba(0, 0, 0, 0.38);
    border-radius: 50%;
}
.track-stepper .track-stepper-active .track-stepper-circle {
    background-color: var(--primaryColor) !important;
    color: #fff;
}
.track-stepper .track-stepper-active .label {
    color: var(--primaryColor) !important;
}
.track-stepper .track-stepper-active .track-stepper-circle:hover {
    background-color: var(--primaryColor) !important;
    color: #fff !important;
}
.track-stepper .track-stepper-unfinished .track-stepper-circle {
    background-color: #f8f7ff;
}
.track-stepper .track-stepper-completed .track-stepper-circle {
    background-color: var(--green) !important;
    color: #fff;
}
.track-stepper .track-stepper-completed .label {
    color: var(--green) !important;
}
.track-stepper .track-stepper-completed .track-stepper-circle:hover {
    background-color: var(--green) !important;
    color: #fff !important;
}
.track-stepper .track-stepper-active span.text-muted {
    color: #fff !important;
}
.track-stepper .track-stepper-completed span.text-muted {
    color: #fff !important;
}
.track-stepper .label {
    font-size: 1rem;
    margin-top: 0.5rem;
}
.track-stepper a {
    cursor: default;
}

/* End Step Wizard */

.disputeModal .modal-dialog {
    max-width: 680px;
}

@media (max-width: 767px) {
    .disputeModal .modal-dialog {
        max-width: 100%;
    }
}

.disputeModal .modal-content {
    position: relative;
    background-color: #fff;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    outline: 0;
}

@media (min-width: 768px) {
    .disputeModal .modal-content {
        -webkit-box-shadow: 0 5px 15px rgb(0 0 0 / 50%);
        box-shadow: 0 5px 15px rgb(0 0 0 / 50%);
    }
}

/* Customer Login / Signup */

.userForm-logo {
    text-align: center;
    margin-bottom: 1.563rem;
    z-index: 1;
}

.userForm-logo img {
    width: 200px
}

.userForm-card {
    padding: 30px;
    border-radius: 8px;
    margin-bottom: 1.25rem;
    background: var(--white);
    border: 1px solid var(--border)
}

.userForm-title {
    text-align: center;
    margin-bottom: 1.875rem
}

.userForm-title h2 {
    font-size: 28px;
    line-height: 36px;
    margin-bottom: 5px;
    color: var(--primaryColor)
}

.userForm-title p {
    text-transform: capitalize
}

.userForm-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.userForm-social {
    width: 100%
}

.userForm-social li {
    margin-bottom: 1.25rem
}

.userForm-social li a {
    width: 100%;
    font-size: var(--font-size-h6);
    padding: 10px 0px;
    border-radius: 8px;
    letter-spacing: 0.3px;
    text-align: center;
    text-transform: capitalize;
    color: var(--white);
    background: var(--primaryColor)
}

.userForm-social li a i {
    font-size: 16px;
    margin-right: 10px
}

.userForm-social li:last-child {
    margin-bottom: 0px
}

.userForm-social .facebook {
    background: var(--facebook)
}

.userForm-social .twitter {
    background: var(--twitter)
}

.userForm-social .google {
    background: var(--google)
}

.userForm-social .instagram {
    background: var(--instagram)
}

.userForm-divider {
    width: 1px;
    height: 240px;
    margin: 0px 50px;
    background: var(--border);
    position: relative;
    z-index: 1
}

.register-form .userForm-divider {
    height: 294px;
}

.userForm-divider p {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 14px;
    font-weight: 500;
    margin: 0 auto;
    font-style: italic;
    line-height: 38px;
    border-radius: 50%;
    text-align: center;
    color: var(--gray);
    background: var(--white);
    border: 1px solid var(--border);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.userForm {
    width: 100%
}

.userForm .form-group,
#vendorForm .form-group {
    margin-bottom: 1.25rem
}

/* .userForm .form-group.form-floating:last-child,
#vendorForm .form-group.form-floating:last-child {
    margin-bottom: 0;
} */

.form-button {
    text-align: center
}

.form-button button {
    line-height: 2.813rem;
}

.form-button p {
    font-size: var(--font-size-h6);
    margin-top: 12px;
    text-transform: capitalize
}

.form-button p a {
    font-weight: 500;
    margin-left: 5px;
    color: var(--primaryColor)
}

.form-button p a:hover {
    text-decoration: underline
}

.userForm-remind {
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    background: var(--white);
    border: 1px solid var(--border)
}

.userForm-remind p {
    font-size: var(--font-size-h6);
    text-transform: capitalize
}

.userForm-remind p a {
    font-weight: 500;
    margin-left: 5px;
    color: var(--primaryColor)
}

.userForm-remind p a:hover {
    text-decoration: underline
}

.userForm-footer {
    text-align: center;
    margin-top: 25px;
    margin-bottom: 2.5rem
}

.userForm-footer p {
    font-size: 14px;
    color: var(--gray)
}

.userForm-footer p a {
    color: var(--primaryColor);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.userForm-footer p a:hover {
    text-decoration: underline
}

.field-icon {
    position: absolute;
    top: 50%;
    right: 15px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    color: var(--text);
}

@media (max-width: 575px) {
    .userForm-card {
        padding: 20px
    }
}

@media (max-width: 767px) {
    .userForm-group {
        display: inherit
    }

    .userForm-divider,
    .register-form .userForm-divider {
        width: 100%;
        height: 1px;
        margin: 50px 0px
    }
}

.back-top-home {
    position: relative;
    z-index: 1;
}

@media only screen and (max-width: 767px) {
    .back-top-home {
        margin-bottom: 1.875rem;
        text-align: center;
    }
}

@media only screen and (max-width: 575px) {
    .back-top-home {
        margin-bottom: 1.25rem;
    }
}

/* ========================= User dashboard ========================= */

/* Modern Card & Surface Tokens */
.dashboard-surface {
    background: #ffffff;
    border-radius: 1.25rem;
    border: 1px solid #eef2f6;
    box-shadow: 0 10px 30px rgba(17, 24, 39, 0.04);
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.dashboard-surface:hover {
    box-shadow: 0 14px 40px rgba(17, 24, 39, 0.07);
}

/* Back Navigation Button */
.btn-dashboard-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.15rem;
    background: #ffffff;
    color: #475569;
    font-weight: 500;
    font-size: 0.9rem;
    border: 1px solid #e2e8f0;
    border-radius: 50rem;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.btn-dashboard-back:hover {
    background: #f8fafc;
    color: #0f172a;
    transform: translateX(-3px);
    border-color: #cbd5e1;
}

/* user Header Box */
.user-card-header {
    padding: 1rem 2rem;
    /* background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); */
    border-bottom: 1px solid #f1f5f9;
}

.user-card-body {
    padding: 1.75rem 2rem;
}

.profile-avatar-badge {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #eef2ff;
    color: var(--primaryColor);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 600;
}

/* Section Subheadings */
.form-section-title {
    font-size: 0.825rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

/* Form Floating & Inputs Modernization */
.form-floating > .form-control,
.form-floating > .form-select {
    border-radius: 0.75rem;
    border: 1px solid #cbd5e1;
    background-color: #ffffff;
    color: #1e293b;
    height: calc(3.5rem + 2px);
    padding: 1rem 0.85rem;
    font-size: 0.95rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-floating > label {
    padding: 1rem 0.85rem;
    color: #64748b;
    font-size: 0.9rem;
}

.form-floating > .form-control:focus,
.form-floating > .form-select:focus {
    border-color: var(--primaryColor);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
}

.form-control:read-only {
    background-color: #f8fafc !important;
    border-color: #e2e8f0;
    cursor: not-allowed;
    color: #64748b;
}

/* Error and Feedback Text */
.form-feedback {
    font-size: 0.8rem;
    color: #ef4444;
    margin-top: 0.25rem;
    margin-bottom: 0;
    min-height: 1.1rem;
}

#account-success:not(:empty) {
    background-color: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
    padding: 0.85rem 1.25rem;
    border-radius: 0.75rem;
    font-weight: 500;
    font-size: 0.925rem;
    margin-bottom: 1.5rem;
}

/* Selectize alignment fix inside floating labels */
.selectize-input {
    border-radius: 0.75rem !important;
    border-color: #cbd5e1 !important;
    padding: 1.25rem 0.75rem 0.5rem 0.75rem !important;
    box-shadow: none !important;
}

.payment-method-btn {
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 4px;
}

/* ===== User Orders Listing ===== */
.order-listing-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.order-item-card {
    background: #ffffff;
    border: 1px solid #eceff1;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    overflow: hidden;
}

/* Store Header Row */
.order-shop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #f0f2f5;
    background-color: #ffffff;
}

.shop-title-area {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: #212121;
    font-size: 14px;
}

.shop-title-area i {
    font-size: 16px;
    color: #424242;
}

/* Status Pill / Badge on Top Header */
.status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 16px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.2px;
    text-transform: capitalize;
}

/* Delivered: Clean, fresh modern green */
.status-pill.success {
    background-color: #e8f7ee;
    color: #0d8a43;
}

/* Processing: Sleek, modern tech blue */
.status-pill.info {
    background-color: #eaf3ff;
    color: #1d68d8;
}

/* Shipped / Out for Delivery */
.status-pill.shipped {
    background-color: #f3e8ff;
    color: #7e22ce;
}

/* Pending: Warm soft amber */
.status-pill.warning,
.status-pill.pending {
    background-color: #fff4e5;
    color: #b45309;
}

/* Cancelled: Soft muted red */
.status-pill.danger,
.status-pill.cancelled {
    background-color: #fde8ea;
    color: #d92534;
}

/* Refunded / Returned */
.status-pill.refunded {
    background-color: #ffedd5;
    color: #c2410c;
}

/* Product Line Item */
.order-product-row {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    gap: 16px;
}

.order-product-row + .order-product-row {
    border-top: 1px solid #f8fafc;
}

.orders-product-thumb {
    width: 76px;
    height: 76px;
    flex: 0 0 76px;
    border-radius: 6px;
    overflow: hidden;
    background: #fafafa;
    border: 1px solid #f0f0f0;
}

.orders-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.orders-product-details {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 15px;
}

.product-title {
    font-size: var(--font-size-h7);
    font-weight: var(--font-weight-semibold);
    color: #212121;
    text-decoration: none;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 5px;
}

.product-title:hover {
    color: var(--primaryColor);
}

.product-variant {
    font-size: 12px;
    color: #9e9e9e;
    line-height: 1.4;
}

.product-price {
    flex: 0 0 100px;
    font-size: 13.5px;
    color: #212121;
    font-weight: 500;
    text-align: left;
}

.product-qty {
    flex: 0 0 70px;
    font-size: 13px;
    color: #757575;
    text-align: left;
}

.product-qty span {
    color: #212121;
}

/* Individual Item Status (Right Side) */
.product-item-status {
    flex: 0 0 200px;
    font-size: 13px;
    font-weight: 500;
    text-align: right;
    color: var(--primaryColor);
}

/* Delivered text */
.product-item-status.status-delivered {
    color: #0d8a43;
}

/* Cancelled text */
.product-item-status.status-cancelled {
    color: #d92534;
}

/* Refund Approved / Refunded text */
.product-item-status.status-refunded {
    color: #c2410c;
}

/* Return / Refund Pending text */
.product-item-status.status-pending {
    color: #b45309;
}

/* Order Details Footer */
.order-card-footer {
    padding: 12px 20px;
    background-color: #fafafa;
    border-top: 1px solid #f0f2f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12.5px;
    color: #757575;
    gap: 12px;
}

.order-meta-info {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.order-meta-info strong {
    color: #212121;
}

.order-action-link {
    flex-shrink: 0;
}

.order-action-link a {
    color: var(--primaryColor);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap; 
    transition: color 0.2s ease;
}

.order-action-link a:hover {
    text-decoration: underline;
}

/* Payment Retry Action Box */
.payment-retry-options {
    background-color: #fafbfc;
    border-top: 1px dashed #e2e8f0;
    padding: 12px 20px;
}

.payment-method-btn {
    font-size: 13px;
    font-weight: 500;
    padding: 5px 14px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

/* ===== COD Button ===== */
.btn-outline-primary.payment-method-btn {
    border-color: #cbd5e1;
    color: #334155;
    background: #ffffff;
}
.btn-outline-primary.payment-method-btn:hover {
    border-color: #1d68d8;
    color: #1d68d8;
    background: #eaf3ff;
}

/* eSewa Button */
.btn-outline-success.payment-method-btn {
    border-color: #60bb46;
    color: #438f2d;
    background: #ffffff;
}
.btn-outline-success.payment-method-btn:hover {
    background: #60bb46;
    color: #ffffff;
}

/* Cancel Order Button */
.btn-outline-danger.cancel-order-btn {
    border-color: #fecdd3;
    color: #e11d48;
    background: #ffffff;
}
.btn-outline-danger.cancel-order-btn:hover {
    background: #fde8ea;
    color: #d92534;
    border-color: #fca5a5;
}

/* ===== Responsive Mobile Styles ===== */
@media only screen and (max-width: 767px) {
    .order-product-row {
        flex-wrap: wrap;
        gap: 10px;
        align-items: flex-start;
    }
    .product-details {
        flex: 1 1 calc(100% - 90px);
        padding-right: 0;
    }
    .product-price, .product-qty, .product-item-status {
        margin-left: 86px;
        flex: 0 0 auto;
        text-align: left;
    }
    .product-item-status {
        width: 100%;
        margin-left: 86px;
        margin-top: 4px;
    }

    .order-card-footer {
        padding: 10px 16px;
        align-items: center;
    }

    .order-meta-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        font-size: 12px;
        line-height: 1.35;
    }

    .order-divider {
        display: none; /* Hides the bullet on mobile */
    }

    .order-date {
        font-size: 11.5px;
        color: #9e9e9e;
    }

    .order-action-link a {
        font-size: 12.5px;
        font-weight: 600;
        white-space: nowrap;
    }
}

@media only screen and (max-width: 399.98px) {
    .order-card-footer {
        flex-direction: column;
        gap: 10px;
    }
    .order-meta-info {
        width: 100%;
    }
}

/* ===== User Orders Details ===== */
.order-page-title {
    font-size: 20px;
    font-weight: 600;
    color: #212121;
    margin-bottom: 8px;
}

/* Package Tracking Delivery Banner */
.order-card-banner {
    background-color: #f7f9fa;
    border-bottom: 1px solid #eef2f5;
    font-size: 12.5px;
    color: #757575;
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.order-delivery-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.order-meta-info .courier-type {
    color: #616161;
    display: flex;
    align-items: center;
    gap: 5px;
}

.order-meta-info .tracking-no {
    font-weight: 600;
    color: #212121;
}

.order-meta-info .package-cost {
    font-weight: 600;
    color: #212121;
}

.btn-track-package {
    background-color: #1A1A1A ;
    color: #ffffff;
    border: none;
    padding: 6px 16px;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: background-color 0.2s ease;
    cursor: pointer;
}

.btn-track-package:hover {
    background-color: #2D2D2D;
    color: #ffffff;
}

/* Product Row */
.order-product-thumb {
    width: 76px;
    height: 76px;
    flex: 0 0 76px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #f0f0f0;
    background: #fafafa;
}

.order-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.order-product-details {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 12px;
}

.order-product-title {
    font-size: 13.5px;
    font-weight: 500;
    color: #212121;
    text-decoration: none;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 4px;
}

.order-product-title:hover {
    color: var(--primaryColor);
}

.order-product-variant {
    font-size: 12px;
    color: #9e9e9e;
    line-height: 1.4;
}

.order-product-meta-info {
    display: flex;
}

.order-product-price {
    flex: 0 0 100px;
    font-size: 13.5px;
    color: #212121;
    font-weight: 500;
    text-align: left;
}

.order-product-qty {
    flex: 0 0 70px;
    font-size: 13px;
    color: #757575;
    text-align: left;
}

.order-product-qty span {
    color: #212121;
}

.order-product-action {
    flex: 0 0 160px;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.order-item-status-text {
    font-size: 13px;
    font-weight: 500;
    color: #757575;
}

.order-item-status-text.orange {
    color: var(--primaryColor);
}

.order-write-review-btn {
    color: var(--primaryColor);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.02em;
}

.order-write-review-btn:hover {
    text-decoration: underline;
    color: var(--primaryColor);
}

/* Order Meta Timeline Box */
.order-meta-card {
    padding: 16px 20px;
    font-size: 12.5px;
    color: #757575;
    line-height: 1.6;
    border-top: 1px solid #f0f2f5;
    background-color: #ffffff;
}

.order-meta-title {
    font-size: 13.5px;
    font-weight: 600;
    color: #212121;
    margin-bottom: 6px;
}

/* Bottom address and summary grid */
.order-bottom-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
    gap: 16px;
    margin-top: 4px;
    align-items: start;
}

.order-address-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.order-bottom-col {
    min-width: 0;
    background: #ffffff;
    border: 1px solid #eceff1;
    border-radius: 4px;
    padding: 18px 20px;
}

.order-section-heading {
    font-size: 14px;
    font-weight: 600;
    color: #212121;
    margin-bottom: 14px;
}

/* Customer / Address Box */
.order-customer-name {
    font-size: 13.5px;
    font-weight: 600;
    color: #212121;
    margin-bottom: 8px;
}

.order-address-tag {
    display: inline-block;
    background-color: #f85606;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    margin-right: 6px;
    text-transform: uppercase;
    vertical-align: middle;
}

.order-address-text {
    font-size: 13px;
    color: #424242;
    line-height: 1.5;
    margin-bottom: 10px;
}

.order-phone-text {
    font-size: 13px;
    color: #212121;
    font-weight: 500;
}

/* Total Summary Breakdown */
.order-summary-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.order-summary-item {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #616161;
}

.order-summary-item .val {
    color: #212121;
    font-weight: 500;
}

.order-summary-item .val.discount {
    color: #212121;
}

.order-total-divider {
    border-top: 1px solid #f0f2f5;
    padding-top: 12px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.order-total-label {
    font-size: 14px;
    font-weight: 600;
    color: #212121;
}

.order-total-amount {
    font-size: 16px;
    font-weight: 700;
    color: #212121;
}

.order-paid-by-sub {
    font-size: 12px;
    color: #757575;
    margin-top: 4px;
    text-align: right;
}

@media (max-width: 767px) {
    .order-product-thumb {
        width: 72px;
        height: 72px;
        flex: 0 0 72px;
        border-radius: 6px;
    }

    .order-product-details {
        flex: 1 1 calc(100% - 86px);
        min-width: 0;
        padding-right: 0;
    }

    .order-product-title {
        font-size: 13.5px;
        margin-bottom: 4px;
    }

    .order-product-meta-info {
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 100%;
        gap: 10px;
    }

    /* Price and Qty inline, indented under the details column */
    .order-product-meta-info .order-product-price {
        margin-left: 0;
        flex: 0 0 auto;
        font-size: 14px;
        font-weight: 700;
        color: #0f172a;
    }

    .order-product-meta-info .order-product-qty {
        flex: 0 0 auto;
        margin-left: 0;
    }

    /* Action section on mobile: full-width card footer */
    .order-product-action {
        width: 100%;
        flex: 1 1 100%;
        max-width: 100%;
        margin-left: 0;
        margin-top: 6px;
        padding-top: 10px;
        border-top: 1px dashed #f1f5f9;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }

    .order-product-action:empty {
        display: none;
        padding-top: 0;
        border-top: none;
    }

    .order-write-review-btn {
        margin-left: auto;
    }
}

@media (max-width: 575px) {
    .order-product-row {
        padding: 14px 12px;
        gap: 6px 12px;
    }

    .order-product-thumb {
        width: 66px;
        height: 66px;
        flex: 0 0 66px;
    }

    .order-product-details {
        flex: 1 1 calc(100% - 78px);
    }

    .order-product-meta-info .order-product-price {
        margin-left: 0;
        font-size: 13.5px;
    }

    .order-product-variant {
        font-size: 11px;
    }

    .order-product-qty {
        font-size: 12px;
    }

    .order-product-qty span {
        min-width: 20px;
        height: 20px;
        font-size: 11px;
    }

    .order-item-status-text {
        font-size: 11.5px;
        padding: 2px 8px;
    }

    .order-write-review-btn {
        font-size: 11px;
        padding: 4px 11px;
    }
}

@media (max-width: 420px) {
    .order-card-banner {
        flex-direction: column;
        gap: 10px;
    }
    .order-delivery-info {
        width: 100%;
    }
}

/* ===== Style Tracking Details Modal ===== */
#trackingTimelineModal .modal-dialog {
    max-width: 680px;
}

#trackingTimelineModal .modal-content {
    border: none;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    background-color: #ffffff;
}

#trackingTimelineModal .modal-body {
    background-color: #ffffff;
}

#trackingTimelineModal .modal-header {
    background-color: #ffffff;
}

#trackingTimelineModal .modal-header {
    border-bottom: 1px solid #f0f2f5;
    padding: 16px 24px;
}

#trackingTimelineModal .modal-title {
    font-size: 16px;
    font-weight: 600;
    color: #212121;
}

/* Modal Top Courier Info Box */
.track-header-box {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 24px;
    border-bottom: 1px solid #f0f2f5;
    font-size: 13px;
}

.track-courier-title, .track-no-title {
    font-size: 12px;
    color: #757575;
    margin-bottom: 4px;
    font-weight: 500;
}

.track-courier-name {
    font-weight: 600;
    color: #212121;
    line-height: 1.4;
}

.track-no-link {
    color: #00897b;
    font-weight: 600;
    font-size: 13.5px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.track-no-link:hover {
    text-decoration: underline;
}

/* 4-Step Horizontal Stepper */
.track-stepper-wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    padding: 30px 20px 24px;
    max-width: 480px;
    margin: 0 auto;
}

.track-stepper-wrap::before {
    content: "";
    position: absolute;
    top: 48px;
    left: 45px;
    right: 45px;
    height: 2px;
    border-top: 2px dashed #e0e0e0;
    z-index: 1;
}

.track-step-node {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 70px;
    text-align: center;
}

.track-step-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: #d1d5db;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin-bottom: 8px;
    border: 3px solid #ffffff;
}

.track-step-node.active .track-step-icon,
.track-step-node.completed .track-step-icon {
    background-color: var(--primaryColor);
    color: #ffffff;
}

.track-step-label {
    font-size: 12px;
    font-weight: 500;
    color: #757575;
}

.track-step-node.active .track-step-label,
.track-step-node.completed .track-step-label {
    color: #111827;
    font-weight: 600;
}

/* Vertical Timeline */
.tracking-timeline {
    position: relative;
    padding: 10px 10px 10px 0;
    margin-top: 10px;
}

.timeline-row {
    display: flex;
    position: relative;
    padding-bottom: 22px;
}

.timeline-row:last-child {
    padding-bottom: 0;
}

/* Left Date & Time */
.timeline-time {
    width: 95px;
    flex-shrink: 0;
    font-size: 12px;
    color: #757575;
    text-align: right;
    padding-right: 18px;
    line-height: 1.4;
    padding-top: 2px;
}

/* Vertical Line and Bullet Marker */
.timeline-divider {
    position: relative;
    width: 24px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
}

.timeline-row:not(:last-child) .timeline-divider::before {
    content: "";
    position: absolute;
    top: 16px;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    background-color: #e5e7eb;
}

.timeline-bullet {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #d1d5db;
    margin-top: 4px;
    z-index: 2;
    border: 2px solid #ffffff;
}

/* Active / Latest Checked State */
.timeline-row.latest .timeline-bullet {
    width: 18px;
    height: 18px;
    background-color: #1d4ed8;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    border: none;
    margin-top: 2px;
}

/* Description Text */
.timeline-content {
    flex-grow: 1;
    padding-left: 12px;
    line-height: 1.4;
}

.timeline-event-title {
    font-size: 13px;
    font-weight: 600;
    color: #212121;
    margin-bottom: 2px;
}

.timeline-event-desc {
    font-size: 12px;
    color: #757575;
    margin: 0;
}

/* ===== Responsive Breakpoints ===== */
@media (max-width: 767px) {
    .order-product-details {
        flex: 1 1 calc(100% - 90px);
    }
    .order-product-price, .order-product-qty, .order-product-action {
        margin-left: 86px;
        text-align: left;
        align-items: flex-start;
    }
    .order-bottom-row {
        grid-template-columns: 1fr;
    }

    /* Stepper */
    .track-stepper-wrap {
        max-width: 100%;
        width: 100%;
        padding: 16px 0 14px;
        margin: 0;
        overflow: hidden;
    }
    .track-stepper-wrap::before {
        top: 32px;
        left: 12.5%;
        right: 12.5%;
        border-top-width: 2px;
    }
    .track-step-node {
        flex: 1 1 0;
        width: 25%;
        min-width: 0;
        padding: 0 2px;
    }
    .track-step-icon {
        width: 32px;
        height: 32px;
        font-size: 12px;
        margin-bottom: 6px;
        border-width: 2px;
    }
    .track-step-label {
        font-size: 11px;
        line-height: 1.25;
        word-break: break-word;
        white-space: normal;
    }

    /* Timeline */
    .tracking-timeline {
        padding: 6px 0;
        margin-top: 8px;
    }
    .timeline-row {
        padding-bottom: 16px;
    }
    .timeline-time {
        width: 68px;
        font-size: 11px;
        line-height: 1.3;
        padding-right: 8px;
        padding-top: 2px;
        word-break: break-word;
    }
    .timeline-divider {
        width: 20px;
    }
    .timeline-row:not(:last-child) .timeline-divider::before {
        top: 14px;
        bottom: -6px;
        width: 2px;
    }
    .timeline-bullet {
        width: 12px;
        height: 12px;
        margin-top: 3px;
        border-width: 2px;
    }
    .timeline-row.latest .timeline-bullet {
        width: 16px;
        height: 16px;
        font-size: 9px;
        margin-top: 1px;
    }
    .timeline-content {
        padding-left: 8px;
        min-width: 0;
    }
    .timeline-event-title {
        font-size: 12.5px;
        line-height: 1.35;
        margin-bottom: 2px;
    }
    .timeline-event-desc {
        font-size: 11.5px;
        line-height: 1.4;
    }
}

@media (max-width: 575px) {
    /* Track Header Box Stacked */
    .track-header-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding-bottom: 16px;
    }
    .track-header-box > div {
        width: 100%;
    }
    .track-courier-title,
    .track-no-title {
        font-size: 11.5px;
        margin-bottom: 3px;
    }
    .track-courier-name {
        font-size: 13px;
    }
    .track-no-link {
        font-size: 13px;
        word-break: break-all;
        background-color: #f7f9fa;
        border: 1px solid #eef2f5;
        padding: 5px 10px;
        border-radius: 4px;
        width: fit-content;
        max-width: 100%;
    }
}

/* Pagination Styles */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 20px 0;
    padding: 0;
    list-style: none;
}

.pagination .page-item {
    margin: 0;
}

.pagination .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    color: #374151;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    background: #ffffff;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.pagination .page-link:hover {
    background: var(--primaryColor);
    color: #ffffff;
    border-color: var(--primaryColor);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(248, 86, 6, 0.2);
}

.pagination .page-item.active .page-link {
    background: var(--primaryColor);
    color: #ffffff;
    border-color: var(--primaryColor);
    font-weight: 600;
}

.pagination .page-item.disabled .page-link {
    color: #9ca3af;
    background: #f9fafb;
    border-color: #e5e7eb;
    cursor: not-allowed;
    pointer-events: none;
}

.pagination .page-link:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(248, 86, 6, 0.1);
}


/* Vendor Index */

.section-vbanner {
    background-image: url('../images/vbanner.png');
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    color: white;
    height: 450px;
}

.section-vbanner .intro-text {
    padding-top: 100px;
    padding-bottom: 3.125rem;
    color: #39404a;
    width: 46%;
}

.section-vbanner .intro-text .intro-lead-in {
    font-size: 3rem;
    letter-spacing: 1px;
    font-weight: 300;
    margin-bottom: 1.563rem;
    line-height: 1.1;
}

.section-vbanner .intro-text .intro-heading {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    font-size: 1.8rem;
    margin-bottom: 1.25rem;
}

@media (max-width: 767px) {
    .section-vbanner .intro-text {
        padding-top: 150px;
        padding-bottom: 100px;
    }

    .section-vbanner .intro-text .intro-lead-in {
        font-size: 3.6rem;
        letter-spacing: 1px;
        font-weight: 300;
        line-height: 2.5rem;
        margin-bottom: 1.563rem;
    }

    .section-vbanner .intro-text .intro-heading {
        text-transform: uppercase;
        letter-spacing: 2px;
        font-weight: 700;
        font-size: 1.8rem;
        margin-bottom: 1.25rem;
    }
}


.service-heading {
    margin: 15px 0;
    text-transform: none;
}

.timeline {
    list-style: none;
    padding: 0;
    position: relative;
}

.timeline:before {
    top: 0;
    bottom: 0;
    position: absolute;
    content: "";
    width: 2px;
    background-color: #f1f1f1;
    left: 40px;
    margin-left: -1.5px;
}

.timeline>li {
    margin-bottom: 50px;
    position: relative;
    min-height: 50px;
}

.timeline>li:before,
.timeline>li:after {
    content: " ";
    display: table;
}

.timeline>li:after {
    clear: both;
}

.timeline>li .timeline-panel {
    width: 100%;
    float: right;
    padding: 0 20px 0 100px;
    position: relative;
    text-align: left;
}

.timeline>li .timeline-panel:before {
    border-left-width: 0;
    border-right-width: 15px;
    left: -15px;
    right: auto;
}

.timeline>li .timeline-panel:after {
    border-left-width: 0;
    border-right-width: 14px;
    left: -14px;
    right: auto;
}

.timeline>li .timeline-image {
    left: 0;
    margin-left: 0;
    width: 80px;
    height: 80px;
    position: absolute;
    z-index: 100;
    background-color: var(--green);
    color: white;
    border-radius: 100%;
    border: 7px solid #f1f1f1;
    text-align: center;
}

.timeline>li .timeline-image h4 {
    font-size: 10px;
    margin-top: 12px;
    line-height: 14px;
}

.timeline>li.timeline-inverted>.timeline-panel {
    float: right;
    text-align: left;
    padding: 0 20px 0 100px;
}

.timeline>li.timeline-inverted>.timeline-panel:before {
    border-left-width: 0;
    border-right-width: 15px;
    left: -15px;
    right: auto;
}

.timeline>li.timeline-inverted>.timeline-panel:after {
    border-left-width: 0;
    border-right-width: 14px;
    left: -14px;
    right: auto;
}

.timeline>li:last-child {
    margin-bottom: 0;
}

.timeline .timeline-heading h4 {
    margin-top: 0;
    color: inherit;
}

.timeline .timeline-heading h4.subheading {
    text-transform: none;
}

.timeline .timeline-body>p,
.timeline .timeline-body>ul {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .timeline:before {
        left: 50%;
    }

    .timeline>li {
        margin-bottom: 100px;
        min-height: 100px;
    }

    .timeline>li .timeline-panel {
        width: 41%;
        float: left;
        padding: 0 20px 20px 30px;
        text-align: right;
    }

    .timeline>li .timeline-image {
        width: 100px;
        height: 100px;
        left: 50%;
        margin-left: -50px;
    }

    .timeline>li .timeline-image h4 {
        font-size: 13px;
        margin-top: 16px;
        line-height: 18px;
    }

    .timeline>li.timeline-inverted>.timeline-panel {
        float: right;
        text-align: left;
        padding: 0 30px 20px 20px;
    }
}

@media (min-width: 992px) {
    .timeline>li {
        min-height: 150px;
    }

    .timeline>li .timeline-panel {
        padding: 0 20px 20px;
    }

    .timeline>li .timeline-image {
        width: 150px;
        height: 150px;
        margin-left: -75px;
    }

    .timeline>li .timeline-image h4 {
        font-size: 18px;
        margin-top: 30px;
        line-height: 26px;
    }

    .timeline>li.timeline-inverted>.timeline-panel {
        padding: 0 20px 20px;
    }
}

@media (min-width: 1200px) {
    .timeline>li {
        min-height: 170px;
    }

    .timeline>li .timeline-panel {
        padding: 0 20px 20px 100px;
    }

    .timeline>li .timeline-image {
        width: 170px;
        height: 170px;
        margin-left: -85px;
    }

    .timeline>li .timeline-image h4 {
        margin-top: 2.5rem;
    }

    .timeline>li.timeline-inverted>.timeline-panel {
        padding: 0 100px 20px 20px;
    }
}

/* faq */

.faqHeader {
    font-size: 27px;
    margin: 20px;
    font-weight: 400;
}

.form-login-body {
    
    height: 100vh;
    height: 100%;
}

.form-login-body::before {
    content: '';
    background-color: rgba(0, 0, 0, 0.2);
    background-image: url(../images/bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    /* z-index: -1; */
}

.form-login-body::after {
    content: '';
    background-color: rgba(0, 0, 0, 0.2);
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    /* z-index: -1; */
}

@media only screen and (max-width:575px) {
    .form-login-body {
        height: 100%;
    }
}

@media only screen and (max-width:575px) {
    .form-login-body {
        padding-top: 20px;
    }
}


/* Track Modal Overlay */

.modalbar {
    opacity: 0;
    padding: 50px;
    position: absolute;
    top: 50%;
    overflow: unset;
    z-index: 1100;
    -webkit-transition: opacity 600ms linear 600ms;
    -moz-transition: opacity 600ms linear 600ms;
    -ms-transition: opacity 600ms linear 600ms;
    -o-transition: opacity 600ms linear 600ms;
    transition: opacity 600ms linear 600ms;
}

@media (max-width: 575px) {
    .modalbar {
        width: 100% !important;
    }

    .btn-proceed.flat,
    .btn-cancel.flat {
        padding: 10px 30px;
    }
}

.modal_info {
    background: #FCF9F2;
    padding:2.5rem 1.563rem;
}

.modal_info h1 {
    display: block;
    font-size: 25px;
    line-height: 1.563rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
    padding-bottom: 0.938rem;
}

.modal_info span::before {
    content: none;
}

.confirm-icon {
    color: #3BB77E;
    margin-right: 8px;
}

.modal_info p {
    margin-bottom: 1.25rem;
}

.confirm-buttons {
    text-align: right;
}

.modal_overlay {
    background: rgba(0, 0, 0, 0.5);
    bottom: 0;
    left: 0;
    opacity: 0;
    overflow: auto;
    position: fixed;
    right: 0;
    top: 0;
    visibility: hidden;
    z-index: 900;
    -webkit-transition: opacity 200ms linear;
    -moz-transition: opacity 200ms linear;
    -ms-transition: opacity 200ms linear;
    -o-transition: opacity 200ms linear;
    transition: opacity 200ms linear;
}

.display {
    opacity: 1;
    visibility: visible;
    display: block;
}

.conceal {
    visibility: visible;
}

.btn_container {
    height: 100%;
    text-align: center;
}

.btn_container:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    width: 0;
}

.confirm {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    white-space: normal;
    text-align: center;
    padding: .425rem 1rem;
    z-index: 1000;
    -webkit-transition: opacity 100ms linear;
    -moz-transition: opacity 100ms linear;
    -ms-transition: opacity 100ms linear;
    -o-transition: opacity 100ms linear;
    transition: opacity 100ms linear;
}

a.confirm.load {
    opacity: 0;
}

button.modal_close {
    background: #363D4E;
    border: none;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    color: #FFFFFF;
    cursor: pointer;
    outline: none;
    width: 52px;
    height: 52px;
    position: absolute;
    right: 30px;
    top: 30px;
    -webkit-transition: -webkit-transform 600ms;
    -moz-transition: -moz-transform 600ms;
    -ms-transition: -ms-transform 600ms;
    -o-transition: -o-transform 600ms;
    transition: transform 600ms;
}

button.modal_close:hover {
    background: #3E465A;
    -webkit-transform: rotate(360deg) scale(1.10);
    -moz-transform: rotate(360deg) scale(1.10);
    -ms-transform: rotate(360deg) scale(1.10);
    -o-transform: rotate(360deg) scale(1.10);
    transform: rotate(360deg) scale(1.10);
    -webkit-transition: -webkit-transform 600ms;
    -moz-transition: -moz-transform 600ms;
    -ms-transition: -ms-transform 600ms;
    -o-transition: -o-transform 600ms;
    transition: transform 600ms;
}

button.modal_close span,
button.modal_close span:before,
button.modal_close span:after {
    background: #FFFFFF;
    content: '';
    cursor: pointer;
    display: block;
    height: 2px;
    position: absolute;
    width: 20px;
}

button.modal_close span:first-child {
    background: none;
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
}

button.modal_close span:before {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

button.modal_close span:after {
    -webkit-transform: translateY(-2px) rotate(-45deg);
    -moz-transform: translateY(-2px) rotate(-45deg);
    -ms-transform: translateY(-2px) rotate(-45deg);
    -o-transform: translateY(-2px) rotate(-45deg);
    transform: translateY(-2px) rotate(-45deg);
    top: 2px;
}

.category-option {
    position: sticky;
    top: 100px;
    z-index: 1
}

.back-btn {
    display: none;
}

.sidebar-static {
    width: 100%;
    max-width: 22rem;
    background-color: rgb(255, 255, 255);
    padding: 1.875rem;
    position: relative;
}

.sidebar-static .accordion .accordion-item {
    background: none;
    border: none;
    border-radius: 0;
}

.sidebar-static .accordion .accordion-item .accordion-button::after {
    transform: rotate(-90deg);
}

.sidebar-static .accordion .accordion-item .accordion-button:not(.collapsed)::after {
    transform: rotate(-180deg);
}

.sidebar-static .accordion .accordion-item .side-active a {
    color: var(--primary-rgb);
}

.link-arrow .accordion-button::after {
    content: none;
}

.file-upload {
    display: none;
}

.image-thumbnail-preview {
    border: 1px solid #dee2e6;
    width: 90px;
    height: 90px;
}

.account-card .nav-link-style span {
    font-size: 18px;
    position: absolute;
    right: 15px;
}

@media only screen and (max-device-width: 991px) {
    .user-setting{
        display: none;
    }

    .back-btn {
        display: block;
    }
    .sidebar-static{
        max-width: 100%;
    }
}

/* User Profile Right Content */
.feature-box {
    color: #7b858a;
    font-size: 1.5rem;
    line-height: 2;
    margin-bottom: 4rem;
}

.dashboard-content .feature-box {
    color: #7b858a;
    font-size: 1.5rem;
    line-height: 2;
    padding-top: 2rem;
    margin-bottom: 2rem;
    border: 2px solid #e7e7e7;
}

.dashboard-content .feature-box i {
    margin-bottom: 0.5rem;
    color: #d3d3d4;
    font-size: 4rem;
    display: inline-block;
    transition: transform 0.35s;
}

.dashboard-content .feature-box:hover i {
    transform: scale(1.15);
    transition: transform 0.35s
}

.feature-box-content {
    color: #7b858a;
    font-size: 1.5rem;
    line-height: 1.9;
    padding-left: 10px;
    padding-right: 10px;
}

.feature-box h3 {
    margin-bottom: .8745rem;
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.1;
    letter-spacing: 0;
}

@media only screen and (max-width: 991px) {
    .feature-box h3{
        font-size: 1rem;
    }
}

.account-sub-title {
    margin-top: 0.6rem;
    margin-bottom: 1.5rem;
    font-size: 1.6rem;
    letter-spacing: -0.01em;
}

.account-sub-title i {
    font-size: 3rem;
    color: #d3d3d4;
}

.account-content {
    margin-top: 2.1rem;
}

@media only screen and (max-width: 991px) {
    .account-content {
        margin-top: 0;
    }
}

.account-content .form-group p {
    font-size: 0.875rem;
    margin-top: 3px;
}

.table.table-downloads,
.table.table-order {
    margin-bottom: 1px;
    font-size: 14px;
}

.download-table-container p {
    margin-bottom: 2.1rem;
}

.order-table-container .tab-descrip .cart-area .cart-item {
    justify-content: inherit;
}

.change-password {
    padding: 2rem 2.2rem 1rem;
    border: 2px solid #e7e7e7;
}

.change-password h3 {
    font-size: 1.2rem;
    font-family: "Open Sans", sans-serif;
}

.account-content .form-footer button i {
    font-size: 17px;
    line-height: 20px;
    margin-right: 2px;
}

.box-head {
    margin-bottom: 18px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

@media only screen and (max-width: 767px) {
    .box-head {
        margin-bottom: 0;
    }
}

.save-details-box .save-details {
    border: 1px solid #eff2f7;
    padding: calc(15px + (20 - 15) * ((100vw - 320px) / (1920 - 320)));
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    border-radius: 5px;
    background-color: #eff2f7;
    position: relative;
}

.save-details-box .save-details .save-name {
    position: relative;
    margin-bottom: 1.25rem;
}

.save-details-box .save-details .save-address p {
    line-height: 1.4;
    letter-spacing: 1px;
    margin: 0 0 calc(2px + (5 - 2) * ((100vw - 320px) / (1920 - 320)));
}

.save-details-box .save-details .mobile p.mobile {
    margin: 20px 0 6px;
    padding-bottom: 0.375rem;
    line-height: 1.4;
}

.save-details-box .save-details .button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: -5px;
}

.save-details-box .save-details .button a {
    width: 100%;
    margin: 5px;
    background-color: #fff;
    color: #212529;
    border: none;
}

/* .account-content label {
    margin-bottom: 0.7rem;
    color: #777;
    font-family: "Open Sans",sans-serif;
    font-size: 1.4rem;
    font-weight: 400;
} */

.save-details .nav-tabs {
    background: none;
    flex-wrap: inherit;
    padding: 0;
}

.size-filter.list-filter li {
    border: 1px solid var(--border);
    border-radius: 5px;
    margin-right: 10px;
}

.size-filter.list-filter li a:hover {
    background-color: transparent;
    color: #7E7E7E;
}

.size-filter.list-filter li.active a:hover {
    background-color: var(--primaryColor);
    color: #ffffff;
}

.size-filter.list-filter li.office.active a {
    background-color: var(--red);
    border-color: var(--red);
}

.size-filter.list-filter li.home.active a {
    background-color: var(--primaryColor);
    border-color: var(--primaryColor);
}

/* Order Detail */

.mini-card {
    padding: 27px 30px 30px 30px;
    border-radius: 20px;
    border: 1px solid var(--primaryColor);
}

.order-info-wrapper {
    padding: 25px;
}

.order-info-title {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 1.25rem;
}

.order-info-list ul li,
.order-info-list ul span {
    list-style: none;
    padding: 15px 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.order-info-list ul span{
    padding-bottom: 0;
}

.order-info-list ul li:not(:last-child) {
    border-bottom: 1px solid #E0E2E3;
}

.order-info-list ul li span {
    font-size: var(--font-size-h6);
    color: var(--black);
    font-weight: 500;
}

/* My Review */

/* .myreview-container .myreviews-groupheader-right {
    width: 33.33333333%;
    padding: 0 15px;
} */

.myreview-container,
.mypayment-container {
    padding: 30px;
    margin-bottom: 1.25rem;
    display: inline-block;
    width: 100%;
}

@media only screen and (max-width: 420px) {
    .myreview-container,
    .mypayment-container {
        padding: 15px;
    }
}

.myreview-container .myreview-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

@media only screen and (max-width: 767px) {
    .myreview-container .myreview-item {
        /* display: none; */
    }
}


.item-block-review {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(var(--light-border), 1);
    padding: 20px 0;
}

.myreview-container .item-all-pro .item-pro {
    margin-top: 1rem;
    margin-bottom: 0.625rem;
    gap: 20px;
}

.myreview-container .item-all-pro .item-block-review .item-pro {
    align-items: start;
    display: flex;
    gap: 15px;
    width: 100%;
}

.myreview-container .item-all-pro .item-block-review .item-pro .item-pro-image img {
    -o-object-fit: cover;
    object-fit: cover;
    width: 60px;
    /* width: calc(-13.2px + 3.5vw); */
    
}

.myreview-container .item-all-pro .item-block-review .item-pro .card-details {
    width: calc(100% - 126px);
}

@media (max-width: 640px) {
    .myreview-container .item-all-pro .item-block-review .item-pro {
        display: inline-block;
    }
    .myreview-container .item-all-pro .item-block-review .item-pro .item-pro-image img {
        margin-bottom: 0.625rem;
    }
    .myreview-container .item-all-pro .item-block-review .item-pro .card-details {
        width: 100%;
    }
}

.myreview-container .item-all-pro .item-pro .form-field {
    margin: 10px 0;
}

.item-area .myreview-container .item-all-pro {
    margin-bottom: 0;
}

.myreview-container .item-block-reviewRating {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    padding: 15px 10px 0px;
}

@media (max-width:640px) {
    .product-rate.review-rating {
        display: flex !important;
        align-items: center;
        margin: 0 auto;
    }
}

.profile-uploader {
    display: table;
    vertical-align: middle;
    margin-top: 30px;
}

.title-header-content {
    height: 100%;
}

#imageUpload {
    display: none;
}

#profileImage {
    cursor: pointer;
}

#profile-container {
    width: 100px;
    height: 100px;
    overflow: hidden;
    /* -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%; */
}

.profile-uploader span {
    display: table-cell;
    font-size: 22px;
    font-weight: 700;
    vertical-align: middle;
    text-align: center;
    text-transform: capitalize;
    width: 100%;
}

#profile-container img {
    width: 100px;
    height: 100px;
}

.submit-review-container .btn-submit {
    width: 220px;
    /* height: 48px; */
}

/* Rating Button */
@media screen and (min-width: 35em) {
    .gl-star-rating .gl-star-rating--stars>span {
        --gl-star-size: 30px;
    }

    .gl-star-rating .gl-star-rating--stars[aria-label]::after {
        --gl-tooltip-padding: .75em 1em;
        margin-left: 22px;
    }

    .gl-star-rating .gl-star-rating--stars[aria-label]::before {
        margin-left: 1rem;
    }
}

@media screen and (min-width: 42em) {
    .gl-star-rating .gl-star-rating--stars>span {
        --gl-star-size: 36px;
    }
}

@media screen and (min-width: 50em) {
    .gl-star-rating .gl-star-rating--stars>span {
        --gl-star-size: 42px;
    }
}

.rating-picker {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-width: 0;
    min-height: 64px;
    padding: 0.65rem 0.85rem;
    box-sizing: border-box;
    border: 1px solid #dfe4e8;
    border-radius: 0.75rem;
    background: #f8fafb;
    box-shadow: inset 0 1px 2px rgba(24, 36, 46, 0.03);
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Apply hover ONLY to mouse/desktop users */
@media (hover: hover) and (pointer: fine) {
  .rating-picker:hover,
  .rating-picker:focus-within {
    border-color: var(--primaryColor);
    background: var(--primary-soft, rgba(255, 50, 77, 0.08));
  }
}

.rating-picker:focus-within {
    box-shadow: 0 0 0 3px var(--primary-soft-hover, rgba(255, 50, 77, 0.16));
}

.rating-picker-icon {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border: 1px solid #f0d783;
    border-radius: 50%;
    color: #a76c08;
    background: #fff4ce;
    font-size: 1.1rem;
}

.rating-picker .gl-star-rating {
    flex: 1 1 0%;
    width: 0;
    max-width: 100%;
    min-width: 0;
}

.rating-picker .gl-star-rating--stars {
    display: flex;
    justify-content: space-between;
    gap: 0.1rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.rating-picker .gl-star-rating--stars > span {
    border-radius: 0.25rem;
    transition: transform 0.16s ease, filter 0.16s ease;
}

.rating-picker .gl-star-rating--stars > span:hover {
    filter: drop-shadow(0 2px 3px rgba(167, 108, 8, 0.2));
}

.rating-picker .gl-star-rating--stars > span:focus-visible {
    outline: 2px solid #a76c08;
    outline-offset: 2px;
}

.rating-picker select.star-rating {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

@media screen and (max-width: 47.938em) {
    .rating-picker {
        justify-content: center;
        gap: 0.5rem;
        padding: 0.5rem 0.65rem;
    }

    .rating-picker-icon {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
    }

    .rating-picker .gl-star-rating {
        flex: 0 1 auto;
        width: auto;
        max-width: 100%;
    }

    .rating-picker .gl-star-rating--stars {
        justify-content: flex-start;
        gap: clamp(2px, 0.8vw, 5px);
        width: fit-content;
    }

    .rating-picker .gl-star-rating--stars > span {
        --gl-star-size: clamp(21px, 7.5vw, 35px);
        flex: 0 0 var(--gl-star-size);
        max-width: var(--gl-star-size);
    }

    .rating-picker [data-star-rating] .gl-star-rating--stars[aria-label]::after {
        top: auto !important;
        right: auto !important;
        bottom: calc(100% + 4px) !important;
        left: 50% !important;
        width: max-content;
        max-width: min(14rem, calc(100vw - 24px));
        box-sizing: border-box;
        margin: 0 !important;
        padding: 0.45rem 0.7rem;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 0.45rem;
        background: rgba(17,17,17,1);
        box-shadow: 0 4px 12px rgba(35, 28, 30, 0.18);
        color: #fff;
        font-family: inherit;
        font-size: 0.75rem;
        font-weight: 600;
        line-height: 1.25;
        text-align: center;
        text-transform: none;
        transform: translateX(-50%) !important;
        white-space: normal;
        z-index: 20;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.15s ease, visibility 0.15s ease;
    }

    .rating-picker [data-star-rating] .gl-star-rating--stars[aria-label]:hover::after,
    .rating-picker [data-star-rating] .gl-star-rating--stars[aria-label]:focus-within::after,
    .rating-picker [data-star-rating] > select:focus + .gl-star-rating--stars[aria-label]::after,
    .rating-picker [data-star-rating] .gl-star-rating--stars[aria-label]:active::after,
    .rating-picker [data-star-rating] .gl-star-rating--stars[aria-label]:has(> span:active)::after,
    .rating-picker [data-star-rating] .gl-star-rating--stars.rating-tooltip-open[aria-label]::after {
        opacity: 1;
        visibility: visible;
    }

    .rating-picker [data-star-rating] .gl-star-rating--stars[aria-label]::before {
        display: none !important;
    }
}

@media screen and (min-width: 62em) and (max-width: 74.999em) {
    .review-product-card .row>.col-md-5.col-lg-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .rating-picker .gl-star-rating--stars>span {
        --gl-star-size: 32px;
        flex-basis: 32px;
        max-width: 32px;
    }
}

.gl-star-rating .gl-emote-bg {
    transition: fill 0.15s ease-in-out;
}

.gl-star-rating [data-value]:not(.gl-active) .gl-emote-bg {
    fill: #DCDCE6;
}

.gl-star-rating .gl-emote {
    transform: scale(.9);
    transition: transform 0.25s ease-in-out;
}

.gl-star-rating .gl-selected .gl-emote {
    transform: scale(1.1);
}

.star-rating + .nice-select {
    display: none;
}