@font-face {
    font-family: 'Sukar';
    font-weight: 400;
    src: url('../fonts/Sukar-Regular.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Sukar';
    font-weight: 600;
    src: url('../fonts/Sukar-Bold.ttf') format('truetype');
    font-display: swap;
}

* {
    outline: none;
}

html,
body,
h2,
h3,
h4,
ul,
p {
    margin: 0;
    padding: 0;
    font-weight: normal;
}

body {
    background-color: #fff;
    direction: rtl;
    font-family: Sukar;
    font-weight: 400;
    font-size: 16px;
    color: #000;
    padding-top: 110px;
}

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

a img {
    border-style: none;
}

img {
    max-width: 100%;
}

ul,
li,
ol {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

select,
button,
input,
textarea {
    outline: none;
    border: none;
    font: inherit;
}

textarea {
    resize: none;
}

button {
    cursor: pointer;
}

hr {
    margin-left: 0;
    margin-right: 0;
}

.c1 {
    background-color: var(--accent) !important;
}

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

.c3 {
    background-color: var(--secondary) !important;
}

.c4 {
    background-color: #FF9147 !important;
}

.light-bg {
    background-color: #F5F5F5;
}

.googleads {
    margin: 10px auto auto auto;
    text-align: center;
    display: block;
}

/*--------------------------------------------*/
/*  HEADER
/*--------------------------------------------*/
.container {
    position: relative;
    width: 96%;
    margin: 0 auto;
    max-width: 1300px;
}

.form-wrapper {
    display: flex;
    max-width: 70%;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    margin: auto;
}

.form-wrapper>span {
    position: relative;
}

.nav-container-top {
    height: 1px;
    visibility: hidden;
}

.side-menu {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    z-index: 100;
    width: 60%;
    min-width: 240px;
    background-color: var(--accent);
    padding: 80px 10px;
    box-sizing: border-box;
    color: #fff;
}

.side-flex {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.side-menu ul {
    width: 100%;
}

.side-menu li {
    margin-bottom: 25px;
    text-align: right;
    position: relative;
}

.side-menu .count.msg-count {
    right: 20px;
    background-color: var(--secondary);
}

.side-menu li a {
    display: block;
    padding-right: 30px;
}

.side-menu li i {
    width: 20px;
    margin-left: 15px;
    font-size: 15px;
}

.side-menu .btn {
    background-color: #fff;
    color: var(--primary) !important;
}

#credential_picker_container {
    left: 0;
    right: auto !important;
    top: 50px !important;
}

.logged-user {
    display: flex;
    justify-content: space-between;
    align-self: flex-start;
    align-items: center;
    text-align: right;
    flex-wrap: wrap;
    position: relative;
}

.logged-user:before {
    content: '';
    background-color: var(--accent);
    position: absolute;
    top: -30px;
    right: -26px;
    border-radius: 50%;
    width: 110px;
    height: 110px;
    z-index: -2;
}

.logged-user .user_name {
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
}

.logged-user .user-pic {
    width: 60px !important;
    height: 60px !important;
    margin: 0 0 0 15px !important;
}

.dim:before {
    content: '';
    background: rgba(0, 0, 0, 0.3);
    position: fixed;
    top: 0;
    right: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 100;
    transition: all 0.5s ease;
    backdrop-filter: blur(3px);
}

.mobile-menu {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: #F2F2F2;
    align-items: flex-end;
    justify-content: space-between;
    box-sizing: border-box;
    z-index: 1000;
}

.mobile-menu>li {
    position: relative;
    text-align: center;
    width: 20%;
    align-self: stretch;
    margin: 0 5px;
}

.mobile-menu .user-pic {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    top: -5px;
    padding-bottom: 0;
}

.mobile-menu>li:nth-child(3)>a:before {
    content: '';
    position: absolute;
    top: -15px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 60px;
    height: 60px;
    background-color: #F2F2F2;
    border-radius: 50%;
    z-index: -1;
    transition: all 0.3s ease;
}

.mobile-menu>li:nth-child(3)>a i {
    font-size: 36px;
    top: -5px;
}

.mobile-menu>li>a {
    font-size: 12px;
    display: block;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.mobile-menu>li>a span {
    padding-bottom: 5px;
}

.mobile-menu>li>a:hover,
.mobile-menu>li>a:hover:before {
    background-color: #fff;
}

.mobile-menu>li>a i {
    display: block;
    color: #606060;
    margin-bottom: 2px;
    font-size: 20px;
    text-align: center;
}

.dropdown {
    display: none;
    text-align: right;
    position: absolute;
    background: #fff;
    min-width: 150px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    font-size: 12px;
    color: #606060;
    bottom: 100%;
    border-radius: 6px;
    transform: translateX(-50%);
    left: 50%;
    margin-bottom: 22px;
}

.dropdown a {
    display: block;
    padding: 10px;
    font-size: 14px;
    font-weight: 600;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.dropdown li:first-child a {
    margin-top: 5px;
    border-radius: 6px 6px 0 0;
}

.dropdown li:last-child a {
    margin-bottom: 5px;
    border-radius: 0 0 6px 6px;
}

.dropdown a:hover {
    background-color: #F2F2F2;
}

.dropdown i {
    font-size: 18px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
}

.dropdown:after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(0, 0, 0, 0);
    border-top-color: #ffff;
    border-width: 6px;
    margin-left: -6px;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.16));
}

header {
    background-color: #fff;
    z-index: 100;
    position: fixed;
    top: 0;
    width: 100%;
}

header.hideov {
    overflow: hidden;
}

header.fixed .actions {
    border-radius: 0;
    background-color: rgba(0, 0, 0, 0.25);
}

header.fixed .actions a {
    color: #f2f2f2;
}

header.fixed .logo a {
    max-width: 116px;
    height: 56px;
}

header.fixed .logo.martaj a {
    margin-top: 7px;
}

header.fixed .logo.store a {
    width: 140px;
}

header.fixed .logo small {
    opacity: 0;
}

header.fixed .arrow {
    width: 11px !important;
    animation: none;
    right: 25px;
}

header.fixed .menu {
    display: block;
}

header>.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding-left: 145px;
    box-sizing: border-box;
    gap: 10px;
    min-height: 105px;
}

header.fixed>.container {
    min-height: unset;
}

header * {
    transition: all 0.3s ease;
}

header .form-wrapper .btn.c2 {
    margin-right: 10px;
}

.toggle-menu {
    display: none;
}

.logo {
    width: 144px;
}

.logo a {
    text-align: right;
    display: block;
    line-height: 0;
    position: relative;
    max-width: 100%;
}

.logo.store {
    width: 240px;
    height: 100%;
}

.logo.store a {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right center;
    height: 90px;
    width: 200px;
    position: relative;
    width: 200px;
    width: 200px;
    padding: 5px 0;
    box-sizing: border-box;
}

.logo img {
    max-height: 100%;
}

.arrow {
    position: absolute;
    top: 0;
    width: 15px;
    right: 30px;
    animation-name: none;
}

.arrow.fly {
    animation: arrowFly 3s forwards;
}

.fixed .arrow.fly {
    animation: none;
}

.logo small {
    color: #707070;
    font-size: 12px;
    display: block;
    opacity: 1;
    text-align: center;
}

.quick-results {
    background: #ffff;
    height: 400px;
    z-index: 10;
    padding: 20px;
    box-sizing: border-box;
    margin: 0 auto;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    border-radius: 0 0 10px 10px;
    position: absolute;
    top: 40px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    width: calc(100% - 7px);
    transition: all 0.3s ease;
    overflow: auto;
}

.custom-scroll::-webkit-scrollbar {
    width: 18px;
}

.custom-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    border: 6px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    background-color: var(--primary);
}

.quick-results.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.quick-results li {
    margin-bottom: 20px;
    padding-right: 5px;
}

.quick-results li .price {
    font-weight: 600;
    font-size: 18px;
}

.quick-results li .discount {
    background: none;
    color: var(--primary);
}

.quick-results li .discount::before {
    display: none;
}

.quick-results li p {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 5px;
}

.quick-results li a {
    display: flex;
    align-items: center;
    padding: 5px;
    border-radius: 5px;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.quick-results li a:hover {
    background: #f5f5f5;

}

.search-form {
    display: flex;
    justify-content: space-between;
    margin-left: 20px;
}

.search-form input[type=text] {
    background-color: #EBEBEB;
    border-radius: 0 6px 6px 0;
    min-width: 400px;
    height: 38px;
    padding: 5px 10px;
    box-sizing: border-box;
    flex: 1;
}

.search-form input[type=submit] {
    background: var(--secondary) url(../images/icons/search.svg) 7px 7px no-repeat;
    border-radius: 6px 0 0 6px;
    width: 38px;
    height: 38px;
    display: inline-block;
    vertical-align: bottom;
    position: relative;
    right: -5px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.search-form input[type=submit]:hover {
    transform: scale(1.2);
    border-radius: 6px;
}

.brands-list .parent-list {
    margin-bottom: 10px;
}

.brands-list .parent-list {
    overflow: unset;
}

.filter-specific .brands-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    margin-top: 60px;
}

.filter-specific .brands-list a {
    display: flex;
    width: fit-content;
    font-size: 17px;
    font-weight: bold;
}

.filter-specific .brands-list a div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.filter-specific .brands-list a small {
    display: block;
    background: var(--accent);
    width: fit-content;
    padding: 0 10px;
    border-radius: 4px;
    color: #fff;
}

.filter-specific .brands-list .blogo {
    width: 60px;
    height: 60px;
}

.blogo {
    width: 40px;
    height: 40px;
    display: inline-block;
    background-size: cover;
    background-position: center;
    border-radius: 5px;
    margin-left: 15px;
    vertical-align: middle;
    box-shadow: 0 8px 16px rgb(0 0 0 / 10%);
}

.btn {
    color: #fff;
    border-radius: 6px;
    padding: 0 15px;
    height: 38px;
    display: inline-block;
    text-align: center;
    box-sizing: border-box;
    vertical-align: middle;
    line-height: 38px;
    position: relative;
    background-color: var(--primary);
    overflow: hidden;
    z-index: 1;
    cursor: pointer;
}

.btn:disabled {
    background-color: #9c9c9c !important;
}

.btn#del_account {
    background-color: #a4a4a4;
    float: left;
}

.btn#del_account:hover {
    background-color: #a00000;
}

.notifications>div a:after,
.btn:after,
.flag:after,
.user:after,
.menu li a:after,
footer .social a:after {
    content: '';
    display: block;
    position: absolute;
    z-index: -1;
    background: rgba(0, 0, 0, 0.07);
    transition: height 0.5s ease-in-out;
    right: 0;
    bottom: 0;
    left: 0;
    height: 0;
    width: 100%;
    border-radius: 50% 50% 0 0/75% 75% 0 0;
}

.sub-menu a:after {
    display: none !important;
}

.notifications>div a:after {
    height: 100%;
    width: 0 !important;
    transition: width 0.5s ease-in-out !important;
    border-radius: 50% 0 0 50%/75% 0 0 75%;
    left: auto;
    right: 0;
}

.follow:after {
    background: var(--accent);
}

.notifications>div a:after {
    background: var(--accent);
}

.follow.active:after {
    background: rgba(0, 0, 0, 0.07);
    ;
}

.btn:hover:after,
.flag:hover:after,
.follow:hover:after,
.user:hover:after,
.menu li a:hover:after,
footer .social a:hover:after {
    height: 300%;
}

.notifications>div a:hover:after {
    width: 150% !important;
}

.btn.sm {
    font-size: 14px;
    padding: 0 15px;
    height: 28px;
    line-height: 28px;
    min-width: 100px;
    background: var(--accent);
    transition: all 0.3s ease;
}

.btn.follow {
    background: #b1b1b1 !important;
}

.btn.follow.active {
    background: var(--accent);
}

.basket i {
    transform: rotateY(180deg);
}

.btn.basket:hover i,
.added i {
    animation: basket 0.6s forwards;
}

sup.count {
    animation: scale 0.6s forwards;
}

sup.count {
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background-color: var(--primary);
    color: #fff;
    z-index: 10;
    border: 2px solid #fff;
    font-weight: 600;
    font-size: 12px;
    position: absolute;
    top: -10px;
    right: -10px;
    text-align: center;
    line-height: 23px;
    box-sizing: border-box;
}

sup.count:empty {
    display: none;
}

.btn i {
    margin-left: 8px;
    position: relative;
    font-size: 18px;
}

.btn.sm i {
    font-size: 16px;
    margin-left: 15px;
}

i {
    vertical-align: middle;
}

.card-wrapper {
    width: 145px;
}

.profile-card {
    width: 145px;
    position: absolute;
    left: 0;
    top: 0;
}

.profile-card .user {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    position: relative;
    z-index: 100;
    background-color: #f2f2f2;
    font-size: 13px;
    line-height: 20px;
    color: #484848;
    position: relative;
    overflow: hidden;
    height: 55px;
    box-sizing: border-box;
}

.log-out {
    position: absolute;
    left: 0;
    top: 10px;
    background: var(--accent);
    border-radius: 6px 0 0 6px;
    height: 30px;
    width: 30px;
    display: block;
    color: #fff;
    text-align: center;
}

.profile-card:hover .log-out {
    left: -30px;
}

.profile-card .login {
    font-size: 14px;
    padding: 10px;
}

.profile-card .login i {
    font-size: 24px;
    margin-left: 10px;
}

.user-pic {
    display: block;
    flex-shrink: 0;
    background-color: #707070;
    background-position: center;
    background-size: cover;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    position: relative;
}

.user-pic.changable:hover:before {
    opacity: 1;
    visability: visible;
}

.profile-card .user-pic {
    margin-left: 10px;
}

