:root {
--green: rgba(87, 168, 57, 1);
--dark-green: #006c32;
--blue: #00aeef;
--dark-blue: #024f6b;
--orange: rgba(224, 100, 0, 1);
--yellow: rgba(250, 210, 0, 1);
--grey: rgba(150, 150, 154, 1);
--light-grey: rgba(216, 217, 219, 1);
--black: rgba(32, 33, 36, 1);
--white: #fff;
--grid:24px;
}
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
padding: 0
}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
margin: 0;
padding: 0;
border: 0;
outline: none;
list-style: none;
font-family: 'Montserrat', sans-serif;
}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {
display: block;
}
audio,canvas,progress,video {
display: inline-block;
vertical-align: baseline;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden],template {
display: none;
}
a {
background-color: transparent;
}
a:active,a:hover {
outline: 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,strong {
font-weight: bold;
}
dfn {
font-style: italic;
}
mark {
background: #ff0;
color: var(--black);
}
small {
font-size: 80%;
}
sub,sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 1em 40px;
}
hr {
box-sizing: content-box;
height: 0;
}
pre {
overflow: auto;
}
code,kbd,pre,samp {
font-family: monospace, monospace;
font-size: 1em;
}
button,input,optgroup,select,textarea {
color: inherit;
font: inherit;
margin: 0;
}
button {
overflow: visible;
cursor: pointer;
}
button,select {
text-transform: none;
}
button,html input[type="button"],input[type="reset"],input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
button[disabled],html input[disabled] {
cursor: default;
opacity: .5;
}
button::-moz-focus-inner,input::-moz-focus-inner {
border: 0;
padding: 0;
}
input {
line-height: normal;
}
input[type="checkbox"],input[type="radio"] {
box-sizing: border-box;
padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
input[type="search"] {
-webkit-appearance: textfield;
box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
*:focus {
outline: none;
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
border: 0;
padding: 0;
}
textarea {
overflow: auto;
}
optgroup {
font-weight: bold;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td,th {
padding: 0;
}
body {
background-color: var(--white);
}
h1 {
font-size: 32px;
color: var(--black);
font-weight: 700;
margin-top: 15px;
margin-bottom: 26px;
}
.uk-grid {
margin-left: calc( var(--grid) - var(--grid)*2 );
}
.uk-grid>* {
padding-left: var(--grid);
}
.item-box>.uk-grid-margin {
margin-top: var(--grid);
}
.uk-grid-collapse {
margin-left: 0;
}
.uk-grid-collapse>* {
padding-left: 0;
}
.satisfaction-box {
background:var(--orange) bottom 12px right 12px no-repeat url('data:image/svg+xml;utf8,');
background-size: 32px 32px;
color: var(--white);
text-decoration: none;
font-size: 14px;
display: block;
padding: 16px 48px 16px 16px;
transition: .1s background-color;
border-radius: 5px;
}
.satisfaction-box:hover{
background-color: var(--green);
color: var(--white);
text-decoration: none;
transition: .1s background-color;
}
.bt {
color: var(--white);
font-size: 16px;
font-weight: 600;
padding: 15px 25px;
border: none;
border-radius: 10px;
cursor: pointer;
}
.bt:hover {
border-color: var(--green);
}
.bt-g {
background-color: var(--green);
transition: background-color 0.3s
}
.bt-b {
background-color: var(--yellow);
color: var(--black);
transition: background-color 0.3s
}
.bt-r {
background-color: var(--orange);
transition: background-color 0.3s
}
.bt-w {
padding: 10px 20px;
background-color: transparent;
border: 1px solid var(--white);
border-radius: 5px;
transition: background-color 0.3s
}
.bt-w:hover {
background-color: var(--white);
color: var(--orange);
text-decoration: none;
}
.it-bt{
background-size: 44px 44px;
background-color: var(--white);
background-repeat: no-repeat;
background-position: 12px 50%;
border: 1px solid #E4E5E6;
border-radius: 15px;
text-align: left;
color: #000;
font-weight: 600;
padding: 20px 20px 20px 70px;
font-size: 14px;
transition:border-color .3s
}
.it-bt:hover{
border-color: #FAD200;
transition: .3s
}
.open-qorder{
background-color: #E0F2D9;
color: var(--green);
}
.go-addr{
display: block;
width: 100%;
background-color: var(--white);
color: var(--black);
border: 1px solid var(--yellow);
text-align: center;
}
.go-addr:hover{
color: currentcolor;
text-decoration: none;
}
.it-bt-design{
background-image: url('data:image/svg+xml;utf8,');
}
.it-bt-sale{
background-image: url('data:image/svg+xml;utf8,');
}
.it-bt-video{
background-image: url('data:image/svg+xml;utf8,');
}
.it-bt-review{
background-image: url('data:image/svg+xml;utf8,');
}
.it-h-delivery{
background: no-repeat 0 50% url('data:image/svg+xml;utf8,');
background-size: 36px 36px;
display: block;
font-size: 18px;
font-weight: 600;
padding:10px 0 10px 50px;
}
.it-h-wh{
background: no-repeat 0 50% url('data:image/svg+xml;utf8,');
background-size: 36px 36px;
display: block;
font-size: 18px;
font-weight: 600;
padding:10px 0 10px 50px;
}
.it-h-delivery+p,.it-h-wh+p{
font-size: 14px;
}
a.bt-r {
display: block;
text-align: center;
margin-top: auto;
}
a.bt-r:hover {
color: var(--white)
}
.sm {}
.sm h3 {
color: var(--green);
font-size: 21px;
font-weight: 700;
margin-bottom: 12px;
}
.sm p {
color: #555;
font-size: 16px;
font-weight: 400;
margin-bottom: 35px;
}
.sm .name {
display: none;
}
.sm .in {
display: block;
border: 1px solid #999;
width: 100%;
padding: 0 10px;
height: 40px;
box-sizing: border-box;
margin-bottom: 20px;
background-color: var(--white);
}
.errlabel+.in {
border: 1px solid var(--orange);
}
.sm textarea.in {
height: 120px;
}
.sm .bt {
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
padding: 20px;
background-color: var(--green);
color: var(--white);
border: none;
border-radius: 10px;
width: 100%;
box-sizing: border-box;
}
.label input[type="file"] {
position: absolute;
top: -1000px;
}
.label {
cursor: pointer;
border: 1px solid #ccc;
background-color: #eee;
display: block;
height: 40px;
line-height: 40px;
text-align: center;
margin-bottom: 20px;
}
.label:hover {
background-color: ##9fa1a0;
}
#reserve h3 {
color: var(--orange);
}
#reserve .sm p {
text-align: left;
}
.field {
position: relative;
width: 100%
}
.sm .is-invalid {
border: 1px solid var(--orange);
}
.sm .in:invalid {
border: 1px solid var(--orange);
}
.in+i {
display: none;
}
.invalid-feedback,.sm .in:invalid+i {
display: block;
position: absolute;
top: -8px;
right: -8px;
background-color: var(--orange);
font-weight: bold;
height: 20px;
width: 20px;
line-height: 20px;
text-align: center;
color: var(--white);
border-radius: 50%;
font-style: normal;
}
.sm .in:valid:focus {
border: 1px solid var(--green);
}
header {
position: relative;
height: 141px;
margin: 10px;
background-color: #F2F2F3;
border-radius: 5px;
}
header>* {
position: absolute;
}
.smemu {
height: 44px;
width: 100%;
background-color: var(--yellow);
font-size: 12px;
text-transform: uppercase;
font-weight: 500;
display: flex;
align-items: center;
border-radius: 5px;
border-bottom: 5px solid var(--white);
}
.m1 {
margin-left: 10px;
}
.m1 li {
display: inline-block;
position: relative;
}
.m1 ul {
display: none;
position: absolute;
background-color: rgba(250, 225, 92, 1);
z-index: 10;
left: -10px;
padding: 10px;
border-radius: 0 0 5px 5px
}
.m1>li>a {
color: var(--black);
display: block;
height: 44px;
line-height: 44px;
padding: 0 5px;
font-weight: 700;
}
.m1 ul li {
display: block;
}
.m1 ul a {
color: var(--black);
display: block;
padding: 5px;
white-space: nowrap;
}
.m1 li:hover ul {
display: block;
}
.sotial {
right: 10px;
height: 44px;
display: flex;
align-items: center;
}
.sotial a {
color: var(--black);
background-color: rgba(255, 255, 255, .5);
padding: 5px 10px;
border-radius: 8px;
display: flex;
margin-left: 5px;
}
.sotial i {
height: 24px;
width: 24px;
}
.okico i {
background: url('data:image/svg+xml;utf8,');
background-size: 24px 24px;
}
.maxico i {
background: url('data:image/svg+xml;utf8,');
background-size: 24px 24px;
}
.vkico i {
background: url('data:image/svg+xml;utf8,');
background-size: 24px 24px;
}
.vbico i {
background: url('data:image/svg+xml;utf8,');
background-size: 24px 24px;
}
.whico i {
background: url('data:image/svg+xml;utf8,');
background-size: 24px 24px;
}
.ytico i {
background: url('data:image/svg+xml;utf8,');
background-size: 24px 24px;
}
.tlico i {
background: url('data:image/svg+xml;utf8,');
background-size: 24px 24px;
}
.ydico i {
background: url('data:image/svg+xml;utf8,');
background-size: 24px 24px;
}
.logo {
left: 10px;
top: 64px;
display: block;
width: 190px;
height: 67px;
background: no-repeat 0 0 url('data:image/svg+xml;utf8,');
background-size: 190px 67px;
}
.slogan {
font-size: 13px;
left: 240px;
top: 62px;
padding: 11px 25px;
line-height: 20px;
font-weight: 800;
color: var(--black);
border-left: 2px solid var(--grey);
}
.phone {
top: 66px;
right: 80px;
font-weight: 500;
font-size: 20px;
color: var(--black);
}
.phone i {
color: var(--orange);
margin-right: 5px;
}
.open-phone-box{
display: none;
top: 14px;
right: 106px;
font-size: 14px;
height: 32px;
border-radius: 5px;
padding: 0 12px;
background-color: var(--light-grey);
color: var(--black);
border: none;
align-items: center;justify-content: center;
}
.open-phone-box i {
margin-right: 9px;
}
.call-me {
top: 95px;
right: 82px;
font-size: 12px;
height: 26px;
border-radius: 5px;
padding: 0 33px;
background-color: var(--orange);
color: var(--white);
border: none;
}
.call-me:hover {
background-color: var(--green);
}
.phone-helper {
right: 290px;
}
.label-helper{
top: 95px;
right: 290px;
}
.call-box{
display: flex; flex-direction: column; align-items: center;justify-content: center; gap:16px;
text-align: center;
}
.open-menu {
position: absolute;
width: 32px;
height: 32px;
top: 14px;
right: 14px;
background-color: var(--orange);
padding: 0;
margin: 0;
border: none;
display: none;
border-radius: 5px;
}
.open-menu b {
margin-left: 7px;
display: block;
height: 2px;
width: 18px;
background-color: var(--white);
}
.open-menu b:first-child {
transform: translateY(-3px);
z-index: 1;
}
.open-menu b:nth-child(2) {}
.open-menu b:last-child {
transform: translateY(3px);
z-index: 1;
}
.go-basket {
position: absolute;
top: 70px;
right: 10px;
height: 50px;
width: 50px;
border-radius: 10px;
background: var(--green) no-repeat 50% url('data:image/svg+xml;utf8,');
background-size: 30px 30px;
}
.go-basket p {
position: absolute;
height: 26px;
min-width: 10px;
text-align: center;
line-height: 26px;
padding: 0 8px;
font-weight: bold;
border-radius: 20px;
right: -10px;
top: -10px;
background-color: var(--orange);
color: var(--white);
}
main {
position: relative;
box-sizing: border-box;
margin: 0 10px 10px 10px;
}
main>h1:first-child{
margin-top: 0;
}
.cnv-filter{
display: grid;
grid-template-columns: 240px 1fr;
gap: 24px;
align-items: start;
.items-cnv h1{
margin-top: 0;
}
}
/* =========================== ФИЛЬТР =========================== */
.filter{
border: 1px solid var(--light-grey);
background-color: var(--white);
padding: 9px;
border-radius: 5px;
font-size: 14px;
label{
cursor: pointer;
}
label:not(.checkbox,.radio){
color: var(--orange);
font-size: 12px;
font-weight: 600;
}
hr{
margin-left: -9px;
margin-right: -9px;
margin-block: 9px;
border-top: 1px solid var(--light-grey);
}
h5{
font-size: 18px;
font-weight: 600;
color: var(--black);
}
h6{
color: var(--orange);
font-size: 12px;
font-weight: 600;
}
.bt{
width: 100%;
}
.bt-main{
box-sizing: border-box;
text-align: center;
background-color: var(--yellow);
color: var(--black);
display: block;
}
.bt-white{
margin-top: 9px;
box-sizing: border-box;
display: flex; align-items: center;justify-content: center;
gap: 9px;
font-weight: 400;
color: var(--grey);
background-color: var(--white);
line-height: 1;
&::before{
content: url('data:image/svg+xml;utf8,');
}
}
}
.select {
appearance:none;
width: 100%;
box-sizing: border-box;
padding-right: 20px;
border: none;
font-size: 14px;
color: var(--black);
background: no-repeat 100% 50% url('data:image/svg+xml;utf8,');
}
.checkbox{
display: block;
font-size: 14px;
color: var(--black);
margin-top: 3px;
display: flex; align-items: center;gap: 3px;
input{
appearance: none;
width: 16px;height: 16px;
border: 1px solid var(--light-grey);
border-radius: 3px;
background: no-repeat #fff 50% url('data:image/svg+xml;utf8,');
transition: background-color .3s;
}
input:checked {
border: 1px solid var(--orange);
background-color: var(--orange);
transition: background-color .3s;
}
}
.radio{
display: block;
font-size: 14px;
color: var(--black);
margin-top: 3px;
display: flex; align-items: center;gap: 3px;
input{
appearance: none;
width: 16px;height: 16px;
border: 1px solid var(--light-grey);
border-radius: 16px;
background-color: #fff;
transition: background-color .3s;
}
input:checked {
border: 1px solid var(--orange);
background-color: var(--orange);
transition: background-color .3s;
display: flex; align-items: center;justify-content: center;
&::before{
display: block;
content: '';
height: 6px;width: 6px;
background-color: #fff;
border-radius: 10px;
}
}
}
.imagebox{
display: flex;
flex-wrap: wrap;
gap: 3px;
margin-top: 6px;
input{
display: none;
}
img{
border-radius: 5px;
height: 29px;width: 28.8px;
}
input:checked+img{
border: 2px solid var(--orange);
}
}
.range-slider {
margin-bottom: 20px;
width: 100%;
.number-group {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
>div{
border: 1px solid var(--light-grey);
border-radius: 5px;
padding: 3px;
}
}
.number-input {
width: 100%;
background-color: transparent;
border: none;
outline: 0;
font-size: 14px;
color: var(--black);
}
.range-group {
position: relative;
flex: 0 0 100%;
height: 14px;
margin-bottom: 16px;
}
.range-input {
position: absolute;
left: 0;
bottom: 0;
margin-bottom: 0;
-webkit-appearance: none;
width: 100%;
border-bottom: 0;
background-color: transparent;
height: 0;
}
.range-input:focus {
outline: 0;
}
.range-input::-webkit-slider-runnable-track {
width: 100%;
height: 4px;
cursor: pointer;
animation: 0.2s;
background: var(--yellow);
border-radius: 1px;
box-shadow: none;
border: 0;
}
.range-input::-webkit-slider-thumb {
z-index: 2;
position: relative;
height: 18px;
width: 18px;
border-radius: 50%;
background: var(--yellow);
cursor: pointer;
-webkit-appearance: none;
margin-top: -7px;
}
.range-input::-moz-range-track {
width: 100%;
height: 4px;
cursor: pointer;
animation: 0.2s;
background: var(--yellow);
border-radius: 1px;
box-shadow: none;
border: 0;
}
.range-input + .range-input::-moz-range-track {
height: 0;
}
.range-input::-moz-range-thumb {
z-index: 2;
position: relative;
border: 1px solid var(--light-grey);
height: 18px;
width: 18px;
border-radius: 50%;
background: var(--yellow);
cursor: pointer;
}
.range-input::-ms-track {
width: 100%;
height: 4px;
cursor: pointer;
animation: 0.2s;
background: transparent;
border-color: transparent;
color: transparent;
}
.range-input::-ms-fill-lower, .range-input::-ms-fill-upper {
background: var(--yellow);
border-radius: 1px;
box-shadow: none;
border: 0;
}
.range-input::-ms-thumb {
z-index: 2;
position: relative;
height: 18px;
width: 18px;
border-radius: 50%;
background: var(--yellow);
cursor: pointer;
}
}
/* =========================== /ФИЛЬТР =========================== */
.item-rating{
color: var(--orange);
display: flex; align-items: center;
}
.item-rating .rating{
display: inline-block;
width: 15px;
}
.dsk-menu{
margin: 10px;
display: flex;
gap: 24px;
position: relative;
height: 40px;
}
.open-cat-menu{
background-color: var(--orange);
display: flex; align-items: center;
font-size: 14px;
font-weight: 600;
gap: 9px;
flex-shrink: 1;
height: 40px;
border: none;
border-radius: 5px;
color: var(--white);
padding-inline: 12px;
&::before{
height: 24px;width: 24px;
content: url('data:image/svg+xml;utf8,');
}
&:hover+.cat-menu{
display: block;
}
}
.cat-menu{
background-color: var(--orange);
border-radius: 5px;
padding: 14px 20px;
position: absolute;
top: 35px;
z-index: 10;
display: none;
a{
padding-block: 6px;
display: flex; align-items: center;
gap: 6px;
color: var(--white);
&::before{
width: 24px;
margin-right: 6px;
filter: brightness(0) saturate(100%) invert(99%) sepia(99%) saturate(2%) hue-rotate(186deg) brightness(104%) contrast(100%);
}
}
&:hover{
display: block;
}
}
.top-menu {
display: flex;
align-items: center;
gap: 24px;
overflow-x: auto;
cursor: grab;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
scrollbar-width: none;
-ms-overflow-style: none;
font-size: 14px;
height: 40px;
}
.top-menu::-webkit-scrollbar {
display: none;
}
.top-menu.active {
cursor: grabbing;
cursor: -webkit-grabbing;
}
.top-menu .top-class {
font-weight: 600;
}
.top-menu a {
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
color: var(--black);
}
.m_action a::before{
content: url('data:image/svg+xml;utf8,');
}
.m_sale a::before{
content: url('data:image/svg+xml;utf8,');
}
.m_best a::before{
content: url('data:image/svg+xml;utf8,');
}
.m_online a::before{
content: url('data:image/svg+xml;utf8,');
}
.m_sofa a::before{
content: url('data:image/svg+xml;utf8,');
}
.m_chair a::before{
content: url('data:image/svg+xml;utf8,');
}
.m_kitchen a::before{
content: url('data:image/svg+xml;utf8,');
}
.m_custom_kitchen a::before{
content: url('data:image/svg+xml;utf8,');
}
.m_table a::before{
content: url('data:image/svg+xml;utf8,');
}
.m_chairs a::before{
content: url('data:image/svg+xml;utf8,');
}
.m_cupboard a::before{
content: url('data:image/svg+xml;utf8,');
}
.m_wardrobe a::before{
content: url('data:image/svg+xml;utf8,');
}
.m_hall a::before{
content: url('data:image/svg+xml;utf8,');
}
.m_living a::before{
content: url('data:image/svg+xml;utf8,');
}
.m_bed a::before{
content: url('data:image/svg+xml;utf8,');
}
.m_children a::before{
content: url('data:image/svg+xml;utf8,');
}
.m_small a::before{
content: url('data:image/svg+xml;utf8,');
}
.m_mattress a::before{
content: url('data:image/svg+xml;utf8,');
}
.m_tech a::before{
content: url('data:image/svg+xml;utf8,');
}
.actsl video {
display: block;
width: 100%;
}
.actsl .uk-slider-items li {
width: 100%;
border: 1px solid var(--light-grey);
}
.actsl img {
width: 100%;
height: auto;
}
.actsl .info {
position: absolute;
right: 10px;
top: 10px;
font-size: 12px;
padding: 2px 5px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 3px;
}
.actsl:has(.uk-slider-items:empty) {
display: none;
}
.prev,.next {
box-sizing: border-box;
padding: 13px 18px;
position: absolute;
top: 50%;
height: 50px;
width: 50px;
background-color: var(--white);
border-radius: 50px;
left: -17px;
margin-top: -30px;
color: var(--orange);
}
.next {
left: auto;
right: -17px;
}
.projects .prev,.projects .next {
left: -35px;
margin-top: 12px;
}
.projects .next {
left: auto;
right: -35px;
}
.pref-box {
margin: 24px 0;
font-size: 20px;
line-height: 24px;
font-weight: 500;
color: var(--black);
}
.pref-box span {
color: var(--orange);
}
.pref-box li {
border-radius: 5px;
}
.pref-box li img {
border-radius: 5px;
width: 100%;
height: auto;
aspect-ratio: 640 / 368;
}
.pref-box p {
display: block;
padding: 24px 24px 24px 48px;
text-shadow: 0 0 1px #e6e6e2
}
.pref-box .prev,.pref-box .next {
top: auto;
bottom: 20%;
}
.sale-h {
display: flex;
align-items: center;
justify-content: space-between;
height: 90px;
}
.uk-slider+.sale-h {
margin-top: 20px;
}
.sale-h h3 {
font-size: 29px;
color: var(--black);
font-weight: 700;
}
.sale-h h3 a {
color: var(--orange);
}
.sale-h a {
color: var(--black);
}
.sale-h i {
transform: rotate(180deg);
color: var(--orange);
margin-left: 12px;
}
.item-box {
margin-top: 20px !important;
}
.item-box a {
position: relative;
display: block;
color: #000;
text-decoration: none;
}
.item-box .card {
border: 1px solid var(--light-grey);
background-color: var(--white);
border-radius: 5px;
position: relative;
padding-bottom: 46px;
}
.uk-slider .item-box a {
border-radius: 5px 5px;
height: 100%;
width: 100%;
}
.item-box .card:hover {
text-decoration: none;
border: 1px solid var(--light-grey);
}
.item-box i {
position: absolute;
top: 50%;
left: 50%;
margin-top: -41px;
margin-left: -41px;
color: var(--yellow);
}
.item-box .card:hover i {
filter: drop-shadow(0 0 2px var(--white));
opacity: .3;
transition: opacity .5s
}
.item-box img {
mix-blend-mode: multiply;
border-bottom: 1px solid #e7e7e7;
}
.item-box .sale-last a {
background-color: var(--yellow);
background-size: 90% 70%;
background-repeat: no-repeat;
background-position: 50%;
transition: background .3s
}
.item-box .sale-last a:hover {
background-position: 0 50%;
transition: background .3s
}
.kitchen_projects a {
background: no-repeat 50% url(/f/kitchen_projects.webp);
background-size: 100% auto;
}
.big_sale a {
background: no-repeat 50% url(/f/big_sale.webp);
background-size: 100% auto;
}
.dojyami_sing {
height: 30px;
width: 30px;
z-index: 10;
position: absolute;
right: 12px;
transform: translateY(-50%);
border: none;
border-radius: 50%;
background: #000 50% no-repeat url('data:image/svg+xml;utf8,');
background-size: 20px 20px;
}
.item-pix {
position: relative;
aspect-ratio: 4/3;
background-size: cover
}
.item-pix img {
aspect-ratio: 4/3;
object-fit: cover;
border-radius: 4px 4px 0 0;
}
.item-pix:before {
content: '';
position: absolute;
background-color: rgba(0, 0, 0, .05);
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.item-txt {
padding: 12px;
}
/* .item-txt h5{font-size: 12px;color: var(--black); white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} */
.item-txt h5 {
font-size: 12px;
color: var(--black);
}
.hover-slider-images-toggler {
z-index: 1;
}
.hover-slider-indicator {
position: absolute;
left: 11px;
bottom: 11px;
display: flex;
}
.hover-slider-indicator-dot {
background-color: var(--grey);
opacity: .75;
border-radius: 50%;
height: 3px;
width: 3px;
margin-left: 3px;
margin-right: 3px;
}
.hover-slider-indicator-dot.active {
height: 5px;
width: 5px;
background-color: var(--black);
opacity: 1;
}
.old_price {
display: flex; align-items: center;
gap: 6px;
margin-top: 6px;
}
.old_price .sale {
background-color: var(--yellow);
color: #000;
font-size: 12px;
padding: 3px 6px;
border-radius: 6px;
font-weight: 600;
}
.p-old {
font-size: 14px;
color: var(--black);
text-decoration: line-through;
}
.p-new {
font-size: 20px;
color: var(--black);
font-weight: 700;
margin: 6px 12px 0 0;
}
.uk-flex .p-new {
flex-shrink: 0;
}
.p-profit {
font-size: 24px;
color: var(--orange);
font-weight: 700;
}
.p-profit u::after {
position: absolute;
content: "";
border-top: 2px solid var(--black);
left: -1px;
right: 5px;
bottom: 9px;
}
.p-old+.p-new {
margin-top: 0;
}
.cashback {
font-size: 12px;
}
.inst-box{
background-color: #F2F2F3;
padding: 10px;
border-radius: 10px;
}
.qorder {
position: absolute;
bottom: 10px;
left: 10px;
background-color: var(--green);
color: var(--white);
border-radius: 5px;
padding: 6px 9px;
font-size: 16px;
font-weight: 700;
border: none;
transition: background-color .2s
}
.qorder:hover {
background-color: var(--dark-green);
transition: background-color .2s
}
.item-txt u {
text-decoration: none;
}
.labels {
position: absolute;
left: 2px;
top: 2px;
z-index: 1;
}
.labels b,.labels a {
display: inline-block;
text-align: center;
border: 1px solid rgba(255, 255, 255, .5);
border-radius: 4px;
font-size: 10px;
font-weight: 600;
color: var(--white);
font-style: normal;
margin-right: 3px;
padding: 2px 4px;
text-decoration: none;
}
.labels .sale {
background-color: var(--orange);
}
.labels .salon {
background-color: var(--yellow);
color: #000;
}
.labels .ylab {
background-color: var(--yellow);
color: #000;
}
.labels .new {
background-color: var(--green);
}
.labels .availability {
background-color: var(--green);
}
.labels .hit {
background-color: var(--yellow);
color: #000
}
.labels .gift {
background-color: var(--yellow);
line-height: 40px;
text-align: center;
}
.labels .gift svg {
height: 20px;
width: 20px;
}
.yellow_label {
background-color: var(--yellow);
}
.uk-slider-items .labels {
left: 0;
}
.item-box .item-rating{
position: absolute;
z-index: 1;
right: 3px;
top: 3px;
font-size: 12px;
background-color: var(--yellow);
color: var(--orange);
padding: 2px 6px;
border-radius: 5px;
}
.p_sofa {
background-image: url(/f/sofa.svg)
}
.p_chair {
background-image: url(/f/chair.svg)
}
.p_table {
background-image: url(/f/table.svg)
}
.p_bed {
background-image: url(/f/bed.svg)
}
.p_kitchen {
background-image: url(/f/kitchen.svg)
}
.p_cupboard {
background-image: url(/f/cupboard.svg)
}
.p_mattress {
background-image: url(/f/matrass.svg)
}
.p_living {
background-image: url(/f/living.svg)
}
.p_children {
background-image: url(/f/children.svg)
}
.p_hall {
background-image: url(/f/hall.svg)
}
.p_small {
background-image: url(/f/small.svg)
}
.p_chairs {
background-image: url(/f/chairs.svg)
}
.prm-r,.prm-g,.prm-b {
display: block;
padding: 36px;
text-align: center;
color: var(--white);
font-size: 24px;
font-weight: 700;
margin-top: 24px;
}
.prm-r i,.prm-g i,.prm-b i {
height: 32px;
width: 32px;
background-size: 32px 32px;
}
.prm-r p+p,.prm-g p+p,.prm-b p+p {
margin-top: 15px;
}
.prm-r .sotial,.prm-g .sotial,.prm-b .sotial {
margin: 15px auto 0 auto;
justify-content: center;
}
.prm-r:hover,.prm-g:hover,.prm-b:hover {
text-decoration: none;
color: var(--white);
}
.prm-r {
background-color: var(--orange);
}
.prm-g {
background-color: var(--green);
}
.prm-b {
background-color: var(--yellow);
}
.filter-nav {
font-size: 14px;
label {
margin-right: 24px;
cursor: pointer;
font-weight: 600;
color: var(--grey);
input{
display: none;
}
}
label:has(input:checked){
color: var(--black);
}
}
.act {}
.act-item img {
min-width: 100%;
height: auto;
}
.act-list ul {
display: flex;
width: 100%;
margin-bottom: 24px;
}
.act-list ul:nth-child(2n) {
flex-direction: row-reverse;
}
.act-list li {
flex-basis: 50%;
}
.act-list img {
min-width: 100%;
height: auto;
}
.item-images {
position: relative;
}
.item-images img {
background-color: var(--white);
}
.item-images .sl-video {
display: block;
background-size: cover;
text-align: center;
background-position: 50%;
}
.item-images .dotnav .sl-video::before {
background-size: 30px 30px;
}
.item-images .dotnav {
margin: 12px 0 24px 0;
display: flex;
flex-wrap: wrap;
}
.item-images .dotnav li {
flex-basis: 14%;
opacity: 0.3;
cursor: pointer;
margin: 0 12px 12px 0;
box-sizing: border-box;
}
.item-images .dotnav img {}
.item-images .dotnav li.uk-active {
opacity: 1;
}
.item-images .labels {
left: 30px;
}
.item-data-txt h6 {
font-size: 14px;
color: var(--grey);
font-weight: 600;
margin: 12px 0 6px 0
}
.item-data-txt p {
font-size: 15px;
line-height: 24px;
margin-bottom: 6px;
}
.item-data-txt ul li {
list-style: disc;
margin-left: 20px;
}
.item-data-txt a {
text-decoration: underline;
color: var(--green);
}
.item-data-txt .bt-box{
display: none;
}
span[itemprop="brand"] {display: none;}
.item-color {}
.item-color a {
display: inline-block;
margin-right: 15px;
height: 30px;
width: 30px;
border-radius: 50%;
border: 1px solid #ccc;
background-position: 50% 50%
}
.price-box {
border: 1px solid #E4E5E6;
border-radius: 15px;
padding: 10px;
}
.price-box .p-new {
margin-top: 6px;
color: var(--green);
font-size: 32px;
}
.price-box .p-new span {
font-weight: 300;
font-size: 20px;
letter-spacing: -1px;
}
.price-box .p-new b {
background-color: var(--orange);
color: var(--white);
font-weight: 800;
font-size: 20px;
letter-spacing: -1px;
display: inline-block;
padding: 3px 6px;
border-radius: 3px;
margin-left: 6px;
margin-top: -6px;
vertical-align: middle;
}
.price-box .bt {
padding: 12px;
}
.price-box hr{
margin-left: -10px;
margin-right: -10px;
margin-block: 10px;
}
.bt-box {
display: flex;
flex-direction: column;
gap: 10px;
}
.price-box .bt-box {
flex-direction: row;
gap: 12px;
width: 100%;
margin-block: 10px;
}
.price-box .bt-box>button{
flex-basis: 50%;
}
.nav-items {
display: flex;
justify-content: space-between;
font-size: 13px;
line-height: 1;
margin-bottom: 36px;
}
.nav-items a {
color: var(--orange);
display: inline-flex;
}
.nav-items a:hover {
color: var(--green);
text-decoration: none;
}
.nav-items li:nth-child(1) {
flex-basis: 50%;
}
.nav-items li:nth-child(2) {
flex-basis: 25%;
}
.nav-items li:nth-child(3) {
flex-basis: 25%;
text-align: right;
}
.nav-items i {
margin-right: 9px;
}
.nav-items i+i {
margin-left: -12px;
}
.nav-items li:nth-child(3) i {
transform: rotate(180deg);
margin-left: 9px;
}
.item-acc{
margin-top: 24px;
border-top: 1px solid #E4E5E6;
}
.item-acc>div {
border-bottom: 1px solid #E4E5E6;
margin:0 !important;
padding-block: 12px;
}
.item-acc .uk-accordion-title{
color: var(--black);
text-decoration: none;
font-weight: 600;
}
address {
font-size: 14px;
color: var(--black);
background-color: #E4E5E7;
padding: 20px;
border-radius: 5px 5px 0 0;
}
address h5 {
font-size: 29px;
color: var(--black);
font-weight: 700;
}
address h5 {
font-size: 16px;
color: var(--black);
font-weight: 700;
margin-bottom: 12px;
}
address h6 {
color: #b3b3b3;
}
address a {
color: var(--orange);
text-decoration: underline;
}
address p {
margin: 12px 0;
}
address+.map {
margin: 0;
}
.map {
height: 600px;
}
.map iframe {
border: none !important;
width: 100%;
height: 600px;
border-radius: 0 0 5px 5px;
}
.sl-video {
position: relative;
}
.sl-video::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: no-repeat 50% rgba(0, 0, 0, .3) url('data:image/svg+xml;utf8,');
background-size: 90px 90px;
}
.help {
font-style: normal;
font-size: 14px;
height: 24px;
width: 24px;
line-height: 24px;
text-align: center;
font-weight: 700;
display: inline-block;
color: #666;
background-color: #ccc;
border-radius: 50px;
}
.help:hover {
background-color: var(--yellow);
color: #000;
}
footer {
position: relative;
background-color: #F2F2F3;
font-size: 12px;
height: 160px;
margin: 0 10px 10px 10px;
border-radius: 5px;
margin-bottom: 25px;
}
footer .logo {
position: absolute;
top: 24px;
left: 24px;
width: 150px;
height: 54px;
background-size: 150px 54px;
}
footer .sotial {
display: flex;
background-color: transparent;
width: auto;
position: absolute;
right: 20px;
top: 20px;
}
footer .sotial a {
color: var(--black);
}
footer .sotial a+a {
margin-top: 2px;
}
footer .copy {
position: absolute;
bottom: 24px;
left: 24px;
color: var(--grey);
}
footer .copy span {
color: var(--black);
}
.office42 {
position: absolute;
bottom: 24px;
right: 24px;
color: #042042;
}
.office42 a {
color: var(--black);
font-weight: 600;
}
.uk-offcanvas-overlay::before {
background: rgba(0, 0, 0, .6);
}
.uk-offcanvas-bar {
background-color: var(--green);
}
.uk-offcanvas-bar a {
font-size: 16px;
display: block;
padding: 5px 0;
}
.cnt h2 {
font-size: 18px;
margin: 22px 0;
}
.cnt h3 {
font-size: 16px;
margin: 20px 0;
font-weight: bold;
}
.cnt h4 {
font-size: 14px;
margin: 20px 0;
font-weight: bold;
}
.cnt p {
margin: 20px 0;
line-height: 21px;
}
.cnt ul,.cnt ol {
margin: 25px 0;
line-height: 21px;
}
.cnt ul li {
margin-left: 25px;
list-style: disc;
}
.cnt ol li {
margin-left: 25px;
list-style: decimal;
}
.cnt table {
margin: 25px 0;
line-height: 21px;
}
.cnt a {
color: var(--blue);
}
.cnt em {
font-style: italic;
color: var(--black);
}
.t1 {
width: 100%;
}
.t1 p {
margin: 0;
}
.t1 td {
padding: 10px;
border-bottom: 1px solid #d1e0f8;
text-align: center;
}
.t1 th {
padding: 10px;
font-weight: bold;
background-color: #d1e0f8;
color: #10336f;
font-size: 12px;
line-height: 16px;
}
.top {
background-color: var(--orange);
padding: 10px;
text-align: center;
}
.top a {
color: var(--white);
text-decoration: underline;
}
.uk-alert-success * {
color: #006b15 !important;
}
.uk-modal {
background: rgba(0, 0, 0, .9);
}
.qsale {
position: relative;
color: var(--orange);
border: 2px solid var(--orange);
font-weight: 600;
background-color: var(--white);
padding: 15px 50px;
font-size: 14px;
display: inline-block;
margin-left: 30px;
border-radius: 10px;
margin-bottom: 10px;
text-align: center;
}
.qsale::before {
content: url("data:image/svg+xml,");
position: absolute;
left: -30px;
top: 50%;
transform: translateY(-50%);
height: 70px;
width: 70px;
}
.qsale:hover {
color: var(--white);
background-color: var(--orange);
}
.sbox {
position: absolute;
right: 495px;
left: 415px;
top: 70px;
}
.sbox-form {
background-color: var(--white);
display: flex;
border-radius: 10px;
}
.sbox-form .in {
width: 100%;
border: none;
padding: 0 20px;
border-radius: 10px;
}
.sbox-form .bt {
height: 50px;
width: 50px;
background: no-repeat #FAD200 50% url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMy4zNTYgMTUuNDc3YTguNSA4LjUgMCAxIDEgMi4xMjEtMi4xMjFsNS4wODQgNS4wODNhMS41IDEuNSAwIDAgMS0yLjEyMiAyLjEyMmwtNS4wODMtNS4wODR6TTE0IDguNWE1LjUgNS41IDAgMSAxLTExIDAgNS41IDUuNSAwIDAgMSAxMSAweiIgZmlsbD0iIzIwMjEyNCIvPjwvc3ZnPg==);
background-size: 21px 21px;
border-radius: 10px;
flex-shrink: 0;
}
li+.no-result {
display: none;
}
.moduls {
display: flex;
flex-wrap: wrap
}
.modul-pix {
flex-basis: 25%
}
.modul-txt {
flex-basis: 75%
}
.b-wrapper {
clear: none !important;
}
.subcat {
background: no-repeat 95% 50% url('data:image/svg+xml;utf8,');
background-size: 8px 14px;
}
#mm a {
color: var(--white) !important;
}
.totop {
margin-top: 10px;
display: block;
height: 30px;
width: 30px;
text-align: center;
line-height: 30px;
background-color: var(--yellow);
border-radius: 5px;
color: #000;
}
.totopm {
position: fixed;
bottom: 20px;
left: 20px;
display: none;
z-index: 20
}
.skk {
background-color: #E4E5E7;
padding: 20px;
border-radius: 10px;
}
.skk .in {
border-radius: 5px;
}
.skk .go-policy {
margin: 0;
}
.action-box img {
width: 100%;
border: 1px solid #ccc
}
.action-box h6 {
margin-top: 12px;
font-weight: bold;
}
.action-box :hover h6 {
color: var(--orange);
text-decoration: none;
}
.action-list img {
width: 100%;
}
.review-box {
margin-top: 90px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 90px 30px;
}
.review-box a,.review-box-slider a {
display: block;
border: 1px solid var(--light-grey);
border-radius: 5px;
padding: 20px;
}
.review-box-slider li {
margin-top: 50px;
}
.cnt .review-box p {
font-size: 14px;
color: #000;
margin-bottom: 0;
margin-top: 20px;
}
.review-box-slider p {
font-size: 14px;
color: #000;
margin-bottom: 0;
margin-top: 20px;
display: block;
overflow: hidden;
max-height: 209px;
}
.review-box h6,.review-box-slider h6 {
font-size: 14px;
color: var(--dark-green);
font-weight: bold;
text-align: center;
margin-top: 20px;
}
.review-box img,.review-box-slider img {
display: block;
border-radius: 50%;
overflow: hidden;
margin-left: 50%;
transform: translateX(-50%);
margin-top: -65px;
height: 90px;
width: 90px;
}
.rating {
width: 80px;
height: 16px;
background: url('data:image/svg+xml;utf8,');
background-size: 16px 16px;
}
.review-box .rating {
margin-top: 20px;
margin-left: 50%;
transform: translateX(-50%);
}
.item_reviews .rating {
display: inline-block;
margin-left: 30px;
}
h3 .rating {
display: inline-block;
margin-left: 0px;
}
.rating4 {
width: 64px
}
.rating3 {
width: 48px;
}
.rating2 {
width: 32px;
}
.rating1 {
width: 16px;
}
.go-basket.basket p {
display: none;
}
.basket-table {
width: 100%;
}
.basket-table a {
color: #000;
}
.basket-table tr th:nth-child(3),.basket-table tr th:nth-child(4),.basket-table tr th:nth-child(5),.basket-table tr th:nth-child(6) {
width: 3%;
}
.basket-table tr td:first-child {
width: 100px;
}
.basket-table tr th:nth-child(3),.basket-table tr th:nth-child(5),.basket-table tr td:nth-child(3),.basket-table tr td:nth-child(5) {
white-space: nowrap;
text-align: right;
}
.basket-table tr th:nth-child(4),.basket-table tr td:nth-child(4) {
text-align: center;
}
.basket-table tr:nth-child(odd) {
background-color: #F2F2F3;
}
.basket-table th {
background-color: var(--yellow);
text-align: left;
padding: 20px 10px;
color: #000;
}
.basket-table tfoot th {
padding: 5px 10px;
}
.basket-table td {
padding: 10px;
}
.basket-table .p-new {
margin: 0;
}
.basket-table .in {
border: 1px solid var(--grey);
font-size: 24px;
font-weight: 700;
color: #000;
text-align: center;
width: 64px;
height: 36px;
border-radius: 5px;
}
.basket-table u {
text-decoration: none;
font-weight: 400;
position: relative;
font-size: 24px;
}
.basket-table u:after {
content: '';
position: absolute;
border-top: 2px solid var(--black);
left: 1px;
right: 8px;
bottom: 9px;
}
.item-del {
background-color: #000;
color: var(--white);
border: none;
border-radius: 3px;
padding: 8px 10px;
}
.uk-notification-message {
background-color: var(--dark-green);
color: var(--white);
}
.validate input:invalid {
border: 1px solid red;
}
.item_reviews {
margin-top: 30px;
}
.item_reviews h2 {
margin-bottom: 20px;
}
.item_reviews h3 {
padding-top: 9px;
}
.item_reviews p {
position: relative;
padding-left: 18px;
}
.item_reviews p:before {
position: absolute;
top: 0;
left: 0;
content: '“';
font-size: 48px;
line-height: 0.75;
color: rgba(0, 0, 0, 0.1);
font-weight: bold;
}
.item_reviews dt+dd>p {
padding-left: 0;
}
.item_reviews dt+dd>p:before {
content: '';
}
.item_rating_box {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.item_rating_label {
width: 181px;
}
.item_rating {
display: block;
overflow: hidden;
width: 180px;
}
.item_rating:not(:checked)>input {
display: none;
}
#rate:not(:checked)>label {
cursor: pointer;
float: right;
width: 36px;
height: 30px;
display: block;
font-size: 30px;
color: rgba(224, 100, 0, .4);
line-height: 33px;
text-align: center;
}
#rate:not(:checked)>label:hover,#rate:not(:checked)>label:hover~label {
color: rgba(224, 100, 0, .6);
}
#rate>input:checked+label:hover,#rate>input:checked+label:hover~label,#rate>input:checked~label:hover,#rate>input:checked~label:hover~label,#rate>label:hover~input:checked~label {
color: rgba(224, 100, 0, .8);
}
#rate>input:checked~label {
color: rgba(224, 100, 0, 1);
}
.slider-vk>div {
aspect-ratio: 3/2;
}
.slider-vk iframe {
width: 100%;
aspect-ratio: 3/2;
}
.questioning {
position: fixed;
top: 50%;
transform: translateY(-50%);
right: 0;
background-color: var(--white);
border: 1px solid #ccc;
padding: 20px;
width: 300px;
z-index: 10;
border-radius: 5px;
box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.2);
}
.questioning label {
display: block;
cursor: pointer;
}
.questioning label:hover {
color: var(--green);
}
.questioning h4 {
font-weight: 700;
font-size: 18px;
}
.questioning p {
line-height: 1.2;
margin: 9px 0 18px 0;
}
.questioning .uk-checkbox {
margin-right: 10px;
}
.questioning .bt {
margin-top: 18px;
padding: 6px 14px;
}
.filter-sort {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.slider-cnv {
min-width: 320px;
}
.slider {
display: block;
position: relative;
height: 30px;
width: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.slider .slider-touch-left,.slider .slider-touch-right {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
position: absolute;
height: 30px;
width: 30px;
padding: 6px;
z-index: 2;
}
.slider .slider-touch-left span,.slider .slider-touch-right span {
display: block;
width: 100%;
height: 100%;
background: var(--yellow);
border-radius: 50%;
}
.slider .slider-line {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
width: calc(100% - 30px);
left: 18px;
top: 14px;
height: 4px;
border-radius: 4px;
background: var(--yellow);
z-index: 0;
overflow: hidden;
}
.slider .slider-line span {
display: block;
height: 100%;
width: 0%;
background: var(--yellow);
}
#result {
font-size: 12px;
text-align: center;
margin-top: -10px;
}
.cat-option {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 12px;
}
.cat-option label {
cursor: pointer;
position: relative;
}
.cat-option input {
position: absolute;
top: 3px;
left: 3px;
}
.cat-option label:hover i {
display: block;
}
.cat-option label>img {
border-radius: 5px;
}
.cat-option i {
position: absolute;
top: 60px;
left: -50px;
right: -50px;
background-color: #F2F2F3;
padding: 5px;
text-align: center;
font-style: normal;
font-size: 12px;
font-weight: 600;
border: 1px solid #ccc;
display: none;
border-radius: 8px;
z-index: 1;
}
.cat-option i img {
border-radius: 5px;
}
.cat-option i p {
margin-bottom: 6px;
}
.basket-table .dolyami-bt {
display: table;
margin-top: 6px;
}
#dolyami-modal h3 {
font-weight: bold;
}
#dolyami-modal p {
font-size: 14px;
margin: 12px 0;
}
.open-order {
width: 100%;
box-sizing: border-box;
}
.uk-tooltip {
background-color: #000;
}
.uk-modal {
background: rgba(0, 0, 0, .5);
}
.photo-video {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.partpay-btgroup{
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.partpay-btgroup > * {
flex: 1 1 260px;
}
.split-switcher{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
background-color: #ECEEF2;
padding: 4px;
border-radius: 12px;
a{
text-align: center;
color: #000;
display: block;
padding: 6px;
}
.uk-active{
border-radius: 12px;
background-color: var(--white);
}
}
.dolyami-logo, .chastyami-logo{
height: 26px;
margin-bottom: 12px;
}
.dolyami-bt {
text-align: left;
font-size: 14px;
font-weight: 400;
white-space: nowrap;
border: none;
background-color: transparent;
color: #000;
padding: 0;
b{
display: inline-block;
background: #000 no-repeat 2px 50% url('data:image/svg+xml;utf8,');
background-size: 24px 24px;
padding: 4px 6px 4px 28px;
color: var(--white);
border-radius: 28px 6px 6px 28px;
font-weight: 400;
}
}
.chastyami-bt {
display: flex; align-items: center;
text-align: left;
font-size: 14px;
font-weight: 400;
white-space: nowrap;
border: none;
background-color: transparent;
color: #000;
padding: 0;
b{
margin-right: 6px;
width: 96px;
height: 29px;
background: no-repeat 50% url('data:image/svg+xml;utf8,');
background-size: 96px 29px;
}
}
.dolyami-table h5,.chastyami-table h5 {
font-size: 24px;
margin-top: 12px;
font-weight: 600;
}
.dolyami-table table,.chastyami-table table {
font-size: 14px;
width: 100%;
}
.dolyami-table td,.chastyami-table td {
line-height: 1;
padding: 3px;
font-weight: 500;
color: var(--grey);
}
.dolyami-table tr td:first-child,.chastyami-table tr td:first-child {
color: #000;
}
.split-line td::before{
content: '';
display: block;
height: 5px;
border-radius: 10px;
background-color: #ECEEF2;
margin-top: 12px;
}
.split-line td:first-child::before {
background-color: #4AC2A8;
}
.chastyami-table .split-line td:first-child::before {
background-image: linear-gradient(99.72deg, rgb(226, 231, 105) 0%, rgb(87, 231, 167) 51%, rgb(69, 210, 224) 100%);
}
.txt-small{
font-size: 12px;
margin-top: 9px;
line-height: 1.2;
a{
color: #4AC2A8;
}
}
.load-indicator {
display: none;
}
.load-indicator .htmx-indicator {
display: block;
}
.filter-nav {
font-size: 12px;
}
.filter-nav li {
display: inline-block;
margin-right: 5px;
}
.filter-nav a {
color: var(--black);
border: 1px solid var(--yellow);
padding: 3px 5px;
border-radius: 3px;
display: block;
margin-bottom: 5px;
}
.filter-nav .uk-active a {
background-color: var(--yellow);
}
.mobile-filter{
display: none;
gap: 10px;
font-size: 14px;
}
.mobile-filter .select{
border: 1px solid var(--light-grey);
border-radius: 5px;
padding: 0 10px;
background-position: right 10px top 50%;
}
.open-filter{
position: relative;
display: flex; align-items: center;justify-content: center; gap: 10px;
color: var(--black);
height: 40px;
background-color: var(--light-grey);
border-radius: 5px;
border: none;
padding: 0 10px;
}
.open-filter::before{
height: 20px;width: 20px;
content: url('data:image/svg+xml;utf8,');
}
.open-filter-active::after{
content: '';
position: absolute;
top: -3px;right: -3px;
height: 8px;width: 8px;
background-color: var(--orange);
border-radius: 100%;
}
.dg-error-message{
display: none !important;
}
/* .black-box{
margin:0 -10px;
padding: 50px 20px;
background: url(/f/festival01.webp) #000;
background-size: contain;
display: grid;
grid-template-columns: 1fr 4fr;
gap: 24px;
} */
.black-box{
margin:0 -10px;
padding: 50px 20px;
background: url(/f/festival01.webp) #000;
background-size: contain;
display: flex;
gap: 24px;
.uk-slider-container{
flex-basis: 80%;
overflow: hidden;
}
}
.black-counter-box{
display: flex; flex-direction: column; align-items: center;justify-content: center; gap: 24px;
flex-basis: 20%;
}
#black-counter{
background-color: #fff;
border-radius: 3px;
height: 50px;
width: 240px;
text-align: center;
font-size: 32px;
line-height: 50px;
color: #000;
font-weight: 800;
}
.offcanvas {
&::before {
background: rgba(0,0,0,.3);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
.uk-offcanvas-bar {
background-color: var(--white);
color: var(--c-black);
padding: 12px;
label {
color: var(--c-black);
}
p {
color: var(--c-black);
margin: 0;
line-height: 1;
}
#order-price-note {
font-size: 14px;
line-height: 1.4;
}
#order-promocode:focus-visible {
outline: 2px solid var(--focus, var(--c-green));
outline-offset: 2px;
}
.bsk-item {
display: flex;
gap: 6px;
.bsk-img{
width: 90px;
}
.bsk-data {
flex-basis: 90%;
p{
font-size: 14px;
}
.bsk-price {
font-size: 20px;
margin-bottom: 12px;
b {
color: var(--c-green);
margin-right: 6px;
font-weight: 600;
}
}
}
}
a {
color: var(--c-black);
&:hover {
color: var(--c-green);
}
}
h1 {
font-size: 24px;
color: var(--c-green) !important;
font-weight: 600;
margin-top: 0;
}
h3 {
font-size: 20px;
color: var(--c-black);
font-weight: 600;
}
h4 {
color: var(--c-black);
font-size: 16px;
font-weight: 600;
margin-block: 12px;
}
hr {
margin-block: 12px;
border-top: 1px solid var(--light-grey);
}
.bt {
margin-top: 6px;
flex: 1 1 1rem;
}
}
.offcanvas-menu{
a{
display: block;
color: var(--c-green);
font-weight: 600;
font-size: 16px;
padding-block: 6px;
}
}
.close {
outline: none;
top: 12px;
right: 12px;
color: var(--c-green);
}
.close:hover {
color: var(--c-green);
opacity: .9;
}
.form-footer {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 120px;
button{
flex: 1 0 auto;
border: none;
border-radius: 6px;
cursor: pointer;
}
.next-step{
background: var(--c-green);
color: var(--white);
}
.back-step{
background: var(--light-grey);
color: var(--c-green);
}
}
}
.bsk-option-box {
display: flex; align-items: center;justify-content: space-between;
gap: 6px;
.bsk-option-form {
display: flex;
align-items: center;
.minus,
.plus {
border: none;
height: 36px;
width: 36px;
cursor: pointer;
}
.minus {
background:var(--yellow) no-repeat 50% url('data:image/svg+xml;utf8,');
}
.plus {
background:var(--yellow) no-repeat 50% url('data:image/svg+xml;utf8,');
}
.bsk-option-value {
margin: 0 10px;
font-size: 20px;
color: var(--c-black);
width: 30px;
text-align: center;
border: none;
outline: none;
-moz-appearance: textfield;
}
.bsk-option-value::-webkit-outer-spin-button,
.bsk-option-value::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
}
button {
justify-content: center;
border: none;
border-radius: 6px;
cursor: pointer;
height: 36px;
font-size: 12px;
}
.add-basket{
flex: 1 1 auto;
background-color: var(--c-green);
color: var(--white);
&::before{
height: 20px;width: 20px;
}
}
.del-basket {
flex: 1 1 auto;
background-color: var(--light-grey);
color: var(--c-green);
&::before{
height: 16px;width: 16px;
}
}
.bsk-option-form + .del-basket {
flex: 0 1 auto;
background-color: var(--white);
color: var(--grey);
&::before {
filter: none;
}
}
}
.form {
& > *:not([type="hidden"]) + * {
margin-top: 6px;
}
.name {
display: none;
}
.field {
border: 1px solid var(--light-grey);
padding: 6px;
border-radius: 6px;
position: relative;
box-sizing: border-box;
&:not(.checkbox) {
background-color: var(--white);
}
label {
display: block;
font-size: 12px;
}
.alert {
position: absolute;
top: -8px;
right: 5px;
font-size: 10px;
color: var(--white);
background-color: rgb(198, 0, 58);
padding: 1px 5px;
border-radius: 5px;
}
.in {
width: 100%;
height: auto;
padding: 3px 0;
margin: 0;
border: none;
background-color: var(--white);
color: var(--black);
}
textarea.in {
height: 60px;
}
.in:focus {
outline: none;
}
}
.bad {
border: 1px solid var(--orange);
}
.file {
position: relative;
width: 100%;
padding: 8px 0;
cursor: pointer;
overflow: hidden;
display: flex;
align-items: center;
gap: 10px;
z-index: 0;
.file-input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
background: transparent;
z-index: 1;
}
.file-name {
color: var(--black);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
position: relative;
z-index: 0;
}
}
.radio {
border: none;
display: flex; align-items: flex-start;
gap: 6px;
h6 {
color: var(--black);
line-height: 1;
margin-bottom: 3px;
font-size: 16px;
}
p {
color: var(--black);
font-size: 12px;
font-weight: 300;
margin-top: 6px;
}
input[type="radio"] {
appearance: none;
background-color: var(--white);
margin: 0;
width: 18px;
height: 18px;
border: 2px solid var(--light-grey);
border-radius: 50%;
transition: background-color .3s, border-color .3s;
flex-shrink: 0;
}
input[type="radio"]:checked {
background-color: var(--yellow);
border: 2px solid var(--yellow);
}
}
.checkbox {
border: none;
padding: 0;
display: flex;
gap: 12px;
margin-bottom: 12px;
label {
font-size: 12px;
line-height: 16px;
}
input[type="checkbox"] {
appearance: none;
background-color: var(--light-grey);
margin: 0;
width: 16px;
height: 16px;
border: none;
border-radius: 2px;
transition: background-color .3s;
flex-shrink: 0;
}
input[type="checkbox"]:checked {
background-color: var(--yellow);
background-position: 50%;
background-repeat: no-repeat;
}
}
.input-box p {
margin-bottom: 12px;
}
.input-box:has(.input-group:empty) p {
display: none;
}
.input-group {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.input-group:empty {
display: none;
}
.image-checkbox,
.image-radio {
border: none;
padding: 0;
label {
cursor: pointer;
}
img {
height: 36px;
width: 36px;
object-fit: cover;
border-radius: 6px;
border: 1px solid var(--light-grey);
overflow: hidden;
display: block;
}
input[type="checkbox"],
input[type="radio"] {
display: none;
}
input[type="checkbox"]:checked + img,
input[type="radio"]:checked + img {
border: 6px double var(--yellow);
}
}
.select {
select {
appearance: none;
padding-right: 16px;
background-repeat: no-repeat;
background-position: 100% 50%;
background-size: 16px 16px;
}
}
.text-checkbox,
.text-radio {
padding: 0;
border: none;
label {
cursor: pointer;
padding: 12px;
border: 2px solid var(--light-grey);
border-radius: 6px;
}
input[type="checkbox"],
input[type="radio"] {
display: none;
}
label:has(input[type="checkbox"]:checked),
label:has(input[type="radio"]:checked) {
border: 2px solid var(--yellow);
}
}
.go-policy {
font-size: 12px;
border: none;
}
.go-policy.bad{
color: var(--orange);
}
.form-footer {
display: flex;
align-items: center;
gap: 6px;
button {
flex-shrink: 0;
}
p {
font-size: 12px;
}
}
a {
color: var(--black);
text-decoration: underline;
}
.rem{
font-size: 14px;
color: var(--green) !important;
}
}
.delivery-hidden:not(.show-delivery){
display: none;
}
@media screen and (max-width:1440px) {
.review-box {
grid-template-columns: repeat(2, 1fr)
}
/* .actsl img {
height: 200px;
object-fit: cover;
} */
.price-box .bt {
padding: 9px;
font-size: 14px;
}
.sl-video::before {
background-size: 60px 60px;
}
}
@media screen and (max-width:1200px) {
.prm-r, .prm-g, .prm-b {
font-size: 18px;
padding: 2.99999vw;
}
.slogan {
display: none;
}
.sbox {
left: 266px;
}
.smemu a:nth-child(4) {
display: none;
}
}
@media screen and (max-width:1024px) {
header .sotial{
display: none;
}
}
@media screen and (max-width:960px) {
:root {
--grid:16px;
}
.mobile-filter {
display: flex;
}
.cnv-filter .filter-nav{
display: none;
}
.smemu, .slogan, aside {
display: none;
}
.dsk-menu{
display: none;
}
header {
height: 106px;
}
header .phone {
display: none;
}
header .call-me {
display: none;
}
header .label-helper{
display: none;
}
.open-phone-box{
display: flex;
}
.item_reviews h3{
font-size: 24px;
}
.item_reviews p{
font-size: 12px;
}
.sbox {
right: 14px;
left: 14px;
top: 60px;
}
.sbox-form{
border-radius: 5px;
}
.sbox-form .in {
padding: 0 10px;
border-radius: 10px;
font-size: 16px;
}
.sbox-form .bt {
height: 32px;
width: 32px;
padding: 0;
background-size: 16px 16px;
border-radius: 5px;
}
.photo-video {
grid-template-columns: repeat(3, 1fr);
}
.logo {
left: 14px;
top: 14px;
width: 90px;
height: 32px;
background-size: 90px 32px;
}
.open-menu {
display: block;
}
.main-box {
display: block;
}
.totopm {
display: block;
}
.go-basket {
position: absolute;
top: 14px;
right: 60px;
height: 32px;
width: 32px;
border-radius: 5px;
background-size: 20px 20px;
}
.go-basket p {
font-size: 12px;
height: 20px;
width: 20px;
padding: 0;
line-height: 20px;
right: -8px;
top: -8px;
}
.item-data-txt .bt-box{
display: flex;
margin-top: 12px;
}
.item-images .bt-box{
display: none;
}
.item-images .dotnav {
display: none;
}
.dolyami-bt {
white-space: normal;
}
.cnv-filter {
display: block;
position: relative;
}
.filter{
position: absolute;
top: 102px;right: 0;left: 0;
z-index: 15;
display: none;
}
.filter.view{
display: block;
}
.black-box{
flex-direction: column;
gap: 24px;
}
}
@media screen and (max-width:768px) {
.basket-box .uk-offcanvas-bar {
width: 90%;
}
.review-box {
grid-template-columns: repeat(1, 1fr)
}
.photo-video {
grid-template-columns: repeat(2, 1fr);
}
.basket-table tr td:first-child {
width: auto;
}
.basket-table u {
font-size: 14px;
}
.basket-table tr td::before {
position: absolute;
left: 10px;
font-size: 14px;
font-weight: 600;
}
.basket-table tr td:first-child::before {
content: 'Фото:';
}
.basket-table tr td:nth-child(2)::before {
content: 'Наименование:';
}
.basket-table tr td:nth-child(3)::before {
content: 'Цена:';
}
.basket-table tr td:nth-child(4)::before {
content: 'Количество:';
}
.basket-table tr td:nth-child(5)::before {
content: 'Стоимость:';
}
.basket-table tr td:nth-child(6)::before {
content: 'Удалить:';
}
.basket-table th {
display: none;
}
.basket-table tfoot th {
display: block;
background: transparent;
padding: 0;
}
.basket-table {}
.basket-table tr {
display: block;
padding: 10px 0;
}
.basket-table td {
display: block;
box-sizing: border-box;
font-size: 14px;
text-align: left !important;
padding: 5px 5px 5px 50%;
position: relative;
}
.basket-table .p-new {
margin: 0;
font-size: 14px;
}
.basket-table .in {
border: 1px solid var(--grey);
font-size: 14px;
font-weight: 400;
width: 30px;
height: 20px;
}
.item-del {
padding: 0 5px;
}
}
@media screen and (max-width:640px) {
:root {
--grid:9px;
}
.open-phone-box{
padding: 0;
width: 32px;
}
.open-phone-box i{
margin: 0;
}
.open-phone-box span{
display: none;
}
.actsl img {
height: auto;
width: 100%;
}
.labels .ylab {
display: none;
}
.prev {
left: -20px;
}
.next {
right: -20px;
}
.pref-box {
font-size: 16px;
line-height: 21px;
}
.pref-box p {
padding: 12px 12px 12px 36px;
}
.satisfaction-box{
font-size: 12px;
padding: 9px 48px 9px 9px;
}
.satisfaction-box+.sale-h{
margin-top: 12px;
}
.sale-h {
height: auto;
}
.uk-grid+.sale-h {
margin-top: 20px;
}
.uk-scrollspy-inview+.sale-h {
margin-top: 20px;
}
.sale-h h3 {
font-size: 24px;
}
.p-new {
font-size: 20px;
}
.nav-items {
font-size: 12px;
margin-bottom: 24px;
}
.nav-items li:nth-child(1) {
flex-basis: 33%;
}
.nav-items li:nth-child(2) {
flex-basis: 33%;
text-align: center;
}
.nav-items li:nth-child(3) {
flex-basis: 33%;
}
.nav-items i {
margin-right: 9px;
}
.nav-items i+i {
margin-left: -23px;
}
.office42 {
display: none;
}
.help-form form {
flex-direction: column;
}
.help-form label {
margin-bottom: 20px;
}
footer .logo {
top: 10px;
left: 10px;
}
footer .sotial {
right: 10px;
top: 10px;
}
footer .copy {
bottom: 10px;
left: 10px;
}
.item_rating_box {
display: block;
}
}
@media screen and (max-width:480px) {
h1 {
font-size: 22px;
}
main {
min-height: auto;
}
.price-box .p-new {
margin-top: 3px;
font-size: 26px;
}
.sale-h h3 {
font-size: 16px;
}
.sale-h a {
font-size: 13px;
}
.sale-h i {
margin-left: 3px;
}
.act-list ul {
flex-direction: column !important;
}
.act-list li {
flex-basis: 100%;
}
footer {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: auto;
padding: 20px 20px 90px 20px;
}
footer .logo {
position: static
}
footer .sotial {
position: static
}
footer .copy {
position: static;
text-align: center;
margin: 10px;
}
}