/* ============================================================================= ETC Design System для etc-chip.ru — единый язык с etc-platform.ru ----------------------------------------------------------------------------- Слой подключается ПОСЛЕДНИМ и работает только при классе .etc-ds на . Правила намеренно живут под префиксом html#etc-ds#etc-ds: в магазине уже 2600+ !important в etc-custom.css и inline-стили в header.html, перебить их можно только большей специфичностью при равном !important. Палитра, шрифты и радиусы взяты один-в-один с etc-platform.ru (apps/web/src/app/globals.css + tailwind-preset.js), чтобы два продукта читались как одна экосистема. ============================================================================= */ @import url("etc-fonts.css"); /* --------------------------------------------------------------------------- 1. ТОКЕНЫ. Светлая тема — база (как на платформе). --------------------------------------------------------------------------- */ html#etc-ds#etc-ds { color-scheme: light; --surface-base: 246 249 247; --surface: 255 255 255; --surface-sunken: 241 245 243; --surface-raised: 234 240 237; --surface-strong: 225 233 229; --ink: 16 24 21; --ink-2: 47 60 54; --ink-muted: 70 82 77; --ink-subtle: 81 94 88; --ink-faint: 89 105 98; --line-subtle: 234 239 236; --line: 221 229 225; --line-strong: 199 212 205; --line-input: 186 200 193; --brand: 14 122 84; --brand-hover: 10 104 72; --brand-ink: 14 122 84; --brand-line: 14 122 84; --brand-line-soft: 154 185 170; --brand-line-subtle: 201 221 211; --brand-tint: 231 246 239; --brand-tint-2: 213 235 224; --danger: 180 67 58; --danger-ink: 169 78 67; --danger-tint: 252 236 234; --danger-line: 241 203 198; --warn-ink: 161 80 38; --warn-tint: 255 241 232; --warn-line: 243 214 194; --info-ink: 57 112 155; --info-tint: 234 242 250; --info-line: 195 213 230; --gold-ink: 138 106 31; --gold-tint: 251 243 223; --gold-line: 234 223 187; --accent-ink: 95 69 160; --accent-tint: 240 235 250; --accent-line: 220 210 242; --ondark: 234 243 238; --ondark-muted: 180 204 192; --ondark-accent: 127 214 178; --onbright: 6 35 26; --shadow-rgb: 16 42 32; --shadow-boost: 1; /* Шкала теней платформы */ --ds-shadow-sm: 0 1px 2px 0 rgb(var(--shadow-rgb) / calc(.05 * var(--shadow-boost))); --ds-shadow: 0 1px 3px 0 rgb(var(--shadow-rgb) / calc(.10 * var(--shadow-boost))), 0 1px 2px -1px rgb(var(--shadow-rgb) / calc(.10 * var(--shadow-boost))); --ds-shadow-md: 0 4px 6px -1px rgb(var(--shadow-rgb) / calc(.10 * var(--shadow-boost))), 0 2px 4px -2px rgb(var(--shadow-rgb) / calc(.10 * var(--shadow-boost))); --ds-shadow-lg: 0 10px 15px -3px rgb(var(--shadow-rgb) / calc(.10 * var(--shadow-boost))), 0 4px 6px -4px rgb(var(--shadow-rgb) / calc(.10 * var(--shadow-boost))); --ds-shadow-xl: 0 20px 25px -5px rgb(var(--shadow-rgb) / calc(.10 * var(--shadow-boost))), 0 8px 10px -6px rgb(var(--shadow-rgb) / calc(.10 * var(--shadow-boost))); /* Радиусы: сдержанная шкала вместо «пузырьковых» 30 px */ --ds-r-sm: 8px; --ds-r: 10px; --ds-r-lg: 12px; --ds-r-xl: 16px; --ds-r-2xl: 20px; --ds-font: "ETC Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --ds-font-display: "ETC Onest", "ETC Inter", system-ui, sans-serif; --ds-font-mono: "ETC Mono", ui-monospace, SFMono-Regular, Consolas, monospace; /* ---- Мост на legacy-переменные магазина (etc-custom.css, etc-poster-v3.css). Перекрашиваем 14 000 строк старых правил, не редактируя их. ---- */ --etc-page: rgb(var(--surface-base)); --etc-page-2: rgb(var(--surface-sunken)); --etc-panel: rgb(var(--surface)); --etc-panel-2: rgb(var(--surface-sunken)); --etc-panel-3: rgb(var(--surface-raised)); --etc-text: rgb(var(--ink)); --etc-muted: rgb(var(--ink-muted)); --etc-soft: rgb(var(--ink-2)); --etc-line: rgb(var(--line)); --etc-line-strong: rgb(var(--line-strong)); --etc-green: rgb(var(--brand)); --etc-green-2: rgb(var(--brand-hover)); --etc-green-3: rgb(var(--brand-hover)); --etc-green-soft: rgb(var(--brand-tint)); --etc-amber: rgb(var(--warn-ink)); --etc-amber-2: rgb(var(--warn-ink)); --etc-amber-soft: rgb(var(--warn-tint)); --etc-danger: rgb(var(--danger)); --etc-red: rgb(var(--danger)); --etc-blue: rgb(var(--info-ink)); --etc-bg: rgb(var(--surface-base)); --etc-bg-2: rgb(var(--surface-sunken)); --etc-field: rgb(var(--surface)); --etc-field-2: rgb(var(--surface-sunken)); --etc-accent: rgb(var(--brand)); --etc-vs-accent: rgb(var(--brand)); --etc-vs-accent-dark: rgb(var(--brand-hover)); --etc-vs-pill-bg: rgb(var(--surface)); --etc-vs-pill-border: rgb(var(--line)); --etc-vs-pill-border-active: rgb(var(--brand)); --etc-vs-gold: rgb(var(--warn-ink)); --etc-vs-gold-hover: rgb(var(--warn-ink)); --etc-vs-soft-bg: rgb(var(--brand-tint)); --etc-price-bg: rgb(var(--brand-tint)); --etc-price-border: rgb(var(--brand-line-subtle)); --etc-price-text: rgb(var(--ink)); --etc-shadow: var(--ds-shadow-lg); --etc-shadow-soft: var(--ds-shadow-md); --etc-focus: 0 0 0 3px rgb(var(--brand) / .18); --etc-radius: var(--ds-r); --etc-radius-md: var(--ds-r); --etc-radius-lg: var(--ds-r-lg); --etc-radius-xl: var(--ds-r-xl); --etc-font: var(--ds-font); /* Bootstrap-переменные темы */ --bs-body-bg: rgb(var(--surface-base)); --bs-body-color: rgb(var(--ink)); --bs-border-color: rgb(var(--line)); --bs-primary: rgb(var(--brand)); --bs-link-color: rgb(var(--brand-ink)); --bs-link-hover-color: rgb(var(--brand-hover)); } /* --------------------------------------------------------------------------- 2. Тёмная тема — не инверсия, а собранная заново палитра платформы. --------------------------------------------------------------------------- */ html#etc-ds#etc-ds[data-etc-theme="dark"] { color-scheme: dark; --surface-base: 11 18 16; --surface: 20 29 25; --surface-sunken: 16 24 21; --surface-raised: 30 42 36; --surface-strong: 40 53 46; --ink: 236 242 239; --ink-2: 211 222 216; --ink-muted: 173 190 182; --ink-subtle: 158 173 166; --ink-faint: 146 160 153; --line-subtle: 33 45 39; --line: 46 60 53; --line-strong: 61 76 69; --line-input: 72 88 81; --brand: 15 132 89; --brand-hover: 12 107 74; --brand-ink: 74 203 150; --brand-line: 46 140 103; --brand-line-soft: 47 110 84; --brand-line-subtle: 34 81 60; --brand-tint: 15 36 27; --brand-tint-2: 21 49 38; --danger: 194 84 74; --danger-ink: 240 149 138; --danger-tint: 43 24 21; --danger-line: 76 40 34; --warn-ink: 233 165 103; --warn-tint: 43 29 18; --warn-line: 75 52 32; --info-ink: 132 185 224; --info-tint: 17 31 43; --info-line: 36 56 75; --gold-ink: 220 182 92; --gold-tint: 42 34 19; --gold-line: 74 61 30; --accent-ink: 183 164 238; --accent-tint: 30 24 54; --accent-line: 55 46 92; --shadow-rgb: 0 0 0; --shadow-boost: 3.2; --etc-green: rgb(var(--brand-ink)); --etc-green-2: rgb(var(--brand)); --etc-green-3: rgb(var(--brand-hover)); --etc-amber: rgb(var(--warn-ink)); --etc-amber-2: rgb(var(--warn-ink)); --etc-focus: 0 0 0 3px rgb(var(--brand-ink) / .22); } /* Светлая тема явно — на случай, если старые слои ставят свои значения позже */ html#etc-ds#etc-ds[data-etc-theme="light"] { color-scheme: light; } /* --------------------------------------------------------------------------- 3. База: типографика, фон, ссылки, фокус, скроллбар. --------------------------------------------------------------------------- */ html#etc-ds#etc-ds body, html#etc-ds#etc-ds .etc-shop-shell { background: rgb(var(--surface-base)) !important; color: rgb(var(--ink)) !important; font-family: var(--ds-font) !important; font-feature-settings: "cv05" 1, "ss03" 1; -webkit-font-smoothing: antialiased; letter-spacing: 0; } html#etc-ds#etc-ds body, html#etc-ds#etc-ds p, html#etc-ds#etc-ds li, html#etc-ds#etc-ds td, html#etc-ds#etc-ds th, html#etc-ds#etc-ds span, html#etc-ds#etc-ds div, html#etc-ds#etc-ds a, html#etc-ds#etc-ds label, html#etc-ds#etc-ds input, html#etc-ds#etc-ds select, html#etc-ds#etc-ds textarea, html#etc-ds#etc-ds button { font-family: var(--ds-font); } html#etc-ds#etc-ds h1, html#etc-ds#etc-ds h2, html#etc-ds#etc-ds h3, html#etc-ds#etc-ds h4, html#etc-ds#etc-ds h5, html#etc-ds#etc-ds h6, html#etc-ds#etc-ds .h1, html#etc-ds#etc-ds .h2, html#etc-ds#etc-ds .h3, html#etc-ds#etc-ds .h4, html#etc-ds#etc-ds .h5, html#etc-ds#etc-ds .h6, html#etc-ds#etc-ds .etc-cat-head__title, html#etc-ds#etc-ds .etc-hero__title, html#etc-ds#etc-ds .page-title-overlap h1 { font-family: var(--ds-font-display) !important; color: rgb(var(--ink)); letter-spacing: -.02em; font-weight: 700; text-wrap: balance; } /* Крупные заголовки перестают кричать капслоком — как на платформе */ html#etc-ds#etc-ds h1, html#etc-ds#etc-ds .h1, html#etc-ds#etc-ds h2, html#etc-ds#etc-ds .h2, html#etc-ds#etc-ds h3, html#etc-ds#etc-ds .h3, html#etc-ds#etc-ds .etc-cat-head__title, html#etc-ds#etc-ds .etc-section-title, html#etc-ds#etc-ds .etc-hero__title, html#etc-ds#etc-ds .products-title, html#etc-ds#etc-ds .page-title-overlap h1 { text-transform: none !important; } html#etc-ds#etc-ds h1, html#etc-ds#etc-ds .h1 { font-size: clamp(1.85rem, 1.2rem + 2.2vw, 2.75rem); line-height: 1.1; } html#etc-ds#etc-ds h2, html#etc-ds#etc-ds .h2 { font-size: clamp(1.45rem, 1.05rem + 1.4vw, 2rem); line-height: 1.15; } html#etc-ds#etc-ds h3, html#etc-ds#etc-ds .h3 { font-size: clamp(1.2rem, .98rem + .75vw, 1.5rem); line-height: 1.2; } html#etc-ds#etc-ds h4, html#etc-ds#etc-ds .h4 { font-size: 1.125rem; line-height: 1.3; } /* Технические коды — моноширинный, как на платформе */ html#etc-ds#etc-ds code, html#etc-ds#etc-ds kbd, html#etc-ds#etc-ds samp, html#etc-ds#etc-ds .etc-mono { font-family: var(--ds-font-mono) !important; font-size: .92em; letter-spacing: -.01em; } html#etc-ds#etc-ds a { color: rgb(var(--brand-ink)); text-decoration-color: rgb(var(--brand-line-soft)); } html#etc-ds#etc-ds a:hover { color: rgb(var(--brand-hover)); } html#etc-ds#etc-ds[data-etc-theme="dark"] a:hover { color: rgb(var(--brand-ink)); } html#etc-ds#etc-ds .text-muted, html#etc-ds#etc-ds .text-secondary { color: rgb(var(--ink-muted)) !important; } html#etc-ds#etc-ds ::selection { background: rgb(var(--brand) / .22); color: rgb(var(--ink)); } html#etc-ds#etc-ds :focus-visible { outline: 2px solid rgb(var(--brand)); outline-offset: 2px; border-radius: 4px; } html#etc-ds#etc-ds * { scrollbar-width: thin; scrollbar-color: rgb(var(--line-strong)) transparent; } html#etc-ds#etc-ds ::-webkit-scrollbar { width: 10px; height: 10px; } html#etc-ds#etc-ds ::-webkit-scrollbar-track { background: transparent; } html#etc-ds#etc-ds ::-webkit-scrollbar-thumb { background-color: rgb(var(--line-strong)); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; } html#etc-ds#etc-ds ::-webkit-scrollbar-thumb:hover { background-color: rgb(var(--ink-faint)); } html#etc-ds#etc-ds hr { border-color: rgb(var(--line)); opacity: 1; } /* Общие поверхности движка */ html#etc-ds#etc-ds .bg-light, html#etc-ds#etc-ds .bg-white, html#etc-ds#etc-ds .bg-body, html#etc-ds#etc-ds .card, html#etc-ds#etc-ds .modal-content, html#etc-ds#etc-ds .dropdown-menu, html#etc-ds#etc-ds .list-group-item, html#etc-ds#etc-ds .accordion-item, html#etc-ds#etc-ds .offcanvas { background-color: rgb(var(--surface)) !important; color: rgb(var(--ink)); border-color: rgb(var(--line)); } html#etc-ds#etc-ds .bg-secondary, html#etc-ds#etc-ds .bg-body-tertiary { background-color: rgb(var(--surface-sunken)) !important; } html#etc-ds#etc-ds .card, html#etc-ds#etc-ds .modal-content, html#etc-ds#etc-ds .dropdown-menu { border: 1px solid rgb(var(--line)) !important; border-radius: var(--ds-r-lg) !important; box-shadow: var(--ds-shadow-md) !important; } html#etc-ds#etc-ds .dropdown-item { color: rgb(var(--ink-2)); border-radius: 8px; } html#etc-ds#etc-ds .dropdown-item:hover, html#etc-ds#etc-ds .dropdown-item:focus { background: rgb(var(--surface-raised)); color: rgb(var(--ink)); } html#etc-ds#etc-ds .dropdown-menu { padding: 6px; } /* --------------------------------------------------------------------------- 4. Кнопки. Один зелёный акцент действия, янтарь — только предупреждение/акция. --------------------------------------------------------------------------- */ html#etc-ds#etc-ds .btn, html#etc-ds#etc-ds .button, html#etc-ds#etc-ds button.btn { font-family: var(--ds-font) !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; border-radius: var(--ds-r) !important; padding: 10px 18px !important; border-width: 1px !important; box-shadow: none !important; text-shadow: none !important; transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease !important; } html#etc-ds#etc-ds .btn-primary, html#etc-ds#etc-ds .btn-success, html#etc-ds#etc-ds .btn-lg.btn-primary, html#etc-ds#etc-ds .btn-buy, html#etc-ds#etc-ds input[type="submit"].btn-primary { background: rgb(var(--brand)) !important; border-color: rgb(var(--brand-line)) !important; color: #fff !important; background-image: none !important; } html#etc-ds#etc-ds .btn-primary:hover, html#etc-ds#etc-ds .btn-success:hover, html#etc-ds#etc-ds .btn-buy:hover { background: rgb(var(--brand-hover)) !important; border-color: rgb(var(--brand-hover)) !important; color: #fff !important; } html#etc-ds#etc-ds .btn-outline-primary, html#etc-ds#etc-ds .btn-outline-success, html#etc-ds#etc-ds .btn-outline-secondary, html#etc-ds#etc-ds .btn-secondary, html#etc-ds#etc-ds .btn-light { background: rgb(var(--surface)) !important; border-color: rgb(var(--line)) !important; color: rgb(var(--ink-2)) !important; background-image: none !important; } html#etc-ds#etc-ds .btn-outline-primary:hover, html#etc-ds#etc-ds .btn-outline-success:hover, html#etc-ds#etc-ds .btn-outline-secondary:hover, html#etc-ds#etc-ds .btn-secondary:hover, html#etc-ds#etc-ds .btn-light:hover { background: rgb(var(--surface-sunken)) !important; border-color: rgb(var(--line-strong)) !important; color: rgb(var(--ink)) !important; } html#etc-ds#etc-ds .btn-warning { background: rgb(var(--warn-tint)) !important; border-color: rgb(var(--warn-line)) !important; color: rgb(var(--warn-ink)) !important; background-image: none !important; } html#etc-ds#etc-ds .btn-danger { background: rgb(var(--danger)) !important; border-color: rgb(var(--danger)) !important; color: #fff !important; background-image: none !important; } html#etc-ds#etc-ds .btn:active { transform: translateY(1px); } html#etc-ds#etc-ds .btn:disabled, html#etc-ds#etc-ds .btn.disabled { background: rgb(var(--surface-sunken)) !important; border-color: rgb(var(--line)) !important; color: rgb(var(--ink-faint)) !important; opacity: 1 !important; } /* Бейджи */ html#etc-ds#etc-ds .badge { font-family: var(--ds-font) !important; font-weight: 600; letter-spacing: 0; border-radius: 999px !important; padding: .35em .7em; } html#etc-ds#etc-ds .badge.bg-success, html#etc-ds#etc-ds .badge.bg-primary { background: rgb(var(--brand-tint)) !important; color: rgb(var(--brand-ink)) !important; border: 1px solid rgb(var(--brand-line-subtle)); } html#etc-ds#etc-ds .badge.bg-warning, html#etc-ds#etc-ds .badge.bg-danger { background: rgb(var(--warn-tint)) !important; color: rgb(var(--warn-ink)) !important; border: 1px solid rgb(var(--warn-line)); } /* --------------------------------------------------------------------------- 5. Формы. --------------------------------------------------------------------------- */ html#etc-ds#etc-ds .form-control, html#etc-ds#etc-ds .form-select, html#etc-ds#etc-ds input[type="text"], html#etc-ds#etc-ds input[type="email"], html#etc-ds#etc-ds input[type="password"], html#etc-ds#etc-ds input[type="tel"], html#etc-ds#etc-ds input[type="number"], html#etc-ds#etc-ds input[type="search"], html#etc-ds#etc-ds select, html#etc-ds#etc-ds textarea { background: rgb(var(--surface)) !important; border: 1px solid rgb(var(--line-input)) !important; color: rgb(var(--ink)) !important; border-radius: var(--ds-r) !important; font-family: var(--ds-font) !important; font-size: 15px !important; padding: 10px 14px !important; box-shadow: none !important; transition: border-color .16s ease, box-shadow .16s ease !important; } html#etc-ds#etc-ds .form-control::placeholder, html#etc-ds#etc-ds input::placeholder, html#etc-ds#etc-ds textarea::placeholder { color: rgb(var(--ink-faint)) !important; opacity: 1; } html#etc-ds#etc-ds .form-control:focus, html#etc-ds#etc-ds .form-select:focus, html#etc-ds#etc-ds input:focus, html#etc-ds#etc-ds select:focus, html#etc-ds#etc-ds textarea:focus { border-color: rgb(var(--brand)) !important; box-shadow: 0 0 0 3px rgb(var(--brand) / .16) !important; outline: none !important; } html#etc-ds#etc-ds .form-label, html#etc-ds#etc-ds label { color: rgb(var(--ink-2)); font-weight: 500; } html#etc-ds#etc-ds .form-check-input { border-color: rgb(var(--line-input)); background-color: rgb(var(--surface)); } html#etc-ds#etc-ds .form-check-input:checked { background-color: rgb(var(--brand)); border-color: rgb(var(--brand)); } /* Таблицы движка */ html#etc-ds#etc-ds .table, html#etc-ds#etc-ds table.contentTable { --bs-table-bg: transparent; color: rgb(var(--ink)); border-color: rgb(var(--line)); } html#etc-ds#etc-ds .table > :not(caption) > * > * { background: transparent; border-bottom-color: rgb(var(--line-subtle)); color: rgb(var(--ink)); } html#etc-ds#etc-ds .table thead th { font-family: var(--ds-font); font-weight: 600; color: rgb(var(--ink-muted)); font-size: 13px; letter-spacing: .01em; text-transform: none; border-bottom: 1px solid rgb(var(--line)) !important; } /* --------------------------------------------------------------------------- 6. Шапка: спокойная служебная полоса + чистая панель бренда. --------------------------------------------------------------------------- */ html#etc-ds#etc-ds .etc-site-header { box-shadow: none !important; border-bottom: 1px solid rgb(var(--line)) !important; background: rgb(var(--surface)) !important; } html#etc-ds#etc-ds .etc-site-header .topbar, html#etc-ds#etc-ds .etc-site-header .topbar-dark, html#etc-ds#etc-ds .etc-site-header .topbar.bg-dark { background: rgb(var(--surface-sunken)) !important; background-image: none !important; border-bottom: 1px solid rgb(var(--line-subtle)) !important; color: rgb(var(--ink-muted)) !important; font-size: 13px; min-height: 40px; } html#etc-ds#etc-ds .topbar .topbar-link, html#etc-ds#etc-ds .topbar a, html#etc-ds#etc-ds .topbar .text-muted, html#etc-ds#etc-ds .topbar i { color: rgb(var(--ink-muted)) !important; text-decoration: none; } html#etc-ds#etc-ds .topbar .topbar-link:hover { color: rgb(var(--brand-ink)) !important; } html#etc-ds#etc-ds .etc-topbar-max-badge { background: rgb(var(--surface)) !important; color: rgb(var(--ink-muted)) !important; border: 1px solid rgb(var(--line)) !important; border-radius: 6px !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .04em; padding: 2px 6px !important; box-shadow: none !important; } html#etc-ds#etc-ds .etc-topbar-max-badge:hover { color: rgb(var(--brand-ink)) !important; border-color: rgb(var(--brand-line-subtle)) !important; } html#etc-ds#etc-ds .etc-mainbar, html#etc-ds#etc-ds .etc-mainbar.bg-light { background: rgb(var(--surface)) !important; background-image: none !important; border: 0 !important; } html#etc-ds#etc-ds .etc-mainbar__nav { padding-top: 14px !important; padding-bottom: 14px !important; } html#etc-ds#etc-ds .etc-brand__text span { font-family: var(--ds-font-display) !important; font-weight: 700 !important; font-size: 17px !important; letter-spacing: -.02em !important; color: rgb(var(--ink)) !important; text-transform: none !important; } html#etc-ds#etc-ds .etc-brand__text small { color: rgb(var(--ink-faint)) !important; font-size: 12px !important; font-weight: 400 !important; } /* Поиск в шапке — главный инструмент, поэтому выглядит как поле, а не как «кнопка с лупой» */ html#etc-ds#etc-ds .etc-mainbar__nav .input-group .form-control, html#etc-ds#etc-ds #quick_find_keyword { background: rgb(var(--surface-sunken)) !important; border: 1px solid rgb(var(--line)) !important; border-right: 0 !important; border-radius: var(--ds-r) 0 0 var(--ds-r) !important; height: 44px !important; font-size: 15px !important; } html#etc-ds#etc-ds .etc-mainbar__nav .input-group .btn { background: rgb(var(--surface-sunken)) !important; border: 1px solid rgb(var(--line)) !important; border-left: 0 !important; border-radius: 0 var(--ds-r) var(--ds-r) 0 !important; height: 44px !important; } html#etc-ds#etc-ds .etc-mainbar__nav .input-group:focus-within .form-control, html#etc-ds#etc-ds .etc-mainbar__nav .input-group:focus-within .btn { border-color: rgb(var(--brand)) !important; background: rgb(var(--surface)) !important; } html#etc-ds#etc-ds .etc-mainbar__nav .input-group .btn i { color: rgb(var(--ink-muted)) !important; } /* Инструменты справа */ html#etc-ds#etc-ds .navbar-tool .navbar-tool-icon-box { background: rgb(var(--surface-sunken)) !important; border: 1px solid rgb(var(--line)) !important; border-radius: var(--ds-r) !important; color: rgb(var(--ink-2)) !important; box-shadow: none !important; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; transition: background-color .16s ease, border-color .16s ease; } html#etc-ds#etc-ds .navbar-tool:hover .navbar-tool-icon-box { background: rgb(var(--surface-raised)) !important; border-color: rgb(var(--line-strong)) !important; } html#etc-ds#etc-ds .navbar-tool .navbar-tool-icon { color: rgb(var(--ink-2)) !important; } html#etc-ds#etc-ds .navbar-tool-text small, html#etc-ds#etc-ds .navbar-tool-text .navbar-tool-label { color: rgb(var(--ink-faint)) !important; } html#etc-ds#etc-ds .navbar-tool-text span, html#etc-ds#etc-ds .navbar-tool-text b { color: rgb(var(--ink)) !important; font-weight: 600; } /* Корзина — единственный «залитый» инструмент в шапке */ html#etc-ds#etc-ds .etc-cart-widget .navbar-tool-icon-box, html#etc-ds#etc-ds .etc-cart-widget .navbar-tool-icon-box.bg-secondary { background: rgb(var(--brand)) !important; border-color: rgb(var(--brand-line)) !important; color: #fff !important; } html#etc-ds#etc-ds .etc-cart-widget .navbar-tool-icon, html#etc-ds#etc-ds .etc-cart-widget .navbar-tool-icon-box i { color: #fff !important; } html#etc-ds#etc-ds .etc-cart-widget:hover .navbar-tool-icon-box { background: rgb(var(--brand-hover)) !important; } /* --------------------------------------------------------------------------- 7. Меню-полоса. Три «действия» слева, разделы — обычные ссылки. --------------------------------------------------------------------------- */ html#etc-ds#etc-ds .etc-menubar { background: rgb(var(--surface)) !important; background-image: none !important; border-top: 1px solid rgb(var(--line-subtle)) !important; border-bottom: 1px solid rgb(var(--line)) !important; } html#etc-ds#etc-ds .navbar-nav .nav-link, html#etc-ds#etc-ds .etc-mainmenu .nav-link, html#etc-ds#etc-ds .navbar-nav .dropdown-toggle { background: transparent !important; background-image: none !important; border: 1px solid transparent !important; border-radius: var(--ds-r) !important; color: rgb(var(--ink-muted)) !important; font-weight: 500 !important; font-size: 14px !important; text-shadow: none !important; box-shadow: none !important; padding: 9px 12px !important; transition: color .16s ease, background-color .16s ease, border-color .16s ease !important; } html#etc-ds#etc-ds .navbar-nav .nav-link:hover, html#etc-ds#etc-ds .etc-mainmenu .nav-link:hover { background: rgb(var(--surface-sunken)) !important; color: rgb(var(--ink)) !important; } /* Каталог — основное действие */ html#etc-ds#etc-ds .etc-mainmenu .nav-link.etc-menu-catalog, html#etc-ds#etc-ds .navbar-nav .nav-link.etc-menu-catalog, html#etc-ds#etc-ds .navbar-nav .dropdown-toggle.etc-menu-catalog { background: rgb(var(--brand)) !important; background-image: none !important; border-color: rgb(var(--brand-line)) !important; color: #fff !important; font-weight: 600 !important; text-shadow: none !important; } html#etc-ds#etc-ds .etc-mainmenu .nav-link.etc-menu-catalog:hover, html#etc-ds#etc-ds .navbar-nav .dropdown-toggle.etc-menu-catalog:hover { background: rgb(var(--brand-hover)) !important; color: #fff !important; } /* Заказ прошивки и онлайн-редактор — вторичные действия в общей форме */ html#etc-ds#etc-ds .navbar-nav a[href*="firmware"], html#etc-ds#etc-ds .etc-mainmenu .etc-online-editor, html#etc-ds#etc-ds .navbar-nav .etc-online-editor { background: rgb(var(--surface)) !important; background-image: none !important; border: 1px solid rgb(var(--line-strong)) !important; color: rgb(var(--ink-2)) !important; font-weight: 600 !important; box-shadow: none !important; text-shadow: none !important; } html#etc-ds#etc-ds .navbar-nav a[href*="firmware"]:hover, html#etc-ds#etc-ds .navbar-nav .etc-online-editor:hover { background: rgb(var(--surface-sunken)) !important; border-color: rgb(var(--brand-line-soft)) !important; color: rgb(var(--ink)) !important; } html#etc-ds#etc-ds .navbar-nav .etc-online-editor::before, html#etc-ds#etc-ds .etc-mainmenu .etc-online-editor::before { background: rgb(var(--warn-ink)) !important; box-shadow: none !important; } html#etc-ds#etc-ds .navbar-nav .nav-link.active { color: rgb(var(--brand-ink)) !important; background: rgb(var(--brand-tint)) !important; border-color: rgb(var(--brand-line-subtle)) !important; text-shadow: none !important; } /* --------------------------------------------------------------------------- 8. Полоса промо онлайн-редактора: информирует, но не перебивает шапку. --------------------------------------------------------------------------- */ html#etc-ds#etc-ds .etc-editor-bar { background: rgb(var(--brand-tint)) !important; background-image: none !important; border-bottom: 1px solid rgb(var(--brand-line-subtle)) !important; box-shadow: none !important; } html#etc-ds#etc-ds .etc-editor-bar__text, html#etc-ds#etc-ds .etc-editor-bar__text strong, html#etc-ds#etc-ds .etc-editor-bar__title { color: rgb(var(--ink)) !important; } html#etc-ds#etc-ds .etc-editor-bar__text span, html#etc-ds#etc-ds .etc-editor-bar__desc { color: rgb(var(--ink-muted)) !important; } html#etc-ds#etc-ds .etc-editor-bar__pulse { background: rgb(var(--brand)) !important; box-shadow: 0 0 0 4px rgb(var(--brand) / .14) !important; } html#etc-ds#etc-ds .etc-editor-bar__cta { background: rgb(var(--brand)) !important; background-image: none !important; border: 1px solid rgb(var(--brand-line)) !important; color: #fff !important; border-radius: var(--ds-r) !important; font-weight: 600 !important; box-shadow: none !important; text-shadow: none !important; } html#etc-ds#etc-ds .etc-editor-bar__cta:hover { background: rgb(var(--brand-hover)) !important; } html#etc-ds#etc-ds .etc-editor-bar__close { color: rgb(var(--ink-faint)) !important; } /* --------------------------------------------------------------------------- 9. Футер — тихая сервисная зона, а не второй герой. --------------------------------------------------------------------------- */ html#etc-ds#etc-ds .footer, html#etc-ds#etc-ds footer, html#etc-ds#etc-ds .etc-footer { background: rgb(var(--surface-sunken)) !important; background-image: none !important; border-top: 1px solid rgb(var(--line)) !important; color: rgb(var(--ink-muted)) !important; } html#etc-ds#etc-ds footer h4, html#etc-ds#etc-ds footer h5, html#etc-ds#etc-ds footer .widget-title, html#etc-ds#etc-ds .etc-footer h4 { color: rgb(var(--ink)) !important; font-family: var(--ds-font-display) !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; } html#etc-ds#etc-ds footer a, html#etc-ds#etc-ds .etc-footer a { color: rgb(var(--ink-muted)) !important; text-decoration: none; } html#etc-ds#etc-ds footer a:hover, html#etc-ds#etc-ds .etc-footer a:hover { color: rgb(var(--brand-ink)) !important; } /* --------------------------------------------------------------------------- 10. Плавающая колонка соцсетей и мобильный тулбар. --------------------------------------------------------------------------- */ html#etc-ds#etc-ds .etc-social-panel, html#etc-ds#etc-ds .etc-social-dock { background: rgb(var(--surface)) !important; border: 1px solid rgb(var(--line)) !important; border-radius: var(--ds-r-lg) !important; box-shadow: var(--ds-shadow-md) !important; } html#etc-ds#etc-ds .handheld-toolbar, html#etc-ds#etc-ds .etc-handheld-toolbar { background: rgb(var(--surface)) !important; border-top: 1px solid rgb(var(--line)) !important; box-shadow: 0 -4px 16px rgb(var(--shadow-rgb) / calc(.08 * var(--shadow-boost))) !important; } html#etc-ds#etc-ds .handheld-toolbar .toolbar-item { color: rgb(var(--ink-muted)) !important; } /* Кнопка «наверх» */ html#etc-ds#etc-ds .btn-scroll-top { background: rgb(var(--surface)) !important; border: 1px solid rgb(var(--line)) !important; color: rgb(var(--ink-2)) !important; box-shadow: var(--ds-shadow-md) !important; } /* --------------------------------------------------------------------------- 11. Cookie-плашка. --------------------------------------------------------------------------- */ html#etc-ds#etc-ds .etc-cookie-banner, html#etc-ds#etc-ds .cookie-banner { background: rgb(var(--surface)) !important; border-top: 1px solid rgb(var(--line)) !important; color: rgb(var(--ink-2)) !important; box-shadow: 0 -8px 24px rgb(var(--shadow-rgb) / calc(.08 * var(--shadow-boost))) !important; } /* ============================================================================= ЧАСТЬ 2. Главная страница и каталог. ============================================================================= */ /* --------------------------------------------------------------------------- 12. Секционные заголовки: кикер — тихая техническая подпись, заголовок — Onest. --------------------------------------------------------------------------- */ html#etc-ds#etc-ds .etc-section-kicker, html#etc-ds#etc-ds .etc-cat-head__kicker, html#etc-ds#etc-ds .etc-inline-promos__head .etc-section-kicker { color: rgb(var(--ink-faint)) !important; font-family: var(--ds-font-mono) !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: .12em !important; text-transform: uppercase !important; background: none !important; border: 0 !important; padding: 0 !important; margin-bottom: 10px !important; display: inline-block; } html#etc-ds#etc-ds .etc-cat-home__head h2, html#etc-ds#etc-ds .etc-inline-promos__head h2, html#etc-ds#etc-ds .etc-section-wrap h2, html#etc-ds#etc-ds .module h3, html#etc-ds#etc-ds .module h3 a { font-family: var(--ds-font-display) !important; color: rgb(var(--ink)) !important; text-transform: none !important; letter-spacing: -.02em !important; font-weight: 700 !important; } html#etc-ds#etc-ds .etc-cat-home__all, html#etc-ds#etc-ds .etc-vsearch__reset { color: rgb(var(--brand-ink)) !important; background: transparent !important; border: 1px solid transparent !important; border-radius: var(--ds-r) !important; font-weight: 600 !important; text-transform: none !important; } html#etc-ds#etc-ds .etc-cat-home__all:hover { background: rgb(var(--brand-tint)) !important; } /* --------------------------------------------------------------------------- 13. Герой. Фотографию оставляем — меняем оправу: одна плоскость, тихая рамка. --------------------------------------------------------------------------- */ html#etc-ds#etc-ds .etc-hero-poster, html#etc-ds#etc-ds .etc-hero-poster__frame, html#etc-ds#etc-ds .etc-hero { border-radius: var(--ds-r-xl) !important; box-shadow: var(--ds-shadow-lg) !important; border: 1px solid rgb(var(--line)) !important; overflow: hidden; } html#etc-ds#etc-ds .etc-hero-poster::before, html#etc-ds#etc-ds .etc-hero-poster::after { opacity: .55 !important; } /* Текст и кнопки внутри героя лежат на всегда-тёмном фото — статические токены */ html#etc-ds#etc-ds .etc-hero-poster .etc-hero__title, html#etc-ds#etc-ds .etc-hero-poster h1 { font-family: var(--ds-font-display) !important; color: rgb(var(--ondark)) !important; text-transform: none !important; letter-spacing: -.025em !important; } html#etc-ds#etc-ds .etc-hero-poster p { color: rgb(var(--ondark-muted)) !important; } html#etc-ds#etc-ds .etc-hero-poster .etc-hero__cta, html#etc-ds#etc-ds .etc-hero-poster .etc-firmware-btn { background: rgb(var(--brand)) !important; background-image: none !important; border: 1px solid rgb(var(--brand-line)) !important; color: #fff !important; border-radius: var(--ds-r) !important; box-shadow: none !important; text-shadow: none !important; } html#etc-ds#etc-ds .etc-hero-poster .etc-firmware-btn:hover { background: rgb(var(--brand-hover)) !important; } html#etc-ds#etc-ds .etc-hero-poster .etc-fw-title, html#etc-ds#etc-ds .etc-hero-poster .etc-fw-sub { color: #fff !important; } /* Метки поверх фото */ html#etc-ds#etc-ds .etc-hero-poster .etc-hero__badge, html#etc-ds#etc-ds .etc-hero-poster .etc-hero__chip { background: rgb(0 0 0 / .38) !important; border: 1px solid rgb(255 255 255 / .16) !important; color: rgb(var(--ondark)) !important; backdrop-filter: blur(6px); border-radius: 999px !important; font-family: var(--ds-font) !important; letter-spacing: .04em !important; } /* --------------------------------------------------------------------------- 14. Поиск по автомобилю — главный рабочий инструмент магазина. --------------------------------------------------------------------------- */ html#etc-ds#etc-ds .etc-vsearch { background: rgb(var(--surface)) !important; background-image: none !important; border: 1px solid rgb(var(--line)) !important; border-radius: var(--ds-r-xl) !important; box-shadow: var(--ds-shadow-md) !important; padding: 22px !important; } html#etc-ds#etc-ds .etc-vsearch::before, html#etc-ds#etc-ds .etc-vsearch::after { display: none !important; } html#etc-ds#etc-ds .etc-vsearch__title { font-family: var(--ds-font-display) !important; font-size: clamp(1.2rem, 1rem + .6vw, 1.5rem) !important; font-weight: 700 !important; color: rgb(var(--ink)) !important; text-transform: none !important; letter-spacing: -.02em !important; } html#etc-ds#etc-ds .etc-vsearch__title i { color: rgb(var(--brand-ink)) !important; } html#etc-ds#etc-ds .etc-vsearch__subtitle { color: rgb(var(--ink-muted)) !important; font-size: 14px !important; } /* Поле-«таблетка» каскада */ html#etc-ds#etc-ds .etc-vsearch .etc-pill { background: rgb(var(--surface)) !important; border: 1px solid rgb(var(--line-input)) !important; border-radius: var(--ds-r) !important; box-shadow: none !important; padding: 8px 14px !important; min-height: 56px; transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease !important; } html#etc-ds#etc-ds .etc-vsearch .etc-pill:hover { border-color: rgb(var(--line-strong)) !important; } html#etc-ds#etc-ds .etc-vsearch .etc-pill.is-open, html#etc-ds#etc-ds .etc-vsearch .etc-pill:focus, html#etc-ds#etc-ds .etc-vsearch .etc-pill:focus-within { border-color: rgb(var(--brand)) !important; box-shadow: 0 0 0 3px rgb(var(--brand) / .16) !important; } html#etc-ds#etc-ds .etc-vsearch .etc-pill.is-filled { border-color: rgb(var(--brand-line-soft)) !important; background: rgb(var(--brand-tint)) !important; } html#etc-ds#etc-ds .etc-vsearch .etc-pill__label { color: rgb(var(--ink-faint)) !important; font-family: var(--ds-font-mono) !important; font-size: 10px !important; letter-spacing: .1em !important; text-transform: uppercase !important; font-weight: 500 !important; } html#etc-ds#etc-ds .etc-vsearch .etc-pill__value, html#etc-ds#etc-ds .etc-vsearch .etc-pill__value .text { color: rgb(var(--ink)) !important; font-weight: 500 !important; font-size: 15px !important; } html#etc-ds#etc-ds .etc-vsearch .etc-pill__value .placeholder { color: rgb(var(--ink-faint)) !important; opacity: 1 !important; font-weight: 400 !important; } html#etc-ds#etc-ds .etc-vsearch .etc-pill__chevron { color: rgb(var(--ink-faint)) !important; } html#etc-ds#etc-ds .etc-vsearch .etc-pill.is-disabled { background: rgb(var(--surface-sunken)) !important; opacity: 1 !important; } /* Выпадающий список каскада */ html#etc-ds#etc-ds .etc-pill__menu, html#etc-ds#etc-ds .etc-pill-dropdown, html#etc-ds#etc-ds .etc-cascade-menu { background: rgb(var(--surface)) !important; border: 1px solid rgb(var(--line)) !important; border-radius: var(--ds-r-lg) !important; box-shadow: var(--ds-shadow-lg) !important; } html#etc-ds#etc-ds .etc-pill__menu .etc-pill__option:hover, html#etc-ds#etc-ds .etc-pill__option.is-active { background: rgb(var(--brand-tint)) !important; color: rgb(var(--brand-ink)) !important; } html#etc-ds#etc-ds .etc-vsearch__btn { background: rgb(var(--brand)) !important; background-image: none !important; border: 1px solid rgb(var(--brand-line)) !important; color: #fff !important; border-radius: var(--ds-r) !important; font-weight: 600 !important; min-height: 56px; box-shadow: none !important; text-shadow: none !important; letter-spacing: 0 !important; text-transform: none !important; } html#etc-ds#etc-ds .etc-vsearch__btn:hover:not(:disabled) { background: rgb(var(--brand-hover)) !important; } html#etc-ds#etc-ds .etc-vsearch__btn:disabled { background: rgb(var(--surface-strong)) !important; border-color: rgb(var(--line)) !important; color: rgb(var(--ink-faint)) !important; opacity: 1 !important; } /* Промокод месяца — техническая плашка, не рекламный баннер */ html#etc-ds#etc-ds .etc-promo-quiet { background: rgb(var(--gold-tint)) !important; border: 1px solid rgb(var(--gold-line)) !important; border-radius: var(--ds-r) !important; color: rgb(var(--gold-ink)) !important; box-shadow: none !important; padding: 6px 12px !important; } html#etc-ds#etc-ds .etc-promo-quiet strong, html#etc-ds#etc-ds .etc-promo-quiet small, html#etc-ds#etc-ds .etc-promo-quiet i { color: rgb(var(--gold-ink)) !important; } html#etc-ds#etc-ds .etc-promo-quiet__countdown { font-family: var(--ds-font-mono) !important; letter-spacing: -.02em; } /* Поиск по артикулу и по файлу */ html#etc-ds#etc-ds .etc-idsearch, html#etc-ds#etc-ds .etc-filesearch { background: rgb(var(--surface-sunken)) !important; border: 1px solid rgb(var(--line-subtle)) !important; border-radius: var(--ds-r-lg) !important; box-shadow: none !important; } html#etc-ds#etc-ds .etc-idsearch input { background: rgb(var(--surface)) !important; } html#etc-ds#etc-ds .etc-idsearch button, html#etc-ds#etc-ds .etc-filesearch button { background: rgb(var(--surface)) !important; border: 1px solid rgb(var(--line-strong)) !important; color: rgb(var(--ink-2)) !important; border-radius: var(--ds-r) !important; font-weight: 600 !important; } html#etc-ds#etc-ds .etc-idsearch button:hover { background: rgb(var(--surface-raised)) !important; } /* Результаты каскада */ html#etc-ds#etc-ds .etc-vsearch__results { background: rgb(var(--surface-sunken)) !important; border: 1px solid rgb(var(--line)) !important; border-radius: var(--ds-r-lg) !important; } html#etc-ds#etc-ds .etc-vsearch__results-title { color: rgb(var(--ink)) !important; font-weight: 600 !important; } html#etc-ds#etc-ds .etc-vsearch__results-more { color: rgb(var(--brand-ink)) !important; font-weight: 600 !important; } /* --------------------------------------------------------------------------- 15. Витрины разделов каталога (ворота по типу техники). --------------------------------------------------------------------------- */ html#etc-ds#etc-ds .etc-cat-gate { background: rgb(var(--surface)) !important; background-image: none !important; border: 1px solid rgb(var(--line)) !important; border-radius: var(--ds-r-lg) !important; box-shadow: var(--ds-shadow-sm) !important; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease !important; overflow: hidden; } html#etc-ds#etc-ds .etc-cat-gate::before { display: none !important; } html#etc-ds#etc-ds .etc-cat-gate:hover { border-color: rgb(var(--brand-line-soft)) !important; box-shadow: var(--ds-shadow-md) !important; transform: translateY(-2px); } html#etc-ds#etc-ds .etc-cat-gate__poster { background: rgb(var(--surface-sunken)) !important; border: 1px solid rgb(var(--line-subtle)) !important; border-radius: var(--ds-r) !important; } html#etc-ds#etc-ds .etc-cat-gate__index { color: rgb(var(--ink-faint)) !important; font-family: var(--ds-font-mono) !important; font-weight: 500 !important; font-size: 11px !important; letter-spacing: .08em; } html#etc-ds#etc-ds .etc-cat-gate__title { font-family: var(--ds-font-display) !important; color: rgb(var(--ink)) !important; text-transform: none !important; font-size: 17px !important; font-weight: 600 !important; letter-spacing: -.01em !important; } html#etc-ds#etc-ds .etc-cat-gate__count { background: rgb(var(--surface-sunken)) !important; border: 1px solid rgb(var(--line)) !important; color: rgb(var(--ink-muted)) !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 500 !important; box-shadow: none !important; } html#etc-ds#etc-ds .etc-cat-gate__count strong, html#etc-ds#etc-ds .etc-cat-gate__count b { color: rgb(var(--ink)) !important; font-family: var(--ds-font-mono) !important; } html#etc-ds#etc-ds .etc-cat-gate__cta { color: rgb(var(--brand-ink)) !important; font-weight: 600 !important; } /* Страница каталога */ html#etc-ds#etc-ds .etc-cat-shell { background: transparent !important; border: 0 !important; box-shadow: none !important; } html#etc-ds#etc-ds .etc-cat-head__title { font-family: var(--ds-font-display) !important; text-transform: none !important; letter-spacing: -.025em !important; color: rgb(var(--ink)) !important; } html#etc-ds#etc-ds .etc-cat-head__count, html#etc-ds#etc-ds .etc-cat-head__badge { background: rgb(var(--brand-tint)) !important; border: 1px solid rgb(var(--brand-line-subtle)) !important; color: rgb(var(--brand-ink)) !important; border-radius: 999px !important; font-weight: 600 !important; box-shadow: none !important; } /* Хлебные крошки */ html#etc-ds#etc-ds .etc-cat-path, html#etc-ds#etc-ds .breadcrumb { background: transparent !important; border: 0 !important; padding-left: 0 !important; } html#etc-ds#etc-ds .etc-cat-path__link, html#etc-ds#etc-ds .breadcrumb-item a { color: rgb(var(--ink-muted)) !important; font-size: 13px !important; font-weight: 500 !important; } html#etc-ds#etc-ds .etc-cat-path__link:hover { color: rgb(var(--brand-ink)) !important; } html#etc-ds#etc-ds .etc-cat-path__current { background: rgb(var(--surface-sunken)) !important; border: 1px solid rgb(var(--line)) !important; color: rgb(var(--ink)) !important; border-radius: 999px !important; font-size: 13px !important; font-weight: 500 !important; padding: 3px 12px !important; } /* --------------------------------------------------------------------------- 16. Плитки «рабочей среды» и промо-карточки. --------------------------------------------------------------------------- */ html#etc-ds#etc-ds .etc-tile, html#etc-ds#etc-ds .etc-promo-card, html#etc-ds#etc-ds .etc-paycta, html#etc-ds#etc-ds .etc-cta-card { background: rgb(var(--surface)) !important; background-image: none !important; border: 1px solid rgb(var(--line)) !important; border-radius: var(--ds-r-lg) !important; box-shadow: var(--ds-shadow-sm) !important; color: rgb(var(--ink)) !important; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease !important; } html#etc-ds#etc-ds .etc-tile:hover, html#etc-ds#etc-ds .etc-promo-card:hover, html#etc-ds#etc-ds .etc-paycta:hover, html#etc-ds#etc-ds .etc-cta-card:hover { border-color: rgb(var(--brand-line-soft)) !important; box-shadow: var(--ds-shadow-md) !important; transform: translateY(-2px); } html#etc-ds#etc-ds .etc-tile__label, html#etc-ds#etc-ds .etc-promo-card__title, html#etc-ds#etc-ds .etc-cta-title, html#etc-ds#etc-ds .etc-paycta__title { font-family: var(--ds-font-display) !important; color: rgb(var(--ink)) !important; text-transform: none !important; font-weight: 600 !important; letter-spacing: -.01em !important; } html#etc-ds#etc-ds .etc-tile__index, html#etc-ds#etc-ds .etc-promo-card__index { color: rgb(var(--ink-faint)) !important; font-family: var(--ds-font-mono) !important; font-weight: 500 !important; opacity: 1 !important; } html#etc-ds#etc-ds .etc-promo-card__label, html#etc-ds#etc-ds .etc-cta-label, html#etc-ds#etc-ds .etc-paycta__label { color: rgb(var(--ink-faint)) !important; font-family: var(--ds-font-mono) !important; font-size: 10.5px !important; letter-spacing: .1em !important; text-transform: uppercase !important; font-weight: 500 !important; } html#etc-ds#etc-ds .etc-promo-card__desc, html#etc-ds#etc-ds .etc-cta-desc, html#etc-ds#etc-ds .etc-tile__desc, html#etc-ds#etc-ds .etc-paycta__desc { color: rgb(var(--ink-muted)) !important; } html#etc-ds#etc-ds .etc-promo-card__icon, html#etc-ds#etc-ds .etc-paycta__icon, html#etc-ds#etc-ds .etc-cta-icon-ring { background: rgb(var(--brand-tint)) !important; border: 1px solid rgb(var(--brand-line-subtle)) !important; color: rgb(var(--brand-ink)) !important; box-shadow: none !important; border-radius: var(--ds-r) !important; } html#etc-ds#etc-ds .etc-cta-deco { display: none !important; } html#etc-ds#etc-ds .etc-promo-card__facts span, html#etc-ds#etc-ds .etc-promo-card__action, html#etc-ds#etc-ds .etc-paycta__action, html#etc-ds#etc-ds .etc-cta-btn-text { color: rgb(var(--brand-ink)) !important; font-weight: 600 !important; } html#etc-ds#etc-ds .etc-promo-card__facts span { color: rgb(var(--ink-muted)) !important; font-weight: 500 !important; } /* Первая карточка блока «Если каталога недостаточно» — единственный тёмный акцент */ html#etc-ds#etc-ds .etc-promo-card--primary { background: linear-gradient(150deg, rgb(6 45 32), rgb(9 66 46)) !important; border-color: rgb(11 82 57) !important; } html#etc-ds#etc-ds .etc-promo-card--primary .etc-promo-card__title, html#etc-ds#etc-ds .etc-promo-card--primary .etc-promo-card__index { color: rgb(var(--ondark)) !important; } html#etc-ds#etc-ds .etc-promo-card--primary .etc-promo-card__desc, html#etc-ds#etc-ds .etc-promo-card--primary .etc-promo-card__facts span { color: rgb(var(--ondark-muted)) !important; } html#etc-ds#etc-ds .etc-promo-card--primary .etc-promo-card__label { color: rgb(var(--ondark-accent)) !important; } html#etc-ds#etc-ds .etc-promo-card--primary .etc-promo-card__icon { background: rgb(255 255 255 / .1) !important; border-color: rgb(255 255 255 / .18) !important; color: rgb(var(--ondark-accent)) !important; } html#etc-ds#etc-ds .etc-promo-card--primary .etc-promo-card__action { background: rgb(var(--ondark-accent)) !important; color: rgb(var(--onbright)) !important; border-radius: var(--ds-r) !important; padding: 9px 16px !important; font-weight: 600 !important; } /* Каналы связи: один визуальный ритм, узнаваемость держит иконка */ html#etc-ds#etc-ds .etc-cta-card--vk .etc-cta-icon-ring { color: #0077FF !important; background: rgb(0 119 255 / .1) !important; border-color: rgb(0 119 255 / .22) !important; } html#etc-ds#etc-ds .etc-cta-card--tg .etc-cta-icon-ring { color: #2AABEE !important; background: rgb(42 171 238 / .1) !important; border-color: rgb(42 171 238 / .22) !important; } html#etc-ds#etc-ds .etc-cta-card--max .etc-cta-icon-ring { color: #7C4DFF !important; background: rgb(124 77 255 / .1) !important; border-color: rgb(124 77 255 / .22) !important; } html#etc-ds#etc-ds .etc-cta-card .etc-cta-btn-arrow { background: rgb(var(--surface-sunken)) !important; border: 1px solid rgb(var(--line)) !important; color: rgb(var(--ink-2)) !important; border-radius: var(--ds-r-sm) !important; box-shadow: none !important; } /* Плавающий док мессенджеров */ html#etc-ds#etc-ds .etc-social-action { border-radius: var(--ds-r) !important; border: 1px solid rgb(var(--line)) !important; background: rgb(var(--surface)) !important; box-shadow: var(--ds-shadow-md) !important; color: rgb(var(--ink-2)) !important; font-weight: 600 !important; font-size: 12px !important; } html#etc-ds#etc-ds .etc-social-action--vk { color: #0077FF !important; } html#etc-ds#etc-ds .etc-social-action--telegram { color: #2AABEE !important; } html#etc-ds#etc-ds .etc-social-action--max { color: #7C4DFF !important; } html#etc-ds#etc-ds .etc-social-action svg { fill: currentColor !important; } html#etc-ds#etc-ds .etc-social-action:hover { border-color: rgb(var(--line-strong)) !important; transform: translateY(-1px); } html#etc-ds#etc-ds .etc-social-panel__cta { background: rgb(var(--brand)) !important; color: #fff !important; border-radius: var(--ds-r) !important; font-weight: 600 !important; border: 0 !important; } /* --------------------------------------------------------------------------- 17. Карточки товаров в витринах (новинки, рекомендуемые, выдача). --------------------------------------------------------------------------- */ html#etc-ds#etc-ds .card-product, html#etc-ds#etc-ds .product-card, html#etc-ds#etc-ds .etc-product-tile { background: rgb(var(--surface)) !important; border: 1px solid rgb(var(--line)) !important; border-radius: var(--ds-r-lg) !important; box-shadow: none !important; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease !important; overflow: hidden; } html#etc-ds#etc-ds .card-product:hover, html#etc-ds#etc-ds .product-card:hover { border-color: rgb(var(--brand-line-soft)) !important; box-shadow: var(--ds-shadow-md) !important; transform: translateY(-2px); } html#etc-ds#etc-ds .card-product .card-title, html#etc-ds#etc-ds .card-product .title a, html#etc-ds#etc-ds .product-title a { color: rgb(var(--ink)) !important; font-weight: 500 !important; font-size: 13.5px !important; line-height: 1.4 !important; text-transform: none !important; } html#etc-ds#etc-ds .card-product .card-title:hover, html#etc-ds#etc-ds .card-product .title a:hover { color: rgb(var(--brand-ink)) !important; } html#etc-ds#etc-ds .product-price, html#etc-ds#etc-ds .card-product .price, html#etc-ds#etc-ds .etc-price { color: rgb(var(--ink)) !important; font-family: var(--ds-font-display) !important; font-weight: 700 !important; font-size: 17px !important; background: transparent !important; border: 0 !important; letter-spacing: -.02em !important; } html#etc-ds#etc-ds .product-price s, html#etc-ds#etc-ds .price-old { color: rgb(var(--ink-faint)) !important; font-weight: 400 !important; } html#etc-ds#etc-ds .etc-cashback, html#etc-ds#etc-ds .etc-bonus-badge { background: rgb(var(--brand-tint)) !important; border: 1px solid rgb(var(--brand-line-subtle)) !important; color: rgb(var(--brand-ink)) !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 500 !important; box-shadow: none !important; } /* Кнопка избранного на карточке */ html#etc-ds#etc-ds .btn-wishlist, html#etc-ds#etc-ds .etc-wish-btn { background: rgb(var(--surface)) !important; border: 1px solid rgb(var(--line)) !important; color: rgb(var(--ink-muted)) !important; border-radius: 999px !important; box-shadow: var(--ds-shadow-sm) !important; } /* Новости и статьи */ html#etc-ds#etc-ds .btn-rounded, html#etc-ds#etc-ds .btn.btn-rounded { background: rgb(var(--surface)) !important; border: 1px solid rgb(var(--line-strong)) !important; color: rgb(var(--ink-2)) !important; border-radius: var(--ds-r) !important; font-weight: 600 !important; background-image: none !important; } html#etc-ds#etc-ds .btn-rounded:hover { background: rgb(var(--surface-sunken)) !important; } /* ============================================================================= ЧАСТЬ 3. Карточка товара, корзина, оформление, кабинет. ============================================================================= */ /* --------------------------------------------------------------------------- 18. Шапка страницы (товар, статьи, служебные разделы). Была тёмная градиентная полоса — стала спокойная светлая зона с крошками. --------------------------------------------------------------------------- */ html#etc-ds#etc-ds .page-title-overlap, html#etc-ds#etc-ds .page-title-overlap.bg-dark { background: rgb(var(--surface)) !important; background-image: none !important; border-bottom: 1px solid rgb(var(--line-subtle)) !important; padding-top: 22px !important; padding-bottom: 8px !important; } html#etc-ds#etc-ds .page-title-overlap::before, html#etc-ds#etc-ds .page-title-overlap::after { display: none !important; } html#etc-ds#etc-ds .page-title-overlap h1, html#etc-ds#etc-ds .page-title-overlap .h1 { color: rgb(var(--ink)) !important; font-family: var(--ds-font-display) !important; font-weight: 700 !important; font-size: clamp(1.35rem, 1rem + 1.4vw, 2.1rem) !important; letter-spacing: -.025em !important; text-transform: none !important; text-shadow: none !important; margin-bottom: 4px !important; } html#etc-ds#etc-ds .page-title-overlap .breadcrumb-light .breadcrumb-item a, html#etc-ds#etc-ds .page-title-overlap .breadcrumb a, html#etc-ds#etc-ds .page-title-overlap .breadcrumb, html#etc-ds#etc-ds .page-title-overlap .breadcrumb-separator { color: rgb(var(--ink-muted)) !important; font-size: 13px !important; } html#etc-ds#etc-ds .page-title-overlap .breadcrumb a:hover { color: rgb(var(--brand-ink)) !important; } html#etc-ds#etc-ds .page-title-overlap .text-light, html#etc-ds#etc-ds .page-title-overlap .text-white { color: rgb(var(--ink-muted)) !important; } /* --------------------------------------------------------------------------- 19. Карточка товара. --------------------------------------------------------------------------- */ html#etc-ds#etc-ds .etc-product-card { background: rgb(var(--surface)) !important; background-image: none !important; border: 1px solid rgb(var(--line)) !important; border-radius: var(--ds-r-xl) !important; box-shadow: var(--ds-shadow-sm) !important; } html#etc-ds#etc-ds .etc-photo-wrap, html#etc-ds#etc-ds .etc-main-photo { border-radius: var(--ds-r-lg) !important; border: 1px solid rgb(var(--line-subtle)) !important; background: rgb(var(--surface-sunken)) !important; box-shadow: none !important; } /* Цена: крупная цифра вместо «ценника-наклейки» */ html#etc-ds#etc-ds .etc-product-card .price, html#etc-ds#etc-ds .etc-product-card .productPrice, html#etc-ds#etc-ds .price .productPrice { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; color: rgb(var(--ink)) !important; font-family: var(--ds-font-display) !important; font-weight: 700 !important; font-size: clamp(2rem, 1.4rem + 1.6vw, 2.6rem) !important; letter-spacing: -.03em !important; text-shadow: none !important; line-height: 1.05 !important; display: inline-block; } html#etc-ds#etc-ds .etc-product-card .price s, html#etc-ds#etc-ds .productPriceOld { color: rgb(var(--ink-faint)) !important; font-size: 1.05rem !important; font-weight: 400 !important; } html#etc-ds#etc-ds .bonus.cashback, html#etc-ds#etc-ds .etc-product-card .bonus { background: rgb(var(--brand-tint)) !important; border: 1px solid rgb(var(--brand-line-subtle)) !important; color: rgb(var(--brand-ink)) !important; border-radius: 999px !important; padding: 4px 12px !important; font-size: 13px !important; font-weight: 500 !important; box-shadow: none !important; display: inline-flex; align-items: center; gap: 6px; } html#etc-ds#etc-ds .bonus.cashback .small { color: rgb(var(--ink-muted)) !important; } /* Варианты калибровки — список выбора, а не набор кнопок */ html#etc-ds#etc-ds .product_options label strong, html#etc-ds#etc-ds .product_options label { color: rgb(var(--ink)) !important; font-family: var(--ds-font) !important; font-weight: 600 !important; font-size: 14px !important; } html#etc-ds#etc-ds .etc-pills-vertical { gap: 8px !important; } html#etc-ds#etc-ds .etc-pills-vertical .etc-pill { background: rgb(var(--surface)) !important; background-image: none !important; border: 1px solid rgb(var(--line-input)) !important; border-radius: var(--ds-r) !important; color: rgb(var(--ink)) !important; box-shadow: none !important; padding: 13px 16px !important; min-height: 0 !important; text-align: left !important; transition: border-color .16s ease, background-color .16s ease !important; } html#etc-ds#etc-ds .etc-pills-vertical .etc-pill:hover { border-color: rgb(var(--brand-line-soft)) !important; background: rgb(var(--surface-sunken)) !important; } html#etc-ds#etc-ds .etc-pills-vertical .etc-pill.is-active { background: rgb(var(--brand-tint)) !important; background-image: none !important; border-color: rgb(var(--brand)) !important; box-shadow: 0 0 0 1px rgb(var(--brand)) !important; } html#etc-ds#etc-ds .etc-pills-vertical .etc-pill .etc-pill-name { color: rgb(var(--ink)) !important; font-weight: 500 !important; font-size: 14.5px !important; text-shadow: none !important; text-transform: none !important; } html#etc-ds#etc-ds .etc-pills-vertical .etc-pill.is-active .etc-pill-name { color: rgb(var(--brand-ink)) !important; font-weight: 600 !important; } html#etc-ds#etc-ds .etc-pills-vertical .etc-pill .etc-pill-price { background: rgb(var(--surface-sunken)) !important; border: 1px solid rgb(var(--line)) !important; color: rgb(var(--ink-2)) !important; border-radius: 999px !important; font-family: var(--ds-font-mono) !important; font-size: 12.5px !important; font-weight: 500 !important; padding: 3px 10px !important; box-shadow: none !important; } html#etc-ds#etc-ds .etc-cart-btn, html#etc-ds#etc-ds .etc-cart-btn.btn-primary { background: rgb(var(--brand)) !important; background-image: none !important; border: 1px solid rgb(var(--brand-line)) !important; color: #fff !important; border-radius: var(--ds-r) !important; font-weight: 600 !important; font-size: 15px !important; padding: 14px 20px !important; box-shadow: none !important; text-shadow: none !important; } html#etc-ds#etc-ds .etc-cart-btn:hover { background: rgb(var(--brand-hover)) !important; } /* Полоса «закажите из вычитанного файла» */ html#etc-ds#etc-ds .etc-firmware-btn { background: rgb(var(--warn-tint)) !important; background-image: none !important; border: 1px solid rgb(var(--warn-line)) !important; border-radius: var(--ds-r) !important; box-shadow: none !important; color: rgb(var(--ink)) !important; } html#etc-ds#etc-ds .etc-firmware-btn:hover { border-color: rgb(var(--warn-ink)) !important; } html#etc-ds#etc-ds .etc-firmware-btn .etc-fw-icon { color: rgb(var(--warn-ink)) !important; background: transparent !important; } html#etc-ds#etc-ds .etc-firmware-btn .etc-fw-title { color: rgb(var(--ink)) !important; font-weight: 600 !important; } html#etc-ds#etc-ds .etc-firmware-btn .etc-fw-sub { color: rgb(var(--ink-muted)) !important; } html#etc-ds#etc-ds .etc-firmware-btn .etc-fw-arrow { color: rgb(var(--ink-muted)) !important; } /* Раскрывающиеся блоки «Доставка» / «Оплата» и инфо-плитки */ html#etc-ds#etc-ds .etc-info-tile, html#etc-ds#etc-ds .etc-info-expand, html#etc-ds#etc-ds .accordion-button { background: rgb(var(--surface-sunken)) !important; background-image: none !important; border: 1px solid rgb(var(--line)) !important; border-radius: var(--ds-r) !important; color: rgb(var(--ink)) !important; box-shadow: none !important; font-weight: 500 !important; } html#etc-ds#etc-ds .etc-info-tile:hover { border-color: rgb(var(--line-strong)) !important; } html#etc-ds#etc-ds .etc-tile-arrow { color: rgb(var(--ink-faint)) !important; } /* Текстовая карточка описания товара */ html#etc-ds#etc-ds .etc-desc-card, html#etc-ds#etc-ds .product-description, html#etc-ds#etc-ds .etc-product-info { background: rgb(var(--surface)) !important; border: 1px solid rgb(var(--line)) !important; border-radius: var(--ds-r-lg) !important; color: rgb(var(--ink-2)) !important; box-shadow: none !important; } html#etc-ds#etc-ds .etc-desc-card strong, html#etc-ds#etc-ds .product-description strong { color: rgb(var(--ink)) !important; } /* Коды ЭБУ и версии ПО в описании читаются как технические подписи */ html#etc-ds#etc-ds .etc-ecu-code, html#etc-ds#etc-ds .etc-sw-version { font-family: var(--ds-font-mono) !important; } /* Похожие товары / карусели */ html#etc-ds#etc-ds .tns-controls button, html#etc-ds#etc-ds .etc-slider-nav button, html#etc-ds#etc-ds .tns-nav button { background: rgb(var(--surface)) !important; border: 1px solid rgb(var(--line)) !important; color: rgb(var(--ink-2)) !important; border-radius: 999px !important; box-shadow: var(--ds-shadow-sm) !important; } /* --------------------------------------------------------------------------- 20. Корзина и оформление заказа. --------------------------------------------------------------------------- */ html#etc-ds#etc-ds .etc-cart, html#etc-ds#etc-ds .etc-checkout, html#etc-ds#etc-ds .etc-cart-shell, html#etc-ds#etc-ds .etc-checkout-card, html#etc-ds#etc-ds .etc-order-summary, html#etc-ds#etc-ds .checkout-card { background: rgb(var(--surface)) !important; background-image: none !important; border: 1px solid rgb(var(--line)) !important; border-radius: var(--ds-r-lg) !important; box-shadow: none !important; color: rgb(var(--ink)) !important; } html#etc-ds#etc-ds .etc-cart-row, html#etc-ds#etc-ds .cart-item, html#etc-ds#etc-ds .etc-checkout-row { border-bottom: 1px solid rgb(var(--line-subtle)) !important; background: transparent !important; } html#etc-ds#etc-ds .etc-cart-total, html#etc-ds#etc-ds .etc-order-total, html#etc-ds#etc-ds .etc-sum-total { color: rgb(var(--ink)) !important; font-family: var(--ds-font-display) !important; font-weight: 700 !important; letter-spacing: -.02em !important; } /* Шаги оформления */ html#etc-ds#etc-ds .etc-steps, html#etc-ds#etc-ds .checkout-steps { background: transparent !important; } html#etc-ds#etc-ds .etc-step, html#etc-ds#etc-ds .checkout-step { background: rgb(var(--surface)) !important; border: 1px solid rgb(var(--line)) !important; border-radius: var(--ds-r) !important; color: rgb(var(--ink-muted)) !important; box-shadow: none !important; } html#etc-ds#etc-ds .etc-step.is-active, html#etc-ds#etc-ds .checkout-step.active { border-color: rgb(var(--brand)) !important; background: rgb(var(--brand-tint)) !important; color: rgb(var(--brand-ink)) !important; } html#etc-ds#etc-ds .etc-step.is-done { color: rgb(var(--brand-ink)) !important; } /* Способы оплаты */ html#etc-ds#etc-ds .etc-pay-card, html#etc-ds#etc-ds .payment-method, html#etc-ds#etc-ds .etc-payment-option { background: rgb(var(--surface)) !important; border: 1px solid rgb(var(--line-input)) !important; border-radius: var(--ds-r) !important; box-shadow: none !important; color: rgb(var(--ink)) !important; } html#etc-ds#etc-ds .etc-pay-card.is-active, html#etc-ds#etc-ds .etc-payment-option.is-active, html#etc-ds#etc-ds .payment-method.selected { border-color: rgb(var(--brand)) !important; background: rgb(var(--brand-tint)) !important; box-shadow: 0 0 0 1px rgb(var(--brand)) !important; } html#etc-ds#etc-ds .etc-pay-logo, html#etc-ds#etc-ds .etc-pay-card__logo { background: rgb(var(--surface)) !important; border: 1px solid rgb(var(--line-subtle)) !important; border-radius: var(--ds-r-sm) !important; } /* Промокод и бонусы на оформлении */ html#etc-ds#etc-ds .etc-coupon, html#etc-ds#etc-ds .etc-bonus-row { background: rgb(var(--surface-sunken)) !important; border: 1px solid rgb(var(--line)) !important; border-radius: var(--ds-r) !important; } /* Пустая корзина */ html#etc-ds#etc-ds .etc-cart-empty, html#etc-ds#etc-ds .cart-empty { background: rgb(var(--surface)) !important; border: 1px dashed rgb(var(--line-strong)) !important; border-radius: var(--ds-r-lg) !important; color: rgb(var(--ink-muted)) !important; } /* --------------------------------------------------------------------------- 21. Личный кабинет (.etc-acc — редизайн 2026-07-26). --------------------------------------------------------------------------- */ html#etc-ds#etc-ds .etc-acc, html#etc-ds#etc-ds .etc-acc__shell { background: transparent !important; color: rgb(var(--ink)) !important; } html#etc-ds#etc-ds .etc-acc__card, html#etc-ds#etc-ds .etc-acc__panel, html#etc-ds#etc-ds .etc-acc__aside, html#etc-ds#etc-ds .etc-acc__tile { background: rgb(var(--surface)) !important; background-image: none !important; border: 1px solid rgb(var(--line)) !important; border-radius: var(--ds-r-lg) !important; box-shadow: none !important; } html#etc-ds#etc-ds .etc-acc__title, html#etc-ds#etc-ds .etc-acc h1, html#etc-ds#etc-ds .etc-acc h2 { font-family: var(--ds-font-display) !important; color: rgb(var(--ink)) !important; text-transform: none !important; letter-spacing: -.02em !important; } html#etc-ds#etc-ds .etc-acc__label, html#etc-ds#etc-ds .etc-acc__hint { color: rgb(var(--ink-muted)) !important; } html#etc-ds#etc-ds .etc-acc__value { color: rgb(var(--ink)) !important; font-weight: 500 !important; } html#etc-ds#etc-ds .etc-acc__nav a, html#etc-ds#etc-ds .etc-acc__menu a { color: rgb(var(--ink-2)) !important; border-radius: var(--ds-r-sm) !important; border: 1px solid transparent !important; } html#etc-ds#etc-ds .etc-acc__nav a:hover { background: rgb(var(--surface-sunken)) !important; } html#etc-ds#etc-ds .etc-acc__nav a.is-active { background: rgb(var(--brand-tint)) !important; color: rgb(var(--brand-ink)) !important; border-color: rgb(var(--brand-line-subtle)) !important; font-weight: 600 !important; } html#etc-ds#etc-ds .etc-acc__balance, html#etc-ds#etc-ds .etc-acc__bonus { background: rgb(var(--brand-tint)) !important; border: 1px solid rgb(var(--brand-line-subtle)) !important; color: rgb(var(--brand-ink)) !important; border-radius: var(--ds-r) !important; } html#etc-ds#etc-ds .etc-acc__status, html#etc-ds#etc-ds .etc-order-status { border-radius: 999px !important; font-weight: 600 !important; font-size: 12px !important; border: 1px solid rgb(var(--line)) !important; background: rgb(var(--surface-sunken)) !important; color: rgb(var(--ink-2)) !important; } html#etc-ds#etc-ds .etc-acc__status--paid, html#etc-ds#etc-ds .etc-order-status--paid { background: rgb(var(--brand-tint)) !important; border-color: rgb(var(--brand-line-subtle)) !important; color: rgb(var(--brand-ink)) !important; } /* Формы входа и регистрации */ html#etc-ds#etc-ds .etc-auth-card, html#etc-ds#etc-ds .login-card, html#etc-ds#etc-ds #signup-tab, html#etc-ds#etc-ds .modal-signin .modal-content { background: rgb(var(--surface)) !important; border: 1px solid rgb(var(--line)) !important; border-radius: var(--ds-r-lg) !important; box-shadow: var(--ds-shadow-lg) !important; } html#etc-ds#etc-ds .nav-tabs .nav-link { color: rgb(var(--ink-muted)) !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; background: transparent !important; font-weight: 600 !important; } html#etc-ds#etc-ds .nav-tabs .nav-link.active { color: rgb(var(--brand-ink)) !important; border-bottom-color: rgb(var(--brand)) !important; background: transparent !important; } /* --------------------------------------------------------------------------- 22. Статьи, новости, служебные страницы. --------------------------------------------------------------------------- */ html#etc-ds#etc-ds .module .card-product .title a { font-size: 14px !important; font-weight: 600 !important; } html#etc-ds#etc-ds .module .text-wrap { color: rgb(var(--ink-muted)) !important; font-size: 13.5px !important; } html#etc-ds#etc-ds .btn-danger.btn-sm, html#etc-ds#etc-ds .module .btn-danger, html#etc-ds#etc-ds .module a.btn { background: rgb(var(--surface)) !important; border: 1px solid rgb(var(--line-strong)) !important; color: rgb(var(--ink-2)) !important; background-image: none !important; border-radius: var(--ds-r-sm) !important; font-size: 13px !important; padding: 6px 12px !important; } html#etc-ds#etc-ds .module a.btn:hover { background: rgb(var(--surface-sunken)) !important; border-color: rgb(var(--brand-line-soft)) !important; color: rgb(var(--brand-ink)) !important; } /* Полоса преимуществ над футером */ html#etc-ds#etc-ds .etc-benefits, html#etc-ds#etc-ds .footer-benefits, html#etc-ds#etc-ds .bg-darker { background: rgb(var(--surface-raised)) !important; background-image: none !important; border-top: 1px solid rgb(var(--line)) !important; color: rgb(var(--ink-2)) !important; } html#etc-ds#etc-ds .etc-benefits i, html#etc-ds#etc-ds .footer-benefits i { color: rgb(var(--brand-ink)) !important; } /* Подписка в футере */ html#etc-ds#etc-ds .subscribe-form .form-control, html#etc-ds#etc-ds .footer .form-control { background: rgb(var(--surface)) !important; } /* Пагинация */ html#etc-ds#etc-ds .pagination .page-link { background: rgb(var(--surface)) !important; border: 1px solid rgb(var(--line)) !important; color: rgb(var(--ink-2)) !important; border-radius: var(--ds-r-sm) !important; margin: 0 3px; font-weight: 500 !important; } html#etc-ds#etc-ds .pagination .page-item.active .page-link, html#etc-ds#etc-ds .pagination .page-link.active { background: rgb(var(--brand)) !important; border-color: rgb(var(--brand-line)) !important; color: #fff !important; } /* Уведомления */ html#etc-ds#etc-ds .alert { border-radius: var(--ds-r) !important; border: 1px solid rgb(var(--line)) !important; background: rgb(var(--surface-sunken)) !important; color: rgb(var(--ink-2)) !important; } html#etc-ds#etc-ds .alert-success { background: rgb(var(--brand-tint)) !important; border-color: rgb(var(--brand-line-subtle)) !important; color: rgb(var(--brand-ink)) !important; } html#etc-ds#etc-ds .alert-danger { background: rgb(var(--danger-tint)) !important; border-color: rgb(var(--danger-line)) !important; color: rgb(var(--danger-ink)) !important; } html#etc-ds#etc-ds .alert-warning { background: rgb(var(--warn-tint)) !important; border-color: rgb(var(--warn-line)) !important; color: rgb(var(--warn-ink)) !important; } /* ============================================================================= ЧАСТЬ 4. Правки после первого прохода по страницам. ============================================================================= */ /* Текст на брендовой заливке всегда белый: раньше он наследовал брендовый цвет и сливался с фоном (кнопка «Перейти к оплате»). */ html#etc-ds#etc-ds .etc-paycta__action, html#etc-ds#etc-ds .etc-promo-card__action, html#etc-ds#etc-ds .etc-cta-card .etc-cta-btn-text.is-filled { color: #fff !important; border-radius: var(--ds-r) !important; padding: 9px 16px !important; box-shadow: none !important; } html#etc-ds#etc-ds .etc-promo-card--primary .etc-promo-card__action { color: rgb(var(--onbright)) !important; } /* Иконки каналов связи: цвет несёт сама иконка, а не белая заливка */ html#etc-ds#etc-ds .etc-cta-icon-ring i, html#etc-ds#etc-ds .etc-cta-icon-ring svg { color: inherit !important; fill: currentColor !important; } html#etc-ds#etc-ds .etc-cta-icon-wrap { background: transparent !important; box-shadow: none !important; } /* Bootstrap-утилиты светлого текста на светлых подложках (полоса преимуществ, футер) читались как «серое на сером». Возвращаем их в шкалу ink. */ html#etc-ds#etc-ds .text-light, html#etc-ds#etc-ds .text-white { color: rgb(var(--ink-2)) !important; } html#etc-ds#etc-ds .etc-hero-poster .text-light, html#etc-ds#etc-ds .etc-hero-poster .text-white, html#etc-ds#etc-ds .etc-promo-card--primary .text-light, html#etc-ds#etc-ds .etc-promo-card--primary .text-white, html#etc-ds#etc-ds .modal-dark .text-light { color: rgb(var(--ondark)) !important; } html#etc-ds#etc-ds .bg-dark, html#etc-ds#etc-ds .bg-darker, html#etc-ds#etc-ds .bg-gradient-dark { background-color: rgb(var(--surface-raised)) !important; background-image: none !important; } html#etc-ds#etc-ds .bg-dark .text-muted, html#etc-ds#etc-ds .bg-darker .text-muted { color: rgb(var(--ink-muted)) !important; } /* Полоса преимуществ над футером */ html#etc-ds#etc-ds .bg-darker .fs-base, html#etc-ds#etc-ds .bg-dark .fs-base { color: rgb(var(--ink)) !important; font-weight: 600 !important; } html#etc-ds#etc-ds .bg-darker i, html#etc-ds#etc-ds .bg-darker .fs-1, html#etc-ds#etc-ds .bg-darker svg { color: rgb(var(--brand-ink)) !important; } /* Цены в корзине и в списках заказов — тем же голосом, что на карточке товара */ html#etc-ds#etc-ds .productPrice, html#etc-ds#etc-ds .cart-price, html#etc-ds#etc-ds td .price { color: rgb(var(--ink)) !important; font-family: var(--ds-font-display) !important; font-weight: 600 !important; letter-spacing: -.02em !important; } /* Действие «Удалить» — служебное, не тревожное */ html#etc-ds#etc-ds a[href*="action=remove_product"], html#etc-ds#etc-ds .cart-remove, html#etc-ds#etc-ds .etc-cart-remove { color: rgb(var(--ink-muted)) !important; font-size: 13px !important; font-weight: 500 !important; } html#etc-ds#etc-ds a[href*="action=remove_product"]:hover, html#etc-ds#etc-ds .cart-remove:hover { color: rgb(var(--danger-ink)) !important; } html#etc-ds#etc-ds a[href*="action=remove_product"] i { color: inherit !important; } /* Итоговые суммы заказа */ html#etc-ds#etc-ds .etc-sum__value, html#etc-ds#etc-ds .order-total-value, html#etc-ds#etc-ds .etc-order-sum strong, html#etc-ds#etc-ds .etc-total-value { color: rgb(var(--ink)) !important; font-family: var(--ds-font-display) !important; font-weight: 700 !important; } /* Любые «сочные» градиентные кнопки движка приводим к брендовой заливке */ html#etc-ds#etc-ds .btn-shadow, html#etc-ds#etc-ds .btn-gradient, html#etc-ds#etc-ds button[type="submit"].btn-success, html#etc-ds#etc-ds .etc-checkout-submit, html#etc-ds#etc-ds #checkout-submit { background-image: none !important; box-shadow: none !important; text-shadow: none !important; } /* Счётчик количества в корзине */ html#etc-ds#etc-ds .qty-control, html#etc-ds#etc-ds .quantity-control, html#etc-ds#etc-ds .etc-qty { border: 1px solid rgb(var(--line-input)) !important; border-radius: var(--ds-r) !important; background: rgb(var(--surface)) !important; overflow: hidden; } html#etc-ds#etc-ds .qty-control button, html#etc-ds#etc-ds .etc-qty button { background: rgb(var(--surface)) !important; border: 0 !important; color: rgb(var(--ink-2)) !important; box-shadow: none !important; } html#etc-ds#etc-ds .qty-control button:hover { background: rgb(var(--surface-sunken)) !important; } /* Гостевое оформление: информационная плашка */ html#etc-ds#etc-ds .etc-guest-note, html#etc-ds#etc-ds .alert-info { background: rgb(var(--info-tint)) !important; border: 1px solid rgb(var(--info-line)) !important; color: rgb(var(--ink-2)) !important; border-radius: var(--ds-r) !important; } html#etc-ds#etc-ds .etc-guest-note strong { color: rgb(var(--ink)) !important; } /* Цифровая доставка */ html#etc-ds#etc-ds .etc-digital-delivery, html#etc-ds#etc-ds .etc-delivery-note { background: rgb(var(--brand-tint)) !important; border: 1px solid rgb(var(--brand-line-subtle)) !important; border-radius: var(--ds-r) !important; color: rgb(var(--ink-2)) !important; } html#etc-ds#etc-ds .etc-digital-delivery strong { color: rgb(var(--ink)) !important; } /* --------------------------------------------------------------------------- 23. Раскладка шапки страницы: убираем «наезд» карточки на заголовок. Приём Cartzilla (padding-bottom 5.5rem + margin-top -4.875rem у следующего блока) работал только с тёмным постером. На светлом он рвал заголовок. --------------------------------------------------------------------------- */ html#etc-ds#etc-ds .page-title-overlap { padding-bottom: 18px !important; } html#etc-ds#etc-ds .page-title-overlap + * { margin-top: 0 !important; } html#etc-ds#etc-ds .page-title-overlap .container { min-height: 0 !important; } /* Заголовок страницы выравниваем по левому краю — как на платформе */ @media (min-width: 992px) { html#etc-ds#etc-ds .page-title-overlap .container, html#etc-ds#etc-ds .page-title-overlap .text-center { text-align: left !important; } html#etc-ds#etc-ds .page-title-overlap .breadcrumb { justify-content: flex-start !important; } html#etc-ds#etc-ds .page-title-overlap h1 { margin-left: 0 !important; text-align: left !important; } } /* Современный чекаут (#smart_checkout) — свой слой стилей, приводим к общей системе */ html#etc-ds#etc-ds #smart_checkout > .page-title-overlap { min-height: 0 !important; background: rgb(var(--surface)) !important; background-image: none !important; box-shadow: none !important; border-bottom: 1px solid rgb(var(--line-subtle)) !important; } html#etc-ds#etc-ds #smart_checkout > .page-title-overlap::before { display: none !important; } html#etc-ds#etc-ds #smart_checkout > .page-title-overlap > .container { min-height: 0 !important; padding: 6px 0 !important; } html#etc-ds#etc-ds #smart_checkout > .page-title-overlap h1 { color: rgb(var(--ink)) !important; font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.2rem) !important; font-weight: 700 !important; text-shadow: none !important; letter-spacing: -.025em !important; } html#etc-ds#etc-ds #smart_checkout section.col-lg-8, html#etc-ds#etc-ds #smart_checkout #order_total_modules > .bg-white { background: rgb(var(--surface)) !important; background-image: none !important; border: 1px solid rgb(var(--line)) !important; border-radius: var(--ds-r-xl) !important; box-shadow: none !important; color: rgb(var(--ink)) !important; padding: 26px !important; } html#etc-ds#etc-ds #smart_checkout .payment-method.card { border-radius: var(--ds-r) !important; background: rgb(var(--surface)) !important; background-image: none !important; border: 1px solid rgb(var(--line-input)) !important; box-shadow: none !important; color: rgb(var(--ink)) !important; } html#etc-ds#etc-ds #smart_checkout .payment-method.card:hover { border-color: rgb(var(--brand-line-soft)) !important; transform: none !important; } html#etc-ds#etc-ds #smart_checkout .payment-method.card:has(input:checked) { border-color: rgb(var(--brand)) !important; background: rgb(var(--brand-tint)) !important; box-shadow: 0 0 0 1px rgb(var(--brand)) !important; } html#etc-ds#etc-ds #smart_checkout .payment-method.card::after { border-radius: 999px !important; width: 24px !important; height: 24px !important; font-size: 13px !important; background: rgb(var(--surface)) !important; border: 1px solid rgb(var(--line-input)) !important; box-shadow: none !important; } html#etc-ds#etc-ds #smart_checkout .payment-method.card:has(input:checked)::after { background: rgb(var(--brand)) !important; border-color: rgb(var(--brand)) !important; color: #fff !important; box-shadow: none !important; } html#etc-ds#etc-ds #smart_checkout .payment-method.card::before { display: none !important; } html#etc-ds#etc-ds #smart_checkout .etc-digital-delivery { border-radius: var(--ds-r) !important; border: 1px solid rgb(var(--brand-line-subtle)) !important; background: rgb(var(--brand-tint)) !important; box-shadow: none !important; } html#etc-ds#etc-ds #smart_checkout .etc-digital-delivery-icon { background: rgb(var(--brand)) !important; background-image: none !important; border-radius: var(--ds-r) !important; box-shadow: none !important; color: #fff !important; } html#etc-ds#etc-ds #smart_checkout #order_total_modules > .bg-white > button[type="submit"], html#etc-ds#etc-ds #smart_checkout button[type="submit"].btn-primary { background: rgb(var(--brand)) !important; background-image: none !important; border: 1px solid rgb(var(--brand-line)) !important; border-radius: var(--ds-r) !important; color: #fff !important; font-weight: 600 !important; font-size: 15px !important; min-height: 52px !important; box-shadow: none !important; text-shadow: none !important; } html#etc-ds#etc-ds #smart_checkout #order_total_modules > .bg-white > button[type="submit"]:hover { background: rgb(var(--brand-hover)) !important; } html#etc-ds#etc-ds #smart_checkout .sm_layout_box > h2 { font-family: var(--ds-font-display) !important; font-weight: 700 !important; letter-spacing: -.02em !important; color: rgb(var(--ink)) !important; } html#etc-ds#etc-ds #smart_checkout input, html#etc-ds#etc-ds #smart_checkout textarea { border-radius: var(--ds-r) !important; border: 1px solid rgb(var(--line-input)) !important; background: rgb(var(--surface)) !important; min-height: 46px !important; } /* Плавающий док мессенджеров: не сужаем — только перекрашиваем */ html#etc-ds#etc-ds .etc-social-action { width: auto !important; min-width: 46px; padding: 10px !important; overflow: hidden; display: inline-flex !important; align-items: center; justify-content: center; } html#etc-ds#etc-ds .etc-social-actions { gap: 10px !important; } /* Кнопка MAX в доке: подпись рисует псевдоэлемент, собственный текст кнопки в старом слое был скрыт размером шрифта — сохраняем это, иначе «MAXMAX». */ html#etc-ds#etc-ds .etc-social-action--max { font-size: 0 !important; } html#etc-ds#etc-ds .etc-social-action--max::before { font-size: 12px !important; font-weight: 700 !important; letter-spacing: .02em; color: inherit !important; } html#etc-ds#etc-ds .etc-social-action { width: 46px !important; height: 46px !important; min-width: 0 !important; padding: 0 !important; } html#etc-ds#etc-ds .etc-social-action svg { width: 20px !important; height: 20px !important; } /* --------------------------------------------------------------------------- 24. Навигация по разделам каталога (пилюли ЭБУ, марок, поколений). --------------------------------------------------------------------------- */ html#etc-ds#etc-ds .etc-cat-pill { background: rgb(var(--surface)) !important; background-image: none !important; border: 1px solid rgb(var(--line)) !important; border-radius: var(--ds-r) !important; color: rgb(var(--ink-2)) !important; font-weight: 500 !important; font-size: 14px !important; box-shadow: none !important; text-shadow: none !important; padding: 9px 16px !important; transition: border-color .16s ease, background-color .16s ease, color .16s ease !important; } html#etc-ds#etc-ds .etc-cat-pill:hover { background: rgb(var(--surface-sunken)) !important; border-color: rgb(var(--brand-line-soft)) !important; color: rgb(var(--ink)) !important; } html#etc-ds#etc-ds .etc-cat-pill.is-current, html#etc-ds#etc-ds .etc-cat-pill--active { background: rgb(var(--brand)) !important; background-image: none !important; border-color: rgb(var(--brand-line)) !important; color: #fff !important; font-weight: 600 !important; } html#etc-ds#etc-ds .etc-cat-pill__count { color: inherit !important; opacity: .75; font-family: var(--ds-font-mono) !important; font-size: 12px !important; } html#etc-ds#etc-ds .etc-cat-pills__label, html#etc-ds#etc-ds .etc-cat-siblings__label { color: rgb(var(--ink-faint)) !important; font-family: var(--ds-font-mono) !important; font-size: 10.5px !important; letter-spacing: .1em !important; font-weight: 500 !important; } html#etc-ds#etc-ds .etc-cat-back, html#etc-ds#etc-ds .etc-cat-pills__back { color: rgb(var(--brand-ink)) !important; font-weight: 600 !important; } /* Панель сортировки и вида */ html#etc-ds#etc-ds .etc-toolbar, html#etc-ds#etc-ds .products-toolbar, html#etc-ds#etc-ds .etc-sort { background: rgb(var(--surface)) !important; border: 1px solid rgb(var(--line)) !important; border-radius: var(--ds-r-lg) !important; box-shadow: none !important; } html#etc-ds#etc-ds .btn-group .btn.active, html#etc-ds#etc-ds .view-switch .active { background: rgb(var(--brand-tint)) !important; border-color: rgb(var(--brand-line-subtle)) !important; color: rgb(var(--brand-ink)) !important; } /* --------------------------------------------------------------------------- 25. Статьи и новости: btn-danger в этом магазине используется как обычная навигация («Далее», разделы) — приводим к нейтральной кнопке. --------------------------------------------------------------------------- */ html#etc-ds#etc-ds .btn-danger, html#etc-ds#etc-ds span.btn-danger, html#etc-ds#etc-ds a.btn-danger { background: rgb(var(--surface)) !important; background-image: none !important; border: 1px solid rgb(var(--line-strong)) !important; color: rgb(var(--ink-2)) !important; border-radius: var(--ds-r) !important; font-weight: 500 !important; box-shadow: none !important; } html#etc-ds#etc-ds a.btn-danger:hover, html#etc-ds#etc-ds a:hover > span.btn-danger { background: rgb(var(--brand-tint)) !important; border-color: rgb(var(--brand-line-subtle)) !important; color: rgb(var(--brand-ink)) !important; } html#etc-ds#etc-ds .btn-danger b { font-weight: 600 !important; } html#etc-ds#etc-ds .article-card, html#etc-ds#etc-ds .card.card-product .card-body { color: rgb(var(--ink-2)) !important; } html#etc-ds#etc-ds .desc, html#etc-ds#etc-ds .article-meta { color: rgb(var(--ink-muted)) !important; font-size: 13.5px !important; } /* Заголовки разделов на служебных страницах */ html#etc-ds#etc-ds h5, html#etc-ds#etc-ds .h5 { font-family: var(--ds-font-display) !important; color: rgb(var(--ink)) !important; font-weight: 600 !important; font-size: 15px !important; text-transform: none !important; } /* Формы поиска на служебных страницах */ html#etc-ds#etc-ds .input-group .btn-primary { border-radius: 0 var(--ds-r) var(--ds-r) 0 !important; } html#etc-ds#etc-ds .input-group .form-control:first-child { border-radius: var(--ds-r) 0 0 var(--ds-r) !important; } /* --------------------------------------------------------------------------- 26. Cookie-баннер: тем же материалом, что и остальной интерфейс. --------------------------------------------------------------------------- */ html#etc-ds#etc-ds #cookie-consent { background: rgb(var(--surface)) !important; color: rgb(var(--ink-2)) !important; border-top: 1px solid rgb(var(--line)) !important; box-shadow: 0 -8px 28px rgb(var(--shadow-rgb) / calc(.10 * var(--shadow-boost))) !important; font-family: var(--ds-font) !important; font-size: 13.5px !important; padding: 14px 20px !important; } html#etc-ds#etc-ds #cookie-consent a { color: rgb(var(--brand-ink)) !important; text-decoration-color: rgb(var(--brand-line-soft)) !important; } html#etc-ds#etc-ds #cookie-consent button { border-radius: var(--ds-r) !important; font-family: var(--ds-font) !important; font-weight: 600 !important; font-size: 14px !important; padding: 10px 18px !important; } html#etc-ds#etc-ds #cookie-consent .cc-accept { background: rgb(var(--brand)) !important; color: #fff !important; border: 1px solid rgb(var(--brand-line)) !important; } html#etc-ds#etc-ds #cookie-consent .cc-accept:hover { background: rgb(var(--brand-hover)) !important; } html#etc-ds#etc-ds #cookie-consent .cc-decline { background: rgb(var(--surface)) !important; color: rgb(var(--ink-2)) !important; border: 1px solid rgb(var(--line-strong)) !important; } html#etc-ds#etc-ds #cookie-consent .cc-decline:hover { background: rgb(var(--surface-sunken)) !important; } /* --------------------------------------------------------------------------- 27. Мобильная шапка и панели. --------------------------------------------------------------------------- */ @media (max-width: 991.98px) { html#etc-ds#etc-ds .etc-site-header .topbar { min-height: 36px; } html#etc-ds#etc-ds .navbar-tool .navbar-tool-icon-box { width: 40px; height: 40px; } html#etc-ds#etc-ds .etc-editor-bar { padding: 10px 14px !important; } html#etc-ds#etc-ds .etc-editor-bar__cta { width: 100%; justify-content: center; } html#etc-ds#etc-ds .etc-vsearch { padding: 16px !important; border-radius: var(--ds-r-lg) !important; } html#etc-ds#etc-ds .page-title-overlap h1 { font-size: clamp(1.25rem, 1rem + 2.4vw, 1.7rem) !important; } html#etc-ds#etc-ds #cookie-consent { padding: 12px 14px !important; } html#etc-ds#etc-ds #cookie-consent .cc-actions { width: 100%; } html#etc-ds#etc-ds #cookie-consent .cc-actions button { flex: 1 1 0; } } /* Выпадающее мобильное меню */ html#etc-ds#etc-ds .navbar-collapse, html#etc-ds#etc-ds #navbarCollapse.show, html#etc-ds#etc-ds .offcanvas-body { background: rgb(var(--surface)) !important; } html#etc-ds#etc-ds .offcanvas, html#etc-ds#etc-ds .modal-content { border-color: rgb(var(--line)) !important; } html#etc-ds#etc-ds .modal-header, html#etc-ds#etc-ds .modal-footer { border-color: rgb(var(--line-subtle)) !important; } html#etc-ds#etc-ds .btn-close { filter: none !important; opacity: .6; } /* Заголовок страницы: у части разделов он размечен как .h3 или лежит в .text-light, поэтому тень и «постерная» подложка возвращались. */ html#etc-ds#etc-ds .page-title-overlap .h3, html#etc-ds#etc-ds .page-title-overlap h1, html#etc-ds#etc-ds .page-title-overlap h2, html#etc-ds#etc-ds .page-title-overlap .h1 { text-shadow: none !important; color: rgb(var(--ink)) !important; font-family: var(--ds-font-display) !important; font-weight: 700 !important; letter-spacing: -.025em !important; } html#etc-ds#etc-ds .page-title-overlap, html#etc-ds#etc-ds .page-title-overlap.bg-dark, html#etc-ds#etc-ds .page-title-overlap.bg-secondary, html#etc-ds#etc-ds div.page-title-overlap { background: rgb(var(--surface)) !important; background-image: none !important; } /* Верхние декоративные штрихи на карточках разделов убираем целиком */ html#etc-ds#etc-ds .etc-cat-gate::before, html#etc-ds#etc-ds .etc-cat-gate::after, html#etc-ds#etc-ds .etc-tile::before, html#etc-ds#etc-ds .etc-tile::after { display: none !important; } /* --------------------------------------------------------------------------- 28. Герой главной. Фотография остаётся, но управляющие элементы на ней переходят в брендовую систему: зелёное действие, стеклянные метки. --------------------------------------------------------------------------- */ html#etc-ds#etc-ds .etc-hero-poster__title { font-family: var(--ds-font-display) !important; color: rgb(var(--ondark)) !important; letter-spacing: -.03em !important; text-transform: none !important; } html#etc-ds#etc-ds .etc-hero-poster__lead { color: rgb(var(--ondark-muted)) !important; } html#etc-ds#etc-ds .etc-hero-kicker, html#etc-ds#etc-ds .etc-hero-kicker__brand, html#etc-ds#etc-ds .etc-hero-kicker__note { background: rgb(0 0 0 / .42) !important; background-image: none !important; border: 1px solid rgb(255 255 255 / .14) !important; color: rgb(var(--ondark)) !important; border-radius: 999px !important; box-shadow: none !important; font-family: var(--ds-font) !important; font-weight: 500 !important; letter-spacing: .06em !important; } html#etc-ds#etc-ds .etc-hero-kicker__brand { color: rgb(var(--ondark-accent)) !important; } html#etc-ds#etc-ds .etc-hero-kicker__note i { color: rgb(var(--ondark-accent)) !important; } html#etc-ds#etc-ds .etc-hero-btn { border-radius: var(--ds-r) !important; font-family: var(--ds-font) !important; font-weight: 600 !important; box-shadow: none !important; text-shadow: none !important; padding: 13px 20px !important; transition: background-color .16s ease, border-color .16s ease !important; } html#etc-ds#etc-ds .etc-hero-btn--primary, html#etc-ds#etc-ds .etc-hero-poster__actions > a:first-child { background: rgb(var(--brand)) !important; background-image: none !important; border: 1px solid rgb(var(--brand-line)) !important; color: #fff !important; } html#etc-ds#etc-ds .etc-hero-poster__actions > a:first-child:hover { background: rgb(var(--brand-hover)) !important; } html#etc-ds#etc-ds .etc-hero-btn--secondary { background: rgb(255 255 255 / .1) !important; background-image: none !important; border: 1px solid rgb(255 255 255 / .22) !important; color: rgb(var(--ondark)) !important; backdrop-filter: blur(8px); } html#etc-ds#etc-ds .etc-hero-btn--secondary:hover { background: rgb(255 255 255 / .16) !important; } html#etc-ds#etc-ds .etc-hero-btn i { color: inherit !important; } html#etc-ds#etc-ds .etc-hero-poster__stats, html#etc-ds#etc-ds .etc-hero-poster__stats * { color: rgb(var(--ondark-muted)) !important; } html#etc-ds#etc-ds .etc-hero-poster__stats strong, html#etc-ds#etc-ds .etc-hero-poster__stats b { color: rgb(var(--ondark)) !important; font-family: var(--ds-font-display) !important; } /* --------------------------------------------------------------------------- 29. Ритм страницы: одинаковые интервалы между секциями главной. --------------------------------------------------------------------------- */ html#etc-ds#etc-ds .etc-section-wrap { padding-top: 34px !important; padding-bottom: 34px !important; } html#etc-ds#etc-ds .etc-section-wrap + .etc-section-wrap { padding-top: 0 !important; } html#etc-ds#etc-ds .etc-cat-home__head, html#etc-ds#etc-ds .etc-inline-promos__head { margin-bottom: 18px !important; } /* Технические подписи в карточках: коды ЭБУ и версии ПО моноширинные */ html#etc-ds#etc-ds .card-product .etc-ecu, html#etc-ds#etc-ds .product-card .etc-ecu, html#etc-ds#etc-ds .etc-cat-gate__count strong, html#etc-ds#etc-ds .etc-cat-head__count strong, html#etc-ds#etc-ds .etc-vsearch__results-title span { font-family: var(--ds-font-mono) !important; } /* --------------------------------------------------------------------------- 30. Плотность шапки. Было четыре полосы общей высотой ~230 px до первого экрана контента — сжимаем, сохраняя все элементы и механики. --------------------------------------------------------------------------- */ @media (min-width: 992px) { html#etc-ds#etc-ds .etc-site-header .topbar { min-height: 34px !important; padding-top: 0 !important; padding-bottom: 0 !important; } html#etc-ds#etc-ds .etc-site-header .topbar .container { min-height: 34px; align-items: center; } html#etc-ds#etc-ds .etc-site-header .topbar-text { font-size: 12.5px !important; } html#etc-ds#etc-ds .etc-mainbar__nav { padding-top: 10px !important; padding-bottom: 10px !important; } html#etc-ds#etc-ds .etc-brand__mark img { max-height: 44px !important; } html#etc-ds#etc-ds .etc-mainbar__nav .input-group .form-control, html#etc-ds#etc-ds .etc-mainbar__nav .input-group .btn { height: 40px !important; } html#etc-ds#etc-ds .navbar-tool .navbar-tool-icon-box { width: 38px; height: 38px; } html#etc-ds#etc-ds .navbar-toolbar { gap: 6px; } html#etc-ds#etc-ds .etc-menubar { padding-top: 4px !important; padding-bottom: 4px !important; } html#etc-ds#etc-ds .etc-mainmenu > .nav-item > .nav-link { height: 38px !important; padding: 8px 11px !important; } html#etc-ds#etc-ds .etc-editor-bar { padding-top: 8px !important; padding-bottom: 8px !important; } html#etc-ds#etc-ds .etc-editor-bar__cta { padding: 8px 16px !important; font-size: 14px !important; } } /* Подпись «Личный кабинет / Войти» — одна компактная колонка */ html#etc-ds#etc-ds .navbar-tool-text { line-height: 1.15 !important; } html#etc-ds#etc-ds .navbar-tool-text small { font-size: 11px !important; display: block; } html#etc-ds#etc-ds .navbar-tool-text span, html#etc-ds#etc-ds .navbar-tool-text b { font-size: 14px !important; } /* Корзина — единственное заполненное действие в панели инструментов шапки */ html#etc-ds#etc-ds .navbar-toolbar a[href*="shopping_cart"] .navbar-tool-icon-box, html#etc-ds#etc-ds .navbar-tool[href*="shopping_cart"] .navbar-tool-icon-box, html#etc-ds#etc-ds #cart-link .navbar-tool-icon-box, html#etc-ds#etc-ds .etc-cart-mobile-link-wrap .navbar-tool-icon-box { background: rgb(var(--brand)) !important; border-color: rgb(var(--brand-line)) !important; color: #fff !important; } html#etc-ds#etc-ds .navbar-toolbar a[href*="shopping_cart"]:hover .navbar-tool-icon-box { background: rgb(var(--brand-hover)) !important; } html#etc-ds#etc-ds .navbar-toolbar a[href*="shopping_cart"] .navbar-tool-icon, html#etc-ds#etc-ds .navbar-toolbar a[href*="shopping_cart"] .navbar-tool-icon-box i { color: #fff !important; } /* Счётчик товаров */ html#etc-ds#etc-ds .navbar-tool-label, html#etc-ds#etc-ds .cart-count, html#etc-ds#etc-ds .navbar-tool-icon-box .badge { background: rgb(var(--warn-ink)) !important; color: #fff !important; border: 2px solid rgb(var(--surface)) !important; border-radius: 999px !important; font-size: 10.5px !important; font-weight: 700 !important; } /* В разметке ссылка корзины сама является плиткой-иконкой */ html#etc-ds#etc-ds a.navbar-tool-icon-box[href*="shopping_cart"], html#etc-ds#etc-ds .navbar-toolbar a.navbar-tool-icon-box.bg-secondary { background: rgb(var(--brand)) !important; background-color: rgb(var(--brand)) !important; border: 1px solid rgb(var(--brand-line)) !important; color: #fff !important; } html#etc-ds#etc-ds a.navbar-tool-icon-box[href*="shopping_cart"]:hover { background-color: rgb(var(--brand-hover)) !important; } html#etc-ds#etc-ds a.navbar-tool-icon-box[href*="shopping_cart"] i, html#etc-ds#etc-ds a.navbar-tool-icon-box[href*="shopping_cart"] .navbar-tool-icon { color: #fff !important; } html#etc-ds#etc-ds a.navbar-tool-text[href*="shopping_cart"] { color: rgb(var(--ink)) !important; font-weight: 600 !important; } /* Подпись бренда: одна строка, без «лесенки» из трёх слов */ @media (min-width: 992px) { html#etc-ds#etc-ds .etc-brand__text { max-width: 260px; } html#etc-ds#etc-ds .etc-brand__text small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } } /* Часть разделов (скидки, новинки, избранное) рисует шапку страницы как .bg-dark без .page-title-overlap — приводим её к тому же светлому виду. */ html#etc-ds#etc-ds .bg-dark { background-color: rgb(var(--surface)) !important; background-image: none !important; border-bottom: 1px solid rgb(var(--line-subtle)) !important; } html#etc-ds#etc-ds .bg-dark .h1, html#etc-ds#etc-ds .bg-dark .h3, html#etc-ds#etc-ds .bg-dark h1, html#etc-ds#etc-ds .bg-dark h2, html#etc-ds#etc-ds .bg-dark h3 { color: rgb(var(--ink)) !important; text-shadow: none !important; font-family: var(--ds-font-display) !important; font-weight: 700 !important; letter-spacing: -.025em !important; } html#etc-ds#etc-ds .bg-dark .breadcrumb, html#etc-ds#etc-ds .bg-dark .breadcrumb a, html#etc-ds#etc-ds .bg-dark .breadcrumb-item, html#etc-ds#etc-ds .bg-dark .breadcrumb-separator { color: rgb(var(--ink-muted)) !important; font-size: 13px !important; } html#etc-ds#etc-ds .bg-dark .breadcrumb a:hover { color: rgb(var(--brand-ink)) !important; } /* Топбар остаётся приглушённой служебной полосой */ html#etc-ds#etc-ds .etc-site-header .topbar.bg-dark { background-color: rgb(var(--surface-sunken)) !important; border-bottom: 1px solid rgb(var(--line-subtle)) !important; } /* --------------------------------------------------------------------------- 31. Личный кабинет — по фактической разметке etc-account.css. --------------------------------------------------------------------------- */ html#etc-ds#etc-ds .etc-acc__wrap, html#etc-ds#etc-ds .etc-acc__section { background: transparent !important; } html#etc-ds#etc-ds .etc-acc__hero { background: rgb(var(--surface)) !important; background-image: none !important; border: 1px solid rgb(var(--line)) !important; border-radius: var(--ds-r-xl) !important; box-shadow: none !important; color: rgb(var(--ink)) !important; } html#etc-ds#etc-ds .etc-acc__title, html#etc-ds#etc-ds .etc-acc__h2 { font-family: var(--ds-font-display) !important; color: rgb(var(--ink)) !important; font-weight: 700 !important; letter-spacing: -.02em !important; text-transform: none !important; } html#etc-ds#etc-ds .etc-acc__eyebrow { color: rgb(var(--ink-faint)) !important; font-family: var(--ds-font-mono) !important; font-size: 10.5px !important; letter-spacing: .12em !important; text-transform: uppercase !important; } html#etc-ds#etc-ds .etc-acc__lead, html#etc-ds#etc-ds .etc-acc__hero-text, html#etc-ds#etc-ds .etc-acc__card-desc, html#etc-ds#etc-ds .etc-acc__order-meta { color: rgb(var(--ink-muted)) !important; } html#etc-ds#etc-ds .etc-acc__card, html#etc-ds#etc-ds .etc-acc__panel, html#etc-ds#etc-ds .etc-acc__order, html#etc-ds#etc-ds .etc-acc__metric, html#etc-ds#etc-ds .etc-acc__slot { background: rgb(var(--surface)) !important; background-image: none !important; border: 1px solid rgb(var(--line)) !important; border-radius: var(--ds-r-lg) !important; box-shadow: none !important; color: rgb(var(--ink)) !important; transition: border-color .18s ease, box-shadow .18s ease !important; } html#etc-ds#etc-ds .etc-acc__card:hover { border-color: rgb(var(--brand-line-soft)) !important; box-shadow: var(--ds-shadow-md) !important; } html#etc-ds#etc-ds .etc-acc__card-title { font-family: var(--ds-font-display) !important; color: rgb(var(--ink)) !important; font-weight: 600 !important; text-transform: none !important; } html#etc-ds#etc-ds .etc-acc__card-ico, html#etc-ds#etc-ds .etc-acc__bonus-ico { background: rgb(var(--brand-tint)) !important; background-image: none !important; border: 1px solid rgb(var(--brand-line-subtle)) !important; color: rgb(var(--brand-ink)) !important; border-radius: var(--ds-r) !important; box-shadow: none !important; } html#etc-ds#etc-ds .etc-acc__card-ico--amber { background: rgb(var(--warn-tint)) !important; border-color: rgb(var(--warn-line)) !important; color: rgb(var(--warn-ink)) !important; } html#etc-ds#etc-ds .etc-acc__card-arrow, html#etc-ds#etc-ds .etc-acc__order-chev { color: rgb(var(--ink-faint)) !important; } html#etc-ds#etc-ds .etc-acc__metric-cap { color: rgb(var(--ink-faint)) !important; font-family: var(--ds-font-mono) !important; letter-spacing: .08em !important; } html#etc-ds#etc-ds .etc-acc__metric-val, html#etc-ds#etc-ds .etc-acc__bonus-val, html#etc-ds#etc-ds .etc-acc__order-total { color: rgb(var(--ink)) !important; font-family: var(--ds-font-display) !important; font-weight: 700 !important; letter-spacing: -.02em !important; } html#etc-ds#etc-ds .etc-acc__btn, html#etc-ds#etc-ds .etc-acc__link-btn, html#etc-ds#etc-ds .etc-acc__more { background: rgb(var(--surface)) !important; background-image: none !important; border: 1px solid rgb(var(--line-strong)) !important; color: rgb(var(--ink-2)) !important; border-radius: var(--ds-r) !important; font-weight: 600 !important; box-shadow: none !important; } html#etc-ds#etc-ds .etc-acc__btn:hover { background: rgb(var(--surface-sunken)) !important; } html#etc-ds#etc-ds .etc-acc__btn--primary { background: rgb(var(--brand)) !important; border-color: rgb(var(--brand-line)) !important; color: #fff !important; } html#etc-ds#etc-ds .etc-acc__btn--primary:hover { background: rgb(var(--brand-hover)) !important; } html#etc-ds#etc-ds .etc-acc__order-head { border-bottom: 1px solid rgb(var(--line-subtle)) !important; background: transparent !important; } html#etc-ds#etc-ds .etc-acc__order-id { font-family: var(--ds-font-mono) !important; color: rgb(var(--ink-2)) !important; } html#etc-ds#etc-ds .etc-acc__order-status { border-radius: 999px !important; background: rgb(var(--surface-sunken)) !important; border: 1px solid rgb(var(--line)) !important; color: rgb(var(--ink-2)) !important; font-weight: 600 !important; font-size: 12px !important; } html#etc-ds#etc-ds .etc-acc__item { border-bottom: 1px solid rgb(var(--line-subtle)) !important; } html#etc-ds#etc-ds .etc-acc__item-pic { border: 1px solid rgb(var(--line-subtle)) !important; border-radius: var(--ds-r-sm) !important; background: rgb(var(--surface-sunken)) !important; } html#etc-ds#etc-ds .etc-acc__item-price { font-family: var(--ds-font-display) !important; color: rgb(var(--ink)) !important; font-weight: 600 !important; } html#etc-ds#etc-ds .etc-acc__item-attr, html#etc-ds#etc-ds .etc-acc__item-qty { color: rgb(var(--ink-muted)) !important; } html#etc-ds#etc-ds .etc-acc__bonus-cap, html#etc-ds#etc-ds .etc-acc__bonus-note, html#etc-ds#etc-ds .etc-acc__social-cap { color: rgb(var(--ink-muted)) !important; } html#etc-ds#etc-ds .etc-acc__bonus-main { background: rgb(var(--brand-tint)) !important; border: 1px solid rgb(var(--brand-line-subtle)) !important; border-radius: var(--ds-r-lg) !important; } html#etc-ds#etc-ds .etc-acc__alert { background: rgb(var(--info-tint)) !important; border: 1px solid rgb(var(--info-line)) !important; border-radius: var(--ds-r) !important; color: rgb(var(--ink-2)) !important; } html#etc-ds#etc-ds .etc-acc__guest { background: rgb(var(--surface-sunken)) !important; border: 1px dashed rgb(var(--line-strong)) !important; border-radius: var(--ds-r-lg) !important; color: rgb(var(--ink-2)) !important; } html#etc-ds#etc-ds .etc-acc__social-link { background: rgb(var(--surface)) !important; border: 1px solid rgb(var(--line)) !important; border-radius: var(--ds-r) !important; color: rgb(var(--ink-2)) !important; } html#etc-ds#etc-ds .etc-acc__section-head { border-bottom: 1px solid rgb(var(--line-subtle)) !important; } /* Хлебные крошки на статических посадочных: текущий пункт читается */ html#etc-ds#etc-ds .breadcrumb-item.active, html#etc-ds#etc-ds .breadcrumb .active, html#etc-ds#etc-ds .breadcrumb-item span[itemprop="name"] { color: rgb(var(--ink-2)) !important; } html#etc-ds#etc-ds .breadcrumb-item a span[itemprop="name"] { color: rgb(var(--ink-muted)) !important; } html#etc-ds#etc-ds .breadcrumb-item a:hover span[itemprop="name"] { color: rgb(var(--brand-ink)) !important; } /* Итог заказа в сайдбаре оформления: сумма — самая крупная цифра страницы, но цветом не кричит. */ html#etc-ds#etc-ds #order_total_modules .bg-white .fw-bold, html#etc-ds#etc-ds #order_total_modules strong, html#etc-ds#etc-ds #order_total_modules b, html#etc-ds#etc-ds #order_total_modules .text-success, html#etc-ds#etc-ds .etc-order-sum-value { color: rgb(var(--ink)) !important; font-family: var(--ds-font-display) !important; font-weight: 700 !important; letter-spacing: -.02em !important; } html#etc-ds#etc-ds #order_total_modules .text-muted { color: rgb(var(--ink-muted)) !important; } html#etc-ds#etc-ds .text-success { color: rgb(var(--brand-ink)) !important; } /* --------------------------------------------------------------------------- 32. Правки по итогам аудита контраста (обе темы). --------------------------------------------------------------------------- */ /* Кнопки на брендовой заливке наследовали брендовый цвет текста и сливались */ html#etc-ds#etc-ds .etc-cat-help__btn, html#etc-ds#etc-ds .etc-cat-cta__btn, html#etc-ds#etc-ds [class*="etc-cat-"][class*="__btn"], html#etc-ds#etc-ds [class*="etc-cat-"][class*="__cta"].is-filled { background: rgb(var(--brand)) !important; background-image: none !important; border: 1px solid rgb(var(--brand-line)) !important; color: #fff !important; border-radius: var(--ds-r) !important; font-weight: 600 !important; box-shadow: none !important; text-shadow: none !important; } html#etc-ds#etc-ds .etc-cat-help__btn:hover { background: rgb(var(--brand-hover)) !important; color: #fff !important; } html#etc-ds#etc-ds .etc-cat-help__btn i, html#etc-ds#etc-ds .etc-cat-help__btn span { color: #fff !important; } html#etc-ds#etc-ds .etc-cat-help { background: rgb(var(--surface)) !important; background-image: none !important; border: 1px solid rgb(var(--line)) !important; border-radius: var(--ds-r-lg) !important; box-shadow: none !important; } html#etc-ds#etc-ds .etc-cat-help__icon { background: rgb(var(--brand-tint)) !important; border: 1px solid rgb(var(--brand-line-subtle)) !important; color: rgb(var(--brand-ink)) !important; border-radius: var(--ds-r) !important; } /* Кикеры-подписи были на грани читаемости — поднимаем на ступень контраста */ html#etc-ds#etc-ds .etc-section-kicker, html#etc-ds#etc-ds .etc-cat-head__kicker, html#etc-ds#etc-ds .etc-acc__eyebrow, html#etc-ds#etc-ds .etc-promo-card__label, html#etc-ds#etc-ds .etc-cta-label, html#etc-ds#etc-ds .etc-paycta__label { color: rgb(var(--ink-muted)) !important; } /* Номера плиток лежат на фотографии — им нужна собственная подложка контраста */ html#etc-ds#etc-ds .etc-tile__index { color: rgb(var(--ondark)) !important; text-shadow: 0 1px 6px rgb(0 0 0 / .55) !important; } /* Кнопка MAX в доке: фиолетовый бренда мессенджера в светлой теме тёмнее */ html#etc-ds#etc-ds .etc-social-action--max { color: #5B34D6 !important; } html#etc-ds#etc-ds[data-etc-theme="dark"] .etc-social-action--max { color: #B7A4EE !important; } /* Промокод месяца — сам код должен читаться, это то, что переписывают */ html#etc-ds#etc-ds .etc-promo-quiet strong, html#etc-ds#etc-ds #etcPromoCode { color: rgb(var(--ink)) !important; font-family: var(--ds-font-mono) !important; font-weight: 700 !important; } /* Счётчики и заглушки «—» в блоке результатов */ html#etc-ds#etc-ds #etcVsearchCount, html#etc-ds#etc-ds .etc-vsearch__results-title span { color: rgb(var(--ink-2)) !important; } /* Подсказка «Заказать из вычитанного файла» в каталоге: жила на старом зелёном #2f8f2f поверх янтарной плашки. */ html#etc-ds#etc-ds .etc-catalog-hint { background: rgb(var(--warn-tint)) !important; border: 1px solid rgb(var(--warn-line)) !important; border-radius: var(--ds-r) !important; box-shadow: none !important; } html#etc-ds#etc-ds .etc-catalog-hint, html#etc-ds#etc-ds .etc-catalog-hint-text { color: rgb(var(--ink-2)) !important; } html#etc-ds#etc-ds .etc-catalog-hint strong, html#etc-ds#etc-ds .etc-catalog-hint-text strong { color: rgb(var(--warn-ink)) !important; font-weight: 600 !important; } html#etc-ds#etc-ds .etc-catalog-hint i { color: rgb(var(--warn-ink)) !important; } /* --------------------------------------------------------------------------- 33. Последние находки аудита. --------------------------------------------------------------------------- */ /* Ячейки таблиц брали цвет из темы движка (#4b566b) и в тёмной теме тонули */ html#etc-ds#etc-ds table td, html#etc-ds#etc-ds table th, html#etc-ds#etc-ds .table td, html#etc-ds#etc-ds .table th { color: rgb(var(--ink-2)) !important; border-color: rgb(var(--line)) !important; } html#etc-ds#etc-ds .table { --bs-table-color: rgb(var(--ink-2)); --bs-table-border-color: rgb(var(--line)); } html#etc-ds#etc-ds .table-bordered > :not(caption) > * { border-color: rgb(var(--line)) !important; } /* Акцентный текст движка (.text-primary) — бренд, а не коралловый Cartzilla */ html#etc-ds#etc-ds .text-primary { color: rgb(var(--brand-ink)) !important; } /* Даты отзывов и прочие служебные подписи */ html#etc-ds#etc-ds .etc-review-date, html#etc-ds#etc-ds .review-date, html#etc-ds#etc-ds .fs-xs { color: rgb(var(--ink-muted)) !important; } /* Ссылка-действие «Продолжить» на служебных страницах */ html#etc-ds#etc-ds a.btn-link, html#etc-ds#etc-ds .buttonAction a, html#etc-ds#etc-ds a:has(> .fas.fa-check) { color: rgb(var(--brand-hover)) !important; font-weight: 600 !important; } /* --------------------------------------------------------------------------- 34. Отзывы. Карточка была залита белым напрямую — в тёмной теме получался светлый прямоугольник со светлым текстом. --------------------------------------------------------------------------- */ html#etc-ds#etc-ds .etc-review-card { background: rgb(var(--surface)) !important; background-image: none !important; border: 1px solid rgb(var(--line)) !important; border-radius: var(--ds-r-lg) !important; box-shadow: none !important; color: rgb(var(--ink)) !important; } html#etc-ds#etc-ds .etc-review-author-row, html#etc-ds#etc-ds .etc-review-footer-row { background: rgb(var(--surface-sunken)) !important; border-color: rgb(var(--line-subtle)) !important; } html#etc-ds#etc-ds .etc-review-name { color: rgb(var(--ink)) !important; font-weight: 600 !important; } html#etc-ds#etc-ds .etc-review-date, html#etc-ds#etc-ds .etc-review-meta { color: rgb(var(--ink-muted)) !important; } html#etc-ds#etc-ds .etc-review-text, html#etc-ds#etc-ds .etc-review-body, html#etc-ds#etc-ds .etc-review-answer-text { color: rgb(var(--ink-2)) !important; } html#etc-ds#etc-ds .etc-review-answer { background: rgb(var(--brand-tint)) !important; border: 1px solid rgb(var(--brand-line-subtle)) !important; border-radius: var(--ds-r) !important; } html#etc-ds#etc-ds .etc-review-answer-label { color: rgb(var(--brand-ink)) !important; font-weight: 600 !important; } html#etc-ds#etc-ds .etc-review-avatar-icon { background: rgb(var(--surface-raised)) !important; border: 1px solid rgb(var(--line)) !important; color: rgb(var(--ink-muted)) !important; } html#etc-ds#etc-ds .etc-review-stars, html#etc-ds#etc-ds .etc-review-stars i { color: rgb(var(--gold-ink)) !important; } html#etc-ds#etc-ds .etc-review-verified { background: rgb(var(--brand-tint)) !important; border: 1px solid rgb(var(--brand-line-subtle)) !important; color: rgb(var(--brand-ink)) !important; border-radius: 999px !important; } html#etc-ds#etc-ds .etc-review-product-badge, html#etc-ds#etc-ds .etc-review-product-wrap { background: rgb(var(--surface-sunken)) !important; border: 1px solid rgb(var(--line)) !important; border-radius: var(--ds-r) !important; color: rgb(var(--ink-2)) !important; } html#etc-ds#etc-ds .etc-review-product-link { color: rgb(var(--brand-ink)) !important; } html#etc-ds#etc-ds .etc-review-read-btn, html#etc-ds#etc-ds .etc-review-all-btn { background: rgb(var(--surface)) !important; border: 1px solid rgb(var(--line-strong)) !important; color: rgb(var(--ink-2)) !important; border-radius: var(--ds-r) !important; font-weight: 600 !important; } /* Подпись бренда: две строки без обрезки — «…чип-тюн...» выглядело как дефект */ @media (min-width: 992px) { html#etc-ds#etc-ds .etc-brand__text { max-width: 230px; } html#etc-ds#etc-ds .etc-brand__text small { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.25 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } } /* Поиск в мобильном меню: поле и кнопка — одна группа, без «двойной рамки» */ @media (max-width: 991.98px) { html#etc-ds#etc-ds #navbarCollapse form[name="search"], html#etc-ds#etc-ds #navbarCollapse .input-group { display: flex !important; width: 100% !important; margin: 0 0 12px !important; } html#etc-ds#etc-ds #navbarCollapse .input-group .form-control { flex: 1 1 auto !important; border-radius: var(--ds-r) 0 0 var(--ds-r) !important; border-right: 0 !important; height: 46px !important; } html#etc-ds#etc-ds #navbarCollapse .input-group .btn { flex: 0 0 auto !important; width: 52px !important; height: 46px !important; border-radius: 0 var(--ds-r) var(--ds-r) 0 !important; border-left: 0 !important; position: relative !important; } html#etc-ds#etc-ds #navbarCollapse .input-group .btn i { position: static !important; transform: none !important; margin: 0 !important; } } @media (max-width: 991.98px) { html#etc-ds#etc-ds #navbarCollapse form[name="search"], html#etc-ds#etc-ds #navbarCollapse form[name="search"] > .input-group { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } html#etc-ds#etc-ds #navbarCollapse .ajaxQuickFind { border-radius: var(--ds-r) !important; } } @media (max-width: 991.98px) { /* Поле поиска — цельная рамка, лупа лежит внутри него как иконка-кнопка */ html#etc-ds#etc-ds #navbarCollapse .input-group { position: relative !important; } html#etc-ds#etc-ds #navbarCollapse .input-group .form-control { border: 1px solid rgb(var(--line-input)) !important; border-radius: var(--ds-r) !important; padding-right: 48px !important; background: rgb(var(--surface)) !important; } html#etc-ds#etc-ds #navbarCollapse .input-group .btn { position: absolute !important; right: 0 !important; top: 0 !important; width: 46px !important; height: 46px !important; background: transparent !important; border: 0 !important; border-radius: 0 var(--ds-r) var(--ds-r) 0 !important; z-index: 3 !important; } } /* ============================================================================= ЧАСТЬ 5 (2026-08-21, вторая итерация по замечаниям). ============================================================================= */ /* --------------------------------------------------------------------------- 35. Цветовая логика трёх действий в меню. Каталог — основной путь (заливка бренда). Заказ по вычитанному файлу — наша же услуга, но вторичный путь (брендовый тинт). Онлайн-редактор — внешний инструмент и новинка, поэтому единственный тёплый акцент в шапке. --------------------------------------------------------------------------- */ html#etc-ds#etc-ds .etc-mainmenu .nav-link.etc-menu-order, html#etc-ds#etc-ds .navbar-nav .nav-link.etc-menu-order, html#etc-ds#etc-ds .navbar-nav a[href*="firmware"] { background: rgb(var(--brand-tint)) !important; background-image: none !important; border: 1px solid rgb(var(--brand-line-subtle)) !important; color: rgb(var(--brand-ink)) !important; font-weight: 600 !important; box-shadow: none !important; text-shadow: none !important; } html#etc-ds#etc-ds .etc-mainmenu .nav-link.etc-menu-order:hover, html#etc-ds#etc-ds .navbar-nav a[href*="firmware"]:hover { background: rgb(var(--brand-tint-2)) !important; border-color: rgb(var(--brand-line-soft)) !important; color: rgb(var(--brand-ink)) !important; } html#etc-ds#etc-ds .etc-mainmenu .nav-link.etc-online-editor, html#etc-ds#etc-ds .navbar-nav .nav-link.etc-online-editor { background: rgb(var(--warn-tint)) !important; background-image: none !important; border: 1px solid rgb(var(--warn-line)) !important; color: rgb(var(--warn-ink)) !important; font-weight: 600 !important; box-shadow: none !important; text-shadow: none !important; } html#etc-ds#etc-ds .etc-mainmenu .nav-link.etc-online-editor:hover, html#etc-ds#etc-ds .navbar-nav .nav-link.etc-online-editor:hover { background: rgb(var(--gold-tint)) !important; border-color: rgb(var(--warn-ink)) !important; color: rgb(var(--warn-ink)) !important; } html#etc-ds#etc-ds .navbar-nav .nav-link.etc-online-editor::before, html#etc-ds#etc-ds .etc-mainmenu .etc-online-editor::before { background: rgb(var(--warn-ink)) !important; box-shadow: 0 0 0 3px rgb(var(--warn-ink) / .16) !important; } /* Длинное название кнопки: полное на широких экранах, короткое на средних */ html#etc-ds#etc-ds .etc-menu-label-short { display: none; } @media (max-width: 1399.98px) { html#etc-ds#etc-ds .etc-menu-label-full { display: none; } html#etc-ds#etc-ds .etc-menu-label-short { display: inline; } } @media (max-width: 991.98px) { /* В бургер-меню места достаточно — возвращаем полное название */ html#etc-ds#etc-ds .etc-menu-label-full { display: inline; } html#etc-ds#etc-ds .etc-menu-label-short { display: none; } } /* --------------------------------------------------------------------------- 36. Правая часть шапки: три группы вместо кучи. Служебные иконки → разделитель → кабинет → корзина. --------------------------------------------------------------------------- */ html#etc-ds#etc-ds .navbar-toolbar { gap: 6px !important; align-items: center !important; } /* Кабинет: иконка и подпись — одна кликабельная зона, а не «слипшиеся» блоки */ html#etc-ds#etc-ds .navbar-toolbar a[href="#signin-modal"], html#etc-ds#etc-ds .navbar-toolbar a[href*="account.php"] { display: inline-flex !important; align-items: center !important; gap: 9px !important; padding: 3px 12px 3px 3px !important; border-radius: var(--ds-r-lg) !important; border: 1px solid transparent !important; margin: 0 0 0 4px !important; transition: background-color .16s ease, border-color .16s ease !important; } html#etc-ds#etc-ds .navbar-toolbar a[href="#signin-modal"]:hover { background: rgb(var(--surface-sunken)) !important; border-color: rgb(var(--line)) !important; } html#etc-ds#etc-ds .navbar-tool-text.ms-n3 { margin-left: 0 !important; } html#etc-ds#etc-ds .navbar-tool-text { display: flex !important; flex-direction: column !important; line-height: 1.2 !important; text-align: left !important; } html#etc-ds#etc-ds .navbar-tool-text small { font-size: 11px !important; color: rgb(var(--ink-faint)) !important; margin-bottom: 1px; } /* Вертикальный разделитель перед группой «кабинет + корзина» */ @media (min-width: 992px) { html#etc-ds#etc-ds .navbar-toolbar a[href="#signin-modal"]::before, html#etc-ds#etc-ds .navbar-toolbar a[href*="account.php"]::before { content: ""; width: 1px; height: 26px; background: rgb(var(--line)); margin-right: 10px; flex: 0 0 1px; } } /* Корзина — единая брендовая кнопка: иконка, подпись, сумма */ html#etc-ds#etc-ds #divShoppingCart { margin-left: 6px !important; } html#etc-ds#etc-ds #divShoppingCart > .d-none.d-md-block { display: flex !important; align-items: center !important; gap: 10px !important; padding: 4px 14px 4px 4px !important; border: 1px solid rgb(var(--brand-line-subtle)) !important; border-radius: var(--ds-r-lg) !important; background: rgb(var(--brand-tint)) !important; transition: border-color .16s ease, background-color .16s ease !important; } html#etc-ds#etc-ds #divShoppingCart > .d-none.d-md-block:hover { background: rgb(var(--brand-tint-2)) !important; border-color: rgb(var(--brand-line-soft)) !important; } html#etc-ds#etc-ds #divShoppingCart a.navbar-tool-icon-box { width: 38px !important; height: 38px !important; border-radius: var(--ds-r) !important; } html#etc-ds#etc-ds #divShoppingCart a.navbar-tool-text { gap: 0 !important; margin: 0 !important; } html#etc-ds#etc-ds #divShoppingCart a.navbar-tool-text small { color: rgb(var(--ink-muted)) !important; text-align: left !important; font-size: 11px !important; } html#etc-ds#etc-ds #divShoppingCart .cart-total { color: rgb(var(--ink)) !important; font-family: var(--ds-font-display) !important; font-weight: 700 !important; font-size: 14px !important; letter-spacing: -.01em !important; } html#etc-ds#etc-ds #divShoppingCart .cart-total:empty::before { content: "0 ₽"; color: rgb(var(--ink-muted)); font-weight: 600; } /* Служебные иконки (тема, избранное, админ) — одного размера и ритма */ html#etc-ds#etc-ds .etc-theme-toggle .navbar-tool-icon-box, html#etc-ds#etc-ds #divWishlist .navbar-tool-icon-box, html#etc-ds#etc-ds .etc-admin-tool .navbar-tool-icon-box { width: 38px !important; height: 38px !important; } /* --------------------------------------------------------------------------- 37. Подсказки поиска: выпадающая панель вместо блока в потоке. Раньше при первом же символе список вставлялся в поток и «раздвигал» шапку. --------------------------------------------------------------------------- */ html#etc-ds#etc-ds .etc-mainbar__nav .input-group, html#etc-ds#etc-ds #navbarCollapse .input-group { position: relative !important; } html#etc-ds#etc-ds #ajaxQuickFind, html#etc-ds#etc-ds #ajaxQuickFindHeader, html#etc-ds#etc-ds .ajaxQuickFind, html#etc-ds#etc-ds .ajaxQuickFindHeader { position: absolute !important; top: calc(100% + 8px) !important; left: 0 !important; right: 0 !important; width: auto !important; z-index: 1085 !important; max-height: min(66vh, 520px); overflow-y: auto; overflow-x: hidden; background: rgb(var(--surface)) !important; border: 1px solid rgb(var(--line)) !important; border-radius: var(--ds-r-lg) !important; box-shadow: var(--ds-shadow-xl) !important; padding: 6px !important; } html#etc-ds#etc-ds #ajaxQuickFind:empty, html#etc-ds#etc-ds #ajaxQuickFindHeader:empty, html#etc-ds#etc-ds .ajaxQuickFind:empty { display: none !important; } html#etc-ds#etc-ds #searchPreview table { width: 100% !important; margin: 0 !important; border: 0 !important; background: transparent !important; } html#etc-ds#etc-ds #searchPreview thead th { background: transparent !important; border: 0 !important; padding: 6px 10px 8px !important; color: rgb(var(--ink-faint)) !important; font-family: var(--ds-font-mono) !important; font-size: 10.5px !important; font-weight: 500 !important; letter-spacing: .1em !important; text-transform: uppercase !important; } html#etc-ds#etc-ds #searchPreview tbody tr { background: transparent !important; border: 0 !important; } html#etc-ds#etc-ds #searchPreview tbody tr:hover td { background: rgb(var(--surface-sunken)) !important; } html#etc-ds#etc-ds #searchPreview td { border: 0 !important; border-top: 1px solid rgb(var(--line-subtle)) !important; padding: 8px 10px !important; vertical-align: middle !important; background: transparent !important; } html#etc-ds#etc-ds #searchPreview tbody tr:first-child td { border-top: 0 !important; } html#etc-ds#etc-ds #searchPreview td:first-child { width: 56px !important; } html#etc-ds#etc-ds #searchPreview img { width: 44px !important; height: 44px !important; object-fit: cover !important; border-radius: var(--ds-r-sm) !important; border: 1px solid rgb(var(--line-subtle)) !important; background: rgb(var(--surface-sunken)) !important; } html#etc-ds#etc-ds #searchPreview td a { color: rgb(var(--ink)) !important; font-size: 13.5px !important; font-weight: 500 !important; line-height: 1.35 !important; display: block; text-decoration: none !important; } html#etc-ds#etc-ds #searchPreview tr:hover td a { color: rgb(var(--brand-ink)) !important; } html#etc-ds#etc-ds #searchPreview td:last-child { width: 96px !important; text-align: right !important; white-space: nowrap !important; } html#etc-ds#etc-ds #searchPreview .productPrice { color: rgb(var(--ink)) !important; font-family: var(--ds-font-display) !important; font-weight: 600 !important; font-size: 13.5px !important; } /* --------------------------------------------------------------------------- 38. Плитка товара в витрине: единая сетка отступов. Название, цена и кешбэк выравниваются по одной левой линии. --------------------------------------------------------------------------- */ html#etc-ds#etc-ds .card.product-card { background: rgb(var(--surface)) !important; border: 1px solid rgb(var(--line)) !important; border-radius: var(--ds-r-lg) !important; overflow: hidden !important; box-shadow: none !important; } html#etc-ds#etc-ds .card.product-card::before, html#etc-ds#etc-ds .card.product-card::after { display: none !important; } html#etc-ds#etc-ds .product-card .card-img-top { display: block !important; background: rgb(var(--surface-sunken)) !important; border-bottom: 1px solid rgb(var(--line-subtle)) !important; padding: 0 !important; margin: 0 !important; aspect-ratio: 4 / 3; overflow: hidden !important; } html#etc-ds#etc-ds .product-card .card-img-top img, html#etc-ds#etc-ds .product-card .card-img-top picture { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; margin: 0 !important; border-radius: 0 !important; transition: transform .3s ease !important; } html#etc-ds#etc-ds .product-card:hover .card-img-top img { transform: scale(1.03); } html#etc-ds#etc-ds .product-card .card-body { padding: 14px 16px 16px !important; text-align: left !important; } html#etc-ds#etc-ds .product-card .card-body > * { margin-left: 0 !important; margin-right: 0 !important; } html#etc-ds#etc-ds .product-card .product-title, html#etc-ds#etc-ds .product-card .product-title a { display: block !important; color: rgb(var(--ink)) !important; font-size: 13.5px !important; font-weight: 500 !important; line-height: 1.4 !important; text-align: left !important; margin: 0 0 10px !important; padding: 0 !important; } html#etc-ds#etc-ds .product-card .product-title a { display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.6em; } html#etc-ds#etc-ds .product-card .product-title a:hover { color: rgb(var(--brand-ink)) !important; } html#etc-ds#etc-ds .product-card .product-price, html#etc-ds#etc-ds .product-card .productPrice { display: block !important; text-align: left !important; margin: 0 !important; padding: 0 !important; font-family: var(--ds-font-display) !important; font-weight: 700 !important; font-size: 18px !important; color: rgb(var(--ink)) !important; letter-spacing: -.02em !important; } /* Кешбэк — одна пилюля вместо двух вложенных овалов */ html#etc-ds#etc-ds .product-card .bonus, html#etc-ds#etc-ds .product-card .bonus.cashback, html#etc-ds#etc-ds .card-product .bonus { display: inline-flex !important; align-items: center !important; gap: 6px !important; margin: 10px 0 0 !important; padding: 3px 10px !important; border-radius: 999px !important; background: rgb(var(--brand-tint)) !important; border: 1px solid rgb(var(--brand-line-subtle)) !important; color: rgb(var(--brand-ink)) !important; font-size: 12px !important; font-weight: 500 !important; box-shadow: none !important; } html#etc-ds#etc-ds .product-card .bonus .bonus, html#etc-ds#etc-ds .product-card .bonus .cashback { background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; font-family: var(--ds-font-mono) !important; font-weight: 600 !important; color: rgb(var(--brand-ink)) !important; } html#etc-ds#etc-ds .product-card .bonus .small { color: rgb(var(--ink-muted)) !important; font-size: 11px !important; } /* Кнопка избранного на плитке */ html#etc-ds#etc-ds .product-card .btn-wishlist { top: 10px !important; right: 10px !important; width: 34px !important; height: 34px !important; background: rgb(var(--surface) / .92) !important; backdrop-filter: blur(4px); } /* --------------------------------------------------------------------------- 39. Логотип MAX в карточке сообществ (иконки мессенджера нет во Font Awesome, поэтому знак рисуем текстом — так же, как в верхней панели). --------------------------------------------------------------------------- */ html#etc-ds#etc-ds .etc-cta-card--max .etc-cta-icon-ring { position: relative; font-size: 0 !important; } html#etc-ds#etc-ds .etc-cta-card--max .etc-cta-icon-ring::before { content: "MAX"; font-family: var(--ds-font) !important; font-size: 13px !important; font-weight: 800 !important; letter-spacing: .02em; color: #5B34D6 !important; line-height: 1; } html#etc-ds#etc-ds[data-etc-theme="dark"] .etc-cta-card--max .etc-cta-icon-ring::before { color: #B7A4EE !important; } html#etc-ds#etc-ds .etc-cta-card--max .etc-cta-icon-ring i { display: none !important; } /* --------------------------------------------------------------------------- 40. Плавающие кнопки мессенджеров на мобильных. В прошлом релизе их скрыли целиком (перекрывали формы). Возвращаем, но компактно и выше нижней панели, чтобы ничего не загораживать. --------------------------------------------------------------------------- */ @media (max-width: 991.98px) { html#etc-ds#etc-ds .etc-social-dock { display: flex !important; position: fixed !important; right: 10px !important; left: auto !important; bottom: calc(var(--etc-social-bottom, 76px)) !important; width: auto !important; max-width: 56px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; z-index: 1030 !important; } html#etc-ds#etc-ds .etc-social-actions { display: flex !important; flex-direction: column !important; gap: 8px !important; width: auto !important; } html#etc-ds#etc-ds .etc-social-action { width: 40px !important; height: 40px !important; border-radius: 999px !important; background: rgb(var(--surface)) !important; border: 1px solid rgb(var(--line)) !important; box-shadow: var(--ds-shadow-lg) !important; } html#etc-ds#etc-ds .etc-social-action svg { width: 18px !important; height: 18px !important; } html#etc-ds#etc-ds .etc-social-action--max::before { font-size: 10.5px !important; } /* На оформлении заказа док по-прежнему не нужен — там форма во всю ширину */ html#etc-ds#etc-ds:has(#smart_checkout) .etc-social-dock { display: none !important; } } /* --------------------------------------------------------------------------- 41. Ряд меню: пункты не растягиваются на всю ширину, ряд выравнивается по левому краю. Раньше пункты тянулись (flex: 1 1 auto) и при переносе вторая строка «повисала» по центру. --------------------------------------------------------------------------- */ @media (min-width: 992px) { html#etc-ds#etc-ds ul.etc-mainmenu { flex-wrap: wrap !important; justify-content: flex-start !important; align-items: center !important; column-gap: 4px !important; row-gap: 6px !important; } html#etc-ds#etc-ds ul.etc-mainmenu > .nav-item { flex: 0 0 auto !important; display: flex !important; } html#etc-ds#etc-ds ul.etc-mainmenu > .nav-item > .nav-link { flex: 0 0 auto !important; max-width: none !important; margin: 0 !important; padding: 8px 12px !important; font-size: 13.5px !important; white-space: nowrap !important; } /* Три действия крупнее разделов — они несут вес */ html#etc-ds#etc-ds ul.etc-mainmenu > .nav-item > .nav-link.etc-menu-catalog, html#etc-ds#etc-ds ul.etc-mainmenu > .nav-item > .nav-link.etc-menu-order, html#etc-ds#etc-ds ul.etc-mainmenu > .nav-item > .nav-link.etc-online-editor { padding: 8px 14px !important; font-size: 14px !important; } } @media (min-width: 992px) and (max-width: 1199.98px) { html#etc-ds#etc-ds ul.etc-mainmenu > .nav-item > .nav-link { padding: 7px 9px !important; font-size: 13px !important; } } /* Подпись корзины: когда сумма пуста, «Корзина» — основной текст, а не мелкая подпись */ html#etc-ds#etc-ds #divShoppingCart a.navbar-tool-text small { font-size: 14px !important; font-weight: 600 !important; color: rgb(var(--ink)) !important; } html#etc-ds#etc-ds #divShoppingCart .cart-total { font-size: 12.5px !important; color: rgb(var(--ink-muted)) !important; font-weight: 600 !important; } html#etc-ds#etc-ds #divShoppingCart .cart-total:empty { display: none !important; } /* --------------------------------------------------------------------------- 42. Две смысловые строки меню вместо случайного переноса: сверху три действия, снизу — разделы. Полное название кнопки заказа помещается целиком на любом десктопе. --------------------------------------------------------------------------- */ @media (min-width: 992px) { html#etc-ds#etc-ds ul.etc-mainmenu { row-gap: 8px !important; } html#etc-ds#etc-ds ul.etc-mainmenu > .nav-item:has(> .etc-menu-catalog) { order: -3 !important; } html#etc-ds#etc-ds ul.etc-mainmenu > .nav-item:has(> .etc-menu-order), html#etc-ds#etc-ds ul.etc-mainmenu > .nav-item:has(> .etc-online-editor) { order: -2 !important; } /* Разрыв строки после блока действий */ html#etc-ds#etc-ds ul.etc-mainmenu::after { content: ""; flex: 0 0 100%; width: 100%; height: 0; order: -1; } /* Разделы — второй, спокойный ряд */ html#etc-ds#etc-ds ul.etc-mainmenu > .nav-item > .nav-link:not(.etc-menu-catalog):not(.etc-menu-order):not(.etc-online-editor) { padding: 6px 12px !important; font-size: 13.5px !important; } html#etc-ds#etc-ds ul.etc-mainmenu > .nav-item:first-of-type > .nav-link { margin-left: 0 !important; } html#etc-ds#etc-ds .etc-menubar { padding-bottom: 8px !important; } } /* --------------------------------------------------------------------------- 43. Мобильная шапка. Правила группировки из раздела 36 предназначены только для десктопа: на узких экранах они перебивали служебные классы видимости (d-none/d-md-block) и в ряд вылезала вторая корзина, а бургер уезжал за край. --------------------------------------------------------------------------- */ @media (max-width: 991.98px) { html#etc-ds#etc-ds .etc-mainbar__nav .container, html#etc-ds#etc-ds .etc-mainbar__nav > .container { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 8px !important; } html#etc-ds#etc-ds .navbar-toolbar { margin-left: auto !important; gap: 6px !important; flex-wrap: nowrap !important; } /* Подпись кабинета на узких экранах не помещается — остаётся иконка */ html#etc-ds#etc-ds .navbar-toolbar .navbar-tool-text { display: none !important; } html#etc-ds#etc-ds .navbar-toolbar a[href="#signin-modal"], html#etc-ds#etc-ds .navbar-toolbar a[href*="account.php"] { gap: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; } html#etc-ds#etc-ds .navbar-toolbar a[href="#signin-modal"]::before, html#etc-ds#etc-ds .navbar-toolbar a[href*="account.php"]::before { display: none !important; } /* Возвращаем штатную видимость десктопного блока корзины */ html#etc-ds#etc-ds #divShoppingCart > .d-none.d-md-block { padding: 0 !important; border: 0 !important; background: transparent !important; gap: 6px !important; } html#etc-ds#etc-ds #divShoppingCart { margin-left: 0 !important; } } @media (max-width: 767.98px) { html#etc-ds#etc-ds #divShoppingCart > .d-none.d-md-block { display: none !important; } } /* Мобильная иконка корзины (отдельная ссылка темы) — одного вида с остальными */ @media (max-width: 991.98px) { html#etc-ds#etc-ds .etc-cart-mobile-link-wrap .navbar-tool-icon-box, html#etc-ds#etc-ds .etc-cart-mobile-link-wrap a { width: 40px !important; height: 40px !important; border-radius: var(--ds-r) !important; } html#etc-ds#etc-ds .navbar-toggler { width: 40px !important; height: 40px !important; border: 1px solid rgb(var(--line)) !important; border-radius: var(--ds-r) !important; background: rgb(var(--surface-sunken)) !important; color: rgb(var(--ink-2)) !important; display: inline-flex !important; align-items: center; justify-content: center; padding: 0 !important; } html#etc-ds#etc-ds .navbar-toggler:focus { box-shadow: none !important; } html#etc-ds#etc-ds .etc-brand__mark img { max-height: 40px !important; } html#etc-ds#etc-ds .etc-brand__text { display: none !important; } } /* Декоративные «уголки» и дуги вокруг цены остались от прежнего оформления плитки — в новой сетке они читаются как артефакты рендеринга. */ html#etc-ds#etc-ds .product-card .product-price::before, html#etc-ds#etc-ds .product-card .product-price::after, html#etc-ds#etc-ds .product-card .card-img-top::before, html#etc-ds#etc-ds .product-card .card-img-top::after, html#etc-ds#etc-ds .card-product .product-price::before, html#etc-ds#etc-ds .card-product .product-price::after { display: none !important; content: none !important; } /* Цена ближе к названию: карточка читается как один блок, а не три этажа */ html#etc-ds#etc-ds .product-card .card-body > .product-price, html#etc-ds#etc-ds .product-card .product-price { margin-top: 2px !important; } html#etc-ds#etc-ds .product-card .card-body .mb-3, html#etc-ds#etc-ds .product-card .card-body .mb-2 { margin-bottom: 6px !important; } html#etc-ds#etc-ds .product-card .card-body-hidden { padding-top: 0 !important; } /* Название в плитке — ровно две строки: карточки в ряду выравниваются, но под коротким названием не остаётся пустой полосы. */ html#etc-ds#etc-ds .product-card .product-title a { -webkit-line-clamp: 2; min-height: 2.8em; margin-bottom: 0 !important; } html#etc-ds#etc-ds .product-card .product-title { margin-bottom: 8px !important; } html#etc-ds#etc-ds .product-card .card-body > *:last-child { margin-bottom: 0 !important; } /* Собственная сетка отступов внутри плитки вместо унаследованных mb-* */ html#etc-ds#etc-ds .product-card .card-body > * { margin-top: 0 !important; margin-bottom: 0 !important; } html#etc-ds#etc-ds .product-card .card-body > * + * { margin-top: 8px !important; } html#etc-ds#etc-ds .product-card .card-body .product-title { margin-bottom: 0 !important; } html#etc-ds#etc-ds .product-card .card-body .bonus { margin-top: 8px !important; } /* --------------------------------------------------------------------------- 44. Бургер-меню: пункты читаются как список — иконка слева, текст от неё. --------------------------------------------------------------------------- */ @media (max-width: 991.98px) { html#etc-ds#etc-ds #navbarCollapse .etc-mainmenu .nav-link { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; text-align: left !important; padding: 11px 14px !important; width: 100% !important; } html#etc-ds#etc-ds #navbarCollapse .etc-mainmenu .nav-link i, html#etc-ds#etc-ds #navbarCollapse .etc-mainmenu .nav-link svg { flex: 0 0 auto !important; } html#etc-ds#etc-ds #navbarCollapse .etc-mainmenu .nav-link::before { flex: 0 0 auto !important; } html#etc-ds#etc-ds #navbarCollapse .etc-mainmenu { gap: 8px !important; } } /* --------------------------------------------------------------------------- 45. Мобильный док мессенджеров опускаем к нижнему краю: в середине правой стороны он мешал при прокрутке. Кнопки чуть компактнее, столбик ниже. Пока висит cookie-баннер, док поднимается над ним. --------------------------------------------------------------------------- */ @media (max-width: 991.98px) { html#etc-ds#etc-ds .etc-social-dock { bottom: 16px !important; inset: auto 10px 16px auto !important; } html#etc-ds#etc-ds:has(#cookie-consent.is-visible) .etc-social-dock { bottom: calc(var(--etc-cc-height, 150px) + 12px) !important; inset: auto 10px calc(var(--etc-cc-height, 150px) + 12px) auto !important; } html#etc-ds#etc-ds .etc-social-actions { gap: 6px !important; } html#etc-ds#etc-ds .etc-social-action { width: 36px !important; height: 36px !important; } html#etc-ds#etc-ds .etc-social-action svg { width: 17px !important; height: 17px !important; } html#etc-ds#etc-ds .etc-social-action--max::before { font-size: 9.5px !important; } } /* --------------------------------------------------------------------------- 46. Заголовок карточки товара — по центру страницы. Левое выравнивание из общего правила остаётся у разделов каталога и служебных страниц, а имя товара читается по центру, как и было задумано. --------------------------------------------------------------------------- */ html#etc-ds#etc-ds [itemtype*="schema.org/Product"] .page-title-overlap .container, html#etc-ds#etc-ds [itemtype*="schema.org/Product"] .page-title-overlap .text-center, html#etc-ds#etc-ds [itemtype*="schema.org/Product"] .page-title-overlap .order-lg-1, html#etc-ds#etc-ds [itemtype*="schema.org/Product"] .page-title-overlap h1, html#etc-ds#etc-ds [itemtype*="schema.org/Product"] .page-title-overlap .h3 { text-align: center !important; } html#etc-ds#etc-ds [itemtype*="schema.org/Product"] .page-title-overlap h1, html#etc-ds#etc-ds [itemtype*="schema.org/Product"] .page-title-overlap .h3 { margin-left: auto !important; margin-right: auto !important; max-width: min(100%, 980px) !important; } html#etc-ds#etc-ds [itemtype*="schema.org/Product"] .page-title-overlap .breadcrumb, html#etc-ds#etc-ds [itemtype*="schema.org/Product"] .page-title-overlap nav[aria-label="breadcrumb"] { justify-content: center !important; } /* --------------------------------------------------------------------------- 47. Страница статьи: DOM и визуальный порядок теперь одинаковы. Портретные постеры показываются целиком — это контент, а не фон-баннер. --------------------------------------------------------------------------- */ html#etc-ds#etc-ds .etc-article > h1 { max-width: 980px !important; margin: 0 0 16px !important; text-align: left !important; } html#etc-ds#etc-ds .etc-article-cover { margin: 0 auto 20px !important; overflow: visible !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } html#etc-ds#etc-ds .etc-article-cover:hover { transform: none !important; border: 0 !important; box-shadow: none !important; } html#etc-ds#etc-ds .etc-article-cover > .card-body { padding: 0 !important; } html#etc-ds#etc-ds .etc-article-cover__media { display: grid !important; place-items: center !important; min-height: 120px !important; padding: clamp(10px, 1.6vw, 20px) !important; overflow: hidden !important; background: rgb(var(--surface-sunken)) !important; border: 1px solid rgb(var(--line)) !important; border-radius: var(--ds-r-lg) !important; } html#etc-ds#etc-ds .etc-article-cover__media p { display: grid !important; place-items: center !important; width: 100% !important; margin: 0 !important; } html#etc-ds#etc-ds .etc-article-cover__media img { display: block !important; width: auto !important; max-width: 100% !important; height: auto !important; max-height: min(72vh, 720px) !important; margin: 0 auto !important; object-fit: contain !important; border: 0 !important; border-radius: calc(var(--ds-r-lg) - 4px) !important; box-shadow: 0 18px 48px rgb(9 24 18 / .12) !important; } html#etc-ds#etc-ds .etc-article-meta { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 7px 18px !important; padding: 12px 2px 0 !important; } html#etc-ds#etc-ds .etc-article-meta .desc { margin: 0 !important; padding: 0 !important; font-size: 13px !important; line-height: 1.45 !important; color: rgb(var(--ink-muted)) !important; } html#etc-ds#etc-ds .etc-article-meta a { color: rgb(var(--brand-ink)) !important; } html#etc-ds#etc-ds .etc-article-tags { margin-top: 12px !important; } html#etc-ds#etc-ds .etc-article-tags h5 { margin-bottom: 8px !important; } html#etc-ds#etc-ds .etc-article-content { margin: 0 auto 24px !important; background: rgb(var(--surface)) !important; border: 1px solid rgb(var(--line)) !important; border-radius: var(--ds-r-lg) !important; box-shadow: var(--ds-shadow-xs) !important; } html#etc-ds#etc-ds .etc-article-content:hover { transform: none !important; box-shadow: var(--ds-shadow-xs) !important; } html#etc-ds#etc-ds .etc-article-content .card-body { padding: clamp(22px, 3vw, 38px) !important; } html#etc-ds#etc-ds .etc-article-content .page, html#etc-ds#etc-ds .etc-article-content .pageItem { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } html#etc-ds#etc-ds .etc-article-content p, html#etc-ds#etc-ds .etc-article-content li { color: rgb(var(--ink-2)) !important; font-size: 15.5px !important; line-height: 1.68 !important; } html#etc-ds#etc-ds .etc-article-content img { max-width: 100% !important; height: auto !important; } /* --------------------------------------------------------------------------- 48. Список статей: стабильный scope вместо селекторов по отсутствующим предкам. Превью компактно, но изображения с текстом не обрезаются. --------------------------------------------------------------------------- */ html#etc-ds#etc-ds .etc-articles__search { max-width: 720px !important; margin-bottom: 20px !important; } html#etc-ds#etc-ds .etc-articles__topics, html#etc-ds#etc-ds .etc-articles__tags { margin-bottom: 14px !important; } html#etc-ds#etc-ds .etc-article-list { display: grid !important; gap: 18px !important; margin-top: 18px !important; } html#etc-ds#etc-ds .etc-article-card { min-height: 0 !important; margin: 0 !important; overflow: hidden !important; background: rgb(var(--surface)) !important; border: 1px solid rgb(var(--line)) !important; border-radius: var(--ds-r-lg) !important; box-shadow: var(--ds-shadow-xs) !important; } html#etc-ds#etc-ds .etc-article-card > .card-body { padding: 18px !important; } html#etc-ds#etc-ds .etc-article-card .row { align-items: stretch !important; } html#etc-ds#etc-ds .etc-article-card .img-wrap { display: grid !important; width: 100% !important; aspect-ratio: 4 / 3 !important; margin: 0 !important; overflow: hidden !important; background: rgb(var(--surface-sunken)) !important; border: 1px solid rgb(var(--line-subtle)) !important; border-radius: var(--ds-r) !important; } html#etc-ds#etc-ds .etc-article-card .img-wrap a { display: grid !important; place-items: center !important; width: 100% !important; height: 100% !important; padding: 6px !important; } html#etc-ds#etc-ds .etc-article-card .img-wrap img { display: block !important; width: 100% !important; height: 100% !important; max-height: none !important; object-fit: contain !important; border: 0 !important; border-radius: calc(var(--ds-r) - 3px) !important; transition: transform .25s ease !important; } html#etc-ds#etc-ds .etc-article-card:hover .img-wrap img { transform: scale(1.025); } html#etc-ds#etc-ds .etc-article-card__content { padding-block: 2px !important; } html#etc-ds#etc-ds .etc-article-card .title { margin-bottom: 7px !important; } html#etc-ds#etc-ds .etc-article-card .title a { font-family: var(--ds-font-display) !important; font-size: clamp(17px, 1.2vw, 20px) !important; font-weight: 650 !important; line-height: 1.25 !important; letter-spacing: -.015em !important; color: rgb(var(--ink)) !important; } html#etc-ds#etc-ds .etc-article-card .title a:hover { color: rgb(var(--brand-ink)) !important; } html#etc-ds#etc-ds .etc-article-card .desc { margin-bottom: 4px !important; font-size: 13.5px !important; line-height: 1.55 !important; color: rgb(var(--ink-muted)) !important; } html#etc-ds#etc-ds .etc-article-card__tags { margin: 6px 0 0 !important; } html#etc-ds#etc-ds .etc-article-card__action { display: flex !important; align-items: center !important; } html#etc-ds#etc-ds .etc-article-card__action .action-wrap { width: 100% !important; } @media (max-width: 767.98px) { html#etc-ds#etc-ds .etc-article-card .row { gap: 16px !important; } html#etc-ds#etc-ds .etc-article-card__media, html#etc-ds#etc-ds .etc-article-card__content, html#etc-ds#etc-ds .etc-article-card__action { width: 100% !important; max-width: 100% !important; } html#etc-ds#etc-ds .etc-article-card .img-wrap { max-height: 230px !important; aspect-ratio: 16 / 9 !important; } } @media (max-width: 575.98px) { html#etc-ds#etc-ds .etc-article-content .card-body { padding: 16px 14px !important; } html#etc-ds#etc-ds .etc-article-content p, html#etc-ds#etc-ds .etc-article-content li { font-size: 15px !important; } html#etc-ds#etc-ds .etc-article-cover__media { padding: 8px !important; } html#etc-ds#etc-ds .etc-article-meta { gap: 6px 12px !important; } html#etc-ds#etc-ds .etc-article-card > .card-body { padding: 16px !important; } } /* --------------------------------------------------------------------------- 49. Feedback integration: рабочая ширина, открытый ECU и зелёный промоблок. Две строки меню сохраняют смысловую иерархию, но каждая заполняет shell. --------------------------------------------------------------------------- */ @media (min-width: 992px) { html#etc-ds#etc-ds .etc-menubar #navbarCollapse, html#etc-ds#etc-ds ul.etc-mainmenu { width: 100% !important; } html#etc-ds#etc-ds ul.etc-mainmenu { justify-content: flex-start !important; align-items: stretch !important; column-gap: 6px !important; } html#etc-ds#etc-ds ul.etc-mainmenu > .nav-item { flex: 1 1 0 !important; min-width: 0 !important; align-self: stretch !important; } html#etc-ds#etc-ds ul.etc-mainmenu > .nav-item > .nav-link { display: flex !important; flex: 1 1 auto !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; min-height: 42px !important; padding: 7px clamp(6px, .6vw, 12px) !important; font-size: clamp(12px, .72vw, 13.5px) !important; line-height: 1.2 !important; text-align: center !important; white-space: normal !important; } html#etc-ds#etc-ds ul.etc-mainmenu > .nav-item > .nav-link.etc-menu-catalog, html#etc-ds#etc-ds ul.etc-mainmenu > .nav-item > .nav-link.etc-menu-order, html#etc-ds#etc-ds ul.etc-mainmenu > .nav-item > .nav-link.etc-online-editor { min-height: 46px !important; font-size: clamp(13px, .76vw, 14px) !important; } html#etc-ds#etc-ds .etc-hero-poster__stage { min-height: clamp(540px, 31.25vw, 600px) !important; } html#etc-ds#etc-ds .etc-hero-poster__visual { transform: perspective(1450px) rotateX(var(--etc-hero-rx)) rotateY(var(--etc-hero-ry)) scale(1.01) !important; } html#etc-ds#etc-ds .etc-hero-poster__visual img { object-position: 62% 82% !important; } } html#etc-ds#etc-ds #etcVsearchContainer { position: relative !important; z-index: 2 !important; margin-top: clamp(24px, 2vw, 36px) !important; } /* Legacy widgets удаляются из footer, поэтому единственный актуальный dock можно показать сразу: прежняя 220 ms задержка выглядела как мерцание. */ html#etc-ds#etc-ds body:not(.etc-redesign-ready) .etc-social-dock, html#etc-ds#etc-ds body.etc-redesign-ready .etc-social-dock { opacity: 1 !important; visibility: visible !important; animation: none !important; transition: none !important; } /* На главной мобильный dock дублирует три карточки сразу под поиском и перекрывает каскадные поля. На остальных страницах быстрый dock остаётся. */ @media (max-width: 767.98px) { html#etc-ds#etc-ds:has(#etcVsearchContainer) .etc-social-dock { display: none !important; } } html#etc-ds#etc-ds .etc-promo-card--primary { background: radial-gradient(circle at 88% 8%, rgb(112 235 175 / .22), transparent 36%), linear-gradient(135deg, rgb(17 124 81) 0%, rgb(12 108 72) 56%, rgb(8 91 60) 100%) !important; border-color: rgb(91 218 154 / .74) !important; box-shadow: 0 22px 54px rgb(4 63 40 / .24) !important; } html#etc-ds#etc-ds .etc-promo-card--primary:hover { border-color: rgb(128 238 182 / .9) !important; box-shadow: 0 26px 62px rgb(4 63 40 / .3) !important; } /* --------------------------------------------------------------------------- 50. Accessibility and motion. --------------------------------------------------------------------------- */ html#etc-ds#etc-ds [role="option"].etc-search-option--active, html#etc-ds#etc-ds [role="option"][aria-selected="true"] { background: rgb(var(--brand-tint)) !important; outline: 2px solid rgb(var(--brand)) !important; outline-offset: -2px !important; } @media (prefers-reduced-motion: reduce) { /* A third ID raises this accessibility layer above component transitions that intentionally use !important elsewhere in the legacy cascade. */ html#etc-ds#etc-ds#etc-ds *, html#etc-ds#etc-ds#etc-ds *::before, html#etc-ds#etc-ds#etc-ds *::after { scroll-behavior: auto !important; transition: none !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; animation: none !important; animation-duration: 0.01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; } html#etc-ds#etc-ds .card:hover, html#etc-ds#etc-ds .product-card:hover, html#etc-ds#etc-ds .etc-article-card:hover, html#etc-ds#etc-ds .etc-article-card:hover .img-wrap img, html#etc-ds#etc-ds .etc-promo-card:hover, html#etc-ds#etc-ds .etc-hero-poster__visual { transform: none !important; } }