.profile-card .user p {
    width: 100%;
    word-break: break-word;
    font-weight: 600;
}

.profile-card .user span {
    display: block;
    font-weight: 400;
}

.profile-card .actions {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 5px 0;
    list-style: none;
    position: absolute;
    width: 100%;
    box-sizing: border-box;
    border-radius: 0 0 6px 6px;
    left: 0;
    background-color: #dedede;
    z-index: 100;
}

.profile-card .actions a {
    position: relative;
    color: #707070;
    border-radius: 6px;
    width: 30px;
    height: 30px;
    display: block;
    text-align: center;
    line-height: 30px;
    transition: background-color 0.3s ease;
}

.count.msg-count {
    width: 13px;
    height: 13px;
    line-height: 15px;
    right: -2px;
    left: auto;
    top: -4px;
    border: none;
}

.profile-card .actions i {
    font-size: 20px;
}

.profile-card .actions a:hover,
.profile-card .actions a.active {
    color: #fff;
    background-color: var(--secondary);
}

/*--------------------------------------------*/
/*  NAV MENU
/*--------------------------------------------*/
.menu {
    background-color: var(--primary);
    height: 40px;
    line-height: 40px;
    width: 100%;
    position: relative;
}

.menu>.container>ul {
    height: 40px;
}

.menu li {
    display: inline-block;
    margin-left: 40px;
    color: #fff;
    font-size: 16px
}

.menu li a {
    display: block;
    padding: 0 10px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.menu li i {
    margin: 0 0 5px 8px;
}

/*--------------------------------------------*/
/*  BREADCRUMBS
/*--------------------------------------------*/
.bar {
    background-color: #EEEEEE;
    border-radius: 3px;
    padding-right: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    position: relative;
}

.breadcrumbs {
    box-sizing: border-box;
    font-size: 12px;
    font-weight: 600;
}

.breadcrumbs i {
    display: inline-block;
}

.breadcrumbs li {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    color: #444444;
    padding: 5px 0;
}

.breadcrumbs li:not(:last-child):after {
    content: '>';
    margin-right: 6px;
    color: #a7a7a7;
}

.breadcrumbs a {
    transition: all 0.3s ease;
    color: #888888;
}

.breadcrumbs a:hover {
    color: #000;
}

.breadcrumbs li:not(:last-child):after {
    content: '\e932';
    font-family: 'icomoon';
    vertical-align: middle;
    margin-right: 10px;
    font-size: 14px;
}

#toggle-filter {
    display: none;
}

#close-aside {
    display: none;
    position: absolute;
    left: 10px;
    top: 5px;
    font-size: 22px;
    color: #606060;
}

#toggle-filter i {
    margin: 0;
}

.filter-actions {
    display: inline-block;
}

.bar input[type=search] {
    max-width: 300px;
    flex-grow: 1;
    padding: 0 10px;
    box-sizing: border-box;
    margin-left: 20px;
}

.bar form+div {
    flex-shrink: 0;
    align-self: flex-start;
}

.bar form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex: 1;
    margin-left: 10px;
}

.bar form select {
    margin-right: 0;
}

.bar form select[name=search_cat] {
    margin: 0 10px;
}

.bar select {
    display: inline-block;
    background-color: #E1E1E1;
    border-radius: 3px 0 0 3px;
    padding: 5px 10px;
    margin-right: 10px;
    background-image: url(../images/icons/select.svg);
    background-size: 24px;
    background-position: 10px center;
    background-repeat: no-repeat;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    padding-left: 40px;
    height: 40px;
    cursor: pointer;
    min-width: 130px;
}

.bar>.btn {
    height: 33px;
    line-height: 33px;
    min-width: 85px;
    margin-right: 30px;
}

/*--------------------------------------------*/
/*  BANNER SECTION
/*--------------------------------------------*/
.banner {
    background-color: var(--primary);
    padding: 22px 0;
    overflow: hidden;
    position: relative;
    top: 20px;
    margin-bottom: 20px;
}

.banner .container {
    display: flex;
    align-items: center;
}

.banner aside {
    z-index: 10;
    background-color: #fff;
    border-radius: 10px;
    width: 250px;
    box-sizing: border-box;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    flex-shrink: 0;
    position: relative;
    padding: 10px 0;
}

.cat-list {
    display: flex;
    flex-wrap: wrap;
    min-height: 300px;
    justify-content: space-between;
}


.cat-list.light-bg {
    position: relative;
    margin-bottom: 20px;
    overflow: hidden;
    padding: 10px 0;
}

.cat-list li {
    list-style: none;
    display: block;
    transition: all 0.3s ease;
    width: 100%;
    height: 38px;
}

.cat-list>li>a {
    color: #333;
    display: block;
    font-weight: 600;
    font-size: 14px;
    height: 100%;
}

.cat-list i {
    background-color: #F5F5F5;
    padding: 10px;
    margin-left: 10px;
    width: 36px;
    box-sizing: border-box;
    color: #707070;
    position: relative;
    z-index: 10;
    display: inline-flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.cat-list>li:hover,
header .sub-menu a:not(.parent-list):hover {
    background-color: #EEEEEE;
}

.cat-list>li:hover a {
    color: #000;
}

.cat-list>li:hover i {
    color: #fff;
    background-color: var(--secondary);
    transition: background-color 0.3s ease;
}

.cat-list li:hover .sub-menu:empty {
    display: none;
}

.cat-list li:hover .sub-menu,
.menu li:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: all 0.3s ease;
}

/* CUSTOM ICONS */

.fa-shampoo,
.fa-hijab {
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: center;
    width: 20px;
    height: 20px;
}

.cat-list li:hover .fa-shampoo {
    background-image: url(../images/icons/hair-h.png);
}

.fa-shampoo {
    background-image: url(../images/icons/hair.png);
}

.parent-list .fa-shampoo {
    background-image: url(../images/icons/hair-3.png);
}

.parent-list:hover .fa-shampoo {
    background-image: url(../images/icons/hair-g.png);
}

/* HIJAB ICON */
.fa-hijab {
    background-image: url(../images/icons/hijab.png);
}

.cat-list li:hover .fa-hijab {
    background-image: url(../images/icons/hijab-h.png);
}

.parent-list:hover .fa-hijab {
    background-image: url(../images/icons/hijab-3.png);
}

.cat-list::before {
    content: '';
    background-color: #F5F5F5;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 36px;
    border-radius: 0 10px 10px 0;
}

.cat-list .sub-menu {
    transform: translateX(15px);
    margin-right: -13px;
    border-radius: 10px;
}

.sub-menu {
    background-color: #fff;
    padding: 40px 30px 20px 30px;
    box-sizing: border-box;
    position: absolute;
    right: 100%;
    top: -5px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    height: calc(100% + 13px);
    width: 650px;
    color: #333333;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
    transition: all 0.1s ease;
}

header .sub-menu {
    top: 100%;
    overflow: hidden;
    border-radius: 0 0 10px 10px;
    width: 100%;
    right: 0;
    height: 60vh;
    min-height: 360px;
    padding: 20px;
    transform: translateY(15px);
    border-radius: 5px;
}

header .sub-menu a {
    margin-left: 50px;
    transition: all 0.3s ease;
}

header .sub-menu:empty {
    display: none;
}

.sub-menu .list-group {
    margin-bottom: 25px;
    min-width: 200px;
    font-size: 14px;
}

.sub-menu .list-group>a {
    font-weight: 600;
    margin-bottom: 10px;
    display: inline-block;
}

.parent-list {
    font-weight: 600;
    margin-top: 10px;
    padding: 0 !important;
}

.parent-list i {
    transition: none;
}

.parent-list:hover,
.sub-menu .list-group>a:hover {
    color: var(--primary);
}

.sub-menu .list-group li {
    list-style: none;
    display: block;
    margin-bottom: 10px;
    margin-left: 0;
}

.sub-menu .list-group li:last-child {
    margin-bottom: 0;
}

.sub-menu a {
    transition: all 0.3s ease;
    color: #333;
}

.sub-menu .list-group li a:hover {
    color: #000;
    text-decoration: underline;
}

.sub-menu .cat-img {
    bottom: -23px;
    position: absolute;
    left: -50px;
    max-width: 360px;
    max-height: 400px;
}

.sub-menu .cat-img img {
    max-height: 360px;
}

.ads-slider {
    position: static;
}

.ads-slider li>a {
    width: 360px;
    height: 360px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #fff;
    border-radius: 10px;
    display: block;
    position: relative;
}

.ads-slider li {
    transition: all 0.3s ease;
}

.ads-slider li:hover {
    transform: scale(1.05);
}

.ads-slider li:hover .store {
    top: 0;
    transition: all 0.3s ease;
}

.owl-carousel .owl-stage .store {
    position: relative;
    top: -23px;
    left: 10px;
    text-align: left;
    display: block;
}

.owl-carousel .owl-stage .store a {
    background-color: var(--secondary);
    color: #fff;
    font-size: 16px;
    font-weight: 300;
    border-radius: 0 0 6px 6px;
    box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px;
    padding: 5px 10px;
    box-sizing: border-box;
}

.banner .owl-stage-outer {
    overflow: visible;
}

/*--------------------------------------------*/
/*  ITEMS SECTIONS
/*--------------------------------------------*/
section {
    padding: 30px 0;
}

.overflow-control {
    overflow: hidden;
    padding-bottom: 30px;
}

.head-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
    gap: 10px
}

.head-title .title+.btn {
    margin-bottom: 30px;
    align-self: flex-end;
}

.title {
    font-size: 30px;
    color: #707070;
    border-bottom: 2px solid var(--primary);
    margin-bottom: 30px;
    display: inline-block;
}

h3.title {
    font-size: 24px;
}

section.c2 h2 {
    color: #fff;
    border-color: var(--secondary);
}

.tabs {
    background-color: #EBEBEB;
    list-style: none;
    border-radius: 16px 6px 16px 6px;
    padding: 0 10px;
    flex-grow: 1;
    margin-bottom: 15px;
    white-space: nowrap;
    box-sizing: border-box;
    max-width: 100%;
    overflow: auto;
    margin-right: 30px;
    min-width: 350px;
}

section.c2 .tabs {
    background-color: rgba(0, 0, 0, 0.16);
}

.tabs-content {
    min-height: 306px;
    position: relative;
    width: 96%;
    margin: 0 auto;
    max-width: 1300px;
}

.tabs li {
    display: inline-block;
    padding: 0 10px;
}

.tabs li a {
    font-size: 14px;
    color: #505050;
    padding: 7px 0;
    display: block;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}

.tabs li a:hover {
    border-color: rgba(0, 0, 0, 0.2);
}

.tabs li.current a {
    border-color: var(--primary);
    text-shadow: 0 0 1px #000;
}

section.c2 .tabs li.current a {
    border-color: var(--secondary);
    text-shadow: 0 0 1px #fff;
}

section.c2 .tabs a {
    color: #fff;
}

.catsec-bg:nth-child(even) {
    background-color: #F5F5F5;
}

.cat-products {
    box-sizing: border-box;
    padding: 0 5px;
}

.products-list {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    gap: 45px 30px;
}

section.related-products:has(.products-list:empty) {
    display: none;
}

.tabs-content .products-list {
    overflow: auto;
    flex-wrap: nowrap;
    padding: 10px 5px;
    box-sizing: border-box;
}

