/* personal color */
:root {--mcol: #4381DE;}

/* main style */
#loading{display: flex;position: fixed;z-index: 99999;top: 0;left: 0;width: 100%;height: 100%;background: rgb(255 255 255 / 90%);justify-content: center;align-items: center;transition: all 1s ease;}#loading .box{height: 15px; width: 105px; display: flex; position: relative;}#loading .circle{width: 15px; height: 15px; border-radius: 50%; background-color: var(--mcol); animation: move 500ms linear 0ms infinite; margin-right: 30px;}#loading .circle:first-child{ position: absolute; top:0; left:0; animation: grow 500ms linear 0ms infinite;}#loading .circle:last-child{position: absolute; top: 0; right: 0; margin-right: 0; animation: grow 500ms linear 0s infinite reverse;} @keyframes grow { from {transform: scale(0,0); opacity: 0;} to {transform: scale(1,1); opacity: 1;} } @keyframes move { from {transform: translateX(0px)} to {transform: translateX(45px)}}
#loading.remove {opacity: 0;visibility: hidden;}
::selection {color: white;background-color: var(--mcol);}
html, body {margin: 0;padding: 0;height: 100%;}
body {line-height: 20px;font-size: 14px;color: #7a7a7a;font-family: 'Inter', sans-serif;background-color: rgb(0 0 0 / 2%);overflow-x: hidden;}
body:after {content: '';position: fixed;top: 0;left: 0;z-index: -1;width: 100%;height: 100%;opacity: 0.018;background-color: var(--mcol);}
img, a img {border: none;outline: none;max-width: 100%;}
a {text-decoration: none;color: #3e3e3e;transition: all 0.3s ease;}
a:hover {color: black;}
b {font-weight: 500;}
ul {margin: 0;padding: 0;}
li {list-style: none;}
hr {border: none;height: 1px;background: #eee;}
h1,h2,h3,h4,h5,h6{margin: 0 0 22px;padding:0;font-weight:500;}
h1{font-size:22px;line-height:24px; color: black;}
h2{font-size:22px;line-height:22px; color: black;}
h3{font-size:20px;line-height:20px}
h4{font-size:17px;line-height:17px}
h5{font-size:16px;line-height:16px}
h6{font-size:15px;line-height:15px}
input {outline: none; resize: none; box-sizing: border-box;}
select {height: 44px;padding: 0 26px 0 12px;color: #464646;font-size: 13px;font-family: 'Inter', sans-serif;border-radius: 5px;border: 1px solid #eee;background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAFCAYAAABB9hwOAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA25pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowNkFGNUM5QjJCNDkxMUU4QUY2MkQxNkZENzRCQzZFQSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxNkFEN0I5MjA3MEYxMUVBQThDQkRGN0UyQTY1NzEzNiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxNkFEN0I5MTA3MEYxMUVBQThDQkRGN0UyQTY1NzEzNiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNyAoV2luZG93cykiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxMTRkOWRmNS00MTYxLTRhNGMtYjg3Ny0yMzE1MDM5MjJiZWUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDZBRjVDOUIyQjQ5MTFFOEFGNjJEMTZGRDc0QkM2RUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7Zx2b3AAAAVUlEQVR42mJQVFQMZcABgHJKIPz//38GUjETUL8xUHMHNkOB1CoGMgHT/fv3K6AGdWAxNAwof48cgxmRDIMZPAvdUJDXSHYxjAFzORDspsSlMAAQYAAX00SOx3SJ8wAAAABJRU5ErkJggg==);background-position: right -3px top 19px;background-repeat:no-repeat;cursor: pointer;appearance: none;}
select:focus {outline: none;}
textarea {overflow: auto;color: white;line-height: 24px;min-height: 40px;padding: 14px;box-sizing: border-box;font-size: 13px;font-family: 'Inter', sans-serif;border-radius: 5px;border: 1px solid #eee;outline: none;}
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="url"] {height: 44px;padding: 0 12px;color: #3b3b3b;font-size: 14px;font-family: 'Inter', sans-serif;border: 1px solid #eee;border-radius: 2px;transition: all 0.2s ease;}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, textarea:focus {border-color: var(--mcol);box-shadow: 0 3px 18px rgb(0 0 0 / 6%);}
input[type="button"], input[type="submit"], input[type="reset"], button {line-height: 44px;padding: 0 21px;color: white;font-size: 12px;font-weight: 400;font-family: 'Inter', sans-serif;text-transform: uppercase;border: none;border-radius: 3px;background-color: #24272f;cursor: pointer;transition: all 0.3s ease;}
input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, button:hover {color: white; background-color: #23262e;}
.cnt {max-width: 100%; width: 1170px; margin: 0 auto;}
.clr::after {content: '';display: block;clear: both;}
.left {float: left;}
.right {float: right;}
.col2 {width: 50%;}
.col3 {width: 33.3333%;}
.col4 {width: 25%;}
.col6 {width: 16.6667%;}
.col2, .col3, .col4, .col6 {float: left;}
#fancybox-overlay {opacity: 0.7!important;}
body > #bg { position: fixed; z-index: 100; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); cursor: pointer; }
#back-to-top {position: fixed;z-index: 9999;right: 0;bottom: 28px;width: 40px;height: 40px;line-height: 41px;color: white;text-align: center;border-radius: 50%;background-color: #202020;opacity: 0;visibility: hidden;cursor: pointer;transition: all 0.2s ease 0s;}
#back-to-top:before {content: "\f062";font-size: 21px;font-weight: 900;font-family: 'Line Awesome Free';}
#back-to-top:hover {background-color: var(--mcol);}
#back-to-top.show {right: 20px;opacity: 1;visibility: visible;}
.button-1 {display: inline-block;line-height: 46px;padding: 0 23px;color: white;font-size: 12px;font-weight: 500;text-transform: uppercase;border-radius: 22px;box-sizing: border-box;background-color: var(--mcol);}
.button-1 i {margin-left: 8px;margin-right: -2px;font-size: 12px;}
.button-1:hover {color: white;background-color: #24272f;}

header {position: relative;z-index: 100;}
.top-line .contacts span {display: inline-block;float: left;line-height: 82px;margin-right: 48px;color:gray;font-size: 13px;}
.top-line .contacts span > i {position: relative; top: 3px; margin-right: 12px; font-size: 23px; color:gray; var(--mcol);}

.search {position: relative;float: right;width: 410px;margin-top: 18px;border: 1px solid rgb(0 0 0 / 2%);border-radius: 23px;overflow: hidden;}
.search-select-block {position: absolute;top: 0px;}
.search-select-block select {height: 42px;padding: 0 28px 0 14px;border-radius: 6px 0 0 6px;border: 0;}
.search form {width: 100%;}
.search .search-keyword {width: 100%;height: 42px;padding-left: 100px;font-size: 13px;border: none;}
.search .search-submit {position: absolute;top: 7px;right: 0;z-index: 3;padding: 0 16px;height: 28px;line-height: 29px;background: none !important;color: #212121;font-size: 20px;font-family: 'Line Awesome Free';font-weight: 900;border-left: 1px solid #ededed;border-radius: 0;}

.head {top: -75px;width: 100%;transition: all .3s ease;}
.head .cnt {background-color: white;}

/* top-fixed */
.top-fixed .top-line {margin-bottom: 74px;}
.top-fixed .head {position: fixed;z-index: 100;top: 0;left: 0;box-shadow: 4px 0 12px rgb(0 0 0 / 10%);background-color: white;}

.sitelogo {display: block;float: left;overflow: hidden;}
.sitelogo a {display: block;line-height: 74px;margin-right: 18px;color: black;padding: 0 34px;font-size: 23px;font-weight: 700;text-transform: uppercase;box-shadow: 4px 0 20px rgb(0 0 0 / 8%);}
.sitelogo a:first-letter {color: var(--mcol);}
footer .sitelogo a {line-height: normal;padding: 0;color: white;font-size: 29px;box-shadow: none;}

.main-nav {float: left;}
.main-nav > div > ul > li {display: inline-block;position: relative;float: left;}
.main-nav > div > ul > li:nth-child(2):before {content: "HOBOE";display: block;position: absolute;z-index: 2;right: 0;top: 7px;line-height: 18px;color: white;font-size: 7px;letter-spacing: 0.1em;text-transform: uppercase;padding: 0px 8px;border-radius: 18px;background: #24272f;}
.main-nav > div > ul > li:nth-child(2):after {content: '';display: block;position: absolute;z-index: 1;top: 18px;right: 7px;width: 10px;height: 10px;background: #24272f;transform: rotate( 110deg) skewX( 50deg);}
.main-nav > div > ul > li > a {display: block;padding: 0 22px;line-height: 74px;font-size: 15px;font-weight: 500;}
.main-nav > div > ul > li > a:hover {color: var(--mcol);}
.main-nav > div > ul > li > a .la-home {position: relative;top: 2px;font-size: 20px;}

.main-nav > div > ul > li.uWithSubmenu {position: relative; z-index: 100;}
.main-nav > div > ul > li.uWithSubmenu > a:after {content: "\f107";display: inline-block;position: relative;top: 3px;margin-top: -1px;margin-left: 8px;font-size: 18px;font-family: FontAwesome;transition: all 0.2s ease 0s;}
.main-nav > div > ul > li.uWithSubmenu ul {position: absolute;z-index: 100;top: 78px;left: 0;min-width: 260px;padding: 8px 10px;box-sizing: border-box;border-radius: 4px;box-shadow: rgb(0 0 0 / 7%) 0 7px 20px;background-color: white;opacity: 0;visibility: hidden;transition: all 0.3s ease;}
.main-nav > div > ul > li.uWithSubmenu:hover ul {top: 68px;opacity: 1;visibility: visible;}
.main-nav > div > ul > li.uWithSubmenu:hover > a::after {transform: rotate(180deg);}
.main-nav > div > ul > li.uWithSubmenu ul li {display: block; float: none; margin-right: 0; border-bottom: 1px solid #eee;}
.main-nav > div > ul > li.uWithSubmenu ul li:last-child {border-bottom: none;}
.main-nav > div > ul > li.uWithSubmenu ul li a {display: block;height: max-content;line-height: inherit;padding: 12px;}
.main-nav > div > ul > li.uWithSubmenu ul li a:hover {color: var(--mcol);background-color: #fdfdfd;}
a.menu-home-page span {display: none;}
a.menu-home-page:before {content: '\f015';display: table;font-size: 20px;font-weight: 900;font-family: 'Line Awesome Free';}

.nav-right {position: relative;float: right;}

#shop-basket {position: relative;float: right;}
#shop-basket > a {display: block;height: 74px;line-height: 74px;padding-right: 24px;color: #24272f;font-size: 42px;}
#shop-basket > a i span {display: block;position: absolute;z-index: 2;bottom: 14px;right: 23px;width: 18px;height: 18px;line-height: 18px;text-align: center;color: white;font-size: 9px;font-weight: 600;font-family: Montserrat, sans-serif;border-radius: 4px;background-color: var(--mcol);}
.c-body {position: absolute;z-index: 10;top: 85px;right: 0;width: 310px;padding: 26px 22px;box-sizing: border-box;border-radius: 0 0 16px 16px;box-shadow: rgb(0 0 0 / 7%) 0 7px 38px;background-color: #ffffff;opacity: 0;visibility: hidden;transition: all 0.4s ease;}
#shop-basket:hover .c-body {top: 74px;opacity: 1;visibility: visible;}
.c-body > a {display: block;margin-top: 20px;line-height: 54px;color: white;font-weight: 500;text-align: center;text-transform: uppercase;letter-spacing: 0.8px;border-radius: 3px;background-color: var(--mcol);}
.c-body > a:hover {background-color: #24272f;}
.c-body .summ {font-size: 14px;line-height: 20px;}
.c-body .summ b {float: right;color: #24272f;font-size: 20px;font-weight: 600;}
.c-body ul {margin-bottom: 20px;padding-bottom: 20px;border-bottom: 2px solid #fbfbfb;}
.c-body li {display: flex;position: relative;width: 100%;margin-bottom: 18px;align-content: center;justify-content: center;align-items: center;}
.c-body li:last-child {margin-bottom: 0;}
.basket-item-icon {float: left;margin-right: 16px;border-radius: 4px;overflow: hidden;}
.basket-item-icon img {display: block;height: 67px;mix-blend-mode: darken;}
.basket-item-name .cost {color: #b3b3b3;font-size: 12px;}
.basket-item-name {float: left;width: calc(100% - 74px);padding-right: 22px;box-sizing: border-box;}
.basket-item-name .name {margin-bottom: 5px;}
.basket-item-name .name a {display: -webkit-box;max-height: 33px;line-height: 17px;color: #24272f;-webkit-box-orient: vertical;-webkit-line-clamp: 2;text-overflow: ellipsis;overflow: hidden;}
.basket-item-name .name a:hover {color: var(--mcol);}
.basket-item-button {position: absolute;top: 0;right: 16px;height: 100%;}
.basket-item-button i {position: absolute;top: 0;right: -23px;padding: 4px;color: #e2e2e2;font-size: 17px;cursor: pointer;transition: all 0.2s ease 0s;}
.basket-item-button i:hover {color: red;}

.head-user {float: right;margin-right: 24px;}
.head-user .userbox {float: left;}
.head-user .userbox > i {line-height: 74px;padding-left: 12px;color: #24272f;font-size: 42px;cursor: pointer;transition: all 0.3s ease;}
.head-user .userbox .avatar {display: flex;height: 74px;cursor: pointer;transition: all 0.4s ease;align-items: center;}
.head-user .userbox .avatar > img {display: block;height: 38px;border-radius: 50%;border: 3px solid #f5f5f5;}
.head-user .userbox:hover ul {top: 74px;opacity: 1;visibility: visible;}
.head-user .userbox ul {position: absolute;z-index: 10;top: 84px;right: 0;width: 310px;padding: 24px 18px;box-sizing: border-box;border-radius: 0 0 16px 16px;box-shadow: rgb(0 0 0 / 7%) 0 7px 38px;background-color: white;opacity: 0;visibility: hidden;transition: all 0.3s ease;}
.head-user .userbox ul a {display: inline-block;width: 100%;padding: 20px 12px;box-sizing: border-box;border-radius: 10px;}
.head-user .userbox ul a:hover {color: var(--mcol);background-color: #f7f7f7;}
.head-user .userbox ul li.login-in {padding: 8px;background-color: #f7f7f7;}
.head-user .userbox ul li.login-in a {width: auto;padding: 10px 18px;border-radius: 5px;}
.head-user .userbox ul li.login-in a:nth-child(1) {color: white;background-color: var(--mcol);}
.head-user .userbox ul li.login-in a:nth-child(1):hover {background-color: #24272f;}
.head-user .userbox ul i {position: relative;top: 3px;margin-right: 15px;color: #24272f;font-size: 20px!important;line-height: 18px !important;transition: all 0.2s ease 0s;}
.head-user .userbox a:hover i {color: var(--mcol);}
.head-user .userbox ul i.las {transform: scale(1.3);}
.head-user .userbox ul:after, .order-details .outcome .box:after {content: "";position: absolute;top: -5px;right: 108px;width: 10px;height: 10px;transform: rotate(45deg);background-color: white;}

.slider {display: inline-block!important;width: 100%;margin-top: -157px;}
.slider > div {width: 100%;}
.slide {position: relative;height: 600px;padding: 157px 0 0;box-sizing: border-box;background-position: center;background-size: cover;}
.slide:after {content: '';position: absolute;z-index: 1;top: 0;left: 0;width: 100%;height: 100%;background-color: rgb(0 0 0 / 40%);}
.slide .cnt {display: flex;position: relative;z-index: 2;height: 100%;flex-direction: column;flex-wrap: nowrap;align-content: center;justify-content: center;align-items: center; text-shadow: 2px 2px 4px rgba(0,0,0,0.5);}
.slide-content {width: 70%;text-align: center;}
.slide-content h2 {margin: 0 0 30px;line-height: 45px;color: white;font-size: 24px;font-weight: 700;letter-spacing: 1px;text-transform: uppercase;}
.slide-content h2 > b {color: var(--mcol);}
.slide-content p {margin: 0;line-height: 23px;font-size: 15px;color: white;font-weight: 300; color: #e0e0e0 !important; /* Светлее */
 text-shadow: 1px 1px 2px rgba(0,0,0,0.3);}
.slide-content .button-1 {margin-top: 42px; box-shadow: 0 3px 6px rgba(0,0,0,0.2)}
.slider .owl-dots {position: absolute;left: 0;bottom: 26px;text-align: center;}
.slider .owl-dots button {margin: 0 4px;width: 8px;height: 8px;border-radius: 50%;background-color: #f7f6fb;}
.slider .owl-dots button.active {background-color: var(--mcol);} 

.section {margin-top: 50px; margin-bottom: 50px;}
.icon-blocks i {display: flex;float: left;width: 62px;min-width: 62px;height: 62px;margin-right: 15px;color: var(--mcol);font-size: 34px;border-radius: 50%;box-shadow: 2px 4px 16px rgb(0 0 0 / 2%);background-color: white;justify-content: center;align-items: center;}
.icon-blocks .col3 {display: flex;align-items: center;width: 32.1937322%;margin-right: 1.70940171%;}
.icon-blocks .col3:nth-child(3n) {margin-right: 0;}
.icon-blocks h4 {color: #24272f;font-size: 15px;margin-bottom: 4px;}
.icon-blocks p {margin: 0;color: #7a7a7a;font-size: 13px;line-height: 16px;}

.main-categs {margin-bottom: 20px;}
.main-categs .categ-big {float: left;width: 32.3646724%;margin-right: 1.45299145%;margin-bottom: 20px;background-color: #efeef4;overflow: hidden;}
.main-categs .categ-big:nth-child(3) {margin-right: 0;}
.main-categs .categ-big a {display: flex;position: relative;width: 100%;height: 100%;}
.main-categs .categ-big a > .box {display: flex;position: absolute;z-index: 2;width: 100%;height: 100%;padding: 36px 30px;box-sizing: border-box;background-color: rgb(0 0 0 / 35%);flex-direction: column;justify-content: center;align-items: center;}
.main-categs .text-1 {display: inline-block;color: white;font-size: 34px;font-weight: 500;}
.main-categs .text-1:first-letter {color: var(--mcol);}
.main-categs .text-2 {display: table;margin-top: 17px;font-size: 15px;color: #ffffff;}
.main-categs .button {position: absolute;bottom: 36px;color: var(--mcol);font-size: 38px;opacity: 0;transform: translateX(-6px);transition: all 0.3s ease;}
.main-categs .categ-big:hover .button {opacity: 1;transform: translateX(0);}
.main-categs .categ-big img {transition: all 0.3s ease;}
.main-categs .categ-big:hover img {transform: scale(1.045);}

.big-banner {display: inline-block;position: relative;margin-top: 20px;width: 100%;height: 210px;overflow: hidden;clear: both;}
.big-banner .box {display: flex;position: relative;z-index: 2;width: 100%;height: 100%;text-align: center;flex-direction: column;align-items: center;justify-content: center;background-color: rgb(0 0 0 / 30%);}
.big-banner h2 {color: white;font-size: 28px;font-weight: 500;}
.big-banner h2:first-letter {color: var(--mcol);}
.big-banner p {display: table;max-width: 60%;margin: 0;color: white;transition: all 0.3s ease;}
.big-banner .image {position: absolute;z-index: 1;top: 0;left: 0;width: 100%;height: 100%;background-size: cover;background-position: center center;transition: all 0.3s ease;}
.big-banner:hover .image { transform: scale(1.045); }
.big-banner .button-1, .big-banner:hover p {opacity: 0;}
.big-banner .button-1 {position: absolute;bottom: 28%;}
.big-banner:hover .button-1 {opacity: 1;}

/* list item */
.list-item {float: left;width: 270px;margin-right: 2.56410256%;border-radius: 8px;background-color: white;overflow: hidden;transition: all 0.3s ease;}
.list-item:hover {box-shadow: 2px 4px 16px rgb(0 0 0 / 3%);}
.list-item:nth-child(4n) {margin-right: 0;}
.g-image {position: relative;z-index: 3;border-radius: 8px;overflow: hidden;}
.g-image > a {display: flex;width: 100%;min-height: 255px;justify-content: center;align-items: center;background-color: whitesmoke;}
.g-image > a img {max-height: 100%;mix-blend-mode: darken;transition: all 0.3s ease;}
.list-item:hover img {transform: scale(1.045);}
.g-image .label {position: absolute;z-index: 2;padding: 2px 7px;font-weight: 500;font-size: 10px;border-radius: 12px;background-color: #e5e5e5;}
.g-image .label.sale {top: 12px;left: 18px;color: #333;background-color: #fffacc;}
.g-image .label.brand {bottom: 12px;left: 18px;}
.g-image .wish {position: absolute;z-index: 3;top: 9px;right: 8px;width: 40px!important;height: auto!important;padding: 0!important;background-color: transparent!important;background-image: none!important;font-family: 'FontAwesome';cursor: pointer;}
.g-image .wish:hover:before {color: #f8006a;}
.g-image .wish:before {content: "\f08a";display: block;line-height: 32px;color: #c7c7c7;font-size: 18px;text-align: center;font-family: 'FontAwesome';}
.g-image .wish.wait:before {color: black;content: "\f21e";font-weight: 900;}
.g-image .wdel:before { content: "\f004";color: #f8006a;font-weight: 900;}
.g-box {position: relative;z-index: 4;padding: 18px;border-radius: 8px;background-color: white;overflow: hidden;transition: all 0.3s ease;}
.list-item .g-name {display: table;margin-bottom: 5px;font-weight: 500;}
.list-item .g-stock {margin-bottom: 5px;color: #a7a7a7;font-size: 12px;font-weight: 500;}
.list-item .g-price > span {margin-right: 6px;color: #24272f;font-size: 16px;font-weight: 500;}
.list-item .g-price.sale > span {color: var(--mcol);}
.list-item .g-price s {position: relative;font-size: 13px;}
.list-item .g-button {display: block;margin-top: 14px;margin-bottom: -38px;color: #202020;font-weight: 500;background-image: none!important;visibility: hidden;transition: all 0.3s ease;cursor: pointer;}
.list-item .g-button i {position: relative;top: 2px;margin-right: 4px;font-size: 22px;}
.list-item a.g-button i {top: 2px;font-size: 18px;}
.list-item a.g-button:hover {color: var(--mcol);}
.list-item .g-button span {display: none;}
.list-item .g-button.add .add {display: inline-block;}
.list-item .g-button.done .done {display: inline-block;}
.list-item .g-button.done {color: var(--mcol);cursor: default;}
.list-item .g-button.done i:before {content: "\f14a";}
.list-item .g-button.wait i:before {content: "\f2f9";display: block;animation: rotate 1s linear 0s infinite;}
.list-item:hover .g-box {margin-top: -38px;}
.list-item:hover .g-button {margin-bottom: 0;visibility: visible;}

#content .list-item {margin-right: 30px;margin-bottom: 40px;}
#content .list-item:nth-child(4n) {margin-right: 30px;}
#content .list-item:nth-child(3n) {margin-right: 0;}
#content .list-item:nth-child(3n+1) {clear: both;}

.items-carousel {cursor: all-scroll;}
.items-carousel > div {width: calc(100% + 30px);}
.items-carousel .list-item {float: none;margin: 0;}
.items-carousel .owl-nav button {position: absolute;z-index: 2;top: calc(50% - 26px);width: 52px;height: 52px;color: #202020;border-radius: 50%;background-color: #ffffff;}
.items-carousel .owl-nav button.disabled {opacity: 0;}
.items-carousel .owl-nav button span:after {content: '\f105';font-size: 19px;font-family: 'Line Awesome Free';font-weight: 900;}
.items-carousel .owl-nav button:hover {color: white;background-color: #202020;}
.owl-prev {left: -26px;transform: rotate(180deg);}
.owl-next {right: -26px;}

/* middle */
.middle {margin-bottom: 50px;}
#content {width: 74.3589745%;float: right;}
#sidebar {width: 270px;float: left;}

.block {margin-bottom: 30px;padding: 18px;box-sizing: border-box;border-radius: 8px;background-color: white;}
.b-title {padding: 16px 0;margin-bottom: 16px;line-height: 22px;color: #333;font-size: 15px;font-weight: 900;font-family: 'Comfortaa', cursive;border-bottom: 2px solid #f6f6f6;}

.block.banner {position: relative;padding: 0;border-radius: 0;overflow: hidden;}
.block.banner img {display:table;width: 100%;transition: all 0.3s ease;}
.block.banner:hover img { transform: scale(1.045); }
.block.banner .box {display: flex;flex-direction: column;justify-content: center;align-items: center;position: absolute;z-index: 2;width: 100%;height: 100%;padding: 0 20px;box-sizing: border-box;text-align: center;background: rgb(0 0 0 / 30%);}
.block.banner .sub-text {margin: 0;color: rgb(255 255 255 / 70%);font-size: 20px;font-weight: 200;}
.block.banner h4 {margin: 58px 0;line-height: 36px;color: white;font-size: 28px;font-weight: 300;}
.block.banner h4 .big {display: block;color: var(--mcol);font-size: 28px;font-weight: 500;text-transform: uppercase;}
.block.banner .button-1:after {content: '';position: absolute;z-index: 2;top: 0;left: 0;width: 100%;height: 100%;} 

/* block-categs */
.block-categs {margin-bottom: 30px;box-shadow: 0 6px 38px rgb(0 0 0 / 5%);}
.cat-title {padding: 18px 20px;color: white;font-size: 15px;font-weight: 500;border-radius: 8px 8px 0 0;background-color: var(--mcol);}
.cat-title i {position: relative;top: 3px;float: right;margin-right: 10px;opacity: 0.4;transform: scale(1.7);}
.cat-tree i, #categs ul ul, #categs b {display: none;}
#categs {width: 100%;background-color: white;transition: all 0.4s ease 0s;}
#categs.hidden > ul > li {height: 0;opacity: 0;}
#categs.hidden > ul > li:nth-child(-n+9), #categs.hidden > ul > li.plus {height: auto;opacity: 1;}
#categs.hidden.open > ul > li:nth-child(n+9) {height: 52px;opacity: 1;}
#categs > ul > li.plus a {color: var(--mcol);font-weight: 600;}
#categs > ul > li.plus a:before {content: "\f0fe";color: var(--mcol);transform: scale(1.5);position: absolute;top: calc(50% - 23px);right: 12px;line-height: 47px;font-weight: 600;font-family: 'Line Awesome Free';transition: all 0.2s ease 0s;}
#categs.open > ul > li.plus a:before {content: "\f146";}
#categs > ul > li.plus a:hover:before {right: 12px;}
#categs ul.cat-tree {padding: 0;}
#categs li {position: relative;margin: 0 18px!important;box-sizing: border-box;transition: all 0.4s ease 0s;}
#categs li:last-child a, #categs.hidden li:nth-child(10) a {border-bottom: none;}
#categs.hidden.open li:nth-child(10) a {border-bottom: 1px solid #f6f6f6;}
#categs > ul > li:after {content: '';position: absolute;z-index: 1;top: 5px;left: -5%;width: 110%;height: 44px;border-radius: 8px;background-color: #f6f6f6;opacity: 0;transition: all 0.2s ease 0s;}
#categs a {display: block;position: relative;z-index: 2;height: 44px;line-height: 44px;padding: 5px 0;color: #2a2a2a;font-size: 13px;font-weight: 500;text-transform: none;border-bottom: 1px solid #f6f6f6;}
#categs a:hover {color: var(--mcol);}
.cat-tree u.plus {padding: 0;background: none!important;}
#categs u:before {content: "\f061";position: absolute;z-index: 2;top: calc(50% - 23px);right: 12px;line-height: 47px;color: #24272f;font-weight: 600;font-family: 'Line Awesome Free';transition: all 0.2s ease 0s;}
#categs a:hover:before {right: 8px;color: var(--mcol);}
#categs li:hover:after {opacity: 1;}
#categs ul ul {display: block;position: absolute;z-index: 100;top: 0;left: 260px;width: 270px;padding: 9px 0!important;box-sizing: border-box;border-radius: 0 10px 10px 10px;box-shadow: 16px 6px 22px 0 rgb(0 0 0 / 12%);background-color: white;opacity: 0;visibility: hidden;transition: all 0.4s ease 0s;}
#categs li:hover > ul {left: 250px;opacity: 1;visibility: visible;}
#categs ul ul a {height: min-content;line-height: initial;padding: 13px 0;font-weight: normal;}

/* filter */
span.flist {display: block;margin-bottom: 30px;}
.flist-item {display: block;margin-bottom: 30px;border-radius: 4px;transition: all 0.4s ease;}
.flist-item:last-child {margin-bottom: 0;}
.flist-label {display: block;margin-bottom: 12px;color: black;font-size: 15px;font-weight: 500;}
.flist-values {display: block;max-height: 230px;padding-right: 10px;overflow-y: scroll;}
.flist-values::-webkit-scrollbar-track {background-color: transparent;}
.flist-values::-webkit-scrollbar-thumb {height: 30px;background-color: #e7e6e9;border-radius: 3px;}
.flist-values::-webkit-scrollbar {width: 6px;}
.flist-values:hover::-webkit-scrollbar-thumb {background-color: #ababab;}
.flist-item:hover .flist-values {opacity: 1;visibility: visible;}
.flist-values > * {display: flex;position: relative;padding: 14px 22px 14px 26px;border-bottom: 1px solid #f7f4fb;line-height: 19px;clear: both;flex-wrap: nowrap;align-content: center;justify-content: flex-start;align-items: center;cursor: pointer;}
.flist-values > *:hover {color: var(--mcol);}
.flist-values > * > span {margin-left: auto;color: #a7a7a7;transition: all 0.4s ease;}
.flist-values > *:last-child {border-bottom: 0;}
.flist-values > a:hover {color: var(--mcol);}
.flist-values > a:hover span {color: var(--mcol);}
.flist-values .active {color: black!important;font-weight: 500!important;}
.flist-values .active:before {content: "\f00c";position: absolute;z-index: 2;top: 14px;left: 4px;color: white;font-size: 12px;font-weight: 900;font-family: 'Line Awesome Free';}
.flist-values > *:after {content: '';position: absolute;top: 14px;left: 0;width: 14px;height: 14px;border: 2px solid #f1f0f4;background-color: white;}
.flist-values .active:after {border-color: var(--mcol);background-color: var(--mcol);}

input[type="text"].price_filter {float: left;width: 48%;}
#price_min {margin-right: 4%;}
#flist-item-price button {width: 100%;margin-top: 8px;padding: 0;color: #7a7a7a;font-size: 11px;text-align: center;background-color: #eeeeee;}
#flist-item-price button:hover {color: white;background-color: var(--mcol);}

.ppblock {margin-top: 18px;}
.shop-page-wrap {text-align: left!important;}
#shop-page-more > button {margin-bottom: 8px;line-height: 48px;width: 100%;color: #333;font-weight: 500;letter-spacing: 2px;background-color: rgb(0 0 0 / 3%);}
#shop-page-more > button:hover {background-color: rgb(0 0 0 / 8%);}
.plist > * {display: inline-block;float: left;margin-right: 12px;width: 40px;height: 40px;line-height: 40px;text-align: center;font-weight: 500;border-radius: 2px;background-color: rgb(0 0 0 / 3%);}
.plist > a:hover {color: white;background-color: #24272f;}
.pgSwchA {color: white;border-color: var(--mcol);background-color: var(--mcol);}
.pprev > a, .pnext > a {display: inline-block;margin: 0 12px;line-height: 44px;color: var(--mcol);font-size: 14px;}
.pprev > a:hover, .pnext > a:hover {color: #24272f;}

/* page */
.path {margin: 22px 0;}
.path .cnt {border-radius: 5px;background-color: rgb(0 0 0 / 2%);}
.path .cnt > span {display: table;margin: auto;}
.path span > span {display: inline-block;position: relative;float: left;margin-right: 26px;}
.path span > span:last-child {margin-right: 0;}
.path span > span:after {display: inline-block;content: "\f105";margin-left: 22px;padding-left: 25px;color: var(--mcol);font-family: 'FontAwesome';}
.path span > span:last-child:after, .path span > span:last-child:before {display: none;}
.path span > span:before {content: '';position: absolute;top: 49%;right: 2px;width: 26px;height: 1px;background-color: var(--mcol);}
.path span > span a {display: inline-block;padding: 12px 0;color: gray;font-size: 13px;}
.path span > span a:hover {color: var(--mcol);}

/* categ page */
.categs-panel {margin-bottom: 16px;}
.categs-panel table.catalog tr {display: block;position: relative;float: left;margin-right: 16px;margin-bottom: 12px;padding: 12px 22px;border-radius: 4px;background-color: #ffffff;transition: all 0.4s ease;}
.categs-panel table.catalog tr:hover {box-shadow: 0 3px 14px rgb(0 0 0 / 3%);}
.categs-panel table.catalog td {padding-bottom: 0;}
.categs-panel table.catalog td > div, table.catalog img {display: none;}
.categs-panel table.catalog h3 {margin: 0;font-size: 15px;font-weight: 500;}
.categs-panel table.catalog h3 a:after {content: '';position: absolute;z-index: 2;top: 0;left: 0;width: 100%;height: 100%;}
.categs-panel table.catalog tr:hover a {color: var(--mcol);}
.sort {display: flex;width: 100%;margin-bottom: 22px;padding: 4px 14px;box-sizing: border-box;border-radius: 5px;background-color: white;align-items: center;}
.sort > span {display: inline-block;line-height: 25px;float: left;color: gray;}
.sort > span.slist {float: right;}
.sort > span.slist a {margin: 0 6px;}
.sort > span.slist a.active {color: var(--mcol);font-weight: 500;}
.sort select {margin-left: auto;border: none;padding: 0 20px 0 12px;background-position: right -1px top 21px;}

/* item page */
.item-page .cnt {background-color: white;}
.item-image {float: left;width: 60%;padding: 28px 15px 24px 30px;box-sizing: border-box;}
.item-image .main {float: right;width: calc(100% - 100px);height: 591px;box-sizing: border-box;border-radius: 8px;background-color: #e9e9e9;}
.item-image .main .image {display: flex;position: relative;width: 100%;height: 100%;flex-direction: column;justify-content: center;align-items: center;align-content: center;}
.item-image .main img {display: table;max-height: 100%;mix-blend-mode: darken;cursor: zoom-in;}
.item-image .main .image span {display: inline-block;position: absolute;z-index: 2;bottom: 34px;padding: 6px 12px;color: white;font-size: 13px;border-radius: 16px;background-color: var(--mcol);opacity: 0;transform: scale(0.85);transition: all 0.3s ease;}
.item-image .main .image img:hover + span {opacity: 0.7;transform: scale(1);}
.item-image .main .image span i {margin-right: 4px;transform: scale(1.2);}
.item-image .sub {float: left;width: 80px;}
.item-image .sub img {display: table;width: 100%;margin-bottom: 22px;box-sizing: border-box;border-radius: 4px;border: 2px solid white;transition: all 0.3s ease;cursor: pointer;}
.item-image .sub img.active {border-color: var(--mcol);}
.item-image .sub img:last-child {margin-bottom: 0;} 

.column {float: right;width: 40%;padding: 28px 30px 28px 15px;box-sizing: border-box;background-color: white;}
.column .label {display: table;margin-bottom: 14px;}
.column .label span {display: inline-block;float: left;margin-right: 10px;padding: 0 12px;box-sizing: border-box;line-height: 32px;font-size: 11px;font-weight: 500;color: #333;border-radius: 4px;background-color: #f4f2f8;}
.column .label span i {margin-right: 2px;}
.column .label span.sale {background-color: #fffacc;}
.name {margin-bottom: 20px;}
.name h1 {margin-bottom: 0;}
.name .art {margin-top: 8px;color: #b3b3b3;font-size: 13px;}
.pricebox {margin-bottom: 20px;}
.pricebox > span {color: #24272f;font-size: 24px;font-weight: 600;}
.pricebox.sale {display: flex;align-items: center;}
.pricebox.sale > span {color: var(--mcol);}
.pricebox .oldprice {display: flex;flex-direction: column;margin-left: 20px;color: #464646;font-size: 13px;line-height: 17px;}
.pricebox .oldprice > span {font-size: 11px;}

.item-page .options {display: table;width: 100%;margin-top: 26px;}
.item-page .options li {display: inline-block; float: left; margin-right: 22px;}
.item-page .options li:last-child {margin-right: 0;}
.item-page .options span.opt {color: #24272f;font-size: 15px;font-weight: 600;}
.shop-options .val {display: table; width: 100%; margin-top: 8px;}
.item-page .options label {position: relative;float: left;min-width: 45px;margin-right: 6px;padding: 12px 15px;box-sizing: border-box;color: #36363f;text-align: center;font-family: Montserrat, sans-serif;}
.item-page .options input {appearance: none;-moz-appearance: none;-webkit-appearance: none;}
.item-page .options input[type="radio"] {position: absolute;top: 0;left: 0;width: 100%;height: 100%;margin: 0;border: 2px solid #f0f0f0;border-radius: 2px;appearance: none;outline: 0;transition: all 0.2s ease 0s;cursor: pointer;}
.item-page .options input[type="radio"]:hover {border-color: #e7e7e7;}
.item-page .options input[type="radio"]:checked {border-color: var(--mcol);}
.item-page .options .g-color {margin-right: 18px;min-width: auto;width: 24px;height: 24px;padding: 0;text-indent: -9999px;border: none;}
.item-page .options .g-color input {margin: 10px 0;width: 100%;height: 100%;padding: 0;border-radius: 50%;border: none;}
.item-page .options .g-color input:after {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 50%;border: 1px solid #ededed;box-sizing: border-box;transform: scale(1.5);}
.item-page .options .g-color input:checked:after {border-color: var(--mcol);}
.item-page .options .g-color input:checked:before {display: none;}
.item-page .options .g-color span {display: inline-block;position: absolute;z-index: 2;top: -13px;left: 17px;padding: 4px 12px;text-indent: 0;border-radius: 4px;background-color: #ffffff;box-shadow: 0 4px 8px rgb(0 0 0 / 7%);opacity: 0;visibility: hidden;transition: all .3s ease;}
.item-page .options .g-color:hover span {opacity: 1;visibility: visible;}

.column .button {display: table;width: 100%;margin: 26px 0;}
.basket-button {float: left;margin-bottom: 14px;}
.column .button .basket, .basket-button a {display: inline-block;position: relative;padding: 0 38px 0 64px;box-sizing: border-box;line-height: 54px;color: white;font-size: 14px;font-weight: 500;text-transform: uppercase;border-radius: 3px;background-color: #24272f;transition: all 0.4s ease;cursor: pointer;}
.column .button .basket:before, .basket-button a:before {content: "\f290";position: absolute;top: -1px;left: 32px;font-size: 23px;font-weight: 900;font-family: 'Line Awesome Free';}
.column .button .basket.wait:before {content: "\f2f9";animation: rotate 1s linear 0s infinite;}
.column .button .basket:hover, .basket-button a:hover {background-color: var(--mcol);}
.column .button .basket.done, .basket-button a {display: none;}
.column .button .basket.done + a {display: block;}
.basket-button a:before {content: "\f00c";}

.item-page .wish {float: left;width: 54px;height: 54px;margin-left: 14px;line-height: 55px;color: #202020;font-size: 17px;text-align: center;font-weight: 400;font-family: "FontAwesome";border-radius: 50%;background-color: #f3f3f3;cursor: pointer;}
.item-page .wish.wadd::after {content: "\f08a";transition: all 0.2s ease 0s;}
.item-page .wish.wait::after {content: "\f21e"; font-weight: 900;}
.item-page .wish:hover {color: #f8006a;background-color: #e7e7e7;}
.item-page .wish.wdel:after {content: "\f004";color: #f8006a;font-weight: 900;}

#quick-order {display: table;padding-bottom: 1px;color: var(--mcol);font-weight: 500;transition: all 0.3s ease;cursor: pointer;clear: both;}
#quick-order:hover {transform: translateX(6px);}

/* order fast */
#order-fast {display: none;position: fixed;z-index: 9999;top: calc(50% - 210px);left: calc(50% - 205px);width: 410px;height: 420px;background-color: white;animation: order-fast 0.4s ease 1 forwards;}
#order-fast .item {display: flex;width: 100%;padding: 18px 40px;box-sizing: border-box;background-color: #f6f6f6;flex-wrap: nowrap;align-content: center;justify-content: flex-start;align-items: center;border-radius: 6px 6px 0 0;}
#order-fast .item > * {float: left;}
#order-fast .item img {float: l;height: 54px;margin-right: 24px;mix-blend-mode: darken;}
#order-fast .item h2 {display: -webkit-box;margin: auto;color: g;font-size: 14px;font-weight: 400;line-height: 17px;-webkit-box-orient: vertical;-webkit-line-clamp: 2;text-overflow: ellipsis;overflow: hidden;}
#order-fast .text {color: black;font-size: 22px;font-weight: 500;}
#order-fast .form p {margin: 30px 0;line-height: 21px;color: #858585;font-size: 14px;}
#order-fast .form {padding: 50px 40px;box-sizing: border-box;}
#order-fast input[type="tel"] {width: 100%;height: 54px;margin-bottom: 12px;padding: 0 18px;font-size: 17px;}
#order-fast i {position: absolute;top: -19px;right: -19px;width: 38px;height: 38px;line-height: 38px;color: white;font-size: 19px;text-align: center;box-shadow: 0 0 8px rgb(0 0 0 / 12%);background-color: #24272f;transition: all 0.2s ease;cursor: pointer;}
#order-fast i:hover {color: #333;background-color: #f6f6f6;}
body.order-active {overflow: hidden;}
body.order-active #order-fast, body.order-active #bg {display: block!important;}


.column .brief {display: -webkit-box;position: relative;padding-left: 0;box-sizing: border-box;line-height: 22px;-webkit-box-orient: vertical;-webkit-line-clamp: 3;text-overflow: ellipsis;overflow: hidden;}
.column .brief h5 {margin-bottom: 8px;font-size: 15px;font-weight: 600;}
.column .more {margin-top: 26px;box-sizing: border-box;}
.column .more li {margin-bottom: 6px;font-size: 13px;color: #b3b3b3;font-weight: 500;}
.column .more li:last-child {margin-bottom: 0;}
.column .more li b {padding-left: 5px;color: black;font-weight: 600;}

.description {margin: 0 0 50px 0;}
.description .cnt {padding: 28px 30px;box-sizing: border-box;background-color: white;}

#items-tabs .title-tabs {display: table;margin-bottom: 24px;}
#items-tabs .title-tabs span {display: inline-block;position: relative;margin-right: 12px;padding: 0 24px;line-height: 54px;color: #7a7a7a;font-size: 16px;font-weight: 500;border-radius: 8px;background-color: #eee;transition: all 0.3s ease;cursor: pointer;}
#items-tabs .title-tabs span:hover {background-color: #e7e7e7;}
#items-tabs .title-tabs span.TabsSpanActive {color: white;border-radius: 2px;background-color: var(--mcol);cursor: default;}
#items-tabs .title-tabs span.TabsSpanActive:after {content: '';display: block;position: absolute;z-index: 1;left: calc(50% - 5px);bottom: -3px;width: 10px;height: 10px;background-color: inherit;border-radius: 2px;transform: rotate( 45deg );}
#items-tabs .tabs-body {display: table;width: 100%;}
#items-tabs .tabs-body > div:nth-child(1) {color: #24272f;font-size: 15px;line-height: 24px;}
#items-tabs .tabs-body > div {display: none;}
#items-tabs .tabs-body .active {display: block!important;}

#items-tabs .images img {display: inline-block;float: left;width: 18.5585586%;margin-right: 20px;margin-bottom: 20px;}
#items-tabs .images img:nth-child(5n) {margin-right: 0;}
#items-tabs .images img:nth-child(5n+1) {clear: both;}

.product-smile-text p {margin: 24px 0 0;line-height: 17px;color: #d6d6d6;font-size: 12px;}
.product-smile-text mark {display: inline-block;color: #d6d6d6;background-color: transparent;}
.product-smile-text mark:first-letter {text-transform: lowercase;}

#items-tabs .comm {width: calc(60% - 10px);}

.lastv {margin-bottom: 50px;}
.section.lastv {margin: 50px 0 -20px 0;}
.lastv .list-item {display: flex;width: 370px;min-width: auto;align-items: center;}
.lastv .list-item:nth-child(3n) {margin-right: 0;}
.lastv .g-image {float: left;}
.lastv .g-image > a {min-height: 100px;height: 120px;border-radius: 8px;overflow: hidden;}
.lastv .list-item:hover img {transform: scale(1);}
.lastv .g-image > a span, .lastv .g-image .wish, .lastv .list-item .g-button {display: none;}
.lastv .g-box {float: left;padding: 0 20px;}
.lastv .list-item:hover .g-box {margin-top: 0;}

/* checkout */
.checkout-container #order-table {position: relative;}
.checkout-body table {border-spacing: 0;border-collapse: collapse;}
.checkout-body table tbody > tr:last-child, .order-item-nom {display: none!important;}
.order-head-name {opacity: 0;}
.checkout-body #order-table .order-head {background-color: rgb(36 39 47);}
.checkout-body #order-table .order-head th {width: auto!important;padding: 0 34px;line-height: 58px;color: #ffffff;font-size: 14px;font-weight: 400;border-bottom: none;}
.checkout-body #order-table .order-head .order-head-del {text-align: center;}
.checkout-body #order-table tr {border-bottom: 1px solid #f6f6f6;background-color: white;}
.checkout-body #order-table .order-item td {padding: 12px 34px;font-size: 16px;letter-spacing: 0.2px;border: none;}
.checkout-body #order-table .order-item .order-item-name {font-size: 15px;}
.checkout-body #order-table .order-item-img a {display: block;}
.checkout-body #order-table .order-item-img img {display: block;width: 75px;max-width: 75px;mix-blend-mode: darken;}
.order-item-name a:hover {color: var(--mcol)!important;}
.checkout-body #order-table .order-item td.order-item-price, .checkout-body #order-table .order-item td.order-item-sum {color: #24272f;font-weight: 600;}
.checkout-body #order-table .order-item td.order-item-del {padding: 0;}
.order-item-del input {position: absolute;opacity: 0;}
.order-item-del i {font-size: 19px;color: #a5a6aa;padding: 28px;cursor: pointer;transition: all 0.2s ease 0s;}
.order-item-del i:hover {color: red;}
.order-item-cnt > * {float: left;height: 52px;text-align: center;}
.order-item-cnt input {height: 52px;width: 120px;padding: 0 40px;box-sizing: border-box;color: gray;font-size: 15px;text-align: center;border-radius: 26px;border: 1px solid #eee;}
.order-item-cnt input:focus {color: black;border-color: var(--mcol);}
.order-item-cnt span {display: block;position: relative;z-index: 2;width: 46px;line-height: 52px;color: #808d9a;overflow: hidden;cursor: pointer;}
.order-item-cnt span:hover {color: var(--mcol);}
.order-item-cnt span:after {content: "\f107";display: inline-block;font-size: 11px;font-weight: 900;font-family: 'Line Awesome Free';}
.order-item-cnt span.minus {margin-right: -46px;}
.order-item-cnt span.plus {margin-left: -46px;}
.order-item-cnt span.plus:after {transform: rotate(-180deg);}
#order-total-line {margin-top: 20px;line-height: 44px;font-size: 14px;color: rgb(0 0 0 / 45%);}
#order-total-line input {float: right;margin-left: 12px;color: #7a7a7a;background-color: #eee;}
#order-total-line input:hover, #order-total-line.focus input[type="submit"] {color: white;background-color: var(--mcol);}
#order-table .MyWinGrid {display: none!important;}

.order-data .title {margin: 0 0 22px;font-size: 19px;color: #24272f;}
.order-data .title span {display: inline-block;position: relative;top: -2px;margin-right: 10px;width: 30px;height: 30px;line-height: 30px;color: white;font-size: 12px;text-align: center;border-radius: 50%;background-color: #24272f;}
.methods-list {width: 100%;border-spacing: 0;}
.methods-list tr {display: block;position: relative;float: left;width: 49%;min-height: 92px;margin-bottom: 18px;padding: 24px 22px;box-sizing: border-box;color: gray;font-size: 13px;background-color: white;}
.methods-list tr:nth-child(2n) {margin-left: 2%;}
.methods-list tr:nth-last-child(-n+2) {margin-bottom: 0;}
.methods-list tr:nth-child(2n+1) {clear: both;}
.methods-list th {display: block;position: absolute;top: 0;left: 0;width: 100%!important;height: 100%;}
.methods-list th div {position: absolute;z-index: 1;top: 0;left: 0;width: 100%;height: 100%;padding-bottom: 0;border: 2px solid #f6f6f6;box-sizing: border-box;border-radius: 2px;cursor: pointer;}
.methods-list th input:checked + div {border-color: var(--mcol);border-radius: 3px;}
.methods-list input {position: absolute;right: 10px;bottom: 10px;opacity: 0.6;}
.order-details .methods-list label {margin-bottom: 4px;color: #24272f;font-size: 15px;font-weight: 400;}
.order-details .methods-list label:after {content: '';position: absolute;z-index: 2;top: 0;left: 0;width: 100%;height: 100%;cursor: pointer;}
.order-details .methods-list .label + div {padding-bottom: 0;}
.order-details .methods-list .label + div:first-letter {text-transform: lowercase;}

.order-fields form {display: table;width: 100%;max-width: 550px;}
.order-fields .title {margin-bottom: 28px;}
.order-fields form div {float: left;position: relative;width: 49%;margin-bottom: 17px;padding-bottom: 0;border-radius: 4px;background-color: white;}
.order-fields form div:nth-child(2n) {margin-left: 2%;padding-bottom: 0;}
.order-fields form div:nth-last-child(-n+2) {margin-bottom: 0;}
.order-fields form div:nth-child(2n+1) {clear: both;}
.order-fields form div.hidden {position: absolute;opacity: 0;visibility: hidden;}
.order-fields .methods-list .label {margin: 9px 0 -29px 14px;color: #aeaeae;font-size: 14px;font-weight: 400;}
.order-fields input {position: static;z-index: 2;width: 100%!important;height: 64px;padding: 17px 14px 0;color: #535260;font-size: 15px;border: 1px solid #eee;border-radius: 3px;background-color: transparent;opacity: 1;}
.order-fields input:focus {border-color: var(--mcol);}

.order-details {display: table;position: relative;width: 100%;margin-top: 40px;}
.order-data {float: left;width: 71.7948718%;padding: 32px 24px;box-sizing: border-box;border-radius: 8px;background-color: white;}
.order-data > div {margin-bottom: 50px;}
.order-data > div:last-child {margin-bottom: 0;}
.order-details .outcome {position: absolute;top: 0;right: 0;z-index: 5;width: 25.6410256%;height: 100%;}
.order-details .sticky {position: sticky;top: 95px;box-sizing: border-box;}
.order-details .sub-title {line-height: 23px;color: #24272f;font-size: 15px;font-weight: 500;}
.order-details .outcome .box {position: relative;padding: 26px 20px;border-radius: 8px;box-shadow: rgb(0 0 0 / 7%) 0 7px 38px;background-color: white;}
.order-details .outcome .box:after {right: calc(50% - 10px);}
.order-details .outcome ul {display: table;width: 100%;box-sizing: border-box;}
.order-details .outcome li {position: relative;margin-bottom: 14px;line-height: 17px;}
.order-details .outcome li:last-child {margin-bottom: 0;}
.order-details .outcome li:after {content: '';position: absolute;z-index: 1;left: 0;bottom: 4px;width: 100%;border-bottom: 1px dashed rgb(0 0 0 / 15%);}
.order-details .outcome li > span {display: inline-block;position: relative;z-index: 2;background-color: white;}
.order-details .outcome ul span.par {padding-right: 8px;color: #444444;}
.order-details .outcome ul span.val {float: right;padding-left: 8px;color: #444444;}
.order-details .outcome ul span.val .order_discount {color: #ffc910;}
.order-details .outcome .to-pay {width: 100%;margin-bottom: 20px;}
.order-details .outcome .summ {margin-top: 18px;padding-top: 18px;line-height: 27px;font-size: 18px;color: #24272f;border-top: 1px dashed rgb(0 0 0 / 15%);}
.order-details .outcome .summ span {float: right;color: #24272f;font-size: 19px;font-weight: 600;}
.order-details .outcome .to-pay #order-button {margin: 0;width: 100%;height: auto;line-height: 65px;color: white;font-size: 14px;letter-spacing: 2px;background-color: var(--mcol);}
.order-details .outcome .to-pay #order-button:hover {color: white;opacity: 0.85;}
.order-politik {display: inline-block;margin-top: 20px;line-height: 17px;font-size: 11px;color: rgb(0 0 0 / 45%);}
.order-politik a {color: inherit;border-bottom: 1px solid rgb(255 255 255 / 0.08);}

.order-details .promocode {display: table;width: 100%;margin-top: 30px;}
.order-details .promocode .sub-title {margin-bottom: 12px;}
.order-details .promocode input {float: left;height: 50px;line-height: 44px;padding: 0 20px;}
.order-details .promocode input[type="text"] {width: 100%;letter-spacing: 0.4px;text-transform: uppercase;border-radius: 44px;}
.order-details .promocode input[type="text"]::placeholder {text-transform: initial;}
.order-details .promocode input[type="button"] {width: 120px;height: 36px;margin: 7px 0;line-height: 36px;margin-left: -120px;color: black;border-radius: 0;border-left: 1px solid #eee;background-color: transparent;}
.order-details .promocode input[type="button"]:hover {color: var(--mcol);}

/* invoices */
.control {margin: 60px 0;}
.income {display: inline-block;margin: 18px 0;line-height: 56px;}
.income > span {display: inline-block;float: left;margin-right: 42px;line-height: 62px;font-size: 13px;}
.income i {display: block;float: left;margin-right: 14px;width: 62px;height: 62px;line-height: 62px;color: black;font-size: 31px;text-align: center;border-radius: 5px;background-color: #f0f0f0;}
.income i.la-arrow-right {color: #003460;background-color: #e5ecf2;}
.income i.la-arrow-right:before {transform: rotate(-45deg);}
.income i.la-sync {color: #f8b21c;background-color: #ffe9ba;}
.income i.la-coins {color: #0a9f00;background-color: #d9f8d7;}
.income > span span {margin-left: 6px;color: black;font-size: 16px;font-weight: 500;}
.income p {margin: 0;color: #b3bfcb;font-size: 11px;letter-spacing: 0.5px;}
.sorting-numbers, .order-search {display: table;width: 100%;margin: 22px 0;}
.sorting-numbers .data {float: left;}
.sorting-numbers .data i {position: relative;top: 7px;margin-top: -7px;width: 44px;height: 44px;line-height: 44px;color: #323232;font-size: 32px;text-align: center;background-color: #eee;}
.sorting-numbers input[type="button"] {position: relative;top: -1px;}
.sorting-numbers input[type="text"] {color: #464646;font-size: 12px;font-family: Montserrat, sans-serif;}
.sorting-numbers .num {float: right;}
.order-search .left span {display: inline-block;float: left;margin-right: -61px;line-height: 41px;font-size: 14px;}
.order-search .left input[type="text"] {width: 182px;padding-left: 67px;font-size: 14px;border: none;border-bottom: 2px solid #eee;border-radius: 0;background-color: transparent;}
.order-search .left input[type="text"]:focus {box-shadow: none;border-color: var(--mcol);}
.order-search .right select {margin-left: 18px;}
.control #invoice_cont {margin-top: 60px;}
.control #invoice_cont hr {display: none;}
.control #invoice_cont #invoice-form {padding: 14px 23px;color: #808d9a;border-bottom: 1px solid #e7e7e7;background-color: #f6f6f6;}
.control #invoice-form-send-el-goods {float: right;color: black;background-color: #eee;}
.control #invoice-form-export, .control #invoice-form-print {float: right;margin-left: 8px;width: 44px;text-indent: -9999px;background-color: #eee;background-image: url(/img/template/xml.png);background-position: center;background-size: 24px;background-repeat: no-repeat;}
.control #invoice-form-export {background-image: url(/template/xml.png);}
.control #invoice-form-print {background-image: url(/template/print.png);}
.control #invoice-table {border-spacing: 0;border-collapse: collapse;}
.control #invoice-table tr:first-child td {padding: 0;line-height: 64px;color: #808d9a;font-size: 14px;font-family: Montserrat, sans-serif;border-color: #f6f6f6;background-color: #f6f6f6;}
.control #invoice-table td {width: max-content;font-size: 13px!important;padding: 12px 18px;border: 1px solid #eee;}
.control #invoice-table td > small {font-size: 13px;}
.control #invoice-table .inv_status_0 td {border-color: #ececec;background-color: rgb(248 234 0 / 4%);}
.control #invoice-table .inv_status_9 td {border-color: #ececec;background-color: rgb(255 0 0 / 4%);}
.control #invoice-table .inv_status_9 .col_inv_id, .control #invoice-table .inv_status_9 .col_status {text-decoration: line-through;}
.control #invoice-table .col_inv_id > a {font-size: 12px;font-weight: 500;}
.control #invoice-table .col_inv_id > a:before {content: '#';}
.control #invoice-table .col_inv_id small a {color: gray;font-size: 11px;}
.control #invoice-table .col_status a {display: block;}
.control #invoice-table .col_status a:hover {color: var(--mcol);}
.control #invoice-table .col_payment_id small {font-size: 13px;}
.control #invoice-table .col_amount b {font-weight: 600;font-family: 'Comfortaa', cursive;}

.index #invoice_cont table {border-spacing: 0;}
.index #invoice_cont tr:first-child {background-color: aliceblue;}
.index #invoice_cont tr:first-child td {padding: 23px 18px;color: gray;font-size: 13px;background-color: #fdfdfd;}
.index #invoice_cont td {width: max-content;padding: 18px 18px;box-sizing: border-box;border-bottom: 1px solid #f6f6f6;}
.index #invoice_cont td > small {font-size: 14px;}

.index #invoice_cont .col_inv_id > a {display: block;padding: 14px 21px;color: #333;font-size: 13px;font-weight: 500;border-radius: 41px;background-color: #f8f9fa;}
.index #invoice_cont .col_inv_id > a:before {content: '#';}
.index #invoice_cont .col_inv_id > a:hover {color: var(--mcol);}
.index #invoice_cont .col_inv_id small a {display: block;margin-top: 5px;color: gray;font-size: 12px;text-align: center;}
.index #invoice_cont .col_inv_id small a:hover {color: #333;}

.index #invoice_cont .col_amount b {color: #333;font-size: 15px;font-weight: 500;}

/* order checked */
.orderProcessed .shop-checkout:after {display: none;}
.processed {width: 100%;height: 100%;margin: 60px 0 120px 0;text-align: center;}
.checked-icon {position: relative;width: 100%;height: 200px;padding-bottom: 100px;}
.checked-icon svg {position: absolute;z-index: 2;left: calc(50% - 100px);width: 200px;fill: none;stroke: var(--mcol);stroke-width: 20;stroke-miterlimit: 10;stroke-dasharray: 0, 154;opacity: 0;animation: checked 0.5s cubic-bezier(0.4, 0, 1, 1) 1 forwards;animation-delay: 1.6s;}
.checked-icon i {position: absolute;z-index: 1;left: calc(50% - 90px);font-size: 180px;color: var(--mcol);opacity: 0;animation: bag 0.6s ease 1 forwards;}
.checked-icon .title {position: absolute;bottom: 0;width: 100%;margin-bottom: 0;color: #24272f;font-size: 36px;font-weight: 500;text-align: center;border-bottom: 0;opacity: 0;animation: text-up 0.8s ease 1 forwards;animation-delay: 1.8s;}
.checked-icon .title span {display: block;margin-top: 8px;line-height: 26px;font-size: 15px;}
.processed p {margin: 36px 0 0;font-size: 14px;opacity: 0;animation: text-opacity 0.8s ease 1 forwards;animation-delay: 2.4s;}
.processed .buttons {margin-top: 36px;opacity: 0;animation: text-opacity 0.6s ease 1 forwards;animation-delay: 3s;}
.processed .buttons > * {display: inline-block;line-height: 44px;margin: 0 9px;padding: 0 22px;color: #24272f;font-size: 12px;font-weight: 500;text-transform: uppercase;letter-spacing: 0.5px;border: none;border-radius: 5px;background-color: #eee;cursor: pointer;}
.processed .buttons > *:hover {color: white;background-color:var(--mcol);}
.processed .icons i {position: absolute;z-index: 1;color: var(--mcol);opacity: 0;}
.processed .icons .la-shipping-fast {top: 70px;right: 340px;font-size: 84px;animation: up1 1s ease 1 forwards;animation-delay: 0.5s;}
.processed .icons .la-clipboard-check {top: 98px;left: 340px;font-size: 58px;animation: up2 1s ease 1 forwards;animation-delay: 0.5s;}
.processed .icons .la-credit-card {top: 239px;left: 303px;font-size: 77px;;transform: rotate(-10deg);}
.processed .icons .la-thumbs-up {top: 225px;right: 330px;font-size: 64px;animation: up4 1s ease 1 forwards;animation-delay: 0.5s;}
.processed .icons .la-credit-card {top: 240px;left: 385px;font-size: 77px;animation: up3 1s ease 1 forwards;animation-delay: 0.5s;}

/* order page */
.order-section {position: relative;}
.order-section .cnt {position: relative;z-index: 2;}
.order-section #content {padding: 28px 24px;box-sizing: border-box;background-color: white;}
.order-section .title {font-size: 23px;text-transform: none;}
.order-short {display: flex;padding: 8px 40px 30px;border-bottom: 1px solid #f6f6f6;align-items: center;align-content: center;justify-content: center;}
.order-short .date {margin-bottom: 10px;font-size: 14px;}
.order-short .status {display: table;padding: 0 14px;line-height: 32px;font-size: 11px;font-weight: 500;color: #333;border-radius: 3px;background-color: #eee;}
.order-short .text {margin-left: 34px;font-size: 14px;color: var(--mcol);}
.order-short .total {margin-left: auto;font-size: 17px;}
.order-section .name {margin-bottom: 24px;color: #333;font-size: 19px;}
.state li {display: table;width: 100%;margin-bottom: 17px;}
.state li:last-child {margin-bottom: 0;}
.state span {display: inline-block;float: left;font-size: 14px;color: #333;}
.state .par {width: 100%;max-width: 220px;color: #858585;margin-right: 12px;}
.state .sum {color: var(--mcol);font-size: 16px;font-weight: 500;}
.order-section #order-table table {display: block;position: relative;z-index: 2;width: 100%;border-spacing: 0;}
.order-section #order-table tbody {display: block;padding: 0 40px;}
.order-section #order-table tr {display: table;width: 100%;padding: 16px 0;box-sizing: border-box;border-bottom: 1px dashed #f6f6f6;}
.order-section #order-table tr:last-child {border-bottom: 1px solid #f6f6f6;}
.order-section #order-table .order-item td {width: max-content;text-align: left;border-bottom: none;}
.order-section .order-item-img {width: 62px!important;padding: 0;}
.order-section .order-item-img > a {display: block;}
.order-section #order-table td.order-item-img img {display: table;mix-blend-mode: darken;width: 68px;max-width: 68px;}
.order-section .order-item-name {padding-left: 30px;}
.order-section .order-item-name a {font-size: 15px;color: #24272f;}
.order-section .order-item-cnt {color: #7a7a7a;}
.order-section .order-item-cnt:after {content: ' x';}
.order-section .order-item-sum {color: #333;font-size: 17px;font-weight: 600;}
.order-section thead, .order-section #order-table tbody:nth-child(3), .order-section #order-table .order-item td.order-item-price-in {display: none;}
.order-section .num {display: flex;margin: 22px 0 60px 0;align-items: center;}
.order-section .num input {margin-right: 12px;color: #7a7a7a;background-color: #eee;}
.order-section .num input:hover {color: white;background-color: var(--mcol);}
.order-section .num .right {margin-top: 0;margin-left: auto;color: #b3b3b3;}

/* user page */
.lk-item {width: calc(62% - 30px);float: left;margin-bottom: 40px;}
.lk-item .name {display: flex;flex-wrap: nowrap;align-items: center;width: max-content;margin-bottom: 32px;}
.lk-item .avatar {display: flex;position: relative;width: 90px;height: 90px;border: 3px solid #f6f6f6;border-radius: 50%;background-color: #fff;overflow: hidden;align-content: center;justify-content: center;align-items: center;}
.lk-item .avatar .la-user {width: 90px;height: 90px;line-height: 90px;color: gainsboro;font-size: 58px;text-align: center;}
.lk-item .avatar a {position: absolute;z-index: 2;top: 0;left: 0;width: 100%;height: 100%;line-height: 17px;padding: 32px 20px;box-sizing: border-box;color: white;font-size: 12px;text-align: center;opacity: 0;background-color: rgb(0 0 0 / 45%);}
.lk-item .avatar:hover a {opacity: 1;}
.lk-item .username {margin-left: 28px;}
.lk-item .username span {color: #333;font-size: 23px;font-weight: 500;}
.lk-item .username span > a {margin-left: 8px;color: var(--mcol);}
.lk-item .soclinks {margin-top: 8px;}
.lk-item .soclinks a i {border-radius: 2px!important;}

.lk-comments {position: relative;margin-bottom: 32px;padding: 20px;color: #9c9c9c;font-size: 14px;border-radius: 8px;border: 2px solid #f6f6f6;}
.lk-comments:after {content: '';position: absolute;z-index: 2;top: -10px;left: 37px;width: 16px;height: 16px;border-top: 2px solid #f6f6f6;border-left: 2px solid #f6f6f6;border-radius: 3px;background-color: white;transform: rotate(45deg);}
.lk-comments i {margin-right: 10px;font-size: 24px;color: #a6a6a6;}
.lk-comments a {color: #333;}
.lk-comments a:hover {color: var(--mcol);border-bottom: 0;}

.lk-contacts li {margin-bottom: 38px;}
.lk-contacts span {font-size: 15px;}
.lk-contacts .par {max-width: 100%;margin-right: 0;margin-bottom: 10px;font-size: 14px;}
.lk-contacts i {margin-right: 12px;color: var(--mcol);font-size: 17px;transform: scale(1.4);}
.lk-contacts .warning {margin-left: 14px;color: orange;font-size: 13px;}
.lk-contacts .warning i {margin-right: 4px;}
.lk-item .session {margin: 0;color: gray;font-size: 11px;letter-spacing: 0.5px;}

.lk-right {float: right;width: 38%;}

.balance {display: flex;padding: 28px 0;box-sizing: border-box;margin-bottom: 30px;color: #24272f;border-radius: 10px;background-color: #fefee6;flex-direction: column;align-items: center;}
.balance i {margin-bottom: 12px;font-size: 36px;}
.balance div {font-size: 23px;font-weight: 500;}
.balance span {display: block;margin-top: 6px;}
.balance span > a {display: inline-block;margin-left: 6px;color: black;border-bottom: 1px solid;}
.balance span > a:hover {color: var(--mcol);}

.lk-right .notice {padding: 18px;background-color: #fdfdfd;}
.lk-right .notice b {color: #333;font-size: 17px;}
.lk-right .notice span {display: flex;margin-top: 12px;font-size: 14px;flex-direction: row;align-items: center;}
.lk-right .notice span i {margin: -3px 12px 0 0;color: var(--mcol);font-size: 27px;}

.lk-message a {display: block;padding: 18px 0;text-align: center;border-radius: 43px;}
.lk-message a.message {color: #333;font-size: 15px;background-color: #f6f6f6;}
.lk-message a.mail {color: #a6a6a6;letter-spacing: 0.7px;}
.lk-message a.mail i {margin-right: 8px;transform: scale(1.4);}
.lk-message a:hover {color: var(--mcol);}

.user-menu ul {margin-bottom: 30px;padding: 12px;box-sizing: border-box;border-radius: 6px;border: 2px solid #f6f6f6;background-color: white;overflow: hidden;}
.user-menu a {display: block;margin: 3px 0;padding: 14px 10px;}
.user-menu li {border-bottom: 1px solid #f6f6f6;} 
.user-menu li:last-child {border-bottom: none;} 
.user-menu a:hover {color: var(--mcol);background-color: #fdfdfd;}

/* FAQ page */
.faq-add-button a {display: inline-block;margin-bottom: 34px;padding: 0 18px;line-height: 44px;color: #7a7a7a;border-radius: 3px;background-color: #eee;}
.faq-add-button a:hover {color: white;background-color: var(--mcol);}
.faq .fastLinks {display: none!important;}
.faq #allEntries {display: table;width: 100%;}
.faq #allEntries > div {margin-bottom: 34px;cursor: pointer;}
.faq #allEntries > div:last-child {border-bottom: 0;}
.faq .question {padding: 22px 19px;box-sizing: border-box;border-radius: 4px;background-color: white;}
.faq .line {position: relative;padding: 0 42px 10px 0;}
.faq .line a {color: #24272f;font-size: 17px;line-height: 21px;}
.faq .line i {position: absolute;top: -7px;right: 0;width: 34px;height: 34px;line-height: 34px;color: #7a7a7a;text-align: center;border-radius: 50%;background-color: #eee;transition: all 0.2s ease;}
.faq #allEntries > div:hover .line i {color: white;background-color: var(--mcol);}
.faq #allEntries > div.active .line i {color: white;background-color: var(--mcol);}
.faq #allEntries > div.active .line i:before {display: inline-block;transform: rotate(180deg);transition: all 0.2s ease;}
.faq .message {height: 0;padding: 0 20px;color: #555555;line-height: 23px;border-left: 3px solid var(--mcol);background-color: rgb(0 0 0 / 2%);overflow: hidden;transition: all 0.4s ease;}
.faq .message p {margin: 22px 0;}
.faq #allEntries > div.active .message {height: max-content;margin-top: 18px;}
.faq .data {font-size: 13px;}
.faq .data b {display: inline-block;margin-right: 10px;font-weight: 400;width: 32px;height: 32px;line-height: 32px;color: var(--mcol);text-align: center;border-radius: 5px;background-color: #f5f5f5;}

/* subscribe */
.subscribe-block {margin-top: 70px;padding: 38px 0;background-color: var(--mcol);overflow: hidden;}
.subscribe-block .cnt {position: relative;}
.subscribe-block .cnt::before {content: "\f3fe";position: absolute;z-index: 1;left: 28px;bottom: 15px;font-size: 194px;color: rgb(255 255 255 / 20%);font-family: 'Line Awesome Brands';}
.subscribe-block .cnt > div {position: relative;z-index: 2;}
.subscribe-block .e-title {float: left;line-height: 1;font-size: 36px;color: white;font-weight: 300;letter-spacing: -0.6px;}
.subscribe-content {float: left;width: 350px;margin-left: 30px;line-height: 24px;color: rgb(255 255 255 / 95%);font-size: 14px;padding: 16px 0 16px 30px;border-left: 1px solid rgba(255, 255, 255, 0.25);}
.subscribe-content strong {color: white;}
.form-email {float: right;margin: 16px 0 16px 30px;}
.form-email input {float: left;height: 50px;border: none;background-color: white;}
.form-email input[type="text"] {width: 270px;margin-right: 10px;}
.form-email input[type="submit"] {background-color: #24272f;}
.form-email input[type="submit"]:hover {color: black;background-color: #e7e7e7;}

.payments {display: table;float: right;}
.payments span {display: block;float: left;margin-right: 12px;width: 40px;height: 40px;border-radius: 3px;background-color: #eeeeee;background-position: center;background-repeat: no-repeat;background-size: contain;}
.payments span:last-child {margin-right: 0;}
.payments span.visa {background-image: url('/img/visa.svg');}
.payments span.mastercard {background-image: url('/img/mastercard.svg');}
.payments span.mir {background-image: url('/img/mir.svg');}
.payments span.apple {background-image: url('/img/apple.svg');background-color: black;}
.payments span.google {background-image: url('/img/google.svg');}

footer {padding-top: 60px;background-color: #24272f;}
footer #sitelogo a {line-height: 40px;color: var(--mcol);}
footer .accordion-item {display: table;margin-left: auto;}
footer .accordion-item .text-block {display: table;float: left;margin-right: 62px;}
footer .accordion-item .text-block:last-child {margin-right: 0;}
footer .accordion-item .text-block i {float: left;margin-right: 18px;line-height: 40px;color: var(--mcol);font-size: 38px;}
footer .accordion-item .text-block .media-body {float: left;}
footer .accordion-item .text-block p {margin: 0;line-height: 20px;color: rgb(255 255 255 / 45%);font-size: 13px;}
footer .cols {display: table;width: 100%;padding: 60px 0 40px 0;}
footer .cols .col4 {width: 17.0940171%;margin-right: 40px;}
footer .cols .col4:nth-child(4) {display: flex;width: 38.2051282%;height: 200px;margin-right: -1px;border: 2px solid #f6f6f6;border-radius: 8px;flex-direction: row;flex-wrap: wrap;align-items: center;align-content: center;}
.col-footer-name {margin-bottom: 18px;color: #333;font-size: 18px;font-weight: 500;}
footer .links li {border-bottom: 1px dotted rgba(0,0,0,0.07);}
footer .links li:last-child {border-bottom: 0;}
footer .links a {display: inline-block;width: 100%;padding: 14px 0;color: #666;}
footer .links a:hover {color: var(--mcol);}
.top-footer {display: flex; width: 100%; margin-bottom: 34px; align-items: center; align-content: center; flex-direction: row; justify-content: center;}
footer .bottom {display: table;line-height: 40px;width: 100%;padding: 22px 0;box-sizing: border-box;color: rgb(255 255 255 / 45%);font-size: 13px;border-top: 2px solid rgb(255 255 255 / 4%);}
footer .bottom a {color: var(--mcol);}

body.mobile-active-menu .mobile-right-menu {display: block!important;}
body.mobile-active-menu #bg {display: block!important;}
.mobile-right-menu {position: fixed;z-index: 101;top: 0;right: -315px;width: 315px;height: 100%;background-color: white;overflow: auto;animation: m-menu-active 0.5s ease 1 forwards;}
.mobile-right-menu .box:hover {z-index: 2;}
.mobile-right-menu .contacts {padding: 26px 22px;color: #767676;}
.mobile-right-menu .contacts span {display: block;margin-bottom: 12px;line-height: 18px;font-size: 12px;}
.mobile-right-menu .contacts span:last-child {margin-bottom: 0;}
.mobile-right-menu #phone {display: block;padding: 22px 20px;}
.mobile-right-menu #phone a {color: black;font-weight: 600;font-size: 17px;font-family: Montserrat, sans-serif;}
.mobile-right-menu #phone span {margin-left: 8px;font-size: 12px;color: var(--mcol);text-decoration: underline;}
.mobile-right-menu ul > li {border-bottom: 1px solid #eee;}
.mobile-right-menu ul > li > a {display: block;padding: 14px 20px;color: black;font-size: 15px;}
.mobile-right-menu .menu > div > ul > li > a:before {display: inline-block;content: '\f105';margin-right: 14px;font-size: 17px;font-weight: 900;font-family: 'Line Awesome Free';transform: scale(1.3);}
.mobile-right-menu i {margin-right: 14px;font-size: 17px;}
.mobile-right-menu i.las {transform: scale(1.3);}
.mobile-right-menu a.menu-home-page span {display: inline-block;}
.mobile-right-menu .contacts i, .mobile-right-menu .menu > div > ul > li ul {display: none;}

/* keyframes */
@keyframes tabs-active {from {opacity: 0.7;} to {opacity: 1;}}
@keyframes order-fast {from {opacity: 0.7;top: calc(50% - 220px);} to {opacity: 1;top: calc(50% - 200px);}}
@keyframes rotate {from {transform:rotate(0deg);} to {transform:rotate(360deg);}}
@keyframes checked {from {stroke-dasharray: 0, 154;} to {stroke-dasharray: 140, 154;opacity: 1;}}
@keyframes bag {0% {transform: scale(0.6);} 50% {transform: scale(1.2);} 100% {transform: scale(1);opacity: 0.4;}}
@keyframes text-up {0% {transform: scale(0.6);} 50% {transform: scale(1.2);} 100% {transform: scale(1);opacity: 1;}}
@keyframes text-opacity {0% {opacity: 0;}100% {opacity: 1;}}
@keyframes up1 {from {transform: scale(0.4) rotate(180deg);} to {right: 260px;transform: scale(1) rotate(18deg);opacity: 0.1;}}
@keyframes up2 {from {transform: scale(0.4) rotate(180deg);} to {left: 260px;transform: scale(1) rotate(7deg);opacity: 0.1;}}
@keyframes up3 {from {transform: scale(0.4) rotate(-120deg);} to {left: 305px;transform: scale(1) rotate(-10deg);opacity: 0.1;}}
@keyframes up4 {from {transform: scale(0.4) rotate(-60deg);} to {right: 305px;transform: scale(1) rotate(28deg);opacity: 0.1;}}
@keyframes m-menu-active {from {right: -315px;} to {right: 0;}}

/* media */
@media (max-width: 1180px) {
 header .contacts, .main-nav > div {display: none;}
 .cnt {width: 88%;}
 .search {width: 100%;float: none;margin: 18px 0;}
 .mobile-button {display: flex!important;margin-top: 13px;margin-left: 12px;min-width: 48px;height: 48px;padding: 0 12px;color: #24272f;font-size: 22px;background-color: #eee;justify-content: center;align-items: center;}
 .mobile-button span {margin-left: 8px;font-size: 15px;}
 .slider {margin-top: -154px;}
 .slide {height: 640px;}
 
 .items-carousel > div {width: 100%;}
 .list {display: flex;width: 100%;overflow: auto;}
 .list > div {display: flex;align-items: flex-start;}
 
 .items-carousel .list-item {float: left;min-width: 270px;margin-right: 30px;}
 #content .scroll-items .list-item, #content .scroll-items .list-item:nth-child(3n) {min-width: 270px;margin-right: 30px;}
 .scroll-items {display: flex;overflow: auto;}
 .scroll-items > div {display: flex;width: 100%;align-items: flex-start;}
 
 .catalog-page #content .list-item {width: 23.0769231%;margin-right: 2.56410256%;}
 .catalog-page #content .list-item:nth-child(3n) {margin-right: 2.56410256%;}
 .catalog-page #content .list-item:nth-child(3n+1) {clear: none;}
 .catalog-page #content .list-item:nth-child(4n) {margin-right: 0;}
 .catalog-page #content .list-item:nth-child(4n+1) {clear: both;}
 
 #content {width: 100%;float: none;}
 #sidebar {display: flex;float: none;width: 100%;margin: 60px auto 0;justify-content: center;align-items: flex-start;}
 
 #sidebar > div {float: left;width: 300px;margin-right: 30px;}
 #sidebar > div:nth-child(2n) {margin-right: 0;}
 #sidebar > div:nth-child(2n+1) {clear: both;}
 .subscribe-block .box {display: table;margin: auto;}
 .form-email {display: table;float: none;width: 60%;margin: 20px auto 0;}
 .form-email input[type="text"] {width: calc(100% - 152px);}
 .subscribe-block .cnt::before {left: calc(50% - 100px);top: 50px;bottom: auto;}
 
}

@media (max-width: 1024px) {
 #categs ul ul, .list-item .g-button {display: none;}
 .top-fixed .sitelogo a {padding-left: 0;transition: none;}
 .top-fixed #shop-basket > a {padding-right: 0;transition: none;}
 .top-fixed #shop-basket > a i span {right: 0;}
 .icon-blocks .cnt {display: flex;flex-direction: column;align-items: center;}
 .icon-blocks .col3 {width: 100%;margin-bottom: 30px;}
 .list-item:hover .g-box {margin-top: 0;}
 .items-carousel .list-item, #content .scroll-items .list-item, #content .scroll-items .list-item:nth-child(3n) {width: 100%;min-width: 31.6239316%;margin-right: 2.56410256%;}
 
 
 .catalog-page #content .list-item {width: 31.6239316%;margin-right: 2.56410256%;}
 .catalog-page #content .list-item:nth-child(3n) {margin-right: 0;}
 .catalog-page #content .list-item:nth-child(3n+1) {clear: both;}
 .catalog-page #content .list-item:nth-child(4n) {margin-right: 2.56410256%;}
 .catalog-page #content .list-item:nth-child(4n+1) {clear: none;}
 
 .main-categs .categ-big {width: 31.6239316%;margin-right: 2.56410256%;}
 #content {width: 100%;float: none;}
 
 .item-image {width: 100%;padding: 28px 24px 0;}
 .column {width: 100%;padding: 28px 24px;}
 
 .top-footer {display: flex;flex-direction: column;}
 footer .sitelogo a {margin-right: 0;margin-bottom: 22px;}
 footer .accordion-item {margin-left: 0;}
 footer .accordion-item .text-block {margin: 0 22px;}
 footer .bottom {display: flex;padding-bottom: 60px;flex-direction: column;align-items: center;line-height: normal;text-align: center;}
 footer .payments {float: none;margin-top: 22px;}
 
 .checkout-body #order-table .order-head, .index #invoice_cont tr:first-child {display: none;}
 .checkout-body #order-table .order-item {display: block;margin-bottom: 22px;text-align: center;border: none;}
 .checkout-body #order-table .order-item td, .index #invoice_cont td { display: inline-block; width: 100%; padding: 14px 22px; box-sizing: border-box; border: none; }
 .order-item-cnt input, .order-fields form {width: 100%;}
 .checkout-body #order-table .order-item-img img {width: auto;max-width: max-content;height: 92px;}
 
 .order-data {width: 100%;float: none;}
 .order-details .outcome { display: table; position: static; width: 100%; max-width: 400px; margin: 40px auto 0; }
}

@media (max-width: 920px) {
 #order-fast {top: auto;bottom: 0;}
 @keyframes order-fast {from {bottom: -15%;} to {bottom: 0;}}
 footer .accordion-item {}
 footer .accordion-item .text-block {float: none;margin: 0 0 30px 0;}
 footer .accordion-item .text-block:last-child {margin-bottom: 0;}
}

@media (max-width: 880px) {
 .slide .cnt {justify-content: flex-end;padding-bottom: 80px;box-sizing: border-box;}
 .items-carousel .list-item, .scroll-items .list-item, #content .scroll-items .list-item {min-width: 48.7179487%;}
 .main-categs .categ-big {width: 48.7179487%;margin-right: 2.56410256%;}
 .main-categs .categ-big:nth-child(2n) {margin-right: 0;}
 .main-categs .categ-big:nth-child(2n+1) {margin-right: 2.56410256%;clear: both;}
 .item-image .main {width: 100%;height: max-content;float: none;}
 .item-image .main.owl-loaded .image {display: block!important;}
 .item-image .sub {display: none;}
 .item-image .owl-dots {position: absolute;left: 0;bottom: 22px;width: 100%;text-align: center;}
 .item-image .owl-dots button {margin: 0 8px;width: 8px;height: 8px;border-radius: 50%;background-color: #f7f6fb;}
 .item-image .owl-dots button.active {background-color: var(--mcol);}
 
 .catalog-page #content .list-item {width: 48.7179487%;margin-right: 2.56410256%;}
 .catalog-page #content .list-item:nth-child(2n) {margin-right: 0!important;}
 .catalog-page #content .list-item:nth-child(3n) {margin-right: 2.56410256%;}
 .catalog-page #content .list-item:nth-child(2n+1) {clear: both!important;}
 .catalog-page #content .list-item:nth-child(3n+1) {clear: none;}
 
}

@media (max-width: 790px) {
 .subscribe-block .e-title {float: none;margin-bottom: 12px;text-align: center;}
 .subscribe-content {float: none;max-width: 80%;margin: auto;width: auto;padding: 0;border-left: 0;text-align: center;}
 .subscribe-block .cnt:before {bottom: 56px;}
 .form-email {width: 100%;max-width: 400px;}
 .form-email input {float: none;width: 100%;}
 .form-email input[type="text"] {width: 100%;margin-right: 0;margin-bottom: 12px;}
 #sidebar {display: flex;flex-direction: column;align-content: flex-end;align-items: center;justify-content: flex-start;}
 #sidebar > div {float: none;margin-right: 0;}
 .order-fields form {max-width: 100%;}
}

@media (max-width: 660px) {
 .slide {height: 720px;}
 .slide .cnt {padding-bottom: 100px;}
 .slide-content {width: 90%;}
 .slide-content h2 {font-size: 32px;line-height: 38px;}
 .slide-content p {font-size: 13px;line-height: 19px;}
 .main-categs .categ-big {float: none;width: 100%;margin-right: 0;margin-bottom: 30px;}
 .main-categs .categ-big:last-child {margin-bottom: 50px;}
 .main-categs .text-1 {font-size: 38px;}
 .main-categs .text-2 {margin-top: 22px;font-size: 16px;}
 
 .path .cnt > span {width: 100%;}
 .path .cnt > span > span {display: none!important;width: 100%;float: none;padding-right: 0;}
 .path span > span:last-child {display: block!important;width: 100%;}
 .path span span > a {display: block;width: 100%;padding-left: 16px;color: var(--mcol);font-size: 15px;}
 .path span span > a:before {content: "\f060";position: relative;top: 2px;margin-right: 6px;color: var(--mcol);font-size: 17px;font-weight: 900;font-family: 'Line Awesome Free';}
 .catalog-page .path span > span:last-child {display: none!important;}
 .catalog-page .path span > span:nth-last-child(2) {display: block!important;}
 .path span > span:before, .path span > span:after {display: none;}
 
 #items-tabs .title-tabs {width: 100%;}
 #items-tabs .title-tabs span {float: none;width: 100%;box-sizing: border-box;margin: 0 0 8px;}
 #items-tabs .title-tabs span.TabsSpanActive:after {display: none;}
 
 .methods-list tr {width: 100%;margin-left: 0!important;margin-bottom: 18px!important;}
 .methods-list tr:last-child {margin-bottom: 0!important;}
}

@media (max-width: 470px) {
 .mobile-button {padding: 0;}
 .mobile-button span {display: none;padding: 0;}
 .items-carousel .list-item, .scroll-items .list-item, #content .scroll-items .list-item {min-width: 270px;margin-right: 30px;}
 #sidebar {max-width: 100%;}
 #sidebar > div {width: 100%;}
 .catalog-page #content .list-item {width: 100%;margin-right: 0!important;}
 #order-total-line input, .order-fields form div {width: 100%;float: none;margin-left: 0;}
 #order-total-line input[type="button"] {margin-bottom: 8px;}
 .order-fields form div {margin-left: 0!important;}
 #order-fast {width: 100%;left: 0;}
 .item-image {padding: 20px 18px 0;}
 .column {padding: 30px 18px 20px 18px;}
 .basket-button {width: calc(100% - 68px);}
 .column .button .basket, .basket-button a {width: 100%;text-align: center;}
 .description .cnt, .order-data {padding: 20px 18px;}
 .product-smile-text p {margin-top: 14px;line-height: 16px;font-size: 11px;}
}

@media (max-width: 430px) {
 .head-user {display: none;}
 .top-fixed .head-user {display: block;}
 .column .button .basket b {display: none;}
}

@media (max-width: 370px) {
 .top-fixed .head-user {display: none;}
}

.top-lettersss {
color: black;
}


.Bodybag{
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}

.Bodybag1 {
 font-family: 'Arial', sans-serif;
 line-height: 1.6;
 padding: 20px;
}

.reviews {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 20px;
 padding: 10px;
}

.review {
 border: 1px solid #ccc;
 padding: 20px;
 border-radius: 8px;
 background: #f9f9f9;
}

@media (max-width: 1200px) {
 .reviews {
 grid-template-columns: repeat(3, 1fr);
 }
}

@media (max-width: 800px) {
 .reviews {
 grid-template-columns: repeat(2, 1fr);
 }
}

@media (max-width: 600px) {
 .reviews {
 grid-template-columns: 1fr;
 }
}


.textochek{
 margin-top: 20px;
 width: 80%;
 margin: auto;
 background: #fff;
 padding: 20px;
 box-shadow: 0 0 10px rgba(0,0,0,0.1);
 margin-bottom:20px;
}

.main-header, .sub-header, .extra-sub-header {
 color: #333;
}

.intro-text, .benefit-item, .suit-item {
 margin: 20px 0;
}

.benefits-list, .suits-list {
 list-style-type: none;
 padding: 0;
}

.benefit-item, .suit-item {
 padding: 8px 0;
 border-bottom: 1px solid #ccc;
}

.benefit-item:last-child, .suit-item:last-child {
 border-bottom: none;
}

.highlighted {
 font-size: 1.1em;
 background-color: #f0f0f0;
 padding: 10px;
 margin-bottom: 20px;
 box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.sub-otz
{
 margin-top: 20px; 
}

.call-button {
 position: fixed;
 bottom: 20px;
 right: 20px;
 width: 80px;
 height: 80px;
 background-color: #4CD964;
 border-radius: 50%;
 display: flex;
 justify-content: center;
 align-items: center;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 cursor: pointer;
 overflow: hidden;
 transition: transform 0.3s ease-in-out;
 z-index: 500;
}

.call-button img {
position: absolute; /* Абсолютное позиционирование для изображения */
 top: 50%; /* Смещаем вниз на 50% */
 left: 50%; /* Смещаем вправо на 50% */
 transform: translate(-50%, -50%); /* Выравниваем по центру */
 width: 90%; /* Размер трубки */
 height: auto; /* Поддерживаем пропорции */
 object-fit: contain; /* Убедились в корректном отображении */
}
}

.call-button:hover {
 transform: scale(1.1); /* Небольшое увеличение кнопки при наведении */
}

@media (max-width: 768px) {
 .call-button {
 width: 65px;
 height: 65px;
 }
}
.mappster{
 display: flex;
 justify-content: center;
 align-items: center;
 margin: 0 auto; 
 height: 100vh; 
 }
}

/* Базовые стили */
/* Базовые стили для контейнера */
.stories-wrapper {
 max-width: 1200px;
 width: 100%;
 padding: 20px;
 box-sizing: border-box;
 margin: 0 auto;
}

/* Стили для контейнера обложек */
#storyCoversContainer {
 display: flex;
 gap: 15px;
 overflow-x: auto;
 scroll-behavior: smooth;
 padding: 10px;
 scroll-padding: 10px;
 position: relative;
 justify-content: center; /* Центрирование обложек */
}

#storyCoversContainer::-webkit-scrollbar {
 height: 8px;
}

#storyCoversContainer::-webkit-scrollbar-track {
 background: #222;
 border-radius: 10px;
}

#storyCoversContainer::-webkit-scrollbar-thumb {
 background: #555;
 border-radius: 10px;
}

/* Стили для обложек */
.story-cover {
 cursor: pointer;
 width: 150px; /* Фиксированная ширина */
 height: 267px; /* Фиксированная высота */
 border-radius: 15px;
 overflow: hidden;
 padding: 2px; /* Отступ внутри обложки */
 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
 flex: 0 0 auto; /* Запрещаем гибкое изменение размеров */
 position: relative;
 box-sizing: border-box;
}

.story-cover.unseen {
 border: 3px solid #007AFF; /* Голубая рамка */
 box-shadow: none; /* Убираем свечение */
}

.story-cover.seen {
 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Обычная тень */
 border: none; /* Убираем границу */
}

.story-cover img {
 width: 100%; /* Изображение занимает всю ширину контейнера */
 height: 100%; /* Изображение занимает всю высоту контейнера */
 border-radius: 10px;
 object-fit: cover; /* Сохраняем пропорции изображения */
 touch-action: manipulation; /* Улучшаем обработку тач-событий */
}

.story-description {
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 background: rgba(0, 0, 0, 0.7);
 color: white;
 padding: 8px;
 font-size: 14px;
 text-align: center;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

/* Модальное окно */
.story-container {
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: rgba(0, 0, 0, 0.9);
 z-index: 1000;
 justify-content: center;
 align-items: center;
}

.story-modal {
 position: relative;
 width: 90%;
 max-width: 360px;
 height: 90vh;
 max-height: 640px;
 border-radius: 15px;
 overflow: hidden;
 background: #000;
 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Прогресс-бар */
.progress-bar {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 4px;
 z-index: 2;
 display: flex;
 gap: 2px;
 padding: 0 2px;
}

.progress-segment {
 flex: 1;
 height: 100%;
 background: rgba(255, 255, 255, 0.3);
}

.progress-fill {
 height: 100%;
 width: 0;
 background: #fff;
 transition: width 0.1s linear;
}

/* Кнопки управления */
.control-buttons {
 position: absolute;
 top: 15px;
 right: 15px;
 display: flex;
 gap: 10px;
 z-index: 4;
}

.stop-btn,
.close-btn {
 background: rgba(0, 0, 0, 0.5);
 color: white;
 border: none;
 padding: 8px 12px;
 border-radius: 20px;
 cursor: pointer;
 font-size: 16px;
}

.stop-btn.paused {
 background: #ff4444;
}

/* Кнопки навигации */
.nav-btn {
 background: rgba(0, 0, 0, 0.7); /* Темный фон с прозрачностью */
 color: white;
 border: none;
 padding: 15px;
 border-radius: 50%; /* Круглые кнопки */
 font-size: 24px; /* Размер стрелок */
 cursor: pointer;
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 z-index: 4; /* Чтобы кнопки были поверх слайдов */
 opacity: 0.8; /* Немного прозрачные */
 transition: opacity 0.3s, background 0.3s; /* Плавные переходы */
}

.nav-btn:hover {
 background: rgba(0, 0, 0, 0.9); /* Темнеет при наведении */
 opacity: 1; /* Полная видимость */
}

#prevBtn {
 left: 10px; /* Размещение слева */
}

#nextBtn {
 right: 10px; /* Размещение справа */
}

/* Адаптивность для мобильных */
@media (max-width: 600px) {
 .nav-btn {
 display: block !important; /* Показываем кнопки на мобильных */
 padding: 12px; /* Уменьшаем размер кнопок */
 font-size: 20px; /* Уменьшаем размер стрелок */
 }

 #prevBtn {
 left: 5px; /* Сдвигаем ближе к краю */
 }

 #nextBtn {
 right: 5px; /* Сдвигаем ближе к краю */
 }
}

/* Слайды */
.story-slide {
 position: absolute;
 width: 100%;
 height: 100%;
 opacity: 0;
 transition: opacity 0.3s ease;
}

.story-slide.active {
 opacity: 1;
}

.story-image,
.story-video {
 width: 100%;
 height: 100%;
 object-fit: cover;
 position: absolute;
 top: 0;
 left: 0;
}

/* Информация в слайдах */
.story-info {
 position: absolute;
 top: 20px;
 left: 20px;
 color: white;
 background: rgba(0, 0, 0, 0.7);
 padding: 8px 12px;
 border-radius: 15px;
 font-size: 16px;
 max-width: 70%;
 z-index: 3;
}

.story-content {
 position: absolute;
 bottom: 20px;
 left: 20px;
 right: 20px;
 z-index: 3;
}

.story-title {
 color: white;
 font-size: 18px;
 font-weight: 600;
 margin-bottom: 8px;
}

.story-text {
 color: white;
 font-size: 16px;
 margin-bottom: 15px;
}

.story-link {
 position: relative;
 display: block;
 background: #0095f6;
 color: white !important;
 border: none;
 padding: 10px 20px;
 border-radius: 25px;
 cursor: pointer;
 font-size: 16px;
 text-decoration: none;
 text-align: center;
 transition: 0.3s;
}

.story-link:hover {
 background: #0077d9;
}

.video-loading {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 color: white;
 font-size: 24px;
 z-index: 5;
}

/* Адаптивность для мобильных */
@media (max-width: 600px) {
 .stories-wrapper {
 padding: 10px;
 }

 #storyCoversContainer {
 justify-content: flex-start;
 gap: 10px;
 }

 .story-cover {
 width: 120px; /* Уменьшаем ширину для мобильных */
 height: 216px; /* Сохраняем пропорции (соотношение сторон 9:16) */
 }

 .story-description {
 font-size: 10px; /* Еще меньше текст */
 }

 .story-modal {
 width: 100%;
 height: 100vh;
 max-width: none;
 border-radius: 0;
 }

 .control-buttons {
 top: 5px;
 right: 5px;
 }

 .stop-btn {
 top: 40px;
 left: 5px;
 padding: 6px 10px;
 font-size: 14px;
 }

 .close-btn {
 top: 5px;
 right: 5px;
 padding: 6px 10px;
 font-size: 14px;
 }

 .nav-btn {
 display: block; /* Скрываем кнопки навигации на мобильных */
 }
}
.phone-link {
 color: gray !important;
 text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
 transition: 0.3s;
}

.phone-link:hover {
 color: #ffdd4b; /* Золотистый акцент */
 text-shadow: 1px 1px 8px rgba(255,221,75,0.5);
}

#main{
color:white;
}