@import url('default.css');
/*colors*/
:root {
--font-head:"Archivo", sans-serif;
--font-base:"Questrial", sans-serif;
--text-color:#000000;
--bg-color:#F4F0EC;
--bg-color2:#C9A3A4;
--sp-color:#F0F0F0;
--starEmpty:url('data:image/svg+xml,');
--starFilled:url('data:image/svg+xml,');
}
a{
color:var(--text-color);
text-decoration:underline;
}
a:hover{
text-decoration:none;
}
form{
display:flex;
gap:20px;
flex-wrap:wrap;
}
form > *{
position:relative;
}
form label{font-weight:bolder;}
form .errorField{
color:#FF0000;
font-size:78%;
position:absolute;
bottom:-18px;
lefT:0px;
}
form .btn[disabled]{
cursor:no-drop;
opacity:0.4;
}
form .errorField:empty{
display:none;
}
select.small{
height:28px;
}
hr{
margin:0px;
padding:0px;
height:0px;
border:0px;
box-shadow:none;
border-bottom:1px solid #00000033;
}
h1,h2,h3,h4,h5,h6{
color:var(--text-color);
}
h1{
font-family: var(--font-head);
font-weight: 400;
font-size: 43px;
line-height: 56.8px;
}
h4{
font-size: 28.43px;
line-height: 32px;
letter-spacing: 3px;
text-transform:uppercase;
}
h6{
font-family: var(--font-head);
font-weight: 400;
font-size: 16px;
line-height: 20px;
font-weight:bolder;
text-decoration:underline;
}
.btn{
font-family: var(--font-head);
display:inline-block;
color:#FFFFFF;
border:0px;
background-color:#000000;
overflow:hidden;
text-overflow:ellipsis;
line-height:34px;
text-decoration:none;
text-align:center;
padding:0px 20px;
cursor:pointer;
}
.btn.disabled{
opacity:0.5;
cursor:no-drop;
}
form.waiting .btn{
filter:grayscale(1);
opacity:0.5;
cursor:progress;
}
.btn.flex{
display:flex;
justify-content:center;
align-items:center;
}
.btn.btn-small{
line-height:25px;
height:25px;
padding:0px 15px;
}
.btn.bigger{
line-height:48px;
height:48px;
text-transform:uppercase;
padding:0px 30px;
}
.d-flex{
display:flex;
}
.flexCenterBetween{
display:flex;
align-items:center;
justify-content:space-between;
}
.flexCenter{
align-items:center;
}
.flexRow{
flex-direction:row;
}
.flexColumn{
flex-direction:column;
}
.flexNowrap{
flex-wrap:nowrap;
}
head,body{
font-family: var(--font-base);
font-size:16px;
color:var(--text-color);
}
body{
background-color:#F4F0EC;
}
/*icons*/
.icon{
position:relative;
}
.icon:before{
height:0px;
content:'';
display:block;
width:23px;
padding-top:100%;
background-size:contain;
background-position: center;
background-repeat:no-repeat;
}
.icon > span:empty{
display:none;
}
.icon > span{
position:absolute;
display:flex;
flex-shrink:0;
top:-9px;
right:0px;
transform: translate(50%,0%);
font-size:60%;
width:16px;
height:16px;
justify-content:center;
align-items:center;
background-color:#E98682;
color:#FFFFFF;
border-radius:50%;
}
.icon.profile:before{
background-image: url('data:image/svg+xml,');
padding-top:121%;
}
.icon.heart:before{
background-image: url('data:image/svg+xml,');
}
.icon.white.heart:before{
background-image: url('data:image/svg+xml,');
}
.icon.cart:before{
background-image: url('data:image/svg+xml,');
padding-top:102%;
}
.icon.cart.white:before{
background-image: url('data:image/svg+xml,');
padding-top:102%;
}
.icon.home:before{
background-image: url('data:image/svg+xml,');
}
.icon.white.home:before{
background-image: url('data:image/svg+xml,');
}
.icon.magnify:before{
background-image: url('data:image/svg+xml,');
}
.icon.white.magnify:before{
background-image: url('data:image/svg+xml,');
}
.icon.plus:before{
background-image: url('data:image/svg+xml,');
}
.icon.white.plus:before{
background-image: url('data:image/svg+xml,');
}
.icon.minus:before{
background-image: url('data:image/svg+xml,');
}
.icon.white.minus:before{
background-image: url('data:image/svg+xml,');
}
.icon.shop:before{
background-image: url('data:image/svg+xml,');
}
.icon.white.shop:before{
background-image: url('data:image/svg+xml,');
}
.icon.user:before{
background-image: url('data:image/svg+xml,');
}
.icon.white.user:before{
background-image: url('data:image/svg+xml,');
}
.icon.heart:before{
background-image:url('data:image/svg+xml,');
}
.icon.heart.full:before{
background-image:url('data:image/svg+xml,')
}
.icon.facebook:before{
background-image: url('data:image/svg+xml,');
}
.icon.twitter:before{
background-image: url('data:image/svg+xml,');
}
.icon.linkedin:before{
background-image: url('data:image/svg+xml,');
}
.icon.pinterest:before{
background-image: url('data:image/svg+xml,');
}
.icon.pack:before{
background-image:url('data:image/svg+xml,');
}
.icon.ok:before{
background-image:url('data:image/svg+xml,');
}
.icon.location:before{
background-image:url('data:image/svg+xml,');
}
.stars{width:108px;height:19px;margin:0px;padding:0px;list-style:none;display:inline-block;position:relative;background-image:var(--starEmpty);background-repeat:repeat;background-position:0px 0px;background-size:contain;}
.stars:before{content:"";position:absolute;left:0px;top:0px;right:0px;bottom:0px;background-image:var(--starFilled);background-repeat:repeat;z-index:1;background-size:contain;}
.stars.r00:before{width:0%;}
.stars.r0:before{width:0%;}
.stars.r05:before{width:10%;}
.stars.r10:before{width:20%;}
.stars.r15:before{width:30%;}
.stars.r20:before{width:40%;}
.stars.r25:before{width:50%;}
.stars.r30:before{width:60%;}
.stars.r35:before{width:70%;}
.stars.r40:before{width:80%;}
.stars.r45:before{width:90%;}
.stars.r50:before{width:100%;}
.stars.small{width:74px;height:13px;}
/*end icons*/
.positioning{
padding:15px 0px;
background-color:var(--sp-color);
}
.positioning.white{
background-color:#FFFFFF;
}
/****BREADCRUMBS*****/
.breadcrumb_block{padding:unset!important;}
ul.breadcrumbs {
display:flex;
flex-direction:row;
justify-content:flex-start;
list-style: none;
margin: 0;
padding:0px;
flex-wrap: wrap;
overflow-wrap: break-word;
font-size:82%;
}
ul.breadcrumbs li{
margin: 0 2px;
display: inline-flex;
align-items: center;
}
ul.breadcrumbs li:not(:last-child)::after {
display: inline-flex;
content: "/";
margin-left:5px;
color:#AAAAAA;
}
ul.breadcrumbs li a {
transition: all .3s;
text-decoration: none;
margin: 0 2px;
color:#AAAAAA;
}
@media(max-width:450px){ul.breadcrumbs li{margin: 5px 2px;}}
ul.breadcrumbs li:last-child a {text-decoration: none!important;color:#000000;}
ul.breadcrumbs li a:hover {color: var(--cl-darkGreen);}
/*****END BREADCRUMBS***********/
/*header*/
header{
font-family:var(--font-head);
background-color:var(--bg-color);
color:var(--text-color);
box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.37);
position:relative;
z-index:99;
}
header .line1{
padding:18px 0px;
}
header .line2{
background-color:#C9A3A4;
}
header a{
color:var(--text-color);
}
header .line1 .wrap{
display:flex;
align-items:center;
justify-content:space-between;
gap:15px;
}
header .wrap{}
header .action.openBlockTopMenu{
display:none;
width:27px;
height:21px;
background-size:contain;
background-image:url('data:image/svg+xml,');
}
header .logo{
display:flex;
align-items:center;
text-decoration:none;
gap:5px;
align-items:center;
}
header .logo span{
text-transform:uppercase;
}
.menu.headMenuUtils{
flex-direction:row;
align-items:center;
gap:12px;
}
.menu.headMenuUtils .icon{
display:block;
}
.menu.headMenuUtils a.profile{
display:flex;
align-items:center;
gap:4px;
text-decoration:none;
text-transform:uppercase;
}
.menu.headMenuUtils a.profile span{
line-height: 13px;
font-size: 90%;
position: relative;
}
.menu.headMenuUtils .icon.profile:before{
width:22px;
}
.menu.headMenuUtils .icon.heart:before{
width:27px;
}
.menu.headMenuUtils .icon.cart:before{
width:26px;
}
header.black{
--text-color:#FFFFFF;
--bg-color:#000000;
}
header.black .line2{
background-color:#C9A3A4;
}
header .line2{
--text-color: #FFFFFF;
}
header.black a{
color:var(--text-color);
}
header.black .menu.headMenuUtils .icon.profile:before{
background-image: url('data:image/svg+xml,')
}
header.black .menu.headMenuUtils .icon.heart:before{
background-image: url('data:image/svg+xml,');
}
header.black .menu.headMenuUtils .icon.cart:before{
background-image: url('data:image/svg+xml,')
}
header.black .action.openBlockTopMenu{
background-image:url('data:image/svg+xml,');
}
header .block.topMenu{
display:flex;
justify-content:space-between;
align-items:center;
}
header .block.topMenu .closeBlockTopMenu{
display:none;
}
header .block.topMenu a{
text-decoration:none;
position:relative;
display:block;
}
header .block.topMenu a span{
display:inline-block;
position:relative;
}
header .block.topMenu a span:before{
content:'';
display:block;
position:absolute;
left:0px;
bottom:1px;
height:1px;
background-color:var(--text-color);
width:0px;
}
header .block.topMenu .menu{
}
header .menu.baseMenu > li > a{
text-transform:uppercase;
}
header.black .menu.baseMenu > li > a span:before{
background-color:var(--text-color);
}
header .block.topMenu a:hover span:before{
width:100%;
}
header .block.topMenu .menu ul{
display:none;
padding:10px 20px;
box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.07);
background-color:var(--bg-color2);
}
header .block.topMenu .menu ul + a{
padding-right:12px;
}
header .block.topMenu .menu ul ul{
left:100%;
}
header .block.topMenu .menu ul + a:after{
position:absolute;
top:50%;
right:0px;
transform:translate(0, -50%);
content:'';
border:4px solid transparent;
border-bottom:0px;
border-top-color:var(--text-color);
}
header .block.topMenu .open > ul + a:after{
border-top:0px solid transparent;
border-bottom:4px solid var(--text-color);
}
header .block.topMenu .menu{
gap:25px;
}
header .block.topMenu .menu li{
display:flex;
flex-direction:column-reverse;
position:relative;
}
header .block.topMenu .menu > li > a{
line-height:45px;
}
header .block.topMenu .menu ul a{
color:var(--text-color);
line-height:32px;
}
_header .menu li:hover > ul,
header .block.topMenu .menu li.open > ul{
display:block;
position:absolute;
top:100%;
_left:0px;
transform:translatey(-1px);
}
header .formSearchContainer{
flex-grow:1;
position:relative;
}
header .formSearch{
margin:0px 0px 0px auto;
max-width:0%;
overflow:hidden;
}
header .openSearchBlock{
display:block;
width:26px;height:26px;
position:absolute;
right:0px;
top:50%;
transform: translate(0%, -50%);
}
header .formSearchContainer.open .formSearch{
max-width:100%;
}
header .formSearchContainer.open .openSearchBlock{
display:none;
}
.formSearch form{
position:relative;
}
.formSearch form input[type=submit]{
position:absolute;
right:10px;
background:transparent;
border:0px;
width:24px;
height:24px;
background-image: url('data:image/svg+xml,');
background-size:contain;
top:50%;
transform: translate(0%, -50%);
cursor:pointer;
}
.formSearch.floating{
position:fixed;
top:50%;
left:50%;
transform: translate(-50%, -50%);
width:90%;
background-color:#FFFFFF;
padding:20px 30px;
z-index:102;
}
.formSearch.floating form{
display:block !important;
}
@media(max-width:599px){
.formSearch form{
display:none;
}
header .action.openBlockTopMenu{
order:1;
display:block;
}
.menu.headMenuUtils a.profile,
.menu.headMenuUtils a.heart
{
display:none;
}
.menu.headMenuUtils .icon.profile span{
display:none;
}
header .block.topMenu{
position:fixed;
left:-300px;
opacity:0;
top:0px;
bottom:0px;
overflow:auto;
background-color:var(--bg-color);
width:300px;
padding-top:30px;
flex-direction:column;
justify-content:flex-start;
}
header .block.topMenu.open{
left:0px;
opacity:1;
}
header .block.topMenu .closeBlockTopMenu{
display:block;
width:25px;
height:25px;
position:absolute;
top:10px;
right:10px;
background-color:transparent;
}
header .block.topMenu .closeBlockTopMenu:before,
header .block.topMenu .closeBlockTopMenu:after{
content:'';
position:absolute;
top:12px;
display:block;
height:2px;
width:24px;
background-color:var(--text-color);
}
header .block.topMenu .closeBlockTopMenu:before{
transform:rotate(-45deg);
}
header .block.topMenu .closeBlockTopMenu:after{
transform:rotate(45deg);
}
header .block.topMenu .menu,
header .block.topMenu nav
{
width:100%;
flex-direction:column;
gap:1px;
}
header .block.topMenu .menu ul{
padding:0px;
box-shadow:none;
left:0px !important;
}
header .block.topMenu .menu li{
line-height:32px;
padding:0px 20px 0px 20px;
}
header .block.topMenu .menu li li{
padding:0px 0px 0px 7px;
}
header .block.topMenu .menu a{
line-height:32px;
color:var(--text-color);
}
header .block.topMenu .menu li ul{
background-color:transparent;
position:relative;
top:unset;
}
header .block.topMenu .menu li.open > ul{
display:block;
position:relative;
top:unset;
}
}
/*header*/
footer{
margin-top:20px;
min-height:20px;
position:relative;
z-index:3;
border-top:1px solid var(--bg-color2);
margin-top:35px;
padding-top:35px;
background-color:#F6E9E4;
}
footer .baseBottomMenu{
--text-color:#FFFFFF;
--bg-color:#000000;
position:fixed;
left:0px;
right:0px;
bottom:-68px;
opacity:0;
height:68px;
background-color:var(--bg-color);
color:var(--text-color);
display:flex;
flex-direction:row;
justify-content:space-between;
align-items:center;
font-size:78%;
}
footer .baseBottomMenu:before,
footer .baseBottomMenu:after{
content:'';
}
footer .baseBottomMenu a{
color:var(--text-color);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-decoration:none;
}
footer .baseBottomMenu .icon:before{
width:25px;
padding:0px !important;
height:26px;
}
footer .baseBottomMenu .icon > span{
font-size:80%;
width:20px;
height:20px;
}
@media(max-width:599px){
footer{
padding-bottom:70px;
}
footer .baseBottomMenu{
bottom:0px;
opacity:1;
}
}
main > .wrap{
margin-top:20px;
}
.quantityCounter{
displaY:flex;
gap:0px;
border:1px solid #000000;
align-items:center;
width:100%;
padding:0px 5px;
}
.quantityCounter a{
display:block;
text-decoration:none;
padding:0px 0px;
font-size:18px;
width:24px;
height:24px;
border-radius:50%;
flex-shrink:0;
}
.quantityCounter a:hover{
background-color:#E0E0E0;
}
.quantityCounter a:before{
width:100%;
background-size:48%;
}
.quantityCounter input{
width:inherit;
border:0px;
flex-grow:1;
text-align:center;
}
/**/
.lists.categoriesTop{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
gap:20px;
}
.lists.categoriesTop a{
border:1px solid #000000;
border-radius:7px;
display:block;
text-align:center;
padding:10px;
text-decoration:none;
}
.lists.categoriesTop a:hover{
background-color:#EFEFEF;
}
/****** PAGINATION ******/
.pagination {
list-style-type: none;
display: flex;
justify-content: center;
padding-left: unset;
flex-wrap: wrap;
align-items:center;
gap:8px;
}
.pagination li {
}
.pagination .page-item span,
.pagination li a {
color: #000000;
border:2px solid #000000;
text-align: center;
border-radius: 0px;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
text-decoration:none;
}
.pagination .page-item span.active{
background-color: #000000;
color:#FFFFFF;
}
.pagination li a:hover {
background-color: var(--sp-color);
}
.pagination .page-item.prev,
.pagination .page-item.next {
border-radius: 0px;
background:transparent;
}
.pagination .page-item.prev a,
.pagination .page-item.next a{
border-radius: 0px;
background:transparent;
}
.page-item:not(:first-child) .page-link {
margin-left: unset;
}
.page-link:focus {
color: unset;
background-color: unset;
box-shadow: unset;
}
.page-link {
padding: unset;
position:relative;
}
.page-item.prev .page-link,
.page-item.next .page-link{border:unset;}
.page-item.prev .page-link:before,
.page-item.next .page-link:before{
content:'';
display:block;
background-image:url('data:image/svg+xml,');
background-size: cover;
background-repeat: no-repeat;
height: 15px;
width: 15px;
}
.page-item.prev .page-link:before{
transform: rotate(90deg);
}
.page-item.next .page-link:before{
transform: rotate(-90deg);
}
/****** END of PAGINATION ******/
.lists.products{
display:grid;
gap:30px;
grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
}
.lists > div:empty{
margin:0px;
padding:0px;
border:0px;
opacity:0;
}
.lists > div{
position:relative;
}
.lists.products.recently{
grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
}
.lists.products.recently .promo + .base{
display:none;
}
.favorite{
display:flex;
align-items:center;
justify-content:center;
width:40px;
height:40px;
background-color:#FFFFFF;
border:1px solid #00000011;
border-radius:50%;
}
.favorite span{
display:none;
width:20px;
height:20px;
}
.favorite.favoriteActionAdd span.empty{
display:block;
}
.favorite.favoriteActionDel span.full{
display:block;
}
.favorite span:before{
width:100%;
}
.card.productlist{
display:flex;
flex-direction:column;
gap:15px;
position:relative;
}
.card.productlist.outOfStock{
filter:grayscale(1);
}
.card.productlist .badge{
position: absolute;
z-index:5;
}
.card.productlist .badge{
padding: 5px 10px;
background: #ff4757;
color: white;
font-size: 14px;
font-weight: 700;
text-align: center;
box-shadow: 0 2px 10px rgba(255, 71, 87, 0.3);
}
.card.productlist .badge::before{
content: '';
position: absolute;
bottom: -10px;
border: 10px solid #ff4757;
z-index: -1;
}
.card.productlist .badge::before {
left: -20px;
border-right-width: 10px;
border-left-color: transparent;
}
.card.productlist .favorite{
position:absolute;
top:10px;
right:10px;
z-index:1;
}
.card.productlist .image{
background-color:#f7f7f7;
}
.card.productlist .image:hover img{
transform:scale(1.1);
}
.card.productlist .title{
display:flex;
align-items:center;
height:44px;
overflow:hidden;
}
.card.productlist .title a{
text-decoration:none;
display: -webkit-box;
font-weight:bolder;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
.card.productlist .info{
display:flex;
font-weight:bolder;
align-items:center;
justify-content:space-between;
}
.card.productlist .info .prices{
display:flex;
flex-direction:row-reverse;
gap:10px;
opacity:0.8;
}
.card.productlist .info .prices .promo ~ .base{
text-decoration:line-through;
opacity:0.5;
}
.card.product{
display:flex;
flex-direction:column;
gap:30px;
}
.card.product .summary{
display:flex;
flex-direction:row;
gap:25px;
}
.card.product .summary .media{
width:57%;
padding:0px 20px;
flex-shrink:0;
}
.card.product .summary .info{
display:flex;
flex-direction:column;
gap:20px;
flex-grow:1;
}
.card.product .summary .info h1{
font-size:32px;
line-height:37px;
}
.card.product .quantityCounter{
width:25%;
}
.card.product .brand{
font-size:76%;
opacity:0.7;
}
.card.product .prices{
}
.card.product .prices{
display:flex;
flex-direction:row;
gap:10px;
opacity:0.8;
font-size:25px;
}
.card.product .prices .promo ~ .base{
text-decoration:line-through;
opacity:0.5;
}
.card.product .stockInfo{
text-transform:uppercase;
color:#008800;
}
.card.product .stockInfo .outOfStock{
color:#000000;
}
.card.product .basketAction{
display:flex;
align-items:center;
gap:10px;
}
.card.product .basketAction .favorite{
width:48px;
height:48px;
}
.card.product .basketAction .btn.bigger{
gap:7px;
flex-grow:1;
}
.card.product .basketAction .btn.bigger .icon{
width:19px;
}
.card.product .shareitem{
display:flex;
align-items:center;
gap:7px;
}
.card.product .shareitem a{
width:18px;
}
.card.product .shareitem a .icon.facebook{
display:block;
width:16px;
}
.card.product .shareitem a .icon.twitter{
display:block;
width:17px;
}
.card.product .shareitem a .icon.pinterest{
display:block;
width:16px;
}
.menu.specifications{
}
.menu.specifications li{
white-space:wrap;
}
.menu.specifications li > span:nth-child(1){
font-weight:bolder;
}
.menu.specifications li > span:nth-child(2){
--text-color:
}
.menu.morespec{
gap:10px;
}
.menu.morespec > li{
display:flex;
flex-direction:row;
align-items:center;
gap:6px;
}
.menu.morespec .icon{
width:20px;
}
@media(max-width:991px){
.card.product .summary .media{
padding:0px;
width:49%;
}
}
@media(max-width:766px){
.card.product .summary{
flex-wrap:wrap;
}
.card.product .summary .media{
width:100%;
}
.card.product .basketAction {
flex-wrap:wrap;
}
.card.product .basketAction .quantityCounter{
width:100%;
}
}
#productRatingBlock{
display:flex;
flex-direction:column;
gap:15px;
}
#productRatingBlock .summary{
display:flex;
align-items:flex-start;
justify-content:space-between;
}
#productRatingBlock .summary > .amount{
display:flex;
gap:15px;
font-size:32px;
align-items:center;
font-family:var(--font-head);
flex-wrap:wrap;
width:173px;
}
#productRatingBlock .summary > .amount .info{
font-family:var(--font-base);
width:100%;
font-size:16px;
text-align:center;
}
#productRatingBlock .summary .table{
padding-top:10px;
padding-bottom:10px;
}
#productRatingBlock .summary .table .starsTable li{
display:flex;
gap:15px;
align-items:center;
}
#productRatingBlock .summary .table .starsTable li .loadLine{
width:115px;
height:5px;
display:block;
background-color:#E5E5E5;
position:relative;
}
#productRatingBlock .summary .table .starsTable li .loadLine > span{
display:block;
position:absolute;
left:0px;
bottom:0px;
top:0px;
background-color:#000000;
}
#reviewAdd{
margin-top:20px;
display:grid;
grid-template-columns:repeat(auto-fit, minmax(45%, 1fr));
}
#reviewAdd > div.forRating,
#reviewAdd > div.forSubject,
#reviewAdd > div.forText{
grid-column-start: 1;
grid-column-end: 3;
}
@media(max-width:599px){
#reviewAdd{
display:flex;
flex-direction:column;
}
}
#reviewListBlock{
display:flex;
flex-direction:column;
gap:15px;
}
.lists.reviews{
display:flex;
flex-direction:column;
gap:15px;
}
.lists.reviews > div{
display:flex;
flex-direction:column;
gap:15px;
}
.lists.reviews .head{
display:grid;
grid-template-columns: 55px auto auto;
gap:10px;
}
.lists.reviews .head:before{
content:'';
display:block;
width:55px;
height:55px;
background-image:url('data:image/svg+xml,');
background-size:contain;
grid-row-start: 1;
grid-row-end: 3;
}
.lists.reviews .head .date{
flex-grow:1;
text-align:right;
}
.lists.reviews .author{
font-weight:bolder;
}
.lists.reviews .subject{
font-weight:bolder;
}
/**/
.authBlock{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
gap:60px;
}
#formUserAuth{
flex-direction:column;
}
#formRegister{
flex-direction:column;
}
#formUserForgot,
#formForgotNewPassword{
position:relative;
margin:0px auto;
max-width:500px;
width:100%;
flex-direction:column;
}
.authBlock .additional-info{
font-size:78%;
}
.container.cart{
display:flex;
gap:20px;
}
.container.cart .itemsin{
flex-grow:1;
display:table;
}
.container.cart .itemsin > div{
display:table-row;
}
.container.cart .itemsin > div > div{
display:table-cell;
padding:5px 10px;
vertical-align:middle;
}
.container.cart .itemsin .head{
text-transform:uppercase;
font-weight:bolder;
}
.container.cart .cartTotals{
border: 1px solid #C0C0C0;
padding:15px;
width:100%;
max-width:350px;
}
.container.cart .itemInfo{
display:grid;
grid-template-columns:70px auto;
align-items:center;
gap:10px;
}
.container.cart .itemInfo .image{
grid-row-start: 1;
grid-row-end: 4;
}
.container.cart .quantityCounter{
max-width:142px;
}
.container.cart .deleteBox .deleteItem{
position:relative;
width:16px;
height:16px;
display:block;
}
.container.cart .deleteBox .deleteItem:before,
.container.cart .deleteBox .deleteItem:after{
content:'';
height:1px;
background-color:#000000;
width:100%;
position:absolute;
top:8px;
left:0px;
}
.container.cart .deleteBox .deleteItem:before{
transform:rotate(45deg);
}
.container.cart .deleteBox .deleteItem:after{
transform:rotate(-45deg);
}
.container.cart .itemsin .subtotal{
font-size:120%;
}
.container.cart .cartTotals{
display:flex;
flex-direction:column;
gap:15px;
}
.container.cart .grandTotalInfo{
font-weight:bolder;
font-size:120%;
}
.container.cart .shippingInfo .free{
display:none;
}
.container.cart .shippingInfo.free .free{
display:block;
}
.container.cart .shippingInfo.free .total{
display:none;
}
.container.cart .cartItem{
position:relative;
}
.container.cart .cartItem .forOutOfStock{
display:none;
}
.container.cart .cartItem.outOfStock .forOutOfStock{
--text-color:#FF0000;
color:var(--text-color);
align-items:center;
justify-content:center;
display:flex;
position:absolute;
top:0px;
left:0px;
bottom:0px;
right:0px;
background-color:#FFFFFFdd;
border:1px solid #FF0000;
}
.container.cart .cartItem .forDeleted{
display:none;
}
.container.cart .cartItem.deleted .forDeleted{
align-items:center;
justify-content:center;
display:flex;
position:absolute;
top:0px;
left:0px;
bottom:0px;
right:0px;
background-color:#FFFFFFdd;
border:1px solid #AAAAAA;
}
.container.cart .countryInfo select{
display:none;
}
.container.cart .countryInfo.edit a{
display:none;
}
.container.cart .countryInfo.edit select{
display:block;
}
@media(max-width:990px){
.container.cart{
flex-direction:column;
}
.container.cart .cartTotals{
max-width:unset;
}
}
@media(max-width:767px){
.container.cart .itemsin{
}
.container.cart .itemsin > div{
border-top:1px solid #C0C0C0;
padding:20px 0px;
display:grid;
grid-template-columns:auto 70px;
align-items:center;
}
.container.cart .itemsin .head{
display:none;
}
.container.cart .itemsin .deleteBox{
position:absolute;
opacity:0;
}
.container.cart .itemsin .infoBox{
grid-column-start: 1;
grid-column-end: 3;
}
.container.cart .quantityCounter{
max-width:unset;
}
}
.icon.sandwich.profileBaseMenuControl{
display:none;
}
.menu.profileBaseMenu{
gap:0px;
width:210px;
}
.menu.profileBaseMenu li:nth-child(1){
display:none;
}
.menu.profileBaseMenu li{
border:1px solid #11111122;
border-bottom:0px;
padding:0px 7px;
}
.menu.profileBaseMenu li:last-child{
border-bottom:1px solid #11111122;
}
.menu.profileBaseMenu li a{
display:block;
text-decoration:none;
line-height:42px;
}
@media(max-width:767px){
.icon.sandwich.profileBaseMenuControl{
display:block;
}
.menu.profileBaseMenu{
--text-color : #FFFFFF;
display:flex;
position:fixed;
width:270px;
background-color:#000000;
left:-270px;
top:0px;
bottom:0px;
z-index:99;
padding:20px 20px;
overflow:hidden;
}
.menu.profileBaseMenu li:nth-child(1){
display:block;
}
.menu.profileBaseMenu.open{
left:0px;
}
}
.profileLayout{
display:flex;
gap:30px;
align-items:flex-start;
}
.profileLayout .profileMainContainer{
flex-grow:1;
}
.menu.profileInfoFields{
gap:10px;
}
.menu.profileInfoFields li{
display:flex;
justify-content:flex-start;
gap:7px;
}
.menu.profileInfoFields li > span:nth-child(1){
font-weight:bolder;
}
.menu.profileInfoFields li > span:nth-child(1):after{
content:':';
}
.profileLayout form{
max-width:510px;
position:relative;
margin:0px auto;
}
.home.bricks{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(308px, 1fr));
gap:20px;
}
.home.bricks > div{
background-image:url('../images/noimage.jpg');
background-position:center;
background-size:cover;
min-height:300px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:10px;
padding:20px;
}
.home.bricks > div > div{
color:#FFFFFF;
font-size:120%;
}
.footerBottomLine{}
.copyrightLine{
text-align:center;
font-size:80%;
}
.footerBlocks{
display:grid;
grid-template-columns: 32% 32% auto;
gap:25px;
}
.menu.infoFooter{
display:grid;
grid-template-columns: 50% 50%;
gap:15px;
}
@media(max-width:1100px){
.footerBlocks{
display:flex;
max-width:400px;
width:100%;
flex-direction:column;
position:relative;
margin:0px auto;
}
}
.catalogHead{
display:flex;
align-items:center;
gap:20px;
padding-bottom:15px;
border-bottom:1px solid #777;
margin-bottom:15px;
}
.catalogHead select{
width:auto;
height:32px;
background-color:transparent;
border:0px;
}
.catalogHead .pagerInfo{
color:#777;
font-size:80%;
}
.catalogHead .selectSorting{
display:flex;
gap:5px;
align-items:center;
}
.catalogHead .catalogFiltersToggle{
position:relative;
padding-right:13px;
}
.catalogHead .catalogFiltersToggle:before,
.catalogHead .catalogFiltersToggle:after{
content:'';
display:block;
height:1px;
background-color:#000000;
width:6px;
position:absolute;
right:0px;
top:10px;
}
.catalogHead .catalogFiltersToggle:before{
transform:rotate(-45deg);
}
.catalogHead .catalogFiltersToggle:after{
right:4px;
transform:rotate(45deg);
}
.catalogHead .catalogFiltersToggle.open:before{
transform:rotate(45deg);
}
.catalogHead .catalogFiltersToggle.open:after{
transform:rotate(-45deg);
}
.catalogFilters{
overflow:hidden;
height:auto;
max-height:0px;
}
.catalogFilters.open{
max-height:400px;
}
@media(max-width:590px){
.catalogHead{
flex-wrap:wrap;
gap:2px;
}
.catalogHead .pagerInfo{
order:1;
width:100%;
}
}
.filtersBlockSelected{
display:flex;
flex-direction:column;
gap:15px;
padding-bottom:20px;
}
.filtersBlockSelected .subCategoryList{
display:flex;
flex-wrap:wrap;
gap:10px;
}
.filtersBlockSelected .subCategoryList a{
display:block;
border:1px solid #000000;
text-decoration:none;
padding:0px 10px;
line-height:140%;
}
.filtersBlockSelected .subCategoryList a:hover{
background-color:#E0E0E0;
}
.filtersBlockSelected .priceSelector{
display:grid;
grid-template-columns:1fr 1fr;
gap:15px;
}
.container.checkout{
display:flex;
gap:20px;
}
.container.checkout .addressBlock{
flex-grow:1;
min-width:358px;
}
.container.checkout .summaryBLock{
border: 1px solid #C0C0C0;
padding:15px;
width:100%;
max-width:500px;
display:flex;
flex-direction:column;
gap:15px;
}
.container.checkout .summaryBLock ul li{
white-space:wrap;
}
.container.checkout .summaryBLock h4{
margin:0px;
}
.menu.checkoutitems{
gap:5px;
font-size:90%;
}
.menu.checkoutitems li{
--text-color:#444444;
display:flex;
flex-direction:row;
gap:7px;
border-bottom:1px solid #EFEFEF;
}
.menu.checkoutitems li:last-child{
border-bottom:0px;
}
.menu.checkoutitems li span{
color:var(--text-color);
}
.container.checkout .summaryLine{
display:flex;
justify-content:space-between;
}
.summaryLine > span:nth-child(1){
font-weight:bolder;
}
.summaryLine.grand{
font-size:130%;
font-weight:bolder;
}
.summaryLine.subtotal{
font-weight:bolder;
}
.summaryLine.shipping{
align-items:flex-start;
}
@media(max-width:559px){
.summaryLine.shipping{
gap:7px;
flex-direction:column;
align-items:unset;
}
}
#placeOrder{
flex-wrap:nowrap;
align-items:flex-start;
}
@media(max-width:799px){
#placeOrder{
flex-wrap:wrap;
}
}
#placeOrder .btn{
display:block;
position:relative;
width:100%;
max-width:350px;
margin:0px auto;
}
.menu.shippingOptions{
gap:10px;
}
.menu.shippingOptions:empty:before{
content:'Loading...';
color:#C0C0C0;
}
.menu.shippingOptions li{
display:flex;
gap:20px;
align-items:center;
border:1px solid #C0C0C0;
padding:0px 10px;
cursor:pointer;
min-width:200px;
opacity:0.7;
}
.menu.shippingOptions li:hover{
background-color:#F4F4F4;
}
.menu.shippingOptions li.selected{
border:1px solid #000000;
opacity:1;
}
.menu.shippingOptions li .deliveryInfo{
display:flex;
flex-direction:column;
flex-grow:1;
}
.menu.shippingOptions li .deliveryInfo .carrier{
font-weight:bolder;
}
.menu.shippingOptions li .deliveryInfo .method{
font-size:78%;
}
.menu.shippingOptions li .prices{
white-space:nowrap;
}
.addressBlock .inputs{
display:grid;
grid-template-columns:auto auto;
gap:10px;
}
.addressBlock .inputs > div:not(.half){
grid-column-start: 1;
grid-column-end: 3;
}
.addressBlock .inputsBox{
display:none;
}
.addressBlock .menu.myaddresses:empty ~ .inputsBox,
.addressBlock.mode-edit .inputsBox{
display:block;
}
.addressBlock.mode-edit .menu.myaddresses{
display:none;
}
.addressBlock .menu.myaddresses:empty ~ #addNewAddress,
.addressBlock.mode-edit #addNewAddress{
display:none;
}
.addressBlock #cancelNewAddress{
display:none;
}
.addressBlock .menu.myaddresses:empty ~ #cancelNewAddress{
display:none !important;
}
.addressBlock.mode-edit #cancelNewAddress{
display:block;
}
@media(max-width:559px){
.addressBlock .inputs{
display:flex;
flex-direction:column;
}
}
.menu.myaddresses{
display:flex;
gap:20px;
}
.menu.myaddresses li{
padding:10px 20px;
border:1px solid #C0C0C0;
display:flex;
flex-direction:column;
}
.menu.myaddresses li .head{
display:flex;
justify-content:space-between;
border-bottom:1px solid #E5E5E5;
padding-bottom:2px;
align-items:center;
}
.menu.myaddresses li .head .name{
font-weight:bolder;
}
.menu.myaddresses li.selected .useThis{
display:none !important;
}
.menu.myaddresses .addressline1{
display:flex;
}
.menu.myaddresses .addressline1 .address2:empty{
display:none;
}
.menu.myaddresses .addressline1 .address2:before{
content:', ';
}
.menu.myaddresses .location{
display:flex;
}
.menu.myaddresses .location > span:empty{
display:none;
}
.menu.myaddresses .location > span:nth-child(n+2):before{
content:', ';
}
.menu.myaddresses li.selected{
border:1px solid #000000;
}
/**/
.lists.myOrders{
display:flex;
flex-direction:column;
gap:15px;
}
.lists.myOrders:empty:before{
content:'No orders';
}
.lists.myOrders > div{
--blockPadding: 5px 15px;
border:1px solid #11111122;
}
.lists.myOrders > div > div{
padding:var(--blockPadding);
}
.lists.myOrders > div .head{
display:flex;
align-items:center;
gap:10px;
border-bottom:1px solid #11111122;
background-color:#F8F8F8;
}
.lists.myOrders > div .footer{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
border-top:1px solid #11111122;
background-color:#F8F8F8;
flex-wrap:wrap;
}
.lists.myOrders > div .footer .address{
display:flex;
align-items:center;
gap:5px;
flex-wrap:wrap;
font-size:14px;
}
.lists.myOrders > div .footer .address .icon:before{
width:15px;
}
.lists.myOrders > div .content{}
.myOrders .lists.orderItems{
display:flex;
flex-wrap:wrap;
gap:10px;
}
.myOrders .lists.orderItems > div{
position:relative;
bordeR:1px solid #C0C0C0;
}
.myOrders .lists.orderItems > div .image{}
.myOrders .lists.orderItems > div .count{
display:flex;
align-items:center;
justify-content:center;
position:absolute;
left:auto;
right:0px;
top:auto;
bottom:0px;
padding:5px 10px;
background-color:#000000CC;
font-size:24px;
color:#FFFFFF;
font-weight:bolder;
border-radius:10px 0px 0px 0px;
}
.myOrders .lists.orderItems > div .count > span{
display:flex;
align-items:flex-end;
line-height:24px;
}
.myOrders .lists.orderItems > div .count > span > span{
line-height:20px;
font-size:16px;
}
.myOrders .lists.orderItems > div:hover .count{
opacity:0.1;
}
@media(max-width:649px){
.lists.myOrders > div .head{
display:flex;
flex-direction:column;
}
.lists.myOrders > div .head .delimiter{
display:none;
}
}
.profileOrderInfo{
display:flex;
flex-direction:column;
gap:15px;
}
.profileOrderInfo > .block{
border:1px solid #11111122;
}
.profileOrderInfo > .block > .head{
display:flex;
justify-content:space-between;
background-color:#F8F8F8;
padding:5px 10px;
}
.profileOrderInfo > .block > .head .title{
font-weight:bolder;
}
.profileOrderInfo > .block .content{
padding:5px 10px;
}
.profileOrderInfo .lists.orderItems{
display:table;
width:100%;
}
.profileOrderInfo .lists.orderItems > div{
display:table-row;
}
.profileOrderInfo .lists.orderItems > div > div{
display:table-cell;
padding:2px 4px;
border-bottom:1px solid #11111133;
}
.profileOrderInfo .lists.orderItems > div:last-child > div{
border-bottom:1px solid transparent;
}
.profileOrderInfo .lists.orderItems > .head{
background-color:#000000;
color:#FFFFFF;
}
.profileOrderInfo .lists.orderItems .cnt{
width:20px;
}
.orderTimline{
display:flex;
flex-direction:row;
justify-content:space-between;
}
.BrandsEnumBox{
display:flex;
flex-direction:column;
gap:20px;
}
.BrandsEnumBox .head{
font-size:120%;
font-weight:bolder;
margin-bottom:-15px;
border-bottom:1px solid #00000022;
}
.lists.BrandsEnum{
display:grid;
grid-template-columns: repeat( auto-fit, minmax(310px, 1fr) );
}
.lists.BrandsEnum:empty{
display:none;
}
.lists.myaddresss{
display:grid;
grid-template-columns: repeat( auto-fit, minmax(280px, 1fr) );
gap:20px;
}
.lists.myaddresss > div{
background-color: #FFFFFF;
border-radius: 5px;
padding: 5px 0px;
/*margin: 10px 0px;*/
border: 2px solid #00000022;
opacity: 0.8;
max-width:570px;
}
.lists.myaddresss > div > div > div{
padding: 3px 20px;
}
.lists.myaddresss > div .head{
border-bottom: 1px solid #00000022;
}
.lists.myaddresss > div .actions{
justify-content:flex-end;
display:flex;
gap:10px;
}
.lists.myaddresss > div.isDefault .action.makeDefault{
display:none;
}