.products-list.filter-result {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.products-list .owl-item {
    display: flex;
}

.products-list .owl-stage {
    display: flex;
}

.products-list li {
    width: 230px;
    position: relative;
    flex-shrink: 0;
}

.products-list.filter-result li {
    width: 100% !important;
}

.products-list li * {
    transition: all 0.3s ease;
}

.products-list li a:first-child {
    display: block;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px;
    position: relative;
    z-index: 10;
    height: 100%;
    overflow: hidden;
}

.products-list li .img {
    border-radius: 6px 6px 0 0;
    margin: 5px 3px 0 3px;
    box-sizing: border-box;
    overflow: hidden;
    height: 214px;

}

.store3 .item-card .gallery li,
.store51 .item-card .gallery li {
    background-size: contain;
    /*background-size: auto;*/
    background-repeat: no-repeat;
}

.store51 .products-list li .img span {
    background-size: contain;
}

.products-list li .img span {
    background-size: contain;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    height: 100%;
    transition: all .25s ease;
}

.products-list li:hover .img span {
    transform: scale(1.1);
    transition: all 3s ease;
}

.products-list h3 {
    font-size: 14px;
    color: #000000;
    margin-bottom: 10px;
    max-height: 50px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}


.tag {
    font-weight: 600;
    border-radius: 6px;
    padding: 0 10px;
    min-width: 50px;
    box-sizing: border-box;
    text-align: center;
    height: 28px;
    line-height: 28px;
    transition: all 0.5s ease;
    background-color: #EEEEEE;
}

.tag:empty {
    display: none !important;
}

.tag.special {
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px;
    color: #fff;
    background-color: var(--secondary);
    font-size: 10px;
}

.tag.discount {
    color: #fff;
    background-color: var(--primary);
    border-radius: 0 6px 6px 0;
    position: absolute;
    left: 0;
    top: 20px;
    direction: ltr;
    z-index: 10;
}

.sold-out .img,
.sold-out h3,
.sold-out .row,
.sold-out .discount {
    opacity: 0.5;
}

.sold-out-label {
    background: #e33a49;
    color: #fff;
    left: 0;
    position: absolute;
    font-size: 14px;
    top: 55px;
    z-index: 10;
    border-radius: 0 6px 6px 0;
}

.products-list .wishlist {
    background-color: var(--secondary);
    color: #fff;
    border-radius: 6px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    position: absolute;
    right: 10px;
    top: 20px;
    text-align: center;
    opacity: 0;
    z-index: 10;
}

.bycott {
    position: absolute;
    display: block;
    height: 40px;
    background-image: url(../images/bycott.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 40px;
    left: 8px;
    top: -30px;
}

.single-item .bycott {
    right: 5px;
    top: 10px;
    z-index: 10;
    width: 60px;
    height: 60px;
}

.ltr {
    direction: ltr;
    display: inline-block;
}

.whatsapp-chat {
    width: 60px;
    height: 60px;
    background-color: #24CC63;
    background-image: url(../images/whatsapp.png);
    background-size: 32px;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 60px;
    box-shadow: rgb(0 0 0 / 15%) 0px 4px 12px 0px;
    position: fixed;
    right: 24px;
    top: auto;
    bottom: 24px;
    z-index: 10000;
    transition: all 0.5s ease;
}

.whatsapp-order {
    background-color: #24CC63;
}

.whatsapp-chat:hover {
    transform: scale(1.05);
}

.fa-heart {
    font-size: 22px;
}

.products-list .wishlist.inactive:hover {
    background-color: var(--secondary);
    color: #fff;
}

.wishlist:hover,
.wishlist.active {
    background-color: var(--primary);
    opacity: 1;
}

.wishlist div {
    transition: none !important;
}

.wishlist.active i {
    animation: beat ease 1.2s forwards 1;
}

.popup-view .rating {
    margin: 0 auto;
}

.products-list li:hover .wishlist,
.products-list li:hover .rating,
.products-list li .rating.r {
    opacity: 1;
}

.products-list li .rating {
    opacity: 0;
    flex-grow: 1;
    text-align: left;
}

.products-list .info {
    padding: 10px;
    position: relative;
}

.underline-text {
    border-bottom: 2px solid rgba(112, 112, 112, 0.23);
    color: var(--accent);
    position: relative;
}

.underline-text s {
    position: absolute;
    left: 0;
}

.price {
    font-size: 22px;
    color: #000;
    line-height: 1;
    font-weight: 600;
}

.price small {
    font-size: 12px;
    font-weight: 400;
}

.products-list .label {
    background-color: #E1E1E1;
    color: #707070;
    font-size: 12px;
    border-radius: 0 3px 3px 0;
    min-width: 30px;
    min-height: 20px;
    line-height: 20px;
    text-align: center;
    left: -10px;
    position: relative;
    font-weight: 600;
    padding: 0 5px;
    box-sizing: border-box;
}

.products-list .label:empty {
    display: none;
}

.products-list .row {
    margin-top: 5px;
}

.row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

s {
    text-decoration: line-through;
    color: var(--primary);
    font-size: 15px;
    display: block;
}

.underline-text:before,
s:not(.discount):before {
    content: '₪';
    font-family: serif;
}

s:empty {
    display: none;
}

.flag {
    position: absolute;
    top: 100%;
    left: 10px;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    max-width: 90%;
    line-height: 30px;
    background-color: var(--accent);
    color: #fff;
    font-size: 16px;
    border-radius: 0 0 6px 6px;
    box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px;
    padding: 0 10px;
    box-sizing: border-box;
    z-index: 1;
}

.flag:empty {
    display: none;
}

.store-icon:hover i,
.buy:hover i {
    font-weight: 900;
}

.jq-ry-container {
    padding: 0;
}

/*--------------------------------------------*/
/*  STORES LIST SECTION
/*--------------------------------------------*/
.cat-sec {
    display: none;
}

.cat-sec .round-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    margin: 0 auto;
}

.cat-sec .round-list h3 {

    text-align: center;
    margin-top: 5px;
    font-weight: 600;
}

.cat-sec .round-list li a:first-child {
    width: 140px;
    height: 140px;
}

.round-list {
    padding-top: 20px;
}

.round-list li a:first-child {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid #E1E1E1;
    display: block;
    background-color: #fff;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.3s ease;
}

.round-list li a:hover {
    border-color: var(--secondary);
}

.container-nav .owl-stage-outer {
    width: calc(100% - 130px);
    margin: 0 auto;
}

.owl-dots {
    text-align: left;
    margin-left: 9px;
}

.owl-dots button {
    display: inline-block;
    margin-right: 8px;
    background-color: #C4C4C4;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    transition: all 0.3s ease;
}

.owl-dots button:hover {
    background-color: rgba(253, 188, 58, 0.36);
}

.owl-dots .active {
    background-color: var(--secondary) !important;
}

.owl-nav button {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: var(--primary);
    color: #fff !important;
    top: 50%;
    transform: translateY(-50%);
    position: relative;
}

.voting {
    min-height: 150px;
}

.voting .owl-nav button {
    background-color: var(--secondary);
}

.owl-prev:hover {
    transform: translateX(5px) translateY(-50%);
}

.owl-next:hover {
    transform: translateX(-5px) translateY(-50%);
}

.owl-nav button {
    transition: all 0.3s ease;
}

.owl-carousel .owl-nav button i {
    font-size: 34px;
}

.owl-nav button.owl-prev {
    position: absolute;
    right: 0;
}

.owl-nav button.owl-next {
    position: absolute;
    left: 0;
}

.owl-nav button.disabled {
    opacity: 0;
    visibility: hidden;
}

.banner .owl-nav {
    text-align: left;
    color: #fff;
    margin-top: 10px;
    position: absolute;
    width: 85%;
    left: 0;
}

.banner .owl-nav button {
    margin-right: 10px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    background-color: transparent;
    position: relative;
    transform: none;
}

.banner .owl-nav button:hover {
    background-color: rgba(0, 0, 0, 0.15);
    transform: none;
}

/*--------------------------------------------*/
/* DOWNLOAD APP
/*--------------------------------------------*/
.app_mobile {
    opacity: 0;
    display: block;
    max-height: 250px;
    margin: 40px auto;
}

.app_mobile.animate {
    animation-name: animateTop;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}

.download_btns {
    text-align: center;
}

.download_btns .app_btn {
    cursor: pointer;
    display: inline-block;
    margin: 0 10px;
    width: 250px;
}

/*--------------------------------------------*/
/*  PRICING PLANS
/*--------------------------------------------*/
.plans,
.plans * {
    border: none;
}

.plans {
    border-spacing: 20px 0;
}

.plans td {
    text-align: center;
    width: 33.33%;
}

.plans tr {
    background: rgb(245 245 245 / 33%);
}

.plans tr:nth-child(odd) {
    background: #eeeeee;
}

.plans tr td:first-child {
    text-align: right;
}

.plans tbody tr:first-child td {
    padding-top: 20px;
}

.plans tr:last-child td {
    padding: 0;
    background: #fff;
}

.plans thead {
    font-size: 18px;
}

.plans thead th:first-child {
    background: #fff;
}

.plans thead th {
    padding: 15px 0;
    color: #fff;
    background: #444444;
    border-radius: 6px 6px 0 0;
}

.plans thead th:nth-child(3),
.plans tr:last-child td:nth-child(3) .btn {
    background: var(--secondary);
}

.plans .btn {
    display: block;
    width: 100%;
    height: 10%;
    height: 50px;
    line-height: initial;
    line-height: 50px;
    border-radius: 0 0 6px 6px;
    font-weight: 600;
}

.plans strong,
.plans u {
    font-size: 24px;
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
    text-decoration: none;
}

.plans strong {
    color: var(--accent);
}

.plans u {
    color: var(--accent);
}

.plans strong:before {
    content: "\f00c";
}

.plans u:before {
    content: "\f00d";
}

/*--------------------------------------------*/
/*  FEATURES LIST SECTION
/*--------------------------------------------*/
.icons-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    text-align: center;
    border-top: 1px solid #EEEEEE;
    margin-top: 50px;
    padding-top: 30px;
}

.icons-grid li {
    padding: 20px 10px;
    box-sizing: border-box;
    flex-grow: 1;
    width: 25%;
    min-width: 180px;
}

.icons-grid i {
    color: var(--primary);
    font-size: 40px;
    display: block;
    margin-bottom: 20px;
}

.icons-grid h4 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}

/*-----------------------------------------------------------------------------------*/
/*  FOOTER
/*-----------------------------------------------------------------------------------*/
footer {
    margin-top: 50px;
    position: relative;
    background-color: #444444;
}

footer .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    gap: 10px 40px;
}

footer .logo {
    display: block;
    width: 220px;
    position: relative;
}

footer .logo i {
    color: #c1c1c1;
    font-style: normal;
    right: 48px;
    bottom: 10px;
    position: absolute;
}

footer .web-title {
    width: 300px;
    text-align: center;
}

footer .web-title h1 {
    font-size: 22px;
}

footer .web-title h2 {
    font-size: 18px;
}

footer .web-title a {
    color: #cecece;
}

footer .container div:first-child {
    align-self: center;
    /* margin-left: 50px; */
}

footer .links {
    min-width: 300px;
    margin: 20px;
}

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

footer .links li a {
    color: #bbb;
    transition: all 0.3s ease;
}

