:root { --blue-header-bg: #eef8fe; --blue-bg: #eafaff; --blue-bg-bright: #04c9fb; --blue-border-dark: #5db3cb; /* --blue-bg-dark-button: #1f83a0;*/ --gray-bg: #f2f2f2; --red-bg: #FF4444; --gradient-start: #11709d; --gradient-end: #10aac5; --gray-border: #e9e9e9; --gray-border-good: #d9d9d9; --gray-average: #676767; --gray-lighter: #A9A9A9; --green-discount: #34C85A; --text-black: #131415; --text-blue: #1895b7; --text-gold: #C0A85A; --text-mob-menu: #26576D; --inverted-mob-icon: #1292b4; --input-readonly-background: #fafafa; } /* background-image: linear-gradient(45deg, #fff 50%, transparent 50%), linear-gradient(-45deg, #fff 50%, transparent 50%); */ .header-2024 { height: 36px; background-image: linear-gradient(45deg, #fff 50%, transparent 50%), linear-gradient(-45deg, #fff 50%, transparent 50%); background-position: bottom left, bottom left; background-size: 10px 10px; background-repeat: repeat-x, repeat-x; text-align: center; overflow: hidden; } .header-2024.mobile { height: 69px; } .header-2024-wrapper { height: 32px; background-image: linear-gradient(to right, #1073a0, #1dadc7); } .header-2024-text-wrapper { color: white; font-size: 14px; padding-top: 4px; max-width: 1416px; margin: auto; } .header-2024-text.left { float: left; } .header-2024-text.right { float: right; } @media (max-width: 1440px) { .header-2024-text.left { margin-left: 8px; } .header-2024-text.right { /* menu items has margin */ } } .header-2024-text a { color: white; margin-right: 16px; } .header-2024-text a:hover { color: var(--blue-header-bg); } .header2024-logo-wrapper { width: 100%; margin: 0; background: white; z-index: 8; height: 72px; border-bottom: 1px solid #eee; text-align: center; clear: both; } @media (max-width: 1480px) { .header2024-logo-wrapper { padding-left: 32px; padding-right: 32px; } .w1416 { padding: 0 32px; } } .fixed-header { position: fixed; top: 0; left: 0; } @media (min-width: 1416px) { .fixed-header { box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.5); } } .logo2024-wrapper { margin: 0 auto; max-width: 1416px; left: 0; height: 72px; } @media (min-width: 1416px) { .logo2024-wrapper { width: 1416px; } } .logo2024-img { float: left; height: 32px; padding: 0; margin-top: 20px; } .logo2024-text { float: left; padding: 16px 0 0 12px !important; height: 32px; padding: 0; font-size: 12px; width: 48px; line-height: 12px; } .logo2024-categories { float: left; margin: 16px 0 0 80px !important; font-size: 16px; } .logo2024-topbar-menu-opener { position: relative; visibility: hidden; border: 1px solid #eee; border-radius: 8px; height: 40px; line-height: 40px; user-select: none; cursor: pointer; width: 155px; } .cat-show-button { position: absolute; top: 10px; left: 12px; background-size: cover; width: 16px; height: 16px; display: inline-block; background-image: url(/img/icons/categories_button_closed.svg); } .cat-show-button.opened { background-image: url(/img/icons/categories_button_open.svg); } .cat-show-text { position: absolute; color: var(--gray-average); top: -1px; left: 42px; } .cat-show-text.opened { color: var(--text-blue); } .cat-show-arrow { position: absolute; top: 16px; left: 129px; background-size: cover; width: 8px; height: 4px; display: inline-block; background-image: url(/img/icons/categories_arrow_closed.svg); } .cat-show-arrow.opened { background-image: url(/img/icons/categories_arrow_open.svg); } .logo2024-search-form { float: left; margin-top: 16px; margin-left: 8px; } .logo-2024-mobile { width: 272px; height: 47px; margin: auto; margin-top: 16px; margin-bottom: 16px; background-image: url(/img/icons/logo2024.svg); background-repeat: no-repeat; background-size: contain; } .header__search-2024 { float: left; max-width: 512px !important; width: 36.6vw !important; border: 1px solid #eee !important; border-radius: 8px !important; background-color: #eef8fe !important; background-image: url(/img/icons/search-loupe.svg) !important; background-repeat: no-repeat !important; background-position: 10px 10px !important; padding-left: 32px !important; } .header-icon2024-wrapper { float: right; width: 70px; height: 56px; margin-top: 16px; text-align: center; position: relative; cursor: pointer; } .header-icon2024-wrapper:hover { opacity: 0.75; filter: hue-rotate(8deg); filter: blur(0.2px); } .header-icon2024-img { height: 20px; margin-bottom: 8px; } .header-icon2024-text { color: var(--text-blue); font-size: 12px; } .red-badge { position: absolute; display: none; top: 2px; right: 10px; padding: 0; background-color: var(--red-bg); height: 16px; min-width: 16px; color: #fff; font-size: 12px; border-radius: 8px; line-height: 16px; padding-left: 5px; padding-right: 5px; } .header-icon2024-wrapper .red-badge:empty { display: none; } .topbar-menu { display: block; min-height: 162px; padding-top: 8px; width: 100%; background: white; z-index: 8; } .topbar-menu.spacer-sticky-header { margin-top: 72px; } @media (max-width: 1415px) { .logo2024-categories { display: none !important; } .logo2024-search-form { margin-left: 64px; } .topbar-menu { display: none; padding-left: 8px; padding-right: 16px; /* 8 doesn't work */ } } /** mobile top menu */ .top-menu-icon-2024 { width: 80px; height: 80px; display: block; border-radius: 40px; border: 1px solid #eee; background-size: cover; } .top-menu-icon-2024-text { padding-top: 4px; min-height: 40px; text-align: center; color: var(--text-black); max-width: 84px; /* fit "è" */ font-size: 12px; font-weight: bold; line-height: 14px; } .top-menu-icon-2024-text.active { color: var(--text-blue); } .topbar-menu-mobile { position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; display: none; overflow-y: scroll; background: white; padding-left: 10.1vw; padding-top: 76px; z-index: 5; } .mob-menu-mobile-item { width: 33.1%; display: inline-block; vertical-align: top; margin-bottom: 4px; } @media (max-width: 1024px) { .top-menu-icon-2024-text { font-size: 10px; } } .top-bar-section li a:hover > .top-menu-icon-2024-text { color: var(--text-blue); } .top-bar-section li a:hover > .top-menu-icon-2024 { opacity: 0.8; } .mob-menu-mobile-submenu { display: none; width: 100%; position: absolute; top: 200px; left: 0; background-color: var(--blue-header-bg); z-index: 6; } .mob-menu-mobile-submenu .mob-submenu-line { height: 64px; width: 100%; text-align: center; background-color: var(--blue-header-bg); } .mob-menu-mobile-submenu .wrapper { width: 311px; margin: auto; height: 64px; border-bottom: 1px dotted var(--gray-average); position: relative; } .mob-menu-mobile-submenu .wrapper .img { width: 32px; height: 32px; position: absolute; top: 16px; left: 0; } .mob-menu-mobile-submenu .wrapper .link { height: 32px; line-height: 17px; font-size: 14px; text-align: left; float: left; color: var(--text-mob-menu); position: relative; top: 21px; left: 46px; } .mob-menu-mobile-submenu .wrapper .link a { color: var(--text-mob-menu); } .mob-menu-arrow-up { width: 0rem; height: 0rem; border-left: 0.625rem solid transparent; border-right: 0.625rem solid transparent; border-bottom: 0.625rem solid var(--blue-header-bg); position: absolute; display: none; z-index: 1; } /*** index slider ***/ .top-slider-2024-wrapper { width: 100%; max-width: 1536px; height: 400px; margin: auto; margin-top: 8px; position: relative; } @media (max-width: 480px) { .top-slider-2024-wrapper { width: 100%; height: 240px; } } .top-slider-2024-side { position: absolute; top: 0; width: 136px; height: 100%; } @media (max-width: 480px) { .top-slider-2024-side { width: 16px; } .top-slider-2024-wrapper { height: 128px; } } .top-slider-2024-side.left { left: 0; background-position: right 0 top 0; } .top-slider-2024-side.right { right: 0; background-position: left 0 top 0; } .top-slider-2024-center { margin: auto; max-width: 1232px; width: calc(100% - 298px); height: 100%; border-radius: 8px; background-size: cover; } @media (max-width: 480px) { .top-slider-2024-center { width: calc(100% - 40px); } } .top-slider-2024-arrow { width: 64px; height: 64px; position: absolute; top: calc(200px - 32px); background-size: cover; background-position: 0 0; z-index: 4; overflow: visible; cursor: pointer; filter: drop-shadow(4px 6px 11px #555); } .top-slider-2024-arrow:hover { filter: brightness(120%) drop-shadow(4px 6px 11px #555); } .top-slider-2024-arrow.left { left: calc(136px - 24px); background-image: url(/img/icons/top-slider-2024-arrow-left.svg); } .top-slider-2024-arrow.right { right: calc(136px - 24px); background-image: url(/img/icons/top-slider-2024-arrow-right.svg); } @media (max-width: 480px) { .top-slider-2024-arrow { top: 48px; width: 32px; height: 32px; } .top-slider-2024-arrow.left { left: 8px; } .top-slider-2024-arrow.right { right: 8px; } } .top-slider-2024-over { width: 136px; height: 100%; position: absolute; top: 0; z-index: 1; } @media (max-width: 480px) { .top-slider-2024-over { width: 32px; } } .top-slider-2024-side.left { left: 0; border-top-right-radius: 8px; border-bottom-right-radius: 8px; } .top-slider-2024-over.left { width: 100%; height: 100%; background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); } .top-slider-2024-side.right{ right: 0; border-top-left-radius: 8px; border-bottom-left-radius: 8px; } .top-slider-2024-over.right { width: 100%; height: 100%; background: linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); } .header-2024-mobile-wrapper { height: 64px; background-image: linear-gradient(to right, #1073a0, #1dadc7); clip-path: polygon(0% 0%, 0% 100%, 1.25% 90.6%, 2.5% 100%, 3.75% 90.6%, 5% 100%, 6.25% 90.6%, 7.5% 100%, 8.75% 90.6%, 10% 100%, 11.25% 90.6%, 12.5% 100%, 13.75% 90.6%, 15% 100%, 16.25% 90.6%, 17.5% 100%, 18.75% 90.6%, 20% 100%, 21.25% 90.6%, 22.5% 100%, 23.75% 90.6%, 25% 100%, 26.25% 90.6%, 27.5% 100%, 28.75% 90.6%, 30% 100%, 31.25% 90.6%, 32.5% 100%, 33.75% 90.6%, 35% 100%, 36.25% 90.6%, 37.5% 100%, 38.75% 90.6%, 40% 100%, 41.25% 90.6%, 42.5% 100%, 43.75% 90.6%, 45% 100%, 46.25% 90.6%, 47.5% 100%, 48.75% 90.6%, 50% 100%, 51.25% 90.6%, 52.5% 100%, 53.75% 90.6%, 55% 100%, 56.25% 90.6%, 57.5% 100%, 58.75% 90.6%, 60% 100%, 61.25% 90.6%, 62.5% 100%, 63.75% 90.6%, 65% 100%, 66.25% 90.6%, 67.5% 100%, 68.75% 90.6%, 70% 100%, 71.25% 90.6%, 72.5% 100%, 73.75% 90.6%, 75% 100%, 76.25% 90.6%, 77.5% 100%, 78.75% 90.6%, 80% 100%, 81.25% 90.6%, 82.5% 100%, 83.75% 90.6%, 85% 100%, 86.25% 90.6%, 87.5% 100%, 88.75% 90.6%, 90% 100%, 91.25% 90.6%, 92.5% 100%, 93.75% 90.6%, 95% 100%, 96.25% 90.6%, 97.5% 100%, 98.75% 90.6%, 100% 100%, 100% 0%); position: fixed; top: 0; left: 0; width: 100%; z-index: 6; } @media (min-width: 690px) { .header-2024-mobile-wrapper { clip-path: polygon(0% 0%, 0% 100%, 0.75% 90.6%, 1.5% 100%, 2.25% 90.6%, 3% 100%, 3.75% 90.6%, 4.5% 100%, 5.25% 90.6%, 6% 100%, 6.75% 90.6%, 7.5% 100%, 8.25% 90.6%, 9% 100%, 9.75% 90.6%, 10.5% 100%, 11.25% 90.6%, 12% 100%, 12.75% 90.6%, 13.5% 100%, 14.25% 90.6%, 15% 100%, 15.75% 90.6%, 16.5% 100%, 17.25% 90.6%, 18% 100%, 18.75% 90.6%, 19.5% 100%, 20.25% 90.6%, 21% 100%, 21.75% 90.6%, 22.5% 100%, 23.25% 90.6%, 24% 100%, 24.75% 90.6%, 25.5% 100%, 26.25% 90.6%, 27% 100%, 27.75% 90.6%, 28.5% 100%, 29.25% 90.6%, 30% 100%, 30.75% 90.6%, 31.5% 100%, 32.25% 90.6%, 33% 100%, 33.75% 90.6%, 34.5% 100%, 35.25% 90.6%, 36% 100%, 36.75% 90.6%, 37.5% 100%, 38.25% 90.6%, 39% 100%, 39.75% 90.6%, 40.5% 100%, 41.25% 90.6%, 42% 100%, 42.75% 90.6%, 43.5% 100%, 44.25% 90.6%, 45% 100%, 45.75% 90.6%, 46.5% 100%, 47.25% 90.6%, 48% 100%, 48.75% 90.6%, 49.5% 100%, 50.25% 90.6%, 51% 100%, 51.75% 90.6%, 52.5% 100%, 53.25% 90.6%, 54% 100%, 54.75% 90.6%, 55.5% 100%, 56.25% 90.6%, 57% 100%, 57.75% 90.6%, 58.5% 100%, 59.25% 90.6%, 60% 100%, 60.75% 90.6%, 61.5% 100%, 62.25% 90.6%, 63% 100%, 63.75% 90.6%, 64.5% 100%, 65.25% 90.6%, 66% 100%, 66.75% 90.6%, 67.5% 100%, 68.25% 90.6%, 69% 100%, 69.75% 90.6%, 70.5% 100%, 71.25% 90.6%, 72% 100%, 72.75% 90.6%, 73.5% 100%, 74.25% 90.6%, 75% 100%, 75.75% 90.6%, 76.5% 100%, 77.25% 90.6%, 78% 100%, 78.75% 90.6%, 79.5% 100%, 80.25% 90.6%, 81% 100%, 81.75% 90.6%, 82.5% 100%, 83.25% 90.6%, 84% 100%, 84.75% 90.6%, 85.5% 100%, 86.25% 90.6%, 87% 100%, 87.75% 90.6%, 88.5% 100%, 89.25% 90.6%, 90% 100%, 90.75% 90.6%, 91.5% 100%, 92.25% 90.6%, 93% 100%, 93.75% 90.6%, 94.5% 100%, 95.25% 90.6%, 96% 100%, 96.75% 90.6%, 97.5% 100%, 98.25% 90.6%, 99% 100%, 99.75% 90.6%, 100% 0%); } } .mobile-fixed-header-space { height: 64px; width: 100%; } .header-2024-mobile-icon { height: 64px; width: 20%; text-align: center; float: left; padding-top: 12px; margin-top: 2px; border-top-left-radius: 8px; border-top-right-radius: 8px; } .header-2024-mobile-icon.active { background: white; } .mob-icon-holder { height: 22px; } .mob-icon-holder .img { /* [icon-...] has style :O */ height: 18px; background-size: contain; background-position: top center; background-repeat: no-repeat; margin-bottom: 2px; } .mob-icon-holder .img.i1 { background-image: url(/img/icons/mobile-header-1.svg); } .mob-icon-holder .img.i2 { background-image: url(/img/icons/mobile-header-2.svg); } .mob-icon-holder .img.i3 { background-image: url(/img/icons/mobile-header-3.svg); } .header-2024-mobile-icon.active .mob-icon-holder .img.i3 { background-image: url(/img/icons/mobile-header-3-inverted.svg); } .mob-icon-holder .img.i4 { background-image: url(/img/icons/mobile-header-4.svg); } .mob-icon-holder .img.i5 { background-image: url(/img/icons/mobile-header-5.svg); } .mob-icon-holder .text { height: 20px; color: white; font-size: 11px; } .header-2024-mobile-icon.active .mob-icon-holder .text { color: var(--inverted-mob-icon); } input.mobile-header-search__input { background-color: var(--blue-bg) !important; border-radius: 1px; } @media (max-width: 1023px) { .show-for-desktop { display: none; } .show-for-mobile { /*display: inherit;*/ } } @media (min-width: 1024px) { .show-for-desktop { /*display: inherit;*/ } .show-for-mobile { display: none; } } .black-label, .black-label a { color: var(--text-black); font-weight: bold; font-size: 32px; line-height: 32px; margin-top: 32px; /* 24 */ margin-bottom: 8px; } @media (max-width: 480px) { .black-label, .black-label a { font-size: 24px; } } /* items */ .w1416 { max-width: 1416px; margin: auto; overflow-y: visible; height: max-content; } /* catalog */ .w1176 { width: calc(100% - 240px - 4px); margin: 0; float: left; } .w240 { width: 240px; margin: 0; float: left; } @media (max-width: 1023px) { .w1416 { margin: auto; width: calc(100% - 32px); padding: 0; } .basket { width: calc(100% - 32px); margin-left: 16px; } .red-label { padding-left: 0; } } .items2024 div.item2024 { width: 25%; /* öidth: 100%;*/ /* height: 29.6875rem; */ overflow-y: hidden; display: inline-block; /*padding: 0.2825rem;*/ padding-right: 8px; margin-bottom: 0.625rem; /*border: 0.0625rem solid #fff;*/ vertical-align: top; } .items2024 div.item2024.p1 { width: 99% !important; } .items2024 div.item2024.p4 { width: 25% !important; } .items2024 div.item2024.p5 { width: 20% !important; } .items2024 div.item2024.p6 { width: calc(100% / 6) !important; } .item2024.narrow { max-width: 20% !important; } .items2024 .item2024 .order .amount { width: 40px; border-radius: 0.375rem; } .items2024 .item2024 .order input { height: 1.4125rem; text-align: center; margin-bottom: 0px; padding: 0; } .items2024 div.item2024:hover { /* border: 0.0625rem solid #ddd;*/ } .items2024 div.item2024.empty { height: 0px; margin: 0; padding: 0; border: none; } /* @media only screen and (max-width: ...) x4 */ .items2024 .item2024 .name { font-size: 16px; line-height: 18px; height: 74px; /* arbitrary */ /* ellipsis ... */ display: -webkit-box; max-width: 200px; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; color: var(--text-black); margin-top: 8px; text-align: left; clear: both; } .items2024 .item2024 .name a { color: var(--text-black); } .items2024 .item.group .name { height: 1.895rem; } .items2024 .item2024 .play-3d { position: absolute; right: 0; width: 42px; } .items2024 .item2024 .image .play-video, .good__img_plitka .play-video { position: absolute; right: 8px; bottom: 8px; } .items2024 .item2024 .image .play-video .fi-play, .good__img_plitka .fi-play { font-size: 1rem; color: #ffffff; } .good__img_plitka .fi-play { position: absolute; right: 8px; bottom: 8px; } .items2024 .item2024 .image .play-video .fi-play:before, .good__img_plitka .fi-play:before { background: #e54a36; border: 3px solid #e54a36; border-radius: 6px; padding: 0px 6px 0px 8px; } .items2024 .item2024 .sale, .items2024 .item2024 .blackfriday { position: absolute; font-size: 12px; top: 6px; /* 28 */ left: 8px; font-family: "Arial"; font-weight: bold; /* border: 4px solid white; */ border-left: 0; /* padding: 2px 4px; */ } @media (max-width:560px) { .items2024 .item2024 .sale, .items2024 .item2024 .blackfriday { font-size: 9px; border: 2px solid white; } } .items2024 .item2024 .sale, .sale_badge { background-image: url('/img/sale_icon.png'); background-size: 28px 28px; width: 28px; height: 28px; border: none; } .items2024 .item2024 .blackfriday { color: var(--text-black); background-color: #f6e61d; } .blackfriday_good { position: absolute; font-size: 12px; top: 6px; font-family: "Arial"; font-weight: bold; border: 4px solid white; border-left: 0; padding: 2px 4px; color: var(--text-black); background-color: #f6e61d; z-index: 10; } /*.items2024 .item2024 .sale .fi-burst:before {*/ /*font-size: 39px;*/ /*color: #ff0000;*/ /*content: '';*/ /*}*/ .items2024 .item2024 .sale .fi-burst:after { content: '%'; position: absolute; top: 8px; left: 8px; font-size: 16px; font-weight: 800; color: #ff0000; } .items2024 .item2024 .param_icons { position: absolute; left: 0; bottom: 0.3125rem; margin-left: 0.3125rem; } .items2024 .item2024 .image { position:relative; overflow: hidden; border-radius: 6px; overflow: hidden; } .items2024 .item2024.narrow .image { /* height: 18.75rem; */ } .items2024 .item2024 .image a.radius { display: block; background: #ffffff; height: 18.75rem; } .items2024 .item2024 .image a.radius img { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border-radius: 0rem; } .items2024 .item2024 .image .img { display: block; height: 18.75rem; width: 100%; text-align: center; white-space: nowrap; } .items2024 .item2024 .image .img:before { content: ''; display: inline-block; vertical-align: middle; height: 100%; } .items2024 .item2024 .image img { /* max-height: 18.5rem; */ width: 100%; border-radius: 0.375rem; vertical-align: middle; /* ? */ aspect-ratio: 1 / 1; /* defining the aspect ratio of the image */ object-fit: cover; /* making sure the image isn't distorted */ transition: transform 0.25s ease; } .items2024 .item2024 .image img:hover { transform: scale(1.036); cursor: pointer; } .items2024 .item2024.narrow .image img { aspect-ratio: 216 / 320 !important; } .items2024 .item2024 .firm { color: #adadad; text-align: left; font-size: 0.75rem; height: 1.1rem; overflow: hidden; white-space: nowrap; margin-top: 4px; } .items2024 .item2024 .art { color: #adadad; font-size: 0.75rem; height: 1.1rem; overflow: hidden; white-space: nowrap; } .items2024 .item2024 .all-text-labels { color: #adadad; font-size: 0.75rem; height: auto; overflow: hidden; } .items2024 .item2024 .price { color: var(--text-black); font-weight: bold; font-size: 20px; float: left; } .items2024 .item2024 .price span { float: left; } .price-old-2024 { font-size: 20px; float: left; } .items2024 .item2024 .price .price_old { color: #adadad; margin-right: 5px; text-decoration: line-through; } .items2024 .item2024 .price .price_current { color: #ff0000; } .items2024 .item2024 .stamp { width: 120px; height: 120px; margin: 0 auto; background: url(../img/warranty/pechat2.png) no-repeat 0 0; position: absolute; } .items2024 .item2024 .description .columns { text-align: left; font-size: 1rem; margin-top: 0.625rem; } .items2024 .item2024 .discount, .items2024 .item2024 .for_sale_text { color: #1e6798; font-weight: bold; font-size: 0.875rem; } .items2024 .item2024 .description { font-size: 0.875rem; line-height: 1rem; height: 3rem; overflow: hidden; text-align: left; } .items2024 .item2024 .extra .columns { font-size: 0.875rem; color: var(--text-black); height: 1rem; line-height: 1rem; } .items2024 .item2024 .extra .columns.small-10 { overflow: hidden; } .items2024 .item2024 .extra.star { margin-right: 12px; position: relative; top: -12px; } .items2024 .item2024 .rating { height: 1.1875rem; font-size: 0.8rem; clear: both; } .items2024 .item2024 .rating .stars { margin-right: 5px; } .items2024 .item2024 .rating .fi-star { color: #ddd; } .items2024 .item2024 .rating .fi-star.checked { color: #ff9d30; } .items2024 .item2024 .order input, .items2024 .item2024 .order a, .items2024 .item2024 .order span { float: left; margin-right: 10px; } .items2024 .item2024 .order .amount { width: 40px; border-radius: 0.375rem; } .items2024 .item2024 .order .fi-star { font-size: 1.5rem; cursor: pointer; color: #adadad; position: absolute; top: -7px; } .items2024 .item2024 .order .fi-star:hover { color: #2ba6cb; } .items2024 .item2024 .order .fi-star.red, .items2024 .item2024 .order .fi-star.red:hover { color: #a73956; } .items2024 .item2024 .order .fi-indent-more { font-size: 1.2rem; position: absolute; margin-left: 32px; color: #adadad; top: -2px; cursor: pointer; } .items2024 .item2024 .order .fi-indent-more:hover { color: #2ba6cb; } .items2024 .item2024 .order .fi-indent-more.checked { color: #a73956; } .items2024 .item2024 .order { position: relative; margin-top: 4px; height: 38px; font-size: 16px; } .items2024 .item2024 .order .quantity { padding-right: 4px; font-size: 0.875rem; } .items2024 .item2024 .order .quantity .columns { padding-left: 2px; padding-right: 0px; } .items2024 .item2024 .order .quantity i { color: #2072a5; cursor: pointer; position: relative; top: 0.125rem; } .items2024 .item2024 .order .quantity i:hover { color: #ff7a02; } .items2024 .item2024 .order .quantity input { padding: 1px; } .items2024 .item2024 .order .button { margin-bottom: 0; background-color: var(--text-blue); height: 36px; line-height: 30px; padding-left: 16px; padding-right: 16px; font-size: 16px; color: white; } .items2024 .item2024 .order .button:hover { background-color: var(--blue-bg-bright); } .items2024 .item2024 .order input { height: 1.4125rem; text-align: center; margin-bottom: 0px; padding: 0; } .items2024 .item2024 .order .postfix { height: 1.4125rem; line-height: 1.4125rem; } .items2024 .item2024 .order .price { color: #0071a8; font-size: 0.875rem; line-height: 0.875rem; overflow: hidden; font-weight: bold; text-align: left; position: relative; top: 0.24rem; } .items2024 .item2024 .order .in_cart { background: #a73956; } .items2024 .item2024 .order .for-sale-text { display: none; } .transition-middle { transition: 0.5s; } .items2024 .quick_preview { display: none; position: absolute; width: 192px; height: 42px; line-height: 42px; bottom: 8px; left: calc(50% - 96px); text-align: center; background: white; color: var(--text-black); font-weight: 700; border-radius: 8px; z-index: 1; filter: drop-shadow(2px 2px 6px #ccc); margin: auto; cursor: pointer; user-select: none; } .items2024 .image:hover .quick_preview { display: block; } .items2024 .quick_preview:hover { background: #f5f5f5; color: var(--text-blue); } .rating-num-2024 { color: #999; } .fluid-header-wrapper { position: relative; width: 100%; } .fluid-header-wrapper .list-buttons { position: absolute; width: 120px; top: 0; right: 0; cursor: pointer; user-select: none; } @media (max-width: 480px) { .fluid-header-wrapper .list-buttons { display: none; } } .fluid-header-wrapper .list-buttons .list-button-1 { position: absolute; top: 8px; right: 2px; /* temp ... 102 */ font-weight: 700; font-size: 16px; color: var(--text-blue); } .fluid-header-wrapper .list-buttons .list-button-2 { position: absolute; top: 2px; right: 52px; width: 40px; height: 40px; border-radius: 20px; background-color: white; background-image: url(/img/icons/fluid-list-button-left.svg); background-size: 10px 18px; background-position: center; background-repeat: no-repeat; } .fluid-header-wrapper .list-buttons .list-button-3 { position: absolute; top: 2px; right: 2px; width: 40px; height: 40px; border-radius: 20px; background-color: white; background-image: url(/img/icons/fluid-list-button-right.svg); background-size: 10px 18px; background-position: center; background-repeat: no-repeat; } .fluid-header-wrapper .list-buttons .list-button-2:hover, .fluid-header-wrapper .list-buttons .list-button-3:hover { box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.16); } .fluid-header-wrapper .list-buttons .disabled { opacity: 0.25; cursor: none; } .fluid-header-wrapper .list-buttons .list-button-1.black { color: var(--text-black); } .fluid-header-wrapper .list-buttons .list-button-2.black { background-image: url(/img/icons/fluid-list-button-left-black.svg); } .fluid-header-wrapper .list-buttons .list-button-3.black { background-image: url(/img/icons/fluid-list-button-right-black.svg); } .favorite-icon-2024 { position: absolute; right: 10px; top: 10px; z-index: 1; width: 24px; height: 22px; background-image: url(/img/icons/favorite-2024.svg); cursor: pointer; } .favorite-icon-2024.red { background-image: url(/img/icons/favorite-2024-active.svg); } .favorite-icon-2024:hover { background-image: url(/img/icons/favorite-2024-active.svg); } .favorite-icon-2024.red:hover { background-image: url(/img/icons/favorite-2024.svg); } .w100p { width: 100%; margin: auto; } .mt16px { margin-top: 16px; } .customer-reviews-wrapper { background-color: #fff7f0; overflow-y: auto; } .customer-reviews { padding: 16px 0; margin: auto; } .customer-review { padding: 16px; width: calc((100% - 32px) / 3); margin-right: 16px; margin-bottom: 16px; background-color: white; border-radius: 16px; position: relative; float: left; } @media (max-width: 480px) { .customer-review { width: 100%; } } .customer-review:last-child { margin-right: 0; } .customer-review .zakaz { color: var(--text-black); font-size: 16px; } .customer-review .text { color: var(--text-black); font-size: 14px; line-height: 14px; } .customer-review .date { color: #999; font-size: 16px; position: absolute; right: 16px; top: 16px; } .customer-review .stars { margin: 4px 0 12px 0; } .customer-review .star { background-image: url(/img/icons/star.svg); background-size: cover; display: inline-block; width: 25px; height: 24px; margin-right: 2px; } .index-brands-wrapper { } .index-brands { display: flex; justify-content: space-around; flex-wrap: wrap; flex-direction: row; align-content: center; align-items: center; } .index-brands .brand { width: 120px; display: inline-block; margin-bottom: 32px; } .index-brands .image { width: 120px; height: 120px; background-size: cover; } .index-brands .text { margin-top: 8px; font-size: 16px; text-align: left; } @media (max-width: 480px) { .index-brands { justify-content: space-evenly; } .index-brands .brand { width: 80px; margin-bottom: 16px; margin-left: 4px; } .index-brands .image { width: 80px; height: 80px; } .index-brands .text { margin-top: 4px; font-size: 14px; } } .blue-footer { padding-top: 48px; background-color: var(--blue-header-bg); overflow-y: auto; } @media (max-width: 480px) { .blue-footer { padding-top: 16px; } } .blue-footer .uno { height: 348px; border-radius: 16px; overflow: hidden; } .blue-footer .uno .left { height: inherit; width: 50%; background-image: url(/img/icons/blue-footer-uno-bg.jpg); background-position: center; background-size: cover; } .blue-footer .uno .right { width: 50%; height: inherit; padding: 32px; font-size: 16px; background: white; } @media (max-width: 480px) { .blue-footer .uno .right { padding: 0 16px 16px 16px; font-size: 13.4px; } } .blue-footer .dos { display: flex; justify-content: space-between; min-height: 222px; padding: 0 64px; border-radius: 16px; margin-top: 16px; background: linear-gradient(to right, var(--gradient-start), var(--gradient-end)); overflow-y: auto; } .blue-footer .dos .icon { margin-top: 16px; height: 174px; } @media (max-width: 480px) { .blue-footer .dos { flex-direction: row; flex-wrap: wrap; padding-bottom: 16px; } .blue-footer .dos .icon { height: 96px; } } .blue-footer .tres { margin-top: 16px; margin-bottom: 32px; } .blue-footer .column { width: calc((100% - 32px) / 3); margin-right: 16px; margin-bottom: 16px; border-radius: 16px; background-color: white; border-radius: 16px; position: relative; float: left; padding: 0; overflow: hidden; } .blue-footer .column:last-child { margin-right: 0; } .blue-footer .tres .top { height: 256px; background-size: cover; position: relative; } .blue-footer .tres .top-1 { background-image: url(/img/icons/tres/tres-1.jpg); } .blue-footer .tres .top-2 { background-image: url(/img/icons/tres/tres-2.jpg); } .blue-footer .tres .top-3 { background-image: url(/img/icons/tres/tres-3.jpg); } .blue-footer .tres .top .header { font-size: 32px; color: white; position: absolute; left: 16px; bottom: 16px; line-height: 36px; font-weight: 600; } .blue-footer .tres .text { padding: 32px; } @media (max-width: 480px) { .blue-footer .column { width: 100%; } .blue-footer .tres .text { padding: 16px; font-size: 14px; } } /* background-image: linear-gradient(45deg, var(--blue-header-bg) 50%, transparent 50%), linear-gradient(-45deg, var(--blue-header-bg) 50%, transparent 50%); */ .footer-2024-saw { height: 16px; background-image: linear-gradient(-45deg, transparent 50%, white 50%), linear-gradient(45deg, transparent 50%, white 50%); background-position: top left, top left; background-size: 10px 10px; background-repeat: repeat-x, repeat-x; text-align: center; margin: 0; } .footer-2024-saw.blue { background-image: linear-gradient(-45deg, transparent 50%, var(--blue-header-bg) 50%), linear-gradient(45deg, transparent 50%, var(--blue-header-bg) 50%); } .footer-2024 { background-image: linear-gradient(to right, #1073a0, #1dadc7); overflow-y: auto; padding: 0; font-size: 14px; } .footer-2024 .row { margin-top: 32px; } .footer-2024 { color: #fff; } /*.footer-2024 .block { margin-top: 1rem; }*/ /*.footer-2024 .caption { margin: 1.25rem 0rem 1.25rem 0rem; color: #fff; text-transform: uppercase; }*/ .footer-2024 .footer-column { width: 14%; float: left; margin-right: 24px; } .footer-2024 .footer-column-2 { width: 36%; float: left; margin-right: 9.8%; } .footer-2024 .footer-column-copyright { float: left !important; width: 75%; } .footer-2024 ul { list-style: none; margin-left: 0rem; } .footer-2024 ul li { line-height: 26px; } .footer-2024 ul li a { color: #fff; background: none; font-size: 14px; line-height: 1.5; margin-bottom: 8px; display: inline-block; vertical-align: top; } .footer-2024 ul li a:hover { opacity: 0.6; color: white; } /* .footer-2024 ul li.active { color: #a0b0d0; } */ .footer-2024 ul li.li:before { margin: 0; } .footer-2024 .category ul li.current { background: none; } .footer-2024 .category .red-label { display: none; } .footer-2024 .category .bg-color { background: none; } .footer-2024 .category .border { border: none; } .footer-2024 .category ul li:hover { background: none; } .footer-2024 .category ul { padding-left: 0px; } .footer-2024 .category ul li { margin-top: 0px; } .footer-2024 .social img { margin-bottom: 5px; margin-right: 2px; } .footer-2024 .social a { float: left; margin-right: 0.3125rem; margin-bottom: 0.3125rem; } .footer-2024 .address { font-size: 0.875rem; } .footer-2024 .margin-top { margin-top: 1rem; } .footer-2024 .copyright { color: #cfcfcf; margin-bottom: 2.5rem; } .footer-2024 .copyright a { color: #cfcfcf; text-decoration: underline; } .footer-2024 .footer-caption { margin: 1.25rem 0rem 1.25rem 0rem; color: #61b7ce; text-transform: uppercase; font-size: 20px; } .footer-2024 .hr { width: 100%; height: 1px; clear: both; padding-top: 32px; margin-bottom: 32px; border-bottom: 1px solid #61b7ce; } .footer-2024 .phone { margin: 16px 0; font-size: 20px; } /* catalog */ .breadcrumb-home { background-image: url(/img/icons/breadcrumb-home.svg); cursor: pointer; width: 12px; height: 10px; background-size: cover; display: inline-block; } .breadcrumb { color: var(--text-blue); font-size: 12px; } .breadcrumbs2024 { display: block; margin-left: 0; list-style: none; } ul.breadcrumbs2024 li { /* padding-top: 8px; padding-bottom: 8px; */ } .breadcrumbs2024>* { float: left; } .breadcrumbs2024>*:before { content: "/"; color: #aaa; margin: 0 8px; position: relative; top: 1px; } .breadcrumbs2024>*:first-child:before { content: " "; margin: 0; } .goods-amount-2024 { color: #999; bottom: 12px; margin-left: 6px; position: relative; font-size: 12px; display: inline-block; font-style: italic; } .upper-goods-line-wrapper { position: relative; width: 100%; height: 75px; margin: 4px 0 16px 0; } .upper-goods-line { position: relative; overflow: hidden; width: 100%; height: 100%; } .upper-good-block { display: flex; justify-content: space-between; float: none !important; width: 100%; position: absolute; top: 0; left: 0; height: 75px; } .upper-good { flex: 1 1 auto; margin-right: 16px; height: 75px; text-align: center; border: 1px solid var(--gray-border); border-radius: 16px; overflow: hidden; position: relative; } .upper-good .img { overflow: hidden; position: absolute; top: 8px; left: 8px; } .upper-good img { height: 56px; border-radius: 8px; } .upper-good .text { position: absolute; top: 0px; left: 72px; height: 100%; line-height: 72px; } .upper-good .text a { display: inline-block; vertical-align: middle; color: var(--text-black); font-weight: 550; font-size: 12px; line-height: 16px; width: 100%; } .upper-good:last-child { margin-right: 0; } .upper-goods-line-wrapper .arrow { display: block; cursor: pointer; position: absolute; top: 18%; user-select: none; width: 48px; max-width: 48px; height: 48px; max-height: 48px; border-radius: 24px; background-color: white; background-size: auto; background-repeat: no-repeat; background-position: center center; box-shadow: 1px 1px 12px rgba(0,0,0,0.2); z-index: 5; } .upper-goods-line-wrapper .arrow.left { left: -24px; background-image: url(/img/icons/l-arrow.svg); } .upper-goods-line-wrapper .arrow.right { right: -24px; background-image: url(/img/icons/r-arrow.svg); } .upper-goods-line-wrapper .arrow.left:hover { opacity: 0.8; } .upper-goods-line-wrapper .arrow.right:hover { opacity: 0.8; } .upper-goods-line-wrapper .arrow:active { opacity: 1; } .upper-goods-line-wrapper .arrow[disabled] { opacity: 0.2; } li .leveler { border-left: 1px solid #ccc; display: inline-block; padding-left: 12px; padding-bottom: 6px; padding-top: 6px; } .multiline-menu { padding: 6px 0 6px 2px; /* 6 0 6 4 */ } .sort-bar-wrapper-height-keeper { width: 100%; height: 48px; margin-bottom: 8px; } .sort-bar-wrapper { width: 100%; height: 48px; background-color: var(--gray-bg); border-radius: 8px; margin-bottom: 0; } .sort-bar { width: 100%; padding: 0; border-radius: 16px; position: relative; margin-bottom: 0; } .sort-bar-wrapper.fixed { position: fixed; border-radius: 0; left: 0; top: 72px; /* approx */ z-index: 8; box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.33); border-radius: 0; } @media (max-width: 480px) { .sort-bar { margin-bottom: 16px; } } .sort-bar-2-modes { position: absolute; left: 8px; top: 8px; width: 64px; height: 32px; background-image: url('/img/icons/p45-switch-0.svg'); background-size: cover; cursor: pointer; } .sort-bar-2-modes.p5-on { background-image: url('/img/icons/p45-switch-1.svg'); } .sort-bar-2-modes:hover { filter: grayscale(40%) blur(0.2px) brightness(110%); } .sort-bar-2-modes.disabled { pointer-events: none; opacity: 0.5; filter: grayscale(90%) blur(0.2px) brightness(120%); } .sort-goods { position: absolute; left: 80px; top: 8px; height: 32px; padding: 4px; padding-left: 8px; border-radius: 8px; width: 180px; border: none; background-color: #fff; display: block; } .sort-bar-wrapper.fixed .sort-goods { left: 312px; } .sort-bar-wrapper.fixed .sort-goods.amount-per-page { left: 502px; } .sort-bar-wrapper.fixed .sort-bar-2-modes { left: 240px; } .sort-goods.amount-per-page { left: 270px; } .sort-bar .filters-button { display: none; height: 32px; line-height: 32px; background: linear-gradient(to right, var(--gradient-start), var(--gradient-end)); color: white; position: absolute; top: 8px; right: 8px; min-width: 138px; overflow: visible; cursor: pointer; border-radius: 8px; } @media (max-width: 1023px) { .sort-bar .filters-button { min-width: 54px; } } .filters-button .filters-icon { position: absolute; left: 8px; top: 8px; width: 18px; height: 16px; background-image: url(/img/icons/filters-icon.svg); } .filters-button .text { position: absolute; left: 36px; top: 0; font-size: 12px; } .filters-button .count { position: absolute; padding: 0; left: 118px; top: 8px; background-color: var(--red-bg); height: 16px; min-width: 16px; color: #fff; font-size: 12px; border-radius: 8px; line-height: 16px; padding-left: 5px; padding-right: 5px; display: none; } @media (max-width: 1023px) { .filters-button .count { left: 32px; } } .filters-right-side-wrapper { position: fixed; overflow-y: scroll; display: none; width: 355px; height: calc(100vh - 100px); /* sidebar-filter-buttons-wrapper */ overflow-y: auto; right: 0; /* -355px */ top: 0; border-left: 1px solid var(--blue-bg); padding: 32px; background-color: white; box-shadow: -8px 0 20px -2px rgba(33, 33, 33, 0.3); z-index: 8; } .filters-right-side-shadower {} .sidebar-filter-buttons-shadower {} .filters-right-side-wrapper .close { position: absolute; top: 22px; right: 20px; width: 20px; height: 20px; background-image: url(/img/icons/filters-close.svg); cursor: pointer; } .sidebar-filter-buttons-wrapper { position: fixed; display: none; bottom: 0; right: 0; height: 100px; /* with jivo */ width: 354px; /* after 355 */ padding-top: 16px; padding-right: 4px; margin-bottom: 0; background-color: white; box-shadow: 5px 0 20px -2px rgba(33, 33, 33, 0.3); border-top: 1px solid #eee; } .sidebar__container { border: none; } .sidebar-filter__apply.button, .sidebar-filter__reset.button { padding: 8px 32px !important; } @media (max-width: 480px) { .sidebar-filter-buttons-wrapper { width: 259px; /* see 260 below */ height: 72px; /* no jovosite on mobile */ } .filters-right-side-wrapper { width: 260px; padding: 16px; height: calc(100vh - 72px); } .sidebar-filter__apply.button, .sidebar-filter__reset.button { padding: 8px 12px !important; } } .sidebar-filter__goods-count { position: fixed; top: 48px; right: 16px; border: 2px solid #aaa; border-radius: 8px; padding: 4px 8px; font-size: 12.5px; vertical-align: top; background: white; z-index: 8; } /* mobile catalog new */ .mobile-catalog-wrapper { position: fixed; overflow-y: scroll; display: none; width: 284px; height: 100vh; overflow-y: auto; left: 0; top: 0; border-left: 1px solid var(--blue-bg); padding: 32px; background: #fff; box-shadow: -8px 0 20px -2px rgba(33, 33, 33, 0.3); z-index: 8; } .mobile-catalog-wrapper .close { position: absolute; top: 22px; right: 20px; width: 20px; height: 20px; background-image: url(/img/icons/filters-close.svg); cursor: pointer; } .razdely { padding-bottom: 12px; } /* goods */ .product-card { /* position: relative;*/ clear: both; } .product-card .caption { font-size: 14px; font-weight: 700; margin-bottom: 16px; } .product-card .good-header-small { font-size: 24px; line-height: 24px; font-weight: 700; margin-bottom: 16px; margin-bottom: -4px; max-width: 98%; } .product-card .more-info { height: 64px; background: white; width: 100%; font-size: 14px; font-weight: 900; line-height: 64px; color: var(--text-blue); text-align: center; position: absolute; left: 0; bottom: 0; border-top: 1px solid #eee; cursor: pointer; z-index: 1; } .product-card .more-info.shadow { box-shadow: 0px -13px 18px -3px rgba(34, 60, 80, 0.22); } .goods-column-1 { /* unneeded */ float: left; width: 100%; } .goods-column-1-1 { float: left; width: 640px; } .goods-column-1-2 { position: relative; width: calc(100% - 640px); padding-left: 32px; float: left; } /* 2nd - ok? */ .goods-column-1-2 .group.extra-wide-right, .goods-column-1-mobile.extra-wide-right { width: calc(100% + 32px); } @media (max-width: 1415px) { .goods-column-1-1 { width: 444px; } .goods-column-1-2 { width: calc(100% - 444px); } } .goods-column-2 { width: 364px; padding-left: 32px; float: right; /* position: absolute; top: 0; right: 0;*/ } .goods-column-1-2 h1 { font-size: 24px; line-height: 28px; float: left; } .h1-good-width-wrapper { width: 100%; display: inline-block; } .h1-good-width { width: 50.5%; } @media (max-width: 1280px) { .h1-good-width { width: 100%; } } span.fi-zoom-in { position: absolute; top: 4px; left: 8px; } .product-card .art { font-size: 12px; color: var(--gray-average); width: 90%; text-align: left; font-style: italic; margin-bottom: 16px; } .product-card .brand-logo { width: 100%; text-align: left; } .rating .reviews-link { margin-top: 16px; } .reviews-link { width: 100%; } .reviews-link .star { background-image: url(/img/icons/star.svg); background-size: cover; display: inline-block; width: 16px; height: 16px; margin-right: 2px; } .pad-groups-wrapper { overflow-y: scroll; height: 258px; /* see js pgwh just in case */ } .good_groups .img { float: left; /* max-width: 60px; max-height: 60px;*/ max-width: 60px; max-height: 60px; margin: 0 auto; outline: 0; border: none; } .good_groups .goods-status-1 { display: block; margin-right: 10px; border: none; border-radius: 8px; overflow: hidden; margin-bottom: 0.5rem; float: left; border: 2px solid white; user-select: none; } .good_groups .goods-status-1.active { border: 2px solid var(--text-blue); } .good_groups .goods-status-1:hover { border: 2px solid var(--text-blue); } .groups.text .goods-status-1 { padding: 0 16px; min-width: 82px; text-align: center; color: var(--text-black); border: 2px solid var(--gray-border); height: 28px; line-height: 24px; font-size: 14px; font-weight: 700; } .groups.text .goods-status-1 a { color: var(--text-black); } .groups.text .goods-status-1:hover { border: 2px solid var(--text-blue); } .groups.text .goods-status-1.active { color: var(--text-black); border: 2px solid var(--text-blue); } .groups.text .goods-status-1.active:hover { } .groups.text .goods-status-1:hover a { color: var(--text-blue); } .good_groups .descr { font-size: 14px; } .good-gallery-icon { display: inline-block; width: 18px; height: 6px; background-image: url(/img/icons/good-galley-icon.svg); background-size: cover; margin-left: 2px; } .good-gallery-icon-test { display: none; color: white; font-size: 17px; padding: 2px; width: 30px; height: 30px; border: 2px solid white; border-radius: 16px; } .good-right-corner-container { position: absolute; right: 4px; /* 8 */ bottom: 14px; /* 8 */ } .good-tabs-header { clear: both; width: 100%; height: 36px; display: block; /* or goods-column-2 moved down */ border-bottom: 2px solid var(--gray-border-good); margin-top: 32px; } .good-tabs-header .element { display: inline-block; margin-right: 32px; } .good-tabs-header .element .text { font-size: 20px; font-weight: 500; cursor: pointer; } .good-tabs-header .element .text.active { border-bottom: 6px solid var(--text-blue); } .good-tabs-body { clear: both; width: 100%; height: max-content; min-height: 192px; margin-bottom: 64px; } .good-tabs-body .description-body { max-width: 780px; margin-top: 32px; width: 100%; display: none; overflow: visible; } .good-tabs-body .description-body.images { max-width: 98% !important; } .good-tabs-body .description-body.active { display: block; } .good-tabs-body .description-body .weights div { color: var(--gray-average); font-style: italic; font-size: 14px; } .product-card .buy-wrapper.non-fixed { width: 324px; /* 268 */ padding: 16px; box-shadow: 2px 2px 18px rgba(0, 0, 0, 0.72); margin-bottom: 32px; border-radius: 16px; } .buy-wrapper { position: absolute; top: 4px; right: 8px; width: 324px; /* 268 */ /*box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.599);*/ box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.24); padding: 16px; /*left: calc(50vw + 369px);*/ z-index: 3; background: white; border-radius: 16px; } @media (max-width: 1280px) { .buy-wrapper { margin-top: 16px; position: relative; } } /* .buy-wrapper.fixed, .buy-wrapper-mobile-fixed-position-mark { position: fixed; top: 164px; / will be overwritten in js / } .buy-wrapper.absolute { position: absolute; top: 2501px; / will be overwritten in js / } */ .buy-wrapper-mobile-fixed-position-mark { width: 0; height: 0; } /* .product-card .fixed.add-catalog-shift { top: calc(164px + 136px); } */ .buy-wrapper .v-nalichii-line { text-align: left; color: var(--gray-average); font-size: 14px; font-weight: 500; margin-bottom: 8px; } .buy-wrapper-card .price-strike, .buy-wrapper .price-strike { width: 100%; color: #ccc; font-size: 14px; font-weight: 700; text-decoration: line-through; margin-bottom: 10px 0 10px 0; } .buy-wrapper-card .order, .buy-wrapper .order { display: inline-block; } .buy-wrapper-card .price, .buy-wrapper .price { width: 100%; color: var(--text-black); font-size: 32px; font-weight: 700; margin: 10px 0 10px 0; } .buy-wrapper-card .button, .buy-wrapper .button { padding: 12px 24px; min-width: 176px; height: 48px; border-radius: 8px; font-weight: 600; font-size: 20px; margin-bottom: 0; } .buy-wrapper-card .buy-line, .buy-wrapper .buy-line { text-align: left; line-height: 24px; } .add-to-favorites { background-image: url('/img/icons/good-add-to-favorites.svg'); width: 24px; height: 22px; cursor: pointer; } .add-to-favorites.red { background-image: url('/img/icons/good-add-to-favorites-active.svg'); } .add-to-compare { background-image: url('/img/icons/good-compare.svg'); width: 18px; height: 20px; cursor: pointer; } .add-to-compare.red { background-image: url('/img/icons/good-compare-active.svg'); } .product-card-desktop .buy-wrapper .add-to-favorites { position: absolute; right: 72px; top: 113px; } .product-card-desktop .buy-wrapper .add-to-compare { position: absolute; right: 36px; top: 113px; } .collection-pad .add-to-favorites, .collection-pad .add-to-compare { display: inline-block; margin-left: 16px; vertical-align: middle; } .goods-column-1-mobile .add-to-favorites { position: absolute; top: 210px; right: 18px; } /* .goods-column-1-mobile .add-to-compare { position: absolute; top: 210px; right: 52px; } */ .w92p { width: 92%; text-align: left; } .our-brand { color: var(--text-gold); } img.brand-logo { margin-bottom: 2px; width: 80px; } @media (max-width: 480px) { img.brand-logo { width: 20vw; } } .brand-logo { display: inline-block; } /*** collection - good preview ***/ .fader { position: fixed; top: 0; left: 0; z-index: 7; background: black; opacity: 0.4; width: 100vw; height: 100%; display: none; } .collection-pad { width: 94vw; max-width: 1024px; aspect-ratio: 1616/960; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; border-radius: 16px; display: none; overflow: hidden; z-index: 7; border-radius: 16px; } .slideshow-container { width: 100%; height: 100%; } .collection-pad .slideshow { position: absolute; left: 0; top: 0; width: 59.5%; height: 100%; border-right: 1px solid #eee; background-size: cover; background-repeat: no-repeat; background-position: center center; overflow: hidden; z-index: 2; /* for more-info shadow */ } .collection-pad .right-side { position: absolute; top: 0; left: 59.5%; background-color: white; padding: 16px 0 0 16px; height: 100%; width: calc(100% - 59.5%); vertical-align: top; } .collection-pad .header { color: white; font-size: 24px; max-width: 23vw; font-weight: bold; margin: 0 0 16px 0; line-height: 0.88; } .collection-pad .text { color: white; font-size: 14px; width: 100%; padding: 0 32px 16px 0; } .collection-pad .tag { border: 1px solid var(--gold); background: rgba(18, 18, 18, 0.64); padding: 8px 12px; color: white; font-size: 16px; font-weight: bold; border-radius: 32px; display: inline-block; margin: 8px 0 8px 0; text-transform: uppercase; user-select: none; } .collection-pad .wheretobuy { position: absolute; bottom: 32px; left: 0; width: calc(100% - 16px); } .collection-pad .wheretobuy .header-where { position: relative; left: 16px; font-size: 32px; font-weight: bold; color: var(--gold); } .collection-pad .logo-blocks { position: relative; left: 16px; margin: 0; } .collection-pad .logo-blocks .logo { display: inline-block; width: calc(50% - 16px); height: auto; aspect-ratio: 256/64; margin: 8px 8px 0 0; border-radius: 8px; user-select: none; cursor: pointer; } .collection-pad .logo-blocks .logo img { width: 56%; } .collection-pad .arrow { color: white; font-size: 40px; cursor: pointer; position: absolute; top: calc(50% - 1.5vw - 4px); user-select: none; width: 32px; max-width: 32px; height: 32px; max-height: 32px; border-radius: 16px; background-color: white; background-size: auto; background-repeat: no-repeat; background-position: center center; box-shadow: 1px 1px 12px rgba(0,0,0,0.3); z-index: 10; } .collection-pad .arrow.left { left: 16px; background-image: url(/img/icons/l-arrow.svg); } .collection-pad .arrow.right { right: 16px; background-image: url(/img/icons/r-arrow.svg); } .collection-pad .arrow.left:hover { opacity: 0.86; } .collection-pad .arrow.right:hover { opacity: 0.86; } .collection-pad .arrow:active { opacity: 1; } .collection-pad .arrow[disabled] { opacity: 0.2; } .collection-pad .slider-points { position: absolute; left: calc(50% - 175px); width: 350px; bottom: 16px; color: white; text-align: center; user-select: none; z-index: 10; } .collection-pad .slider-image { width: 100%; height: 100%; background-size: contain; background-repeat: no-repeat; background-position: center center; position: absolute; left: 0; top: 0; } .collection-pad .bullet { width: 16px; height: 16px; border-radius: 16px; background-color: #aaa; margin-right: 8px; display: inline-block; cursor: pointer; opacity: 0.32; } .collection-pad .bullet.active { opacity: 1; } .collection-pad .close { cursor: pointer; position: absolute; top: 16px; right: 16px; user-select: none; width: calc(1vw + 8px); height: calc(1vw + 8px); background-size: cover; background-repeat: no-repeat; background-position: center center; background-image: url(/img/icons/close-cross.svg); } .collection-pad .close:hover { opacity: 0.86; } .collection-pad .close:active { opacity: 0.8; } .collection-pad .close[disabled] { opacity: 0.2; } @keyframes slideRightCurrent { 0% { left: 0; } 100% { left: -100%; } } @keyframes slideRightNext { 0% { left: 100%; } 100% { left: 0; } } @keyframes slideLeftCurrent { 0% { left: 0; } 100% { left: 100%; } } @keyframes slideLeftNext { 0% { left: -100%; } 100% { left: 0%; } } @keyframes expandText0 { 0% { height: var(--text-height); } 100% { height: var(--expander-height); } } @keyframes expandText1 { 0% { -webkit-mask-image: var(--text-shadow); } 100% { -webkit-mask-image: none; } } @keyframes collapseText0 { 0% { height: var(--expander-height); } 100% { height: var(--text-height); } } @keyframes collapseText1 { 0% { -webkit-mask-image: none; } 100% { -webkit-mask-image: var(--text-shadow); } } /*** plitka ***/ .black { color: var(--text-black); } table.goods_plitka span[itemprop="price"] { font-size: 20px; font-weight: bold; } table.goods_plitka .firm { font-size: 12px; } table.goods_plitka .cart_add, .button { min-width: 88px; } .goods_plitka .star { background-image: url(/img/icons/star.svg); background-size: cover; display: inline-block; width: 12px; height: 12px; } .goods_plitka .rating { clear: both; font-size: 12px; } .goods_plitka .text { display: inline-block; color: var(--text-black); font-size: 12px; } .plitka_1 { padding-top: 4px; padding-bottom: 0; } .good__img_plitka { border-radius: 8px; overflow: hidden; } .plitka_2.item .order.clearfix { height: auto; } td.plitka_1, td.plitka_2 { padding: 4px; vertical-align: top; } td.plitka_2 { padding-bottom: 24px; } @media (max-width: 1200px) { .quick_preview { width: 168px !important; left: calc(50% - 84px) !important; font-size: 12px; } } @media (max-width: 1415px) { .header__search-2024 { width: 18vw !important; } } @media (max-width: 1035px) { /* .header__search-2024 { width: 18vw !important; }*/ .cat-rubricator { display: none; } .upper-goods-line { display: none; } .w1176 { width: auto; } .items2024 div.item2024.p4 { width: inherit !important; } .items2024 div.item2024 { width: inherit !important; } } /*** mobile ***/ @media (max-width: 1023px) { .path { padding: 8px 0 0 0 !important; } .path ul { margin-bottom: 4px; } h1 { font-size: 24px !important; text-align: left; line-height: 30px; /* display: inline !important; */ /* ? not sure */ padding-left: 0; } .upper-goods-line { display: none; } .cat-rubricator { display: none; } .sort-bar .sort-goods { left: 46px; width: calc(100% - 118px); } .red-badge { top: 4px; } ul.breadcrumbs2024 li { padding-top: 0; } .footer-column { width: calc(34% - 32px) !important; } .footer-column, .footer-column-2, .footer-column-copyright { /*padding-left: 16px;*/ } .footer-column-2, .footer-column.mob-size-2 { width: calc(66% - 2px) !important; margin-right: 0 !important; } .footer-2024 .footer-caption { font-size: 12px; margin: 8px 0 8px 0; } .footer-2024 ul li a, .footer-2024 ul li.current { color: #fff; font-size: 10px; line-height: 1; display: inline-block; } .footer-column, .footer-column-copyright { font-size: 10px; } .footer-column-copyright { width: calc(100% - 32px) !important; padding-top: 8px; } } .mobile-breadcrumb-spacer { width: 13px; } .mobile-breadcrumb-spacer:before { content: ''; } .mobile-breadcrumb-opener { position: absolute; right: 8px; top: 16px; width: 8px; height: 4px; background-size: 100%; background-image: url(/img/icons/mobile-breadcrumb-open.svg); } .mobile-breadcrumb-opener-clicker { position: absolute; right: -8px; top: -8px; width: 32px; height: 32px; } .to-hide { display: none; } .mobile-breadcrumb-opener.active { background-image: url(/img/icons/mobile-breadcrumb-close.svg); } .mobile-catalog-in-sort-button { position: absolute; left: 8px; top: 8px; width: 32px; height: 32px; border-radius: 8px; background-color: white; background-image: url(/img/icons/mobile-catalog-in-sort-button.svg); background-position: 7px 7px; background-size: 18px 18px; background-repeat: no-repeat; } .mobile-catalog-in-sort-button:active { opacity: 0.7; } .goods-column-1-mobile { /*padding-left: 16px;*/ clear: both; } .goods-column-2-mobile { width: 100%; clear: both; } .goods-column-1-mobile .descr { font-size: 14px; } .goods-column-1-mobile table { border: none; width: calc(100% - 16px); } .clear { clear: both; } .buy-wrapper-mobile { width: 100%; padding: 0; } .buy-wrapper-mobile .column-1 { padding: 0 0 0 16px; width: 44%; float: left; } .buy-wrapper-mobile .column-2 { padding: 0 16px 0 0; width: 56%; float: left; } .buy-wrapper-mobile .price-strike { width: 100%; color: #ccc; font-size: 14px; font-weight: 700; text-decoration: line-through; margin-bottom: 10px; } .buy-wrapper-mobile .price { width: 100%; color: var(--text-black); font-size: calc(6px + 5vw); font-weight: 700; margin-bottom: 8px; } .buy-wrapper-mobile .button { padding: 12px 24px; min-width: 80px; width: 100%; height: 48px; border-radius: 8px; font-weight: 600; font-size: 20px !important; line-height: 28px; margin-bottom: 0; } .buy-line .buttons-position { display: inline-block; position: relative; } .buy-wrapper-mobile .buy-line { text-align: left; line-height: 24px; } .fixed-buy-wrapper-mobile { position: fixed; padding-top: 14px; padding-bottom: 16px; width: 100%; height: 88px; bottom: 0; left: 0; background: white; z-index: 6; box-shadow: 0 0px 20px #999; } .fixed-buy-wrapper-mobile .good__cart-control-container { zoom: 1.5; } @media (max-width: 370px) { .fixed-buy-wrapper-mobile .good__cart-control-container { zoom: 1.2; } } .mini-basket-container { position: fixed; top: 72px; right: 32px; width: 20rem; z-index: 9; } .mini-basket-container .price { color: var(--text-black); font-size: 24px; font-weight: 700; } .preview-basket__total { padding: 2px 0 2px 1rem; } .preview-basket__button { padding: 0.8rem 1rem; } /* .mini-basket-hover { top: 0; left: 8px; position: absolute; width: 72px; height: 92px; z-index: 10; } */ /* user */ .user-cabinet input { font-weight: 500 !important; font-weight: normal !important; border: 1px; } .user-cabinet a { color: var(--blue-border-dark); } .user-cabinet a:hover { opacity: 0.8; } .user-cabinet input[type="text"] { background-color: var(--blue-header-bg); } .contact-address-box { display: inline-block; float: left; padding: 32px 32px 0 32px; position: relative; border: 3px solid #eee; border-radius: 16px; width: 31%; min-height: 128px; font-size: 16px; font-weight: 500; margin: 0 calc(2%) 8px 0; } .contact-address-box.add { border: 3px dashed #eee; text-align: center; } .contact-address-box.add a { line-height: 64px; } .contact-address-box.active { border: 3px solid var(--blue-border-dark); } .contact-address-box input[type="radio"] { position: absolute; left: 16px; top: 13px; } .contact-address-box .edit { position: absolute; font-size: 80%; right: 16px; top: 8px; } .p016 { padding: 0 16px; } .fw500 { font-weight: 500; } .user-cabinet-green { color: #0fc662; } @media only screen and (max-width: 480px) { .user-cabinet { font-size: 13px; } } a.blue { color: var(--inverted-mob-icon); } .user-cabinet-price { width: 100%; color: var(--text-black); font-size: 16px; font-weight: 700; margin: auto; } /* overrides */ .site_sale_hit .content { height: auto !important; } .body { padding: 0 !important; } .category a { font-weight: normal; } a:hover { color: #61b7ce; } .path { padding: 8px 0; clear: both; } h1 { font-size: 32px; color: var(--text-black); font-weight: 700; display: inline-block; clear: both; margin: 2px 0; } .category ul { padding-left: 0; } .category ul li { margin: 0; } /*.category ul li.current { background-color: var(--blue-bg); color: var(--text-black); font-weight: normal; }*/ .category ul li a:hover { color: var(--text-blue); } .category li.current { color: var(--text-black); } nav li a { color: var(--text-black); } nav li.current a { color: var(--text-black) !important; } .quick-filter__item a { font-size: 12px; } .quick-filter__item { margin-bottom: 12px; padding: 2px 14px; border: 2px solid var(--gray-border); } @media (max-width: 480px) { .quick-filter__item { margin-bottom: 8px; } } /*.quick-filter__item.is-active { background: linear-gradient(to right, var(--gradient-start), var(--gradient-end)); }*/ .quick-filter__item.is-active a { border-color: var(--blue-border-dark); color: var(--gray-average); } .quick-filter__item:hover a { color: var(--text-blue); } .quick-filter__item:hover { border-color: var(--blue-border-dark); } .good__img-areas { cursor: pointer; } /* test */ /* select */ select:hover { background-color: #fff; border: none; } /* used in js */ .footer { display: none; } /* goods */ .showcase .orbit-container .orbit-slides-container img { width: 100%; max-height: initial; } .product-card .orbit-container { border-radius: 16px; background: white; /*linear-gradient(90deg, rgba(149,149,149,1) 0%, rgba(50,50,50,1) 100%);*/ } /*input[type="text"] { box-shadow: none; }*/ .new_menu_fix { display: inherit !important; } /* kill it later ... ? */ .menu__new .arrow-up { top: 128px; } /* check it later */ .switch_to_plitka { display: none; } @media only screen and (max-width: 46.063em) { .category { background: inherit; } } .showcase { position: relative; } /* fog good dealer remain */ .good__remain { border-radius: 4px; top: 32px; font-size: 14px; } .good__props_count { border-radius: 4px; top: 56px; font-size: 14px; } .good__remain_dealer { border-radius: 4px; } .red-label { color: var(--text-black); } .border { border: none; } #search_ac { margin-top: 0 !important; } /*.menu__new { margin: 0; }*/ .menu_new .menu__subitem span { line-height: 16px; } .menu_new .menu__subitem:hover { color: var(--text-blue) !important; } .menu_new .menu__subitem:hover img { filter: brightness(190%) hue-rotate(-12deg); } .items2024 .item2024 .image .play-video, .good__img_plitka .play-video { position: static !important; zoom: 0.8; } /* moved to good-right-corner-container */ .showcase .thumbnail { } .showcase .th { border: none; box-shadow: none; margin-right: 16px; margin-top: 16px; border-radius: 8px; overflow: hidden; } .showcase .th.active { box-shadow: 0 0 8px 2px var(--blue-border-dark); } .menu__new .top-bar-section > ul { height: auto; } .category ul li:hover { background: none; } table.goods_plitka { border-bottom: none !important; } table.goods_plitka td { border: none !important; width: 50%; } table.goods_plitka td:nth-of-type(1) { border: none !important; } .category li.current a { color: var(--text-black); } a { color: var(--text-black); } .items { font-size: 14px; padding: 0; } .menu__new .top-bar-section > ul { height: 126px !important; } .preview-basket { top: 0px !important; /* in mini-basket-container */ z-index: 9; } .menu__new .f-dropdown.large.content.row.open { z-index: 6; } .menu__new .f-dropdown.large { margin-top: 7px; } label { font-style: italic; } input[readonly] { background-color: var(--input-readonly-background) !important; } input { border-radius: 2px !important; font-style: normal !important; font-weight: 500 !important; } .goods-tabs-image__item { display: inline-block; margin-right: 16px; margin-bottom: 16px; border-radius: 8px; overflow: hidden; } @media only screen and (max-width: 1023px) { button.tiny, .button.tiny { padding: 16px 32px; font-size: 1rem; } } .menu__new .top-bar-section > ul { overflow: visible; } @media only screen and (max-width: 46.063em) { .navigation li a { font-size: 14px; line-height: 24px; padding: 0.5rem 0.3rem 0.5625rem 0; } } .basket__link-to-homepage a { color: inherit; } @media only screen and (min-width: 1024px) { .good__img-areas-dots { justify-content: flex-end; right: 8px; } } * { -webkit-font-smoothing: antialiased; } button.pay, .button.pay { background: #2ba6cb; color: white; } table.goods_plitka td.plitka_2 { vertical-align: top; } @media (max-width: 1023px) { .pagination { display: none !important; } } .good-group__item .order .button { font-size: 16px; padding: 8px 16px; } /* baskets */ .preview-basket__good a { color: initial; } /* kill this 2 in style */ .preview-basket__good a:hover { color: var(--text-blue); } .mini-basket__cart-control-container { zoom: 1.08; } /* border-radius: 8px; - not working */ .mini-basket__update-cart, .mini-basket__remove-from-cart { background-color: var(--blue-header-bg); background-size: 50%; } .mini-basket__update-cart:hover { background-color: red; } .mini-basket__update-cart.fi-minus:before, .mini-basket__update-cart.fi-plus:before, .mini-basket__remove-from-cart:before { content: ""; } .mini-basket__update-cart.fi-minus, .mini-basket__update-cart.fi-plus, .mini-basket__remove-from-cart { border: initial; } .mini-basket__update-cart, .mini-basket__update-cart-inline { color: #ccc; cursor: pointer; } input.mini-basket__change-qty-cart { border-top: 1px solid var(--blue-header-bg) !important; border-bottom: 1px solid var(--blue-header-bg) !important; font-size: 17.6px; } .mini-basket__update-cart.fi-minus { border-top-left-radius: 8px; border-bottom-left-radius: 8px; background-image: url(/img/icons/cart-picker-minus.svg); background-size: 40%; background-repeat: no-repeat; background-position: center; } .mini-basket__update-cart.fi-minus:hover { background-color: var(--blue-border-dark); background-size: 40%; } .mini-basket__update-cart.fi-plus { border-top-right-radius: 8px; border-bottom-right-radius: 8px; background-size: 40%; background-image: url(/img/icons/cart-picker-plus.svg); background-repeat: no-repeat; background-position: center; } .mini-basket__update-cart.fi-plus:hover { background-color: var(--blue-border-dark); background-size: 40%; } .mini-basket__remove-from-cart.fi-x { border-top-left-radius: 8px; border-bottom-left-radius: 8px; background-size: 40%; background-image: url(/img/icons/cart-picker-cross.svg); background-repeat: no-repeat; background-position: center; } .mini-basket__remove-from-cart.fi-x:hover { background-image: url(/img/icons/cart-picker-cross-white.svg); background-size: 40%; } .preview-basket { border-radius: 16px; padding: 8px; width: 375px; } .preview-basket__good-description-name { font-size: 12px; height: 30px; display: -webkit-box; -webkit-line-clamp: 2; /*No of lines after which the ellipsis needs to be added*/ -webkit-box-orient: vertical; overflow: hidden; } .preview-basket__good-image img { width: 64px; height: 64px; border-radius: 8px; border: 1px solid #ddd; } .mini-basket__price { float: right; margin-top: 6px; } .preview-basket__button a.radius { border-radius: 8px; font-size: 20px; } .good__cart-control-container { border-radius: 8px; overflow: hidden; } .good__remove-from-cart-inline { width: 36px; height: 36px; background-image: url(/img/icons/cart-picker-cross.svg); background-color: var(--blue-header-bg); border: none; background-size: 40%; } .good__update-cart-inline { width: 36px; height: 36px; background-color: var(--blue-header-bg); border: none; background-size: 40%; } input.good__change-qty-cart-inline { width: 48px; height: 36px !important; font-size: 20px; color: var(--text-black); border-top: 1px solid var(--blue-header-bg) !important; border-bottom: 1px solid var(--blue-header-bg) !important; } .good__update-cart-inline.sub { background-image: url(/img/icons/cart-picker-minus.svg); background-size: 40%; } .good__update-cart-inline.add { background-image: url(/img/icons/cart-picker-plus.svg); background-size: 40%; } .good__update-cart-inline.sub:hover { background-color: var(--blue-border-dark); } .good__update-cart-inline.add:hover { background-color: var(--blue-border-dark); } .good__remove-from-cart-inline:hover { background-image: url(/img/icons/cart-picker-cross-white.svg); } .padder-8px { width: 100%; height: 8px; } .preloader-circled { width: 64px; height: 64px; position: fixed; z-index: 10; left: calc(50vw - 32px); top: calc(50vh - 90px); display: none; } .preloader-circled-filter { width: 64px; height: 64px; position: fixed; z-index: 10; right: 142px; top: calc(50% - 90px); } .arrow-up-site { width: 48px; height: 48px; border-radius: 24px; position: fixed; z-index: 10; left: 32px; bottom: 48px; cursor: pointer; background-color: white; background-position: center; background-repeat: no-repeat; background-image: url(/img/icons/arrow-up-site.svg); box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.35); } .arrow-up-site:hover { opacity: 0.8; } /* checkout */ .checkout-card { width: 100%; font-size: 12px; color: var(--text-black); clear: both; height: 88px; margin-bottom: 16px; } .checkout-card .img { float: left; width: 64px; height: 88px; background-size: contain; border-radius: 8px; overflow: hidden; } .checkout-card .block { margin-left: 16px; width: calc(100% - 16px - 64px); float: right; } .checkout-card .block .uno { width: 100%; clear: both; } .checkout-card .block .uno.header { font-size: 12px; line-height: 16px; height: 32px; /* ellipsis ... */ display: -webkit-box; font-weight: 500; /*max-width: 200px;*/ -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .checkout-card .days { padding: 2px 0 8px 0; font-size: 12px; color: var(--gray-lighter); } .checkout-card .discount { padding: 2px 0 8px 0; color: var(--green-discount); } .checkout-card .block .uno .left { float: left; } .checkout-card .block .uno .right { float: right; } .checkout-card .price { font-weight: bold; font-size: 16px; } .checkout-card .good__cart-control-container { zoom: 0.78; } .checkout-hr { margin: 12px 0 16px 0; width: 100%; clear: both; height: 1px; border-bottom: 1px solid var(--gray-border); } .cart_clear_checkout { float: right; color: var(--red-bg); } .checkout-itogo { padding: 0; font-size: 14px; margin-bottom: -2px; font-weight: bold; clear: both; }