/* Точное визуальное оформление по переданным HTML-макетам. */
:root {
--st-orange: #e8641e;
--st-orange-dark: #c94f10;
--st-ink: #2b2b2b;
--st-dark: #1c1c20;
--st-gray: #f4f4f4;
--st-line: #eeeeee;
--st-muted: #888888;
}
html { overflow-x: hidden; }
body.st-theme {
display: flex;
min-height: 100vh;
flex-direction: column;
margin: 0;
overflow-x: hidden;
background: #ffffff;
color: var(--st-ink);
font-family: 'PT Sans', Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}
.st-theme *, .st-theme *::before, .st-theme *::after { box-sizing: border-box; }
.st-theme a { color: var(--st-orange); text-decoration: none; }
.st-theme a:hover { color: var(--st-orange-dark); text-decoration: underline; }
.st-theme .page-content { width: 100%; min-height: 1px; flex: 1 0 auto; padding: 0 !important; }
.st-theme .topbar, .st-theme .hdr, .st-theme .nav { display: none !important; }
/* Шапка и меню */
header.st-header-row {
position: relative !important;
z-index: 20;
display: flex !important;
flex-flow: row wrap !important;
align-items: center;
justify-content: space-between !important;
gap: 16px 20px;
width: 100% !important;
height: auto !important;
min-height: 118px !important;
margin: 0 !important;
padding: 18px clamp(16px, 4vw, 56px) !important;
overflow: visible !important;
border-bottom: 1px solid var(--st-line);
background: #fff;
}
.st-header-brand {
display: flex;
align-items: center;
gap: 14px;
flex: 1 1 340px;
min-width: 0;
}
.st-logo-link { display: flex; align-items: center; flex: 0 0 auto; }
.st-logo-img { display: block; width: auto; height: 82px; max-width: 100%; }
.st-header-address { min-width: 0; color: #444; font-size: 18px; font-weight: 500; line-height: 1.4; }
.st-header-contact {
display: flex;
flex: 0 1 auto;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 18px;
}
.st-header-phones { display: flex; flex-direction: column; text-align: right; font-size: 18px; font-weight: 600; white-space: nowrap; }
.st-theme a[href^="tel:"] { opacity: 1 !important; filter: none !important; }
.st-header-phones > a { color: var(--st-ink) !important; opacity: 1 !important; }
.st-header-phones > a:hover { color: var(--st-orange); text-decoration: none; }
.st-recall-link {
margin: 2px 0 0;
padding: 0;
border: 0;
background: transparent;
color: var(--st-orange);
font: 400 14px/1.4 'PT Sans', Arial, sans-serif;
text-align: right;
cursor: pointer;
}
.st-recall-link:hover { color: var(--st-orange-dark); text-decoration: underline; }
.st-sika-link { display: block; flex: 0 0 auto; min-width: 0; }
.st-sika-badge { display: block; width: auto; height: 98px; max-width: 100%; }
nav.st-nav-row {
position: relative !important;
z-index: 19;
display: block !important;
width: 100% !important;
height: auto !important;
min-height: 54px !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
border-bottom: 3px solid var(--st-orange);
background: #e4e4e4;
}
.st-nav-inner { display: flex; flex-wrap: wrap; padding: 0 clamp(16px, 4vw, 56px); }
.st-nav-link {
padding: 18px 20px;
color: #3a3a3a !important;
font: 500 15px/1 Oswald, 'Arial Narrow', sans-serif;
letter-spacing: .5px;
text-transform: uppercase;
white-space: nowrap;
}
.st-nav-link:hover { background: rgba(255,255,255,.38); color: var(--st-orange) !important; text-decoration: none !important; }
.st-nav-link.is-active, .st-nav-link[aria-current='page'] { color: var(--st-orange) !important; font-weight: 600; }
.st-nav-toggle { display: none; }
.st-sika-mobile { display: none; }
/* Главная: каталог слева и первый экран */
.st-side-hero-row {
position: relative;
isolation: isolate;
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 24px;
width: 100%;
max-width: 1800px;
margin: 0 auto;
padding: 28px clamp(16px, 4vw, 72px);
}
.st-side-hero-row .side {
position: relative;
z-index: 100;
display: flex;
flex: 0 1 300px;
min-width: 220px;
flex-direction: column;
margin: 0;
padding: 10px;
border: 0;
border-radius: 4px;
background: var(--st-gray);
}
.st-side-hero-row .side .h-alt {
margin: 0;
padding: 10px 12px 6px;
color: var(--st-orange);
font: 600 14px/1.3 Oswald, 'Arial Narrow', sans-serif;
letter-spacing: .5px;
text-transform: uppercase;
}
.st-side-hero-row .index-category {
display: flex;
flex: 1;
flex-direction: column;
gap: 2px;
margin: 0;
padding: 0;
width: 100%;
list-style: none;
}
.st-side-hero-row .index-category > li { position: relative; display: flex; flex: 1; flex-direction: column; justify-content: center; margin: 0; }
.st-side-hero-row .left-menu-item {
display: block;
padding: 10px 14px;
border-radius: 4px;
color: #3a3a3a;
font-size: 15px;
font-weight: 400;
line-height: 1.3;
transition: background-color .15s, color .15s, box-shadow .15s;
}
.st-side-hero-row .left-menu-item:hover,
.st-side-hero-row .left-menu-item.is-preview {
background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.1);
color: var(--st-orange);
font-weight: 600;
text-decoration: none;
}
.st-side-hero-row .left-menu-subcategories {
margin: 0;
padding: 2px 0 2px 16px;
list-style: none;
}
.st-side-hero-row .left-menu-subcategories a { display: block; padding: 7px 14px; border-radius: 4px; color: #3a3a3a; font-size: 14px; line-height: 1.3; }
.st-side-hero-row .left-menu-subcategories a:hover { background: #fff; color: var(--st-orange); text-decoration: none; }
.st-hero-col { position: relative; z-index: 1; display: flex; flex: 1 1 480px; min-width: 280px; flex-direction: column; }
.st-hero {
position: relative;
display: flex;
flex: 1;
flex-wrap: wrap;
align-items: center;
gap: 32px;
overflow: hidden;
margin: 0;
padding: clamp(20px, 3vw, 48px);
border-radius: 4px;
background: var(--st-dark);
color: #fff;
}
.st-hero-pour {
position: absolute;
z-index: 0;
right: 0;
bottom: 0;
left: 0;
height: 76%;
background: linear-gradient(180deg, rgba(232,100,30,.35), rgba(232,100,30,.08));
animation: st-pour 4s ease-in-out infinite alternate;
}
.st-hero-media {
position: relative;
z-index: 1;
flex: 1 1 280px;
overflow: hidden;
width: 100%;
max-width: 420px;
border-radius: 4px;
background: #fff;
box-shadow: 0 12px 32px rgba(0,0,0,.35);
}
.st-hero-media img { display: block; width: 100%; height: 320px; object-fit: cover; }
.st-hero-caption { padding: 12px 16px; border-top: 3px solid var(--st-orange); color: var(--st-orange); font: 600 14px/1.2 Oswald, 'Arial Narrow', sans-serif; letter-spacing: .5px; text-transform: uppercase; }
.st-hero-text { position: relative; z-index: 1; flex: 1 1 380px; min-width: 0; color: #fff; }
.st-hero-kicker { color: var(--st-orange); font: 600 13px/1.3 Oswald, 'Arial Narrow', sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.st-hero-text h1 { margin: 14px 0 0; color: #fff; font: 700 clamp(32px, 4vw, 52px)/1.05 Oswald, 'Arial Narrow', sans-serif; text-transform: uppercase; }
.st-hero-rule { width: 64px; height: 4px; margin-top: 20px; background: var(--st-orange); }
.st-hero-text p { max-width: 460px; margin: 20px 0 0; color: #d8d8d8; font-size: 18px; line-height: 1.6; }
.st-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.st-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 14px 30px;
border: 1px solid var(--st-orange);
border-radius: 2px;
background: var(--st-orange);
color: #fff !important;
font: 600 15px/1.2 Oswald, 'Arial Narrow', sans-serif;
letter-spacing: .5px;
text-transform: uppercase;
cursor: pointer;
}
.st-button:hover { border-color: var(--st-orange-dark); background: var(--st-orange-dark); text-decoration: none !important; }
.st-button--outline { border-color: #555; background: transparent; }
.st-button--outline:hover { border-color: #fff; background: rgba(255,255,255,.06); }
.st-button--wide { width: 100%; margin-top: 22px; }
.st-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; margin-top: 16px; border-radius: 4px; background: var(--st-orange); color: #fff; }
.st-stats-grid > div { padding: 20px 22px; border-left: 1px solid rgba(255,255,255,.25); }
.st-stats-grid > div:first-child { border-left: 0; }
.st-stats-grid strong { display: block; color: #fff; font: 700 34px/1.1 Oswald, 'Arial Narrow', sans-serif; }
.st-stats-grid span { display: block; margin-top: 4px; font-size: 14px; opacity: .9; }
/* Карточки каталога */
.st-home-catalog { width: 100%; max-width: 1800px; margin: 0 auto; padding: 8px clamp(16px, 4vw, 72px) 48px; }
.st-catalog-showcase { margin: 0 !important; }
.st-catalog-showcase .page-head { padding: 24px 0 20px; }
.st-catalog-showcase .page-head h2 { margin: 0; color: var(--st-ink); font: 700 30px/1.2 Oswald, 'Arial Narrow', sans-serif; text-transform: uppercase; }
.st-catalog-showcase > ul.grid,
.catalog-category-list.grid {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 20px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.st-catalog-showcase > ul.grid > li,
.catalog-category-list.grid > li { min-width: 0; margin: 0 !important; padding: 0 !important; }
.st-theme .card {
display: flex;
overflow: hidden;
height: 100%;
flex-direction: column;
border: 0;
border-radius: 6px;
background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.08);
color: var(--st-ink);
}
.st-theme .card:hover { color: var(--st-ink); text-decoration: none; box-shadow: 0 8px 24px rgba(0,0,0,.11); }
.st-theme .card__media { position: relative; display: block; overflow: hidden; height: 190px; background: #f3f3f3; }
.st-theme .card__media::after { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.5) 100%); content: ''; }
.st-theme .card__media img { display: block; width: 100%; height: 190px; object-fit: cover; transition: transform .4s ease; }
.st-theme .card:hover .card__media img { transform: scale(1.06); }
.st-theme .card__noimg { display: flex; height: 100%; align-items: center; justify-content: center; color: #999; }
.st-theme .card__body { display: flex; flex: 1; align-items: flex-start; justify-content: space-between; gap: 10px; min-height: 78px; padding: 16px 18px; border: 1px solid var(--st-line); border-top: 0; }
.st-theme .card__title { color: var(--st-ink); font-size: 15px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.st-theme .card__icon { display: flex; width: 28px; height: 28px; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 50%; background: var(--st-orange); color: #fff; font-size: 14px; }
.st-theme .card:hover .card__icon { animation: st-icon-wiggle .8s ease-in-out; }
.st-sika-promo { padding: 40px clamp(16px, 4vw, 72px); background: var(--st-gray); }
.st-sika-promo__inner { display: flex; max-width: 1800px; align-items: center; gap: 32px; margin: 0 auto; }
.st-sika-promo img { width: auto; height: 120px; flex: 0 0 auto; }
.st-sika-promo p { margin: 0; font-size: 16px; line-height: 1.6; }
.st-sika-promo a { display: inline-block; margin-top: 12px; font: 600 14px/1.3 Oswald, 'Arial Narrow', sans-serif; letter-spacing: .5px; text-transform: uppercase; }
.st-home-contacts { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; width: 100%; max-width: 1800px; margin: 0 auto; padding: 44px clamp(16px, 4vw, 72px); }
.st-home-contacts h2, .st-recall-card h2 { margin: 0 0 20px; color: inherit; font: 700 28px/1.2 Oswald, 'Arial Narrow', sans-serif; text-transform: uppercase; }
.st-home-contacts__lines { font-size: 16px; line-height: 2.1; }
.st-map-card { overflow: hidden; margin-top: 18px; border: 1px solid #ddd; border-radius: 4px; }
.st-map-card > a:first-child { display: block; }
.st-map-card img { display: block; width: 100%; height: 280px; object-fit: cover; }
.st-map-card__link { display: block; padding: 12px 16px; background: var(--st-dark); color: #fff !important; font: 600 14px/1.3 Oswald, 'Arial Narrow', sans-serif; letter-spacing: .5px; text-transform: uppercase; }
.st-map-card__link:hover { color: var(--st-orange) !important; text-decoration: none !important; }
.st-recall-card { align-self: stretch; padding: 32px; border-radius: 4px; background: var(--st-dark); color: #fff; }
.st-recall-card h2 { margin-bottom: 4px; font-size: 22px; }
.st-recall-card p { margin: 0; color: #bbb; font-size: 14px; }
.st-recall-fields { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.st-recall-fields .form-group { margin: 0; }
.st-recall-fields input[type='text'], .st-recall-fields input[type='email'], .st-recall-fields input[type='tel'] {
width: 100%;
height: auto;
padding: 14px 16px;
border: 1px solid #444;
border-radius: 2px;
outline: 0;
background: #2b2b2f;
color: #fff;
font: 400 15px/1.3 'PT Sans', Arial, sans-serif;
}
.st-recall-fields input::placeholder { color: #aaa; opacity: 1; }
.st-recall-fields input:focus { border-color: var(--st-orange); }
.st-recall-agree { display: flex; align-items: flex-start; gap: 8px; color: #bbb; font-size: 13px; line-height: 1.4; }
.st-recall-agree input { flex: 0 0 auto; margin-top: 3px; }
.st-recall-agree label { margin: 0; font-weight: 400; }
.st-recall-hidden { display: none; }
.st-recall-fields .help-block { margin: 4px 0 0; color: #ffb89a; font-size: 12px; }
/* Подвал */
.st-footer { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 0; padding: 20px clamp(16px, 4vw, 72px); background: var(--st-dark); color: #999; font-size: 13px; }
/* Внутренние страницы */
.st-breadcrumbs,
.catalog-category-page .crumbs,
.catalog-item-page .crumbs {
width: 100%;
max-width: 1100px;
margin: 0 auto;
padding: 16px clamp(16px, 4vw, 72px) 0;
color: var(--st-muted);
font-size: 13px;
letter-spacing: .5px;
text-transform: uppercase;
}
.st-breadcrumbs > *, .catalog-category-page .crumbs a, .catalog-item-page .crumbs a { margin-right: 8px; color: var(--st-muted); }
.st-breadcrumbs > *:last-child { color: var(--st-ink); }
.st-breadcrumbs--narrow { max-width: 1000px; }
.st-text-page { width: 100%; max-width: 1100px; margin: 0 auto; padding: 24px clamp(16px, 4vw, 72px) 60px; }
.st-text-page h1, .st-contact-page-grid h1 { margin: 0; color: var(--st-ink); font: 700 32px/1.2 Oswald, 'Arial Narrow', sans-serif; text-transform: uppercase; }
.st-text-page > p, .st-text-page .pagetext > p, .st-text-page .pagetext > div { margin: 20px 0 0; color: #333; font-size: 17px; line-height: 1.8; }
.st-text-page ul { margin: 16px 0 0; padding-left: 22px; color: #333; font-size: 16px; line-height: 1.9; }
.st-text-page h2, .st-text-page .pagetext h2 { margin: 34px 0 0; color: var(--st-ink); font: 700 22px/1.25 Oswald, 'Arial Narrow', sans-serif; text-transform: uppercase; }
.st-text-page h3, .st-text-page .pagetext h3 { margin: 26px 0 0; color: var(--st-ink); font: 700 19px/1.3 Oswald, 'Arial Narrow', sans-serif; text-transform: uppercase; }
.st-text-page .pagetext > *:first-child { margin-top: 20px; }
.st-text-page .pagetext > h1:first-child, .st-text-page .pagetext > h2:first-child { display: none; }
.st-price-contacts { margin-top: 24px; font-size: 16px; line-height: 2; }
.st-price-contacts h2 { margin: 0 0 6px; font-size: 16px; }
.st-support-page .pagetext { display: flex; flex-direction: column; gap: 2px; margin-top: 24px; font-size: 16px; }
.st-support-page .pagetext > p, .st-support-page .pagetext > div { margin: 0; }
.st-support-page .pagetext a { display: block; padding: 15px 18px; border-bottom: 1px solid var(--st-line); color: var(--st-orange) !important; font-weight: 600; }
/* О компании: галочка всегда занимает отдельную колонку и не заходит на текст. */
.st-about-page .pagetext ul { display: grid; gap: 9px; margin: 16px 0 18px; padding: 0 !important; list-style: none !important; }
.st-about-page .pagetext ul li {
position: relative !important;
margin: 0 !important;
padding: 13px 16px 13px 50px !important;
border-left: 3px solid var(--st-orange) !important;
border-radius: 2px;
background: var(--st-gray) !important;
color: var(--st-ink) !important;
line-height: 1.55 !important;
}
.st-about-page .pagetext ul li::before {
content: '✓' !important;
position: absolute !important;
top: 50% !important;
left: 18px !important;
display: block !important;
width: 20px !important;
height: 20px !important;
border: 0 !important;
color: var(--st-orange) !important;
font: 700 18px/20px Arial, sans-serif !important;
transform: translateY(-50%) !important;
}
.st-about-page .pagetext img {
width: auto !important;
max-width: 420px !important;
max-height: 560px !important;
margin: 12px 0 22px !important;
object-fit: contain;
}
.st-policy-page { max-width: 1000px; padding-bottom: 64px; }
.st-policy-page h1 { font-size: clamp(26px, 3.4vw, 34px); line-height: 1.1; }
.st-policy-page h1::after { display: block; width: 64px; height: 4px; margin-top: 18px; background: var(--st-orange); content: ''; }
.st-policy-page .pagetext { margin-top: 18px; }
.st-policy-page .pagetext p, .st-policy-page .pagetext div, .st-policy-page .pagetext li { color: #333; font-size: 17px; line-height: 1.8; }
.st-policy-page .pagetext > p:first-child { padding: 16px 18px; border-left: 4px solid var(--st-orange); background: #fff7f2; font-size: 16px; line-height: 1.7; }
.st-policy-page .pagetext blockquote { margin: 26px 0 0; padding: 16px 18px; border: 0; border-left: 4px solid var(--st-orange); background: #fff7f2; color: #333; font-size: 16px; line-height: 1.7; }
.st-operator-card { margin-top: 40px; padding: clamp(20px, 3vw, 32px); border-radius: 4px; background: var(--st-dark); color: #dcdcdc; font-size: 16px; line-height: 2; }
.st-operator-card h2 { margin: 0 0 12px; color: #fff; font-size: 20px; }
.st-operator-card a { color: var(--st-orange); }
/* Контакты */
.st-contact-page-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; width: 100%; max-width: 1100px; margin: 0 auto; padding: 24px clamp(16px, 4vw, 72px) 60px; }
.st-contact-details { margin-top: 20px; font-size: 17px; line-height: 2; }
.st-contact-details a { color: inherit; }
.st-company-details { margin-top: 24px; border: 0; border-collapse: collapse; font-size: 15px; }
.st-company-details td { padding: 6px 14px 6px 0; border: 0 !important; }
.st-company-details td:first-child { color: var(--st-muted); }
.st-company-details td:last-child { font-weight: 600; }
.st-contacts-page .pagetext a[href^="tel:"],
.st-contact-details a[href^="tel:"] { color: var(--st-orange) !important; opacity: 1 !important; }
.st-contacts-page .pagetext table td,
.st-contacts-page .pagetext table th,
.st-contacts-page .pagetext table td:first-child {
color: var(--st-ink) !important;
opacity: 1 !important;
}
.st-contacts-page .pagetext table td:first-child { font-weight: 600 !important; }
.st-map-card--contacts { height: fit-content; margin: 0; }
.st-map-card--contacts img { height: 320px; }
.st-map-card--contacts .st-map-card__link { padding: 14px 16px; }
/* Каталог и карточки товаров */
.catalog-category-page {
width: 100% !important;
max-width: 1400px !important;
margin-right: auto !important;
margin-left: auto !important;
}
.catalog-category-page > .wrap,
.catalog-item-page > .wrap {
width: 100% !important;
max-width: 1400px !important;
margin: 0 auto !important;
padding-right: clamp(16px, 4vw, 72px) !important;
padding-left: clamp(16px, 4vw, 72px) !important;
}
.catalog-category-page .crumbs,
.catalog-item-page .crumbs { max-width: none; padding-right: 0; padding-left: 0; }
.catalog-category-page .page-head { padding: 24px 0 0; }
.catalog-category-page .page-head h1 { margin: 0; color: var(--st-ink); font: 700 34px/1.2 Oswald, 'Arial Narrow', sans-serif; text-transform: uppercase; }
.catalog-category-page .page-head .sub { margin-top: 6px; color: var(--st-muted); font-size: 15px; }
.catalog-category-page .actions-block { margin-top: 24px; }
.catalog-category-page .tools-row { margin-top: 14px; }
.catalog-category-page .catalog-category-list { margin-top: 28px !important; }
.catalog-category-page .catalog-items-list.grid {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 20px !important;
margin: 28px 0 0 !important;
padding: 0 !important;
list-style: none !important;
}
.catalog-category-page .catalog-items-list.grid > li { min-width: 0; margin: 0 !important; padding: 0 !important; }
.catalog-category-page .category-page-pagination { margin: 28px 0; }
.st-theme .pcard { display: flex; position: relative; height: 100%; flex-direction: column; overflow: hidden; border: 1px solid var(--st-line); border-radius: 6px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.st-theme .pcard:hover { border-color: #ddd; box-shadow: 0 8px 22px rgba(0,0,0,.1); }
.st-theme .pcard__media { display: block; overflow: hidden; height: 220px; background: #f6f6f6; }
.st-theme .pcard__media img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .4s ease; }
.st-theme .pcard:hover .pcard__media img { transform: scale(1.04); }
.st-theme .pcard__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 14px 16px 16px; }
.st-theme .pcard__title { color: var(--st-ink); font-size: 16px; font-weight: 600; line-height: 1.35; }
.st-theme .pcard__price { margin-top: auto; }
.st-theme .pcard .price { color: var(--st-ink); font: 700 20px/1.2 Oswald, 'Arial Narrow', sans-serif; }
.catalog-item-page > .wrap { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 0 48px; padding-bottom: 60px; }
.catalog-item-page .crumbs { grid-column: 1 / -1; }
.catalog-item-page > .wrap > .page-head { display: none !important; }
.catalog-item-page > .wrap > .image-wrap { grid-column: 1; width: 340px; max-width: 340px; margin: 24px 0 0; }
.catalog-item-page > .wrap > .image-wrap .image { display: block; overflow: hidden; width: 340px; border: 1px solid var(--st-line); border-radius: 4px; }
.catalog-item-page > .wrap > .image-wrap img { display: block; width: 100%; height: auto; max-height: 480px; object-fit: contain; }
.catalog-item-page > .wrap > .info-block { grid-column: 2; min-width: 0; margin-top: 24px; }
.catalog-item-page .info-block .title-wrap h1.title { display: block !important; margin: 0; color: var(--st-ink); font: 700 24px/1.3 'PT Sans', Arial, sans-serif; text-transform: none; }
.catalog-item-page .vendor-code-wrap { margin-top: 8px; }
.catalog-item-page .vendor-code { color: #999; font-size: 14px; }
.catalog-item-page .price-wrap { margin-top: 14px; }
.catalog-item-page .info-block > .price-wrap .price { color: #1a8c3a; font: 700 28px/1.2 'PT Sans', Arial, sans-serif; }
.catalog-item-page .stock-value-wrap { margin-top: 10px; }
.catalog-item-page .item-params-block { margin-top: 32px; }
.catalog-item-page .item-params-block .section-title { margin: 0 0 4px; color: var(--st-ink); font: 700 22px/1.2 Oswald, 'Arial Narrow', sans-serif; text-transform: uppercase; }
.catalog-item-page .item-params-block table { width: 100%; margin-top: 18px; border: 0; border-collapse: collapse; background: transparent; font-size: 16px; }
.catalog-item-page .item-params-block table tr { border-bottom: 1px solid var(--st-line); }
.catalog-item-page .item-params-block table tr:nth-child(even) { background: #fafafa; }
.catalog-item-page .item-params-block table td { padding: 14px 16px; border: 0 !important; }
.catalog-item-page .item-params-block table td:first-child { width: 48%; color: #777; font-weight: 400; }
.catalog-item-page .item-params-block table td:last-child { font-weight: 600; }
.catalog-item-page .order-actions-wrap { margin-top: 16px; }
.catalog-item-page .order-actions-wrap button, .catalog-item-page .order-actions-wrap a { border-radius: 2px; }
.catalog-item-page > .wrap > .product-images-slider { grid-column: 1; }
.catalog-item-page > .wrap > .description-block,
.catalog-item-page > .wrap > .recommended-items-block { grid-column: 1 / -1; margin-top: 32px; padding-top: 36px; border-top: 1px solid var(--st-line); }
.catalog-item-page .description-block .nav-tabs { margin: 0 0 20px; border: 0; }
.catalog-item-page .description-block .nav-tabs > li > a { border: 0; color: var(--st-orange); font-size: 18px; font-weight: 600; }
.catalog-item-page .description-block .tab-content { color: #333; font-size: 17px; line-height: 1.7; }
@keyframes st-pour { from { height: 0; } 60%, to { height: 100%; } }
@keyframes st-icon-wiggle { 0%,100% { transform: rotate(0) scale(1); } 20% { transform: rotate(-18deg) scale(1.15); } 40% { transform: rotate(12deg) scale(1.05); } 60% { transform: rotate(-10deg) scale(1.12); } 80% { transform: rotate(6deg) scale(1.02); } }
@media (max-width: 1100px) {
.st-catalog-showcase > ul.grid,
.catalog-category-list.grid,
.catalog-category-page .catalog-items-list.grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 760px) {
header.st-header-row {
flex-direction: column !important;
align-items: stretch;
justify-content: flex-start !important;
gap: 0;
min-height: 0 !important;
padding: 0 !important;
}
.st-header-brand { width: 100%; flex: 0 0 auto; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px clamp(16px,4vw,56px); border-bottom: 1px solid var(--st-line); }
.st-logo-img { height: 52px; }
.st-header-address { font-size: 16px; }
.st-header-contact { width: 100%; flex: 0 0 auto; justify-content: flex-start; gap: 12px; padding: 12px clamp(16px,4vw,56px); }
.st-header-phones { text-align: left; font-size: 15px; }
.st-recall-link { text-align: left; }
.st-header-contact .st-sika-link { display: none; }
nav.st-nav-row { min-height: 68px !important; }
.st-nav-inner { padding-right: 120px; padding-left: clamp(6px, 2vw, 16px); }
.st-nav-link { padding: 12px 10px; font-size: 12.5px; }
.st-sika-mobile { display: flex; position: absolute; z-index: 2; top: 8px; right: clamp(16px,4vw,56px); }
.st-sika-mobile img { display: block; width: auto; height: 52px; }
.st-side-hero-row { flex-direction: column; padding-top: 20px; }
.st-side-hero-row .side { width: 100%; max-width: 100%; flex: 1 1 100%; min-width: 0; }
.st-side-hero-row .index-category { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
.st-side-hero-row .index-category > li { justify-content: flex-start; }
.st-side-hero-row .left-menu-item { padding: 10px; font-size: 14px; }
.st-side-hero-row .left-menu-subcategories { grid-column: 1 / -1; padding-left: 8px; }
.st-hero-col { flex: 1 1 100%; min-width: 0; }
.st-hero { flex-direction: column; align-items: stretch; padding: 20px; }
.st-hero-media { max-width: 100%; flex: 1 1 100%; }
.st-hero-media img { height: 240px; }
.st-hero-text { flex: 1 1 100%; }
.st-hero-text h1 { font-size: 32px; }
.st-stats-grid { grid-template-columns: repeat(2, 1fr); }
.st-stats-grid > div:nth-child(3) { border-left: 0; border-top: 1px solid rgba(255,255,255,.25); }
.st-stats-grid > div:nth-child(4) { border-top: 1px solid rgba(255,255,255,.25); }
.st-catalog-showcase > ul.grid,
.catalog-category-list.grid,
.catalog-category-page .catalog-items-list.grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
.st-theme .card__media, .st-theme .card__media img { height: 150px; }
.st-theme .card__body { min-height: 70px; padding: 12px 14px; }
.st-theme .card__title { font-size: 14px; }
.st-sika-promo__inner { align-items: flex-start; }
.st-sika-promo img { height: 92px; }
.st-home-contacts { grid-template-columns: 1fr; }
.st-contact-page-grid { grid-template-columns: 1fr; }
.st-map-card--contacts img { height: 280px; }
.catalog-item-page > .wrap { display: block; }
.catalog-item-page > .wrap > .image-wrap,
.catalog-item-page > .wrap > .image-wrap .image { width: 100%; max-width: 340px; margin-right: auto; margin-left: auto; }
.catalog-item-page > .wrap > .info-block { margin-top: 24px; }
}
@media (max-width: 480px) {
.st-nav-inner { padding-right: 104px; }
.st-nav-link { padding: 10px 7px; font-size: 11.5px; }
.st-sika-mobile { right: 10px; }
.st-sika-mobile img { height: 46px; }
.st-side-hero-row .index-category { grid-template-columns: 1fr; }
.st-catalog-showcase > ul.grid,
.catalog-category-list.grid,
.catalog-category-page .catalog-items-list.grid { grid-template-columns: 1fr !important; }
.st-theme .card__media, .st-theme .card__media img { height: 190px; }
.st-stats-grid strong { font-size: 28px; }
.st-sika-promo__inner { flex-direction: column; }
.st-hero-actions .st-button { width: 100%; }
}
/* ===========================================================
V4 — точная доводка по скриншотам: меню, телефоны, плотность
внутренних страниц и самостоятельная мобильная композиция.
=========================================================== */
/* Сторонний скрипт оборачивает цифры телефона в с
убывающей inline-прозрачностью. Полностью отменяем этот эффект. */
.st-theme a[href^="tel:"],
.st-theme a[href^="tel:"] *,
.st-theme .st-header-phones a,
.st-theme .st-header-phones a * {
opacity: 1 !important;
filter: none !important;
color: inherit !important;
}
.st-theme .st-header-phones > a { color: var(--st-ink) !important; }
/* Левое меню — как в переданном HTML: светлая панель, без чёрной
шапки и разделителей, активный пункт — белая карточка. */
.st-side-hero-row .side {
padding: 12px 10px 14px !important;
overflow: visible !important;
border: 0 !important;
border-radius: 4px !important;
background: var(--st-gray) !important;
box-shadow: none !important;
}
.st-side-hero-row .side h2,
.st-side-hero-row .side .h-alt {
display: block !important;
margin: 0 !important;
padding: 8px 12px 10px !important;
border: 0 !important;
background: transparent !important;
color: var(--st-orange) !important;
font: 600 14px/1.3 Oswald, 'Arial Narrow', sans-serif !important;
letter-spacing: .5px !important;
text-transform: uppercase !important;
}
.st-side-hero-row .side h2::before,
.st-side-hero-row .side .h-alt::before { display: none !important; content: none !important; }
.st-side-hero-row .side .index-category,
.st-side-hero-row .side .index-category > li {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.st-side-hero-row .side .index-category > li { border-radius: 0 !important; }
.st-side-hero-row .side a.left-menu-item {
padding: 11px 14px !important;
border: 0 !important;
border-radius: 4px !important;
background: transparent !important;
box-shadow: none !important;
color: #3a3a3a !important;
font: 400 15px/1.3 'PT Sans', Arial, sans-serif !important;
}
.st-side-hero-row .side a.left-menu-item:hover,
.st-side-hero-row .side a.left-menu-item.is-preview,
.st-side-hero-row .side a.left-menu-item[aria-current] {
background: #fff !important;
box-shadow: 0 1px 3px rgba(0,0,0,.10) !important;
color: var(--st-orange) !important;
font-weight: 600 !important;
}
.st-side-hero-row .side a.left-menu-item::before { display: none !important; content: none !important; }
/* Короткие страницы больше не висят маленьким текстом на белом поле. */
.st-price-page,
.st-contacts-page {
max-width: 1200px;
min-height: 500px;
margin-top: 20px;
margin-bottom: 48px;
padding: clamp(24px, 4vw, 48px) !important;
border-radius: 6px;
background: #f5f5f5;
}
.st-price-page {
display: grid;
grid-template-columns: minmax(0, 1.45fr) minmax(300px, .8fr);
align-content: start;
gap: 24px;
}
.st-price-page > h1 { grid-column: 1 / -1; }
.st-price-intro {
padding: 26px 28px;
border-left: 4px solid var(--st-orange);
border-radius: 4px;
background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.st-price-intro p { margin: 0; color: #333; font-size: 17px; line-height: 1.75; }
.st-price-intro .st-button { margin-top: 22px; }
.st-price-contacts {
margin: 0;
padding: 26px 28px;
border-radius: 4px;
background: var(--st-dark);
color: #fff;
font-size: 17px;
line-height: 2;
}
.st-price-contacts h2 { margin: 0 0 12px; color: #fff; font-size: 19px; }
.st-price-contacts a { color: #fff !important; }
.st-price-contacts a:hover { color: var(--st-orange) !important; }
.st-contacts-layout {
display: grid;
grid-template-columns: minmax(320px, .82fr) minmax(420px, 1.18fr);
align-items: stretch;
gap: 28px;
margin-top: 24px;
}
.st-contacts-card {
padding: 26px 28px;
border-radius: 4px;
background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.st-contact-group + .st-contact-group { margin-top: 22px; }
.st-contact-group h2 { margin: 0 0 7px !important; font-size: 17px !important; }
.st-contact-group a { display: block; width: fit-content; font-size: 17px; line-height: 1.75; }
.st-contact-group .st-contact-phone { color: var(--st-orange) !important; }
.st-contacts-page .st-company-details {
width: 100%;
margin-top: 26px;
border-collapse: collapse;
background: #f7f7f7;
}
.st-contacts-page .st-company-details td {
padding: 12px 14px;
border: 1px solid #e5e5e5 !important;
color: var(--st-ink) !important;
}
.st-contacts-page .st-company-details td:first-child { width: 34%; font-family: Oswald, 'Arial Narrow', sans-serif; font-weight: 600; text-transform: uppercase; }
.st-contacts-page .st-map-card--contacts {
display: flex;
height: 100%;
min-height: 0;
flex-direction: column;
background: #fff;
}
.st-contacts-page .st-map-card--contacts > a:first-child {
display: block;
min-height: 420px;
flex: 1 1 auto;
overflow: hidden;
}
.st-contacts-page .st-map-card--contacts img {
width: 100%;
height: 100%;
min-height: 420px;
object-fit: cover;
}
.st-contacts-page .st-map-card--contacts .st-map-card__link { flex: 0 0 auto; }
.st-support-page {
max-width: 1200px;
min-height: 500px;
margin-top: 20px;
margin-bottom: 48px;
padding: clamp(24px, 4vw, 48px) !important;
border-radius: 6px;
background: #f5f5f5;
}
.st-support-page .st-support-documents {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.st-support-page .st-support-documents a {
display: flex;
min-height: 68px;
align-items: center;
padding: 14px 18px;
border: 0;
border-left: 3px solid var(--st-orange);
border-radius: 3px;
background: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
/* Карточка товара использует доступную ширину, а нижние блоки
начинаются сразу после содержимого верхнего ряда. */
.catalog-item-page > .wrap { max-width: 1700px !important; grid-template-columns: 380px minmax(0, 1fr) !important; gap: 0 40px !important; }
.catalog-category-page,
.catalog-category-page > .wrap { max-width: 1700px !important; }
.catalog-item-page > .wrap > .image-wrap,
.catalog-item-page > .wrap > .image-wrap .image { width: 380px !important; max-width: 380px !important; }
.catalog-item-page > .wrap > .info-block {
width: 100% !important;
max-width: none !important;
margin-right: 0 !important;
padding-right: 0 !important;
}
.catalog-item-page .item-params-block { width: 100% !important; max-width: 850px; }
.catalog-item-page > .wrap > .description-block,
.catalog-item-page > .wrap > .recommended-items-block {
margin-top: 24px !important;
padding: 28px !important;
border: 0 !important;
border-radius: 4px;
background: #f7f7f7;
}
.catalog-item-page > .wrap > .product-images-slider:empty { display: none !important; }
@media (max-width: 760px) {
header.st-header-row {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 0 !important;
padding: 0 !important;
}
.st-header-brand {
width: 100%;
flex-direction: row;
align-items: center;
gap: 12px;
padding: 12px 16px;
}
.st-logo-img { height: 60px; }
.st-header-address { font-size: 14px; line-height: 1.35; }
.st-header-contact {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 16px;
border-top: 1px solid var(--st-line);
}
.st-header-phones { font-size: 15px; line-height: 1.45; }
.st-header-contact .st-sika-link { display: block; margin-left: auto; }
.st-header-contact .st-sika-badge { height: 64px; }
.st-sika-mobile { display: none !important; }
nav.st-nav-row { min-height: 48px !important; overflow: hidden !important; }
.st-nav-toggle {
display: flex;
width: 100%;
min-height: 48px;
align-items: center;
gap: 10px;
padding: 0 16px;
border: 0;
background: transparent;
color: var(--st-ink);
font: 600 14px/1 Oswald, 'Arial Narrow', sans-serif;
letter-spacing: .6px;
text-transform: uppercase;
}
.st-nav-toggle__icon,
.st-nav-toggle__icon::before,
.st-nav-toggle__icon::after {
display: block;
width: 20px;
height: 2px;
border-radius: 2px;
background: var(--st-orange);
content: '';
transition: transform .18s ease;
}
.st-nav-toggle__icon { position: relative; }
.st-nav-toggle__icon::before { position: absolute; top: -6px; left: 0; }
.st-nav-toggle__icon::after { position: absolute; top: 6px; left: 0; }
.st-nav-row.is-open .st-nav-toggle__icon { background: transparent; }
.st-nav-row.is-open .st-nav-toggle__icon::before { top: 0; transform: rotate(45deg); }
.st-nav-row.is-open .st-nav-toggle__icon::after { top: 0; transform: rotate(-45deg); }
.st-nav-inner {
display: none;
flex-direction: column;
flex-wrap: nowrap;
gap: 0;
padding: 0 8px 8px !important;
}
.st-nav-row.is-open .st-nav-inner { display: flex; }
.st-nav-link { width: 100%; flex: 0 0 auto; padding: 13px 11px; border-top: 1px solid rgba(0,0,0,.06); font-size: 13px; }
.st-side-hero-row { display: flex; gap: 18px; padding: 18px 14px 28px; }
.st-hero-col { order: 1; }
.st-side-hero-row .side {
order: 2;
width: 100%;
padding: 10px !important;
}
.st-side-hero-row .side .index-category {
display: flex !important;
flex-flow: row nowrap !important;
gap: 8px !important;
overflow-x: auto;
overscroll-behavior-inline: contain;
scroll-snap-type: inline proximity;
scrollbar-width: none;
}
.st-side-hero-row .side .index-category::-webkit-scrollbar { display: none; }
.st-side-hero-row .side .index-category > li {
display: block !important;
min-width: 210px;
flex: 0 0 70%;
scroll-snap-align: start;
}
.st-side-hero-row .side a.left-menu-item {
display: flex;
min-height: 58px;
align-items: center;
padding: 11px 13px !important;
background: #fff !important;
box-shadow: 0 1px 3px rgba(0,0,0,.08) !important;
font-size: 14px !important;
}
.st-side-hero-row .left-menu-subcategories { display: none !important; }
.st-hero { gap: 20px; padding: 16px; }
.st-hero-media { max-width: none; }
.st-hero-media img { height: 210px; }
.st-hero-text h1 { font-size: 30px; }
.st-hero-text p { margin-top: 14px; font-size: 16px; line-height: 1.5; }
.st-hero-actions { margin-top: 18px; }
.st-price-page,
.st-contacts-page,
.st-support-page {
display: block;
min-height: 0;
margin: 14px 12px 28px;
width: auto;
padding: 22px 16px !important;
}
.st-price-page > h1,
.st-contacts-page > h1 { margin-bottom: 18px; }
.st-price-intro,
.st-price-contacts,
.st-contacts-card { padding: 20px; }
.st-price-contacts { margin-top: 16px; }
.st-contacts-layout { grid-template-columns: 1fr; gap: 16px; margin-top: 0; }
.st-contacts-page .st-map-card--contacts img { height: 260px; }
.st-support-page .st-support-documents { grid-template-columns: 1fr; }
.catalog-item-page > .wrap { display: block !important; padding-right: 16px !important; padding-left: 16px !important; }
.catalog-item-page > .wrap > .image-wrap,
.catalog-item-page > .wrap > .image-wrap .image { width: 100% !important; max-width: 380px !important; }
.catalog-item-page > .wrap > .description-block,
.catalog-item-page > .wrap > .recommended-items-block { padding: 20px 16px !important; }
}
@media (max-width: 420px) {
.st-logo-img { height: 54px; }
.st-header-address { font-size: 13px; }
.st-header-contact .st-sika-badge { height: 58px; }
.st-nav-link { padding: 14px 10px; font-size: 11.5px; }
.st-stats-grid { grid-template-columns: 1fr 1fr; }
.st-hero-actions .st-button { width: 100%; }
}
/* ===========================================================
V5 — мобильная шапка по референсу, бегущая строка и компактный
каталог без лишней высоты карточек.
=========================================================== */
.st-mobile-ticker { display: none; }
.st-recall-mobile { display: none; }
.st-products-toggle { width: 100%; border: 0; background: transparent; text-align: left; cursor: default; }
@keyframes st-mobile-marquee {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
@media (max-width: 760px) {
.st-mobile-ticker {
display: block;
width: 100%;
overflow: hidden;
background: var(--st-dark);
color: #d7d7d7;
font-size: 13px;
line-height: 1;
white-space: nowrap;
}
.st-mobile-ticker__track {
display: flex;
width: max-content;
align-items: center;
gap: 28px;
padding: 10px 0;
animation: st-mobile-marquee 24s linear infinite;
will-change: transform;
}
.st-mobile-ticker__track span {
position: relative;
display: inline-block;
padding-left: 18px;
}
.st-mobile-ticker__track span::before {
position: absolute;
top: 50%;
left: 0;
width: 8px;
height: 8px;
border: 2px solid var(--st-orange);
border-radius: 50%;
content: '';
transform: translateY(-50%);
}
header.st-header-row {
display: flex !important;
min-height: 94px !important;
flex-flow: row nowrap !important;
align-items: center !important;
gap: 12px !important;
padding: 12px 16px !important;
border-bottom: 0;
}
.st-header-brand {
width: auto;
flex: 0 0 auto;
padding: 0;
border: 0;
}
.st-logo-img { height: 68px; }
.st-header-address { display: none; }
.st-header-contact {
width: auto;
min-width: 0;
flex: 1 1 auto;
justify-content: flex-start;
padding: 0;
border: 0;
}
.st-header-phones {
width: 100%;
align-items: flex-start;
color: var(--st-ink);
font-size: 16px;
font-weight: 700;
line-height: 1.42;
text-align: left;
}
.st-header-contact .st-sika-link { display: none !important; }
.st-recall-link {
margin: 2px 0 0;
font-size: 13px;
line-height: 1.2;
text-align: left;
text-decoration: underline;
text-decoration-style: dashed;
text-underline-offset: 4px;
}
.st-recall-icon,
.st-recall-desktop { display: none; }
.st-recall-mobile { display: inline; }
.st-nav-toggle {
display: flex;
width: 56px;
height: 56px;
min-height: 56px;
flex: 0 0 56px;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: 4px;
background: var(--st-orange);
box-shadow: 0 2px 7px rgba(0,0,0,.12);
}
.st-nav-toggle__icon,
.st-nav-toggle__icon::before,
.st-nav-toggle__icon::after { width: 24px; height: 3px; background: #fff; }
.st-nav-toggle[aria-expanded='true'] .st-nav-toggle__icon { background: transparent; }
.st-nav-toggle[aria-expanded='true'] .st-nav-toggle__icon::before { top: 0; transform: rotate(45deg); }
.st-nav-toggle[aria-expanded='true'] .st-nav-toggle__icon::after { top: 0; transform: rotate(-45deg); }
nav.st-nav-row {
min-height: 3px !important;
border-bottom-width: 3px;
background: #fff;
}
.st-nav-inner { padding: 6px 12px 10px !important; background: #e4e4e4; }
.st-nav-row.is-open .st-nav-inner { display: flex; }
.st-side-hero-row .st-products-menu {
min-height: 0;
padding: 6px 10px 10px !important;
}
.st-side-hero-row .st-products-toggle {
position: relative;
display: block !important;
min-height: 46px;
padding: 13px 42px 13px 12px !important;
cursor: pointer;
}
.st-side-hero-row .st-products-toggle::after {
position: absolute;
top: 50%;
right: 14px;
width: 9px;
height: 9px;
border-right: 2px solid var(--st-orange);
border-bottom: 2px solid var(--st-orange);
content: '' !important;
transform: translateY(-65%) rotate(45deg);
transition: transform .18s ease;
}
.st-side-hero-row .st-products-menu.is-open .st-products-toggle::after {
transform: translateY(-35%) rotate(225deg);
}
.st-side-hero-row .st-products-menu .index-category {
display: none !important;
max-height: 330px;
grid-template-columns: 1fr !important;
gap: 6px !important;
overflow-x: hidden;
overflow-y: auto;
padding: 2px !important;
scroll-snap-type: none;
}
.st-side-hero-row .st-products-menu.is-open .index-category { display: grid !important; }
.st-side-hero-row .st-products-menu .index-category > li {
display: block !important;
min-width: 0;
width: 100%;
flex: none;
}
.st-side-hero-row .st-products-menu a.left-menu-item {
min-height: 46px;
width: 100%;
padding: 10px 12px !important;
}
.st-home-catalog { padding-top: 0; }
.st-catalog-showcase .page-head { padding: 16px 0 14px; }
.st-catalog-showcase .page-head h2 { font-size: 30px !important; line-height: 1.1 !important; }
.st-theme .card__media,
.st-theme .card__media img { height: 145px !important; }
.st-theme .card__body {
min-height: 52px !important;
flex: 0 0 auto;
align-items: center;
padding: 10px 12px !important;
}
.st-theme .card__title { font-size: 14px; line-height: 1.25; }
.st-theme .card__icon { width: 25px; height: 25px; font-size: 12px; }
.st-theme .pcard__media { height: 170px !important; padding: 8px !important; }
.st-theme .pcard__body { gap: 7px; padding: 11px 12px 13px !important; }
}
@media (max-width: 390px) {
header.st-header-row { gap: 9px !important; padding-right: 12px !important; padding-left: 12px !important; }
.st-logo-img { height: 60px; }
.st-header-phones { font-size: 14px; }
.st-nav-toggle { width: 52px; height: 52px; min-height: 52px; flex-basis: 52px; }
.st-mobile-ticker__track { animation-duration: 21s; }
}
@media (prefers-reduced-motion: reduce) {
.st-mobile-ticker__track { animation-duration: 60s; }
}
/* ===========================================================
V6 — выпадающие подкатегории бокового меню.
=========================================================== */
@media (min-width: 761px) {
.st-side-hero-row .st-products-menu .has-subcategories {
position: relative !important;
}
.st-side-hero-row .st-products-menu .has-subcategories > .left-menu-item {
padding-right: 32px !important;
}
.st-side-hero-row .st-products-menu .has-subcategories > .left-menu-item::after {
position: absolute;
top: 50%;
right: 13px;
width: 8px;
height: 8px;
display: block !important;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
content: '' !important;
transform: translateY(-50%) rotate(45deg);
}
.st-side-hero-row .st-products-menu .left-menu-subcategories {
position: absolute;
z-index: 200;
top: -8px;
left: calc(100% + 8px);
display: block !important;
visibility: hidden;
width: 275px;
margin: 0 !important;
padding: 8px !important;
border-left: 3px solid var(--st-orange);
border-radius: 4px;
background: #fff;
box-shadow: 0 10px 28px rgba(0,0,0,.18);
opacity: 0;
pointer-events: none;
transform: translateX(8px);
transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.st-side-hero-row .st-products-menu .left-menu-subcategories::before {
position: absolute;
top: 0;
bottom: 0;
left: -10px;
width: 10px;
content: '';
}
.st-side-hero-row .st-products-menu .has-subcategories:hover > .left-menu-subcategories,
.st-side-hero-row .st-products-menu .has-subcategories:focus-within > .left-menu-subcategories {
visibility: visible;
opacity: 1;
pointer-events: auto;
transform: translateX(0);
}
.st-side-hero-row .st-products-menu .left-menu-subcategories li,
.st-side-hero-row .st-products-menu .left-menu-subcategories a {
width: 100%;
border: 0 !important;
}
.st-side-hero-row .st-products-menu .left-menu-subcategories a {
padding: 11px 13px !important;
border-radius: 3px !important;
color: var(--st-ink) !important;
font-size: 14px;
line-height: 1.35;
}
.st-side-hero-row .st-products-menu .left-menu-subcategories a:hover,
.st-side-hero-row .st-products-menu .left-menu-subcategories a:focus {
background: var(--st-gray) !important;
color: var(--st-orange) !important;
text-decoration: none;
}
}
/* Чёткая, контрастная типографика на всех разрешениях. */
body.st-theme {
color: #202124;
font-size: 17px;
line-height: 1.58;
text-rendering: optimizeLegibility;
}
.st-header-address { color: #252525; font-weight: 500; }
.st-header-phones { color: #202124; font-weight: 700; }
.st-nav-link { color: #252525 !important; font-size: 15.5px; font-weight: 600; }
.st-side-hero-row .side a.left-menu-item { color: #252525 !important; font-size: 16px !important; line-height: 1.4 !important; }
.st-side-hero-row .left-menu-subcategories a { color: #252525 !important; font-size: 15px !important; }
.st-hero-text p { color: #f0f0f0; font-size: 19px; line-height: 1.62; }
.st-stats-grid span { opacity: 1; font-size: 14.5px; }
.st-theme .card__title,
.st-theme .pcard__title { color: #202124; font-size: 16.5px; font-weight: 700; line-height: 1.38; }
.st-text-page > p,
.st-text-page .pagetext > p,
.st-text-page .pagetext > div,
.st-policy-page .pagetext p,
.st-policy-page .pagetext div,
.st-policy-page .pagetext li { color: #252525; font-size: 18px; line-height: 1.75; }
.st-price-intro p { color: #252525; font-size: 18px; }
.st-support-page .st-support-documents a { color: #d9500b !important; font-size: 16px; line-height: 1.45; }
.st-contact-group a,
.st-contact-group .st-contact-phone { font-size: 18px; }
.st-company-details { color: #202124; font-size: 16px; }
.st-breadcrumbs,
.catalog-category-page .crumbs,
.catalog-item-page .crumbs { color: #666; font-size: 13.5px; }
.st-footer { color: #c3c3c3; font-size: 14px; }
@media (max-width: 760px) {
body.st-theme { font-size: 16px; line-height: 1.55; }
.st-mobile-ticker { color: #ededed; font-size: 14px; }
.st-nav-link { font-size: 14px; }
.st-side-hero-row .side a.left-menu-item { font-size: 15px !important; }
.st-side-hero-row .left-menu-subcategories a { font-size: 14.5px !important; }
.st-hero-text p { font-size: 17px; line-height: 1.58; }
.st-theme .card__title,
.st-theme .pcard__title { font-size: 15.5px; }
.st-text-page > p,
.st-text-page .pagetext > p,
.st-text-page .pagetext > div,
.st-policy-page .pagetext p,
.st-policy-page .pagetext div,
.st-policy-page .pagetext li { font-size: 16.5px; line-height: 1.68; }
}
@media (max-width: 760px) {
.st-side-hero-row .st-products-menu .has-subcategories > .left-menu-item {
position: relative;
padding-right: 38px !important;
}
.st-side-hero-row .st-products-menu .has-subcategories > .left-menu-item::after {
position: absolute;
top: 50%;
right: 14px;
width: 8px;
height: 8px;
display: block !important;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
content: '' !important;
transform: translateY(-65%) rotate(45deg);
transition: transform .16s ease;
}
.st-side-hero-row .st-products-menu .has-subcategories.is-submenu-open > .left-menu-item::after {
transform: translateY(-35%) rotate(225deg);
}
.st-side-hero-row .st-products-menu .has-subcategories.is-submenu-open > .left-menu-subcategories {
position: static;
display: block !important;
width: 100%;
margin: 4px 0 2px !important;
padding: 4px 0 4px 12px !important;
}
.st-side-hero-row .st-products-menu .left-menu-subcategories a {
padding: 10px 12px !important;
border-left: 2px solid var(--st-orange);
background: #fff;
color: var(--st-ink);
}
}
/* V7 — сертификат открывается поверх страницы в полном размере. */
.st-certificate-open {
position: relative;
display: inline-block;
max-width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
border: 0;
border-radius: 4px;
background: transparent;
color: inherit;
cursor: zoom-in;
font: inherit;
vertical-align: top;
}
.st-certificate-open::after {
position: absolute;
right: 12px;
bottom: 12px;
padding: 7px 10px;
border-radius: 3px;
background: rgba(24,25,29,.9);
color: #fff;
content: 'Нажмите, чтобы увеличить';
font: 600 13px/1.25 'PT Sans', Arial, sans-serif;
opacity: 0;
pointer-events: none;
transform: translateY(5px);
transition: opacity .16s ease, transform .16s ease;
}
.st-certificate-open:hover::after,
.st-certificate-open:focus-visible::after { opacity: 1; transform: translateY(0); }
.st-certificate-open:focus-visible { outline: 3px solid var(--st-orange); outline-offset: 3px; }
.st-certificate-open img { display: block; margin: 0 !important; }
body.st-lightbox-open { overflow: hidden; }
.st-certificate-lightbox[hidden] { display: none !important; }
.st-certificate-lightbox {
position: fixed;
z-index: 99999;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(12,13,16,.92);
}
.st-certificate-lightbox__image {
display: block;
width: auto;
max-width: min(94vw, 1100px);
height: auto;
max-height: 92vh;
object-fit: contain;
border-radius: 3px;
box-shadow: 0 16px 50px rgba(0,0,0,.45);
}
.st-certificate-lightbox__close {
position: fixed;
z-index: 1;
top: 14px;
right: 18px;
width: 46px;
height: 46px;
padding: 0;
border: 1px solid rgba(255,255,255,.45);
border-radius: 50%;
background: rgba(24,25,29,.8);
color: #fff;
cursor: pointer;
font: 400 34px/42px Arial, sans-serif;
}
.st-certificate-lightbox__close:hover,
.st-certificate-lightbox__close:focus-visible { border-color: var(--st-orange); color: var(--st-orange); outline: 0; }
@media (max-width: 760px) {
.st-contacts-page .st-map-card--contacts { height: auto; }
.st-contacts-page .st-map-card--contacts > a:first-child { min-height: 0; flex: none; }
.st-contacts-page .st-map-card--contacts img { height: 260px; min-height: 0; }
.st-certificate-lightbox { padding: 14px; }
.st-certificate-lightbox__image { max-width: 96vw; max-height: 90vh; }
.st-certificate-open::after { display: none; content: none; }
}
/* ===========================================================
V8 — карточка товара по утверждённому HTML-макету.
=========================================================== */
.catalog-item-page > .wrap {
width: 100% !important;
max-width: 1400px !important;
grid-template-columns: 340px minmax(0, 1fr) !important;
gap: 0 48px !important;
padding-top: 0 !important;
padding-bottom: 60px !important;
}
.catalog-item-page > .wrap > .image-wrap {
width: 340px !important;
max-width: 340px !important;
margin-top: 24px !important;
}
.catalog-item-page > .wrap > .image-wrap .image {
width: 340px !important;
max-width: 340px !important;
border-color: #eee !important;
}
.catalog-item-page > .wrap > .image-wrap img {
width: 100% !important;
height: auto !important;
max-height: 480px !important;
object-fit: contain !important;
}
.catalog-item-page > .wrap > .info-block {
width: 100% !important;
max-width: none !important;
margin-top: 24px !important;
padding: 0 !important;
}
.catalog-item-page .info-block .title-wrap h1.title {
max-width: 900px;
color: #202124 !important;
font: 700 24px/1.3 'PT Sans', Arial, sans-serif !important;
}
.catalog-item-page .vendor-code-wrap { margin-top: 8px !important; }
.catalog-item-page .vendor-code { color: #8b8b8b !important; font-size: 14px !important; }
.catalog-item-page .price-wrap { margin-top: 14px !important; }
.catalog-item-page .info-block > .price-wrap .price {
color: #1a8c3a !important;
font: 700 28px/1.2 'PT Sans', Arial, sans-serif !important;
}
.catalog-item-page .stock-value-wrap { margin-top: 9px !important; }
.catalog-item-page .order-actions-wrap { margin-top: 16px !important; }
.catalog-item-page .order-actions-wrap .instant-order {
min-width: 0 !important;
padding: 12px 20px !important;
border: 1px solid #d8d8d8 !important;
border-radius: 2px !important;
background: #f4f4f4 !important;
box-shadow: none !important;
color: #202124 !important;
font: 700 15px/1.35 'PT Sans', Arial, sans-serif !important;
text-transform: none !important;
}
.catalog-item-page .order-actions-wrap .instant-order::before {
margin-right: 7px;
content: '\26A1';
}
.catalog-item-page .order-actions-wrap .instant-order:hover,
.catalog-item-page .order-actions-wrap .instant-order:focus {
border-color: var(--st-orange) !important;
background: #fff !important;
color: var(--st-orange) !important;
}
.catalog-item-page .item-params-block {
width: 100% !important;
max-width: 900px !important;
margin-top: 32px !important;
}
.catalog-item-page .item-params-block .section-title {
margin: 0 !important;
color: #202124 !important;
font: 700 22px/1.2 Oswald, 'Arial Narrow', sans-serif !important;
text-transform: uppercase !important;
}
.catalog-item-page .item-params-block table {
width: 100% !important;
margin-top: 18px !important;
font-size: 16px !important;
}
.catalog-item-page .item-params-block table td { padding: 14px 16px !important; }
.catalog-item-page > .wrap > .description-block,
.catalog-item-page > .wrap > .recommended-items-block {
grid-column: 1 / -1 !important;
margin-top: 32px !important;
padding: 36px 0 0 !important;
border: 0 !important;
border-top: 1px solid #eee !important;
border-radius: 0 !important;
background: #fff !important;
}
.catalog-item-page .description-block .nav-tabs > li > a {
color: var(--st-orange) !important;
font-size: 20px !important;
font-weight: 700 !important;
}
.catalog-item-page .description-block .tab-content {
max-width: 980px;
color: #252525 !important;
font-size: 18px !important;
line-height: 1.72 !important;
}
@media (max-width: 760px) {
.catalog-item-page > .wrap {
display: block !important;
padding-right: 16px !important;
padding-left: 16px !important;
}
.catalog-item-page > .wrap > .image-wrap,
.catalog-item-page > .wrap > .image-wrap .image {
width: 100% !important;
max-width: 340px !important;
margin-right: auto !important;
margin-left: auto !important;
}
.catalog-item-page > .wrap > .image-wrap img {
max-width: 220px !important;
margin-right: auto !important;
margin-left: auto !important;
}
.catalog-item-page > .wrap > .info-block { margin-top: 22px !important; }
.catalog-item-page .info-block .title-wrap h1.title { font-size: 21px !important; line-height: 1.35 !important; }
.catalog-item-page .info-block > .price-wrap .price { font-size: 26px !important; }
.catalog-item-page .item-params-block { margin-top: 28px !important; }
.catalog-item-page .item-params-block .section-title { font-size: 20px !important; }
.catalog-item-page .item-params-block table,
.catalog-item-page .item-params-block table tbody { display: block; width: 100%; }
.catalog-item-page .item-params-block table tr { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 54%); }
.catalog-item-page .item-params-block table td { width: auto !important; padding: 12px 10px !important; overflow-wrap: anywhere; }
.catalog-item-page > .wrap > .description-block,
.catalog-item-page > .wrap > .recommended-items-block {
margin-top: 26px !important;
padding: 26px 0 0 !important;
}
.catalog-item-page .description-block .tab-content { font-size: 16.5px !important; line-height: 1.68 !important; }
}
/* V9 — заметная ссылка на техническое описание товара. */
.catalog-item-page a.st-tech-description-link {
display: inline-flex !important;
min-height: 52px;
align-items: center;
justify-content: center;
gap: 10px;
margin: 20px 0 8px !important;
padding: 14px 24px !important;
border: 2px solid var(--st-orange) !important;
border-radius: 3px !important;
background: var(--st-orange) !important;
box-shadow: 0 5px 14px rgba(232,100,30,.22);
color: #fff !important;
font: 700 20px/1.2 Oswald, 'Arial Narrow', sans-serif !important;
letter-spacing: .35px;
text-decoration: none !important;
text-transform: uppercase;
transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.catalog-item-page a.st-tech-description-link::after {
content: '\2192';
font-family: Arial, sans-serif;
font-size: 22px;
line-height: 1;
}
.catalog-item-page a.st-tech-description-link:hover,
.catalog-item-page a.st-tech-description-link:focus-visible {
border-color: #c94f10 !important;
background: #c94f10 !important;
box-shadow: 0 7px 18px rgba(201,79,16,.28);
color: #fff !important;
outline: 0;
transform: translateY(-1px);
}
@media (max-width: 760px) {
.catalog-item-page a.st-tech-description-link {
width: 100%;
min-height: 56px;
margin-top: 20px !important;
padding: 15px 16px !important;
font-size: 18px !important;
text-align: center;
}
}
/* ===========================================================
V10 — карточка товара без пустой колонки и целые фото
категорий на мобильных экранах.
=========================================================== */
.catalog-item-page > .wrap > .item-params-block--wide {
grid-column: 1 / -1 !important;
width: 100% !important;
max-width: none !important;
margin-top: 30px !important;
padding-top: 28px;
border-top: 1px solid #eee;
}
.catalog-item-page > .wrap > .item-params-block--wide table {
width: 100% !important;
table-layout: fixed;
}
.catalog-item-page > .wrap > .item-params-block--wide table td:first-child { width: 36% !important; }
.catalog-item-page > .wrap > .item-params-block--wide table td:last-child { width: 64% !important; }
@media (max-width: 760px) {
.st-theme .card__media {
width: 100%;
height: auto !important;
aspect-ratio: 16 / 10;
background: #f3f3f3;
}
.st-theme .card__media img {
width: 100% !important;
height: 100% !important;
padding: 0 !important;
object-fit: contain !important;
object-position: center center !important;
transform: none !important;
}
.st-theme .card__media::after { display: none !important; }
.catalog-item-page > .wrap > .item-params-block--wide {
margin-top: 26px !important;
padding-top: 24px;
}
.catalog-item-page > .wrap > .item-params-block--wide table td:first-child { width: auto !important; }
.catalog-item-page > .wrap > .item-params-block--wide table td:last-child { width: auto !important; }
}
/* ===========================================================
V11 — характеристики справа на ПК; фото категорий без полей.
=========================================================== */
@media (min-width: 761px) {
.catalog-item-page .info-block .item-params-block {
width: 100% !important;
max-width: 900px !important;
margin-top: 32px !important;
}
}
@media (max-width: 760px) {
.st-theme .card__media {
height: auto !important;
aspect-ratio: 16 / 10;
overflow: hidden;
background: #e9e9e9;
}
.st-theme .card__media.card__media--portrait { aspect-ratio: 4 / 5; }
.st-theme .card__media img {
width: 100% !important;
height: 100% !important;
padding: 0 !important;
object-fit: cover !important;
object-position: center center !important;
transform: none !important;
}
.st-theme .card__media.card__media--portrait img { object-position: center 48% !important; }
}
/* ===========================================================
V12 — рабочая форма, плотная карточка товара и аккуратная
мобильная выдача категорий/рекомендаций.
=========================================================== */
/* Верх карточки товара: описание занимает свободное место под
фотографией, а характеристики остаются справа от неё. */
.catalog-item-page > .wrap > .product-overview {
display: grid;
grid-column: 1 / -1;
grid-template-columns: 380px minmax(0, 1fr);
grid-template-rows: auto auto auto;
column-gap: 40px;
width: 100%;
min-width: 0;
margin-top: 24px;
align-items: start;
}
.catalog-item-page .product-overview > .image-wrap {
grid-column: 1;
grid-row: 1;
width: 380px !important;
max-width: 380px !important;
margin: 0 !important;
}
.catalog-item-page .product-overview > .image-wrap .image {
display: block;
overflow: hidden;
width: 380px !important;
max-width: 380px !important;
border: 1px solid var(--st-line);
border-radius: 4px;
}
.catalog-item-page .product-overview > .image-wrap img {
display: block;
width: 100% !important;
height: auto !important;
max-height: 480px !important;
margin: 0 auto;
object-fit: contain;
}
.catalog-item-page .product-overview > .info-block {
grid-column: 2;
grid-row: 1 / span 3;
width: 100% !important;
min-width: 0;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
.catalog-item-page .product-overview > .product-images-slider {
grid-column: 1;
grid-row: 2;
width: 100%;
}
.catalog-item-page .product-overview > .description-block--product-copy {
grid-column: 1;
grid-row: 3;
width: 100%;
min-width: 0;
margin: 24px 0 0 !important;
padding: 24px 0 0 !important;
border: 0 !important;
border-top: 1px solid var(--st-line) !important;
border-radius: 0 !important;
background: transparent !important;
}
.catalog-item-page .product-overview > .description-block--product-copy .tab-content {
font-size: 16px !important;
line-height: 1.65 !important;
}
/* Фоновый дубль нужен только на телефоне: он заполняет края,
пока основная фотография остаётся целой и одинаковой высоты. */
.st-theme .card__media { position: relative; }
.st-theme .card__media-bg { display: none !important; }
/* Встроенная форма повторяет служебную структуру рабочей
формы в модальном окне, включая область ошибок и ответа. */
.st-recall-card .st-recall-form .fields { min-height: 0 !important; }
.st-recall-card .st-recall-form .help-block {
margin: 5px 0 0;
color: #ffb38c;
font-size: 13px;
line-height: 1.35;
}
@media (max-width: 760px) {
.catalog-item-page > .wrap > .product-overview {
display: flex !important;
flex-direction: column;
gap: 0;
margin-top: 20px;
}
.catalog-item-page .product-overview > .image-wrap,
.catalog-item-page .product-overview > .image-wrap .image {
width: 100% !important;
max-width: 340px !important;
margin-right: auto !important;
margin-left: auto !important;
}
.catalog-item-page .product-overview > .image-wrap img {
width: auto !important;
max-width: 100% !important;
max-height: 360px !important;
}
.catalog-item-page .product-overview > .info-block {
width: 100% !important;
margin-top: 22px !important;
}
.catalog-item-page .product-overview > .product-images-slider { margin-top: 20px !important; }
.catalog-item-page .product-overview > .description-block--product-copy {
width: 100%;
margin-top: 26px !important;
padding-top: 26px !important;
}
.st-theme .card__media,
.st-theme .card__media.card__media--portrait {
position: relative;
height: clamp(175px, 44vw, 225px) !important;
aspect-ratio: auto !important;
overflow: hidden;
background: #d8d8d8;
}
.st-theme .card__media img.card__media-bg {
display: block !important;
position: absolute !important;
z-index: 0;
top: -12% !important;
right: -12% !important;
bottom: -12% !important;
left: -12% !important;
width: 124% !important;
height: 124% !important;
padding: 0 !important;
object-fit: cover !important;
filter: blur(15px) brightness(.78);
opacity: .52;
transform: scale(1.04) !important;
}
.st-theme .card__media img.card__media-img,
.st-theme .card__media.card__media--portrait img.card__media-img {
display: block;
position: relative;
z-index: 1;
width: 100% !important;
height: 100% !important;
padding: 0 !important;
object-fit: contain !important;
object-position: center center !important;
transform: none !important;
}
.catalog-item-page .recommended-items-block .pcard .order-actions-wrap {
display: block !important;
width: 100% !important;
margin-top: 6px !important;
}
.catalog-item-page .recommended-items-block .pcard button.instant-order,
.catalog-item-page .recommended-items-block .pcard a.instant-order {
display: flex !important;
width: 100% !important;
min-width: 0 !important;
min-height: 42px !important;
padding: 9px 6px !important;
border-color: var(--st-orange) !important;
border-radius: 3px !important;
background: var(--st-orange) !important;
color: #fff !important;
font: 700 13px/1.2 'PT Sans', Arial, sans-serif !important;
white-space: nowrap !important;
text-transform: none !important;
}
.catalog-item-page .recommended-items-block .pcard .instant-order::before {
display: none !important;
content: none !important;
}
}
@media (max-width: 400px) {
.st-theme .card__media,
.st-theme .card__media.card__media--portrait {
height: 175px !important;
}
.catalog-item-page .recommended-items-block .pcard button.instant-order,
.catalog-item-page .recommended-items-block .pcard a.instant-order {
min-height: 40px !important;
font-size: 12px !important;
}
}
/* ===========================================================
V14 — описание под характеристиками и компактная мобильная
навигация назад к родительской категории.
=========================================================== */
/* После переноса внутрь правой колонки блок идёт сразу вслед за
таблицей характеристик и занимает её полную ширину. */
.catalog-item-page .product-overview > .info-block > .description-block--product-copy {
width: 100% !important;
max-width: 900px !important;
margin: 18px 0 0 !important;
padding: 18px !important;
border: 1px solid #e2e2e2 !important;
border-left: 4px solid var(--st-orange) !important;
border-radius: 5px !important;
background: #f7f7f7 !important;
box-shadow: 0 3px 12px rgba(0,0,0,.045);
}
.catalog-item-page .product-overview > .info-block > .description-block--product-copy::before {
display: block;
margin: 0 0 9px;
color: var(--st-ink);
content: 'Описание товара';
font: 700 18px/1.25 Oswald, 'Arial Narrow', sans-serif;
letter-spacing: .25px;
text-transform: uppercase;
}
.catalog-item-page .info-block > .description-block--product-copy a.st-tech-description-link {
display: flex !important;
width: 100%;
min-height: 46px;
justify-content: space-between;
margin: 13px 0 0 !important;
padding: 11px 14px !important;
box-shadow: none;
font-size: 16px !important;
}
@media (max-width: 760px) {
.catalog-item-page .product-overview > .info-block > .description-block--product-copy {
width: 100% !important;
max-width: none !important;
margin-top: 18px !important;
padding: 16px !important;
}
.catalog-item-page .product-overview > .info-block > .description-block--product-copy::before {
font-size: 17px;
}
.catalog-item-page .info-block > .description-block--product-copy a.st-tech-description-link {
min-height: 48px;
padding: 12px 14px !important;
font-size: 15.5px !important;
text-align: left;
}
/* На телефоне длинную дублирующую цепочку заменяет одна ясная
ссылка назад. Название текущего товара полностью видно в H1. */
.catalog-item-page .crumbs {
overflow: visible;
padding: 10px 20px !important;
background: #f7f7f7;
font-size: 14px !important;
line-height: 1.35;
}
.catalog-item-page .crumbs .breadcrumb {
display: block;
overflow: visible;
margin: 0 !important;
padding: 0 !important;
white-space: normal;
}
.catalog-item-page .crumbs .breadcrumb > li,
.catalog-item-page .crumbs .breadcrumb > li.active {
display: none !important;
}
.catalog-item-page .crumbs .breadcrumb > li:nth-last-child(2) {
display: flex !important;
width: 100%;
min-width: 0;
max-width: none;
align-items: flex-start;
gap: 7px;
overflow: visible;
white-space: normal;
}
.catalog-item-page .crumbs .breadcrumb > li:nth-last-child(2)::before {
flex: 0 0 auto;
padding: 0;
color: var(--st-orange);
content: '\2190';
font: 700 18px/1.05 Arial, sans-serif;
}
.catalog-item-page .crumbs .breadcrumb > li:nth-last-child(2) a {
display: block;
min-width: 0;
margin: 0;
color: #343434 !important;
font-weight: 600;
overflow-wrap: anywhere;
text-transform: none;
}
.catalog-item-page .crumbs .breadcrumb > li:nth-last-child(2) + li::before {
display: none !important;
content: none !important;
}
}
/* ===========================================================
V13 — компактный успех формы, цельное описание товара,
единый кадр категорий и однострочные мобильные крошки.
=========================================================== */
/* После отправки форма превращается в самостоятельную компактную
карточку: светлый текст больше не теряется на тёмном фоне. */
.st-recall-card.is-success {
min-height: 250px;
align-self: start;
}
.st-recall-card.is-success .st-recall-form {
display: flex;
min-height: 170px;
flex-direction: column;
justify-content: center;
}
.st-recall-card.is-success [data-recall-message] {
display: flex !important;
min-height: 150px !important;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 7px;
margin: 20px 0 0 !important;
padding: 22px !important;
border: 1px solid rgba(255,255,255,.14);
border-radius: 5px;
background: rgba(255,255,255,.055);
color: #fff !important;
text-align: center;
}
.st-recall-success__icon {
display: grid;
width: 46px;
height: 46px;
place-items: center;
margin-bottom: 4px;
border-radius: 50%;
background: var(--st-orange);
color: #fff;
font: 700 27px/1 Arial, sans-serif;
}
.st-recall-success__title {
display: block;
color: #fff;
font: 700 21px/1.25 Oswald, 'Arial Narrow', sans-serif;
letter-spacing: .25px;
text-transform: uppercase;
}
.st-recall-success__text {
display: block;
max-width: 390px;
color: #e5e5e7;
font-size: 15px;
line-height: 1.5;
}
/* Описание и ссылка на техлист воспринимаются как один блок,
расположенный непосредственно под фотографией товара. */
.catalog-item-page .product-overview > .description-block--product-copy {
margin-top: 18px !important;
padding: 18px !important;
border: 1px solid #e2e2e2 !important;
border-left: 4px solid var(--st-orange) !important;
border-radius: 5px !important;
background: #f7f7f7 !important;
box-shadow: 0 3px 12px rgba(0,0,0,.045);
}
.catalog-item-page .product-overview > .description-block--product-copy::before {
display: block;
margin: 0 0 9px;
color: var(--st-ink);
content: 'Описание товара';
font: 700 18px/1.25 Oswald, 'Arial Narrow', sans-serif;
letter-spacing: .25px;
text-transform: uppercase;
}
.catalog-item-page .description-block--product-copy .nav-tabs {
margin: 0 0 10px !important;
}
.catalog-item-page .description-block--product-copy .tab-content,
.catalog-item-page .description-block--product-copy .tab-pane {
margin: 0 !important;
padding: 0 !important;
color: #292929;
font-size: 15.5px !important;
line-height: 1.58 !important;
}
.catalog-item-page .description-block--product-copy .tab-content p {
margin: 0 0 9px !important;
}
.catalog-item-page .description-block--product-copy .tab-content p:last-child {
margin-bottom: 0 !important;
}
.catalog-item-page .description-block--product-copy a.st-tech-description-link {
display: flex !important;
width: 100%;
min-height: 46px;
justify-content: space-between;
margin: 13px 0 0 !important;
padding: 11px 14px !important;
box-shadow: none;
font-size: 16px !important;
}
.catalog-item-page .description-block--product-copy a.st-tech-description-link::after {
font-size: 19px;
}
@media (max-width: 760px) {
/* Одинаковая высота и заполнение кадра — как в карточках на ПК. */
.st-theme .card__media,
.st-theme .card__media.card__media--portrait {
height: 190px !important;
aspect-ratio: auto !important;
background: #f1f1f1 !important;
}
.st-theme .card__media img.card__media-bg {
display: none !important;
}
.st-theme .card__media img.card__media-img,
.st-theme .card__media.card__media--portrait img.card__media-img {
position: static !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
}
.st-theme .card__media.card__media--portrait img.card__media-img {
object-position: center 46% !important;
}
.catalog-item-page .product-overview > .description-block--product-copy {
margin-top: 18px !important;
padding: 16px !important;
}
.catalog-item-page .product-overview > .description-block--product-copy::before {
font-size: 17px;
}
.catalog-item-page .description-block--product-copy .tab-content,
.catalog-item-page .description-block--product-copy .tab-pane {
font-size: 16px !important;
line-height: 1.55 !important;
}
.catalog-item-page .description-block--product-copy a.st-tech-description-link {
min-height: 48px;
padding: 12px 14px !important;
font-size: 15.5px !important;
text-align: left;
}
/* Длинная цепочка не растягивает верх карточки: она остаётся
одной строкой, а текущее название аккуратно сокращается. */
.catalog-item-page .crumbs {
overflow: hidden;
padding: 11px 20px 10px !important;
background: #f7f7f7;
font-size: 12.5px !important;
line-height: 1.35;
}
.catalog-item-page .crumbs .breadcrumb {
display: flex;
width: 100%;
align-items: center;
flex-wrap: nowrap;
gap: 0;
overflow-x: auto;
margin: 0 !important;
padding: 0 0 3px !important;
white-space: nowrap;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.catalog-item-page .crumbs .breadcrumb::-webkit-scrollbar {
display: none;
}
.catalog-item-page .crumbs .breadcrumb > li {
display: inline-flex !important;
min-width: max-content;
align-items: center;
flex: 0 0 auto;
}
.catalog-item-page .crumbs .breadcrumb > li.active {
display: block !important;
min-width: 0;
max-width: 64vw;
overflow: hidden;
color: #343434;
text-overflow: ellipsis;
}
.st-recall-card.is-success {
min-height: 220px;
padding: 24px 20px;
}
.st-recall-card.is-success .st-recall-form {
min-height: 140px;
}
.st-recall-card.is-success [data-recall-message] {
min-height: 130px !important;
margin-top: 16px !important;
padding: 18px !important;
}
}
@media (max-width: 400px) {
.st-theme .card__media,
.st-theme .card__media.card__media--portrait {
height: 175px !important;
}
}
/* Финальный мобильный вариант крошек: без скрытого горизонтального
продолжения и без обрезанного названия текущего товара. */
@media (max-width: 760px) {
.catalog-item-page .crumbs {
overflow: visible;
padding: 10px 20px !important;
background: #f7f7f7;
font-size: 14px !important;
line-height: 1.35;
}
.catalog-item-page .crumbs .breadcrumb {
display: block;
overflow: visible;
margin: 0 !important;
padding: 0 !important;
white-space: normal;
}
.catalog-item-page .crumbs .breadcrumb > li,
.catalog-item-page .crumbs .breadcrumb > li.active {
display: none !important;
}
.catalog-item-page .crumbs .breadcrumb > li:nth-last-child(2) {
display: flex !important;
width: 100%;
min-width: 0;
max-width: none;
align-items: flex-start;
gap: 7px;
overflow: visible;
white-space: normal;
}
.catalog-item-page .crumbs .breadcrumb > li:nth-last-child(2)::before {
flex: 0 0 auto;
padding: 0;
color: var(--st-orange);
content: '\2190';
font: 700 18px/1.05 Arial, sans-serif;
}
.catalog-item-page .crumbs .breadcrumb > li:nth-last-child(2) a {
display: block;
min-width: 0;
margin: 0;
color: #343434 !important;
font-weight: 600;
overflow-wrap: anywhere;
text-transform: none;
}
}
/* ===========================================================
V15 — описание товара на всю ширину карточки.
=========================================================== */
.catalog-item-page > .wrap > .description-block--product-copy {
grid-column: 1 / -1;
width: 100% !important;
max-width: none !important;
margin: 18px 0 0 !important;
padding: 18px !important;
border: 1px solid #e2e2e2 !important;
border-left: 4px solid var(--st-orange) !important;
border-radius: 5px !important;
background: #f7f7f7 !important;
box-shadow: 0 3px 12px rgba(0,0,0,.045);
}
.catalog-item-page > .wrap > .description-block--product-copy::before {
display: block;
margin: 0 0 9px;
color: var(--st-ink);
content: 'Описание товара';
font: 700 18px/1.25 Oswald, 'Arial Narrow', sans-serif;
letter-spacing: .25px;
text-transform: uppercase;
}
.catalog-item-page > .wrap > .description-block--product-copy a.st-tech-description-link {
display: flex !important;
width: 100%;
min-height: 46px;
justify-content: space-between;
margin: 13px 0 0 !important;
padding: 11px 14px !important;
box-shadow: none;
font-size: 16px !important;
}
@media (max-width: 760px) {
.catalog-item-page > .wrap > .description-block--product-copy {
width: 100% !important;
margin-top: 18px !important;
padding: 16px !important;
}
.catalog-item-page > .wrap > .description-block--product-copy::before {
font-size: 17px;
}
.catalog-item-page > .wrap > .description-block--product-copy a.st-tech-description-link {
min-height: 48px;
padding: 12px 14px !important;
font-size: 15.5px !important;
text-align: left;
}
}