footer .links li a:before {
    content: '';
    width: 8px;
    height: 8px;
    background-image: url(../images/icons/arrow.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
    margin-left: 5px;
    filter: grayscale(100%);
    transition: all 0.3s ease;
}

footer .links li a:hover {
    color: #fff;
}

footer .links li a:hover:before {
    filter: none;
}

footer .contact {
    display: flex;
    flex-shrink: 0;
    align-items: center;
}

footer .contact h3 {
    position: relative;
    color: #bfbfbf;
    font-size: 26px;
    box-sizing: border-box;
    padding-left: 20px;
    margin-left: 20px;
    border-left: 2px solid var(--secondary);
}

footer .contact li {
    list-style: none;
    color: #fff;
    display: block;
    margin-bottom: 3px;
    font-size: 14px;
}

footer .contact li a {
    color: #fff;
    font-size: 14px;
}

footer .btm {
    background-color: #333333;
    height: 20px;
    padding: 15px 0;
    color: #fff;
    text-align: center;
    position: relative;
}

footer .btm a.martaj {
    width: 100px;
    height: 40px;
    left: 10px;
    bottom: 0;
    background-image: url(../images/martaj-logo.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    transition: all 0.3s ease;
}

footer .btm a.martaj:hover {
    transform: scale(1.1);
}

footer p {
    font-size: 14px;
    max-width: 85%;
    margin: 0 auto;
    text-align: center;
}

footer .social {
    text-align: center;
    margin-top: 10px;
    padding-top: 10px;
    display: flex;
    justify-content: center;
    border-top: solid 1px rgba(255, 255, 255, 0.2);
}

footer .social a {
    background-size: 15px;
    background-position: center;
    border-radius: 50%;
    background-color: #8c8b84;
    background-repeat: no-repeat;
    background-size: 26px;
    width: 30px;
    height: 30px;
    margin: 5px;
    line-height: 30px;
    display: inline-block;
    color: #fff;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

footer .social a:after {
    background-color: var(--accent);
}

/*-----------------------------------------------------------------------------------*/
/*  MONGID DESIGNS
/*-----------------------------------------------------------------------------------*/
.mongiddesigns {
    display: block;
    position: absolute;
    bottom: 10px;
    left: 10px;
    direction: ltr;
}

.mongiddesigns span {
    display: block;
    position: relative;
    width: 30px;
    height: 30px;
    background-color: #fff;
    background-image: url(https://mongiddesigns.com/designs/mongid/iconxl.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 85%;
    border-radius: 6px;
    z-index: 10;
    transform: scale(0.85);
    transition: all 0.3s ease;
}

.mongiddesigns:hover span {
    transform: scale(1);
}

.mongiddesigns h3 {
    display: block;
    text-align: left;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 30px;
    padding: 0 5px 0 10px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    z-index: 1;
    opacity: 0;
    transition: left 0.3s ease, opacity 0.3s ease;
    transition-delay: 0.1s;
}

.mongiddesigns:hover h3 {
    left: 26px;
    opacity: 1;
}

.mongiddesigns h3 i {
    display: block;
    text-transform: capitalize;
    color: #ccc;
    font-size: 10px;
    height: 10px;
    font-style: normal;
}

.mongiddesigns h3 b {
    display: block;
    text-transform: uppercase;
    color: #fff;
    font-size: 12px;
    height: 12px;
    white-space: nowrap;
}

/*--------------------------------------------*/
/*  INNER PAGE
/*--------------------------------------------*/
.wrapper {
    background-color: #fff;
    padding-top: 40px;
    position: relative;
    min-height: calc(100vh - 418px);
}

.wrapper .container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.wrapper .container section {
    flex: 1;
    width: 100%;
    padding: 20px 0;
}

.wrapper aside {
    margin-top: 20px;
    margin-right: 30px;
    width: 280px;
    border-radius: 6px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.confirm-order-wrapper aside {
    width: 320px;
}

.wrapper aside .light-bg {
    border-radius: 6px;
}

.filter-scroll {
    max-height: calc(100vh - 265px);
    overflow-y: auto;
}

.filter {
    overflow: hidden;
    position: sticky;
    top: 120px;
    z-index: 10;
    margin-bottom: 20px;
}

.filter.fixed {
    position: fixed;
    top: 100px;
}

.filter.stop {
    position: absolute;
    bottom: 20px;
    top: auto;
}

.filter .filter-group {
    color: #707070;
    padding: 20px;
}

.filter .filter-group>label {
    display: inline-block;
    border-bottom: 2px solid var(--accent);
    margin-bottom: 15px;
    font-weight: 600;
}

.checklist>div {
    position: relative;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.checklist label {
    cursor: pointer;
}

.checklist label+sub {
    background: #ccc;
    color: #fff;
    padding: 0 5px;
    border-radius: 6px;
    font-weight: 600;
}

.checklist label+sub:empty {
    display: none;
}

input[type='checkbox'] {
    visibility: hidden;
    margin-top: 0;
    margin-left: 10px;
    width: 20px !important;
    cursor: pointer;
}

input[type='checkbox']:after {
    content: '';
    position: relative;
    visibility: visible;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border: 2px solid #B8B8B8;
    border-radius: 5px;
    display: block;
    box-sizing: border-box;
    top: 0;
}

input[type='checkbox']:checked:after {
    background-color: var(--accent);
    border-color: var(--accent);
    content: "\eb72";
    font-family: 'icomoon';
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    text-align: center;
}

aside .form-group:first-child {
    background-color: #E1E1E1;
    padding-bottom: 33px;
    padding-top: 25px;
}

.range-slider {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #000000;
}

.range-slider .slider {
    width: 100%;
    margin: 0 15px;
}

aside .products-list {
    display: block;
    padding-bottom: 1px;
}

aside .products-list li {
    margin: 0 auto;
    margin-bottom: 50px;
}

aside .products-list li:last-child {
    margin-bottom: 60px;
}

aside .title {
    font-size: 24px;
    padding-top: 20px;
    margin-right: 15px;
    margin-bottom: 20px;
}

.sub-cats {
    padding-bottom: 2px;
    margin-right: 30px;
    display: flex;
    gap: 10px 30px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.head-title .round-btn {
    display: none;
    width: 60px;
    height: 60px;
    background-color: var(--accent);
    border-radius: 50%;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    color: #fff;
    line-height: 60px;
    text-align: center;
    position: absolute;
    left: 0;
    bottom: -100%;
    margin-bottom: 5px;
    font-size: 24px;
}

.sub-cats li {
    list-style: none;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.sub-cats li a {
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}

.sub-cats li.current a {
    border-color: var(--secondary) !important;
}

.sub-cats a:hover {
    border-color: var(--secondary);
}

.bg {
    background-size: cover;
    background-position: center;
    height: 190px;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
}

.cat-wrapper .bg {
    height: 230px;
}

.bg::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
}

.bg+.container .head-title .title,
.bg+.container .sub-cats li {
    color: #fff;
}

.bg+.container .bar {
    margin-bottom: 33px;
}

.form-box .title {
    color: #707070 !important;
}

/*--------------------------------------------*/
/*  JQUERY UI
/*--------------------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    background-color: #fff;
    border-radius: 50%;
    border: 4px solid var(--accent);
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    top: -10px;
    cursor: pointer;
}

.ui-slider-horizontal {
    border: none !important;
    height: 1px;
    background-color: #202020;
}

.ui-widget-header {
    background-color: var(--accent);
    height: 2px !important;
}

/*--------------------------------------------*/
/*  PRODUCT PAGE
/*--------------------------------------------*/
table {
    width: 100%;
    color: #434343;
    border-spacing: 0;
}

table tr {
    background-color: #fff;
}

table:not(.plans) tr:nth-child(odd) {
    background-color: #F2F2F2;
}

table td {
    border: 1px solid rgb(112 112 112 / 48%);
    padding: 5px 20px
}

table tr td:first-child {
    font-weight: 600;
    width: 30%;
}

.product-content {
    width: calc(100% - 280px);
    flex: 1;
    overflow: hidden;
}

.product-content iframe {
    border-radius: 15px;
    width: 100%;
    display: block;
    margin: 10px 0;
}

.content-aside {
    margin-top: 20px;
    border-top: 1px solid #DCDCDC;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.product-content .desc {
    color: #434343;
    font-size: 18px;
}

.product-content>div {
    padding: 20px;
}

.review-content {
    display: flex;
    align-items: flex-start;
    color: #707070;
    margin-bottom: 40px;
}

.form-box {
    position: relative;
    box-sizing: border-box;
    background-color: #EEEEEE;
    border-radius: 6px;
    width: 100%;
    position: relative;
    padding: 20px !important;
    margin-top: 30px;
}

.count-label {
    border-radius: 6px;
    color: #fff;
    background-color: var(--secondary);
    font-weight: 600;
    padding: 0 8px;
    height: 22px;
    line-height: 24px;
}

.reviews-list {
    width: 70%;
    flex-grow: 1;
}

.reviews-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.reviews-list li:last-child {
    margin-bottom: 0;
}

.reviews-list li>div {
    width: 100%;
}

.reviews-list .customer {
    margin-left: 20px;
    width: 100px;
    text-align: center;
}

.reviews-list .round-img {
    width: 60px;
    height: 60px;
    margin: auto auto 10px auto;
}

.reviews-list .customer span {
    font-size: 14px;
    font-weight: 600;
}

.review-text {
    margin: 8px 0;
    background-color: #fff;
    border-radius: 6px;
    padding: 20px 15px;
    font-size: 14px;
    font-weight: 600;
}

.review-text:empty {
    display: none;
}

.reviews-list .pdate {
    direction: ltr;
    text-align: left;
    display: block;
    font-size: 14px;
}

.reviews-list .pdate i {
    margin-right: 5px;
}

.submit-review {
    position: relative;
    width: 250px;
    margin-right: 35px;
    padding-right: 35px;
    flex-shrink: 0;
    border-right: 1px solid #B8B8B8;
}

.form-box textarea {
    width: 100%;
    height: 140px;
    background-color: #fff;
    padding: 15px 10px;
    box-sizing: border-box;
    border-radius: 6px;
    margin-top: 10px;
    font-size: 14px;
    resize: none;
}

.submit-review label {
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

.submit-review button:hover i:before {
    content: "\f4a2";
}

.product-owner {
    padding: 20px 15px;
    position: sticky;
    top: 120px;
}

.product-owner .store-info .name {
    font-size: 16px;
    line-height: 1.2;
}

.product-owner .store-info .pic {
    border: none;
}

.product-owner .store-info .rating {
    margin-top: 5px;
}

.product-owner .store-info,
.contact-store {
    align-items: flex-start;
    justify-content: flex-start;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #DCDCDC;
}

.contact-actions {
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-actions a {
    margin: 0 5px;
}

.contact-actions a:last-child {
    margin-left: 0;
}

.contact-actions a:first-child {
    margin-right: 0;
}

.contact-store li {
    display: flex;
    list-style: none;
    font-size: 16px;
    color: #000000;
    display: block;
    margin-bottom: 10px;
    padding: 0 20px;
    word-break: break-all;
}

.contact-store li:last-child {
    margin-bottom: 0 !important;
}

.contact-store span {
    display: inline-block;
}

.contact-store i {
    color: #707070;
    font-size: 16px;
    display: inline-block;
    vertical-align: top;
    margin-left: 10px;
    line-height: 1.5;
}

.stores-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
    margin: 0 -20px 0 -20px;
}

.store-card {
    position: relative;
    display: flex;
    justify-content: space-between;
    border-radius: 6px;
    background: #fff;
}

.stores-list .store-card {
    width: calc(50% - 40px);
    min-width: 335px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    margin: 0 20px 50px 20px;
}

.store-card .side {
    width: 60%;
    padding: 15px;
    align-self: center;
    box-sizing: border-box;
}

.name h3 {
    font-weight: 600;
    font-size: 16px;
}

.store-card .side h3 {
    margin-bottom: 20px;
}

.store-card .info {
    width: 150px;
    max-width: 30%;
    flex-shrink: 0;
    background: #F2F2F2;
    padding: 15px;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stores-list .contact-actions {
    justify-content: flex-end;
}

.stores-list .contact-store li {
    font-size: 13px;
    margin-bottom: 10px;
    padding: 0
}

.store-card .btn {
    min-width: 100px;
    font-size: 15px;
    height: 30px;
    line-height: 30px;
    background: var(--accent);
}

.customer-card .user-profile {
    width: 100% !important;
    padding: 20px 0;
}

.customer-card .user-profile .round-img {
    margin: auto;
}

.customer-card .user-profile h2 {
    margin-top: 10px;
}

.customer-card .user-profile .level {
    font-size: 15px;
}

.customer-card .user-profile ul {
    margin: 0 30px;
}

.customer-card .user-profile li {
    margin: 5px 0;
    padding: 5px 10px;
    display: flex;
    font-size: 16px;
    height: 30px;
    line-height: 30px;
    border-radius: 3px;
    text-align: right;
    color: #fff;
    background: var(--primary)b5;
}

.customer-card .user-profile li:nth-child(2) {
    background: var(--secondary)b5;
}

.customer-card .user-profile li:nth-child(3) {
    background: var(--accent)b5;
}

.customer-card .user-profile li span {
    display: block;
    width: 44px;
    line-height: 44px;
    margin: -5px -10px -5px 15px;
    text-align: center;
    background: rgba(0, 0, 0, 0.1);
    font-size: 26px;
}

.single-item {
    color: #000;
    display: flex;
    justify-content: space-between;
    position: relative;
}

.single-item .item-data {
    flex: 1;
    position: relative;
    flex-grow: 1;
    min-width: 400px;
    padding: 0 30px;
    box-sizing: border-box;
}

.single-item h2 {
    font-size: 21px;
    font-weight: 600;
    margin-bottom: 10px;
}

.single-item .general-info>* {
    display: inline-block;
    margin-left: 10px;
    font-size: 12px;
}

.general-info .rating {
    vertical-align: sub;
}

.single-item .pricing {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #DCDCDC;
}

.single-item .option-group {
    border-bottom: 1px solid #DCDCDC;
}

.single-item .price {
    font-size: 28px;
}

.single-item .price small {
    font-size: 21px;
}

.single-item s.discount {
    text-decoration: none;
    margin-right: 25px;
}

s.discount {
    font-size: 14px;
    background-color: var(--primary);
    color: #fff;
    border-radius: 5px;
    padding: 2px 7px;
    display: inline-block;
    direction: ltr;
}

#old_price_txt {
    font-size: 18px;
}

.discount:before {
    content: '-';
}

.discount:empty {
    display: none;
}

.sub-sec {
    margin-bottom: 25px;
}

.sub-sec .actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.btn.not-available,.add-to-cart.disabled {
    cursor: not-allowed;
    background-color: #888888 !important;
    pointer-events: none;
}

.sub-sec .title {
    display: block;
    font-size: 18px;
    border: none;
    color: inherit;
    margin-bottom: 10px;
}

.sub-sec .title i {
    margin-left: 10px;
    color: #707070;
}

.sub-sec .title sub {
    display: block;
    font-size: 12px;
    color: #616161;
}

.radio-tabs input[type='radio'] {
    display: none;
}

.radio-tabs label {
    border-radius: 6px;
    background-color: #EEEEEE;
    padding: 3px 10px;
    margin-left: 10px;
    margin-bottom: 10px;
    min-width: 100px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    border: 4px solid transparent;
    transition: all 0.3s ease;
    position: relative;
    text-transform: capitalize;
}

.radio-tabs label:hover,
.radio-tabs input:checked+label.img {
    background-color: #fff;
    border-color: var(--accent) !important;
}

.radio-tabs input:checked+label.color,
label.color:hover {
    border-color: rgba(0, 0, 0, 0.25) !important;
}

.radio-tabs input:checked+label {
    background-color: var(--accent);
    color: #fff;
}

.radio-tabs input:disabled+label {
    border-color: #EEEEEE !important;
    opacity: 0.5;
    cursor: not-allowed;
}

input:disabled+label:before {
    content: "";
    display: block;
    width: 2px;
    height: 125%;
    position: absolute;
    left: 50%;
    top: -4px;
    background: red;
    transform: rotate(-45deg);
    opacity: 0.6;
}

.radio-tabs label.img {
    min-width: 46px;
    height: 46px;
    padding: 0;
    border-color: #EEEEEE;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.radio-tabs label.color {
    min-width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 50%;
}

.single-item .qty {
    display: inline-block;
}

.single-item .qty .title {
    margin-left: 40px;
    margin-bottom: 0;
}

.qty input {
    background-color: inherit;
    color: #707070;
    font-size: 18px;
    font-weight: 600;
    width: 40px;
    text-align: center;
}

.qty i {
    color: #EEEEEE;
    font-size: 25px;
    cursor: pointer;
    display: inline-block;
}

.qty .enable i {
    color: var(--accent);
    opacity: 1 !important;
}

input[type='number'] {
    -moz-appearance: textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.add-info {
    display: inline-block;
    margin-right: 30px;
    font-size: 12px;
    vertical-align: middle;
}

.add-info p {
    display: inline-block;
    max-width: 150px;
    vertical-align: top;
}

.add-info i {
    color: #707070;
    margin-left: 5px;
    font-size: 18px;
}

.single-item .actions a {
    flex-shrink: 0;
}

.icon-btn {
    background-color: #EEEEEE;
    border-radius: 6px;
    color: #707070;
    width: 38px;
    height: 38px;
    display: inline-block;
    text-align: center;
    line-height: 38px;
    transition: all 0.3s ease;
    font-size: 22px;
    flex-shrink: 0;
    position: relative;
}

.icon-btn.inactive:hover {
    background-color: #EEEEEE;
    color: #707070 !important;
}

.icon-btn.inactive:hover i {
    transform: none !important;
}

.icon-btn:hover,
.icon-btn.active {
    background-color: var(--accent);
    color: #fff !important;
}

.icon-btn i {
    transition: transform 0.3s ease;
    line-height: 38px;
}

.del-action i {
    font-size: 16px;
}

.icon-btn.wishlist:not(.active):hover i {
    transform: scale(1.2);
}

.icon-btn.compare:hover i {
    transform: rotate(90deg);
}

.icon-btn.ask i {
    display: inline-block;
    font-size: 19px;
    position: relative;
    transition: transform 0.3s ease;
}

.icon-btn.ask .fa-thumbs-down {
    transform: scaleX(-1);
}

.icon-btn.ask:hover .fa-thumbs-down {
    transform: scaleX(-1) translateY(3px);
}

.icon-btn.ask:hover .fa-thumbs-up {
    transform: translateY(-3px);
}

#item-offer {
    background-color: rgba(0, 0, 0, 0.1);
    display: none;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(4px);
    position: fixed;
    top: 0;
    right: 0;
    z-index: 100;
    transition: all 1s ease;
    text-align: center;
}

#item-offer object {
    width: 100%;

}

.offer-container {
    width: 700px;
    max-width: 100%;
    top: 50%;
    position: relative;
    transform: translateY(-50%);
    margin: 0 auto;
}

.offer-text {
    color: #fff;
    position: absolute;
    font-size: 24px;
    top: 48%;
    left: 0;
    right: -15px;
    margin: 0 auto;
    z-index: 100;
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px var(--accent), 0 0 40px var(--accent), 0 0 50px var(--accent), 0 0 60px var(--accent), 0 0 70px var(--accent);
}

.offer-text.loading {
    text-shadow: none;
}

.offer-text.loading:after {
    content: ' .';
    animation: dots 1s steps(5, end) infinite;
    margin-right: 20px;
}

.offer-result {
    color: #fff;
    position: absolute;
    font-size: 40px;
    top: 60%;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 100;
}

.offer-result small {
    font-size: 24px;
}

.offer-result.scale {
    animation: scale 1.5s forwards;
}

.single-item .product-slider li a {
    display: block;
    height: 360px;
    background-position: center;
    background-size: cover;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: move;
    border-radius: 6px;
}

.single-item aside {
    margin: 0;
    flex-shrink: 1;

}

.single-item .product-slider li a img:not(.zoomImg) {
    display: none;
}

.single-item .product-slider {
    width: 360px;
    flex-shrink: 0;
}

.owl-thumbs {
    margin-top: 25px;
}

.owl-thumbs button {
    background: none;
    position: relative;
    display: inline-block;
    padding: 0;
    margin: 0 6px;
}

.owl-thumbs button:hover:before {
    border-color: #888888;
}

.owl-thumbs button:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    box-sizing: border-box;
    border: 3px solid transparent;
    transition: all 0.3s ease;
}

.owl-thumbs button.active:before {
    background: rgb(255 255 255 / 56%);
    border-color: var(--secondary);
}

.owl-thumbs img {
    width: 60px;
    height: 60px;
    display: block;
    border-radius: 6px;
}

body.compensate-for-scrollbar {
    overflow: auto;
    margin: 0;
}

/*--------------------------------------------*/
/*  ITEMS CARDS 
/*--------------------------------------------*/
.cards-list {
    margin-right: 9px;
    margin-left: auto;
}

.cards-list .owl-stage-outer {
    padding-right: 9px;
    padding-left: 0;
    margin-right: -18px;
    margin-left: 0;
}

.cards-list .owl-next {
    left: -20px !important;
}

.cards-list .owl-prev {
    right: -30px !important;
}

.item-card {
    margin: 10px auto;
    border-radius: 3px;
    background-color: #fff;
    padding: 10px;
    box-sizing: border-box;
    color: #333333;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16);
    transition: all 0.3s ease;
    max-width: 410px;
}

.item-card:hover {
    transform: scale(1.02);
}

.store-info .name {
    font-size: 18px;
    font-weight: 600;
    display: block;
}

.link {
    color: #4CA3C4;
    font-size: 14px;
    direction: ltr;
    display: inline-block;
    text-align: right;
    margin: 5px 0;
    word-break: break-all;
}

.store-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: right;
}

.store-info .pic {
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 4px solid #E1E1E1;
    background-color: #fff;
    box-sizing: border-box;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    margin-left: 10px;
}

.item-card p {
    font-size: 12px;
}

.item-card .desc {
    margin: 15px 0;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-card .gallery {
    direction: ltr;
    display: flex;
    height: 228px;
    flex-flow: column wrap;
}

.item-card .gallery li {
    list-style: none;
    background-size: cover;
    background-position: center;
    height: 108px;
    flex: 1;
    margin: 5px;
}

.item-card .gallery li:only-child {
    margin: 0;
}

.item-card .gallery li:first-child {
    flex: 100%;
    min-width: 20%;
}

.item-card .gallery li:nth-child(2):last-child {
    min-width: 20%;
}

/*--------------------------------------------*/
/*  VOTING SECTION 
/*--------------------------------------------*/
.voting li {
    width: 120px;
    position: relative;
    padding: 15px 0;
}

.voting li a {
    position: relative;
    height: 120px;
    display: block;
}

.voting .imgs span {
    display: block;
    width: 50%;
    height: 120px;
    background-position: center;
    background-size: cover;
    transition: all 0.3s ease;
    position: absolute;
    z-index: 0;
}

.voting .imgs span:first-child {
    right: 0;
    top: 0;
    border-radius: 0 6px 6px 0;

}

.voting .imgs span:last-child {
    left: 0;
    top: 0;
    border-radius: 6px 0 0 6px;

}

.voting .imgs span:hover {
    width: 80%;
    z-index: 1;
    opacity: 1 !important;
}

.voting .imgs:hover span {
    opacity: 0.6;
}

.voting .number {
    display: block;
    color: #fff;
    background-color: var(--accent);
    border: 3px solid #EEEEEE;
    width: 27px;
    height: 27px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    position: absolute;
    top: -15px;
    right: 0;
    left: 0;
    margin: 0 auto;
    z-index: 10;
}

.voting-result {
    display: flex;
    width: 75px;
    height: 20px;
    position: absolute;
    bottom: -10px;
    z-index: 10;
    margin: 0 auto;
    left: 0;
    right: 0;
    padding: 2px;
    transition: all 0.3s ease;
}

.voting-result.right {
    right: 0;
    left: auto;
    width: 50%;
}

.voting-result.left {
    left: 0;
    right: auto;
    width: 50%;
}

.voting-result::before {
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    border: 3px solid #EEEEEE;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 6px;
    box-sizing: border-box;
}

.voting-result:empty,
.voting-result.single {
    display: none;
}

.voting-result.single span {
    width: 100%;
    display: block;
}

.voting-result span {
    color: #fff;
    font-weight: 600;
    height: 20px;
    text-align: center;
    font-size: 12px;
    position: relative;
    z-index: 10;
}

.voting-result span:first-child,
.voting-result span:only-child {
    background-color: var(--secondary);
    border-radius: 0px 3px 3px 0;

}

.voting-result span:last-child:not(:only-child) {
    background-color: #606060;
    border-radius: 3px 0 0 3px;
}

.voting .voting-result span:first-child:before,
.voting-result span:only-child:before {
    content: '';
    width: 0;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--secondary);
    transition: all 0.3s ease;
    border-radius: 0px 3px 3px 0;
    z-index: -1;
}

.voting-result span:only-child,
.voting-result span:only-child:before {
    border-radius: 3px !important;
}

.voting .voting-result:hover span:first-child,
.voting .voting-result:hover span:only-child {
    background-color: #fff;
}

.voting .voting-result:hover {
    transform: scale(1.25);
}

.voting .voting-result:hover span:before {
    width: 100%;
}

[data-fancybox] {
    cursor: pointer;
}

.fancybox-slide--iframe .fancybox-content {
    max-height: 100%;
    background: none !important;
    border-radius: 16px;
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.3);
}

.fancybox-bg {
    opacity: 0.3 !important;
}

.fancybox-container {
    backdrop-filter: blur(3px);
}

body.compensate-for-scrollbar {
    overflow: auto !important;
}

.gallery-fb .fancybox-bg {
    opacity: 0.9 !important;
}

.gallery-fb .fancybox-container {
    backdrop-filter: none;
}

.split {
    padding-right: 20px;
    padding-bottom: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100%;
}

.split h1 {
    display: block;
    width: 50%;
    margin: 15px auto;
    text-align: center;
}

.split-side {
    flex-basis: 50%;
    min-width: 48%;
    box-sizing: border-box;
    text-align: center;
    padding: 10px;
    border-radius: 6px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.split-side .row {
    margin-top: auto;
}

.split table td {
    padding: 2px 5px;
}

.split-side:hover,
.split-side.current {
    background-color: rgba(0, 0, 0, 0.05);
}

.split-side:hover .btn,
.split-side.current .btn {
    background-color: var(--primary);
}

.split-side .rating {
    margin: 0 auto 10px auto !important;
}

.split table {
    margin-top: 10px;
}

.split-side h3 {
    font-weight: 600;
}

.split-side .option {
    min-height: 270px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.split-side table tr td:first-child {
    font-size: 12px;
}

.split-side .btn {
    width: 50%;
    background-color: #666;
    transition: all 0.3s ease;
}

.split-side>.btn {
    margin: auto auto 20px auto;
}

.split .parent>.btn {
    margin: 20px 10px 20px 0;
}

.split .voting-result {
    bottom: 0;
    margin: 20px auto;
    position: relative;
    height: 35px;
    padding: 5px;
    width: 50%;
}

.split .voting-result::before {
    border-width: 9px;
}

.split .voting-result span {
    height: 35px;
    font-size: 24px;
}

.split .voting-result.right {
    float: right;
    margin-left: 0;
    margin-right: 0;
}

.split .voting-result.left {
    float: left;
    margin-left: 0;
    margin-right: 0;
    align-self: flex-end;
}

/*--------------------------------------------*/
/*  PROFILE
/*--------------------------------------------*/
.mapbox {
    width: 100%;
    height: 250px;
}

.user-profile {
    width: 120px;
    margin-left: 40px;
    text-align: center;
    margin-top: 30px;
}

.user-profile .round-img {
    width: 120px;
    height: 120px;
    margin-left: 40px;
    text-align: center;
    transition: all 0.3s ease;
}

.round-img.changable {
    font-size: 12px;
    font-weight: 600;
    line-height: 120px;
    color: transparent;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.round-img.changable:before {
    content: '';
    background-color: rgba(0, 0, 0, .5);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.3s ease;
    border-radius: 50%;
    opacity: 0;
    z-index: -1;
}

.round-img.changable:hover {
    color: #fff;
}

.round-img.changable:hover:before {
    opacity: 1;
}

#customer_image,
.level:empty {
    display: none;
}

.level {
    font-weight: 600;
    border-bottom: 2px solid var(--accent);
    padding-bottom: 5px;
    margin: 10px 0;
    display: inline-block;
}

.user-profile>span {
    font-size: 20px;
    color: #C4C4C4;
    display: block;
}

.level-icon {
    position: relative;
    display: block;
    margin-top: 15px;
}

.level-icon i {
    color: var(--accent);
    font-size: 27px;
}

.level-icon b {
    font-size: 18px;
    position: absolute;
    right: 0;
    left: 0;
    color: #fff;
    line-height: 32px;
}

.cover {
    height: 170px;
    background-position: bottom -50px right -20px;
    background-image: url(../images/cover.svg);
}

.cover.c2 {
    background-color: var(--accent);
}

.cover:before {
    display: none;
}

.cover-wrapper {
    position: relative;
    top: 30px;
    margin-bottom: 30px;
}

.cover-wrapper section {
    padding-bottom: 0 !important;
}

.cover-wrapper aside {
    margin-top: 0;
}

.cover-wrapper .head-title .title {
    border-color: var(--secondary);
    color: #fff;
    margin-bottom: 0;
}

.cover-wrapper .head-title .sub-cats a {
    color: #fff;
}

.cover-wrapper .head-title {
    margin-bottom: 50px;
    align-items: flex-end;
}

form {
    position: relative;
}

.form-group input:not([type='checkbox']),
.form-group select,
.form-group textarea {
    padding: 5px 10px;
    height: 40px;
    border: 1px solid #C4C4C4;
    box-sizing: border-box;
    width: 300px;
    border-radius: 5px;
}

.form-group input:not([type='checkbox']).error,
.form-group select.error,
.form-group textarea.erro {
    border-color: #c94130;
}

.form-group {
    margin-bottom: 25px;
}

.form-group select {
    background-image: url(../images/icons/select-arrow.png);
    background-size: 12px;
    background-position: 20px center;
    background-repeat: no-repeat;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

.form-group.inline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0;
}

.form-group.inline div {
    margin-bottom: 25px;
}

.form-group.inline div:first-child {
    margin-left: 60px;
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 10px;
}

.form-group textarea {
    width: 100%;
    height: 105px;
}

.side-nav {
    padding: 20px;
}

.side-nav a>span {
    display: block;
    font-size: 26px;
    line-height: 1;
    transition: all 0.3s ease;
}

.side-nav li {
    margin-bottom: 15px;
    display: block;
    list-style: none;
    padding: 10px 5px;
    transition: all 0.3s ease;
}

.side-nav li:last-child {
    margin-bottom: 0;
}

.side-nav li:hover,
.side-nav li.current {
    background-color: #EEEEEE;
}

.side-nav li:hover a,
.side-nav li.current a {
    border-color: rgba(112, 112, 112, 0.25);
    font-weight: 600;
}

.side-nav li:hover span,
.side-nav li.current span {
    color: var(--accent);
}

.side-nav a {
    font-size: 14px;
    display: block;
    border-right: 5px solid transparent;
    padding-right: 15px;
    transition: all 0.3s ease;
    flex-grow: 1;
}

.hover-actn li {
    display: flex;
    justify-content: space-between;
}

.hover-actn .action-btns {
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.hover-actn li:hover .action-btns {
    opacity: 1;
    visibility: visible;
}

.sticky {
    position: sticky;
    top: 120px;
    overflow: hidden;
}

/*--------------------------------------------*/
/*  ORDRS LIST 
/*--------------------------------------------*/
.cart-note{
    margin: 20px auto;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
}
.list-items {
    position: relative;
}

.list-items li {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    position: relative;
    transition: all 0.3s ease;
}

.list-items li:last-child {
    margin-bottom: 0 !important;
}

.list-items li .row {
    width: 100%;
}

.list-items:not(.cart-list) li .row {
    justify-content: flex-start;
}

.list-items li .img+div,
.list-items li .round-img+div {
    width: 100%;
}

.list-items li h3 {
    font-size: 16px;
    font-weight: 600;
    word-break: break-word;
}

.list-items li .discount {
    top: 10px;
    margin-left: auto;
}

.list-items .img,
.split-side .img {
    position: relative;
    width: 100px;
    height: 100px;
    display: block;
    flex-shrink: 0;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    background-color: #F5F5F5;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    margin-left: 15px;
}

.split-side .img {
    width: 120px;
    height: 120px;
    margin: 20px auto;
}

.list-items .qty-price {
    font-weight: 600;
    color: var(--accent);
    direction: ltr;
    display: inline-block;
    border-right: 3px solid rgba(112, 112, 112, 0.25);
    padding-right: 5px;
    font-size: 16px;
}

.list-items .inline-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: 12px;
    font-weight: 600;
    color: #707070;
    margin-top: 15px;
}

.list-items .inline-list span {
    margin-left: 15px;
}

.list-items .inline-list span:last-child {
    margin-left: 0;
}

.inline-list.no-top {
    margin-top: 0;
}

.list-items .inline-list p {
    border-right: 3px solid rgba(112, 112, 112, 0.25);
    padding-right: 7px;
}

.list-items .inline-list span i {
    margin-left: 5px;
    font-size: 15px;
    display: inline-block;
}

.action-btns {
    display: flex;
}

.action-btns>span {
    width: 36px;
    height: 36px;
    line-height: 36px;
    margin: auto 0;
    margin-right: 5px;
    flex-shrink: 0;
    background: #EEEEEE;
    color: #707070 !important;
    font-weight: 600;
    font-size: 22px;
    border-radius: 50%;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.action-btns>span i {
    font-size: 14px;
}

.action-btns>span.del:hover,
.del-action:hover,
.cart_del:hover,
.fav_del:hover,
.del-btn:hover {
    background-color: var(--accent) !important;
    color: #fff !important;
}

.action-btns>span.restore:hover {
    background-color: var(--accent);
    color: #fff;
}

.cart-num.connect:after {
    content: '';
    width: 2px;
    height: 100%;
    background: #EEEEEE;
    display: block;
    left: 17px;
    position: absolute;
}

.ordr-status .Y {
    color: var(--accent);
}

.ordr-status .S,
.ordr-status .D {
    color: var(--secondary);
}

.ordr-status .N {
    color: var(--primary);
}

.ordr-status .Y:before {
    content: "\ec1a";
}

.ordr-status .S:before {
    content: "\ec2e";
}

.ordr-status .N:before {
    content: "\ec0e";
}

.ordr-status .D:before {
    content: "\f4e1";
}

/*--------------------------------------------*/
/*  MESSAGES 
/*--------------------------------------------*/
.hover-list li>a {
    padding: 15px;
    box-sizing: border-box;
}

.hover-list li.N {
    background-color: #F5F5F5;
}

.msg {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
    margin-right: 20px;
    display: flex;
}

.msg p {
    font-size: 14px;
    font-weight: 600;
}

.msg>div {
    border-right: 3px solid rgba(112, 112, 112, 0.25);
    padding-right: 20px;
    width: 100%;
}

.msg a+div {
    border: none;
}

.msg:first-child {
    margin-right: 0;
}

.msg:first-child p {
    font-size: 16px;
}

.msg .date {
    display: block;
    margin-top: 15px;
    font-size: 12px;
    color: rgba(112, 112, 112, 0.85);
}

.round-img {
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    background-color: #707070;
    display: block;
    position: relative;
    margin: 0 auto;
    align-self: flex-start;
}

.list-items .round-img,
.store-card .round-img {
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #fff;
    margin-left: 15px;
}

.round-img.border {
    box-shadow: none;
    border: 2px solid #E1E1E1;
    margin: auto;
}

.pull-left {
    text-align: left;
}

#send-msg .title {
    margin-bottom: 10px;
}

/*--------------------------------------------*/
/*  CART 
/*--------------------------------------------*/

.cart-list .row {
    justify-content: space-between !important;
}

.cart-list .info-actions>span {
    font-size: 14px;
}

.cart-list .qty-price {
    font-size: 18px;
    color: #000000;
}

.cart-list .discount {
    background-color: var(--accent);
    color: #fff;
}

.cart-list .qty {
    margin-right: auto;
}

.cart-list .img+div {
    width: 100%;
}

.cart-list input[type='checkbox'] {
    margin-right: 0;
    margin-left: 10px;
    top: -5px;
    position: relative;
}

.store-items {
    background-color: #F9F9F9;
    margin-bottom: 15px;
    border-radius: 6px;
}

.store-items:last-child {
    margin-bottom: 0 !important;
}

.store-items li:not(.cart-head) {
    padding: 15px;
    box-sizing: border-box;
    margin-bottom: 20px;
}

.store-items .cart-head {
    padding: 10px 15px;
    border-radius: 6px 6px 0 0;
    background-color: #E1E1E1;
    margin-bottom: 0 !important;
}

.store-items .cart-head .store-info {
    margin-left: 10px;
}

.store-items .store-info a {
    font-size: 12px;
}

.store-items .store-info .pic {
    width: 30px;
    height: 30px;
    border: none;
}

.store-items .info-actions .inline-list {
    min-width: 300px;
    justify-content: space-between;
}

.cart-head b {
    font-size: 18px;
}

.order-aside {
    display: none;
}

.order-summary {
    padding: 20px;
    padding-top: 0;
}

.coupon-code {
    display: flex;
    gap: 5px;
    align-items: center;
}

.order-summary .coupon-code .btn {
    width: fit-content !important;
}

.order-summary li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #DCDCDC;
    color: #606060;
}

.order-summary li:nth-child(3) {
    border-bottom: 1px solid #AEAEAE;
    padding-bottom: 50px;
    align-items: flex-start;
}

.order-summary li:last-child {
    color: #000000;
    font-weight: 600;
    border-bottom: none;
    margin-top: 15px;
    margin-bottom: 10px;
}

.order-summary li:last-child b {
    font-size: 22px;
}

.order-summary .btn {
    background-color: var(--accent);
    width: 100%;
    text-align: center;
}

.order-summary .btn:nth-of-type(even) {
    background-color: #bdbdbd;
    margin-top: 10px;
}

.order-summary #address {
    width: 100%;
    margin-right: 10px;
}

.order-summary .form-group {
    background-color: transparent !important;
    padding: 0 !important;
    margin-bottom: 10px;
    width: 100%;
}

.order-summary .form-group * {
    width: 100% !important;
}

.order-summary .form-group textarea {
    height: 70px;
}

.alert {
    min-width: 200px;
    height: 40px;
    line-height: 40px;
    display: none;
    padding: 10px 60px 10px 20px;
    margin: 0;
    font-weight: 600;
    font-size: 16px;
    position: fixed;
    right: 20px;
    bottom: 100px;
    border-radius: 3px;
    text-align: center;
    overflow: hidden;
    background-color: rgba(250, 250, 250, 0.9);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    backdrop-filter: blur(3px);
    z-index: 1000;
}

.alert i {
    font-family: 'icomoon';
    font-weight: 900;
    width: 40px;
    font-size: 18px;
    font-style: normal;
    line-height: 60px;
    height: 60px;
    text-align: center;
    color: #fff;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    background-color: #666;
}

.alert i:after {
    content: "\eb72";
}

.alert.o i {
    background-color: var(--secondary);
}

.alert.o i:after {
    content: "\f4d0";
}

.alert.b i {
    background-color: var(--accent);
}

.alert.r i {
    background-color: var(--accent);
}

.alert.r i:after {
    content: "\eb72";
}

.info-msg {
    background-color: ".var(--accent)." c9;
    color: #fff;
    font-size: 16px;
    padding: 10px;
    margin-top: auto;
}

.info-msg i {
    font-size: 24px;
    margin-left: 5px;
}

.empty {
    display: block;
    margin: auto;
    width: 300px;
    height: 300px;
    background-image: url(../images/empty.png);
    background-repeat: no-repeat;
    background-position: center;
    grid-column: span 4;
}

.empty.msgs {
    background-image: url(../images/empty-msgs.jpg);
}

.empty.favs {
    background-image: url(../images/empty-favs.png);
}

.empty.reviews {
    height: 200px;
    background-image: url(../images/empty-reviews.jpg);
}

.notifications {
    color: #fff;
    position: fixed;
    height: 100vh;
    right: -300px;
    top: 0;
    width: 300px;
    background: rgba(25, 25, 25, 0.85);
    backdrop-filter: blur(5px);
    z-index: 100;
    transition: all 0.3s ease;
}

.notifications.active {
    right: 0;
}

.notifications>div {
    position: absolute;
    top: 320px;
    left: -40px;
    text-align: center;
    overflow: hidden;
    background: rgba(25, 25, 25, 0.85);
    backdrop-filter: blur(5px);
    width: 40px;
    color: #fff;
    border-radius: 6px 0 0 6px;
}

.notifications>div a {
    display: block;
    position: relative;
    line-height: 40px;
    font-size: 18px;
    overflow: hidden;
}

.notifications>div a sup {
    background: var(--accent);
    display: inline-block;
    width: 12px;
    height: 12px;
    font-size: 11px;
    position: absolute;
    top: 5px;
    border: 1px solid #333;
    line-height: 12px;
    right: 5px;
    border-radius: 50%;
    font-family: 'Sukar';
    transition: all 0.3s ease;
}

.notifications>div a sup:empty {
    display: none;
}

.notifications div>a:hover sup {
    background: rgba(25, 25, 25, 0.85);
}

.notifications section {
    padding: 20px 10px;
}

.notifications section .title {
    color: #fff;
    font-size: 24px;
    margin-bottom: 10px;
}

.notifications .notifications-wrapper {
    height: calc(100vh - 100px);
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background-color: var(--primary) !important;
}

.mCSB_scrollTools .mCSB_draggerRail {
    background-color: rgba(255, 255, 255, 0.24) !important;
}

.notifications section li {
    padding: 10px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.notifications section li:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.notifications section li div>a,
.full {
    width: 100%;
}

.notifications section li div {
    display: flex;
    justify-content: space-between;
}

.notifications section li .img,
.quick-results li .img {
    width: 60px;
    height: 60px;
    display: block;
    border-radius: 6px;
    margin-left: 10px;
    flex-shrink: 0;
    background-size: cover;
    position: relative;
}

.notifications section li sup,
.quick-results li sup {
    position: absolute;
    border-radius: 2px;
    top: 4px;
    right: -5px;
    background-color: var(--accent);
    padding: 0 4px;
    direction: ltr;
    transition: all 0.3s ease;
    color: #fff;
    font-weight: 600;
}

.notifications section li sup:before {
    content: '-';
}

.notifications section li sup:empty {
    display: none;
}

.notifications section li h3 {
    font-size: 12px;
}

.notifications section li div:last-child,
.notifications p {
    font-size: 10px;
    margin-top: 5px;
    color: #b3b3b3;
}

.notifications section li div:last-child span:first-child {
    flex-grow: 1;
}

.notifications .qty input {
    color: #fff;
}

.notifications .qty i {
    opacity: 0.5;
}

.notifications .action-btns span {
    color: #939394;
}

.notifications .action-btns span,
.notifications .qty {
    transform: scale(0.7);
    background: none;
    margin: 0 !important;
}

.notifications .qty-price {
    font-size: 13px;
    margin-left: 5px;
}

.notifications .btn {
    width: 100%;
    margin: 20px 0;
}

/*--------------------------------------------*/
/*  LOADER 
/*--------------------------------------------*/
.spinner {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(2px);
    z-index: 100;
}

.spinner>div {
    width: 18px !important;
    margin: 0 !important;
    flex-grow: 0 !important;
    height: 18px;
    background-color: var(--primary);
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

/*--------------------------------------------*/
/*  IFRAMES 
/*--------------------------------------------*/
main {
    padding-left: 20px;
    height: 100%;
    border-radius: 15px;
    background: #fff;
}

.fancybox-thumbs__list a {
    border-radius: 6px;
}

.fancybox-thumbs__list a:before {
    border: 3px solid var(--secondary) !important;
}

.fancybox-iframe {
    border-radius: 15px;
}

.popup-view aside {
    width: 40% !important;
    align-self: stretch;
    border-radius: 0 15px 15px 0;
    flex-shrink: 0;
    background-color: #F2F2F2;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 15px;
    margin-left: 20px;
}

.bg-martaj {
    background-image: url(../images/login-bg-g.svg), url(file/stores/$site.jpg);
    background-repeat: no-repeat;
    background-size: contain, auto 100px;
    background-position: center center, center bottom 55px;
    background-blend-mode: normal, multiply;
}

.bg-martaj.mbg {
    background-image: url(../images/login-bg.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-blend-mode: unset;
}

.popup-view {
    display: flex;
    align-items: stretch;
    flex-grow: 1;
}

.popup-view form {
    padding: 20px 0 0 0;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.popup-view.subscribe form>div {
    display: flex;
}

.popup-view.subscribe form>div>div {
    flex-grow: 1;
    margin: 15px;
    width: 50%;
}

.popup-view.subscribe aside {
    width: 250px !important;
    justify-content: flex-start;
    padding-top: 30px;
}

.popup-view form p {
    display: block;
    font-size: 12px;
    margin: 4px 0 10px 0;
    color: #777;
}

.popup-view form h2,
.popup-view.subscribe aside h2 {
    font-weight: 600;
    margin-bottom: 15px;
}

.popup-view label {
    margin-bottom: 5px;
    font-weight: 400;
}

.popup-view input,
.popup-view textarea,
.popup-view select {
    border-radius: 6px;
}

.popup-view textarea {
    height: 220px;
}

.popup-view .form-group {
    margin-bottom: 10px;
}

.popup-view .form-group * {
    font-size: 14px;
    width: 100% !important;
}

.popup-view a:not(.btn):hover {
    color: #333;
    transition: all 0.3s ease;
}

.popup-view .back {
    display: none;
    position: absolute;
    left: 0;
    top: 20px;
    background-color: #f2f2f2;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
    border-radius: 50%;
}

.popup-view .back:hover {
    color: #fff !important;
    background-color: var(--accent);
}

.popup-view .login[data-actn=register],
.popup-view .login[data-actn=forget] {
    display: none;
}

.popup-view .welcome-view {
    display: none;
    width: 100%;
    text-align: center;
    padding: 50px;
    box-sizing: border-box;
}

.popup-view .welcome-view .avatar {
    display: block;
    margin: 44px auto;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-image: url(../images/avatar.svg);
}

.login-btns {
    border-top: 1px solid rgba(196, 196, 196, 0.37);
    padding-top: 20px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.login-btns .btn {
    border-radius: 6px;
    flex: 1;
}

.login-btns .fb {
    background-color: #3a63be;
    margin-left: 20px;
}

.login-btns .google {
    background-color: #c94130;
}

.login-btns i {
    position: relative;
    right: -8px;
}

.popup-view form .info-text {
    font-size: 15px;
    text-align: center;
    margin-top: 20px;
}

.info-text a {
    text-decoration: underline;
}

.login-action {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.subscribe .login-action {
    margin: 0 15px 0 0;
    border-top-style: solid;
    border-width: 1px;
    padding-top: 20px;
    border-color: #e0e0e0;
}

.login-action .btn {
    min-width: 120px;
}

.login-action a {
    font-size: 14px;
    color: #777
}

main .round-img {
    width: 100px;
    height: 100px;
}

main .contact-actions .btn {
    font-size: 18px;
    padding: 0 15px;
    height: 34px;
    line-height: 34px;
    min-width: 100px;
}

.popup-view .item-info img {
    max-width: 80%;
    display: block;
    margin: 0 auto;
    max-height: 100px;
}

.popup-view .item-info .price {
    font-size: 22px;
    margin: 10px 0;
    display: block;
}

.error-msg {
    color: #c94130;
    display: block;
    margin-top: 5px;
}

/*--------------------------------------------*/
/*  STICKY ACTIONS 
/*--------------------------------------------*/
.sticky-actions {
    position: fixed;
    left: 20px;
    bottom: 40px;
    z-index: 10;
}

.sticky-actions li {
    margin-bottom: 20px;
}

.sticky-actions li a {
    width: 40px;
    height: 40px;
    line-height: 40px;
    color: #707070;
    display: block;
    background-color: #eeeeee;
    border-radius: 6px;
    transition: all 0.3s ease;
    text-align: center;
    font-size: 20px;
    position: relative;
    padding-top: 2px;
    box-sizing: border-box;
}

.sticky-actions li a:hover {
    background-color: var(--accent);
    color: #fff;
}

.sticky-actions li a:hover sup {
    background-color: var(--secondary);
    border-color: var(--secondary);
}

.sticky-actions sup {
    border-radius: 50%;
    background-color: var(--accent);
    width: 20px;
    height: 20px;
    color: #fff;
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    line-height: 17px;
    font-size: 13px;
    border: 3px solid #eeeeee;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

/*--------------------------------------------*/
/*  KEYFRAMES 
/*--------------------------------------------*/
@-webkit-keyframes sk-bouncedelay {

    0%,
    80%,
    100% {
        -webkit-transform: scale(0)
    }

    40% {
        -webkit-transform: scale(1.0)
    }
}

@keyframes sk-bouncedelay {

    0%,
    80%,
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    40% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
}

@keyframes basket {
    from {
        right: -30px;
        opacity: 0
    }

    to {
        right: 0;
        opacity: 1
    }
}

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

    50% {
        transform: scale(1.4);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes arrowFly {
    20% {
        transform: translate(100px, -60px) rotate(20deg) scale(0.7);
    }

    35% {
        transform: translate(300px, -60px) rotate(-180deg);
    }

    60% {
        transform: translate(20px, 100px) rotate(-160deg);
    }

    80% {
        transform: translate(-200px, 100px) rotate(0);
    }

    100% {
        transform: translate(0, 0) rotate(0);
    }
}

@keyframes beat {
    30% {
        transform: scale(1.4);
    }

    50% {
        transform: scale(0.8);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes fave-heart {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -2800px 0;
    }
}

@keyframes dots {

    0%,
    20% {
        color: rgba(0, 0, 0, 0);
        text-shadow:
            10px 0 0 rgba(0, 0, 0, 0),
            20px 0 0 rgba(0, 0, 0, 0);

    }

    40% {
        color: rgba(0, 0, 0, 0);
        text-shadow:
            10px 0 0 rgba(0, 0, 0, 0),
            20px 0 0 white;

    }

    60% {
        color: rgba(0, 0, 0, 0);
        text-shadow:
            10px 0 0 white,
            20px 0 0 white;
    }

    80%,
    100% {
        color: white;
        text-shadow:
            10px 0 0 white,
            20px 0 0 white;
    }
}

@keyframes animateTop {
    0% {
        opacity: 0;
        transform: translateY(0);
    }

    100% {
        opacity: 1;
        visibility: visible;
        transform: translateY(30px)
    }
}

/*--------------------------------------------*/
/*  RESPONSIVE 
/*--------------------------------------------*/

/* Tablet */
@media screen and (max-width: 1024px) {

    .form-wrapper {
        max-width: 100%;
        width: 100%;
    }

    .wrapper {
        padding-top: 100px;
    }

    header>.container {
        padding-left: 0;
    }

    header.fixed .actions {
        opacity: 0;
    }

    .banner {
        top: 70px;
        margin-bottom: 70px;
    }

    .search-form {
        flex-grow: 1;
    }

    .search-form input[type=text] {
        min-width: unset
    }

    header .sub-menu a {
        margin-left: 10px;
    }

    .sub-menu {
        max-width: calc(100vw - 320px);
    }

    .notifications {
        display: none;
    }

    #toggle-filter,
    #close-aside {
        display: block;
    }

    .filter-specific aside {
        display: none;
    }

    .filter-result .label {
        display: none;
    }

    .bar {
        padding-left: 10px;
    }

    .filter-specific .bar {
        margin-bottom: 80px !important;
    }

    .bar select {
        margin: 0;
        border-radius: 3px;
    }

    .bar .filter-actions {
        position: absolute;
        top: 100%;
        right: 0;
        margin-top: 25px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .bar form+div {
        align-self: center;
    }



    .bar form {
        padding: 10px 0;
    }

    .single-item aside {
        display: none;
    }

    .cover-wrapper aside {
        margin-top: 30px;
        width: 100%;
        margin-right: 0;
    }

    .cover-wrapper .head-title {
        min-height: 70px;
        top: -20px;
    }

    .wrapper .container section {
        flex-basis: 100%;
        padding: 0;
    }

    .filter-specific aside,
    header.fixed~.filter-specific aside {
        width: 70%;
        margin: 0;
        position: fixed;
        z-index: 100;
        left: 0;
        top: 0;
        border-radius: 0 !important;
        height: 100%;
    }

    .filter {
        border-radius: 0 !important;
        position: relative;
        top: 0;
        z-index: 10;
        height: 100%;
        margin-bottom: 0;
        overflow-y: auto;
    }

    aside .products-list {
        display: flex;
        padding: 0 20px;
        padding-bottom: 30px;
    }

    .light-bg .products-list li,
    .tabs-content .products-list li {
        max-width: 100%;
    }

    .overflow-control .products-list {
        flex-wrap: nowrap;
        overflow: auto;
        padding-bottom: 20px;
    }

    .content-aside aside {
        margin-right: 0;
        width: 100%;
    }

    .product-content {
        padding: 0;
        overflow: unset;
        width: 100%;
    }

    aside .products-list li {
        margin: 0 15px 30px 15px;
    }

    .cat-list.light-bg {
        display: none;
    }

    .single-item {
        flex-wrap: wrap;
    }

    .user-profile .round-img.changable {
        width: 100px;
        height: 100px;
        line-height: 100px;
    }

    .user-profile:not(.main) {
        display: none;
    }

    .level-icon {
        margin-top: 5px;
    }

    .profile-nav #update-profile {
        margin-top: 80px;
    }

    .user-profile {
        position: absolute;
        left: 0;
        top: 10px;
        margin: 0;
        width: 100px;
    }

    .user-profile.main+section .sub-cats,
    .head-title .round-btn+.sub-cats {
        display: none;
    }

    .head-title .round-btn {
        display: block;
    }
}

/* Mobile */
@media only screen and (max-width: 767px) {
    .menu li {
        margin-left: 10px;
    }

    .filter-specific .brands-list {
        grid-template-columns: 1fr 1fr;
    }

    .cards-list .owl-prev {
        right: -10px !important;
    }

    .cards-list .owl-next {
        left: 10px !important;
    }

    footer .links {
        max-width: 100%;
        margin: 0;
    }

    header .basket {
        width: 55px;
    }

    .cover-wrapper .head-title {
        top: 0;
    }

    .review-content {
        display: block;
    }

    .submit-review {
        margin-right: 0;
        padding-right: 0;
        border-right: none;
        margin-top: 30px;
        padding-top: 30px;
        width: 100%;
        border-top: 1px solid #B8B8B8;
    }

    .reviews-list {
        width: 100%;
    }

    .stores-list .store-card {
        display: block;
    }

    .stores-list .store-card .info {
        width: 100%;
        max-width: 100%;
        padding: 3px 15px;
        border-radius: 6px 6px 0 0;
    }

    .stores-list .store-card .info>div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        width: 100%;
    }

    .stores-list .store-card .round-img {
        width: 50px;
        height: 50px;
        margin: 0;
    }

    .stores-list .store-card .side {
        width: 100%;
        padding-top: 10px;
    }

    .stores-list .store-card .link {
        margin-left: auto;
        margin-right: 5px;
    }

    .stores-list .store-card {
        width: calc(50% - 10px);
        min-width: unset;
    }




    .fancybox-slide {
        padding: 10px !important;
    }

    .banner {
        top: 0;
        margin-bottom: 0;
    }

    .side-menu .site-menu li:nth-child(-n+2) {
        display: none;

    }

    .filter-specific .brands-list {
        grid-template-columns: 1fr;
    }

    .single-item .product-slider li a {
        height: 260px;
    }

    .store3 .products-list li .img,
    .store51 .products-list li .img {
        height: 160px;
    }

    body {
        padding-top: 0;
    }

    header {
        right: 0;
        position: relative;
        padding-bottom: 10px;
        overflow: unset !important;
    }

    .toggle-menu {
        font-size: 22px;
        background: var(--primary);
        color: #fff;
        width: 32px;
        height: 32px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    header>.container {
        padding: 0 10px;
        box-sizing: border-box;
        width: 100%;
        justify-content: space-between;
    }

    .search-form input[type=submit] {
        right: 0;
    }

    .container {
        width: 90%;
    }

    .logo.store {
        width: 180px;
        height: auto;
    }

    .logo small {
        font-size: 10px;
        font-weight: 600;
    }

    .logo a {
        transform: scale(0.8);
        max-width: 144px;
    }

    .logo.store a,
    header.fixed .logo.store a {
        max-width: 180px !important;
        width: 100%;
        height: 68px !important;
    }

    header.fixed .logo.martaj a {
        max-width: 144px !important;
        margin-top: 0;
        height: auto;
    }

    .search-form {
        margin-left: 0;
        width: 100%;
    }

    .search-form input[type=text] {
        min-width: 100px;
    }

    .form-wrapper>span,
    header .form-wrapper .btn.c2 {
        display: none;
    }

    .banner aside {
        display: none;
    }

    header .sub-menu {
        visibility: visible;
        position: fixed;
        top: auto;
        bottom: 90px;
        left: 0;
        opacity: 1;
        display: none;
        right: calc(50% - 125px);
        z-index: 100;
        background-color: #fff;
        border-radius: 10px;
        width: 250px;
        min-height: unset;
        box-sizing: border-box;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
        flex-shrink: 0;
        position: fixed;
        padding: 10px 0;
        height: auto;
        transform: none !important;
        transition: none !important;
    }

    header .sub-menu a:not(.parent-list) {
        display: none;
    }

    header .sub-menu a {
        list-style: none;
        display: block;
        transition: all 0.3s ease;
        width: 100%;
        margin: 0;
        font-size: 14px;
        color: #333;
        line-height: 1.5;
    }

    header .sub-menu a:hover {
        background-color: rgb(238, 238, 238);
        color: #000;
    }

    header .sub-menu i {
        background-color: #F5F5F5;
        padding: 10px;
        margin: 0;
        margin-left: 10px;
        width: 36px;
        min-height: 36px;
        box-sizing: border-box;
        color: #707070;
        position: relative;
        z-index: 10;
        display: inline-flex;
        height: 100%;
        align-items: center;
        justify-content: center;
    }

    header .sub-menu a:hover i {
        color: #fff;
        background-color: var(--primary);
        transition: background-color 0.3s ease;
    }

    header .sub-menu::before {
        content: '';
        background-color: rgb(245, 245, 245);
        position: absolute;
        top: 0px;
        right: 0px;
        height: 100%;
        width: 36px;
        border-radius: 0px 10px 10px 0px;
    }

    .sub-menu {
        max-width: unset;
        display: none;
    }

    header .sub-menu:after {
        top: 100%;
        right: 18%;
        border: solid transparent;
        content: '';
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-color: rgba(0, 0, 0, 0);
        border-top-color: #ffff;
        border-width: 6px;
        margin-left: -6px;
        filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.16));
    }

    .card-wrapper {
        display: none !important;
    }

    .menu,
    header.fixed .menu {
        display: none;
        height: auto;
        top: 0;
        transition: none !important;
        position: absolute;
        top: 100%;
        z-index: 10;
    }

    .menu .container {
        width: 100%;
    }

    .menu li:has(.stream) {
        display: none;
    }

    .menu li a {
        padding: 5px 15px;
        box-sizing: border-box;
    }

    .menu>.container>ul {
        height: auto;
    }

    .menu li {
        margin: 0;
        display: block;
    }

    .wrapper {
        padding-top: 5px;
    }

    .title {
        font-size: 26px;
    }

    .title,
    .head-title .title+.btn {
        margin-bottom: 10px;
    }

    .store-info .name {
        font-size: 16px;
    }

    .item-card p .tabs-content {
        width: 100%;
        padding-right: 20px;
        box-sizing: border-box;
    }

    .cat-sec .round-list li a:first-child {
        width: 80px;
        height: 80px;
    }

    .cat-sec .round-list h3 {
        font-size: 14px;
    }

    .cat-sec .round-list {
        gap: 20px;
    }

    .products-list {
        gap: 15px;
    }

    .products-list li {
        width: 47% !important;
    }

    .overflow-control .products-list li {
        width: 55% !important;
    }

    .products-list.filter-result {
        grid-template-columns: 1fr 1fr;
    }


    .products-list li:only-child {
        margin-left: 0;
        margin-right: 0;
    }

    .single-item .actions a {
        margin-bottom: 10px;
    }

    .single-item .actions a:nth-child(1),
    .single-item .actions a:nth-child(2) {
        width: 44%;
        flex-grow: 1;
        padding: 0;
        font-size: 15px;
    }

    .single-item h2 {
        font-size: 18px;
        text-align: jusitfy;
        line-height: 24px;
    }

    .single-item .item-data {
        min-width: unset;
        padding: 0;
    }

    .sub-sec .actions {
        justify-content: center;
        position: fixed;
        bottom: 60px;
        width: 100%;
        background-color: #ffffff;
        right: 0px;
        z-index: 50;
        padding: 10px 8px;
        box-sizing: border-box;
    }

    .checklist>div {
        font-size: 13px;
        font-weight: 600;
    }

    .notifications {
        right: -100%;
        display: none;
    }

    .round-list li a:first-child {
        width: 80px;
        height: 80px;
    }

    .owl-nav {
        display: none;
    }

    .owl-nav button {
        width: 40px;
        height: 40px;
    }

    .container-nav .owl-stage-outer {
        width: 100%;
        overflow: visible;
    }

    .single-item,
    .banner {
        overflow: hidden;
    }

    .single-item .product-owner {
        display: none;
    }

    .owl-dots {
        text-align: center;
    }

    .plans tr td:first-child {
        width: 45% !important;
    }

    footer .container {
        padding: 10px 0;
        box-sizing: border-box;
    }

    footer .logo {
        width: 180px;
    }

    footer .links {
        flex: auto;
    }

    footer .links li {
        min-width: 160px;
    }

    footer .contact {
        display: block;
        width: 100%;
        margin-bottom: 30px;
    }

    footer .contact h3 {
        height: auto;
        border: 0;
        border-bottom: 2px solid var(--secondary);
        margin-bottom: 20px;
        padding: 0;
        width: fit-content;
    }

    .tabs {
        padding: 5px 10px;
        margin-right: 0;
    }

    .icons-grid {
        margin-top: 0;
    }

    .icons-grid li {
        width: 50%;
        min-width: 50%;
    }

    .icons-grid p {
        font-size: 14px;
        text-align: center;
        padding: 10px 0;
    }

    .icons-grid h4 {
        font-size: 16px;
    }

    .icons-grid i {
        font-size: 30px;
        margin-bottom: 10px;
    }

    .owl-carousel .owl-stage-outer {
        overflow: visible;
    }

    .mobile-menu {
        display: flex;
    }

    sup.count {
        top: 0;
        right: 0;
    }

    .ads-slider li>a {
        width: 260px;
        height: 260px;
    }

    .sticky-actions {
        left: 10px;
        bottom: 55px;
    }



    .bg {
        height: 100px;
    }

    .cat-wrapper .bg {
        height: 260px;
    }

    .cover-wrapper {
        top: 5px;
    }

    .flag {
        font-size: 14px;
    }

    .list-items li h3 {
        font-size: 14px;
    }

    .reviews-list .customer {
        margin-left: 5px;
    }

    .reviews-list .round-img {
        width: 50px;
        height: 50px;
    }

    .reviews-list .row span,

    .level,
    .list-items .inline-list span i {
        font-size: 12px;
    }

    .product-content>div {
        padding: 20px 0;
    }

    .single-item aside {
        width: 100%;
    }

    .owl-thumbs {
        margin-top: 15px;
    }

    .single-item .product-slider {
        width: 100%;
        margin-bottom: 10px;
    }

    .single-item .pricing {
        margin-top: 10px;
        padding-top: 10px;
    }

    .single-item .price s {
        font-size: 18px;
    }

    .single-item .price small {
        font-size: 15px;
    }

    .single-item .price {
        font-size: 25px;
    }

    .sub-sec {
        margin-bottom: 15px;
    }

    .content-aside {
        margin-top: 0;
    }

    .icon-btn {
        width: 45px;
    }

    .single-item .actions a {
        height: 45px !important;
        line-height: 45px !important;
    }

    .store-card .btn {
        height: 35px !important;
        line-height: 35px !important;
    }

    .radio-tabs label {
        padding: 6px 10px;
    }

    .qty i {
        font-size: 29px;
    }

    .stores-list .store-card {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .stores-list {
        margin: 0;
    }

    .stores-list .contact-store li {
        font-size: 15px;
    }

    .form-group *:not(.btn) {
        width: 100% !important;
    }

    .form-group.inline div:first-child {
        margin-left: 0;
    }

    .form-group .btn i {
        width: auto !important;
    }

    .list-items .img {
        width: 70px;
        height: 70px;
        margin-left: 10px;
    }

    .expand li {
        margin-bottom: 55px !important;
    }

    .expand .inline-list:last-child {
        position: absolute;
        right: 0;
        margin-top: 5px;
        top: 100%;
    }

    #ordrs-list .inline-list:last-child {
        padding-left: 15px;
        box-sizing: border-box;
    }

    .list-items .round-img {
        width: 50px;
        height: 50px;
        margin-left: 10px;
    }

    .hover-list li>a {
        padding: 10px;
        padding-bottom: 30px;
    }

    .alert {
        right: 40px;
        bottom: 200px;
    }

    .bar input[type=search] {
        height: 40px;
    }

    .store-items .info-actions .inline-list {
        min-width: unset;
        width: 100%;
        bottom: 0;
        padding: 0 10px;
        box-sizing: border-box;
    }

    .info-actions span:empty {
        display: none;
    }

    .store-items {
        padding-bottom: 50px;
    }

    .sub-cats {
        position: relative;
        width: 100%;
        margin: 0;
        gap: 10px;
        margin-bottom: 10px;
    }

    .sub-cats li {
        flex-grow: 1;
    }

    .sub-cats li a {
        background-color: #ffffffc4;
        padding: 2px 15px;
        border-radius: 5px;
        color: var(--primary);
        font-weight: 600;
        display: block;
        width: 100%;
        font-size: 14px;
        box-sizing: border-box;
    }

    #filter-orders {
        justify-content: center;
    }

    #filter-orders li a {
        background-color: var(--primary);
        color: #fff !important;
        border: none !important;
    }

    .sub-cats li a:hover {
        color: #fff;
        border: inherit;
        background-color: var(--primary);
    }

    .whatsapp-chat {
        right: auto;
        left: 5px;
        width: 50px;
        height: 50px;
        background-size: 30px;
        bottom: 70px;
    }

    .fb_dialog_content iframe {
        transform: scale(0.8);
        left: 0 !important;
        right: auto !important;
        bottom: 50px !important;
    }

    .cart-num.connect:after {
        padding-bottom: 20px;
    }

    .profile-nav aside,
    .add-address {
        display: none !important;
    }

    .bg-martaj {
        display: none !important;
    }

    .popup-view {
        display: block;
        padding: 0;
    }

    .popup-view form {
        padding: 20px;
        box-sizing: border-box;
        width: 100%;
        margin: 0;
    }

    .store-card.popup-view {
        padding: 0;
    }

    .store-card aside {
        width: 100% !important;
        max-width: 100%;
        padding: 3px 15px;
        border-radius: 6px 6px 0 0;
    }

    .store-card aside>div {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: wrap;
        align-items: center;
        width: 100%;
        text-align: right;
        border: none;
        margin-bottom: 0;
    }

    .store-card .item-info a {
        display: flex;
    }

    .store-card .side {
        width: 100%;
    }

    .popup-view.store-card .round-img {
        margin: 0;
        width: 60px;
        height: 60px;
        margin-left: 10px;
    }

    .popup-view .rating {
        margin-left: 0;
        margin-right: auto;
    }

    .popup-view.store-card .link {
        margin: 0;
    }

    .popup-view .item-info img {
        margin-left: 10px;
        border-radius: 3px;
        width: 80px;
        height: 80px;
        margin-bottom: 15px;
    }

    .product-owner .store-info>div,
    .contact-store.store-info>div {
        display: flex;
        justify-content: space-between;
        flex-grow: 1;
        flex-wrap: wrap;
    }

    .popup-view aside {
        margin-left: 0;
    }

    footer .container div:first-child {
        margin: auto;
    }

    .bar form select[name=search_cat] {
        margin: 10px;
    }

    aside .products-list {
        padding-bottom: 0;
    }

    .product-owner .store-info,
    .contact-store {
        align-items: center;
    }

    .offer-text {
        font-size: 16px;
    }

    .offer-result {
        font-size: 22px;
    }

    .voting-result.single {
        display: block;
    }

    .split .voting-result:not(.single) {
        display: none;
    }

    .plans {
        border-spacing: 5px 0;
        font-size: 14px;
    }

    .popup-view.subscribe form>div>div {
        width: 100%;
        margin: 0;
    }

    .subscribe .login-action {
        text-align: center;
    }

    .popup-view.subscribe form>div {
        display: block;
    }

    .googleads {
        width: 100% !important;
        overflow: hidden;
    }

}

@media screen and (min-width: 576px) {

    .tabs::-webkit-scrollbar,
    .tabs-content .products-list::-webkit-scrollbar {
        display: none;
    }
}



/*--------------------------------------------*/
/*  TIPSY STYLE 
/*--------------------------------------------*/
.tipsy {
    transition-property: background, border-color, color, box-shadow, display, opacity, padding, height, top, font-size;
    transition-duration: 0s;
    transition-timing-function: none;
    -webkit-transition-property: background, border-color, color, box-shadow, display, opacity, padding, height, top, font-size;
    -webkit-transition-duration: 0s;
    -webkit-transition-timing-function: none;
}

.tipsy {
    padding: 0 5px;
    font-size: 12px;
    position: absolute;
    z-index: 100000;
    font-family: 'sukar';
}

.tipsy-inner {
    padding: 6px 10px 2px 10px;
    max-width: 200px;
    text-align: right;
    font-weight: 600;
    background-color: #F8F9FA;
    color: #737F8A;
    box-shadow: 0px 15px 30px 0px rgba(49, 51, 53, 0.5);
}

.tipsy-inner {
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

.tipsy-arrow {
    position: absolute;
    background: url('../images/tipsy.png') no-repeat top left;
    width: 14px;
    height: 7px;
}

.tipsy-n .tipsy-arrow {
    top: -7px;
    left: 50%;
    margin-left: -7px;
}

.tipsy-nw .tipsy-arrow {
    top: -7px;
    left: 10px;
}

.tipsy-ne .tipsy-arrow {
    top: -7px;
    right: 10px;
}

.tipsy-s .tipsy-arrow {
    bottom: -7px;
    left: 50%;
    margin-left: -7px;
    background-position: bottom left;
}

.tipsy-sw .tipsy-arrow {
    bottom: -7px;
    left: 10px;
    background-position: bottom left;
}

.tipsy-se .tipsy-arrow {
    bottom: -7px;
    right: 10px;
    background-position: bottom left;
}

.tipsy-e .tipsy-arrow {
    top: 50%;
    margin-top: -7px;
    right: 0;
    width: 7px;
    height: 14px;
    background-position: top right;
}

.tipsy-w .tipsy-arrow {
    top: 50%;
    margin-top: -7px;
    left: 0;
    width: 7px;
    height: 14px;
}

/*--------------------------------------------*/
/*  RATEYO  STYLE
/*--------------------------------------------*/
.jq-ry-container {
    position: relative;
    padding: 0 5px;
    line-height: 0;
    display: block;
    cursor: pointer;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    direction: ltr
}

.jq-ry-container[readonly=readonly] {
    cursor: default
}

.jq-ry-container>.jq-ry-group-wrapper {
    position: relative;
    width: 100%
}

.jq-ry-container>.jq-ry-group-wrapper>.jq-ry-group {
    position: relative;
    line-height: 0;
    z-index: 10;
    white-space: nowrap
}

.jq-ry-container>.jq-ry-group-wrapper>.jq-ry-group>svg {
    display: inline-block
}

.jq-ry-container>.jq-ry-group-wrapper>.jq-ry-group.jq-ry-normal-group {
    width: 100%
}

.jq-ry-container>.jq-ry-group-wrapper>.jq-ry-group.jq-ry-rated-group {
    width: 0;
    z-index: 11;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden
}