:root {
--st-blue: #3c5e96;
--st-blue-hover: #253b60;
--st-bg: #f6f7f9;
--st-line: #eee;
--st-text: #303030;
--st-muted: #747b8f;
--st-radius: 10px;
--st-shadow: 0 1px 2px rgb(0 0 0 / 6%);
--st-touch: 44px;
--st-header-h: 56px;
--bottom-stack-h: 0px;
--st-font: "Roboto", sans-serif;
--st-font-head: "Montserrat", sans-serif;
}
html {
overflow-x: clip;
font-family: var(--st-font);
}
body {
font-family: var(--st-font);
color: var(--st-text);
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
button,
input,
select,
textarea {
font-family: inherit;
font-size: inherit;
}
h1,
h2,
h3,
.h1Style,
.h2Style,
.footerTitle,
.advTitle,
.itemPdpTitle,
.cart-added-title,
.newsPage-title,
.newsArticle-title,
.brandsPage-title,
.brandsPage-subtitle,
.brandCard-name {
font-family: var(--st-font-head) !important;
}
.itemBrand,
.itemCatalog--list .itemBrand,
.item.item--grid .itemBrand {
font-family: var(--st-font-head);
font-weight: 700;
}
.rubPrice,
.copPrice,
.item.item--grid .rubPrice,
.itemCatalog--list .rubPrice {
font-family: var(--st-font-head);
font-weight: 700;
}
.callMe-1,
.callMe-2,
.callMe-3,
.callMe-4 {
font-family: var(--st-font-head);
}
.callMeForm-input,
.callMeForm-btn {
font-family: var(--st-font);
}
.mainTextBlock,
.mainTextBlock *,
.newsDesc,
.newsTitle {
font-family: var(--st-font) !important;
}
.mainTextBlock h1,
.mainTextBlock h2,
.mainTextBlock h3,
.mainTextBlock h4,
.mainTextBlock .h1Style,
.mainTextBlock .h2Style,
.mainTextBlock .brandsPage-title,
.mainTextBlock .brandsPage-subtitle,
.mainTextBlock .brandCard-name,
.mainTextBlock .brandCard-letter {
font-family: var(--st-font-head) !important;
}
.newsTitle {
font-weight: 500 !important;
}
.itemInfoList-value {
font-weight: 700;
}
.select2-container,
.select2-container .select2-selection,
.select2-results__option,
.fancybox-content,
.fancybox-content h2 {
font-family: var(--st-font);
}
body.menu-open {
overflow: hidden;
}
/* --- Buttons & fields --- */
.blue-btn,
.filterResult,
.callMeForm-btn,
.shopBtn-2 {
background: var(--st-blue);
border: 1px solid var(--st-blue);
border-radius: var(--st-radius);
min-height: var(--st-touch);
box-sizing: border-box;
}
.blue-btn:hover,
.filterResult:hover,
.callMeForm-btn:hover,
.shopBtn-2:hover {
background: var(--st-blue-hover);
border-color: var(--st-blue-hover);
}
.filterReset,
.shopBtn-1,
.headCall {
background: transparent;
border: 1px solid var(--st-line);
color: var(--st-muted);
border-radius: var(--st-radius);
min-height: var(--st-touch);
box-sizing: border-box;
}
.filterReset:hover,
.shopBtn-1:hover {
background: var(--st-bg);
color: var(--st-text);
}
.filterSelect,
.filterInput {
background: #fff;
border: 1px solid var(--st-line);
border-radius: var(--st-radius);
min-height: var(--st-touch);
color: var(--st-text);
padding: 10px 14px;
}
.filterSelect:focus,
.filterInput:focus,
.headerSearch-input:focus {
outline: 2px solid var(--st-blue);
outline-offset: 1px;
border-color: var(--st-blue);
}
.social-link {
background: var(--st-blue);
border-radius: var(--st-radius);
min-width: var(--st-touch);
min-height: var(--st-touch);
width: var(--st-touch);
height: var(--st-touch);
}
.social-link--viber,
.social-link.social-link--viber {
background: #7360f2;
padding: 11px;
}
.social-link--viber img {
width: 22px;
height: 22px;
display: block;
}
.social-link--viber:hover,
.social-link.social-link--viber:hover {
background: #5b4bd4;
opacity: 1;
}
.mobileSocials {
display: flex;
gap: 8px;
margin-top: 16px;
}
/* --- Header --- */
.site-header {
position: sticky;
top: 0;
z-index: 1100;
background: #fff;
box-shadow: var(--st-shadow);
overflow: visible;
}
.headTop {
padding: 8px 0;
border-bottom: 1px solid var(--st-line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.searchToggle {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
background: transparent;
color: var(--st-text);
cursor: pointer;
}
.searchToggle svg {
display: block;
}
@media screen and (max-width: 991.98px) {
.headTop {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px 10px;
}
.headerSearch {
display: none;
}
.site-header.is-search-open .headTop {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"logo actions"
"search search";
}
.site-header.is-search-open .site-logo {
grid-area: logo;
}
.site-header.is-search-open .headerSearch {
display: flex;
grid-area: search;
width: 100%;
}
.site-header.is-search-open .headActions {
grid-area: actions;
justify-self: end;
}
.site-header.is-search-open .searchToggle {
display: none;
}
}
.site-logo {
flex: 0 0 auto;
display: flex;
align-items: center;
min-height: var(--st-touch);
}
.site-logo img {
height: 40px;
width: auto;
max-width: 152px;
}
.headerSearch {
flex: 1 1 auto;
display: none;
align-items: center;
min-width: 0;
position: relative;
background: var(--st-bg);
border: 1px solid var(--st-line);
border-radius: var(--st-radius);
}
.site-header.is-search-open .headerSearch {
display: flex;
}
.site-header.is-search-open .searchToggle {
color: var(--st-blue);
}
@media screen and (min-width: 992px) {
.searchToggle {
display: none;
}
.headerSearch {
display: flex;
flex: 1 1 auto;
max-width: 520px;
margin: 0 12px;
}
}
.headerSearch-input {
flex: 1 1 auto;
min-width: 0;
border: 0;
background: transparent;
padding: 10px 12px;
font-size: 16px;
min-height: var(--st-touch);
color: var(--st-text);
border-radius: var(--st-radius) 0 0 var(--st-radius);
}
.headerSearch-btn {
flex: 0 0 auto;
border: 0;
background: var(--st-blue);
color: #fff;
min-width: var(--st-touch);
min-height: var(--st-touch);
padding: 0 14px;
cursor: pointer;
border-radius: 0 var(--st-radius) var(--st-radius) 0;
font-size: 14px;
font-weight: 600;
}
.headerSearch-btn:hover {
background: var(--st-blue-hover);
}
.headerSearch-suggest {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
z-index: 1300;
background: #fff;
border: 1px solid var(--st-line);
border-radius: var(--st-radius);
box-shadow: 0 8px 24px rgb(0 0 0 / 10%);
max-height: min(70vh, 420px);
overflow-y: auto;
padding: 6px 0;
}
.headerSearch-suggest[hidden] {
display: none !important;
}
.headerSearch-suggest-status {
padding: 12px 14px;
font-size: 14px;
color: var(--st-muted);
}
.headerSearch-suggest-item {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 8px 14px;
border: 0;
background: transparent;
text-align: left;
text-decoration: none;
color: var(--st-text);
cursor: pointer;
}
.headerSearch-suggest-item:hover,
.headerSearch-suggest-item.is-active {
background: var(--st-bg);
}
.headerSearch-suggest-item.is-active {
outline: none;
}
.headerSearch-suggest-thumb {
flex: 0 0 48px;
width: 48px;
height: 48px;
object-fit: contain;
background: #fff;
border: 1px solid var(--st-line);
border-radius: 8px;
}
.headerSearch-suggest-body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.headerSearch-suggest-title {
font-size: 14px;
font-weight: 600;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.headerSearch-suggest-meta {
font-size: 12px;
color: var(--st-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.headerSearch-suggest-price {
flex: 0 0 auto;
font-size: 14px;
font-weight: 700;
color: var(--st-blue);
white-space: nowrap;
}
.headerSearch-suggest-footer {
display: block;
width: 100%;
padding: 10px 14px;
border: 0;
border-top: 1px solid var(--st-line);
margin-top: 4px;
background: transparent;
font-size: 13px;
font-weight: 600;
color: var(--st-blue);
text-decoration: none;
text-align: center;
cursor: pointer;
}
.headerSearch-suggest-footer:hover {
background: var(--st-bg);
}
.headerSearch-quick {
padding: 10px 14px 12px;
}
.headerSearch-quick-title {
font-size: 12px;
font-weight: 600;
color: var(--st-muted);
text-transform: uppercase;
letter-spacing: .02em;
margin-bottom: 10px;
}
.headerSearch-quick-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.headerSearch-chip {
border: 1px solid var(--st-line);
background: var(--st-bg);
color: var(--st-text);
border-radius: 999px;
padding: 8px 12px;
font-size: 13px;
line-height: 1.2;
cursor: pointer;
}
.headerSearch-chip:hover,
.headerSearch-chip:focus {
border-color: var(--st-blue);
color: var(--st-blue);
outline: none;
}
/* Search results page */
.search-results {
max-width: 920px;
}
.search-results-head {
margin-bottom: 20px;
}
.search-results-title {
font-family: var(--st-font-head);
font-size: 22px;
font-weight: 700;
color: var(--st-text);
margin: 0 0 6px;
}
.search-results-count {
margin: 0;
font-size: 14px;
color: var(--st-muted);
}
.search-results-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.search-results-item {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 14px;
background: #fff;
border: 1px solid var(--st-line);
border-radius: var(--st-radius);
text-decoration: none;
color: var(--st-text);
transition: border-color .15s ease, box-shadow .15s ease;
}
.search-results-item:hover {
border-color: var(--st-blue);
box-shadow: var(--st-shadow);
color: var(--st-text);
text-decoration: none;
}
.search-results-thumb {
flex: 0 0 72px;
width: 72px;
height: 72px;
object-fit: contain;
background: var(--st-bg);
border-radius: 8px;
}
.search-results-body {
flex: 1 1 auto;
min-width: 0;
}
.search-results-name {
display: block;
font-size: 16px;
font-weight: 600;
line-height: 1.35;
margin-bottom: 4px;
}
.search-results-meta {
display: block;
font-size: 13px;
color: var(--st-muted);
}
.search-results-price {
flex: 0 0 auto;
font-size: 18px;
font-weight: 700;
color: var(--st-blue);
white-space: nowrap;
}
.search-results-empty,
.search-results-error {
padding: 28px 20px;
background: var(--st-bg);
border-radius: var(--st-radius);
color: var(--st-muted);
text-align: center;
font-size: 15px;
}
.search-results-error {
color: #8a4b2a;
background: #fff6f0;
}
.headActions {
display: flex;
align-items: center;
gap: 6px;
flex: 0 0 auto;
margin-left: auto;
}
.basket,
.header-cart,
.cart-heading {
display: flex;
align-items: center;
justify-content: center;
}
.basket {
margin-left: 0;
}
.basketLink,
.openMobileMenu {
display: flex !important;
align-items: center;
justify-content: center;
min-width: var(--st-touch);
min-height: var(--st-touch);
cursor: pointer;
}
.cart-img-new {
position: relative;
display: inline-block;
}
.basketCount {
position: absolute;
top: -6px;
right: -8px;
background: var(--st-blue);
color: #fff;
border-radius: 99px;
min-width: 18px;
height: 18px;
font-size: 11px;
line-height: 18px;
text-align: center;
padding: 0 4px;
}
.openMobileMenu {
width: 44px;
height: 44px;
padding: 10px;
box-sizing: border-box;
object-fit: contain;
}
.basket img {
height: 24px;
width: auto;
margin-right: 0;
}
.header-cart,
.miniCart {
position: relative;
}
.miniCart-toggle {
display: flex !important;
align-items: center;
justify-content: center;
min-width: var(--st-touch);
min-height: var(--st-touch);
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
}
.miniCart-panel {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 1110;
display: none;
flex-direction: column;
width: min(calc(100vw - 16px), 360px);
max-height: min(78dvh, 560px);
background: #fff;
border-radius: 14px;
box-shadow: 0 18px 40px rgb(16 24 40 / 18%);
overflow: hidden;
}
.miniCart.is-open .miniCart-panel {
display: flex !important;
}
@media screen and (max-width: 991.98px) {
.miniCart-panel {
position: fixed;
top: calc(var(--st-header-h, 56px) + 8px);
left: 8px;
right: 8px;
width: auto;
max-height: calc(100dvh - var(--st-header-h, 56px) - 24px - env(safe-area-inset-bottom, 0px));
}
}
.miniCart-page-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 1090;
background: rgb(16 24 40 / 36%);
}
.miniCart-page-overlay.is-ghost-block {
pointer-events: none;
}
body.minicart-open .miniCart-page-overlay {
display: block;
}
@media screen and (min-width: 992px) {
.miniCart-page-overlay {
background: transparent;
}
}
.miniCart-head {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 14px;
border-bottom: 1px solid var(--st-line);
}
.miniCart-head strong {
font-size: 16px;
}
.miniCart-head span {
margin-right: auto;
color: var(--st-muted);
font-size: 13px;
}
.miniCart-close {
width: 36px;
height: 36px;
margin-left: auto;
border: 0;
border-radius: 8px;
background: #f4f6fa;
color: #303030;
font-size: 22px;
line-height: 1;
cursor: pointer;
}
.miniCart-list {
flex: 1 1 auto;
overflow-y: auto;
padding: 8px 12px;
}
.miniCart-item {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid var(--st-line);
}
.miniCart-item:last-child {
border-bottom: 0;
}
.miniCart-item-media {
flex: 0 0 56px;
}
.miniCart-item-media img {
display: block;
width: 56px;
height: 56px;
object-fit: contain;
background: #f4f6fa;
border-radius: 8px;
}
.miniCart-item-body {
min-width: 0;
flex: 1;
}
.miniCart-item-title {
display: flex;
flex-direction: column;
gap: 1px;
color: inherit;
text-decoration: none;
}
.miniCart-item-brand {
font-size: 14px;
font-weight: 700;
color: #303030;
}
.miniCart-item-model,
.miniCart-item-size {
font-size: 12px;
color: var(--st-muted);
}
.miniCart-item-model:empty,
.miniCart-item-size:empty {
display: none;
}
.miniCart-item-meta {
margin: 4px 0 0;
font-size: 13px;
font-weight: 500;
}
.miniCart-item-remove {
flex: 0 0 36px;
width: 36px;
height: 36px;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--st-muted);
cursor: pointer;
touch-action: manipulation;
}
.miniCart-item-remove:hover {
background: #f4f6fa;
color: #303030;
}
.miniCart-foot {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px 14px 14px;
border-top: 1px solid var(--st-line);
}
.miniCart-total {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 16px;
}
.miniCart-checkout,
.miniCart-continue {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: var(--st-touch);
padding: 10px 14px;
border-radius: 10px;
font-size: 15px;
font-weight: 500;
text-decoration: none;
cursor: pointer;
}
.miniCart-checkout {
border: 1px solid var(--st-blue);
background: var(--st-blue);
color: #fff;
}
.miniCart-checkout:hover {
background: var(--st-blue-hover);
border-color: var(--st-blue-hover);
color: #fff;
}
.miniCart-continue {
border: 1px solid #c5cedb;
background: #fff;
color: #303030;
}
.miniCart-empty {
padding: 20px 16px 24px;
text-align: left;
}
.miniCart-empty p {
margin: 0 0 8px;
color: var(--st-muted);
font-size: 14px;
}
body.minicart-open {
overflow: hidden;
}
.headPhones {
display: none;
position: relative;
flex-direction: column;
align-items: flex-start;
justify-content: center;
min-height: var(--st-touch);
padding: 2px 8px 2px 0;
line-height: 1.2;
}
.headPhones-label {
font-size: 12px;
color: #303030;
font-weight: 500;
white-space: nowrap;
}
.headPhone {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--st-text);
text-decoration: none;
font-weight: 500;
font-size: 15px;
white-space: nowrap;
}
.headPhones-caret {
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid #303030;
margin-left: 2px;
transition: transform 0.15s ease;
}
.headPhones-list {
display: none;
position: absolute;
top: calc(100% - 2px);
left: 0;
width: 320px;
background: #fff;
border: 1px solid #d5dbe6;
border-radius: 12px;
box-shadow: 0 12px 32px rgb(16 24 40 / 16%);
padding: 12px 0 14px;
z-index: 1300;
}
.headPhones-list::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -12px;
height: 12px;
}
.headPhones:hover .headPhones-list,
.headPhones:focus-within .headPhones-list {
display: block;
}
.headPhones:hover .headPhones-caret,
.headPhones:focus-within .headPhones-caret {
transform: rotate(180deg);
}
.headPhones-pop-title {
padding: 0 16px 10px;
margin-bottom: 4px;
border-bottom: 1px solid var(--st-line);
font-size: 13px;
font-weight: 500;
color: var(--st-text);
letter-spacing: 0.01em;
}
.headPhones-item {
display: flex;
flex-direction: column;
gap: 2px;
padding: 10px 16px;
text-decoration: none;
color: var(--st-text);
}
.headPhones-item:hover {
background: var(--st-bg);
}
.headPhones-item-num {
font-weight: 500;
font-size: 15px;
color: var(--st-text);
}
.headPhones-item:hover .headPhones-item-num {
color: var(--st-blue);
}
.headPhones-item-addr {
font-size: 13px;
color: #303030;
font-weight: 400;
}
.headPhones-info {
margin: 8px 12px 0;
padding: 10px 12px;
background: #f4f6fa;
border-radius: 10px;
}
.headPhones-info-row + .headPhones-info-row {
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid #e4e8f0;
}
.headPhones-info-label {
display: block;
margin-bottom: 2px;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.02em;
text-transform: uppercase;
color: #5a6478;
}
.headPhones-info-value {
display: block;
font-size: 14px;
line-height: 1.4;
font-weight: 500;
color: #303030;
}
.headPhones-callback {
display: flex;
align-items: center;
justify-content: center;
width: calc(100% - 32px);
margin: 10px 16px 0;
min-height: 40px;
padding: 8px 12px;
border-radius: 10px;
background: var(--st-blue);
border: 1px solid var(--st-blue);
color: #fff;
font: inherit;
font-weight: 500;
font-size: 14px;
text-decoration: none;
cursor: pointer;
}
.headPhones-callback:hover {
background: var(--st-blue-hover);
border-color: var(--st-blue-hover);
color: #fff;
}
.headCall {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 14px;
text-decoration: none;
color: var(--st-blue);
font-weight: 500;
}
.embla {
position: relative;
width: 100%;
overflow: hidden;
}
.embla__viewport {
overflow: hidden;
width: 100%;
}
.embla__container {
display: flex;
touch-action: pan-y pinch-zoom;
}
.embla__slide {
flex: 0 0 100%;
min-width: 0;
}
.embla__prev,
.embla__next {
position: absolute;
top: 50%;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
background: transparent;
transform: translateY(-50%);
cursor: pointer;
}
.embla__prev {
left: 0;
}
.embla__next {
right: 0;
}
.embla__prev:disabled,
.embla__next:disabled {
opacity: 0.35;
cursor: default;
}
.embla__prev[hidden],
.embla__next[hidden],
.embla__progress[hidden] {
display: none !important;
}
.embla__prev img,
.embla__next img {
display: block;
max-width: 24px;
height: auto;
}
.embla__progress {
height: 3px;
margin-top: 12px;
overflow: hidden;
border-radius: 2px;
background: rgba(0, 0, 0, 0.1);
}
.embla__progress-bar {
width: 100%;
height: 100%;
background: var(--st-blue, #1254a4);
transform: scaleX(0);
transform-origin: left center;
}
.embla--banner .embla__viewport {
border-radius: 5px;
}
.embla--banner .embla__slide img,
.embla--banner .embla__slide a {
display: block;
width: 100%;
}
.embla--banner .embla__slide img {
height: auto;
border-radius: 5px;
}
.embla--banner .embla__prev,
.embla--banner .embla__next {
display: none;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.embla--banner .embla__prev {
left: 12px;
}
.embla--banner .embla__next {
right: 12px;
}
@media (min-width: 992px) {
.embla--banner .embla__prev,
.embla--banner .embla__next {
display: flex;
}
}
.embla--news .embla__slide {
flex: 0 0 100%;
}
.embla--news .embla__slide a {
display: block;
color: inherit;
text-decoration: none;
}
@media (min-width: 768px) {
.embla--news .embla__slide {
flex: 0 0 50%;
}
}
@media (min-width: 1200px) {
.embla--news .embla__slide {
flex: 0 0 33.333%;
}
}
.embla.swiperNews,
.embla.swiperLogo {
overflow: visible;
padding-left: 48px !important;
padding-right: 48px !important;
}
.embla--news .embla__prev,
.embla--logos .embla__prev {
left: 0;
}
.embla--news .embla__next,
.embla--logos .embla__next {
right: 0;
}
.embla--logos .embla__slide {
flex: 0 0 33.333%;
padding: 0 8px;
}
.embla--logos .embla__slide a {
display: flex;
align-items: center;
justify-content: center;
min-height: 48px;
}
.embla--logos .embla__slide img {
display: block;
max-width: 100%;
height: auto;
max-height: 40px;
margin: 0 auto;
}
@media (min-width: 640px) {
.embla--logos .embla__slide {
flex: 0 0 16.666%;
}
}
.embla--goods .embla__prev,
.embla--goods .embla__next {
position: static;
transform: none;
}
.embla--goods .embla__slide {
flex: 0 0 100%;
}
@media (min-width: 480px) {
.embla--goods .embla__slide {
flex: 0 0 33.333%;
}
}
@media (min-width: 768px) {
.embla--goods .embla__slide {
flex: 0 0 25%;
}
}
.itemsBlock-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.itemsBlock-head .h2Style {
margin: 0;
min-width: 0;
flex: 1 1 auto;
font-size: 22px;
line-height: 1.2;
}
.itemsBlock-nav {
display: flex;
align-items: center;
gap: 4px;
flex: 0 0 auto;
}
.embla--hits {
overflow: visible;
}
.embla--hits .embla__viewport {
overflow: hidden;
}
.embla--hits .embla__container {
align-items: stretch;
margin-left: -6px;
margin-right: -6px;
}
.embla--hits .embla__slide {
flex: 0 0 85%;
min-width: 0;
padding: 0 6px;
display: flex;
}
.embla--hits .item.item--grid {
margin-bottom: 0;
}
.embla--hits .embla__prev,
.embla--hits .embla__next {
position: static;
transform: none;
width: var(--st-touch);
height: var(--st-touch);
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 4px rgb(16 24 40 / 12%);
}
.embla--hits .embla__progress {
margin-top: 10px;
}
@media screen and (min-width: 576px) {
.embla--hits .embla__slide {
flex: 0 0 50%; /* 2 */
}
.itemsBlock-head .h2Style {
font-size: 26px;
}
}
@media screen and (min-width: 768px) {
.embla--hits .embla__slide {
flex: 0 0 33.333%; /* 3 */
}
}
@media screen and (min-width: 992px) {
.embla--hits .embla__slide {
flex: 0 0 25%; /* 4 */
}
}
@media screen and (min-width: 1200px) {
.embla--hits .embla__slide {
flex: 0 0 20%; /* 5 */
}
}
/* --- Desktop nav: no tiles --- */
.mnu {
min-height: 0;
margin-top: 4px;
margin-bottom: 4px;
}
.dropSection {
border: 0;
padding: 8px 10px;
border-radius: var(--st-radius);
margin-right: 4px;
}
.dropSection:hover,
.dropSection.open {
background: var(--st-bg);
}
.dropSection .dropIcon {
height: 22px;
}
.dropSection .dropList {
background: #fff;
border: 1px solid var(--st-line);
border-radius: var(--st-radius);
box-shadow: 0 8px 24px rgb(0 0 0 / 10%);
padding: 12px 16px;
}
.menuItemHead {
display: flex;
align-items: center;
gap: 10px;
}
.menuItemLink {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
flex: 1 1 auto;
}
.dropSection > div:first-child a,
.menuItemLink {
color: var(--st-text);
text-decoration: none;
font-weight: 500;
}
.menuExpand {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border: 0;
border-radius: 10px;
background: transparent;
color: inherit;
}
.menuExpand .arrow {
margin-left: 0;
}
/* --- Breadcrumbs (ul.breadcrumbs, CMS ul.breadcrumb, BS3 ol.breadcrumb) --- */
.breadcrumbs-nav,
.breadcrumb-block,
.B_crumbBox {
display: block;
width: 100%;
}
.light-grey-bg:has(.breadcrumb),
.light-grey-bg:has(.breadcrumbs),
.light-grey-bg:has(.breadcrumb-block) {
background: transparent;
}
.light-grey-bg:has(.breadcrumb-block) > .container-fluid {
padding-left: 0;
padding-right: 0;
}
ul.breadcrumbs,
ul.breadcrumb,
ol.breadcrumb {
--bs-breadcrumb-padding-x: 0;
--bs-breadcrumb-padding-y: 0;
--bs-breadcrumb-margin-bottom: 0;
--bs-breadcrumb-bg: transparent;
--bs-breadcrumb-divider: "";
--bs-breadcrumb-item-padding-x: 0;
overflow: visible;
display: flex;
align-items: center;
flex-wrap: wrap;
column-gap: 0;
row-gap: 2px;
margin: 10px 0 6px;
padding: 0;
list-style: none;
background: transparent;
font-size: 13px;
line-height: 1.35;
}
ul.breadcrumbs > li,
ul.breadcrumb > li,
ol.breadcrumb > li,
.breadcrumb-item {
float: none;
display: inline-flex;
align-items: center;
flex: 0 1 auto;
min-width: 0;
max-width: 100%;
padding: 0;
}
.breadcrumb-item + .breadcrumb-item {
padding-left: 0;
}
.breadcrumb-item + .breadcrumb-item::before {
display: none;
content: none;
padding: 0;
}
ul.breadcrumbs > li:not(.sep) ~ li:not(.sep)::before,
ul.breadcrumb > li ~ li::before,
ol.breadcrumb > li ~ li::before {
content: "›";
color: #c0c4ce;
margin: 0 8px;
font-size: 13px;
line-height: 1;
font-weight: 400;
}
ul.breadcrumbs a,
ul.breadcrumbs span,
ul.breadcrumb a,
ul.breadcrumb span,
ol.breadcrumb a,
ol.breadcrumb > li,
.B_crumbBox a,
.B_crumbBox span {
font-size: 13px;
font-weight: 400;
color: var(--st-muted);
text-decoration: none;
line-height: 1.35;
}
ul.breadcrumbs a,
ul.breadcrumb a,
ol.breadcrumb a,
.B_crumbBox a {
color: var(--st-muted);
border-radius: 4px;
transition: color 0.15s ease;
}
ul.breadcrumbs a:hover,
ul.breadcrumb a:hover,
ol.breadcrumb a:hover,
.B_crumbBox a:hover {
color: var(--st-blue);
text-decoration: none;
}
ul.breadcrumbs a:focus-visible,
ul.breadcrumb a:focus-visible,
ol.breadcrumb a:focus-visible,
.B_crumbBox a:focus-visible {
outline: 2px solid var(--st-blue);
outline-offset: 2px;
}
ul.breadcrumbs > li.active span,
ul.breadcrumbs > li.active,
ul.breadcrumb > li.active span,
ul.breadcrumb > li.active,
ol.breadcrumb > li.active,
.B_currentCrumb {
color: var(--st-text);
font-weight: 500;
}
.breadcrumbs .sep {
display: none;
}
.B_crumbBox {
display: flex;
flex-wrap: wrap;
align-items: center;
margin: 10px 0 6px;
padding: 0;
font-size: 13px;
color: #c0c4ce;
}
/* --- Filter tabs --- */
.filterTabs {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
width: 100%;
border: 1px solid var(--st-line);
border-radius: var(--st-radius);
padding: 4px !important;
background: #fff;
}
.filterTabs li {
float: none;
flex: 0 0 auto;
}
.filterTabs .nav-link {
min-height: var(--st-touch);
padding: 8px 14px;
border-radius: 8px;
white-space: nowrap;
color: var(--st-muted);
}
.filterTabs .nav-link.active,
.filterTabs .nav-link:hover {
background: var(--st-bg);
color: var(--st-text);
border-radius: 8px;
}
.filterField--producer {
min-width: 0;
}
.filterField--producer .select2-container {
width: 100% !important;
}
.filterRange {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.filterRange .filterInput,
.filterRange .filterSelect {
flex: 1 1 0;
min-width: 0;
width: auto;
margin-bottom: 0;
padding-left: 10px;
padding-right: 10px;
text-align: center;
}
.filterRange-sep {
flex: 0 0 auto;
color: var(--st-muted);
line-height: 1;
}
.filterField--size .filterSelect {
text-overflow: ellipsis;
}
.filter--collapsible.is-collapsed .filterInner {
display: none;
}
.filterToggle {
display: none;
width: 100%;
min-height: var(--st-touch);
border: 1px solid var(--st-line);
background: #fff;
border-radius: var(--st-radius);
color: var(--st-blue);
font-weight: 500;
margin-bottom: 12px;
cursor: pointer;
}
.h1margin {
margin-top: 12px;
margin-bottom: 12px;
}
/* --- Mobile menu --- */
.mobileMenuBlock {
position: fixed;
inset: 0;
z-index: 1200;
height: 100dvh;
display: flex;
align-items: stretch;
justify-content: flex-start;
background: rgb(15 23 42 / 46%);
backdrop-filter: blur(6px);
transition: opacity 0.2s ease, visibility 0.2s ease;
}
.mobileMenuBlock.close {
display: flex;
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.mobileMenuOverlay {
position: absolute;
inset: 0;
border: 0;
background: transparent;
padding: 0;
}
.mobileMenuPanel {
position: relative;
z-index: 1;
width: min(100%, 420px);
height: 100%;
overflow-y: auto;
background: linear-gradient(180deg, #101828 0%, #172033 100%);
color: #fff;
box-shadow: 0 18px 48px rgb(15 23 42 / 35%);
padding: calc(16px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
transform: translateX(0);
transition: transform 0.24s ease;
}
.mobileMenuBlock.close .mobileMenuPanel {
transform: translateX(-100%);
}
.mobileMenuHeader {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
}
.mobileMenuEyebrow {
font-size: 12px;
line-height: 1.3;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgb(255 255 255 / 62%);
}
.mobileMenuTitle {
margin-top: 4px;
font-size: 24px;
line-height: 1.15;
font-weight: 700;
}
.mobileMenuActions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 18px;
}
.mobileMenuAction {
display: flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 10px 14px;
border: 1px solid rgb(255 255 255 / 12%);
border-radius: 14px;
background: rgb(255 255 255 / 6%);
color: #fff;
text-decoration: none;
font-weight: 600;
text-align: center;
}
.mobileMenuAction--primary {
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
border-color: transparent;
}
.mobileNav {
margin-bottom: 24px;
}
.mobileMenuBlock .horizontalMenu {
display: flex;
flex-direction: column;
white-space: normal;
overflow: visible;
width: 100%;
gap: 8px;
margin: 0;
padding: 0;
}
.mobileMenuBlock .horizontalMenu li {
float: none;
width: 100%;
list-style: none;
}
.mobileMenuBlock .dropSection {
float: none;
width: 100%;
margin: 0;
color: #fff;
padding: 0;
border-radius: 18px;
background: rgb(255 255 255 / 6%);
border: 1px solid rgb(255 255 255 / 8%);
overflow: hidden;
}
.mobileMenuBlock .menuItemHead {
gap: 12px;
min-height: 60px;
padding: 8px 8px 8px 14px;
}
.mobileMenuBlock .menuItemLink span,
.mobileMenuBlock .dropSection > div:first-child a,
.mobileMenuBlock .dropSection > div:first-child span {
color: #fff;
}
.mobileMenuBlock .menuItemLink {
font-size: 16px;
line-height: 1.3;
font-weight: 600;
}
.mobileMenuBlock .dropIcon {
width: 22px;
height: 22px;
flex: 0 0 22px;
}
.mobileMenuBlock .menuExpand {
width: 44px;
height: 44px;
border-radius: 12px;
background: rgb(255 255 255 / 8%);
}
.mobileMenuBlock .dropSection.open .menuExpand {
background: rgb(37 99 235 / 22%);
}
.mobileMenuBlock .dropSection.open .menuExpand .arrow {
transform: rotate(180deg);
}
.mobileMenuBlock .menuExpand .arrow {
transition: transform 0.2s ease;
}
.mobileMenuBlock .dropSection .dropList {
position: static;
background: transparent;
border: 0;
box-shadow: none;
margin: 0;
padding: 0 8px 12px 14px;
}
.mobileMenuBlock .dropList ul {
display: grid;
gap: 8px;
margin: 0;
padding: 0 0 0 34px;
}
.mobileMenuBlock .dropList li {
margin: 0;
}
.mobileMenuBlock .dropList li a {
display: block;
color: rgb(255 255 255 / 84%);
text-decoration: none;
font-size: 14px;
line-height: 1.4;
}
.mobileContacts {
margin-top: 24px;
padding: 16px;
border: 1px solid rgb(255 255 255 / 10%);
border-radius: 18px;
background: rgb(255 255 255 / 5%);
}
.mobileContacts .headInfo {
float: none;
margin: 0 0 12px;
justify-content: flex-start;
text-align: left;
color: #fff;
}
.mobileContacts a {
color: #fff;
}
.mobileCall {
display: flex;
align-items: center;
justify-content: center;
min-height: var(--st-touch);
background: var(--st-blue);
color: #fff !important;
text-decoration: none;
border-radius: var(--st-radius);
margin-top: 8px;
font-weight: 500;
}
.closeBtn {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
padding: 0;
min-width: var(--st-touch);
min-height: var(--st-touch);
border: 0;
border-radius: 14px;
background: rgb(255 255 255 / 8%);
box-sizing: border-box;
}
.closeBtn img {
display: block;
}
/* --- Catalog cards / chips --- */
.filterSoloAll {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
gap: 8px;
margin: 12px 0;
-webkit-overflow-scrolling: touch;
}
.filterSoloItem {
flex: 0 0 auto;
border-radius: var(--st-radius);
margin-right: 0;
}
.sortBloo {
border-radius: var(--st-radius);
border-color: var(--st-line);
}
.sortBloo-btn {
min-height: 36px;
line-height: 32px;
border-radius: 8px;
}
@media screen and (max-width: 991.98px) {
.mnu {
display: none;
}
.headCall,
.headPhone,
.headPhones,
.site-header .social-link {
display: none !important;
}
.mobileMenuBlock .social-link {
display: flex !important;
}
.mobileMenuActions {
grid-template-columns: 1fr;
}
.site-logo img {
max-width: 96px;
height: 28px;
}
.headerSearch-btn {
padding: 0 14px;
}
.openMobileMenu {
width: 44px;
height: 44px;
padding: 10px;
}
.filterTabs {
display: grid;
grid-template-columns: 1fr 1fr;
overflow: visible;
gap: 4px;
background: #fff;
border: 1px solid #c5cedb;
border-radius: 10px;
padding: 4px !important;
margin: 0 0 20px;
}
.filterTabs li,
.filterTabs .nav-item {
width: 100%;
min-width: 0;
float: none;
}
.filterTabs .nav-link {
width: 100%;
text-align: center;
padding: 6px 4px;
font-size: 12px;
min-height: 36px;
white-space: nowrap;
background: transparent;
color: #5a6478;
border: 0;
}
.filterTabs .nav-link.active {
background: var(--st-blue);
color: #fff;
font-weight: 500;
box-shadow: none;
}
@media (hover: hover) {
.filterTabs .nav-link:hover {
background: var(--st-blue);
color: #fff;
font-weight: 500;
box-shadow: none;
}
}
.filter.section {
padding-top: 8px;
padding-bottom: 12px;
}
.filter .h1Style {
font-size: 16px;
margin: 0 0 10px;
}
.filter--collapsible .filterHeading {
display: none;
}
.filter--collapsible .filterToggle {
display: block;
margin-bottom: 8px;
background: #fff;
border-color: #c5cedb;
}
.filter .col-lg-12:has(.filterTabs) {
background: #dce3ee;
border: 1px solid #b4c0d1;
border-radius: 12px;
padding: 8px;
box-shadow: 0 1px 3px rgb(16 24 40 / 10%);
}
.tab-content {
padding-top: 4px;
}
.filter .tab-pane:not(.active) {
display: none;
}
.filter .tab-pane.active {
display: block;
}
.filterForm {
padding: 0;
}
.filterForm .row {
--bs-gutter-x: 8px;
--bs-gutter-y: 0;
margin-left: -4px;
margin-right: -4px;
}
.filterField {
margin-bottom: 0;
}
.filterName {
display: none;
}
.filterField--range .filterName {
display: block;
margin: 0 0 4px;
font-size: 12px;
color: #5a6478;
}
.filterRange {
margin-bottom: 8px;
}
.filterSelect,
.filterInput,
#select_form .select-class {
background: #fff;
border: 1px solid #c5cedb;
border-radius: 8px;
min-height: 40px;
margin-bottom: 8px;
padding: 8px 12px;
font-size: 14px;
color: var(--st-text);
box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgb(16 24 40 / 4%);
}
.filterSelect,
#select_form .select-class {
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 10px;
padding-right: 28px;
}
.filterSelect:focus,
.filterInput:focus,
#select_form .select-class:focus {
border-color: var(--st-blue);
background-color: #fff;
}
.filterField .select2-container .select2-selection--single,
.filterField .select2-container .select2-selection--multiple {
min-height: 40px;
border: 1px solid #c5cedb;
border-radius: 8px;
background: #fff;
}
.filterBtns {
position: sticky;
bottom: 0;
z-index: 20;
background: #dce3ee;
padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
margin: 0;
box-shadow: none;
width: 100%;
max-width: 100%;
align-items: stretch;
gap: 8px;
}
.filterReset {
padding: 10px 12px;
margin-right: 0;
margin-bottom: 0;
background: #fff;
border-color: #c5cedb;
}
.filterResult {
flex: 1;
text-align: center;
padding: 10px 12px;
margin-right: 0;
margin-bottom: 0;
}
#select_form {
display: flex;
flex-wrap: wrap;
margin: 0 -4px;
}
#select_form > .row {
width: 100%;
max-width: 100%;
flex: 0 0 100%;
padding: 0;
}
#select_form > div:not(.row) {
width: 50%;
max-width: 50%;
flex: 0 0 50%;
padding: 0 4px;
margin: 0;
}
#select_form .fltr_block {
width: 100% !important;
position: relative;
margin-bottom: 0;
}
#select_form .fa-angle-down {
display: none;
}
.itemCatalog {
padding-bottom: 16px;
margin-bottom: 16px;
overflow: hidden;
}
.itemCatalog .itemBrand {
font-size: 16px;
line-height: 1.25;
}
.itemCatalog .starsBlock {
position: static;
margin: 0 0 0 8px;
font-size: 14px;
display: inline;
}
.itemCatalog .seasonImg {
width: 22px;
height: auto;
}
.itemCatalog .product-list-item,
.itemCatalog img {
max-width: 100%;
height: auto;
}
.itemCatalog .priceConfig {
flex-direction: column;
align-items: stretch;
gap: 10px;
height: auto;
}
.itemCatalog .pc-1,
.itemCatalog .pc-2 {
width: 100%;
margin: 0;
min-width: 0;
}
.itemCatalog .rubPrice {
font-size: 32px;
line-height: 32px;
}
.itemCatalog .copPrice {
font-size: 18px;
line-height: 18px;
}
.itemCatalog .shopBtn-1,
.itemCatalog .shopBtn-2,
.pc-2 .shopBtn-1,
.pc-2 .shopBtn-2 {
min-height: 40px;
font-size: 13px;
padding: 8px 6px;
box-sizing: border-box;
}
.mblinfoic {
flex-wrap: wrap;
gap: 6px;
}
.mblinfoic .infoIc {
flex: 1 1 30%;
margin-right: 0;
min-width: 0;
}
.item {
padding-right: 0;
}
.shopBtn-1,
.shopBtn-2 {
min-height: var(--st-touch);
font-size: 14px;
padding: 12px 8px;
}
.pc-2 .shopBtn-1,
.pc-2 .shopBtn-2 {
padding: 12px 8px;
}
ul.breadcrumbs,
ul.breadcrumb,
ol.breadcrumb,
.B_crumbBox {
margin: 8px 0 4px;
font-size: 12px;
}
ul.breadcrumbs a,
ul.breadcrumbs span,
ul.breadcrumb a,
ul.breadcrumb span,
ol.breadcrumb a,
ol.breadcrumb > li,
.B_crumbBox a,
.B_crumbBox span {
font-size: 12px;
}
ul.breadcrumbs > li:not(.sep) ~ li:not(.sep)::before,
ul.breadcrumb > li ~ li::before,
ol.breadcrumb > li ~ li::before {
margin: 0 6px;
}
.countInfo {
font-size: 15px;
}
.countInfo span {
margin-left: 8px;
}
.sortBloo {
float: none;
display: flex;
width: 100%;
overflow-x: auto;
margin-top: 8px;
position: relative;
z-index: 2;
}
.sortBloo-btn {
position: relative;
z-index: 1;
touch-action: manipulation;
}
}
@media screen and (max-width: 767.98px) {
.blue-btn {
padding: 12px 16px;
font-size: 14px;
min-height: var(--st-touch);
}
.section {
padding: 16px 0;
}
.filter.section {
padding-top: 8px;
padding-bottom: 12px;
}
}
@media screen and (min-width: 992px) {
.mnu .horizontalMenu {
overflow: visible;
justify-content: flex-start;
flex-wrap: nowrap;
gap: 2px;
}
.mnu .dropSection {
position: relative;
padding: 6px 8px;
margin-right: 0;
}
.mnu .dropSection > div:first-child {
min-width: 0;
}
.mnu .menuItemHead,
.mnu .menuItemLink {
gap: 6px;
}
.mnu .dropSection .dropIcon {
height: 18px;
width: 18px;
margin-right: 0;
}
.mnu .menuItemLink span {
font-size: 13px;
white-space: nowrap;
}
.mnu .dropSection .arrow {
transition: transform 0.15s ease;
margin-left: 2px;
height: 7px;
}
.mnu .menuExpand {
width: 22px;
height: 22px;
border-radius: 6px;
flex: 0 0 auto;
}
.mnu .dropSection .dropList {
display: none;
left: 0;
top: calc(100% - 2px);
margin-top: 0;
margin-left: 0;
min-width: 220px;
z-index: 1200;
}
.mnu .dropSection .dropList::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -10px;
height: 10px;
}
.mnu .dropSection:hover .dropList,
.mnu .dropSection:focus-within .dropList {
display: block;
}
.mnu .dropSection:hover .arrow,
.mnu .dropSection:focus-within .arrow {
transform: rotate(180deg);
}
.mobileMenuBlock:not(.close) {
display: none;
}
.openMobileMenu {
display: none !important;
}
.headPhones {
display: flex;
}
.filterToggle {
display: none !important;
}
.filter--collapsible.is-collapsed .filterInner {
display: block;
}
.headerSearch-input {
font-size: 14px;
}
.filter .col-lg-12:has(.filterTabs) {
background: #dce3ee;
border: 1px solid #b4c0d1;
border-radius: 12px;
padding: 16px 20px 16px;
box-shadow: 0 1px 3px rgb(16 24 40 / 10%);
}
.filterTabs {
display: flex;
width: 100%;
overflow: visible;
background: #fff;
border: 1px solid #b4c0d1;
margin-bottom: 12px;
}
.filterTabs li,
.filterTabs .nav-item {
flex: 1 1 0;
min-width: 0;
}
.filterTabs .nav-link {
width: 100%;
text-align: center;
color: #5a6478;
margin-right: 0;
}
.filterTabs .nav-link.active,
.filterTabs .nav-link:hover {
background: var(--st-blue);
color: #fff;
font-weight: 500;
}
.filter .tab-pane:not(.active) {
display: none;
}
.filter .tab-pane.active {
display: block;
}
.filterForm {
padding: 4px 0 0;
}
.filterForm .row {
align-items: flex-end;
}
.filterName {
display: block;
margin-bottom: 6px;
color: #303030;
}
.filterSelect,
.filterInput {
background: #fff;
border: 1px solid #b4c0d1;
color: var(--st-text);
margin-bottom: 16px;
}
.filterRange .filterInput,
.filterRange .filterSelect {
margin-bottom: 16px;
}
.filterRange-sep {
margin-bottom: 16px;
}
.filterField .select2-container .select2-selection--single,
.filterField .select2-container .select2-selection--multiple {
min-height: var(--st-touch);
border: 1px solid #c5cedb;
border-radius: var(--st-radius);
background: #fff;
}
.filterReset {
background: #fff;
border: 1px solid #b4c0d1;
color: #5a6478;
margin-right: 0;
margin-bottom: 8px;
padding: 12px 20px;
white-space: nowrap;
}
.filterResult {
flex: 0 0 auto;
margin-right: 0;
margin-bottom: 8px;
padding: 12px 24px;
text-align: center;
white-space: nowrap;
}
.filterBtns {
display: flex;
justify-content: flex-end;
align-items: flex-end;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 16px;
padding: 0;
}
#select_form .select-class,
#select_form select {
width: 100%;
min-height: var(--st-touch);
padding: 10px 14px;
margin-bottom: 16px;
background: #fff !important;
border: 1px solid #b4c0d1;
border-radius: var(--st-radius);
color: var(--st-text);
}
#select_form .fltr_block {
width: 100% !important;
position: relative;
}
}
/* --- Grid product card --- */
.item.item--grid {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
margin: 0 0 16px;
padding: 12px;
background: #fff;
border: 1px solid var(--st-line);
border-radius: var(--st-radius);
min-width: 0;
overflow: hidden;
}
.item-grid-admin {
margin: 0 0 8px;
font-size: 11px;
color: var(--st-muted);
text-align: center;
}
.item-grid-main {
display: flex;
flex-direction: column;
flex: 1 1 auto;
color: inherit;
text-decoration: none;
min-width: 0;
}
.item-grid-main:hover .itemBrand,
.item-grid-main:hover .itemModel {
color: var(--st-blue);
}
.item-grid-media {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
aspect-ratio: 335 / 280;
min-height: 0;
height: auto;
margin-bottom: 10px;
overflow: hidden;
background: #fff;
}
.item-grid-photo {
display: block;
width: 100%;
height: 100%;
max-width: 240px;
max-height: 100%;
object-fit: contain;
object-position: center;
margin: 0 auto;
}
.item-grid-badges {
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: flex;
flex-wrap: wrap;
gap: 4px;
max-width: 70%;
}
.item-grid-body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-width: 0;
}
.item.item--grid .itemBrand,
.item.item--grid .itemModel,
.item.item--grid .itemText {
text-transform: none;
overflow: hidden;
}
.item.item--grid .itemBrand {
margin: 0 0 2px;
font-size: 16px;
line-height: 1.25;
min-height: 1.25em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.item.item--grid .itemModel {
margin: 0 0 4px;
font-size: 14px;
line-height: 1.3;
min-height: 1.3em;
color: var(--st-muted);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.item.item--grid .itemText {
margin: 0 0 8px;
font-size: 14px;
line-height: 1.35;
min-height: 1.35em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.oldPriceHint {
display: inline-block;
font-size: 11px;
font-weight: 500;
line-height: 1.2;
color: var(--st-muted, #888);
white-space: nowrap;
}
.oldPriceWrap {
display: inline-flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
line-height: 1.15;
}
.pdp-page .pdpGrid-buy .oldPriceHint {
font-size: 12px;
}
.itemCatalog--list .oldPriceWrap {
align-items: flex-end;
text-align: right;
}
.itemCatalog--list .oldPriceHint {
font-size: 11px;
}
.item-grid-old {
margin: 0 0 2px;
min-height: 18px;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px;
}
.item.item--grid .mainPriceBlock {
justify-content: flex-start;
align-items: flex-start;
margin: auto 0 0;
}
.item.item--grid .rubPrice {
font-size: 28px;
line-height: 28px;
}
.item.item--grid .copPrice {
font-size: 16px;
line-height: 16px;
}
.item-grid-stock {
margin: 8px 0 0;
font-size: 12px;
line-height: 1.3;
color: var(--st-muted);
min-height: 1.3em;
}
.item-grid-buy {
margin-top: 12px;
}
.item-grid-compare {
display: flex;
align-items: center;
gap: 6px;
margin-top: 8px;
font-size: 13px;
color: var(--st-muted);
cursor: pointer;
}
.item-grid-compare input {
margin: 0;
}
.item.item--grid .shopBtn-1 {
display: block;
width: 100%;
background: var(--st-blue);
border: 1px solid var(--st-blue);
color: #fff;
font-size: 14px;
font-weight: 500;
min-height: var(--st-touch);
padding: 10px 12px;
border-radius: var(--st-radius);
}
.item.item--grid .shopBtn-1:hover {
background: var(--st-blue-hover);
border-color: var(--st-blue-hover);
color: #fff;
}
.seasonChip {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 2px;
padding: 5px;
border-radius: 999px;
background: rgb(255 255 255 / 94%);
box-shadow: 0 1px 4px rgb(16 24 40 / 14%);
line-height: 0;
}
.seasonChip .seasonImg {
position: static;
display: block;
width: 26px;
height: 26px;
max-width: none;
max-height: none;
object-fit: contain;
}
.pdpGallery-badges .seasonChip .seasonImg {
width: 32px;
height: 32px;
}
.pdpGallery-badges .seasonChip--all .seasonImg {
width: 40px;
height: 26px;
}
.itemQty {
margin-bottom: 8px;
}
.itemQty-label {
display: block;
margin: 0 0 6px;
font-size: 14px;
font-weight: 500;
color: var(--st-text);
}
.itemQty-stepper {
display: flex;
align-items: stretch;
max-width: 220px;
border: 1px solid var(--st-line);
border-radius: 10px;
overflow: hidden;
background: #fff;
}
.itemQty-btn {
flex: 0 0 44px;
width: 44px;
min-height: 44px;
padding: 0;
border: 0;
background: var(--st-bg);
color: var(--st-text);
font-size: 22px;
line-height: 1;
cursor: pointer;
}
.itemQty-btn:hover:not(:disabled) {
background: #eceff4;
}
.itemQty-btn:disabled {
color: #c5cad6;
cursor: default;
}
.itemQty-input {
flex: 1;
width: 100%;
min-width: 0;
min-height: 44px;
margin: 0;
padding: 0 8px;
border: 0;
border-left: 1px solid var(--st-line);
border-right: 1px solid var(--st-line);
background: #fff;
color: var(--st-text);
font-size: 16px;
font-weight: 700;
text-align: center;
-moz-appearance: textfield;
}
.itemQty-input::-webkit-outer-spin-button,
.itemQty-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.itemQty-hint {
margin: 6px 0 0;
font-size: 12px;
line-height: 1.3;
color: var(--st-muted);
}
.itemPdpTitle {
margin: 0 0 8px;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
}
.itemPdpTitle .itemBrand,
.itemPdpTitle .itemModel,
.itemPdpTitle .itemText {
display: block;
margin: 0 0 2px;
}
.pdpUnderTitle:empty {
display: none;
}
.pdpUnderTitle h4,
.pdpUnderTitle p {
margin: 0;
font-size: 13px;
font-weight: 400;
}
.itemPriceUnit {
margin: 4px 0 0;
font-size: 12px;
color: var(--st-muted);
}
.itemQty-total {
margin: 6px 0 8px;
font-size: 13px;
font-weight: 500;
color: var(--st-text);
}
.priceConfig .shopBtn-1 {
background: var(--st-blue);
border-color: var(--st-blue);
color: #fff;
}
.priceConfig .shopBtn-1:hover {
background: var(--st-blue-hover);
border-color: var(--st-blue-hover);
color: #fff;
}
.priceConfig .shopBtn-2 {
background: transparent;
border: 1px solid var(--st-line);
color: var(--st-text);
}
.priceConfig .shopBtn-2:hover {
background: var(--st-bg);
color: var(--st-text);
}
.itemInfoBlock-2 .blue-font {
display: inline-block;
margin-top: 4px;
color: var(--st-blue);
font-size: 12px;
text-decoration: none;
}
.itemInfoBlock-2 .blue-font:hover {
text-decoration: underline;
}
.itemInfoBlock-2 .itemQty {
margin-bottom: 10px;
}
.infoBlock-2 {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
overflow: visible;
}
.infoBlock-2 > span:first-child,
.infoBlock-2 > span:last-child {
float: none;
}
.pdpFitLink,
.pdpStoreLink {
display: inline-block;
color: var(--st-blue);
font-size: 12px;
text-decoration: none;
}
.pdpFitLink:hover,
.pdpStoreLink:hover {
text-decoration: underline;
}
.itemInfoBlock-3 .pdpFitLink,
.itemInfoBlock-3 .pdpStoreLink {
display: block;
margin-top: 4px;
}
@media screen and (max-width: 575.98px) {
.item.item--grid {
margin-bottom: 12px;
}
}
.itemCatalog .blorel .item-grid-badges {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.itemCatalog .shopBtn-1,
.itemCatalog .pc-2 .shopBtn-1 {
background: var(--st-blue);
border: 1px solid var(--st-blue);
color: #fff;
}
.itemCatalog .shopBtn-1:hover,
.itemCatalog .pc-2 .shopBtn-1:hover {
background: var(--st-blue-hover);
border-color: var(--st-blue-hover);
color: #fff;
}
.itemCatalog .shopBtn-2,
.itemCatalog .pc-2 .shopBtn-2 {
background: transparent;
border: 1px solid var(--st-line);
color: var(--st-text);
}
.itemCatalog .shopBtn-2:hover,
.itemCatalog .pc-2 .shopBtn-2:hover {
background: var(--st-bg);
color: var(--st-text);
}
.itemCatalog--list {
display: grid;
grid-template-columns: minmax(300px, 1.05fr) 140px minmax(320px, 1.3fr) minmax(290px, 1fr);
grid-template-areas: "id perks specs buy";
gap: 12px 20px;
align-items: stretch;
width: 100%;
max-width: 100%;
padding: 16px 18px;
margin: 0 0 12px;
background: #fff;
border: 1px solid var(--st-line);
border-radius: 12px;
}
.itemCatalog--list:hover {
border-color: #c5cedb;
box-shadow: 0 10px 28px rgba(16, 24, 40, 0.06);
}
.itemCatalog--list .itemCatalog-id {
grid-area: id;
min-width: 0;
}
.itemCatalog--list .itemCatalog-head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
align-items: start;
margin-bottom: 8px;
}
.itemCatalog--list .itemCatalog-title {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
color: inherit;
text-decoration: none;
}
.itemCatalog--list .itemCatalog-title:hover .itemBrand,
.itemCatalog--list .itemCatalog-title:hover .itemModel {
color: var(--st-blue);
}
.itemCatalog--list .itemBrand,
.itemCatalog--list .itemModel,
.itemCatalog--list .itemText {
text-transform: none;
}
.itemCatalog--list .itemBrand {
font-size: 22px;
font-weight: 700;
line-height: 1.15;
letter-spacing: 0.01em;
text-transform: uppercase;
}
.itemCatalog--list .itemModel {
font-size: 15px;
line-height: 1.3;
color: var(--st-muted);
}
.itemCatalog--list .itemText {
font-size: 16px;
font-weight: 700;
line-height: 1.3;
}
.itemCatalog--list .itemCatalog-fitBadge {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 92px;
padding: 6px 8px;
border-radius: 8px;
background: #fff1f0;
color: #c0392b;
font-size: 10px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.02em;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
.itemCatalog--list .itemCatalog-fitBadge:hover {
background: #ffe4e1;
color: #a93226;
}
.itemCatalog--list .itemCatalog-media {
position: relative;
}
.itemCatalog--list .itemCatalog-photo {
display: flex;
align-items: center;
justify-content: center;
min-height: 260px;
overflow: hidden;
background: #fff;
}
.itemCatalog--list .product-list-item,
.itemCatalog--list .itemCatalog-photo img {
display: block;
width: 100%;
height: auto;
max-width: 100%;
max-height: 320px;
margin: 0;
object-fit: contain;
}
.itemCatalog--list .item-grid-badges {
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.itemCatalog--list .itemCatalog-compare {
display: flex;
align-items: center;
gap: 6px;
margin-top: 8px;
font-size: 13px;
color: var(--st-muted);
cursor: pointer;
}
.itemCatalog--list .itemCatalog-compare input {
margin: 0;
}
.itemCatalog--list .itemCatalog-perks {
grid-area: perks;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
align-content: start;
}
.itemCatalog--list .itemCatalog-perk {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
min-height: 72px;
padding: 8px 6px;
border: 1px solid var(--st-line);
border-radius: 8px;
color: var(--st-text);
text-align: center;
text-decoration: none;
}
.itemCatalog--list .itemCatalog-perk img {
width: 28px;
height: 28px;
object-fit: contain;
}
.itemCatalog--list .itemCatalog-perk-year {
font-size: 18px;
font-weight: 700;
line-height: 1;
color: var(--st-blue);
}
.itemCatalog--list .itemCatalog-perk-text {
font-size: 11px;
line-height: 1.25;
color: var(--st-text);
}
.itemCatalog--list .itemCatalog-specs {
grid-area: specs;
min-width: 0;
align-self: stretch;
}
.itemCatalog--list .itemInfoList {
display: grid;
grid-template-columns: 1fr;
margin: 0;
padding: 0;
list-style: none;
}
.itemCatalog--list .itemInfoList li {
display: flex;
gap: 8px;
align-items: baseline;
margin: 0;
padding: 6px 0;
overflow: visible;
border-bottom: none;
}
.itemCatalog--list .itemInfoList-name,
.itemCatalog--list .itemInfoList-value {
float: none;
font-size: 13px;
line-height: 1.35;
}
.itemCatalog--list .itemInfoList-name {
display: flex;
flex: 1;
min-width: 0;
align-items: baseline;
gap: 6px;
color: var(--st-muted);
font-weight: 400;
}
.itemCatalog--list .itemInfoList-name::after {
content: "";
flex: 1;
min-width: 12px;
border-bottom: 1px dotted #cfd6e0;
transform: translateY(-4px);
}
.itemCatalog--list .itemInfoList-value {
flex: 0 1 auto;
max-width: 55%;
font-weight: 700;
text-align: right;
}
.itemCatalog--list .itemCatalog-more {
display: inline-block;
margin-top: 10px;
color: var(--st-blue);
font-size: 13px;
text-decoration: none;
}
.itemCatalog--list .itemCatalog-more:hover {
text-decoration: underline;
}
.itemCatalog--list .itemCatalog-buy {
grid-area: buy;
display: flex;
flex-direction: column;
min-width: 0;
}
.itemCatalog--list .itemCatalog-form {
display: flex;
flex-direction: column;
align-items: stretch;
}
.itemCatalog--list .slBlock {
justify-content: space-between;
align-items: center;
margin-bottom: 2px;
}
.itemCatalog--list .oldPrice {
font-size: 18px;
font-weight: 500;
color: var(--st-muted);
}
.itemCatalog--list .mainPriceBlock {
justify-content: flex-start;
align-items: flex-start;
margin: 0 0 6px;
}
.itemCatalog--list .rubPrice {
font-size: 46px;
line-height: 0.95;
font-weight: 800;
color: #111;
letter-spacing: -0.04em;
}
.itemCatalog--list .copPrice {
font-size: 22px;
line-height: 1;
font-weight: 700;
color: #111;
}
.itemCatalog--list .textPrice {
font-size: 13px;
font-weight: 800;
color: #111;
}
.itemCatalog--list .itemCatalog-stock {
margin: 0 0 10px;
font-size: 13px;
color: var(--st-muted);
}
.itemCatalog--list .blue-font,
.itemCatalog--list a.blue-font {
display: inline-block;
margin: 0 0 8px;
color: var(--st-blue);
font-size: 13px;
font-weight: 500;
text-decoration: none;
}
.itemCatalog--list .blue-font:hover,
.itemCatalog--list a.blue-font:hover {
text-decoration: underline;
}
.itemCatalog--list .shopBtn-1,
.itemCatalog.itemCatalog--list .shopBtn-1 {
margin-bottom: 8px;
font-weight: 700;
}
.itemCatalog--list .shopBtn-2,
.itemCatalog.itemCatalog--list .shopBtn-2,
.itemCatalog.itemCatalog--list .pc-2 .shopBtn-2 {
background: var(--st-blue);
border: 1px solid var(--st-blue);
color: #fff;
font-weight: 700;
}
.itemCatalog--list .shopBtn-2:hover,
.itemCatalog.itemCatalog--list .shopBtn-2:hover,
.itemCatalog.itemCatalog--list .pc-2 .shopBtn-2:hover {
background: var(--st-blue-hover);
border-color: var(--st-blue-hover);
color: #fff;
}
.itemCatalog--list .itemCatalog-trustIcons {
display: flex;
gap: 6px;
margin-top: 12px;
padding: 8px 4px;
border: 1px solid var(--st-line);
border-radius: 8px;
}
.itemCatalog--list .itemCatalog-trustIcons > div {
flex: 1;
text-align: center;
}
.itemCatalog--list .itemCatalog-trustIcons img {
display: block;
width: 22px;
height: 22px;
margin: 0 auto 4px;
}
.itemCatalog--list .itemCatalog-trustIcons span {
display: block;
font-size: 10px;
line-height: 1.2;
color: var(--st-muted);
}
@media screen and (max-width: 1199.98px) {
.itemCatalog--list {
grid-template-columns: minmax(240px, 0.95fr) minmax(280px, 1.2fr) minmax(250px, 0.9fr);
grid-template-areas: "id specs buy";
}
.itemCatalog--list .itemCatalog-perks {
display: none;
}
}
@media screen and (max-width: 991.98px) {
.itemCatalog--list {
grid-template-columns: minmax(150px, 40%) minmax(0, 1fr);
grid-template-areas:
"id buy"
"specs specs";
gap: 10px 12px;
padding: 12px;
}
.itemCatalog--list .itemCatalog-trustIcons {
display: none;
}
.itemCatalog--list .rubPrice {
font-size: 36px;
line-height: 0.95;
font-weight: 800;
}
}
@media screen and (max-width: 575.98px) {
.itemCatalog--list {
grid-template-columns: minmax(120px, 38%) minmax(0, 1fr);
padding: 10px;
gap: 8px 10px;
}
.itemCatalog--list .itemCatalog-fitBadge {
display: none;
}
.itemCatalog--list .itemCatalog-head {
grid-template-columns: 1fr;
margin-bottom: 6px;
}
.itemCatalog--list .itemBrand {
font-size: 16px;
}
.itemCatalog--list .itemModel,
.itemCatalog--list .itemText {
font-size: 13px;
}
.itemCatalog--list .itemInfoList {
grid-template-columns: 1fr;
}
.itemCatalog--list .rubPrice {
font-size: 28px;
}
.itemCatalog--list .copPrice {
font-size: 16px;
}
.itemCatalog--list .shopBtn-1,
.itemCatalog--list .shopBtn-2,
.itemCatalog.itemCatalog--list .shopBtn-1,
.itemCatalog.itemCatalog--list .shopBtn-2 {
min-height: 40px;
font-size: 13px;
padding: 8px 6px;
}
}
/* --- Checkout --- */
body:has(.checkoutPage) .consultBlock {
display: none;
}
body:has(.checkoutPage) .miniCart-panel,
body:has(.checkoutPage) .miniCart-page-overlay {
display: none !important;
}
body:has(.checkoutPage) .js-minicart-toggle {
pointer-events: none;
cursor: default;
}
body:has(.checkoutPage) .miniCart--badge .miniCart-toggle {
pointer-events: auto;
cursor: pointer;
text-decoration: none;
color: inherit;
}
.checkoutPage {
max-width: 1120px;
margin: 0 auto 24px;
}
.checkoutHead {
margin: 0 0 20px;
}
.checkoutTitle {
margin: 0 0 8px;
color: var(--st-text);
font-size: 28px;
font-weight: 700;
line-height: 1.2;
}
.checkoutLead {
margin: 0;
max-width: 640px;
color: var(--st-muted);
font-size: 15px;
line-height: 1.45;
}
.checkoutLayout {
display: grid;
gap: 20px;
}
@media (min-width: 992px) {
.checkoutLayout {
grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
align-items: start;
}
.checkoutAside {
order: 1;
}
.checkoutMain {
order: 2;
position: sticky;
top: calc(var(--st-header-h) + 12px);
}
}
.checkoutCard {
margin-bottom: 16px;
padding: 16px;
background: #fff;
border: 1px solid var(--st-line);
border-radius: var(--st-radius);
box-shadow: var(--st-shadow);
}
.checkoutCard-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.checkoutCard-title {
margin: 0;
font-size: 18px;
font-weight: 700;
line-height: 1.3;
color: var(--st-text);
}
.checkoutCard-link {
color: var(--st-blue);
font-size: 13px;
text-decoration: none;
white-space: nowrap;
}
.checkoutCard-link:hover {
text-decoration: underline;
}
.checkoutCard-hint {
margin: 0 0 14px;
color: var(--st-muted);
font-size: 13px;
line-height: 1.4;
}
.checkoutItems {
display: flex;
flex-direction: column;
gap: 12px;
}
.checkoutItem {
display: grid;
grid-template-columns: 80px minmax(0, 1fr);
gap: 12px;
padding-bottom: 12px;
border-bottom: 1px solid var(--st-line);
}
.checkoutItem:last-child {
padding-bottom: 0;
border-bottom: 0;
}
.checkoutItem-media {
display: flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
background: #eef1f5;
border: 1px solid var(--st-line);
border-radius: 8px;
overflow: hidden;
}
.checkoutItem-media img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
background: #fff;
}
.checkoutItem-title {
display: block;
margin: 0 0 4px;
color: var(--st-text);
font-size: 15px;
font-weight: 500;
line-height: 1.35;
text-decoration: none;
}
.checkoutItem-title:hover {
color: var(--st-blue);
}
.checkoutItem-unit {
margin: 0 0 8px;
color: var(--st-muted);
font-size: 13px;
}
.checkoutItem-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.checkoutItem-sum {
margin-left: auto;
font-size: 16px;
color: var(--st-text);
}
.checkoutQty {
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.checkoutQty-label {
margin: 0;
}
.checkoutQty-select {
min-width: 72px;
min-height: 36px;
padding: 6px 28px 6px 10px;
border: 1px solid var(--st-line);
border-radius: 8px;
background: #fff url("data:image/svg+xml;utf8,") no-repeat right 10px center;
background-size: 12px;
color: var(--st-text);
font-size: 14px;
font-weight: 500;
appearance: none;
cursor: pointer;
}
.checkoutQty-select:focus {
outline: 2px solid var(--st-blue);
outline-offset: 1px;
}
.checkoutQty-hint {
color: var(--st-muted);
font-size: 12px;
line-height: 1.3;
}
.checkoutItem-remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border: 0;
background: transparent;
color: var(--st-muted);
cursor: pointer;
}
.checkoutItem-remove:hover {
color: #b42318;
}
.checkoutCart-foot {
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid var(--st-line);
}
.checkoutSubtotal,
.checkoutTotal {
display: flex;
justify-content: space-between;
gap: 12px;
margin-bottom: 8px;
font-size: 14px;
color: var(--st-muted);
}
.checkoutTotal {
margin: 8px 0 0;
color: var(--st-text);
font-size: 16px;
}
.checkoutTotal strong {
font-size: 22px;
font-weight: 700;
}
.checkoutDeliveries:not(:has(input)) {
display: none;
}
.checkoutDeliveryNote {
margin-top: 10px;
color: var(--st-muted);
font-size: 13px;
line-height: 1.4;
}
.checkoutDeliveryNote summary {
cursor: pointer;
color: var(--st-blue);
font-weight: 500;
}
.checkoutDeliveryList {
margin: 8px 0 0;
padding-left: 18px;
}
.checkoutDeliveryList li {
margin-bottom: 4px;
}
.checkoutField {
display: block;
margin-bottom: 12px;
}
.checkoutField-label {
display: block;
margin-bottom: 6px;
color: var(--st-text);
font-size: 13px;
font-weight: 500;
}
.checkoutField-label abbr {
text-decoration: none;
color: #b42318;
}
.checkoutField-input {
width: 100%;
min-height: var(--st-touch);
padding: 10px 14px;
border: 1px solid var(--st-line);
border-radius: var(--st-radius);
background: #fff;
color: var(--st-text);
font-size: 16px;
box-sizing: border-box;
}
.checkoutField-textarea {
min-height: 88px;
resize: vertical;
}
.checkoutField-input:focus {
outline: 2px solid var(--st-blue);
outline-offset: 1px;
border-color: var(--st-blue);
}
.checkoutServices {
display: flex;
flex-direction: column;
gap: 8px;
margin: 0 0 14px;
}
.checkoutServices-title {
margin: 0;
font-size: 14px;
font-weight: 600;
color: var(--st-text);
}
.checkoutServices .checkoutCard-hint {
margin: 0;
}
.callback-modal-services {
display: flex;
flex-direction: column;
gap: 8px;
margin: 0;
}
.callback-modal-services-title {
margin: 0;
font-size: 13px;
font-weight: 600;
color: #303030;
}
.callback-modal-services-hint {
margin: 0;
font-size: 12px;
line-height: 1.35;
font-weight: 400;
color: #8b93a7;
}
.callback-modal-services .checkoutOptions {
gap: 6px;
}
.callback-modal-services .checkoutOption {
padding: 10px 12px;
}
.callback-modal-services .checkoutOption strong {
font-size: 13px;
}
.callback-modal-services .checkoutOption small {
font-size: 11px;
}
.checkoutOptions {
display: flex;
flex-direction: column;
gap: 8px;
}
.checkoutOption {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 0;
padding: 12px;
border: 1px solid var(--st-line);
border-radius: var(--st-radius);
background: #fff;
cursor: pointer;
}
.checkoutOption:hover {
border-color: #c5cedb;
}
.checkoutOption:has(input:checked) {
border-color: var(--st-blue);
background: #f3f6fb;
}
.checkoutOption input {
margin-top: 3px;
accent-color: var(--st-blue);
}
.checkoutOption span {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.checkoutOption strong {
font-size: 14px;
font-weight: 500;
color: var(--st-text);
}
.checkoutOption small {
color: var(--st-muted);
font-size: 12px;
line-height: 1.3;
}
.checkoutDeliveries .panel {
margin: 0 0 8px;
padding: 0;
border: 0;
background: transparent;
}
.checkoutDeliveries .panel > p {
margin: 0 0 8px;
font-size: 13px;
font-weight: 500;
}
.checkoutPickup {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 12px;
}
.checkoutPickup-title {
margin: 0;
font-size: 13px;
font-weight: 500;
color: var(--st-text);
}
.checkoutPickup-item {
display: flex;
flex-direction: column;
gap: 2px;
padding: 12px;
border: 1px solid var(--st-line);
border-radius: var(--st-radius);
background: var(--st-bg);
color: inherit;
text-decoration: none;
}
.checkoutPickup-item:hover {
border-color: var(--st-blue);
}
.checkoutPickup-item span {
font-size: 14px;
font-weight: 500;
color: var(--st-text);
}
.checkoutPickup-item small {
color: var(--st-muted);
font-size: 12px;
}
.checkoutSubmit {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
min-height: 48px;
margin-top: 4px;
padding: 12px 16px;
border: 1px solid var(--st-blue);
border-radius: var(--st-radius);
background: var(--st-blue);
color: #fff;
font-size: 16px;
font-weight: 500;
cursor: pointer;
}
.checkoutSubmit:hover {
background: var(--st-blue-hover);
border-color: var(--st-blue-hover);
}
.checkoutTrust,
.checkoutHelp {
margin: 10px 0 0;
color: var(--st-muted);
font-size: 13px;
line-height: 1.4;
text-align: center;
}
.checkoutHelp {
margin-top: 16px;
}
.checkoutHelp a {
color: var(--st-blue);
font-weight: 500;
text-decoration: none;
}
.checkoutForm-error {
margin: 0 0 10px;
padding: 10px 12px;
border-radius: 8px;
background: #fdecec;
color: #b42318;
font-size: 13px;
}
.checkoutEmpty,
.checkoutSuccess {
max-width: 640px;
margin: 8px auto 40px;
padding: 32px 28px 28px;
text-align: center;
background: #fff;
border: 1px solid var(--st-line);
border-radius: var(--st-radius);
box-shadow: var(--st-shadow);
}
.checkoutEmpty-icon,
.checkoutSuccess-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
margin-bottom: 16px;
border-radius: 50%;
background: var(--st-bg);
color: var(--st-blue);
}
.checkoutSuccess-icon {
background: #eaf6ee;
color: #1f7a45;
}
.checkoutEmpty .checkoutTitle,
.checkoutSuccess .checkoutTitle {
font-size: 28px;
}
.checkoutEmpty .checkoutLead,
.checkoutSuccess .checkoutLead {
margin: 0 auto 20px;
}
.checkoutSuccess-kicker {
margin: 0 0 6px;
color: var(--st-muted);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.checkoutSuccess-meta {
margin: 0 0 12px;
color: var(--st-text);
font-size: 15px;
}
.checkoutSuccess-meta span {
color: var(--st-muted);
}
.checkoutSuccess-steps {
display: grid;
gap: 10px;
margin: 0 0 22px;
padding: 0;
list-style: none;
text-align: left;
counter-reset: success-step;
}
.checkoutSuccess-steps li {
display: grid;
grid-template-columns: 28px minmax(0, 1fr);
gap: 4px 12px;
padding: 12px 14px;
border: 1px solid var(--st-line);
border-radius: 10px;
background: var(--st-bg);
}
.checkoutSuccess-steps li::before {
grid-row: 1 / span 2;
align-self: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--st-blue);
color: #fff;
font-size: 13px;
font-weight: 700;
line-height: 28px;
text-align: center;
content: counter(success-step);
counter-increment: success-step;
}
.checkoutSuccess-steps strong {
font-size: 14px;
color: var(--st-text);
}
.checkoutSuccess-steps span {
color: var(--st-muted);
font-size: 13px;
line-height: 1.35;
}
.checkoutSuccess-help {
margin: 18px 0 0;
color: var(--st-muted);
font-size: 14px;
}
.checkoutSuccess-help a {
color: var(--st-blue);
font-weight: 700;
text-decoration: none;
}
.checkoutEmpty-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.checkoutBtn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--st-touch);
padding: 10px 16px;
border-radius: var(--st-radius);
font-size: 14px;
font-weight: 500;
text-decoration: none;
}
.checkoutBtn--primary {
background: var(--st-blue);
border: 1px solid var(--st-blue);
color: #fff;
}
.checkoutBtn--primary:hover {
background: var(--st-blue-hover);
border-color: var(--st-blue-hover);
color: #fff;
}
.checkoutBtn--ghost {
background: #fff;
border: 1px solid var(--st-line);
color: var(--st-text);
}
.checkoutBtn--ghost:hover {
background: var(--st-bg);
color: var(--st-text);
}
@media screen and (max-width: 575.98px) {
.checkoutTitle {
font-size: 22px;
}
.checkoutItem {
grid-template-columns: 64px minmax(0, 1fr);
}
.checkoutItem-media {
width: 64px;
height: 64px;
}
.checkoutItem-sum {
margin-left: 0;
width: 100%;
}
.checkoutCard {
padding: 14px;
}
.checkoutEmpty,
.checkoutSuccess {
padding: 24px 16px;
}
.checkoutSuccess .checkoutTitle,
.checkoutEmpty .checkoutTitle {
font-size: 24px;
}
}
.itemCatalog:has(.pdpGrid) {
overflow: visible;
padding-bottom: 24px;
margin-bottom: 24px;
}
.pdpGrid {
display: grid;
gap: 12px 28px;
align-items: start;
}
.pdp-page .pdpGrid-title .itemPdpTitle {
margin: 0;
font-size: inherit;
font-weight: inherit;
line-height: 1.15;
}
.pdp-page .pdpGrid-title .itemBrand,
.pdp-page .pdpGrid-title .itemModel,
.pdp-page .pdpGrid-title .itemText {
display: block;
margin: 0;
}
.pdp-page .pdpGrid-title .itemBrand {
margin-bottom: 4px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--st-muted);
line-height: 1.2;
}
.pdp-page .pdpGrid-title .itemModel {
font-size: 28px;
font-weight: 700;
color: var(--st-text);
line-height: 1.15;
}
.pdp-page .pdpGrid-title .itemText {
margin-top: 8px;
font-size: 22px;
font-weight: 500;
line-height: 1.3;
}
.pdp-page .pdpGrid-title .arnd {
display: inline-block;
margin-left: 4px;
padding: 3px 8px;
border: 1px solid var(--st-line);
border-radius: 6px;
font-size: 15px;
font-weight: 500;
}
.pdpUnderTitle {
margin-top: 8px;
}
.pdp-page .pdpUnderTitle p,
.pdp-page .pdpUnderTitle a {
font-size: 15px;
}
.pdpGrid-buy.itemInfoBlock-2 {
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 12px;
padding: 16px;
background: #fff;
border: 1px solid var(--st-line);
border-radius: 12px;
}
.pdp-page .pdpGrid-buy .priceConfig {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.pdp-page .pdpGrid-buy .pc-1,
.pdp-page .pdpGrid-buy .pc-2 {
width: 100%;
margin: 0;
}
.pdp-page .pdpGrid-buy .slBlock {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 8px 10px;
margin: 0 0 6px;
width: auto;
}
.pdp-page .pdpGrid-buy .itemSale {
flex: 0 0 auto;
}
.pdp-page .pdpGrid-buy .oldPrice {
position: static;
display: inline;
font-size: 16px;
font-weight: 500;
color: var(--st-muted);
text-align: left;
text-decoration: line-through;
}
.pdp-page .pdpGrid-buy .oldPrice small {
position: static;
font-size: inherit;
}
.pdp-page .pdpGrid-buy .oldPrice:before {
content: none;
}
.pdp-page .pdpGrid-buy .mainPriceBlock {
display: flex;
justify-content: flex-start;
align-items: flex-start;
margin: 4px 0 0;
}
.pdp-page .pdpGrid-buy .rubPrice {
font-size: 40px;
line-height: 1;
font-weight: 700;
}
.pdp-page .pdpGrid-buy .copPrice {
font-size: 22px;
line-height: 1;
font-weight: 500;
}
.pdp-page .pdpGrid-buy .textPrice {
font-size: 16px;
}
.pdp-page .itemPriceUnit {
margin: 6px 0 0;
font-size: 14px;
}
.pdp-page .itemQty-total {
margin: 4px 0 0;
font-size: 16px;
}
.pdp-page .pdpGrid-buy .blue-font {
margin-top: 8px;
font-size: 15px;
}
.pdp-page .pdpGrid-buy .shopBtn-1,
.pdp-page .pdpGrid-buy .shopBtn-2 {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 48px;
margin: 0 0 8px;
padding: 12px 16px;
font-size: 16px;
font-weight: 700;
}
.pdp-page .pdpGrid-buy .shopBtn-2 {
margin-bottom: 0;
}
.pdp-page .pdpGrid-buy .itemQty-hint {
font-size: 13px;
}
.pdp-page .infoBlock-2 {
font-size: 15px;
gap: 8px;
}
.pdp-page .pdpFitLink,
.pdp-page .pdpStoreLink {
font-size: 15px;
}
.pdp-page .iconBlock-1 {
display: flex;
align-items: stretch;
justify-content: space-between;
gap: 8px;
margin-top: 4px;
padding: 12px 8px;
border: 1px solid var(--st-line);
border-radius: 8px;
}
.pdp-page .iconBlock-1-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
min-width: 0;
gap: 6px;
text-align: center;
}
.pdp-page .iconBlock-1 img {
display: block;
width: 28px;
height: 28px;
margin: 0;
object-fit: contain;
}
.pdp-page .iconBlock-1 span {
display: block;
font-size: 11px;
line-height: 1.25;
color: var(--st-text);
}
.pdpGallery-main {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
aspect-ratio: 1 / 1;
padding: 16px;
background: #fff;
border: 1px solid var(--st-line);
border-radius: 12px;
overflow: hidden;
box-sizing: border-box;
}
.pdp-page .itemCatalog .pdpGallery-main .pdpGallery-photo,
.pdpGallery-main .pdpGallery-photo,
.pdpGallery-main img:not(.seasonImg) {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
object-position: center;
}
.pdpGallery-badges {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
display: flex;
flex-wrap: wrap;
gap: 4px;
max-width: 75%;
pointer-events: none;
}
.pdpGallery-thumbs {
display: flex;
gap: 8px;
margin-top: 8px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.pdpGallery-thumb {
flex: 0 0 64px;
width: 64px;
height: 64px;
border: 1px solid var(--st-line);
border-radius: 8px;
overflow: hidden;
background: #fff;
}
.pdpGallery-thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.pdpGallery-thumb.is-active {
border-color: var(--st-blue);
}
.pdpGallery-compare {
position: static;
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 8px;
padding: 0;
background: transparent;
font-size: 14px;
cursor: pointer;
}
.pdpGallery-compare input {
margin: 0;
}
.pdpSpecs-title {
margin: 0 0 12px;
font-size: 22px;
font-weight: 700;
line-height: 1.2;
}
.pdpSpecs-badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 8px;
}
.pdp-page .pdpGrid-specs .itemInfoList {
display: grid;
grid-template-columns: 1fr;
gap: 0;
margin: 0;
padding: 0;
}
.pdp-page .pdpGrid-specs .itemInfoList li {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
margin: 0;
padding: 9px 0;
overflow: visible;
border-bottom: 1px solid var(--st-line);
}
.pdp-page .pdpGrid-specs .itemInfoList-name,
.pdp-page .pdpGrid-specs .itemInfoList-value {
float: none;
font-size: 15px;
line-height: 1.35;
}
.pdp-page .pdpGrid-specs .itemInfoList-name {
color: var(--st-muted);
font-weight: 400;
}
.pdp-page .pdpGrid-specs .itemInfoList-value {
color: var(--st-text);
font-weight: 700;
text-align: right;
}
.pdpStickyBar {
display: none;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 45;
align-items: center;
gap: 12px;
padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
background: #fff;
border-top: 1px solid var(--st-line);
box-shadow: 0 -6px 18px rgb(16 24 40 / 10%);
}
.pdpStickyBar-info {
min-width: 0;
flex: 1;
}
.pdpStickyBar-total {
display: block;
font-size: 18px;
line-height: 1.2;
white-space: nowrap;
}
.pdpStickyBar-hint {
display: block;
margin-top: 2px;
font-size: 12px;
color: var(--st-muted);
white-space: nowrap;
}
.pdpStickyBar .shopBtn-1 {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: auto;
min-width: 132px;
min-height: 44px;
margin: 0;
background: var(--st-blue);
border: 1px solid var(--st-blue);
color: #fff;
font-size: 15px;
font-weight: 700;
}
body.pdp-has-sticky {
padding-bottom: calc(var(--pdp-sticky-pad, 72px) + env(safe-area-inset-bottom, 0px));
}
@media screen and (max-width: 767.98px) {
.pdpGrid {
grid-template-areas:
"title"
"gallery"
"buy"
"specs";
}
.pdpGrid-title {
grid-area: title;
}
.pdpGrid-gallery {
grid-area: gallery;
}
.pdpGrid-buy {
grid-area: buy;
}
.pdpGrid-specs {
grid-area: specs;
}
.pdp-page .pdpGrid-title .itemModel {
font-size: 24px;
}
.pdp-page .pdpGrid-title .itemText {
font-size: 18px;
}
.pdp-page .pdpGrid-buy .rubPrice {
font-size: 36px;
}
.pdpStickyBar.is-visible {
display: flex !important;
}
}
@media screen and (min-width: 768px) {
.pdpGrid {
grid-template-columns: minmax(260px, 0.95fr) minmax(300px, 1.05fr);
grid-template-areas:
"gallery title"
"gallery buy"
"specs specs";
gap: 12px 24px;
}
.pdpGrid-title {
grid-area: title;
}
.pdpGrid-gallery {
grid-area: gallery;
}
.pdpGrid-buy {
grid-area: buy;
}
.pdpGrid-specs {
grid-area: specs;
padding-top: 4px;
}
.pdp-page .pdpGrid-specs .itemInfoList {
grid-template-columns: 1fr 1fr;
column-gap: 40px;
}
}
@media screen and (min-width: 992px) {
.pdpGrid {
grid-template-columns: minmax(320px, 0.9fr) minmax(380px, 1.1fr);
gap: 16px 32px;
}
}
.checkoutItem-title {
display: flex;
flex-direction: column;
gap: 2px;
}
.checkoutItem-brand {
font-weight: 500;
}
.checkoutItem-model,
.checkoutItem-size {
font-size: 13px;
font-weight: 400;
color: var(--st-muted);
}
.checkoutItem-model:empty,
.checkoutItem-size:empty {
display: none;
}
.checkoutCart .checkoutSubmit {
margin-top: 12px;
}
.checkoutCart .checkoutTrust {
margin-top: 8px;
}
@media (min-width: 992px) {
.checkoutSubmit--form,
.checkoutTrust--form,
.checkoutForm > .js-checkout-error {
display: none;
}
}
@media (max-width: 991.98px) {
.checkoutCart .checkoutSubmit,
.checkoutCart .checkoutTrust,
.js-checkout-error-aside {
display: none;
}
.checkoutSubmit--form {
position: sticky;
bottom: calc(12px + env(safe-area-inset-bottom, 0px));
z-index: 40;
box-shadow: 0 10px 24px rgb(16 24 40 / 18%);
}
}
.fancybox-callback .fancybox-bg,
.fancybox-cart-added .fancybox-bg,
.fancybox-sales .fancybox-bg,
.fancybox-container:has(#zakaz) .fancybox-bg,
.fancybox-container:has(#cart-added) .fancybox-bg,
.fancybox-container:has(#sales-cookie-modal) .fancybox-bg {
background: rgb(16 24 40 / 52%);
}
.fancybox-callback .fancybox-content,
.fancybox-cart-added .fancybox-content,
.fancybox-sales .fancybox-content,
.fancybox-container:has(#zakaz) .fancybox-content,
.fancybox-container:has(#cart-added) .fancybox-content,
.fancybox-container:has(#sales-cookie-modal) .fancybox-content,
#zakaz.fancybox-content,
#zakaz.callback-modal,
#cart-added.fancybox-content,
#cart-added.cart-added-modal,
#sales-cookie-modal.fancybox-content,
#sales-cookie-modal.sales-modal {
padding: 28px 24px 24px !important;
background: #fff !important;
box-shadow: 0 24px 48px rgb(16 24 40 / 18%);
border-radius: 16px;
}
.fancybox-callback .fancybox-close-small,
.fancybox-cart-added .fancybox-close-small,
.fancybox-sales .fancybox-close-small,
.fancybox-container:has(#zakaz) .fancybox-close-small,
.fancybox-container:has(#cart-added) .fancybox-close-small,
.fancybox-container:has(#sales-cookie-modal) .fancybox-close-small {
top: 12px;
right: 12px;
width: 36px;
height: 36px;
border-radius: 10px;
background: #f4f6fa;
color: #303030;
opacity: 1;
}
.fancybox-callback .fancybox-close-small:hover,
.fancybox-cart-added .fancybox-close-small:hover,
.fancybox-sales .fancybox-close-small:hover,
.fancybox-container:has(#zakaz) .fancybox-close-small:hover,
.fancybox-container:has(#cart-added) .fancybox-close-small:hover,
.fancybox-container:has(#sales-cookie-modal) .fancybox-close-small:hover {
background: #e8edf5;
color: #303030;
}
#zakaz.callback-modal,
.callback-modal {
width: min(100vw - 32px, 420px);
max-width: 420px;
padding: 28px 24px 24px;
background: #fff;
border-radius: 16px;
box-shadow: 0 24px 48px rgb(16 24 40 / 18%);
text-align: left;
color: var(--st-text);
}
.callback-modal-head {
margin-bottom: 20px;
padding-right: 28px;
}
.callback-modal-title {
margin: 0 0 6px;
font-size: 22px;
line-height: 1.25;
font-weight: 700;
color: #303030;
}
.callback-modal-lead {
margin: 0;
font-size: 14px;
line-height: 1.45;
color: #5a6478;
}
.callback-modal-product {
margin: 10px 0 0;
padding: 8px 10px;
background: #f4f6fa;
border-radius: 8px;
font-size: 13px;
line-height: 1.4;
color: #303030;
}
.callback-modal-qty {
max-width: 120px;
}
.callback-modal-qty-sum {
font-size: 14px;
font-weight: 600;
color: #303030;
}
.callback-modal-form {
display: flex;
flex-direction: column;
gap: 12px;
}
.callback-modal-field {
display: flex;
flex-direction: column;
gap: 6px;
margin: 0;
font-size: 13px;
font-weight: 500;
color: #303030;
}
.callback-modal-field i {
font-style: normal;
color: #c0392b;
}
.callback-modal-input,
.callback-modal .form-control {
width: 100%;
min-height: var(--st-touch);
padding: 10px 14px;
border: 1px solid #c5cedb;
border-radius: 10px;
background: #fff;
color: var(--st-text);
font-size: 15px;
font-weight: 400;
box-shadow: none;
}
.callback-modal-input::placeholder {
color: #8b93a7;
}
.callback-modal-input:focus {
outline: 2px solid var(--st-blue);
outline-offset: 1px;
border-color: var(--st-blue);
}
.callback-modal-textarea {
min-height: 88px;
resize: vertical;
}
.callback-modal-submit {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: var(--st-touch);
margin-top: 4px;
padding: 12px 16px;
border: 1px solid var(--st-blue);
border-radius: 10px;
background: var(--st-blue);
color: #fff;
font-size: 15px;
font-weight: 500;
cursor: pointer;
}
.callback-modal-submit:hover,
.callback-modal-submit:focus {
background: var(--st-blue-hover);
border-color: var(--st-blue-hover);
color: #fff;
}
.callback-modal-submit:disabled {
opacity: 0.7;
cursor: wait;
}
.callback-modal-note {
margin: 0;
font-size: 12px;
line-height: 1.4;
color: #5a6478;
font-weight: 400;
}
.callback-modal-error {
margin: 0;
font-size: 13px;
color: #b42318;
font-weight: 500;
}
.callback-modal-done {
padding: 12px 0 4px;
text-align: center;
}
.callback-modal-done-title {
margin: 0 0 6px;
font-size: 20px;
font-weight: 700;
color: #303030;
}
.callback-modal-done-text {
margin: 0;
font-size: 14px;
color: #5a6478;
}
@media (max-width: 575.98px) {
.fancybox-callback .fancybox-content,
.fancybox-cart-added .fancybox-content,
.fancybox-sales .fancybox-content,
.fancybox-container:has(#zakaz) .fancybox-content,
.fancybox-container:has(#cart-added) .fancybox-content,
.fancybox-container:has(#sales-cookie-modal) .fancybox-content,
#zakaz.fancybox-content,
#zakaz.callback-modal,
#cart-added.fancybox-content,
#cart-added.cart-added-modal,
#sales-cookie-modal.fancybox-content,
#sales-cookie-modal.sales-modal,
.callback-modal,
.cart-added-modal,
.sales-modal {
padding: 24px 18px 20px !important;
border-radius: 14px;
}
.callback-modal-title,
.cart-added-title,
.sales-modal-title {
font-size: 20px;
}
}
#cart-added.cart-added-modal,
.cart-added-modal {
width: min(100vw - 32px, 420px);
max-width: 420px;
text-align: left;
color: var(--st-text);
}
.cart-added-head {
margin-bottom: 16px;
padding-right: 28px;
}
.cart-added-title {
margin: 0 0 6px;
font-size: 22px;
line-height: 1.25;
font-weight: 700;
color: #303030;
}
.cart-added-lead {
margin: 0;
font-size: 14px;
line-height: 1.45;
color: #5a6478;
}
.cart-added-product {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
padding: 12px;
background: #f4f6fa;
border-radius: 12px;
}
.cart-added-product img {
flex: 0 0 72px;
width: 72px;
height: 72px;
object-fit: contain;
background: #fff;
border-radius: 8px;
}
.cart-added-info {
min-width: 0;
flex: 1;
}
.cart-added-name,
.cart-added-size,
.cart-added-meta {
margin: 0;
}
.cart-added-name {
font-size: 15px;
font-weight: 700;
line-height: 1.3;
color: #303030;
}
.cart-added-size {
margin-top: 2px;
font-size: 13px;
color: #5a6478;
}
.cart-added-meta {
margin-top: 6px;
font-size: 14px;
font-weight: 500;
color: #303030;
}
.cart-added-actions {
display: flex;
flex-direction: column;
gap: 8px;
}
.cart-added-checkout,
.cart-added-continue {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: var(--st-touch);
padding: 12px 16px;
border-radius: 10px;
font-size: 15px;
font-weight: 500;
text-decoration: none;
cursor: pointer;
}
.cart-added-checkout {
border: 1px solid var(--st-blue);
background: var(--st-blue);
color: #fff;
}
.cart-added-checkout:hover,
.cart-added-checkout:focus {
background: var(--st-blue-hover);
border-color: var(--st-blue-hover);
color: #fff;
}
.cart-added-continue {
border: 1px solid #c5cedb;
background: #fff;
color: #303030;
}
.cart-added-continue:hover,
.cart-added-continue:focus {
background: #f4f6fa;
color: #303030;
}
#sales-cookie-modal.sales-modal,
.sales-modal {
width: min(100vw - 32px, 440px);
max-width: 440px;
text-align: left;
color: var(--st-text);
}
.sales-modal-head {
margin-bottom: 16px;
padding-right: 28px;
}
.sales-modal-kicker {
margin: 0 0 8px;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--st-blue);
}
.sales-modal-title {
margin: 0;
font-size: 22px;
line-height: 1.25;
font-weight: 700;
color: #303030;
}
.sales-modal-body {
margin-bottom: 20px;
font-size: 15px;
line-height: 1.5;
color: #5a6478;
}
.sales-modal-body > *:first-child {
margin-top: 0;
}
.sales-modal-body > *:last-child {
margin-bottom: 0;
}
.sales-modal-body p,
.sales-modal-body div {
margin: 0 0 10px;
font-size: 15px;
line-height: 1.5;
color: #5a6478;
}
.sales-modal-body a {
color: var(--st-blue);
text-decoration: underline;
text-underline-offset: 2px;
}
.sales-modal-body img {
display: block;
max-width: 100%;
height: auto;
margin: 12px 0;
border-radius: 12px;
}
.sales-modal-actions {
display: flex;
flex-direction: column;
gap: 8px;
}
.sales-modal-submit {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: var(--st-touch);
padding: 12px 16px;
border: 1px solid var(--st-blue);
border-radius: 10px;
background: var(--st-blue);
color: #fff;
font-size: 15px;
font-weight: 500;
cursor: pointer;
}
.sales-modal-submit:hover,
.sales-modal-submit:focus {
background: var(--st-blue-hover);
border-color: var(--st-blue-hover);
color: #fff;
}
.cookie-policy-container {
position: fixed;
z-index: 50;
left: 16px;
bottom: calc(16px + var(--bottom-stack-h, 0px));
width: min(420px, calc(100vw - 280px));
padding: 0;
padding-bottom: env(safe-area-inset-bottom, 0px);
background: transparent;
box-sizing: border-box;
font-size: 14px;
line-height: 1.45;
color: var(--st-text);
}
.cookie-policy-card {
display: flex;
flex-direction: column;
gap: 10px;
padding: 16px;
background: #fff;
border: 1px solid var(--st-line);
border-radius: 16px;
box-shadow: 0 18px 40px rgb(16 24 40 / 16%);
}
.cookie-policy-top {
display: flex;
align-items: center;
gap: 10px;
}
.cookie-policy-icon {
flex: 0 0 40px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 10px;
background: #eef2f8;
color: var(--st-blue);
}
.cookie-policy-title {
margin: 0;
font-size: 16px;
line-height: 1.3;
font-weight: 700;
color: #303030;
}
.cookie-policy-text {
margin: 0;
font-size: 13px;
line-height: 1.5;
color: #5a6478;
}
.cookie-policy-text a {
color: var(--st-blue);
text-decoration: underline;
text-underline-offset: 2px;
}
.cookie-policy-buttons {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.cookie-policy-buttons button {
flex: 1 1 0;
min-width: 0;
min-height: var(--st-touch);
padding: 10px 16px;
border-radius: 10px;
font-size: 14px;
font-weight: 500;
text-transform: none;
cursor: pointer;
}
.cookie-policy-accept {
border: 1px solid var(--st-blue);
background: var(--st-blue);
color: #fff;
}
.cookie-policy-accept:hover,
.cookie-policy-accept:focus {
background: var(--st-blue-hover);
border-color: var(--st-blue-hover);
color: #fff;
}
.cookie-policy-decline {
border: 1px solid #c5cedb;
background: #fff;
color: #303030;
}
.cookie-policy-decline:hover,
.cookie-policy-decline:focus {
background: #f4f6fa;
color: #303030;
}
@media (max-width: 575.98px) {
.cookie-policy-container {
left: 12px;
right: auto;
width: calc(100vw - 148px);
bottom: calc(12px + var(--bottom-stack-h, 0px));
}
.cookie-policy-card {
padding: 14px;
border-radius: 14px;
}
}
/* --- Tire fitting booking --- */
body:has(.fittingPage) .consultBlock {
display: none;
}
.fittingPage {
max-width: 1120px;
margin: 0 auto 24px;
min-width: 0;
}
.fittingHead {
margin: 0 0 20px;
}
.fittingLayout {
display: grid;
gap: 20px;
min-width: 0;
}
.fittingLayout > * {
min-width: 0;
}
@media (min-width: 992px) {
.fittingLayout {
grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
align-items: start;
}
.fittingAside {
position: sticky;
top: calc(var(--st-header-h) + 12px);
}
}
.fittingPlace {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 12px;
padding: 12px;
border: 1px solid var(--st-blue);
border-radius: var(--st-radius);
background: #f3f6fb;
}
.fittingPlace-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
flex-shrink: 0;
border-radius: 8px;
background: #fff;
color: var(--st-blue);
}
.fittingPlace strong,
.fittingSwitch-text strong {
display: block;
color: var(--st-text);
font-size: 15px;
font-weight: 500;
line-height: 1.35;
}
.fittingPlace small,
.fittingSwitch-text small {
display: block;
margin-top: 2px;
color: var(--st-muted);
font-size: 12px;
line-height: 1.35;
}
.fittingSwitch {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 0;
padding: 12px;
border: 1px solid var(--st-line);
border-radius: var(--st-radius);
background: #fff;
cursor: pointer;
}
.fittingSwitch:hover {
border-color: #c5cedb;
}
.fittingSwitch:has(input:checked) {
border-color: var(--st-blue);
background: #f3f6fb;
}
.fittingSwitch input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.fittingSwitch-ui {
position: relative;
width: 44px;
height: 24px;
flex-shrink: 0;
margin-top: 2px;
border-radius: 999px;
background: #d9dee7;
}
.fittingSwitch-ui::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
box-shadow: var(--st-shadow);
}
.fittingSwitch input:checked + .fittingSwitch-ui {
background: var(--st-blue);
}
.fittingSwitch input:checked + .fittingSwitch-ui::after {
left: 23px;
}
.fittingSwitch input:focus-visible + .fittingSwitch-ui {
outline: 2px solid var(--st-blue);
outline-offset: 2px;
}
.fittingDates {
display: flex;
gap: 8px;
max-width: 100%;
overflow-x: auto;
padding: 2px 2px 10px;
margin: 0 0 8px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.fittingDates::-webkit-scrollbar {
height: 4px;
}
.fittingDates::-webkit-scrollbar-thumb {
background: #d5dbe4;
border-radius: 99px;
}
.fittingDate,
.fittingTime {
appearance: none;
border: 1px solid var(--st-line);
background: #fff;
color: var(--st-text);
cursor: pointer;
}
.fittingDate {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 92px;
padding: 10px 12px;
border-radius: var(--st-radius);
scroll-snap-align: start;
text-align: left;
}
.fittingDate-day {
font-size: 12px;
font-weight: 500;
color: var(--st-muted);
}
.fittingDate-num {
margin-top: 2px;
font-size: 15px;
font-weight: 700;
}
.fittingDate-note {
margin-top: 2px;
font-size: 11px;
color: var(--st-muted);
}
.fittingDate:hover,
.fittingTime:hover {
border-color: #c5cedb;
}
.fittingDate.is-active,
.fittingTime.is-active {
border-color: var(--st-blue);
background: var(--st-blue);
color: #fff;
}
.fittingDate.is-active .fittingDate-day,
.fittingDate.is-active .fittingDate-note {
color: rgba(255, 255, 255, 0.8);
}
.fittingDate:focus-visible,
.fittingTime:focus-visible {
outline: 2px solid var(--st-blue);
outline-offset: 1px;
}
.fittingCal {
margin: 0 0 12px;
padding: 12px;
border: 1px solid var(--st-line);
border-radius: var(--st-radius);
background: var(--st-bg);
}
.fittingCal-nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 10px;
}
.fittingCal-title {
margin: 0;
color: var(--st-text);
font-size: 15px;
font-weight: 700;
}
.fittingCal-navBtn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border: 1px solid var(--st-line);
border-radius: 8px;
background: #fff;
color: var(--st-text);
cursor: pointer;
}
.fittingCal-navBtn:hover:not(:disabled) {
border-color: var(--st-blue);
color: var(--st-blue);
}
.fittingCal-navBtn:disabled {
opacity: 0.35;
cursor: default;
}
.fittingCal-week,
.fittingCal-grid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 4px;
}
.fittingCal-week {
margin-bottom: 6px;
}
.fittingCal-week span {
text-align: center;
color: var(--st-muted);
font-size: 11px;
font-weight: 500;
}
.fittingCal-day {
min-height: 40px;
padding: 0;
border: 1px solid transparent;
border-radius: 8px;
background: #fff;
color: var(--st-text);
font-size: 14px;
font-weight: 500;
cursor: pointer;
}
.fittingCal-day.is-outside {
background: transparent;
color: #9aa3b2;
}
.fittingCal-day.is-today:not(.is-active) {
border-color: var(--st-blue);
}
.fittingCal-day.is-sunday,
.fittingCal-day.is-disabled {
background: transparent;
color: #b8bec8;
cursor: not-allowed;
}
.fittingCal-day:hover:not(:disabled):not(.is-active) {
border-color: #c5cedb;
}
.fittingCal-day.is-active {
border-color: var(--st-blue);
background: var(--st-blue);
color: #fff;
}
.fittingCal-day:focus-visible {
outline: 2px solid var(--st-blue);
outline-offset: 1px;
}
.fittingStatus {
margin: 0 0 10px;
min-height: 18px;
color: var(--st-muted);
font-size: 13px;
line-height: 1.35;
}
.fittingTimes {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
gap: 8px;
}
.fittingTime {
min-height: 40px;
padding: 8px 6px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
}
.fittingTimes-skeleton {
display: block;
height: 40px;
border-radius: 8px;
background: linear-gradient(90deg, #eef1f5 25%, #f7f8fa 50%, #eef1f5 75%);
background-size: 200% 100%;
animation: fittingPulse 1.1s ease infinite;
}
@keyframes fittingPulse {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
.fittingFields {
display: grid;
gap: 0 12px;
}
@media (min-width: 640px) {
.fittingFields {
grid-template-columns: 1fr 1fr;
}
}
.fittingField-error {
display: block;
margin-top: 4px;
color: #b42318;
font-size: 12px;
}
.checkoutField.is-invalid .checkoutField-input {
border-color: #d64545;
}
.fittingError {
margin: 0 0 12px;
padding: 10px 12px;
border-radius: 8px;
background: #fdecec;
color: #b42318;
font-size: 13px;
}
.fittingSummary {
margin: 0 0 14px;
padding: 12px;
border-radius: 8px;
background: var(--st-bg);
color: var(--st-text);
font-size: 15px;
font-weight: 500;
line-height: 1.4;
}
.fittingFacts {
margin: 0;
padding: 0;
list-style: none;
}
.fittingFacts li {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 8px 0;
border-top: 1px solid var(--st-line);
font-size: 13px;
}
.fittingFacts span {
color: var(--st-muted);
}
.fittingFacts strong {
text-align: right;
font-weight: 500;
color: var(--st-text);
line-height: 1.35;
}
.fittingCall {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: var(--st-touch);
margin-top: 12px;
border: 1px solid var(--st-line);
border-radius: var(--st-radius);
color: var(--st-blue);
font-size: 15px;
font-weight: 500;
text-decoration: none;
}
.fittingCall:hover {
background: var(--st-bg);
}
.fittingSteps {
margin: 0;
padding: 0 0 0 18px;
color: var(--st-text);
font-size: 14px;
line-height: 1.45;
}
.fittingSteps li + li {
margin-top: 8px;
}
.fittingSticky {
position: sticky;
bottom: 0;
z-index: 20;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 16px 0 0;
padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
background: #fff;
border-top: 1px solid var(--st-line);
}
.fittingSticky span {
color: var(--st-text);
font-size: 13px;
font-weight: 500;
line-height: 1.3;
}
.fittingSticky .checkoutBtn {
flex-shrink: 0;
}
.fittingSticky .checkoutBtn:disabled,
.fittingForm .checkoutSubmit:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.fittingFab {
position: fixed;
right: 16px;
bottom: calc(16px + var(--bottom-stack-h, 0px));
z-index: 46;
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 48px;
padding: 10px 16px 10px 10px;
padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
border-radius: 999px;
background: #ff5c1a;
color: #fff;
font-size: 14px;
font-weight: 500;
line-height: 1.2;
text-decoration: none;
box-shadow: 0 12px 28px rgb(255 92 26 / 38%);
transition: background 0.15s ease;
}
.fittingFab:hover,
.fittingFab:focus {
background: #e24b10;
color: #fff;
}
.fittingFab-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: rgb(255 255 255 / 16%);
}
.fittingFab-text {
padding-right: 4px;
}
body:has(.fittingPage) .fittingFab {
display: none;
}
body:has(.catalogItemsBlock) .fittingFab,
body:has(.checkoutPage) .fittingFab,
body:has(.goodsPage) .fittingFab,
body:has(.search-results) .fittingFab {
display: none;
}
@media (max-width: 575.98px) {
.fittingFab {
right: 12px;
bottom: calc(12px + var(--bottom-stack-h, 0px));
padding: 10px 14px 10px 8px;
padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}
.fittingFab-textFull {
display: none;
}
}
@media (min-width: 992px) {
.fittingSticky {
display: none;
}
}
@media screen and (max-width: 575.98px) {
.fittingPage {
margin-bottom: 8px;
}
.fittingDate {
min-width: 84px;
}
.fittingCal {
padding: 8px;
}
.fittingCal-day {
min-height: 36px;
font-size: 13px;
}
.fittingTimes {
grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
}
}
.compareHeader {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
color: var(--st-text);
text-decoration: none;
}
.compareHeader svg {
display: block;
}
.compareHeader-count {
position: absolute;
top: 4px;
right: 2px;
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 99px;
background: var(--st-blue);
color: #fff;
font-size: 10px;
line-height: 16px;
text-align: center;
}
.compareHeader.is-empty {
color: var(--st-muted);
}
.compareBar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 39;
padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
background: #fff;
border-top: 1px solid var(--st-line);
box-shadow: 0 -6px 18px rgb(16 24 40 / 10%);
}
.compareBar-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
max-width: 1200px;
margin: 0 auto;
}
.compareBar-text {
margin: 0;
font-size: 15px;
font-weight: 500;
}
.compareBar-note {
margin: 4px 0 0;
font-size: 12px;
color: #c0392b;
}
.compareBar-actions {
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
}
.compareBar-actions .shopBtn-1,
.compareBar-actions .shopBtn-2 {
min-height: 44px;
margin: 0;
padding: 10px 16px;
white-space: nowrap;
}
body.has-compare-bar {
padding-bottom: calc(var(--compare-bar-h, 72px) + env(safe-area-inset-bottom, 0px));
}
body.pdp-has-sticky.has-compare-bar {
padding-bottom: calc(var(--pdp-sticky-pad, 72px) + env(safe-area-inset-bottom, 0px));
}
.comparePage {
padding-top: 16px;
padding-bottom: 40px;
}
.compareEmpty {
max-width: 560px;
padding: 24px 0 48px;
}
.compareEmpty p {
margin: 0 0 12px;
color: var(--st-muted);
}
.compareMixed {
margin: 0 0 16px;
color: var(--st-muted);
font-size: 14px;
}
.compareTableWrap {
overflow-x: auto;
margin: 0 -16px;
padding: 0 16px;
}
.compareTable {
width: 100%;
min-width: 640px;
border-collapse: collapse;
background: #fff;
}
.compareTable th,
.compareTable td {
padding: 10px 12px;
border-bottom: 1px solid var(--st-line);
vertical-align: top;
text-align: left;
}
.compareTable-key {
width: 180px;
min-width: 140px;
color: var(--st-muted);
font-weight: 500;
background: var(--st-bg);
}
.compareTable-item {
min-width: 200px;
max-width: 260px;
}
.compareTable-photo {
display: block;
margin-bottom: 8px;
}
.compareTable-photo img {
display: block;
width: 100%;
height: 140px;
object-fit: contain;
}
.compareTable-title {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: 8px;
color: inherit;
text-decoration: none;
}
.compareTable-title:hover .itemBrand,
.compareTable-title:hover .itemModel {
color: var(--st-blue);
}
.compareTable-buy {
margin: 8px 0;
}
.compareTable-buy .shopBtn-1 {
width: 100%;
min-height: 40px;
}
.compareTable-remove {
display: inline-block;
padding: 0;
border: 0;
background: none;
color: var(--st-muted);
font-size: 13px;
text-decoration: underline;
cursor: pointer;
}
.compareTable-remove:hover {
color: #c0392b;
}
.compareTable tbody tr.is-diff td {
background: #fff8e8;
font-weight: 700;
}
@media screen and (max-width: 575.98px) {
.compareBar-inner {
flex-direction: column;
align-items: stretch;
}
.compareBar-actions .shopBtn-1,
.compareBar-actions .shopBtn-2 {
flex: 1;
}
}
.catalogEmpty {
margin: 24px 0 8px;
padding: 20px 24px;
font-size: 16px;
line-height: 1.45;
color: #1f2933;
background: #f4f6f8;
border-radius: 12px;
}
.catalogPromo {
padding: 8px 0 12px;
}
.catalogPromo-details {
margin: 0;
}
.catalogPromo-summary {
display: none;
}
.catalogPromo-summaryMain {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.catalogPromo-summaryKicker {
color: var(--st-muted);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.catalogPromo--winter .catalogPromo-summaryKicker,
.catalogPromo--tires.catalogPromo--winter .catalogPromo-summaryKicker {
color: #e24b10;
}
.catalogPromo-summaryTitle {
color: var(--st-text);
font-size: 14px;
font-weight: 600;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.catalogPromo-summaryActions {
display: inline-flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.catalogPromo-summaryCta {
display: none;
padding: 6px 10px;
border-radius: 999px;
background: var(--st-blue);
color: #fff;
font-size: 12px;
font-weight: 500;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
}
.catalogPromo--winter .catalogPromo-summaryCta,
.catalogPromo--tires .catalogPromo-summaryCta {
background: #ff5c1a;
}
.catalogPromo-chevron {
width: 8px;
height: 8px;
border-right: 2px solid var(--st-muted);
border-bottom: 2px solid var(--st-muted);
transform: rotate(45deg);
transition: transform 0.15s ease;
}
.catalogPromo-details[open] .catalogPromo-chevron {
transform: rotate(-135deg);
margin-top: 4px;
}
.catalogPromo-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 16px 20px;
background: #fff;
border: 1px solid var(--st-line);
border-left: 4px solid var(--st-blue);
border-radius: var(--st-radius);
box-shadow: var(--st-shadow);
}
.catalogPromo--winter .catalogPromo-inner,
.catalogPromo--tires.catalogPromo--winter .catalogPromo-inner {
border-left-color: #ff5c1a;
}
.catalogPromo--truck .catalogPromo-inner {
border-left-color: #1f2933;
}
.catalogPromo-copy {
min-width: 0;
}
.catalogPromo-kicker {
margin: 0 0 4px;
color: var(--st-muted);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.catalogPromo--winter .catalogPromo-kicker {
color: #e24b10;
}
.catalogPromo-title {
margin: 0 0 4px;
color: var(--st-text);
font-size: 20px;
font-weight: 700;
line-height: 1.25;
}
.catalogPromo-lead {
margin: 0;
color: var(--st-muted);
font-size: 14px;
line-height: 1.4;
}
.catalogPromo-facts {
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
margin: 10px 0 0;
padding: 0;
list-style: none;
}
.catalogPromo-facts li {
position: relative;
color: var(--st-text);
font-size: 13px;
font-weight: 500;
}
.catalogPromo-facts li + li::before {
content: "·";
position: absolute;
left: -11px;
color: var(--st-muted);
font-weight: 500;
}
.catalogPromo-cta {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--st-touch);
padding: 10px 18px;
border-radius: var(--st-radius);
background: var(--st-blue);
color: #fff;
font-size: 14px;
font-weight: 500;
line-height: 1.2;
text-align: center;
text-decoration: none;
white-space: nowrap;
}
.catalogPromo-cta:hover,
.catalogPromo-cta:focus {
background: var(--st-blue-hover);
color: #fff;
}
.catalogPromo--winter .catalogPromo-cta,
.catalogPromo--tires .catalogPromo-cta {
background: #ff5c1a;
}
.catalogPromo--winter .catalogPromo-cta:hover,
.catalogPromo--winter .catalogPromo-cta:focus,
.catalogPromo--tires .catalogPromo-cta:hover,
.catalogPromo--tires .catalogPromo-cta:focus {
background: #e24b10;
}
.catalogPromo--compact .catalogPromo-inner {
padding: 14px 18px;
}
.catalogPromo--compact .catalogPromo-title {
font-size: 18px;
}
@media (min-width: 768px) {
.catalogPromo-details > .catalogPromo-inner {
display: flex !important;
}
}
@media screen and (max-width: 767.98px) {
.catalogPromo {
padding: 4px 0 8px;
}
.catalogPromo-details {
border: 1px solid var(--st-line);
border-radius: var(--st-radius);
background: #fff;
box-shadow: var(--st-shadow);
overflow: hidden;
}
.catalogPromo-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 12px;
list-style: none;
cursor: pointer;
user-select: none;
}
.catalogPromo-summary::-webkit-details-marker {
display: none;
}
.catalogPromo-summaryCta {
display: inline-flex;
align-items: center;
}
.catalogPromo-details[open] .catalogPromo-summary {
border-bottom: 1px solid var(--st-line);
background: #fafbfd;
}
.catalogPromo-details:not([open]) .catalogPromo-inner {
display: none;
}
.catalogPromo-inner {
flex-direction: column;
align-items: stretch;
gap: 14px;
padding: 12px 14px 14px;
border: 0;
border-left: 0;
border-radius: 0;
box-shadow: none;
}
.catalogPromo-title {
font-size: 17px;
}
.catalogPromo-cta {
width: 100%;
white-space: normal;
}
}
.filterField--range.is-invalid .filterInput,
.filterField--range.is-invalid .filterSelect {
border-color: #c62828;
}
.filterRange-error {
display: block;
margin-top: 6px;
font-size: 13px;
line-height: 1.35;
color: #c62828;
}
.filterRange-error[hidden] {
display: none !important;
}
.podbor-api-result h2 { font-size: 20px; margin: 16px 0 12px; }
.podbor-api-result h4 { font-size: 18px; margin-bottom: 8px; }
.podbor-api-result h6 { margin-top: 12px; }
.podbor-api-result .par { display: block; color: var(--st-muted); font-size: 13px; margin-top: 4px; }
.podbor-api-result a { color: var(--st-blue); }
.podbor-error { margin: 16px 0; padding: 12px 14px; background: #fff3f3; border: 1px solid #f5c2c2; border-radius: var(--st-radius); color: #c62828; }
#result .tyres-factory { margin-bottom: 12px; }
/* --- News listing & article --- */
.newsPage {
padding: 8px 0 12px;
}
.newsPage-head {
max-width: 720px;
margin: 0 0 22px;
}
.newsPage-kicker {
margin: 0 0 6px;
color: var(--st-blue);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.newsPage-title {
margin: 0 0 8px;
color: var(--st-text);
font-size: 28px;
font-weight: 800;
line-height: 1.15;
}
.newsPage-lead {
margin: 0;
color: var(--st-muted);
font-size: 15px;
line-height: 1.45;
}
.newsPage-grid {
display: grid;
gap: 14px;
}
.newsCard {
min-width: 0;
background: #fff;
border: 1px solid var(--st-line);
border-radius: var(--st-radius);
box-shadow: var(--st-shadow);
overflow: hidden;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.newsCard:hover {
box-shadow: 0 10px 24px rgb(16 24 40 / 10%);
transform: translateY(-1px);
}
.newsCard-link {
display: flex;
flex-direction: column;
height: 100%;
color: inherit;
text-decoration: none;
}
.newsCard-media {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--st-bg);
}
.newsCard-media--empty::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgb(60 94 150 / 8%), rgb(60 94 150 / 18%)),
repeating-linear-gradient(-45deg, transparent, transparent 12px, rgb(60 94 150 / 5%) 12px, rgb(60 94 150 / 5%) 13px);
}
.newsCard--featured:has(.newsCard-media--empty) .newsCard-link {
display: flex;
}
.newsCard--featured .newsCard-media--empty {
min-height: 140px;
}
.newsCard-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.35s ease;
}
.newsCard-link:hover .newsCard-media img,
.newsCard-link:focus-visible .newsCard-media img {
transform: scale(1.04);
}
.newsCard-body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
padding: 14px 14px 16px;
min-width: 0;
}
.newsCard-date {
display: block;
margin: 0 0 6px;
color: var(--st-muted);
font-size: 13px;
line-height: 1.3;
}
.newsCard-title {
margin: 0 0 8px;
color: var(--st-text);
font-size: 18px;
font-weight: 700;
line-height: 1.3;
}
.newsCard-link:hover .newsCard-title,
.newsCard-link:focus-visible .newsCard-title {
color: var(--st-blue);
}
.newsCard-excerpt {
margin: 0 0 14px;
color: var(--st-muted);
font-size: 14px;
line-height: 1.45;
}
.newsCard-more {
margin-top: auto;
color: var(--st-blue);
font-size: 14px;
font-weight: 500;
}
.newsCard-more::after {
content: " →";
}
.newsArticle {
max-width: 760px;
padding: 4px 0 16px;
}
.newsArticle-head {
margin-bottom: 18px;
}
.newsArticle-title {
margin: 0 0 8px;
color: var(--st-text);
font-size: 28px;
font-weight: 800;
line-height: 1.2;
}
.newsArticle-body {
color: var(--st-text);
font-size: 16px;
line-height: 1.6;
}
.newsArticle-body img {
max-width: 100%;
height: auto;
border-radius: var(--st-radius);
}
.mainTextBlock .newsPage a,
.mainTextBlock .newsArticle a {
text-decoration: none;
}
.mainTextBlock .newsArticle-body a {
color: var(--st-blue);
text-decoration: underline;
}
@media screen and (min-width: 768px) {
.newsPage-title,
.newsArticle-title {
font-size: 36px;
}
.newsPage-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.newsCard--featured {
grid-column: 1 / -1;
}
.newsCard--featured .newsCard-link {
display: grid;
grid-template-columns: 1.15fr 1fr;
min-height: 280px;
}
.newsCard--featured .newsCard-media {
aspect-ratio: auto;
height: 100%;
min-height: 280px;
}
.newsCard--featured .newsCard-body {
padding: 28px 28px 24px;
justify-content: center;
}
.newsCard--featured .newsCard-title {
font-size: 26px;
}
.newsCard--featured .newsCard-excerpt {
font-size: 15px;
}
.newsCard--featured .newsCard-media--empty {
display: none;
}
.newsCard--featured:has(.newsCard-media--empty) .newsCard-link {
display: block;
}
}
@media screen and (min-width: 992px) {
.newsPage-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.newsCard--featured {
grid-column: 1 / -1;
}
}
.notFound {
text-align: center;
padding: 32px 0 48px;
}
.notFound-code {
margin: 0 0 8px;
font-family: var(--st-font-head) !important;
font-size: clamp(80px, 16vw, 128px) !important;
font-weight: 700 !important;
line-height: 0.9;
color: var(--st-blue);
letter-spacing: -0.04em;
}
.notFound-title {
margin: 8px 0 12px;
font-size: clamp(22px, 3vw, 32px) !important;
font-weight: 700;
}
.notFound-lead {
margin: 0 auto 24px;
max-width: 520px;
color: var(--st-muted);
font-size: 16px !important;
line-height: 1.45;
}
.notFound-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.notFound-actions .shopBtn-1,
.notFound-actions .shopBtn-2 {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
min-width: 180px;
min-height: var(--st-touch);
margin: 0;
padding: 10px 18px;
font-size: 15px;
text-decoration: none;
}
.notFound-actions .shopBtn-2 {
color: #fff;
}
.brandsPage {
padding: 4px 0 16px;
}
.brandsPage-head {
max-width: 720px;
margin: 0 0 22px;
}
.brandsPage-title {
margin: 0 0 8px;
color: var(--st-text);
font-size: 28px;
font-weight: 800;
line-height: 1.15;
}
.brandsPage-lead {
margin: 0 0 16px;
color: var(--st-muted);
font-size: 15px;
line-height: 1.45;
}
.brandsPage-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.brandsPage-actions .shopBtn-1,
.brandsPage-actions .shopBtn-2 {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
min-width: 0;
min-height: var(--st-touch);
margin: 0;
padding: 10px 16px;
font-size: 14px;
text-decoration: none;
}
.brandsPage-actions .shopBtn-2 {
color: #fff;
}
.brandsPage-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 16px;
margin: 0 0 12px;
}
.brandsSearch {
flex: 1 1 240px;
min-width: 0;
}
.brandsSearch-input {
width: 100%;
min-height: var(--st-touch);
padding: 10px 14px;
border: 1px solid var(--st-line);
border-radius: var(--st-radius);
background: var(--st-bg);
color: var(--st-text);
font-size: 16px;
}
.brandsSearch-input:focus {
outline: 2px solid var(--st-blue);
outline-offset: 1px;
background: #fff;
}
.brandsPage-count {
margin: 0;
color: var(--st-muted);
font-size: 13px;
font-weight: 500;
white-space: nowrap;
}
.brandsLetters {
display: flex;
flex-wrap: nowrap;
gap: 6px;
margin: 0 0 16px;
padding: 2px 0 8px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.brandsLetters-item {
flex: 0 0 auto;
min-width: 36px;
min-height: 36px;
padding: 0 10px;
border: 1px solid var(--st-line);
border-radius: 999px;
background: #fff;
color: var(--st-text);
font-size: 13px;
font-weight: 600;
line-height: 1;
cursor: pointer;
}
.brandsLetters-item:hover,
.brandsLetters-item:focus-visible {
border-color: var(--st-blue);
color: var(--st-blue);
}
.brandsLetters-item.is-active {
background: var(--st-blue);
border-color: var(--st-blue);
color: #fff;
}
.brandsGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.brandCard {
display: flex;
flex-direction: column;
min-width: 0;
min-height: 132px;
padding: 12px 12px 14px;
background: #fff;
border: 1px solid var(--st-line);
border-radius: var(--st-radius);
box-shadow: var(--st-shadow);
color: inherit;
text-decoration: none;
transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.brandCard:hover,
.brandCard:focus-visible {
border-color: rgb(60 94 150 / 28%);
box-shadow: 0 10px 24px rgb(16 24 40 / 10%);
transform: translateY(-1px);
}
.brandCard-logo {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 64px;
margin-bottom: 10px;
border-radius: 8px;
background: var(--st-bg);
overflow: hidden;
}
.brandCard-logo img {
display: block;
max-width: 86%;
max-height: 48px;
width: auto;
height: auto;
object-fit: contain;
}
.brandCard-letter {
display: none;
align-items: center;
justify-content: center;
color: var(--st-blue);
font-family: var(--st-font-head);
font-size: 28px;
font-weight: 800;
line-height: 1;
}
.brandCard-logo--empty .brandCard-letter {
display: flex;
}
.brandCard-name {
margin-top: auto;
color: var(--st-text);
font-size: 14px;
font-weight: 700;
line-height: 1.3;
word-break: break-word;
}
.brandCard:hover .brandCard-name,
.brandCard:focus-visible .brandCard-name {
color: var(--st-blue);
}
.brandsEmpty {
margin: 8px 0 0;
color: var(--st-muted);
font-size: 14px;
}
.brandsPage-text {
margin-top: 28px;
max-width: 760px;
color: var(--st-text);
font-size: 15px;
line-height: 1.55;
}
.mainTextBlock .brandsPage a {
text-decoration: none;
}
.mainTextBlock .brandsPage-text a {
color: var(--st-blue);
text-decoration: underline;
}
.brandsPage .visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@media screen and (min-width: 768px) {
.brandsPage-title {
font-size: 36px;
}
.brandsGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.brandCard {
min-height: 148px;
padding: 14px 14px 16px;
}
.brandsLetters {
flex-wrap: wrap;
overflow: visible;
padding-bottom: 0;
}
}
@media screen and (min-width: 992px) {
.brandsGrid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
.brandCard.is-hidden,
.brandsGrid.is-hidden {
display: none !important;
}
.brandsPage-subtitle {
margin: 0 0 14px;
color: var(--st-text);
font-size: 20px;
font-weight: 800;
line-height: 1.2;
}
.autoPodbor {
margin: 0 0 28px;
padding: 16px 16px 8px;
background: #fff;
border: 1px solid var(--st-line);
border-radius: var(--st-radius);
box-shadow: var(--st-shadow);
}
.autoPodbor .brandsPage-subtitle {
margin-bottom: 12px;
}
.autoPodbor .podbor-result {
margin-top: 8px;
}
@media screen and (min-width: 768px) {
.autoPodbor {
padding: 20px 20px 12px;
}
.brandsPage-subtitle {
font-size: 22px;
}
}
/* Mobile menu icon visibility fix */
.openMobileMenu {
border: 1px solid var(--st-line);
border-radius: 14px;
background: #fff;
box-shadow: 0 8px 20px rgb(15 23 42 / 10%);
}
.openMobileMenu img {
display: block;
width: 20px;
height: 14px;
}
.mobileMenuBlock .dropIcon {
filter: brightness(0) invert(1);
opacity: 0.92;
}
.mobileContacts .headInfo img {
filter: brightness(0) invert(1);
}
.mobileContacts .hi-1 img,
.mobileContacts .mobileSocials img {
filter: none;
}
.phoneHeader {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
color: var(--st-text);
text-decoration: none;
}
.phoneHeader svg {
display: block;
}
/* === AKB catalog filter === */
.filterForm--akb .filterField--range .filterName {
display: block;
margin: 0 0 4px;
font-size: 12px;
color: #5a6478;
}
@media (min-width: 992px) {
.filterForm--akb .filterBtns {
position: static;
width: auto;
max-width: none;
background: transparent;
box-shadow: none;
padding: 0;
margin-left: auto;
align-items: flex-end;
gap: 10px;
}
.filterForm--akb .filterResult {
flex: 0 0 auto;
min-width: 180px;
}
}
/* === Child category labels (типоразмеры / сезоны) === */
.child-categories {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 8px 0 4px;
}
.child-category {
display: inline-block;
text-align: center;
margin: 0;
padding: 4px 10px;
border-radius: 6px;
background-color: var(--st-blue);
color: #fff !important;
font-size: 13px;
line-height: 1.4;
text-decoration: none;
transition: background-color .15s ease, opacity .15s ease;
}
.child-category:hover {
background-color: var(--st-blue-hover);
color: #fff !important;
text-decoration: none;
opacity: .95;
}
.child-category[href*="leto"] {
background-color: #00937e;
order: -4;
}
.child-category[href*="vsesezonnye"] {
background-color: #f8a805;
order: -3;
}
.child-category[href*="zima"] {
background-color: #58a1c3;
order: -2;
}
.child-categories:before {
content: "";
display: block;
width: 100%;
order: -1;
}
/* === Home marketing refresh (mobile-first) === */
body.is-home .homeFilter-title {
margin: 0 0 4px !important;
font-size: 20px !important;
line-height: 1.25;
color: var(--st-blue);
font-family: var(--st-font-head);
font-weight: 700;
border: 0;
padding: 0;
}
body.is-home .homeFilter-sub {
margin: 0 0 12px;
font-size: 13px;
line-height: 1.35;
color: var(--st-muted);
}
body.is-home .advantages--home.section {
padding-top: 8px;
padding-bottom: 8px;
}
body.is-home .homePerks {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0;
border: 1px solid var(--st-line);
border-radius: var(--st-radius);
background: #fff;
overflow: hidden;
}
body.is-home .homePerks-item {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px 10px;
padding: 12px 14px;
border-top: 1px solid var(--st-line);
}
body.is-home .homePerks-item:first-child {
border-top: 0;
}
body.is-home .homePerks-title {
font-family: var(--st-font-head);
font-size: 14px;
font-weight: 600;
color: var(--st-text);
line-height: 1.3;
}
body.is-home .homePerks-text {
font-size: 13px;
color: var(--st-muted);
line-height: 1.3;
}
body.is-home .item-grid-rassrochka,
.item-grid-rassrochka {
margin: 4px 0 0;
font-size: 12px;
line-height: 1.3;
color: var(--st-muted);
text-decoration: none;
}
body.is-home .seoCollapse {
border-top: 1px solid var(--st-line);
padding: 0;
background: transparent;
}
body.is-home .seoCollapse-summary {
cursor: pointer;
list-style: none;
padding: 14px 0;
font-size: 14px;
font-weight: 600;
color: var(--st-blue);
font-family: var(--st-font-head);
}
body.is-home .seoCollapse-summary::-webkit-details-marker {
display: none;
}
body.is-home .seoCollapse-summary::after {
content: "▾";
float: right;
color: var(--st-muted);
font-weight: 400;
}
body.is-home .seoCollapse[open] .seoCollapse-summary::after {
content: "▴";
}
body.is-home .seoCollapse-body {
padding: 0 0 8px;
}
body.is-home .mainTextBlock--collapsed.section {
padding-top: 8px;
padding-bottom: 16px;
}
body.is-home .filterResult .js-filter-count:not([hidden]):not(:empty)::before {
content: " · ";
}
@media (max-width: 991.98px) {
body.is-home .compareHeader {
display: none !important;
}
body.is-home .filterForm--homeCompact .filterField--producer,
body.is-home .filterForm--homeCompact .filterField--range {
display: none;
}
body.is-home .filter.section {
padding-top: 10px;
padding-bottom: 8px;
}
body.is-home .homeFilter-title {
font-size: 18px !important;
}
}
@media (min-width: 992px) {
body.is-home .homePerks {
grid-template-columns: repeat(3, 1fr);
}
body.is-home .homePerks-item {
border-top: 0;
border-left: 1px solid var(--st-line);
flex-direction: column;
align-items: flex-start;
gap: 4px;
padding: 16px 18px;
}
body.is-home .homePerks-item:first-child {
border-left: 0;
}
body.is-home .homeFilter-title {
font-size: 28px !important;
}
}
/* Footer contacts: fit phone/email/hours on desktop without clipping */
footer .footerBottom {
align-items: flex-start;
}
footer .footerContacts {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 10px 18px;
min-width: 0;
width: 100%;
}
footer .footerContacts .headInfo {
float: none;
margin: 0;
display: inline-flex;
align-items: center;
gap: 8px;
flex: 0 1 auto;
min-width: 0;
max-width: 100%;
}
footer .footerContacts .headInfo img {
float: none;
display: block;
flex: 0 0 auto;
margin-right: 0;
height: 22px;
width: auto;
}
footer .footerContacts a,
footer .footerContacts > .headInfo > span {
white-space: nowrap;
}
footer .footerContacts .workTime {
line-height: 1.25;
white-space: normal;
max-width: 13rem;
}
footer .footerContacts .footerPhone a {
color: #fff;
}
@media screen and (max-width: 991.98px) {
footer .footerContacts {
justify-content: flex-start;
margin-top: 18px;
}
footer .footerContacts .workTime {
max-width: none;
}
}
/* Podbor → catalog car context banner */
.podbor-context {
margin: 0 0 12px;
}
.podbor-context__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
padding: 10px 14px;
background: #f3f6fb;
border: 1px solid #d9deea;
border-radius: 10px;
color: #303030;
font-size: 14px;
line-height: 1.35;
}
.podbor-context__label {
color: #747b8f;
}
.podbor-context__car {
font-weight: 600;
}
.podbor-context__reset {
margin-left: auto;
color: #3c5e96;
text-decoration: underline;
text-underline-offset: 2px;
white-space: nowrap;
}
.podbor-context__reset:hover {
color: #253b60;
}
@media (max-width: 575.98px) {
.podbor-context__reset {
margin-left: 0;
}
}