/*
* iter-04 homepage components — МногоСна v2026 Desktop
* Loads AFTER styles_modern.css (Variant C structure).
* All values via DESIGN_SYSTEM.md tokens.
* Do NOT add non-homepage rules here.
* ================================================================
*/
/* ════════════════════════════════════════════════════
EXTENDED TOKENS (homepage-specific, extend :root)
════════════════════════════════════════════════════ */
:root {
--c-kaspi: #F14635; /* reserved: Kaspi Pay only */
--c-bg-soft: #F7FAFB;
/* iter-20 δ-C fix (2026-06-11): cart_v2.css use --c-surface для
.atc-card / .cart-card backgrounds; без него карточки прозрачные на
homepage/catalog. PDP корректен — там определён в product_v2.css. */
--c-surface: #FFFFFF;
/* iter-20 δ-C fix (2026-06-11): cart_v2 mnogosna-cart.css ссылается на
--ls-smallcaps (letter-spacing для брэндов в .atc-product__brand etc.). */
--ls-smallcaps: 0.06em;
}
/* iter-20 δ-C2 (2026-06-11) — Owner-approved divergence: ATC показывает
список всех cart items. Vendored mnogosna-cart.css ставит
`border-block: 1px solid var(--c-border-soft)` на КАЖДОМ .atc-product,
что даёт двойной бордер при стэке. Убираем top-бордер у смежных. */
.atc-card .atc-product + .atc-product {
border-top: 0;
}
.atc-card .atc-product__qty {
font-weight: 600;
color: var(--c-text-2);
font-size: 0.85em;
margin-left: 4px;
}
/* iter-20 δ-C2 (2026-06-11) — крестик удаления товара из корзины внутри
ATC-модалки. По требованию Owner. Vendored mnogosna-cart.css имеет
`.atc-product { display: grid; grid-template-columns: 76px 1fr auto }` —
крестик ставим абсолютно справа-сверху, не ломая 3-колоночный grid. */
.atc-card .atc-product { position: relative; }
.atc-card .atc-product__remove {
position: absolute;
top: 6px; right: 8px;
width: 26px; height: 26px;
border: 0; background: transparent;
color: var(--c-text-3, #8B95A1);
cursor: pointer; padding: 0;
display: grid; place-items: center;
border-radius: 6px;
transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.atc-card .atc-product__remove:hover {
background: rgba(192, 57, 43, 0.08);
color: var(--c-error, #C0392B);
}
/* Подвинуть .atc-product__prices от правого края, чтобы крестик не накладывался на цену */
.atc-card .atc-product__prices { padding-right: 20px; }
:root {
/* Layout — fluid-with-cap.
iter-05 (2026-05-28): cap 1820→1368px, gutter 50→32px (ozon.ru parity).
Убирает «бесконечное растягивание» слайдера/линий и выход лого/меню/корзины
за края (правки заказчика #7, #8). content = min(100vw − 2×gutter, --layout-max).
Desktop only — mobile_v2 uses 16px gutter, no cap needed (320-414). */
--layout-max: 1560px; /* iter-06: 1368 → 1560 (ozon-like). Was iter-05 cap. */
--layout-gutter: 32px;
/* Type scale */
--fs-h1: 40px; --lh-h1: 1.15; --ls-h1: -0.01em;
--fs-h2: 30px; --lh-h2: 1.2; --ls-h2: -0.01em;
--fs-h3: 22px; --lh-h3: 1.25;
--fs-h4: 18px; --lh-h4: 1.3;
/* Compensated Onest scale (BLOCKER D, mini-rev-10, 2026-05-22):
Onest x-height ≈0.70em vs Inter ≈0.73em — same px reads visually smaller.
+1px compensation per DESIGN_SYSTEM §Типографика «Onest visual compensation» rule.
h-scale (Bitter) unchanged — slab serif does not exhibit this issue. */
--fs-body: 17px; --lh-body: 1.55; /* iter-06: 16 → 17 (reading bump) */
--fs-sm: 15px; --lh-sm: 1.5; /* iter-06: 14 → 15 */
--fs-xs: 12px; --lh-xs: 1.4; /* iter-06: 12 (min caption — без изменения) */
/* Spacing scale (base 4) */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
/* Radii — iter-15 (2026-06-08, Owner unified scale).
Правило дизайн-системы: ВСЕ контейнеры/карточки/тайлы/панели → --r-card (12px).
--r-input для текстовых inputs/select'ов (8px). --r-pill для CTA + circles.
Остальные исторические токены (--r-sm/-md/-lg/-xl) override'нуты на 12px
чтобы legacy CSS использующее их визуально совпадало с новым дизайном. */
--r-input: 8px;
--r-card: 12px;
--r-sm: 12px; /* iter-15 override: было 6px → унифицируем с card */
--r-md: 12px; /* iter-15 override: было 10px → унифицируем */
--r-lg: 12px; /* iter-15 override: было 16px → унифицируем */
--r-xl: 12px; /* iter-15 override: было 24px → унифицируем */
--r-pill: 999px;
/* Shadows */
--sh-sm: 0 1px 2px rgba(31,45,61,.06);
--sh-md: 0 4px 14px rgba(31,45,61,.08);
--sh-lg: 0 12px 32px rgba(31,45,61,.12);
/* Motion */
--dur-fast: 150ms;
--dur-base: 220ms;
--dur-slow: 360ms;
--ease-out: cubic-bezier(.2,.7,.2,1);
/* Z-index */
--z-sticky: 50;
--z-dropdown: 60;
--z-overlay: 80;
--z-modal: 90;
}
/* Apply compensated body token — BLOCKER D (mini-rev-10)
styles_modern.css sets font-family on body but no font-size.
Explicit rule here applies --fs-body (now 16px) to body element. */
body {
font-size: var(--fs-body);
/* D6 fix 2026-05-23: line-height was 1.25 (20px at 16px base) — too tight for body text.
Target per spec D6: 1.5 → 24px. styles.css:110 sets font-family:Roboto (no line-height),
styles_modern.css:134 sets font-family:Onest (no line-height). Override here. */
line-height: 1.5;
}
/* ════════════════════════════════════════════════════
D6. Site-wide typography pass (2026-05-23)
Targets: menu font-family (Roboto→Onest), filter labels (Helvetica→Onest),
menu font-size (15→16px), info-bar font-size (12→13px),
v2-filter__title line-height (1.0→1.2).
Root: styles.css:112 body { font-family: Roboto } + legacy Helvetica on inputs.
════════════════════════════════════════════════════ */
/* Main nav — force Onest font-family + bump 15→16px */
.menu,
.menu *,
.menu__item,
.header__content .menu .menu__item {
font-family: var(--ff-body) !important; /* override styles.css Roboto */
}
.header__content .menu .menu__item {
font-size: 16px !important; /* was 15px (styles_modern.css:233) */
}
/* Header search input — force Onest */
.header__search input,
.header__search .this__input {
font-family: var(--ff-body) !important;
}
/* Filter labels — override legacy Helvetica Neue + bump to 14px
D6 debug: .filter-text are INPUT elements (price min/max), labels have class .title.
font-family OK (Onest already inherited), but font-size 13px remains on inputs.
Root: styles.css:101 input { font: 99% sans-serif } → need explicit !important override. */
.products-filter,
.products-filter * {
font-family: var(--ff-body) !important;
}
.products-filter input,
.products-filter input[type="text"],
.products-filter input[type="number"],
.products-filter .filter-text {
font-size: var(--fs-sm) !important; /* 14px — override styles.css 99%/13px */
line-height: 1.45 !important;
}
/* Filter section labels (Цена, Размер, Высота...) — 10px → 14px */
.products-filter label,
.products-filter label.title {
font-size: var(--fs-sm) !important; /* 14px — was 10px */
font-family: var(--ff-body) !important;
line-height: 1.45 !important;
}
/* iter-05: info-bar свёрнут в главную строку — старое правило размера удалено
(стили шапки теперь в styles_modern.css §iter-05 HEADER, глобально). */
/* Filter title — fix tight line-height (1.0→1.2) */
.v2-filter__title {
line-height: 1.2 !important; /* was ~24/23=1.04 — too tight */
}
/* ════════════════════════════════════════════════════
LAYOUT SYSTEM — fluid-with-cap (BLOCKER F §4.0, 2026-05-22)
Two permitted patterns — no other layout-width patterns allowed.
DESIGN_SYSTEM «Layout-стандарт»:
.v2-container — fluid-with-cap content wrapper
.v2-band — full-bleed bg strip + .v2-container inside for content
════════════════════════════════════════════════════ */
/* .v2-container — fluid-with-cap (iter-05: cap 1368, gutter 32):
viewport ≤ ~1432 → content = 100vw − 64px (fluid, tянется)
viewport > ~1432 → content caps at 1368px, centered (боковые поля растут)
content = min(100vw − 2×32px, 1368px) centered (ozon.ru parity). */
.v2-container {
max-width: var(--layout-max); /* 1820px — cap */
margin-inline: auto; /* center after cap */
padding-inline: var(--layout-gutter); /* 50px — боковой gutter */
box-sizing: border-box;
}
/* .v2-band — full-bleed bg strip (bg/border to viewport edges).
Content ALWAYS inside nested .v2-container — never edge-to-edge. */
.v2-band {
/* bg/border applied per-component via modifier or descendant rules */
}
/* iter-28 (2026-06-15): generic v2 page wrapper — для модулей без собственного
layout (account/articles/contacts/news/static/etc). Минимальный padding для
дыхания между hv2-header и hv2-footer. Внутренний content остаётся legacy. */
.v2-page {
/* Owner 2026-06-29: убран верхний «зазор» (был --sp-6=32) — крошки/H1 generic
встают на линию сайдбара (как на каталоге). Нижний отступ сохранён. */
padding-block: 0 var(--sp-8, 48px);
min-height: 320px;
}
/* ════════════════════════════════════════════════════
BUTTON SYSTEM (§7 of spec)
════════════════════════════════════════════════════ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
height: 44px;
padding: 0 var(--sp-5);
border-radius: var(--r-card);
font-family: var(--ff-body);
font-size: var(--fs-body);
font-weight: 600;
line-height: 1;
letter-spacing: 0.01em;
text-decoration: none;
cursor: pointer;
border: none;
transition:
background var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out);
}
.btn:focus-visible {
outline: 2px solid var(--c-blue);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.btn { transition: none; }
}
/* Primary — orange CTA */
.btn.btn--primary {
background: var(--c-orange);
color: #fff;
}
.btn.btn--primary:hover,
.btn.btn--primary:focus-visible {
background: var(--c-orange-dk);
box-shadow: 0 4px 14px rgba(243,96,18,.35);
transform: translateY(-1px);
color: #fff;
}
.btn.btn--primary:focus-visible {
outline-color: var(--c-orange);
box-shadow: 0 0 0 3px rgba(243,96,18,.25);
transform: none;
}
/* Secondary — blue */
.btn.btn--secondary {
background: var(--c-blue);
color: #fff;
}
.btn.btn--secondary:hover {
background: var(--c-blue-dark);
box-shadow: 0 4px 14px rgba(14,148,200,.3);
transform: translateY(-1px);
color: #fff;
}
/* Outline */
.btn.btn--outline {
background: transparent;
border: 1.5px solid var(--c-blue);
color: var(--c-blue);
}
.btn.btn--outline:hover {
background: var(--c-blue-light);
}
/* Ghost */
.btn.btn--ghost {
background: transparent;
color: var(--c-text);
}
.btn.btn--ghost:hover {
background: var(--c-bg-soft);
}
/* Size variants */
.btn.btn--sm {
height: 36px;
padding: 0 var(--sp-4);
font-size: var(--fs-sm);
}
.btn.btn--lg {
height: 52px;
padding: 0 var(--sp-6);
font-size: var(--fs-h4);
}
/* Disabled */
.btn:disabled,
.btn[aria-disabled="true"] {
opacity: .5;
cursor: not-allowed;
pointer-events: none;
}
/* Full-width modifier */
.btn.btn--full { width: 100%; }
/* ════════════════════════════════════════════════════
SECTION RHYTHM (§8 of spec)
════════════════════════════════════════════════════ */
.v2-section {
margin-top: var(--sp-9);
margin-bottom: var(--sp-9);
}
/* Section head: h2 left + "all" link right */
.v2-section__head {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: var(--sp-6);
}
.v2-section__head h2,
.v2-section__head .v2-section__title {
font-family: var(--ff-display);
font-size: var(--fs-h2);
font-weight: 700;
line-height: var(--lh-h2);
letter-spacing: var(--ls-h2);
color: var(--c-text);
margin: 0;
}
.v2-section__all {
font-family: var(--ff-body);
font-size: var(--fs-sm);
font-weight: 500;
color: var(--c-blue);
text-decoration: none;
text-underline-offset: 4px;
white-space: nowrap;
}
.v2-section__all:hover {
text-decoration: underline;
color: var(--c-blue);
}
/* ════════════════════════════════════════════════════
HEADER — info bar + sticky main row (§4.1)
════════════════════════════════════════════════════ */
/* BUG-01 fix 2: sticky applied to .header_wrapper — direct child of #container.
Root cause verified via Playwright: all ancestors have overflow:visible, so the
issue is that the containing block of the sticky element is too small (196px).
CSS sticky can only hold the element within its containing block. When the
containing block scrolls fully out of viewport, the sticky element goes with it.
Fix: apply sticky to .header_wrapper (direct child of #container ~6920px tall).
The wrapper now sticks for the entire page scroll duration. */
.header_wrapper {
/* Owner 2026-06-29: большой хедер «прилеплен к топу страницы» — НЕ sticky к
вьюпорту. position:relative → уезжает вместе со страницей при скролле, виден
только у самого верха; роль sticky на скролле берёт мини-полоса (#hv2-sticky-bar). */
position: relative;
z-index: var(--z-sticky);
}
/* .header_bg — no longer sticky, just full-width chrome.
iter-05 #3: border-bottom убран (full-width линия торчала за слайдер). */
.header_bg {
background: var(--c-white) !important;
border-bottom: 0 !important;
box-shadow: none !important;
transition: box-shadow var(--dur-fast) var(--ease-out);
}
/* is-stuck: add shadow to entire stuck header */
.header_wrapper.is-stuck .header_bg {
box-shadow: var(--sh-md) !important;
}
/* ════════ 7 (Owner 2026-06-27): STICKY сжатая полоса + auto-hide хедера ════════ */
/* При скролле вниз основной хедер уезжает вверх (.is-hidden), появляется полоса. */
.header_wrapper { transition: transform .25s var(--ease-out); will-change: transform; }
.header_wrapper.is-hidden { transform: translateY(-100%); }
.hv2-sticky-bar {
position: fixed; top: 0; left: 0; right: 0; z-index: 60;
background: #fff; border-bottom: 1px solid var(--c-border); box-shadow: var(--sh-md);
transform: translateY(-100%); transition: transform .25s var(--ease-out);
will-change: transform;
}
.hv2-sticky-bar.is-shown { transform: translateY(0); }
.hv2-sticky-bar__inner {
display: flex; align-items: center; gap: var(--sp-4);
min-height: 56px; padding-block: 8px;
}
/* lead (лого+Каталог) = ширина лого-колонки осн. хедера (260) → поиск полосы
стартует с той же вертикали, что и основной поиск (Owner 2026-06-27). */
.hv2-sticky-bar__lead { flex: none; box-sizing: border-box; width: 268px; padding-left: 20px; display: flex; align-items: center; gap: 14px; }
.hv2-sticky-bar__logo { flex: none; display: inline-flex; }
.hv2-sticky-bar__logo img { display: block; height: 30px; width: auto; }
.hv2-sticky-bar__catalog {
flex: none; display: inline-flex; align-items: center; gap: 6px;
background: var(--c-blue); color: #fff; border: 0; border-radius: var(--r-input);
padding: 9px 14px; cursor: pointer; font: 600 14px/1 var(--ff-body); white-space: nowrap;
}
.hv2-sticky-bar__catalog:hover { background: var(--c-blue-dark); }
/* Owner 2026-06-27 #95: поиск кончается так, чтобы регион (Алматы) лёг на линию
«Жёсткость» фильтра. lead = 268 + gap 16 = 284 (лого-колонка); пост-lead =
фильтр-контент; поиск = половина − 4 → регион (gap 16 после) на center+12. */
.hv2-sticky-bar__search { flex: 0 1 calc((100% - 284px) / 2 - 4px); min-width: 150px; height: 40px; }
.hv2-sticky-bar__region {
flex: none; display: inline-flex; align-items: center; gap: 5px;
color: var(--c-text); cursor: pointer; font-size: 13px; line-height: 1.1; white-space: nowrap;
}
.hv2-sticky-bar__region svg { color: var(--c-blue); flex: none; }
.hv2-sticky-bar__lang { flex: none; display: inline-flex; gap: 4px; align-items: center; font-size: 13px; }
.hv2-sticky-bar__lang .hv2-action--lang__opt { color: var(--c-text-2); text-decoration: none; }
.hv2-sticky-bar__lang .hv2-action--lang__opt.is-active { color: var(--c-blue); font-weight: 700; }
.hv2-sticky-bar__lang .hv2-action--lang__sep { color: var(--c-border); }
/* 1 (Owner 2026-06-27): телефоны в полосе — крупнее (15px) и В ЛИНИЮ (в ряд). */
/* #95 п.6: телефоны+звонок+корзина — вправо к краю (margin-left:auto на телефонах,
группа уезжает к правому краю; у корзины auto убран). */
.hv2-sticky-bar__phones { flex: none; margin-left: auto; display: flex; flex-direction: row; align-items: center; gap: 16px; font-size: 15px; line-height: 1.25; white-space: nowrap; }
.hv2-sticky-bar__phones a { color: var(--c-text); font-weight: 700; text-decoration: none; font-size: 15px; }
.hv2-sticky-bar__call { flex: none; background: none; border: 0; padding: 0; color: var(--c-blue); cursor: pointer; font: 600 13px/1 var(--ff-body); white-space: nowrap; }
.hv2-sticky-bar__call:hover { text-decoration: underline; }
/* 2 (Owner 2026-06-27): корзина — к правому краю полосы. */
.hv2-sticky-bar__cart { flex: none; position: relative; color: var(--c-text); display: inline-flex; align-items: center; }
.hv2-sticky-bar__cart-count {
position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px;
border-radius: 999px; background: var(--c-orange); color: #fff;
font: 700 11px/18px var(--ff-body); text-align: center; padding: 0 4px; box-sizing: border-box;
}
.hv2-sticky-bar__cart-count.is_empty { display: none; }
@media (max-width: 1100px) {
.hv2-sticky-bar__region, .hv2-sticky-bar__lang { display: none; } /* компактнее на узких */
}
/* 7.2: Каталог в ЛЕВОЙ колонке — панель (позиция left/top из JS).
Owner 2026-06-27: overflow:visible — L3-флайаут (.hv2-cs__l3-flyout, absolute
left:100%) должен вылетать вправо мега-меню, НЕ обрезаться. Высота — по контенту
(L1+L2 список влезает в экран; у L3-флайаута свой внутренний скролл). */
.hv2-catalog-panel {
position: fixed; z-index: 70; width: 300px;
overflow: visible;
background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card);
box-shadow: var(--sh-lg); padding: 6px;
}
.hv2-catalog-panel[hidden] { display: none; }
.hv2-catalog-panel__foot { padding: 10px 12px; border-top: 1px solid var(--c-border-soft); margin-top: 4px; }
.hv2-catalog-panel__foot a { color: var(--c-blue); font-weight: 600; text-decoration: none; }
/* Старый поповер шапки заменён левой панелью (7.2). */
.hv2-nav__catalog-popover { display: none !important; }
.header__content {
/* RE-SPEC 2026-05-22 (BLOCKER F §4.1): max-width:1280 → fluid-with-cap --layout-max.
Header content выровнен по той же fluid-ширине, что весь контент главной.
D1 fix 2026-05-23: legacy styles.css:7294 sets width:99rem (~890px) → override with auto. */
width: auto;
max-width: var(--layout-max);
margin-inline: auto;
padding-inline: var(--layout-gutter);
box-sizing: border-box;
}
/* iter-05: шапка пересобрана в единую строку — info-bar / 2-row / search-pill /
cart-pill перенесены в styles_modern.css §iter-05 HEADER (глобально, все
страницы). Здесь оставлены только sticky-обёртка и контейнер выше. */
/* Compare icon — hidden by default when count = 0 */
.header__compare .is_empty + .this__text {
/* count-0: already handled by legacy .is_empty */
}
/* When compare list has items: show count badge */
.this__qty.is_empty {
display: none;
}
/* Sticky scroll listener — inline JS in header */
/* ════════════════════════════════════════════════════
MAIN GRID — homepage 2-col layout (§4.3 pivot, 2026-05-21)
sidebar 280px + content 1fr, gap 32px, container 1280px.
Overrides legacy float .container1 (990px) + #left-column (170px).
homepage module only — does not affect other pages.
════════════════════════════════════════════════════ */
/* Expand container to 1280px on homepage */
body.has-footer .container1.fixMinMaxWidth {
width: auto;
max-width: 1280px;
padding: 0 var(--sp-5); /* 24px sides */
}
/* Switch to CSS Grid for homepage main area */
body.has-footer .container1.fixMinMaxWidth:has(> #left-column + #main) {
display: grid;
grid-template-columns: 280px 1fr;
gap: var(--sp-6); /* 32px */
align-items: start;
padding-top: var(--sp-7); /* 48px from USP strip */
padding-bottom: var(--sp-8); /* 64px */
}
/* Reset float-based layout for homepage */
body.has-footer #left-column {
float: none;
width: auto;
position: static;
}
body.has-footer #main {
padding-left: 0 !important;
width: auto;
}
/* Mobile: single column, sidebar order:2 (after content) */
@media (max-width: 1024px) {
body.has-footer .container1.fixMinMaxWidth:has(> #left-column + #main) {
grid-template-columns: 1fr;
padding-top: var(--sp-6); /* 32px */
padding-inline: var(--sp-4); /* 16px */
}
body.has-footer #left-column {
order: 2; /* sidebar after content on mobile */
}
}
/* ════════════════════════════════════════════════════
SIDEBAR WIDGETS (§4.3.1 pivot, 2026-05-21)
v2-sidebar styling for hot_deals + news widgets.
════════════════════════════════════════════════════ */
#left-column {
background: var(--c-bg-soft);
border: 1px solid var(--c-border);
border-radius: var(--r-md);
padding: var(--sp-4); /* 18px ≈ var(--sp-4)=16px, close enough */
}
/* Sidebar block titles (covers both hot_deals and news) */
#left-column .sideHeader,
#left-column .side-block h2,
#left-column h3 {
font-family: var(--ff-display) !important;
font-size: 14px !important;
font-weight: 600 !important;
text-transform: uppercase;
letter-spacing: 0.8px;
color: var(--c-text) !important;
margin: 0 0 var(--sp-3) !important; /* 14px ≈ var(--sp-3)=12px */
}
/* ════════════════════════════════════════════════════
SIDEBAR (§4.3.1 RE-REVISION 2026-05-22, mini-rev-12)
catalog_sidebar_v2 is NOW rendered in .v2-sidebar on homepage (not in #left-column).
Blocking rule removed — cs-wrap must be visible on homepage.
(Legacy #left-column .cs-wrap rule removed: was hiding catalog_sidebar_v2,
was based on false premise "drop Каталог widget". Premise refuted: v2 top nav
has 0 categories, catalog menu is essential sidebar navigation.)
════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════
HERO RULES — OBSOLETE per Variant A pivot (2026-05-21)
v2-hero block deleted from index.html in iter-04(pivot).
Rules kept to avoid parse errors if cached HTML exists.
Cleanup backlog: remove after QA sign-off.
════════════════════════════════════════════════════ */
/* v2-hero rules preserved as dead code; no display side-effects
since .v2-hero element no longer exists in DOM. */
.v2-hero { display: none; }
/* Animation keyframes preserved (reused by v2-filter standalone below) */
@keyframes v2-fade-up {
to { opacity: 1; transform: none; }
}
/* ════════════════════════════════════════════════════
FILTER CARD STANDALONE (§4.3.2 pivot, 2026-05-21)
Replaces hero+filter. First block in .v2-content area.
Max-width 760px, centered. Uses existing products/filter.html.
Critical fix: chip-pill restyle (Designer step 8 issue #1).
════════════════════════════════════════════════════ */
.v2-filter {
/* D4 fix 2026-05-23: remove max-width:760px, fill full .v2-content column.
Old: 760px centered in 1408px content area → 324px dead space each side at 1820vp.
New: width:100% of parent .v2-content (868/1028/1408/1408px at 1280/1440/1820/2200vp). */
max-width: none;
width: 100%;
margin: 0 0 var(--sp-7); /* remove margin-inline auto — full width now */
background: var(--c-white);
border: 1px solid var(--c-border);
border-radius: var(--r-lg); /* 20px */
box-shadow: var(--sh-md);
padding: 28px 28px 24px; /* top/sides/bottom per §4.3.2 */
box-sizing: border-box;
}
.v2-filter__head {
text-align: center;
margin-bottom: 22px;
}
.v2-filter__title {
font-family: var(--ff-display) !important;
font-size: 24px !important;
font-weight: 500 !important;
color: var(--c-text) !important;
margin: 0 0 var(--sp-2) !important;
}
.v2-filter__sub {
font-family: var(--ff-body);
font-size: var(--fs-sm); /* 14px — reconciliation: was 13.5px → --fs-sm (BLOCKER D) */
font-weight: 400;
color: var(--c-text-2);
margin: 0;
line-height: 1.4;
}
/* Hide legacy filter title (replaced by .v2-filter__title) */
.v2-filter .centerHeader,
.v2-filter .center-block-filter > h2,
.v2-filter .center-block-filter > h3 {
display: none !important;
}
/* Remove legacy filter card border/shadow (we use .v2-filter card) */
.v2-filter .center-block-filter {
border: none !important;
box-shadow: none !important;
padding: 0 !important;
}
/* D4 fix 2026-05-23: products-filter-row grid inside v2-filter.
Override legacy flex row + 33% cols → auto-fill CSS grid.
On 868px (1280 vp): 3-4 cols. On 1408px (1820 vp): 5-6 cols. */
.v2-filter .products-filter-row {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
align-items: stretch !important;
border-bottom: 1px solid var(--c-border) !important;
background-color: transparent !important;
}
/* nth-child(2n) background — keep subtle alternating row within grid */
.v2-filter .products-filter-row:nth-child(2n) {
background: transparent !important;
}
.v2-filter .products-filter-col {
width: auto !important;
padding: 10px 16px !important;
box-sizing: border-box;
border-left: none !important;
border-right: none !important;
}
/* Keep separator borders between adjacent cols via :not(:first-child) */
.v2-filter .products-filter-col:not(:first-child) {
border-left: 1px solid var(--c-border) !important;
}
/* CTA — D4: cap width at 320px, center horizontally (was full-width on wide filter) */
.v2-filter__cta {
display: block !important;
max-width: 320px;
width: 100%;
margin-left: auto !important;
margin-right: auto !important;
padding: 14px var(--sp-5) !important;
font-family: var(--ff-body);
font-size: 15px;
font-weight: 600;
margin-top: 22px;
height: auto !important;
border-radius: var(--r-pill) !important;
}
/* CHIP-PILL RESTYLE — mini-rev-7 fix, §13 item 6 (§4.3.2) */
/* Real DOM: */
/* input is INSIDE label (not adjacent sibling) — :checked + label does NOT work */
/* Hide native checkbox visually (display:none breaks nothing: onchange fires on label click) */
.v2-filter .checkBlock__label input[type="checkbox"],
.v2-filter .checkBlock__label input[type="hidden"] {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* Pill default state */
.v2-filter .checkBlock__label {
display: inline-block;
border: 1px solid var(--c-border);
border-radius: var(--r-pill);
padding: 6px 14px;
font-family: var(--ff-body);
font-size: 12px;
font-weight: 500;
background: var(--c-white);
color: var(--c-text);
cursor: pointer;
margin: 0 4px 4px 0;
transition: border-color var(--dur-fast) var(--ease-out),
background var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out);
}
/* Active state: input inside label — use :has() */
.v2-filter .checkBlock__label:has(input[type="checkbox"]:checked) {
background: var(--c-blue-light);
border-color: var(--c-blue);
color: var(--c-blue-dark);
font-weight: 500;
}
/* Hover state */
.v2-filter .checkBlock__label:hover {
background: var(--c-bg-soft);
border-color: var(--c-text-2);
}
/* Focus ring */
.v2-filter .checkBlock__label:has(input[type="checkbox"]:focus-visible) {
outline: 2px solid var(--c-blue);
outline-offset: 2px;
}
/* RANGE SLIDER — v2 skin per §4.3.2 */
.v2-filter .ui-slider {
height: 8px;
background: var(--c-bg-soft);
border-radius: 99px;
border: 0;
position: relative;
margin: 14px 0;
}
.v2-filter .ui-slider .ui-slider-range {
background: var(--c-blue);
border-radius: 99px;
}
.v2-filter .ui-slider .ui-slider-handle {
width: 16px !important;
height: 16px !important;
background: var(--c-blue) !important;
border: 2px solid var(--c-white) !important;
border-radius: 50% !important;
box-shadow: var(--sh-sm) !important;
top: -4px;
}
.v2-filter .ui-slider .ui-slider-handle:hover {
transform: scale(1.1);
transition: transform var(--dur-fast) var(--ease-out);
}
/* Load animation: filter card fade-up per §4.3.2 */
@media (prefers-reduced-motion: no-preference) {
.v2-filter {
opacity: 0;
transform: translateY(8px);
animation: v2-fade-up var(--dur-base) var(--ease-out) 100ms forwards;
}
}
/* COLLAPSIBLE TOGGLE — D5 chevron-disclosure (2026-05-23)
Owner decision: filled-chevron ▾ (::before pseudo) + link text.
NOT a filled button, NOT plain underlined link.
catalog.js toggles .arrow-up / .arrow-down — CSS rotates chevron.
jQuery .text() replaces textContent only — CSS ::before is safe.
Placement: left edge of filter footer row (.float-left wrapper).
!important needed: styles_modern.css has #advanced-search-link { font-size:13px !important }
which wins without !important. Also min-width: fit-content forces full text render. */
.v2-filter #advanced-search-link,
.v2-filter .v2-filter__advanced-toggle {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 6px 0 !important; /* override styles_modern.css padding-left:16px */
font-family: var(--ff-body) !important;
font-size: var(--fs-sm) !important; /* 14px — override styles_modern.css 13px !important */
font-weight: 500 !important;
color: var(--color-link, #0177B4) !important; /* override styles_modern.css var(--c-blue) */
background: transparent !important;
border: 0 !important;
text-decoration: none !important;
cursor: pointer !important;
line-height: var(--lh-sm, 1.5) !important;
white-space: nowrap !important; /* single line always */
min-width: max-content !important; /* ensure full text renders */
min-height: 28px !important; /* guarantee visible click target (6+14+6+2px) */
width: auto !important;
margin: 0 !important; /* override styles_modern.css margin-left:0 */
box-sizing: border-box !important;
}
/* Chevron via ::before — filled downward triangle, rotates 180° when expanded */
.v2-filter #advanced-search-link::before,
.v2-filter .v2-filter__advanced-toggle::before {
content: "▾"; /* U+25BE SMALL BLACK DOWN-POINTING TRIANGLE */
font-size: 16px;
line-height: 1;
display: inline-block;
color: var(--color-link, #0177B4);
transition: transform 200ms ease;
transform: rotate(0deg); /* collapsed default */
}
/* Expanded state — catalog.js adds .arrow-up */
.v2-filter #advanced-search-link.arrow-up::before,
.v2-filter .v2-filter__advanced-toggle.arrow-up::before {
transform: rotate(180deg);
}
/* Focus ring */
.v2-filter #advanced-search-link:focus-visible,
.v2-filter .v2-filter__advanced-toggle:focus-visible {
outline: 2px solid var(--c-blue);
outline-offset: 2px;
border-radius: 2px;
}
/* Remove old arrow glyph via ::after (replaced by ::before chevron) */
.v2-filter #advanced-search-link::after,
.v2-filter .v2-filter__advanced-toggle::after {
content: none;
}
/* Hide legacy submit button inside content-inner2 (replaced by .v2-filter__cta).
Keep the toggle link (#advanced-search-link in .float-left) visible. */
.v2-filter .content-inner2 .float-right {
display: none;
}
/* Remove default content-inner2 padding/margin — toggle stands alone */
.v2-filter .content-inner2 {
margin: 0;
padding: 0;
}
.v2-filter .sv-search-params {
margin-top: 0 !important;
line-height: 1 !important;
}
/* iter-05 (2026-05-31): #sv-runtime-search снова показан — теперь это
внутри «Доступно X моделей» по vanilla parity (см. iter-04-filter.css .v2-filter__avail).
Старое правило display:none удалено — оно скрывало бы цифру внутри обёртки. */
/* ADVANCED ROWS ANIMATION — max-height + opacity CSS transition */
/* .hidden class = display:none via legacy CSS — keep working; catalog.js toggles it */
@media (prefers-reduced-motion: no-preference) {
.v2-filter .advanced-search {
transition:
opacity var(--dur-base) var(--ease-out),
max-height var(--dur-base) var(--ease-out);
overflow: hidden;
}
.v2-filter .advanced-search.hidden {
/* override display:none with opacity+max-height for transition */
display: block !important;
opacity: 0;
max-height: 0;
pointer-events: none;
}
.v2-filter .advanced-search:not(.hidden) {
opacity: 1;
max-height: 400px; /* safe upper bound */
}
}
/* MOBILE modifier: no shadow, single-col, full-width */
.v2-filter--mobile {
max-width: 100%;
margin: 0 var(--sp-4) var(--sp-6);
box-shadow: none;
padding: var(--sp-5); /* 20px */
}
.v2-filter--mobile .v2-filter__title {
font-size: 20px !important;
}
.v2-filter--mobile .v2-filter__cta {
height: 48px !important;
font-size: 15px;
}
/* ════════════════════════════════════════════════════
CATEGORY CARDS — DS hv2-cats-big / hv2-cat-big
iter-05 (2026-06-01): ported from library/components.css строки 1460-1497
+ .hv2-section__head / .hv2-section__link (строки 24-38).
Source-of-truth для разметки: src/templates/customer/mnogosna3_v2/homepage/cats.html.
Image mapping: BEM-модификатор .hv2-cat-big-- (Variant A,
Owner-approved 2026-06-01). Картинки в ../images/, как в legacy.
Card count data-driven — grid auto-wrap при росте $categories_menu.
Legacy .v2-cats* / .v2-cat-card* удалены (нет других потребителей; grep
подтверждён 2026-06-01).
════════════════════════════════════════════════════ */
.hv2-section { padding-block: var(--sp-7); }
.hv2-section__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--sp-5);
margin-bottom: var(--sp-5);
}
.hv2-section__head h2 {
font-family: var(--ff-display);
font-weight: 700;
font-size: 28px;
line-height: 1.2;
margin: 0;
color: var(--c-text);
}
.hv2-section__link {
color: var(--c-blue);
font: 500 14px/1 var(--ff-body);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
transition: color var(--dur-fast, 150ms) var(--ease-out);
}
.hv2-section__link:hover { color: var(--c-blue-dark); }
.hv2-cats-big {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-4);
}
/* iter-15 (2026-06-08): 4-col modifier для нового tile «Премиум матрасы».
На ширине <=1100px возвращаемся к 2-col grid (toppery + премиум переносятся). */
.hv2-cats-big--4col { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) {
.hv2-cats-big--4col { grid-template-columns: repeat(2, 1fr); }
}
.hv2-cat-big {
position: relative;
aspect-ratio: 4/3;
border-radius: var(--r-card);
overflow: hidden;
text-decoration: none;
color: var(--c-text);
display: flex;
align-items: flex-end;
background-color: var(--c-bg-soft);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: transform var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
}
.hv2-cat-big:hover {
transform: translateY(-3px);
box-shadow: var(--sh-md);
}
.hv2-cat-big:focus-visible {
outline: 2px solid var(--c-blue);
outline-offset: 2px;
}
.hv2-cat-big__bottom {
width: 100%;
padding: var(--sp-4) var(--sp-5);
background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,.94) 35%, #fff 100%);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
}
.hv2-cat-big__title {
font: 700 18px/1.2 var(--ff-display);
color: var(--c-text);
}
.hv2-cat-big__right {
display: flex;
align-items: center;
gap: var(--sp-3);
}
.hv2-cat-big__count {
/* iter-06 D15: UPPERCASE smallcaps → normal/sentence case + min 12px
(hard rule #11 captions ≥12px). Текст «60+ моделей» вместо «60+ МОДЕЛЕЙ». */
font: 600 12px/1.2 var(--ff-body);
color: var(--c-text-2);
}
.hv2-cat-big__chev {
width: 32px;
height: 32px;
border-radius: 999px;
background: var(--c-bg);
border: 1px solid var(--c-border);
display: flex;
align-items: center;
justify-content: center;
color: var(--c-text);
transition: background var(--dur-base) var(--ease-out),
color var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-out),
transform var(--dur-base) var(--ease-out);
flex: none;
}
.hv2-cat-big:hover .hv2-cat-big__chev {
background: var(--c-blue);
border-color: var(--c-blue);
color: #fff;
transform: translateX(2px);
}
/* Image mapping per eng_name (BEM modifier).
iter-23 (2026-06-15): hero-карты 4-tile перешли на новые ассеты cat-.jpg
(1× 372×279) + cat--2x.jpg (2× 744×558). Старые matras_/baby_ остаются
в репозитории для других страниц. */
.hv2-cat-big--matrasy { background-image: url('../images/cat-vzroslye.jpg'); background-image: image-set(url('../images/cat-vzroslye.webp') type('image/webp'), url('../images/cat-vzroslye.jpg') type('image/jpeg')); }
.hv2-cat-big--premium { background-image: url('../images/cat-premium.jpg'); background-image: image-set(url('../images/cat-premium.webp') type('image/webp'), url('../images/cat-premium.jpg') type('image/jpeg')); }
.hv2-cat-big--detskie-matrasi,
.hv2-cat-big--detskie-matrasy { background-image: url('../images/cat-detskie.jpg'); background-image: image-set(url('../images/cat-detskie.webp') type('image/webp'), url('../images/cat-detskie.jpg') type('image/jpeg'));
/* Owner 2026-06-27: фото детей — широкое, дети разнесены по бокам; на портретном
тайле (8:9) `cover` обрезал то мальчика, то девочку. Уменьшаем зум до 165% по
ширине → ОБА ребёнка целиком в кадре; белый фон заполняет края (сливается с
белым фоном фото). Проверено @1440/1680/1920 — оба не обрезаны. */
background-size: 165% auto;
background-position: center;
background-color: #fff; }
.hv2-cat-big--toppery { background-image: url('../images/cat-toppery.jpg'); background-image: image-set(url('../images/cat-toppery.webp') type('image/webp'), url('../images/cat-toppery.jpg') type('image/jpeg')); }
@media (min-resolution: 1.5dppx) {
.hv2-cat-big--matrasy { background-image: url('../images/cat-vzroslye-2x.jpg'); background-image: image-set(url('../images/cat-vzroslye-2x.webp') type('image/webp'), url('../images/cat-vzroslye-2x.jpg') type('image/jpeg')); }
.hv2-cat-big--premium { background-image: url('../images/cat-premium-2x.jpg'); background-image: image-set(url('../images/cat-premium-2x.webp') type('image/webp'), url('../images/cat-premium-2x.jpg') type('image/jpeg')); }
.hv2-cat-big--detskie-matrasi,
.hv2-cat-big--detskie-matrasy { background-image: url('../images/cat-detskie-2x.jpg'); background-image: image-set(url('../images/cat-detskie-2x.webp') type('image/webp'), url('../images/cat-detskie-2x.jpg') type('image/jpeg')); }
.hv2-cat-big--toppery { background-image: url('../images/cat-toppery-2x.jpg'); background-image: image-set(url('../images/cat-toppery-2x.webp') type('image/webp'), url('../images/cat-toppery-2x.jpg') type('image/jpeg')); }
}
/* Прочие модификаторы (krovati/podushki/...) — без изменений. */
.hv2-cat-big--krovati { background-image: url('../images/krovat.jpg'); }
.hv2-cat-big--podushki { background-image: url('../images/pillow.jpg'); }
.hv2-cat-big--namatrasniki { background-image: url('../images/namatr.jpg'); }
.hv2-cat-big--osnovaniya { background-image: url('../images/osnovaniya.jpg'); }
.hv2-cat-big--divany { background-image: url('../images/divany.jpg'); }
.hv2-cat-big--odeyala {
background-image: linear-gradient(135deg, rgba(14,148,200,0.15), rgba(14,148,200,0.30));
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.hv2-cat-big,
.hv2-cat-big__chev {
transition: none;
}
.hv2-cat-big:hover { transform: none; box-shadow: none; }
.hv2-cat-big:hover .hv2-cat-big__chev { transform: none; }
}
@media (max-width: 900px) {
.hv2-cats-big { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.hv2-cats-big { grid-template-columns: 1fr; }
}
/* ════════════════════════════════════════════════════
FEATURED PRODUCTS (§4.4)
════════════════════════════════════════════════════ */
.v2-featured {
margin: var(--sp-9) 0;
}
.v2-featured__head {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: var(--sp-6);
}
.v2-featured__head h2 {
font-family: var(--ff-display) !important;
font-size: var(--fs-h2) !important;
font-weight: 700 !important;
line-height: var(--lh-h2) !important;
color: var(--c-text) !important;
margin: 0 !important;
}
.v2-featured__all {
font-family: var(--ff-body);
font-size: var(--fs-sm);
font-weight: 500;
color: var(--c-blue);
text-decoration: none;
}
.v2-featured__all:hover { text-decoration: underline; }
.v2-featured__grid {
display: grid;
/* RE-SPEC 2026-05-22 (BLOCKER F — §4.5 fluid, §4.0.4 grid adaptivity):
repeat(4,1fr) → auto-fill minmax(260px,1fr). На fluid content-колонке:
660px→2 кол., ~800px→3, ~1080px→4, ~1400px→5. Карточка 260…310px (§4.0.4). */
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: var(--sp-5); /* 24px */
justify-content: start; /* если CBlock < числа колонок — не растягивать ряд */
}
/* ════════════════════════════════════════════════════
PRODUCT CARD (§4.10)
════════════════════════════════════════════════════ */
article.v2-product {
background: var(--c-white);
border: 1px solid var(--c-border);
border-radius: var(--r-md);
overflow: hidden;
transition:
transform var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-out);
}
article.v2-product:hover {
transform: translateY(-4px);
box-shadow: var(--sh-md);
border-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
article.v2-product { transition: box-shadow var(--dur-base); }
article.v2-product:hover { transform: none; }
}
a.v2-product__link {
display: block;
text-decoration: none;
color: inherit;
}
/* Media: 1:1 aspect-ratio */
.v2-product__media {
aspect-ratio: 1 / 1;
background: var(--c-bg-soft);
overflow: hidden;
position: relative;
}
.v2-product__media img,
.v2-product__media picture img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform var(--dur-slow) var(--ease-out);
}
article.v2-product:hover .v2-product__media img {
transform: scale(1.03);
}
@media (prefers-reduced-motion: reduce) {
article.v2-product:hover .v2-product__media img { transform: none; }
}
/* Badges (top-left) */
.v2-product__badges {
position: absolute;
top: var(--sp-3);
left: var(--sp-3);
display: flex;
flex-direction: column;
gap: 4px;
}
.v2-badge {
font-family: var(--ff-body);
font-size: var(--fs-xs);
font-weight: 700;
color: #fff;
padding: 2px 8px;
border-radius: var(--r-sm);
line-height: 1.4;
}
.v2-badge--sale { background: var(--c-orange); }
.v2-badge--hit,
.v2-badge--new { background: var(--c-blue); }
/* Wishlist button (top-right) */
button.v2-product__wish {
position: absolute;
top: var(--sp-3);
right: var(--sp-3);
width: 36px;
height: 36px;
border-radius: var(--r-pill);
background: rgba(255,255,255,.9);
backdrop-filter: blur(8px);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background var(--dur-fast);
}
button.v2-product__wish:hover { background: rgba(255,255,255,1); }
button.v2-product__wish svg {
width: 16px;
height: 16px;
color: var(--c-text-2);
}
button.v2-product__wish.active svg { color: var(--c-orange); }
/* Product body */
.v2-product__body {
padding: var(--sp-4);
}
.v2-product__brand {
font-family: var(--ff-body);
font-size: var(--fs-xs);
font-weight: 600;
font-variant: small-caps;
letter-spacing: 0.08em;
color: var(--c-text-2);
margin-bottom: var(--sp-2);
}
h3.v2-product__name {
font-family: var(--ff-body) !important;
font-size: 14px !important;
font-weight: 600 !important;
color: var(--c-text) !important;
line-height: 1.4 !important;
margin: 0 0 var(--sp-2) !important;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.v2-product__rating {
display: flex;
align-items: center;
gap: 4px;
font-family: var(--ff-body);
font-size: var(--fs-xs);
color: var(--c-text-2);
margin-bottom: var(--sp-2);
}
.v2-product__rating svg {
width: 12px;
height: 12px;
fill: var(--c-orange);
}
.v2-product__specs {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-bottom: var(--sp-3);
}
.v2-spec-chip {
font-family: var(--ff-body);
font-size: var(--fs-xs);
font-weight: 500;
color: var(--c-text-2);
border: 1px solid var(--c-border);
border-radius: var(--r-sm);
padding: 2px 8px;
}
/* Buy row */
.v2-product__buy {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--sp-2);
margin-top: var(--sp-3);
}
.v2-product__price {
display: flex;
flex-direction: column;
gap: 2px;
}
.v2-product__price--now {
font-family: var(--ff-body);
font-size: 18px;
font-weight: 700;
color: var(--c-text);
line-height: 1.2;
}
.v2-product__price--old {
font-family: var(--ff-body);
font-size: var(--fs-xs);
font-weight: 400;
color: var(--c-text-2);
text-decoration: line-through;
}
/* ════════════════════════════════════════════════════
PROMO BLOCKS — 2-up (§4.5)
════════════════════════════════════════════════════ */
.v2-promo {
margin: var(--sp-9) 0;
}
.v2-promo__grid {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 24px;
}
a.v2-promo__card {
display: block;
min-height: 320px;
border-radius: var(--r-lg);
padding: var(--sp-6);
text-decoration: none;
position: relative;
overflow: hidden;
transition:
transform var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
}
a.v2-promo__card:hover {
transform: translateY(-3px);
box-shadow: var(--sh-lg);
text-decoration: none;
}
a.v2-promo__card:focus-visible {
outline: 3px solid #fff;
outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
a.v2-promo__card { transition: box-shadow var(--dur-base); }
a.v2-promo__card:hover { transform: none; }
}
/* Radial decoration overlay */
a.v2-promo__card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 80% 30%, rgba(255,255,255,.12), transparent 50%);
pointer-events: none;
}
a.v2-promo__card--blue {
background: linear-gradient(135deg, #0E94C8 0%, #0877A8 100%);
color: #fff;
}
a.v2-promo__card--orange {
background: linear-gradient(135deg, #F36012 0%, #D95208 100%);
color: #fff;
}
.v2-promo__tag {
display: inline-block;
background: rgba(255,255,255,.9);
border-radius: var(--r-card);
font-family: var(--ff-body);
font-size: var(--fs-xs);
font-weight: 600;
padding: 4px 10px;
margin-bottom: var(--sp-4);
}
.v2-promo__card--blue .v2-promo__tag { color: var(--c-blue-dark); }
.v2-promo__card--orange .v2-promo__tag { color: var(--c-orange-dk); }
h3.v2-promo__title {
font-family: var(--ff-display) !important;
font-size: 26px !important;
font-weight: 700 !important;
color: #fff !important;
margin: 0 0 var(--sp-4) !important;
line-height: 1.2 !important;
}
p.v2-promo__sub {
font-family: var(--ff-body);
font-size: var(--fs-body);
font-weight: 400;
color: rgba(255,255,255,.85);
max-width: 380px;
line-height: 1.5;
margin: 0 0 var(--sp-5);
}
.v2-promo__cta {
/* iter-06: убран opacity:.9 на тексте — заменён на color rgba для устранения
"грязного" tint'а на мелком кегле (hard rule #11). Hover → solid #fff. */
display: inline-block;
font-family: var(--ff-body);
font-size: var(--fs-sm);
font-weight: 600;
color: rgba(255,255,255,0.92);
}
.v2-promo__card:hover .v2-promo__cta { color: #fff; }
/* ════════════════════════════════════════════════════
REVIEWS — 3-card static skeleton (§4.6)
════════════════════════════════════════════════════ */
.v2-reviews {
margin: var(--sp-9) 0;
}
.v2-reviews__head {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: var(--sp-6);
}
.v2-reviews__head h2 {
font-family: var(--ff-display) !important;
font-size: var(--fs-h2) !important;
font-weight: 700 !important;
color: var(--c-text) !important;
margin: 0 !important;
}
.v2-reviews__all {
font-family: var(--ff-body);
font-size: var(--fs-sm);
font-weight: 500;
color: var(--c-blue);
text-decoration: none;
}
.v2-reviews__all:hover { text-decoration: underline; }
.v2-reviews__grid {
display: grid;
/* §4.0.4 / §4.6: 3 reviews — семантически фикс. число → repeat(3,1fr).
Cap не нужен — текстовая карточка до ~450px читается комфортно. */
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-5); /* 24px */
}
/* §4.0.4 схлопывание: content-колонка ≤900px → 2-col; ≤600px → 1-col */
@media (max-width: 900px) {
.v2-reviews__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.v2-reviews__grid { grid-template-columns: 1fr; }
}
article.v2-review {
background: var(--c-white);
border: 1px solid var(--c-border);
border-radius: var(--r-md);
padding: var(--sp-6);
display: flex;
flex-direction: column;
gap: var(--sp-3);
}
.v2-review__head {
display: flex;
align-items: center;
gap: var(--sp-3);
}
.v2-review__avatar {
width: 44px;
height: 44px;
border-radius: var(--r-pill);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--ff-body);
font-size: 18px;
font-weight: 700;
flex-shrink: 0;
}
/* Three-color rotation */
article.v2-review:nth-child(1) .v2-review__avatar {
background: var(--c-blue-light);
color: var(--c-blue-dark);
}
article.v2-review:nth-child(2) .v2-review__avatar {
background: #FFF4E5;
color: #B45309;
}
article.v2-review:nth-child(3) .v2-review__avatar {
background: #E8F5E9;
color: #2E7D32;
}
.v2-review__name {
font-family: var(--ff-body);
font-size: var(--fs-body);
font-weight: 600;
color: var(--c-text);
}
.v2-review__date {
font-family: var(--ff-body);
font-size: var(--fs-xs);
font-weight: 400;
color: var(--c-text-2);
}
.v2-review__stars {
display: flex;
gap: 2px;
}
.v2-review__stars svg,
.v2-review__stars .v2-review__star {
width: 16px;
height: 16px;
fill: var(--c-orange);
}
/* SVG path inherits fill from parent SVG via CSS (overrides fill="currentColor" attr) */
.v2-review__stars .v2-review__star path {
fill: var(--c-orange);
}
.v2-review__stars .v2-review__star--off {
fill: var(--c-border);
}
.v2-review__stars .v2-review__star--off path {
fill: var(--c-border);
}
/* P1-R-3 fix: override footer:not(.prefooter) global navy bg + border from styles_modern.css */
footer.v2-review__product {
background: transparent !important;
background-color: transparent !important;
color: inherit !important;
border-top: 1px dashed var(--c-border) !important;
}
footer.v2-review__product a,
footer.v2-review__product a:link,
footer.v2-review__product a:visited {
color: var(--c-blue) !important;
}
blockquote.v2-review__body {
font-family: var(--ff-body);
font-size: 14px;
font-weight: 400;
color: var(--c-text);
line-height: 1.6;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
footer.v2-review__product {
border-top: 1px dashed var(--c-border);
padding-top: var(--sp-3);
margin-top: auto;
}
footer.v2-review__product a {
font-family: var(--ff-body);
font-size: var(--fs-sm);
font-weight: 500;
color: var(--c-blue);
text-decoration: none;
}
footer.v2-review__product a:hover { text-decoration: underline; }
/* ════════════════════════════════════════════════════
BRANDS STRIP (§4.7)
════════════════════════════════════════════════════ */
.v2-brands {
background: var(--c-bg-soft);
margin: var(--sp-7) 0;
padding: var(--sp-6) 0;
}
.v2-brands__inner {
/* RE-SPEC 2026-05-22 (BLOCKER F — FLUID §4.7):
max-width:1280px → fluid-with-cap .v2-container (класс добавлен в brands_list.html).
Rules here kept for specificity fallback; class .v2-container carries the actual values. */
max-width: var(--layout-max);
margin-inline: auto;
padding-inline: var(--layout-gutter);
box-sizing: border-box;
}
.v2-brands__label {
font-family: var(--ff-body);
font-size: var(--fs-sm);
font-weight: 500;
color: var(--c-text-2);
margin-bottom: var(--sp-4);
}
.v2-brands__list {
display: flex;
flex-wrap: wrap;
gap: var(--sp-6); /* 32px */
align-items: center;
justify-content: center;
/* §4.0.4: марки НЕ растягиваются — без flex-grow. На широком экране
2-6 марок группируются по центру, свободное пространство — пустые поля. */
}
a.v2-brand {
font-family: var(--ff-display);
font-size: 22px;
font-weight: 700;
font-variant: small-caps;
letter-spacing: 0.02em;
color: var(--c-text-2);
text-decoration: none;
filter: grayscale(1) opacity(.55);
transition:
color var(--dur-base) var(--ease-out),
filter var(--dur-base) var(--ease-out);
}
a.v2-brand:hover {
color: var(--c-blue);
filter: none;
text-decoration: none;
}
a.v2-brand:focus-visible {
outline: 2px solid var(--c-blue);
outline-offset: 2px;
}
/* Null-img graceful fallback (§4.7, 2026-05-21) */
/* If brand has image — logo img */
.v2-brand__logo {
display: block;
max-width: 120px;
height: 40px;
width: auto;
object-fit: contain;
filter: grayscale(1) opacity(.55);
transition: filter var(--dur-base) var(--ease-out);
}
a.v2-brand:hover .v2-brand__logo {
filter: none;
}
/* If brand has no image — Bitter smallcaps text mark */
.v2-brand__text {
font-family: var(--ff-display);
font-size: 22px;
font-weight: 700;
font-variant: small-caps;
letter-spacing: 0.02em;
/* color and filter inherited from a.v2-brand */
}
/* ════════════════════════════════════════════════════
ARTICLES — P1 fix: responsive + 16:9 (§4.8)
════════════════════════════════════════════════════ */
.v2-articles {
/* RE-SPEC 2026-05-22 (BLOCKER F — FLUID §4.8, корень Owner articles-жалобы):
Блок получает .v2-container в HTML (fluid-with-cap, max-width 1820px).
margin:96px 0 → margin-block:var(--sp-9) чтобы не перетирать margin-inline:auto
от .v2-container. Articles теперь тянутся ровно как остальной контент. */
margin-block: var(--sp-9);
}
.v2-articles__head {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: var(--sp-6);
}
.v2-articles__head h2 {
font-family: var(--ff-display) !important;
font-size: var(--fs-h2) !important;
font-weight: 700 !important;
color: var(--c-text) !important;
margin: 0 !important;
}
.v2-articles__all {
font-family: var(--ff-body);
font-size: var(--fs-sm);
font-weight: 500;
color: var(--c-blue);
text-decoration: none;
}
.v2-articles__all:hover { text-decoration: underline; }
.v2-articles__grid {
display: grid;
/* §4.0.4 / §4.8: 3 статьи — фикс. repeat(3,1fr). media aspect-ratio:16/9
растёт пропорционально ширине карточки — «сохранив пропорции» (Owner). */
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-6); /* 32px */
}
/* §4.0.4 схлопывание: ≤900px → 2-col; ≤600px → 1-col vertical stack */
@media (max-width: 900px) {
.v2-articles__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.v2-articles__grid { grid-template-columns: 1fr; }
}
article.v2-article {
display: flex;
flex-direction: column;
}
a.v2-article__link {
display: block;
text-decoration: none;
color: inherit;
}
a.v2-article__link:hover { text-decoration: none; }
/* 16:9 aspect-ratio media container */
.v2-article__media {
aspect-ratio: 16 / 9;
border-radius: var(--r-md);
overflow: hidden;
background: var(--c-bg-soft);
position: relative;
margin-bottom: var(--sp-3);
}
.v2-article__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform var(--dur-slow) var(--ease-out);
}
a.v2-article__link:hover .v2-article__media img {
transform: scale(1.03);
}
@media (prefers-reduced-motion: reduce) {
a.v2-article__link:hover .v2-article__media img { transform: none; }
}
.v2-article__kicker {
font-family: var(--ff-body);
font-size: var(--fs-xs);
font-weight: 600;
text-transform: uppercase;
font-variant: small-caps;
letter-spacing: 0.08em;
color: var(--c-text-2);
margin-bottom: var(--sp-2);
}
h3.v2-article__title {
font-family: var(--ff-display) !important;
font-size: 18px !important;
font-weight: 600 !important;
color: var(--c-text) !important;
line-height: 1.3 !important;
margin: 0 0 var(--sp-2) !important;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color var(--dur-fast);
}
a.v2-article__link:hover h3.v2-article__title {
color: var(--c-blue) !important;
}
p.v2-article__excerpt {
font-family: var(--ff-body);
font-size: 14px;
color: var(--c-text-2);
line-height: 1.5;
margin: 0 0 var(--sp-3);
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
span.v2-article__more {
font-family: var(--ff-body);
font-size: var(--fs-sm);
font-weight: 500;
color: var(--c-blue);
display: inline-flex;
align-items: center;
gap: 4px;
transition: color var(--dur-fast);
}
/* iter-04(p1-a1): hover underline + focus-visible ring */
a.v2-article__link:hover span.v2-article__more {
color: var(--c-blue-dark, #0e5fa8);
text-decoration: underline;
text-underline-offset: 2px;
}
a.v2-article__link:focus-visible span.v2-article__more {
outline: 2px solid var(--c-blue);
outline-offset: 2px;
border-radius: 2px;
}
/* ════════════════════════════════════════════════════
WHY-US BAND — D9 fix 2026-05-23: fullbleed bg + v2-container content
Old: .target.advantages.v2-container — bg capped at 1820px (not fullbleed).
New: .v2-band.why-us-band fullbleed bg; .v2-container.why-us content inside.
why.html restructured:
…
════════════════════════════════════════════════════ */
.why-us-band {
background: var(--c-bg-soft, #eef4f7);
padding-block: var(--sp-9, 64px);
}
/* D9-hotfix 2026-05-23: .why-us is also .v2-container — let .v2-container cap at --layout-max.
Removed max-width:none (was overriding .v2-container cap on 2200px+).
Keep margin:0 / padding:0 to reset legacy .why-us { margin-inline:auto; padding:24px }. */
.why-us {
max-width: var(--layout-max) !important; /* 1820px — explicit cap matching .v2-container */
margin: 0 auto !important;
padding-inline: var(--layout-gutter) !important; /* 50px gutter each side */
padding-block: 0 !important;
}
/* Also override legacy .target.advantages background (now on .why-us-band) */
section.why-us-band .why-us,
.why-us-band > .why-us {
background: transparent !important;
}
/* ════════════════════════════════════════════════════
WHY-US — §5 layout adaptivity + typography swap (§5)
Layout RE-SPEC 2026-05-22 (BLOCKER F — §4.0.4):
6 tiles, семантически фикс. число → repeat(3,1fr) (2 ряда × 3).
auto-fill НЕ применяем (ломает 3×2-композицию на широком контейнере).
Схлопывание: ≤900px → 2-col; ≤600px → 1-col. Gap --sp-5.
Overrides legacy flex in styles.css:15744.
════════════════════════════════════════════════════ */
.why-us__cards {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: var(--sp-5) !important; /* 24px */
align-items: stretch;
margin-bottom: 0 !important;
}
.why-us__card {
flex: none !important; /* reset styles.css flex: 1 1 calc(33.333%) */
min-width: 0 !important; /* grid manages width */
}
@media (max-width: 900px) {
.why-us__cards { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
.why-us__cards { grid-template-columns: 1fr !important; }
}
.why-us__title,
.why-us h2 {
font-family: var(--ff-display) !important;
font-weight: 700 !important;
}
.why-us__card-title,
.why-us h3 {
font-family: var(--ff-display) !important;
font-size: 18px !important;
font-weight: 600 !important;
}
.why-us__card-desc,
.why-us p,
.why-us span {
font-family: var(--ff-body) !important;
font-size: 14px !important;
font-weight: 400 !important;
}
/* ════════════════════════════════════════════════════
D10-v3 (2026-05-24): Lucide refined line icons
Owner-approved design direction — replaces Streamline Freehand (D10 reject).
- Brand-blue stroke (currentColor), 8% tint container
- Orange accent on 2 cards (delivery, price) — energy concepts
- Sizing: hero 80/44, mini 56/32, trust-bar 32
- Yellow #F1B742 (--c-accent-warm) DELETED — out of brand
════════════════════════════════════════════════════ */
/* New tokens */
:root {
--c-blue-tint: rgba(14, 148, 200, 0.08);
--c-blue-tint-strong: rgba(14, 148, 200, 0.14);
--c-orange-tint: rgba(243, 96, 18, 0.10);
--c-orange-tint-strong: rgba(243, 96, 18, 0.16);
--c-kaspi: #F14635;
}
/* Hero icon — main card */
.why-us__icon {
width: 80px;
height: 80px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--c-blue-tint);
border-radius: var(--r-lg);
margin-bottom: var(--sp-5);
color: var(--c-blue);
transition: background 220ms ease, transform 220ms ease;
flex-shrink: 0;
}
.why-us__icon svg {
width: 44px;
height: 44px;
stroke-width: 2;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
}
.why-us__card:hover .why-us__icon {
background: var(--c-blue-tint-strong);
transform: scale(1.03);
}
/* Orange accent variant — delivery (card 4) */
.why-us__icon--accent {
background: var(--c-orange-tint);
color: var(--c-orange);
}
.why-us__card:hover .why-us__icon--accent {
background: var(--c-orange-tint-strong);
}
/* Main card surface */
.why-us__card {
padding: 32px 28px;
background: var(--c-white);
border: 1px solid var(--c-border-soft, var(--c-border));
border-radius: var(--r-lg);
transition: box-shadow 220ms ease, transform 220ms ease, border-color 220ms ease;
}
.why-us__card:hover {
box-shadow: var(--sh-md);
border-color: rgba(14, 148, 200, 0.30);
transform: translateY(-2px);
}
/* ════════════════════════════════════════════════════
D10-v3 mini-cards
════════════════════════════════════════════════════ */
.why-us__mini {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: var(--sp-5) !important;
margin-top: var(--sp-5) !important;
}
.why-us__mini-item {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 0 !important;
padding: 28px 24px !important;
background: var(--c-white) !important;
border: 1px solid var(--c-border-soft, var(--c-border)) !important;
border-radius: var(--r-lg) !important;
min-height: 0 !important;
box-sizing: border-box;
transition: box-shadow 220ms ease, transform 220ms ease, border-color 220ms ease;
}
.why-us__mini-item:hover {
box-shadow: var(--sh-md) !important;
border-color: rgba(14, 148, 200, 0.30) !important;
transform: translateY(-2px) !important;
}
.why-us__mini-icon {
width: 56px !important;
height: 56px !important;
border-radius: var(--r-md) !important;
background: var(--c-blue-tint) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin-bottom: var(--sp-4) !important;
color: var(--c-blue) !important;
flex-shrink: 0 !important;
transition: background 220ms ease;
}
.why-us__mini-icon svg {
width: 32px !important;
height: 32px !important;
stroke-width: 2;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
}
.why-us__mini-icon--accent {
background: var(--c-orange-tint) !important;
color: var(--c-orange) !important;
}
.why-us__mini-content {
display: flex !important;
flex-direction: column !important;
gap: var(--sp-1, 4px) !important;
}
.why-us__mini-content strong {
font-family: var(--ff-display) !important;
font-size: 17px !important;
font-weight: 600 !important;
color: var(--c-text) !important;
line-height: 1.3 !important;
}
.why-us__mini-content span {
font-family: var(--ff-body) !important;
font-size: 14px !important;
color: var(--c-text-2) !important;
line-height: 1.5 !important;
font-weight: 400 !important;
}
/* Responsive: collapse to 2-col at ≤900px, 1-col at ≤600px */
@media (max-width: 900px) {
.why-us__mini {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 600px) {
.why-us__mini {
grid-template-columns: 1fr !important;
}
}
/* ════════════════════════════════════════════════════
D12 fix 2026-05-23: prefooter + footer + useful-links fluid-with-cap
Root: legacy footer div.inner { width:990px } and .useful-links .inner { width:990px }
cap content in footer area to 990px even though .prefooter bg is fullbleed.
Fix: override .inner in all footer contexts to fluid-with-cap pattern.
Typography changes (D6) — NOT in this Stage (Stage 5).
════════════════════════════════════════════════════ */
/* Prefooter inner — fluid-with-cap */
.prefooter .inner {
width: auto !important;
max-width: var(--layout-max) !important;
margin-inline: auto !important;
padding-inline: var(--layout-gutter) !important;
box-sizing: border-box;
}
/* Quick-links (useful-links) inner — fluid-with-cap + 7-tile grid */
.useful-links .inner {
width: auto !important;
max-width: var(--layout-max) !important;
margin-inline: auto !important;
padding-inline: var(--layout-gutter) !important;
box-sizing: border-box;
}
/* useful-links slides: 7-tile grid at >=1280, wrap at narrower */
.useful-links__slides {
display: grid !important;
grid-template-columns: repeat(7, 1fr) !important;
gap: var(--sp-4) !important; /* 16px */
justify-content: unset !important;
margin: 0 !important;
}
@media (max-width: 1279px) {
.useful-links__slides {
grid-template-columns: repeat(4, 1fr) !important;
}
}
/* Footer (main dark footer) inner — fluid-with-cap */
footer:not(.prefooter) .inner {
width: auto !important;
max-width: var(--layout-max) !important;
margin-inline: auto !important;
padding-inline: var(--layout-gutter) !important;
box-sizing: border-box;
}
/* ════════════════════════════════════════════════════
FOOTER CHROME — typography swap only (§4.11)
════════════════════════════════════════════════════ */
footer:not(.prefooter) h2.footer-col-title,
footer:not(.prefooter) .footer-title {
font-family: var(--ff-display) !important;
font-size: 14px !important;
font-weight: 600 !important;
color: var(--c-white) !important;
}
footer:not(.prefooter) a,
footer:not(.prefooter) p,
footer:not(.prefooter) span:not(.this__qty) {
font-family: var(--ff-body);
}
/* D10-3 (2026-05-24): CC BY 4.0 attribution line for Streamline Freehand icons */
.footer__attribution {
font-size: 11px;
color: var(--c-text-3, #999);
font-family: var(--ff-body);
text-align: center;
margin-top: var(--sp-2, 8px);
margin-bottom: var(--sp-2, 8px);
}
.footer__attribution a {
color: var(--c-text-2, #6b7d94);
text-decoration: none;
}
.footer__attribution a:hover {
text-decoration: underline;
}
/* ════════════════════════════════════════════════════
LANGUAGE SWITCHER (iter-04 i18n)
════════════════════════════════════════════════════ */
.header-lang {
display: inline-flex;
gap: 4px;
font-family: var(--ff-body);
font-size: var(--fs-sm);
font-weight: 500;
align-items: center;
}
.header-lang a,
.header-lang__item {
color: var(--c-text-2);
text-decoration: none;
padding: 2px 6px;
border-radius: var(--r-sm);
transition: color var(--dur-fast), background var(--dur-fast);
}
.header-lang a:hover { color: var(--c-text); }
.header-lang a.active,
.header-lang__item--active {
color: var(--c-blue);
font-weight: 600;
background: var(--c-blue-light);
}
.header-lang__sep {
color: var(--c-border);
pointer-events: none;
}
/* ════════════════════════════════════════════════════
SLIDER FULL-WIDTH WRAPPER (§4.2 pivot, Approach B, 2026-05-21)
Full-bleed 100vw from within .container1 (990px fixed).
Slick JS not touched. Includes banners_list + slider.
════════════════════════════════════════════════════ */
.v2-slider-fullwidth {
/* RE-SPEC 2026-05-22 (BLOCKER F — FLUID §4.2):
100vw escape-хак УДАЛЁН. Слайдер в fluid .v2-container (обёртка в index.html).
width/margin/transform escape → removed. Ширина = fluid 100% родителя (.v2-container). */
position: relative;
/* D3 fix 2026-05-23 (Variant B — Designer pick): height:auto, no min-height.
Old: height:clamp(360px,30vw,560px) caused up to 258px empty blue space under 302px image.
New: container collapses to image natural height — no empty block, no distortion.
BRIEF §4.2 clamp spec superseded by Designer addendum 2026-05-23. */
/* iter-05 правки #5/#6: радиус убран (прямые углы), высота уменьшена на ~1/3
(480→320px) через фикс-высоту контейнера + object-fit:cover на картинке. */
height: 320px;
min-height: 0;
overflow: hidden;
border-radius: 0;
/* iter-05 #1: градиент-фон убран (краснел/синел по краям) — чистый белый под картинкой */
background: #fff;
margin-bottom: 0;
margin-top: 0;
}
/* iter-05 #6: slick-цепочка заполняет фикс-высоту 320px (было height:auto) */
.v2-slider-fullwidth .slick-slider,
.v2-slider-fullwidth .slick-list,
.v2-slider-fullwidth .slick-track {
height: 320px;
}
.v2-slider-fullwidth .slick-slide,
.v2-slider-fullwidth .slick-slide > div {
height: 320px;
}
/* D3 hotfix 2026-05-23: eliminate empty blue space under slide image.
Root: legacy styles.css sets margin-bottom:292px on .banner_slider → Slick JS
ignores it but the value leaks as margin-bottom on .slick-slider (inherits).
Specifically: .slick-slider margin-bottom:30px (Slick default) and
.carousel margin-bottom:10px (legacy) → v2-slider-fullwidth height grows by 40px
beyond image bottom → branding gradient shows through as empty blue strip.
Fix: zero out all these margins inside .v2-slider-fullwidth context. */
.v2-slider-fullwidth .slick-slider,
.v2-slider-fullwidth .banner_slider,
.v2-slider-fullwidth .main-slider-wrap {
margin-bottom: 0;
}
.v2-slider-fullwidth .slick-slide .carousel {
margin-bottom: 0;
}
/* D2 fix: .carousel div in banner_block_new.html has inline width:793px — override.
The !important is required to beat the inline style attribute.
This makes the image fill its slick-slide container (which Slick sets in px = slide width). */
.v2-slider-fullwidth .slick-slide .carousel {
width: 100% !important;
}
.v2-slider-fullwidth .slick-slide .carousel,
.v2-slider-fullwidth .slick-slide .carousel picture,
.v2-slider-fullwidth .slick-slide .carousel a {
display: block;
width: 100%;
height: 100%;
}
/* iter-05 #6: картинка заполняет 320px по cover (без искажений, лёгкий кроп низ/верх) */
.v2-slider-fullwidth .slick-slide img {
width: 100%;
height: 320px;
object-fit: cover;
object-position: center 28%;
display: block;
}
/* iter-05 #3: убрать скругление слайдов (.slick-slide имел border-radius:10px → углы баннера) */
.v2-slider-fullwidth .slick-slide,
.v2-slider-fullwidth .slick-slide > div,
.v2-slider-fullwidth .slick-slide .carousel,
.v2-slider-fullwidth .slick-slide picture,
.v2-slider-fullwidth .slick-slide a,
.v2-slider-fullwidth .slick-slide img {
border-radius: 0 !important;
}
/* Arrows: 48×48 circles per §4.2 spec */
.v2-slider-fullwidth .slick-prev,
.v2-slider-fullwidth .slick-next {
width: 48px;
height: 48px;
background: rgba(255,255,255,.15);
border: 1px solid rgba(255,255,255,.25);
border-radius: 50%;
z-index: 2;
top: 50%;
transform: translateY(-50%);
}
.v2-slider-fullwidth .slick-prev { left: 24px; }
.v2-slider-fullwidth .slick-next { right: 24px; }
.v2-slider-fullwidth .slick-prev:hover,
.v2-slider-fullwidth .slick-next:hover {
background: rgba(255,255,255,.25);
}
.v2-slider-fullwidth .slick-prev:before,
.v2-slider-fullwidth .slick-next:before {
font-size: 22px;
color: #fff;
opacity: 1;
}
.v2-slider-fullwidth .slick-prev:focus-visible,
.v2-slider-fullwidth .slick-next:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
/* Dots: 24px below slide bottom per §4.2 */
.v2-slider-fullwidth .slick-dots {
bottom: 24px;
}
.v2-slider-fullwidth .slick-dots li button:before {
content: '';
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255,255,255,.5);
opacity: 1;
}
.v2-slider-fullwidth .slick-dots .slick-active button:before {
background: #fff;
}
/* Mobile: 280px height, hide arrows */
@media (max-width: 768px) {
.v2-slider-fullwidth {
height: 280px;
}
.v2-slider-fullwidth .slick-prev,
.v2-slider-fullwidth .slick-next {
display: none !important;
}
.v2-slider-fullwidth .slick-dots {
bottom: 12px;
}
}
/* ════════════════════════════════════════════════════
SLIDER V2 SKIN — legacy Slick CSS-only overrides (§4.2, spec 2026-05-21)
Composes from existing tokens. Slick JS not touched.
DESIGN_SYSTEM: "Promo slider — legacy Slick v2 skin"
════════════════════════════════════════════════════ */
/* Container & vertical rhythm (outside v2-slider-fullwidth context — show_anywhere mode) */
.main-slider-wrap,
.banner_slider {
max-width: 1280px;
margin-left: auto;
margin-right: auto;
margin-top: 0; /* no margin: USP strip follows */
margin-bottom: 0;
}
/* D2 fix 2026-05-23: inside .v2-slider-fullwidth — remove legacy cap, fill full width.
Root: .banner_slider { max-width: 1280px } above limits image to 1280px inside
the fluid 1720px container. Override to 100% so image fills container.
NOTE: do NOT override .slick-track or .slick-slide width — Slick JS sets these
in pixels and override with 100% breaks multi-slide layout (slides stack vertically). */
.v2-slider-fullwidth .main-slider-wrap,
.v2-slider-fullwidth .banner_slider {
max-width: none;
width: 100%;
margin-left: 0;
margin-right: 0;
}
.v2-slider-fullwidth .banner_slider .slick-list {
max-width: none;
}
/* Slide wrapper radius */
.main-slider-wrap .slick-slide,
.banner_slider .slick-slide {
border-radius: var(--r-md);
overflow: hidden;
}
/* ---- Slick dots (pagination) ---- */
.main-slider-wrap .slick-dots,
.banner_slider .slick-dots {
bottom: -16px; /* 16px below slide */
}
.main-slider-wrap .slick-dots li,
.banner_slider .slick-dots li {
margin: 0 4px; /* 8px total gap between dots */
}
/* Reset Slick default pseudo-element styling */
.main-slider-wrap .slick-dots li button:before,
.banner_slider .slick-dots li button:before {
content: '';
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--c-border); /* inactive: #DDE5EA */
opacity: 1;
transition: opacity var(--dur-fast) var(--ease-out),
background var(--dur-fast) var(--ease-out);
}
.main-slider-wrap .slick-dots li button:hover:before,
.banner_slider .slick-dots li button:hover:before {
background: var(--c-text-2); /* hover inactive: #5F6B7A */
}
.main-slider-wrap .slick-dots .slick-active button:before,
.banner_slider .slick-dots .slick-active button:before {
background: var(--c-blue); /* active: #0E94C8 */
}
/* ---- Slick arrows ---- */
.main-slider-wrap .slick-prev,
.main-slider-wrap .slick-next,
.banner_slider .slick-prev,
.banner_slider .slick-next {
width: 40px; /* ≥40px hit area for a11y */
height: 40px;
z-index: 1;
}
.main-slider-wrap .slick-prev:before,
.main-slider-wrap .slick-next:before,
.banner_slider .slick-prev:before,
.banner_slider .slick-next:before {
font-size: 24px; /* 24px icon */
color: var(--c-text-2); /* default: #5F6B7A */
opacity: 1;
transition: color var(--dur-fast) var(--ease-out);
}
.main-slider-wrap .slick-prev:hover:before,
.main-slider-wrap .slick-next:hover:before,
.banner_slider .slick-prev:hover:before,
.banner_slider .slick-next:hover:before {
color: var(--c-blue); /* hover: #0E94C8 */
}
.main-slider-wrap .slick-prev:focus-visible,
.main-slider-wrap .slick-next:focus-visible,
.banner_slider .slick-prev:focus-visible,
.banner_slider .slick-next:focus-visible {
outline: 2px solid var(--c-blue);
outline-offset: 2px;
}
/* ---- Slide content typography ---- */
.main-slider-wrap h2,
.main-slider-wrap h3,
.banner_slider h2,
.banner_slider h3 {
font-family: var(--ff-display) !important; /* Bitter */
font-size: clamp(22px, 2.4vw, 32px) !important;
font-weight: 700 !important;
color: var(--c-text) !important;
}
.main-slider-wrap p,
.banner_slider p {
font-family: var(--ff-body) !important; /* Onest */
font-size: var(--fs-body) !important; /* 15px */
color: var(--c-text-2) !important;
}
/* ---- Promo plaque cards (e.g. «Не прозевай подарок!») ---- */
/* Targets text/card containers within slides, not slide images */
.main-slider-wrap .slide-text-wrap,
.main-slider-wrap .banner-text,
.main-slider-wrap .slide-content,
.banner_slider .slide-text-wrap,
.banner_slider .banner-text,
.banner_slider .slide-content {
background: var(--c-blue-light); /* #EBF7FA tint */
border-radius: var(--r-md); /* 12px */
padding: var(--sp-6); /* 32px desktop */
text-align: left;
box-shadow: none;
}
/* ---- Mobile: hide arrows ≤768px ---- */
@media (max-width: 768px) {
.main-slider-wrap .slick-prev,
.main-slider-wrap .slick-next,
.banner_slider .slick-prev,
.banner_slider .slick-next {
display: none !important;
}
.main-slider-wrap .slick-dots,
.banner_slider .slick-dots {
bottom: -12px; /* 12px mobile */
}
.main-slider-wrap .slide-text-wrap,
.main-slider-wrap .banner-text,
.main-slider-wrap .slide-content,
.banner_slider .slide-text-wrap,
.banner_slider .banner-text,
.banner_slider .slide-content {
padding: var(--sp-5); /* 20px mobile */
}
}
/* ════════════════════════════════════════════════════
USP STRIP — full-width trust bar (§4.2.5 NEW, 2026-05-21)
4 badges: delivery / warranty / payment / social proof.
DESIGN_SYSTEM: "USP strip (v2-usp)"
════════════════════════════════════════════════════ */
.v2-usp {
/* RE-SPEC 2026-05-22 (BLOCKER F — FLUID §4.2.5):
100vw escape-хак УДАЛЁН. .v2-usp = .v2-band (full-bleed bg/border —
прямой потомок страницы, без transform-escape). Фон до краёв viewport. */
background: var(--c-bg-soft);
/* iter-05 #4: full-width линия под трастбаром убрана (торчала за слайдер по бокам) */
border-bottom: 0;
padding: var(--sp-3) 0; /* 12px top/bottom ≈ 60px total with content */
}
.v2-usp__inner {
/* RE-SPEC 2026-05-22: .v2-container (fluid-with-cap) — контент выровнен
по той же fluid-ширине, что слайдер и main grid. max-width 1280 → 1820. */
max-width: var(--layout-max);
margin-inline: auto;
/* Owner 2026-06-19 (вариант B): инфо-строка = сетка страницы.
padding-inline 0 — gutter уже даёт .v2-usp (band, padding-inline 32). Иначе
был double-gutter (64) и сетка не совпадала с body (sidebar на 32).
col1 = 260 (над сайдбаром) → 1-й элемент; col2 = контент → группа из 4. */
padding-inline: 0 !important;
box-sizing: border-box;
display: grid;
grid-template-columns: 260px minmax(0, 1fr);
align-items: center;
column-gap: var(--sp-5); /* 24 = sidebar→content gap */
}
/* Группа = 4 колонки фильтра: padding-inline 24 (= padding карточки фильтра),
column-gap 16 (sp-4, как .v2-filter-compact-grid) → элементы 2–5 точно над
колонками Цена/Высота/Жёсткость/Конструкция. */
.v2-usp__group {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
column-gap: var(--sp-4);
padding-inline: var(--sp-5);
}
/* Owner 2026-06-19: 1-й элемент сместить правее (как было) — не у самого края
сайдбара; элементы 2–5 не трогаем. */
/* 2026-06-26: первый элемент трастбара выровнен под левый край логотипа (x≈52). */
.v2-usp__inner > .v2-usp__item { padding-left: 20px; }
.v2-usp__item {
display: flex;
align-items: center;
gap: var(--sp-3); /* 12px */
/* §4.0.4: item-контент НЕ растягивать — flex:1 удалён.
justify-content:space-around на __inner равномерно распределяет 4 item'а.
На широком экране item держит компактную читаемую группировку. */
min-width: 0;
}
.v2-usp__icon {
/* D10-v3 (2026-05-24): Lucide 32×32 — was 24×24 Streamline Freehand */
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
/* Owner 2026-06-29 #3: иконки инфолинии не должны быть ярче/жирнее текста —
приглушённый серый (как второстепенный текст) вместо яркого синего. */
color: var(--c-text-2);
}
.v2-usp__icon svg {
width: 32px;
height: 32px;
stroke-width: 1.5; /* было 2 — убрана «жирная обводка» (#3) */
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Kaspi exception — узнаваемый знак (raster), не перекрашивается (iter-05 правка #6) */
.v2-usp__item--kaspi .v2-usp__icon {
width: 32px;
height: 32px;
}
.v2-usp__item--kaspi .v2-usp__icon img {
width: 32px;
height: 32px;
object-fit: contain;
border-radius: 50%; /* знак — круг; обрезаем белые поля jpg по кругу */
display: block;
}
.v2-usp__text {
display: flex;
flex-direction: column;
gap: 1px;
}
.v2-usp__label {
font-family: var(--ff-body);
font-size: var(--fs-sm); /* iter-06: 15px после foundation bump */
font-weight: 600;
color: var(--c-text);
/* iter-06 D16: wrap вместо nowrap+ellipsis. overflow-wrap: break-word —
корректно для коротких подписей, длинные не вылезают за ячейку. */
white-space: normal;
overflow-wrap: break-word;
}
.v2-usp__sub {
font-family: var(--ff-body);
font-size: var(--fs-xs); /* 12px (min caption) */
font-weight: 400;
color: var(--c-text-2);
/* iter-06 D16: wrap вместо nowrap */
white-space: normal;
overflow-wrap: break-word;
}
/* §4.0.4 страховочное схлопывание USP 4→2 при контейнере < 720px
(на desktop не достигается при --layout-gutter 50px + viewport > 990px;
нужно если USP появится в узком контексте) */
@media (max-width: 820px) {
.v2-usp__inner {
flex-wrap: wrap;
justify-content: center;
}
.v2-usp__item {
flex: 0 0 calc(50% - var(--sp-3));
justify-content: center;
}
}
/* Mobile: horizontal scroll-snap per §4.2.5 */
@media (max-width: 768px) {
.v2-usp__inner {
justify-content: flex-start;
gap: 0;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding: 0 var(--sp-4); /* 16px sides */
/* Hide scrollbar */
scrollbar-width: none;
}
.v2-usp__inner::-webkit-scrollbar { display: none; }
.v2-usp__item {
scroll-snap-align: start;
flex: 0 0 auto;
padding: 0 var(--sp-5); /* 24px sides per item */
border-right: 1px solid var(--c-border);
}
.v2-usp__item:last-child {
border-right: none;
}
.v2-usp {
padding: var(--sp-3) 0; /* 12px top/bottom per §4.2.5 mobile */
}
}
/* ════════════════════════════════════════════════════
PRELOAD HINT FOR CRITICAL FONTS
(declared here for CSS-only scoping; actual
goes in css_incs.html — see iter-04 commit)
════════════════════════════════════════════════════ */
/* No rules needed here — preload is in HTML */
/* ════════════════════════════════════════════════════
V2-MAIN GRID — homepage layout §4.3 (mini-rev-6 release blocker fix)
Replaces legacy #main.cs-narrow-main + padding-left:250px approach.
DOM: .v2-main > .v2-main__inner > (aside.v2-sidebar + main.v2-content)
Desktop: sidebar 280px col-1, content 1fr col-2, gap 32px.
Mobile: single col, sidebar order:2 (after content).
════════════════════════════════════════════════════ */
/* Outer container — fluid-with-cap (BLOCKER F RE-SPEC §4.3, 2026-05-22)
max-width:1280px → var(--layout-max):1820px. fluid-with-cap via .v2-container.
Sidebar 280px фикс + content 1fr fluid. */
.v2-main {
max-width: var(--layout-max);
margin-inline: auto;
/* iter-05 ф.1.3 правка #3.1: убран большой верхний отступ — меню/контент
поднимаются под линию трастбара (было --sp-7 48px). */
padding: var(--sp-4) var(--layout-gutter) var(--sp-8);
box-sizing: border-box;
}
/* Inner grid — sidebar first, content second (sidebar = left col on desktop) */
.v2-main__inner {
display: grid;
grid-template-columns: 280px 1fr;
gap: var(--sp-6, 32px);
align-items: start;
}
/* Sidebar (§4.3.1 RE-REVISION 2026-05-22)
.v2-sidebar = flex column wrapper only — NO own bg/border/padding.
Each child block carries its own card-chrome:
BLOCK #1 catalog_sidebar_v2 → cs-wrap (own border, bg, radius)
BLOCK #2 v2-sidebar__widget--news → own card-chrome below */
.v2-sidebar {
display: flex;
flex-direction: column;
gap: var(--sp-5, 24px);
/* iter-05 ф.1.3 правка #3.2: НЕ sticky — меню скроллится вместе со
страницей и уходит из вида (доступ к каталогу при скролле вверх —
через кнопку «Каталог товаров» в шапке, делаем отдельно).
position:relative + z-index сохраняем только ради стекинг-контекста,
чтобы L3-flyout рисовался поверх transform-контекста .v2-filter. */
position: relative;
/* L2-critical-fix 2026-05-24: explicit z-index creates a formal stacking context for sidebar.
Root cause: .v2-filter has transform:matrix(1,0,0,1,0,0) (fade-up animation setup) which creates
a stacking context painted over sidebar in DOM order, even though cs-wrap has z-index:100.
Fix: give sidebar z-index:10 so its stacking context paints above filter's transform context.
Header stays above (z-index:50). Does not affect D7 sticky or D8 widget widths. */
z-index: 10;
}
/* D8 fix 2026-05-23: catalog card (cs-wrap) and news card must have equal width.
Root: .cs-wrap.cs-compact { width: var(--l1-w) } = 230px (hardcoded catalog CSS),
while .v2-sidebar__widget--news stretches to sidebar width 280px — 50px mismatch.
Fix: override cs-wrap width to 100% within .v2-sidebar so it fills the 280px col,
matching news widget. box-sizing:border-box already set on cs-wrap. */
.v2-sidebar .cs-wrap {
width: 100%;
max-width: none;
}
/* News widget — BLOCK #2 card-chrome (§4.3.1 re-revision: .v2-sidebar has no own bg/border,
each child carries its own card-chrome) */
.v2-sidebar__widget--news {
background: var(--c-bg-soft);
border: 1px solid var(--c-border);
border-radius: var(--r-md);
padding: var(--sp-4, 18px);
}
/* Sidebar section titles */
.v2-sidebar__title {
font-family: var(--ff-display) !important;
font-size: 14px !important;
font-weight: 600 !important;
text-transform: uppercase;
letter-spacing: 0.8px;
color: var(--c-text) !important;
margin: 0 0 var(--sp-3, 14px) !important;
}
/* News list */
.v2-sidebar__news-list {
list-style: none;
padding: 0;
margin: 0;
}
.v2-sidebar__news-list li {
padding-block: 8px;
border-bottom: 1px dashed var(--c-border);
}
.v2-sidebar__news-list li:last-child {
border-bottom: none;
}
.v2-sidebar__news-date {
display: block;
font-family: var(--ff-body);
font-size: var(--fs-xs); /* 12px — reconciliation: was 11px → --fs-xs (BLOCKER D) */
font-weight: 400;
color: var(--c-text-2);
margin-bottom: 2px;
}
.v2-sidebar__news-headline {
font-family: var(--ff-body);
font-size: 12.5px;
font-weight: 500;
color: var(--c-text);
text-decoration: none;
display: block;
line-height: 1.4;
}
.v2-sidebar__news-headline:hover {
color: var(--c-blue);
text-decoration: underline;
}
/* Content area — fills remaining space */
.v2-content {
min-width: 0; /* prevent grid blowout */
}
/* Mobile: single column, sidebar after content */
@media (max-width: 1024px) {
.v2-main {
padding: var(--sp-6) var(--sp-4) var(--sp-7); /* 16px gutter on mobile per §4.0 rule 5 */
}
.v2-main__inner {
grid-template-columns: 1fr;
gap: var(--sp-6, 32px);
}
.v2-sidebar {
order: 2;
position: static; /* no sticky on mobile */
/* no padding here — each child block has its own card-chrome padding */
}
.v2-content {
order: 1;
}
.v2-sidebar__title {
font-size: var(--fs-sm) !important; /* 14px — reconciliation 13→14 */
}
}
/* Suppress old CSS grid rules from commit 4336f17 (now dead code — homepage uses v2-main).
Rules below target non-homepage pages via :has() selector — harmless no-ops now.
Cleanup backlog: remove body.has-footer .container1:has(...) rules post-launch. */
/* ════════════════════════════════════════════════════════════
SIDEBAR CATEGORY TREE CSS — REMOVED (mini-rev-12, 2026-05-22)
.v2-sidebar__cats-tree rules written in mini-rev-11 for
categories_side_box.html / left_menu.html reskin — both components
are no longer used on homepage sidebar.
BLOCK #1 is now catalog_sidebar_v2.html (CS Design System, Sprint 4),
which carries its own cs-* CSS (styles.css:15106-15305+, styles_modern.css:1052+).
No homepage-specific overrides needed for cs-* classes.
════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════
P0 BLOCKERS FIX (iter-04(p0-brand-wire), 2026-05-24)
P0-4: brands list uses - structure; li needs reset.
════════════════════════════════════════════════════════════ */
.v2-brands__list {
list-style: none;
padding: 0;
margin: 0;
}
/* ════════════════════════════════════════════════════════════
P1-S1: unified .v2-sale-badge token (iter-04(p1-s1), 2026-05-24)
Closes 3-badge fragmentation: sidebar #FE6718/6px/11px/800,
product cards #F05417/6px/12px/700, v2-badge--sale (CSS-only).
Single token: --c-orange #F36012, pill 999px, 12px/700 uppercase.
Pulse animation on .cs-promo-sale__badge removed (anti-trust pattern).
════════════════════════════════════════════════════════════ */
/* Primary token — new semantic class */
.v2-sale-badge {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--c-orange); /* #F36012 — single brand orange */
color: #fff;
font-family: var(--ff-body); /* Onest */
font-size: var(--fs-xs); /* 12px */
font-weight: 700;
line-height: 1;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 4px 10px;
border-radius: var(--r-pill); /* 999px pill */
white-space: nowrap;
vertical-align: middle;
}
/* Override legacy classes — extend, not replace markup.
Harmonises all 3 existing badge variants onto same token. */
.cs-promo-sale__badge,
.discount-label,
.v2-badge--sale {
background: var(--c-orange); /* #F36012, not #FE6718 / #F05417 */
color: #fff;
font-family: var(--ff-body);
font-size: var(--fs-xs); /* 12px */
font-weight: 700;
line-height: 1;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 4px 10px;
border-radius: var(--r-pill); /* 999px — pill, not square 6px */
white-space: nowrap;
display: inline-flex;
align-items: center;
justify-content: center;
width: auto; /* override legacy fixed width:50px */
height: auto; /* override legacy height:25px */
vertical-align: middle;
}
/* Remove pulse animation — anti-trust pattern (DESIGN_SYSTEM §Принципы #1) */
.cs-promo-sale__badge {
animation: none;
}
/* ════════════════════════════════════════════════════════════
P1-FT1: Footer restructure + KZ payment cards (iter-04(p1-ft1), 2026-05-24)
Prefooter: inline-block → CSS Grid auto-fit.
Main footer: hardcoded inline-style widths → 3-col grid.
Payment cards: Owner-corrected large 120×80 logo-box + label below pattern.
════════════════════════════════════════════════════════════ */
/* Prefooter — equalize 5 columns via CSS Grid */
footer.prefooter .inner {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--sp-6); /* 32px */
align-items: start;
padding: var(--sp-7) 50px; /* 48px vertical + 50px gutter */
max-width: var(--layout-max, 1820px);
margin-inline: auto;
}
footer.prefooter .prefooter_topmenu {
display: block; /* overrides inline-block */
width: auto;
padding: 0;
}
/* Main footer — 3-col grid (brand 2fr / msmenu 1fr / subscribe 1fr) */
footer:not(.prefooter) .footer__grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: var(--sp-6); /* 32px */
align-items: start;
margin-bottom: var(--sp-7); /* 48px before payment strip */
}
footer:not(.prefooter) .footer__col {
display: flex;
flex-direction: column;
gap: var(--sp-4); /* 16px between blocks inside col */
}
/* Col heading — Информация / Подписка */
footer:not(.prefooter) .footer__col-heading {
font-family: var(--ff-body);
font-size: 15px;
font-weight: 700;
color: var(--c-white);
padding: 0 0 var(--sp-2);
margin: 0 0 var(--sp-3);
border-bottom: 1px solid rgba(255,255,255,.12);
}
/* Col menu — single column (per Designer spec: 3-col layout без разбиения msmenu) */
footer:not(.prefooter) .footer__col--menu .footer_menu {
width: auto; /* override legacy 49.5% */
margin-top: 0; /* override legacy 105px */
display: block;
}
footer:not(.prefooter) .footer__col--menu .footer_menu a {
display: block;
margin-bottom: 10px;
color: rgba(255,255,255,.65);
text-decoration: none;
font-size: var(--fs-sm, 14px);
line-height: 1.4;
}
/* Subscribe col — lead text + sub-links */
.footer__subscribe-lead {
color: rgba(255,255,255,.55);
font-size: 13px;
line-height: 1.6;
margin: 0 0 var(--sp-3);
}
.footer__sub-links {
list-style: none;
margin: var(--sp-3) 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.footer__sub-links li a {
font-size: 14px;
color: rgba(255,255,255,.65);
text-decoration: none;
}
.footer__sub-links li a:hover {
color: var(--c-white);
}
@media (max-width: 990px) {
footer:not(.prefooter) .footer__grid {
grid-template-columns: 1fr; /* mobile stack */
}
footer.prefooter .inner {
grid-template-columns: repeat(2, 1fr); /* 2-col on narrow */
padding: var(--sp-6) var(--sp-5);
}
}
/* Payment cards strip — per Designer spec ft1-spec.md.
Card size 120×80 per Designer preview. Logo 90% width so brand fills card.
Placeholders for kaspigold/halyk — swap with official assets when Owner provides. */
.footer__payments {
display: flex;
align-items: center;
gap: var(--sp-5); /* 24px */
padding: var(--sp-5) 0;
border-top: 1px solid rgba(255,255,255,.10);
margin: var(--sp-6) 0 var(--sp-4); /* no border-bottom — hr removed from HTML */
flex-wrap: wrap;
}
.footer__payments-label {
font-family: var(--ff-body);
font-size: 11px; /* explicit 11px — unobtrusive secondary label */
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(255,255,255,.40); /* lighter: less visual dominance */
flex-shrink: 0;
}
/* Card list */
.footer__payments-list {
display: flex;
align-items: flex-start;
gap: var(--sp-3); /* 12px */
list-style: none;
margin: 0;
padding: 0;
flex-wrap: wrap;
}
/* Each card: logo-box + label stacked */
.footer__payment-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
/* Logo box — 120×80 per Designer preview ft1-preview.png.
Logo fills nearly entire card via object-fit:contain — Owner 2026-05-24 request. */
.footer__payment-card__logo-box {
width: 120px;
height: 80px;
background: #fff;
border-radius: var(--r-md, 8px);
display: flex;
align-items: center;
justify-content: center;
padding: 4px; /* minimal — let logo breathe but fill */
box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.footer__payment-card__logo-box img {
width: 100%; /* fill width fully */
height: 100%; /* fill height fully */
display: block;
object-fit: contain; /* maintain aspect ratio, fit largest dimension */
}
.footer__payment-card__label {
font-family: var(--ff-body);
font-size: 13px;
font-weight: 500;
color: rgba(255,255,255,.60);
text-align: center;
width: 120px; /* match logo-box width: label centered under card */
display: block;
}
/* Bottom row — © left | WhatsApp + Мобильная версия right */
footer:not(.prefooter) .footer_footer {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--sp-5);
padding: var(--sp-4) 0 0;
}
/* Copyright text — left side */
footer:not(.prefooter) .footer__copy {
font-family: var(--ff-body);
font-size: var(--fs-xs); /* 12px */
color: rgba(255,255,255,.45);
line-height: 1.5;
flex: 1;
}
/* WhatsApp + mobile-version grouped right */
footer:not(.prefooter) .footer__bottom-right {
display: flex;
align-items: center;
gap: var(--sp-4); /* 16px between WhatsApp icon and Мобильная версия */
}
/* ════════════════════════════════════════════════════
P1-N1 (2026-05-24): useful-links Lucide iconset
Replaces legacy mask-glyph icons with refined-line Lucide SVG.
Container 64×64 blue-tint, glyph 32×32 currentColor, accent on 1 of 7.
Continuity with D10-v3 system (why-us hero 80/44, trust-bar 32).
════════════════════════════════════════════════════ */
/* Slide — tactile hover surface, lift pattern matches why-us cards */
.useful-links__slide {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
text-decoration: none;
color: inherit;
width: auto; /* override legacy width:14% */
padding: 18px 8px;
border-radius: var(--r-md);
transition: background 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}
.useful-links__slide:hover {
background: var(--c-white);
transform: translateY(-2px);
box-shadow: var(--sh-sm);
text-decoration: none;
}
/* Icon container — 64×64 blue-tint, no border (replaces legacy 55×55 bordered) */
.useful-links__img {
width: 64px;
height: 64px;
margin: 0 auto 12px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--c-blue-tint);
border: none; /* override legacy 1px solid #E0E7EB */
border-radius: var(--r-md);
color: var(--c-blue);
transition: background 220ms ease, color 220ms ease;
flex-shrink: 0;
}
.useful-links__img svg {
width: 32px;
height: 32px;
stroke-width: 2;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
}
.useful-links__slide:hover .useful-links__img {
background: var(--c-blue-tint-strong);
}
/* Orange accent variant — applied to 1 of 7 (#5 Заявка на подбор) */
.useful-links__img--accent {
background: var(--c-orange-tint);
color: var(--c-orange);
}
.useful-links__slide:hover .useful-links__img--accent {
background: var(--c-orange-tint-strong);
}
/* Label — v2 Onest, replaces legacy Roboto */
.useful-links__slide > span {
font-family: var(--ff-body);
font-weight: 500;
font-size: 14px;
line-height: 1.35;
color: var(--c-text);
letter-spacing: -0.005em;
transition: color 220ms ease;
}
.useful-links__slide:hover > span {
color: var(--c-blue);
}
/* When the slide has the accent icon, hover label echoes orange (CTA continuity) */
.useful-links__slide:hover .useful-links__img--accent ~ span {
color: var(--c-orange);
}
/* Optional ultra-narrow fallback — keeps grid sane on very thin desktop windows */
@media (max-width: 720px) {
.useful-links__slides { grid-template-columns: repeat(2, 1fr) !important; }
}
/* ════════════════════════════════════════════════════════════════════
iter-06 (2026-06-03) — δ-A: hv2-banner / hv2-products / hv2-pc / hv2-carousel
Port из Design_System1/.../iter06/components/components.css:
- hv2-banner (304-348)
- hv2-section variations (25-38) — уже было в Category cards block, дополняем --soft / --tight
- hv2-products / hv2-products--5 (700-704)
- hv2-pc + hv2-pc__media/badge/wish/compare/body/brand/name/price/save/rating/cta (707-786)
- hv2-carousel + arrows (828-856)
Цель: новые блоки homepage v2 (Banner / Discounted / Leaders) с commercial-preservation.
════════════════════════════════════════════════════════════════════ */
/* ───── hv2-banner — hero promo carousel (autoplay JS в hv2-homepage.js) ───── */
.hv2-banner {
position: relative;
border-radius: var(--r-card);
overflow: hidden;
margin-bottom: var(--sp-6);
background: var(--c-bg-soft);
min-height: 240px;
}
.hv2-banner__slide {
display: block;
line-height: 0;
text-decoration: none;
}
.hv2-banner__slide[hidden] { display: none; }
.hv2-banner__slide img {
display: block;
width: 100%;
height: auto;
max-height: 480px;
object-fit: cover;
object-position: center;
}
.hv2-banner__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px; height: 40px;
border-radius: 999px;
background: rgba(255,255,255,0.85);
border: 0;
color: var(--c-text);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.hv2-banner__nav:hover { background: #fff; color: var(--c-blue); }
.hv2-banner__nav--prev { left: 16px; }
.hv2-banner__nav--next { right: 16px; }
.hv2-banner__dots {
position: absolute;
bottom: 14px; left: 50%;
transform: translateX(-50%);
display: flex; gap: 8px;
}
.hv2-banner__dot {
width: 10px; height: 10px;
border-radius: 999px;
background: rgba(255,255,255,0.5);
border: 0;
padding: 0;
cursor: pointer;
transition: width var(--dur-base) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.hv2-banner__dot.is-active { background: #fff; width: 22px; }
/* Свайп/драг баннера (Owner 2026-06-27): grab-курсор, тач — pan-y (вертикальный
скролл страницы остаётся), без выделения текста при драге. Точки — поверх
hero-контента (z-index:3) для гарантии клика. */
.hv2-banner { cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.hv2-banner.is-grabbing { cursor: grabbing; }
.hv2-banner__dots { z-index: 5; }
/* Отключаем нативный drag ссылки/картинок/видео — иначе перехватывает свайп. */
.hv2-banner a, .hv2-banner img, .hv2-banner video { -webkit-user-drag: none; user-drag: none; }
/* ───── hv2-section extras (hv2-section / --tight / --soft уже частично в Category block) ───── */
.hv2-section--tight { padding-block: var(--sp-6); }
.hv2-section--soft { background: var(--c-bg-soft); }
/* ───── hv2-products — grid ProductCards ───── */
.hv2-products {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-4);
}
.hv2-products--5 {
grid-template-columns: repeat(5, 1fr);
row-gap: var(--sp-5);
}
/* iter-06 (Owner 2026-06-03 fix): 5-col сохраняется на desktop (cap 1560).
4-col только для совсем узких ноутбуков ≤1100px. */
@media (max-width: 1100px) {
.hv2-products--5 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 980px) {
.hv2-products,
.hv2-products--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
.hv2-products,
.hv2-products--5 { grid-template-columns: repeat(2, 1fr); }
}
/* ───── hv2-pc — Product card ───── */
.hv2-pc {
background: var(--c-bg);
border: 1px solid var(--c-border);
border-radius: var(--r-card);
overflow: hidden;
display: flex; flex-direction: column;
position: relative;
transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
text-decoration: none;
}
.hv2-pc:hover { box-shadow: var(--sh-md); transform: translateY(-3px); }
.hv2-pc__media {
aspect-ratio: 1/1;
background: #fff; /* 2026-07-09: рендеры на белом фоне — bg-soft давал бы серые поля при contain */
position: relative;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
/* 9 (Owner): «Вы смотрели» — карточки НИЖЕ. Уменьшаем медиа (картинку) с 1:1
(≈259px) до 3:2 (≈174px). Scoped к .hv2-recent — скидки/лидеры/каталог НЕ тронуты
(они используют .cat-card, не .hv2-pc). */
.hv2-recent .hv2-pc__media { aspect-ratio: auto; height: 100px; } /* Owner: ещё −15px (115→100) */
.hv2-pc__photo-link { display: block; width: 100%; height: 100%; }
.hv2-pc__photo {
width: 100%; height: 100%;
/* 2026-07-09: cover резал новые рендеры 1600×1173 («Вы смотрели», медиа 100px) —
contain показывает картинку целиком */
object-fit: contain; object-position: center;
display: block;
transition: transform var(--dur-base) var(--ease-out);
}
.hv2-pc:hover .hv2-pc__photo { transform: scale(1.03); }
/* Badges — discount (sale), gift, hit, new */
.hv2-pc__badge {
position: absolute; top: 10px; left: 10px;
padding: 4px 10px;
border-radius: var(--r-card);
font: 700 11px/1 var(--ff-body);
letter-spacing: var(--ls-smallcaps);
text-transform: uppercase;
display: inline-flex; align-items: center; gap: 4px;
z-index: 1;
}
.hv2-pc__badge--sale { background: var(--c-orange); color: #fff; }
.hv2-pc__badge--hit { background: var(--c-blue); color: #fff; }
.hv2-pc__badge--new { background: var(--c-bg); color: var(--c-text); border: 1px solid var(--c-border); }
.hv2-pc__badge--gift { background: var(--c-success); color: #fff; top: 44px; }
/* Action buttons (wishlist + compare) — top-right of media */
.hv2-pc__wish,
.hv2-pc__compare {
position: absolute;
right: 10px;
width: 34px; height: 34px;
border-radius: var(--r-md);
background: var(--c-bg);
border: 1px solid var(--c-border);
display: flex; align-items: center; justify-content: center;
color: var(--c-text-2);
cursor: pointer;
opacity: 0;
transition: opacity var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
padding: 0;
z-index: 2;
}
.hv2-pc__wish { top: 10px; }
.hv2-pc__compare { top: 50px; }
.hv2-pc:hover .hv2-pc__wish,
.hv2-pc:hover .hv2-pc__compare,
.hv2-pc__wish:focus-visible,
.hv2-pc__compare:focus-visible { opacity: 1; }
.hv2-pc__wish:hover,
.hv2-pc__wish.is-on { color: var(--c-orange); border-color: var(--c-orange); }
.hv2-pc__compare:hover,
.hv2-pc__compare.is-on { color: var(--c-blue); border-color: var(--c-blue); }
.hv2-pc__body {
padding: var(--sp-4);
display: flex; flex-direction: column; gap: 6px; flex: 1;
}
.hv2-pc__brand {
font: 600 12px/1 var(--ff-body);
letter-spacing: var(--ls-smallcaps);
text-transform: uppercase;
color: var(--c-text);
opacity: 0.65;
}
.hv2-pc__name,
.hv2-pc__name:link,
.hv2-pc__name:visited {
/* iter-19.2 (2026-06-10): styles_modern.css:149 `a:visited { color: --c-blue }`
перебивал .hv2-pc__name (specificity 0,1,1 > 0,1,0) → после посещения
товара его карточка в карусели «Вы смотрели» имела синее имя по
дефолту. Явно фиксируем :link/:visited на тёмный, hover оставляем синий. */
font: 600 15px/1.35 var(--ff-body);
color: var(--c-text);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
min-height: 42px;
text-decoration: none;
}
.hv2-pc__name:hover,
.hv2-pc__name:focus { color: var(--c-blue); }
/* iter-06: rating (stars + N отзывов) НАД ценой */
.hv2-pc__rating {
display: inline-flex;
align-items: center;
gap: 7px;
text-decoration: none;
margin: 4px 0 2px;
}
.hv2-pc__stars { display: inline-flex; gap: 1px; color: var(--c-orange); }
.hv2-pc__rating-n { font: 500 13px/1 var(--ff-body); color: var(--c-text-2); }
.hv2-pc__rating:hover .hv2-pc__rating-n { color: var(--c-blue); text-decoration: underline; }
/* iter-29 (2026-07-24, Owner): в карусели «Вы смотрели» слот рейтинга резервируем
фикс. высоты на ВСЕХ карточках — у товаров без отзывов больше нет «пляшущего»
пустого пробела между именем и ценой. Вертикальные отступы переносим с самого
рейтинга на слот, чтобы заполненный и пустой слоты совпадали по высоте.
Скоуп — только .hv2-recent, прочие карусели не трогаем. */
.hv2-recent .hv2-pc__rating-slot { min-height: 19px; margin: 4px 0 2px; line-height: 0; }
.hv2-recent .hv2-pc__rating { margin: 0; }
.hv2-pc__price-row { display: flex; align-items: baseline; gap: var(--sp-2); margin-top: auto; }
.hv2-pc__price { font: 700 18px/1 var(--ff-body); color: var(--c-text); }
.hv2-pc__price-old { font: 400 13px/1 var(--ff-body); color: var(--c-text-2); text-decoration: line-through; }
.hv2-pc__save { font: 600 12px/1.2 var(--ff-body); color: var(--c-orange); margin-top: 2px; }
.hv2-pc__cta {
width: 100%; margin-top: var(--sp-3);
height: 40px;
background: var(--c-orange); color: #fff;
border: 0; border-radius: var(--r-md);
font: 600 13px/1 var(--ff-body); cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
transition: background var(--dur-fast) var(--ease-out);
}
.hv2-pc__cta:hover { background: var(--c-orange-dk); }
/* ───── hv2-carousel — horizontal scroll-snap (Discounted + future Новинки)
iter-06 (Owner 2026-06-03 review #2): per-view = 4 cards full visible на desktop
(как в vanilla Homepage-v2.html). Arrows visible всегда через disabled state opacity.
───── */
.hv2-carousel { position: relative; }
.hv2-carousel__track {
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc((100% - var(--sp-4) * 3) / 4);
gap: var(--sp-4);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
padding-block: 4px;
}
@media (max-width: 980px) {
.hv2-carousel__track { grid-auto-columns: calc((100% - var(--sp-4) * 2) / 3); }
}
@media (max-width: 720px) {
.hv2-carousel__track { grid-auto-columns: calc((100% - var(--sp-4)) / 2); }
}
.hv2-carousel__track::-webkit-scrollbar { display: none; }
.hv2-carousel__cell { scroll-snap-align: start; min-width: 0; display: flex; }
.hv2-carousel__cell > * { width: 100%; }
/* ════════════════════════════════════════════════════════════════════
2026-06-24 — карточки каталога (.cat-card) на ГЛАВНОЙ
────────────────────────────────────────────────────────────────────
Скидки (карусель) и Лидеры (сетка) используют тот же партиал, что плитка
каталога (products_list_row_v2 → .cat-card). По умолчанию .cat-card —
горизонтальный 3-col layout; здесь применяем те же override'ы, что
catalog_v2.css grid-view (.catalog-view--grid .cat-card), чтобы карточка
стала ВЕРТИКАЛЬНОЙ плиткой 1:1 с каталогом. Скоупим под .hv2-discounted /
.hv2-leaders — не задеваем каталог. *
════════════════════════════════════════════════════════════════════ */
.hv2-discounted .cat-card,
.hv2-leaders .cat-card {
grid-template-columns: 1fr !important;
grid-template-rows: auto auto auto;
gap: 12px;
min-height: 0;
height: 100%;
}
.hv2-discounted .cat-card .cat-card__media,
.hv2-leaders .cat-card .cat-card__media {
max-width: none; width: 100%; height: 180px; padding: 12px;
}
.hv2-discounted .cat-card__rail,
.hv2-leaders .cat-card__rail { align-items: stretch; padding-left: 0; border-left: 0; }
.hv2-discounted .cat-card__priceblock,
.hv2-leaders .cat-card__priceblock { align-items: flex-start; }
.hv2-discounted .cat-card__pricesub,
.hv2-leaders .cat-card__pricesub { justify-content: flex-start; }
.hv2-discounted .cat-card__kaspi,
.hv2-leaders .cat-card__kaspi { align-self: flex-start; }
/* stats: на главной нет grid-view предка (.products-list.catalog-view--grid),
поэтому .catalog-v2-band .cat-card .cat-stats (0,3,0) держит 4 колонки и текст
наезжает на узкой карточке. Форсируем 2×2 как в плитке каталога. */
.hv2-discounted .cat-card .cat-stats,
.hv2-leaders .cat-card .cat-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
/* Owner 2026-06-24: карусель скидок — КОМПАКТНЫЙ тизер. Убираем характеристики,
выбор размера, «Купить» / «Нужна консультация» / «В наличии», чтобы карточки
были ниже. Остаются: фото, бренд, название, рейтинг, цена + Выгода + Kaspi.
Клик по фото/названию ведёт на карточку товара. (Только .hv2-discounted —
лидеры остаются полными плитками.) */
.hv2-discounted .cat-card .cat-stats,
.hv2-discounted .cat-card .cat-size,
.hv2-discounted .cat-card__buyrow,
.hv2-discounted .cat-card__wa,
.hv2-discounted .cat-card__stock,
.hv2-discounted .cat-card__kaspi,
.hv2-discounted .cat-card .sv-size-picker { display: none !important; }
/* «Лидеры» — сетка 5 в ряд × 4 ряда (20 карточек) на десктопе; .cat-card —
прямые grid-элементы. Вертикальный layout карточки даёт мостик выше. */
.hv2-leaders .hv2-products--cat {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: var(--sp-4);
align-items: stretch;
}
@media (max-width: 1100px) {
.hv2-leaders .hv2-products--cat { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
.hv2-leaders .hv2-products--cat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.hv2-leaders .hv2-products--cat { grid-template-columns: 1fr; }
}
/* карточка тянется на всю высоту ячейки — ряды карусели/сетки выровнены */
.hv2-discounted .hv2-carousel__cell { align-items: stretch; }
.hv2-carousel__arrow {
position: absolute;
top: 40%;
width: 44px; height: 44px;
border-radius: 999px;
background: var(--c-bg);
border: 1px solid var(--c-border);
color: var(--c-text);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
box-shadow: var(--sh-sm);
transition: opacity var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
z-index: 2;
padding: 0;
}
.hv2-carousel__arrow--prev { left: -22px; }
.hv2-carousel__arrow--next { right: -22px; }
.hv2-carousel__arrow:hover { color: var(--c-orange); border-color: var(--c-orange); box-shadow: var(--sh-lg); }
/* iter-06 (Owner 2026-06-03): кнопки видны всегда даже когда disabled — affordance что
блок = carousel. opacity .35 disabled, 1 active. */
.hv2-carousel__arrow:disabled { opacity: 0.35; pointer-events: none; cursor: default; }
/* Wrapper для Leaders — отступ снизу */
.hv2-leaders { padding-block: var(--sp-7); }
.hv2-discounted { padding-block: var(--sp-6); }
/* ───── iter-06 δ-B fix #4 (Owner-approved divergence 2026-06-03):
Adaptive 4↔5 layout для hv2-discounted.
Когда блок попадает в зону ниже sidebar bottom (левая колонка пуста рядом
с ним) — JS добавляет .is-wide и проставляет margin-left inline.
CSS bumps per-view от 4 (compact alongside sidebar) до 5 (full-width).
───── */
.hv2-discounted { transition: margin-left var(--dur-base) var(--ease-out); }
.hv2-discounted.is-wide .hv2-carousel[data-per-view="5"] .hv2-carousel__track {
grid-auto-columns: calc((100% - var(--sp-4) * 4) / 5);
}
@media (max-width: 1100px) {
/* Below 1100 layout stacks (sidebar above content) — JS forces per-view=4. */
.hv2-discounted.is-wide { margin-left: 0 !important; }
}
/* ════════════════════════════════════════════════════════════════════
iter-06 (2026-06-03) — δ-B: hv2-promos / hv2-whyus / hv2-wu
Port из Design_System1/.../iter06/components/components.css:
- hv2-promos (1787) + hv2-promo-card
- hv2-whyus (866) + hv2-wu (871) + hv2-wu__icon/title/body + --orange
════════════════════════════════════════════════════════════════════ */
/* ───── hv2-promos — 2 image-cards side-by-side ───── */
.hv2-promos {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-4);
}
.hv2-promo-card {
display: block;
border-radius: var(--r-lg);
overflow: hidden;
text-decoration: none;
transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.hv2-promo-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.hv2-promo-card img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
object-fit: cover;
}
@media (max-width: 720px) {
.hv2-promos { grid-template-columns: 1fr; }
}
/* ───── hv2-whyus — 9 tiles grid ───── */
.hv2-whyus__head {
text-align: center;
margin-bottom: var(--sp-6);
}
.hv2-whyus__head h2 {
font-family: var(--ff-display);
font-weight: 700;
font-size: 30px;
line-height: 1.2;
margin: 0;
}
.hv2-whyus__sub {
color: var(--c-text-2);
max-width: 38em;
margin: 8px auto 0;
font-size: var(--fs-sm);
line-height: 1.5;
}
.hv2-whyus {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-4);
}
@media (max-width: 980px) {
.hv2-whyus { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.hv2-whyus { grid-template-columns: 1fr; }
}
.hv2-wu {
background: var(--c-bg);
border: 1px solid var(--c-border);
border-radius: var(--r-card);
padding: var(--sp-5);
}
.hv2-wu__icon {
width: 52px;
height: 52px;
border-radius: var(--r-md);
background: var(--c-blue-light);
color: var(--c-blue);
display: flex;
align-items: center;
justify-content: center;
}
.hv2-wu__icon--orange {
background: var(--c-orange-tint);
color: var(--c-orange);
}
.hv2-wu__icon svg { width: 28px; height: 28px; }
.hv2-wu__title {
font-family: var(--ff-display);
font-weight: 600;
font-size: 17px;
line-height: 1.3;
color: var(--c-text);
margin-top: var(--sp-3);
}
.hv2-wu__body {
font-family: var(--ff-body);
font-weight: 400;
font-size: 14px;
line-height: 1.55;
color: var(--c-text-2);
margin-top: 6px;
}
/* ════════════════════════════════════════════════════════════════════
iter-06 (2026-06-03) — δ-B fix #1: hv2-seotext (2/3 + 1/3 grid с tabs)
Port из Design_System1/.../iter06/components/components.css 1045-1115 + 1766-1784.
Reference: design.md §12.11.
════════════════════════════════════════════════════════════════════ */
.hv2-seotext-wrap { padding-block: var(--sp-7); }
.hv2-seotext-tabs {
display: inline-flex;
gap: 4px;
background: var(--c-bg-soft);
border: 1px solid var(--c-border);
border-radius: var(--r-pill);
padding: 4px;
margin-bottom: var(--sp-5);
}
.hv2-seotext-tabs button {
background: transparent;
border: 0;
padding: 8px 16px;
font: 600 13px/1 var(--ff-body);
color: var(--c-text-2);
border-radius: var(--r-card);
cursor: pointer;
}
.hv2-seotext-tabs button:hover { color: var(--c-text); }
.hv2-seotext-tabs button.is-active {
background: var(--c-bg);
color: var(--c-blue);
box-shadow: var(--sh-sm);
}
.hv2-seotext-grid {
display: grid;
/* Owner δ-F fix #1 (2026-06-04): расширили aside с 1/3 (2fr 1fr ≈ 67/33)
до ~42% (1.4fr 1fr ≈ 58/42). Photo промо-баннер шире чем quare, при
33% ширине обрезается до полосы, при 42% видно нормально + сохраняется
2/3-text баланс читабельности. */
grid-template-columns: 1.4fr 1fr;
gap: var(--sp-6);
align-items: stretch;
}
@media (max-width: 900px) {
.hv2-seotext-grid { grid-template-columns: 1fr; }
}
.hv2-seotext {
padding-block: var(--sp-6);
border-top: 1px solid var(--c-border-soft);
}
.hv2-seotext__block { margin-bottom: var(--sp-5); }
.hv2-seotext__block h2,
.hv2-seotext__block h3 {
font: 700 24px/1.25 var(--ff-display);
color: var(--c-text);
margin: 0 0 10px;
}
/* 2026-08-07: видимый H1 главной (Owner) — чуть крупнее блоковых h2 */
.hv2-seotext__block h1 {
font: 700 28px/1.25 var(--ff-display);
color: var(--c-text);
margin: 0 0 10px;
}
.hv2-seotext__block p {
font: 400 17px/1.65 var(--ff-body);
color: var(--c-text);
margin: 0;
}
.hv2-seotext__block a {
color: var(--c-blue);
text-decoration: underline;
text-underline-offset: 3px;
}
.hv2-seotext__sig {
text-align: right;
font: 400 17px/1.6 var(--ff-body);
color: var(--c-text);
margin-top: var(--sp-5);
}
.hv2-seotext__sig span { color: var(--c-text-2); }
.hv2-seotext-aside {
/* Owner 2026-06-03 review: расширено с 360px (~1 карточка) до 580px (~2 карточки).
align-self: stretch чтобы aside занимал всю высоту left col grid row, а min-height
гарантирует что и при коротком тексте фото не схлопывается. */
min-height: 580px;
align-self: stretch;
border-radius: var(--r-lg);
overflow: hidden;
position: relative;
background: var(--c-bg-soft);
}
.hv2-seotext-aside__photo {
/* position:absolute + inset:0 → photo занимает весь aside-контейнер
(включая случай когда aside растянут grid stretch выше min-height). */
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.hv2-seotext-aside__photo[hidden] { display: none; }
.hv2-seotext-aside__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hv2-seotext-aside__photo-overlay {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: var(--sp-5);
background: linear-gradient(180deg, transparent 0%, rgba(31,45,61,.7) 100%);
color: #fff;
}
.hv2-seotext-aside__illust {
width: 100%;
height: 100%;
min-height: 360px;
display: flex;
flex-direction: column;
background: linear-gradient(160deg, #F7FAFB 0%, #EBF7FA 100%);
}
.hv2-seotext-aside__illust[hidden] { display: none; }
.hv2-seotext-aside__illust .hv2-seotext__illust {
width: 100%;
flex: 1;
display: block;
}
.hv2-seotext-aside__caption {
padding: var(--sp-4) var(--sp-5) var(--sp-5);
color: var(--c-text);
}
.hv2-seotext-aside__kicker {
font: 600 12px/1.2 var(--ff-body);
letter-spacing: 0.02em;
margin-bottom: 6px;
}
.hv2-seotext-aside__heading {
font: 700 22px/1.2 var(--ff-display);
}
/* ════════════════════════════════════════════════════════════════════
iter-06 (2026-06-03 δ-B fix #3): hv2-sidebar-brands
Port из Design_System1/.../iter06/components/components.css 999-1043.
Reference: catalog.jsx CatalogSidebar «Официальные бренды».
Data: Smarty $brands_sidebar = Manufacturers::GetAllVisible() из homepage.php.
════════════════════════════════════════════════════════════════════ */
.hv2-sidebar-brands {
background: var(--c-bg);
border: 1px solid var(--c-border);
border-radius: var(--r-md);
padding: 12px;
display: flex;
flex-direction: column;
gap: 8px;
margin: 12px 0;
}
.hv2-sidebar-brands__head {
font: 700 13px/1.2 var(--ff-body);
letter-spacing: 0;
color: var(--c-text-2);
padding: 4px 4px 8px;
border-bottom: 1px solid var(--c-border-soft);
margin-bottom: 4px;
}
.hv2-sidebar-brands__item {
display: flex;
align-items: center;
justify-content: center;
height: 52px;
border: 1px solid var(--c-border);
border-radius: var(--r-md);
background: var(--c-bg);
text-decoration: none;
transition: border-color var(--dur-fast) var(--ease-out),
background var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out);
overflow: hidden;
}
.hv2-sidebar-brands__item:hover {
border-color: var(--c-blue);
background: var(--c-blue-tint);
transform: translateY(-1px);
}
.hv2-sidebar-brands__item img {
max-height: 36px;
max-width: 80%;
object-fit: contain;
display: block;
}
.hv2-sidebar-brands__name {
font: 700 16px/1 var(--ff-display);
letter-spacing: 0.02em;
color: var(--c-text);
text-transform: uppercase;
}
/* ════════════════════════════════════════════════════════════════════
iter-06 (2026-06-03) — δ-C: hv2-reviews / hv2-rv / hv2-articles / hv2-art / hv2-price
Port из Design_System1/.../iter06/components/components.css:
- hv2-reviews (887-913) + hv2-rv (avatar palette --1/--2/--3 at 1809) + 4-col grid (1814)
- hv2-articles (915-944) + hv2-art (media --1/--2/--3 tints)
- hv2-price__head/cols/card/badge/chain/list/note/cta/cost-chip (1109-1210)
════════════════════════════════════════════════════════════════════ */
/* ───── Reviews — 4 cards с avatar palette ───── */
.hv2-reviews {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-4);
}
@media (max-width: 1100px) { .hv2-reviews { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .hv2-reviews { grid-template-columns: 1fr; } }
.hv2-rv {
background: var(--c-bg);
border: 1px solid var(--c-border);
border-radius: var(--r-card);
padding: var(--sp-5);
display: flex; flex-direction: column; gap: var(--sp-3);
}
.hv2-rv__head { display: flex; align-items: center; gap: var(--sp-3); }
.hv2-rv__avatar {
width: 44px; height: 44px;
border-radius: var(--r-md);
display: flex; align-items: center; justify-content: center;
font: 700 16px/1 var(--ff-display);
flex: none;
}
.hv2-rv__avatar--1 { background: var(--c-blue-light); color: var(--c-blue); }
.hv2-rv__avatar--2 { background: #FFF4E5; color: var(--c-orange); }
.hv2-rv__avatar--3 { background: #E8F5E9; color: #2E8B57; }
.hv2-rv__name { font: 600 14px/1.2 var(--ff-body); color: var(--c-text); }
.hv2-rv__date { font: 400 13px/1.2 var(--ff-body); color: var(--c-text-2); }
.hv2-rv__stars { color: var(--c-orange); display: inline-flex; gap: 2px; }
.hv2-rv__quote { font: 400 14px/1.55 var(--ff-body); color: var(--c-text); margin: 0; }
.hv2-rv__product {
font: 500 13px/1 var(--ff-body); color: var(--c-blue);
display: inline-flex; align-items: center; gap: 4px;
text-decoration: none;
}
.hv2-rv__product:hover { text-decoration: underline; }
/* ───── Articles — 3 cards с media tint ───── */
.hv2-articles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-5);
}
@media (max-width: 900px) { .hv2-articles { grid-template-columns: 1fr; } }
.hv2-art { text-decoration: none; color: var(--c-text); display: block; }
.hv2-art__media {
position: relative;
aspect-ratio: 16/9;
border-radius: var(--r-card);
overflow: hidden;
background: var(--c-bg-soft);
display: flex; align-items: center; justify-content: center;
}
.hv2-art__media--1 { background: linear-gradient(135deg, #eef3f6, #dde7ec); }
.hv2-art__media--2 { background: linear-gradient(135deg, #f4ecdd, #e8d9b8); }
.hv2-art__media--3 { background: linear-gradient(135deg, #e9f0ed, #d5e3dd); }
.hv2-art__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hv2-art__cat {
position: absolute; top: 12px; left: 12px;
background: rgba(255, 255, 255, .92); color: var(--c-blue);
font: 700 12px/1 var(--ff-body); letter-spacing: 0; text-transform: none;
padding: 6px 11px; border-radius: 999px; box-shadow: 0 2px 8px rgba(16, 24, 40, .06);
}
.hv2-art__glyph {
width: 54px; height: 54px; border-radius: 999px;
display: grid; place-items: center;
background: rgba(255, 255, 255, .78); color: var(--c-blue);
box-shadow: 0 6px 16px rgba(16, 24, 40, .08);
}
.hv2-art__date { font: 400 12px/1 var(--ff-body); color: var(--c-text-2); margin-top: var(--sp-3); letter-spacing: .04em; }
.hv2-art__title { font: 700 18px/1.35 var(--ff-display); color: var(--c-text); margin-top: 6px; }
.hv2-art__more { font: 500 13px/1 var(--ff-body); color: var(--c-blue); margin-top: var(--sp-3); display: inline-flex; align-items: center; gap: 4px; }
.hv2-art:hover .hv2-art__title { color: var(--c-blue); }
/* Owner 2026-06-04 δ-G: Articles в carousel со стрелками.
data-per-view=3 → 3 карточки видны, arrow-scroll прокручивает остальные.
Carousel inherit'ит .hv2-carousel базовые правила, тут только grid override. */
.hv2-articles-carousel[data-per-view="3"] .hv2-carousel__track {
grid-auto-columns: calc((100% - var(--sp-5) * 2) / 3);
gap: var(--sp-5);
}
@media (max-width: 900px) {
.hv2-articles-carousel[data-per-view="3"] .hv2-carousel__track {
grid-auto-columns: calc((100% - var(--sp-4)) / 2);
}
}
/* ───── PriceAdvantage — comparison + closing band ───── */
.hv2-price__head { margin-bottom: var(--sp-6); text-align: center; }
.hv2-price__head h2 {
font-family: var(--ff-display); font-weight: 700;
font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2);
color: var(--c-text);
}
.hv2-price__head p {
margin: 12px auto 0; max-width: 40em;
font: 400 17px/1.5 var(--ff-body); color: var(--c-text-2);
}
.hv2-price__cols {
display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5);
margin-bottom: var(--sp-5);
}
@media (max-width: 900px) { .hv2-price__cols { grid-template-columns: 1fr; } }
.hv2-price__card {
border: 1px solid var(--c-border); border-radius: var(--r-lg);
background: var(--c-bg); padding: var(--sp-6);
}
.hv2-price__card--neg { border-color: #F3C9C2; }
.hv2-price__card--pos { border-color: #BFE3CD; }
.hv2-price__card-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: var(--sp-5); }
.hv2-price__badge {
flex: none; width: 48px; height: 48px; border-radius: 999px;
display: grid; place-items: center; color: #fff;
}
.hv2-price__badge--neg { background: #E5533C; }
.hv2-price__badge--pos { background: #2F9E5E; }
.hv2-price__card-title { font: 700 23px/1.25 var(--ff-display); color: var(--c-text); }
.hv2-price__card-sub { margin-top: 5px; font: 400 16px/1.45 var(--ff-body); color: var(--c-text-2); }
/* chain of nodes */
.hv2-price__chain {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
padding: 14px 16px; border-radius: var(--r-md); margin-bottom: var(--sp-5);
}
.hv2-price__chain--neg { background: #FCEEEB; }
.hv2-price__chain--pos { background: #EAF6EF; }
.hv2-price__node { font: 600 15px/1 var(--ff-body); white-space: nowrap; }
.hv2-price__chain--neg .hv2-price__node { color: #B23B27; }
.hv2-price__chain--pos .hv2-price__node { color: #1F7A47; }
.hv2-price__arrow { display: inline-flex; color: var(--c-text-3); }
/* lists */
.hv2-price__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 17px; }
.hv2-price__list li { display: flex; gap: 13px; }
.hv2-price__dot { flex: none; width: 9px; height: 9px; border-radius: 999px; margin-top: 9px; }
.hv2-price__list--neg .hv2-price__dot { background: #E5533C; }
.hv2-price__list--pos .hv2-price__dot { background: #2F9E5E; }
.hv2-price__item-t { font: 600 18px/1.3 var(--ff-body); color: var(--c-text); }
.hv2-price__item-d { margin-top: 4px; font: 400 16px/1.55 var(--ff-body); color: var(--c-text-2); }
.hv2-price__chip {
display: inline-block; margin-left: 7px; padding: 2px 9px; border-radius: 999px;
font: 700 13px/1.5 var(--ff-body); vertical-align: middle;
}
.hv2-price__chip--neg { background: #FCE4DF; color: #C53D26; }
.hv2-price__note {
display: flex; align-items: center; gap: 10px; margin-top: var(--sp-5);
padding: 14px 16px; border-radius: var(--r-md);
font: 400 15px/1.45 var(--ff-body);
}
.hv2-price__note--neg { background: #FCEEEB; color: #B23B27; }
.hv2-price__note--neg b { color: #C53D26; }
/* closing value band */
.hv2-price__cta {
display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: var(--sp-6);
background: var(--c-blue-light); border-radius: var(--r-lg);
padding: var(--sp-7) var(--sp-7) var(--sp-7) var(--sp-8);
overflow: hidden;
margin-top: var(--sp-5);
}
@media (max-width: 900px) { .hv2-price__cta { grid-template-columns: 1fr; } }
.hv2-price__cta-copy h3 { font: 700 34px/1.2 var(--ff-display); color: var(--c-text); margin: 0; }
.hv2-price__cta-copy h3 span { color: var(--c-blue); }
.hv2-price__cta-copy p { margin: 14px 0 0; max-width: 34em; font: 400 18px/1.55 var(--ff-body); color: var(--c-text-2); }
/* iter-19.7 (2026-06-10): :link/:visited явный override + harden background.
styles_modern.css:149 `a:visited { color: var(--c-blue) }` после клика
делал visible color синим — кнопка выглядела «инверсной» через ngrok
(visited state не cleanуется быстро в браузере owner'а). */
.hv2-price__cta-btn,
.hv2-price__cta-btn:link,
.hv2-price__cta-btn:visited {
display: inline-flex; align-items: center; gap: 9px; margin-top: var(--sp-5);
height: 54px; padding-inline: 30px; border-radius: 999px;
background: var(--c-orange) !important;
color: #fff !important;
text-decoration: none;
font: 600 18px/1 var(--ff-body);
transition: background var(--dur-fast) var(--ease-out);
}
.hv2-price__cta-btn:hover,
.hv2-price__cta-btn:focus {
background: var(--c-orange-dk, #d96f2a) !important;
color: #fff !important;
}
.hv2-price__cta-art { position: relative; min-height: 280px; align-self: stretch; }
.hv2-price__cta-art > img {
position: absolute; right: 0; bottom: -8px; width: 78%; max-width: 360px;
filter: drop-shadow(0 18px 30px rgba(16, 24, 40, .14));
}
/* iter-26 (2026-06-15): cover-layout для new transparent PNG со встроенными чипами.
Approved CTA height 376px сохраняется (art-cell в grid track всё ещё 280).
img расширяется absolute за art-cell на -sp-7 (top/bottom/right) до границ блока;
parent .hv2-price__cta overflow:hidden + border-radius обрезают по углам.
PNG имеет alpha → фон CTA (--c-blue-light) виден через прозрачные пиксели. */
.hv2-price__cta-art--cover > img {
position: absolute;
top: calc(-1 * var(--sp-7));
right: calc(-1 * var(--sp-7));
left: 0;
width: calc(100% + var(--sp-7));
height: calc(100% + 2 * var(--sp-7));
max-width: none;
object-fit: cover;
object-position: center;
filter: none;
border-radius: 0;
}
/* iter-26 v5 (2026-06-15): на узких viewport (≤1200px) убираем full-block extension
— на art-cell 418×280 cover scale картинки 2:1 даёт width 752, chips вылезают
за clipped area под padding text-колонки. Возвращаемся к fit-внутри-art-cell. */
@media (max-width: 1200px) {
.hv2-price__cta-art--cover > img {
inset: 0;
top: 0; right: 0; bottom: 0; left: 0;
width: 100%;
height: 100%;
object-fit: contain;
border-radius: var(--r-card);
}
}
.hv2-price__cost-chip {
position: absolute; display: flex; align-items: center; gap: 9px;
background: #fff; border: 1px solid var(--c-border); border-radius: 14px;
padding: 9px 12px; box-shadow: var(--sh-md);
}
.hv2-price__cost-icon {
position: relative; flex: none; width: 30px; height: 30px; border-radius: 8px;
display: grid; place-items: center; background: var(--c-bg-soft); color: var(--c-text-3);
}
.hv2-price__cost-icon::after {
content: ''; position: absolute; inset: 0; border-radius: 8px;
background: linear-gradient(135deg, transparent 44%, #E5533C 44%, #E5533C 56%, transparent 56%);
opacity: .85;
}
.hv2-price__cost-label { font: 600 12px/1.25 var(--ff-body); color: var(--c-text-2); }
/* ════════════════════════════════════════════════════════════════════
iter-06 (2026-06-03) — δ-D: hv2-contact / hv2-useful / hv2-prefooter
Port из Design_System1/.../iter06/components/components.css §1842-1950.
════════════════════════════════════════════════════════════════════ */
/* ───── ContactCTA — light-blue callback band ─────
iter-27 (2026-06-15): 3-col layout (copy + portrait центр + quote справа).
Было 2-col (copy + portrait-в-круге). */
.hv2-contact {
display: grid; grid-template-columns: 1.4fr auto 1fr;
gap: var(--sp-6);
align-items: stretch; /* iter-27: stretch чтобы quote мог space-between full-height */
background: var(--c-blue-light);
border-radius: var(--r-lg);
margin-block: var(--sp-7);
padding: var(--sp-7);
position: relative;
overflow: hidden;
}
@media (max-width: 1200px) {
.hv2-contact { grid-template-columns: 1.5fr auto; }
.hv2-contact__quote { display: none; }
}
@media (max-width: 900px) {
.hv2-contact { grid-template-columns: 1fr; }
.hv2-contact__portrait { display: none; }
}
/* iter-27 v5 (Owner 2026-06-15): убраны лишние margin-top на детях copy —
приoritет на единый gap sp-2 + минимальные acceptions, чтобы блок вернулся
к approved height (~376) с добавленным consent line. */
.hv2-contact__copy { display: flex; flex-direction: column; gap: var(--sp-2); }
.hv2-contact__copy h3 { font: 700 28px/1.15 var(--ff-display); color: var(--c-text); margin: 0; }
.hv2-contact__copy p { font: 400 16px/1.5 var(--ff-body); color: var(--c-text); margin: 0; }
.hv2-contact__phone-row { display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap; }
.hv2-contact__phone { font: 700 30px/1 var(--ff-body); color: var(--c-text); }
.hv2-contact__phone a { color: inherit; text-decoration: none; }
.hv2-contact__meta { font: 400 13px/1.3 var(--ff-body); color: var(--c-text-2); }
.hv2-contact__hint { font: 400 14px/1.5 var(--ff-body); color: var(--c-text-2); }
.hv2-contact__consent { font: 400 12px/1.4 var(--ff-body); color: var(--c-text-2); margin: 0; max-width: 480px; }
.hv2-contact__consent a { color: var(--c-blue); text-decoration: underline; text-underline-offset: 2px; }
/* iter-27 v2 (2026-06-15): pill input + pill button с arrow, height 52px.
input находится внутри .call_back_phone_container (wrapper для invalid_phone). */
.hv2-contact__form { display: flex; gap: var(--sp-3); max-width: 480px; align-items: flex-start; }
.hv2-contact__form input,
.hv2-contact__form .call_back_phone_container input {
width: 100%;
height: 52px;
padding: 0 var(--sp-5);
border: 1px solid var(--c-border);
border-radius: 999px;
background: #fff;
font: 400 15px/1 var(--ff-body);
color: var(--c-text);
box-sizing: border-box;
transition: border-color var(--dur-fast) var(--ease-out);
}
.hv2-contact__form input::placeholder { color: var(--c-text-3, #98a5b3); }
.hv2-contact__form input:focus {
outline: none;
border-color: var(--c-blue);
}
.hv2-contact__form button {
display: inline-flex; align-items: center; gap: 8px;
height: 52px; padding: 0 var(--sp-5);
background: var(--c-blue); color: #fff; border: 0;
border-radius: 999px;
font: 600 15px/1 var(--ff-body); cursor: pointer;
white-space: nowrap;
transition: background var(--dur-fast) var(--ease-out);
}
.hv2-contact__form button:hover { background: var(--c-blue-dark, #0e6c8c); }
.hv2-contact__form button svg { flex: none; }
.hv2-contact__check {
display: flex; align-items: center; gap: var(--sp-2);
font: 400 12px/1.4 var(--ff-body); color: var(--c-text);
margin-top: var(--sp-3);
cursor: pointer;
}
.hv2-contact__check a { color: var(--c-blue); text-decoration: underline; text-underline-offset: 3px; }
/* iter-13: success message styling. Owner spec — выглядит как text без кнопок. */
.hv2-contact__success {
margin-top: var(--sp-4);
font: 500 15px/1.5 var(--ff-body);
color: var(--c-text);
}
.hv2-contact__portrait { position: relative; min-height: 200px; }
.hv2-contact__portrait-bg {
position: absolute; right: -20px; bottom: -20px;
width: 280px; height: 280px;
border-radius: 999px;
background: linear-gradient(135deg, #ffe4a3 0%, #f3c562 100%);
opacity: .6;
}
.hv2-contact__portrait-figure {
position: absolute; right: 0; bottom: 0;
width: 200px; height: 230px;
background: linear-gradient(180deg, transparent 0%, transparent 25%, #ffd479 25%, #ffd479 100%);
border-radius: 100px 100px 8px 8px;
}
/* iter-06 δ-D fix #1 (Owner 2026-06-03): real portrait photo поверх жёлтого
круга. Crop в круг — чтобы вписать в bg-shape vanilla дизайна. */
.hv2-contact__portrait-photo {
position: absolute; right: -10px; bottom: -10px;
width: 260px; height: 260px;
border-radius: 999px;
object-fit: cover;
object-position: 50% 25%; /* focus on face, top-third of image */
box-shadow: 0 12px 28px rgba(16, 24, 40, .18);
z-index: 1;
}
/* iter-27 v4 (Owner 2026-06-15): эксперт fits полностью в блок (голова не обрезается).
Image bottom-aligned to block bottom edge (bleed -sp-7), top остается ВНУТРИ
блока — height ограничен container height + sp-7 (allowed bleed). */
.hv2-contact__portrait--v2 {
position: relative;
min-width: 320px;
min-height: 0;
align-self: stretch;
}
.hv2-contact__portrait--v2 .hv2-contact__portrait-photo {
position: absolute;
left: 50%;
bottom: calc(-1 * var(--sp-7)); /* image bottom = block bottom edge */
transform: translateX(-50%);
right: auto; top: auto;
width: auto;
height: calc(100% + var(--sp-7)); /* fills container height + bottom bleed */
max-height: calc(100% + var(--sp-7)); /* upper bound — голова не вылезает за block top */
max-width: 100%;
border-radius: 0;
object-fit: contain;
object-position: center bottom;
box-shadow: none;
z-index: 1;
}
/* Quote-колонка справа: текст в TOP-RIGHT corner, author в BOTTOM-RIGHT corner.
space-between → распределение по вертикали, text-align:right + padding для
выравнивания к правому краю блока. */
.hv2-contact__quote {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
align-self: stretch;
padding-block: var(--sp-2);
}
.hv2-contact__quote-text {
font: 400 14px/1.55 var(--ff-body);
color: var(--c-text);
margin: 0;
max-width: 240px;
text-align: right;
}
.hv2-contact__quote-author {
font: 400 14px/1.4 var(--ff-body);
color: var(--c-text-2);
margin: 0;
text-align: right;
}
/* iter-28 fix (2026-06-16, Owner): на узких экранах (≤1200) блок ContactCTA
расползался — базовое правило `.hv2-contact__quote{display:flex}` выше по файлу
перебивало `display:none` из @media(max-width:1200) (строка ~3828, та же
специфичность, побеждает последнее). Грид уходил в 2 колонки, но цитата
оставалась видимой → неявная 3-я колонка → горизонтальный overflow.
Переутверждаем скрытие цитаты ПОСЛЕ базового правила. Фото консультанта
остаётся (portrait виден до ≤900). Owner: «правая надпись исчезает, фото
человека остаётся». */
@media (max-width: 1200px) {
.hv2-contact__quote { display: none; }
}
/* ───── UsefulLinks — 7 square icon tiles ───── */
.hv2-useful {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: var(--sp-3);
padding-block: var(--sp-7);
padding-inline: var(--sp-4);
background: var(--c-bg-soft);
border-radius: var(--r-lg);
margin-bottom: var(--sp-7);
}
@media (max-width: 900px) { .hv2-useful { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px) { .hv2-useful { grid-template-columns: repeat(2, 1fr); } }
.hv2-useful__item {
display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
padding: var(--sp-4) var(--sp-2);
border-radius: var(--r-md);
text-decoration: none;
color: var(--c-text);
text-align: center;
transition: background var(--dur-fast) var(--ease-out);
}
.hv2-useful__item:hover { background: var(--c-bg); }
.hv2-useful__icon {
width: 56px; height: 56px;
border-radius: var(--r-md);
background: var(--c-blue-light); color: var(--c-blue);
display: flex; align-items: center; justify-content: center;
}
.hv2-useful__title { font: 500 13px/1.3 var(--ff-body); color: var(--c-text); }
/* Orange accent variant (≤25% rule — only single tile per UsefulLinks bar) */
.hv2-useful__icon--orange { background: var(--c-orange-tint, #FFF4E5); color: var(--c-orange); }
/* ───── PreFooterSEO — 3-col centered link grid (2026-06-24) ───── */
.hv2-prefooter {
display: grid;
grid-template-columns: repeat(3, auto); /* колонки по ширине контента — плотный центр */
justify-content: center; /* кластер из 3 колонок по центру, поля по краям */
gap: var(--sp-7) clamp(56px, 8vw, 140px);
padding-block: var(--sp-7);
border-top: 1px solid var(--c-border-soft);
}
@media (max-width: 940px) { .hv2-prefooter { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; gap: var(--sp-6) var(--sp-7); } }
@media (max-width: 520px) { .hv2-prefooter { grid-template-columns: 1fr; } }
.hv2-prefooter__col h4 {
font: 700 15px/1.2 var(--ff-display);
color: var(--c-text);
margin: 0 0 var(--sp-3);
}
.hv2-prefooter__col a {
display: block;
font: 400 13px/2 var(--ff-body);
color: var(--c-text-2);
text-decoration: none;
}
.hv2-prefooter__col a:hover { color: var(--c-blue); }
/* ════════════════════════════════════════════════════════════════════
iter-06 (2026-06-03) — δ-E: hv2-footer (Modern DARK Footer)
Port из Design_System1/.../iter06/components/components.css §946-993
+ prototype/shell.jsx Footer L246-295.
════════════════════════════════════════════════════════════════════ */
.hv2-footer { background: var(--c-text); color: #fff; }
.hv2-footer__inner {
display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-7);
padding-block: var(--sp-7);
}
@media (max-width: 1100px) { .hv2-footer__inner { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 720px) { .hv2-footer__inner { grid-template-columns: 1fr; gap: var(--sp-5); } }
.hv2-footer__about p {
color: rgba(255,255,255,.7); font-size: 14px; line-height: 1.6;
max-width: 28em;
margin: 0;
}
.hv2-footer__logo {
height: 34px; display: block; margin-bottom: var(--sp-3);
filter: brightness(0) invert(1);
}
/* Owner 2026-06-11: лого в футере теперь кликабельный (-обёртка
.hv2-footer__brand). Линк без подчёркивания, opacity-hover для
visual feedback. */
.hv2-footer__brand {
display: inline-block;
text-decoration: none;
transition: opacity var(--dur-fast) var(--ease-out);
}
.hv2-footer__brand:hover,
.hv2-footer__brand:focus { opacity: 0.85; }
.hv2-footer__brand .hv2-footer__logo { margin-bottom: 0; }
.hv2-footer__contact {
margin-top: var(--sp-4);
display: flex; flex-direction: column; gap: 4px;
}
.hv2-footer__contact strong { color: #fff; font-weight: 600; font-size: 16px; }
.hv2-footer__contact strong a { color: inherit; text-decoration: none; }
.hv2-footer__contact span { color: rgba(255,255,255,.7); font-size: 14px; }
.hv2-footer__contact span a {
display: inline; color: inherit; text-decoration: none;
font-size: inherit; line-height: inherit;
}
.hv2-footer h4 {
font: 600 13px/1.2 var(--ff-body);
letter-spacing: 0.01em;
color: rgba(255,255,255,.62);
margin: 0 0 var(--sp-4);
}
.hv2-footer a {
display: block;
color: rgba(255,255,255,.85);
text-decoration: none;
font-size: 14px; line-height: 1.9;
transition: color var(--dur-fast) var(--ease-out);
}
.hv2-footer a:hover { color: var(--c-blue); }
/* Newsletter subscribe form — preserve hooks #footer_subscribe_form + .input-required */
.hv2-footer__sub-lead {
color: rgba(255,255,255,.7); font-size: 14px;
margin: 0 0 var(--sp-3);
}
.hv2-footer__sub-form { margin: 0 0 var(--sp-4); }
.hv2-footer__sub-row { display: flex; gap: 8px; }
.hv2-footer__sub-input {
flex: 1; height: 40px;
padding: 0 var(--sp-4);
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.15);
border-radius: var(--r-md);
color: #fff;
font: 400 14px/1 var(--ff-body);
box-sizing: border-box;
}
.hv2-footer__sub-input::placeholder { color: rgba(255,255,255,.45); }
.hv2-footer__sub-input:focus {
outline: none;
border-color: var(--c-blue);
background: rgba(255,255,255,.12);
}
.hv2-footer__sub-btn {
height: 40px; padding: 0 18px;
border-radius: var(--r-md); border: 0;
background: var(--c-orange); color: #fff;
font: 600 13px/1 var(--ff-body);
cursor: pointer;
white-space: nowrap;
transition: background var(--dur-fast) var(--ease-out);
}
.hv2-footer__sub-btn:hover { background: var(--c-orange-dk, #d96f2a); }
.hv2-footer .input-error {
color: #ff8b78; font-size: 12px; margin-top: 6px;
}
/* Bottom strip — copyright + payment cards */
.hv2-footer__bottom {
border-top: 1px solid rgba(255,255,255,.1);
padding-block: var(--sp-4);
display: flex; align-items: center; justify-content: space-between;
color: rgba(255,255,255,.55); font-size: 13px;
gap: var(--sp-4);
flex-wrap: wrap;
}
.hv2-footer__pay {
display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap;
}
/* 2026-06-24: правая группа нижней полосы (оплата + «Мобильная версия») */
.hv2-footer__bottom-right {
display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap;
}
.hv2-footer__mobile {
color: rgba(255,255,255,.55); font-size: 13px; text-decoration: none; white-space: nowrap;
transition: color var(--dur-fast) var(--ease-out);
}
.hv2-footer__mobile:hover { color: #fff; text-decoration: underline; }
.hv2-footer__pay-label {
color: rgba(255,255,255,.55); font-size: 13px;
margin-right: 8px;
}
.hv2-footer__pay-card {
display: inline-flex; align-items: center; justify-content: center;
width: 110px; height: 62px;
background: #fff;
border-radius: 10px;
padding: 6px 12px;
flex: none;
box-sizing: border-box;
}
.hv2-footer__pay-card img { width: 100%; height: 100%; object-fit: contain; }
/* Owner 2026-06-03 δ-E fix #1: подпись под каждой payment card. */
.hv2-footer__pay-item {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.hv2-footer__pay-name {
font: 500 12px/1 var(--ff-body);
color: rgba(255,255,255,.7);
text-align: center;
}
/* ═══ iter-06 (δ-E fix 2026-06-03): защита от Chrome Auto Dark Mode ═══
Дублирует meta color-scheme — некоторые версии Chrome игнорируют meta
но уважают CSS. Применяется к через :root. */
:root { color-scheme: light only; }
/* ═══ Owner δ-F (2026-06-03) + δ-F fix #1 (2026-06-04) ═══
Глобальный min-width страницы. Ниже этого порога desktop-браузер показывает
горизонтальную прокрутку снизу вместо сжатия — защита от ломки фильтра
("Прую инный") + наезда карточек.
2026-06-03: 1100px (Owner pick). 2026-06-04 bumped до 1200px (= совпадает с
mobile-проекции, единый baseline). */
body { min-width: 1200px; }
/* ════════════════════════════════════════════════════════════════════
iter-15 (2026-06-08) — Owner: «везде скругления должны быть одинаковые».
Single canonical radius `--r-card` (12px) для ВСЕХ контейнеров. Этот блок
принудительно протягивает токен на компоненты, которые исторически были
с `border-radius: 0` (band-style полосы, header items) — теперь они
визуально card-style с одинаковым радиусом.
════════════════════════════════════════════════════════════════════ */
/* USP trust strip — было full-bleed flat. Теперь centered card-style:
полоса остаётся прозрачной, контейнер внутри получает soft bg + radius. */
/* Owner 2026-06-18 #1 (round 6): инфо-строка вплотную к hero сверху (0),
нижний отступ 16 (sp-4). v2-main pt обнулён. */
.v2-usp { background: transparent; padding: 0 0 var(--sp-4); }
.v2-usp__inner {
background: var(--c-bg-soft);
/* Owner 2026-08-10: верх без скругления — строка сливается с hero
(v2-slider-fullwidth скруглён только сверху) в единый блок */
border-radius: 0 0 var(--r-card) var(--r-card);
padding: var(--sp-3) var(--sp-4);
}
/* Sidebar widget headers — были без радиуса; синхронизируем с widget'ом. */
.v2-sidebar__widget,
.hv2-sidebar-brands { border-radius: var(--r-card); overflow: hidden; }
/* «Горячие предложения» (hot deals box) и любые orange-tint info-cards.
Селекторы охватывают возможные варианты разметки (legacy + v2). */
.v2-sidebar__widget--hotdeals,
.hv2-hotdeals,
[class*="hot_deals"],
[class*="hot-deal"] { border-radius: var(--r-card); }
/* Header «Заказать звонок» pill — был без радиуса (legacy). */
.header__request-call,
.hv2-header__request-call { border-radius: var(--r-card); }
/* «-N%» бейджи в карточках товаров (включая carousels и catalog row). */
.cat-card__badge,
.hv2-pc__badge,
.hv2-card__badge,
.tovar_item__badge { border-radius: var(--r-card); }
/* Inputs / select / search — всегда small radius (8px), отличается от карточек
намеренно: small UI control. */
input[type=text],
input[type=search],
input[type=email],
input[type=tel],
input[type=number] { border-radius: var(--r-input); }
.v2-header__search-input,
.hv2-search input,
.hv2-search { border-radius: var(--r-input); }
/* Select внутри карточек/фильтра — card-radius (12) чтобы совпасть с другими блоками */
select { border-radius: var(--r-card); }
/* ════════════════════════════════════════════════════════════════════
iter-16 (2026-06-09) — DESKTOP 1200 GEOMETRY UNIFICATION
────────────────────────────────────────────────────────────────────
Цель: единый layout-grid для всей desktop-главной на viewport=1200.
- Все content-контейнеры опираются на --layout-max + --layout-gutter
(max 1560px, gutter 32px) → на 1200 контент занимает x∈[32,1168].
- Sidebar 260px + 24px gap + content 852px.
- Hero/filter не «дороже» каталога: hero img 220px, filter компактнее,
первая секция после фильтра подтянута выше.
- Симметричные радиусы по design-system: cards/sidebar/filter/products
/reviews/whyus = 12px; promo/contact/banner = 20px; buttons = 999px.
- Никаких transform/absolute хаков — лечим источник (width / grid /
padding) у соответствующих компонентов.
Owner-spec 2026-06-09. Применяется ко всем страницам, где грузится этот
файл (homepage + products). Mobile не затронут.
════════════════════════════════════════════════════════════════════ */
/* ─── (1) infobox — full-bleed синяя полоса вверху, без радиуса ─── */
.hv2-infobox {
width: 100%;
margin: 0;
border-radius: 0;
padding: 8px var(--layout-gutter);
box-sizing: border-box;
text-align: center;
}
/* ════════════════════════════════════════════════════════════════════
Owner 2026-06-19 — ШАПКА 2×2 СЕТКА (зеркало сетки body).
col1 = 260 (= catalog sidebar), column-gap 24, col2 = 1fr.
row1: [ЛОГО] [поиск · телефоны · действия]
row2: [регион · РУС/КАЗ] [меню]
Контент-колонка стартует на 32+260+24 = 316 — как у body. JS-хуки сохранены.
════════════════════════════════════════════════════════════════════ */
.hv2-headgrid {
display: grid;
grid-template-columns: 260px minmax(0, 1fr);
grid-template-areas: "brand top" "meta nav";
column-gap: var(--sp-5); /* 24 — = sidebar→content gap */
row-gap: var(--sp-2); /* 8 */
align-items: center;
padding-block: var(--sp-3);
}
.hv2-headgrid > .hv2-main__brand { grid-area: brand; }
.hv2-headgrid > .hv2-headmeta { grid-area: meta; }
.hv2-headgrid > .hv2-headtop { grid-area: top; }
.hv2-headgrid > .hv2-headnav { grid-area: nav; }
/* Лого крупнее — заполняет 260-колонку */
.hv2-headgrid .hv2-main__brand { width: 100%; align-items: center; }
.hv2-headgrid .hv2-logo { width: 100%; max-width: 220px; height: auto; }
/* row2/col1 — под лого: только язык РУС/КАЗ (6.4). Выровнен под левый край лого
(лого центрирован в 260-колонке → left≈52; смещаем язык вправо на 20px). */
.hv2-headmeta {
display: flex; align-items: center; justify-content: flex-start;
gap: var(--sp-3); width: 100%;
}
.hv2-headmeta .hv2-action--lang { margin: 0 0 0 20px; }
/* 6.4: регион «Алматы / Адреса салонов» в строке меню (под поиском) — плоский
синий pin без круга-бордера, как раньше под лого. */
.hv2-headnav .hv2-region { padding: 2px 4px; gap: 8px; flex: none; }
.hv2-headnav .hv2-region .hv2-contact-block__icon {
width: auto; height: auto; border: 0; color: var(--c-blue);
}
.hv2-headnav .hv2-region .hv2-contact-block__t { font-size: 14px; line-height: 1.15; }
.hv2-headnav .hv2-region .hv2-contact-block__s { font-size: 12px; }
/* 6.2: «Заказать звонок» в строке меню — синяя ссылка-кнопка слева от меню. */
.hv2-nav__call {
flex: none; background: none; border: 0; padding: 0; cursor: pointer;
color: var(--c-blue); font: 600 var(--fs-sm)/1 var(--ff-body); white-space: nowrap;
}
.hv2-nav__call:hover { text-decoration: underline; }
/* Owner 2026-06-27 #96: на узких/зуме меню (.hv2-nav__links flex-wrap) переносится
на 2 строки и наползает на «Заказать звонок». Ниже 1366 скрываем «Заказать
звонок» в строке меню (CTA остаётся в телефоне шапки и sticky-полосе) → меню
умещается в 1 строку. */
@media (max-width: 1366px) {
.hv2-headnav .hv2-nav__call { display: none; }
}
/* 6.2: расписание «Пн.–вс. …» под номерами телефонов — приглушённое. */
.hv2-contact-block__schedule { color: var(--c-text-2); font-size: 12px; }
/* row1/col2 — поиск (тянется на «2 ячейки») + телефоны + действия */
.hv2-headtop { display: flex; align-items: center; gap: var(--sp-5); }
/* Owner 2026-06-27 (#93): выравнивание row1 по сетке фильтра каталога (4 колонки).
Поиск = левая половина контента (правый край = граница кол2/кол3 фильтра = центр
контента = старт колонки «Жёсткость»); телефоны сразу за ним (≈ колонка 3);
действия (Корзина) — к правому краю (margin-left:auto) = правый край сетки.
flex (не grid) → отзывчиво: на узких поиск ужимается, фильтр там reflow'ится. */
.hv2-headtop .hv2-search { flex: 0 1 calc(50% - 12px); min-width: 240px; }
.hv2-headtop .hv2-contact-block--phone { flex: none; }
.hv2-headtop .hv2-actions { flex: none; margin-left: auto; }
/* row2/col2 — меню вправо (spacer уже в HTML) */
.hv2-headgrid > .hv2-headnav { width: 100%; }
/* ─── (2) header / nav / hero геометрия ───
.v2-container уже max-width:1560 + gutter:32. .hv2-headnav в HTML обёрнут
.v2-container → ничего лишнего не требуется. .v2-slider-fullwidth и
.hv2-banner живут внутри .v2-container → автоматически совпадают.
Hero-картинка: жёсткая высота 220px (fixed CTA-baseline, не растягивает
первый экран). */
.hv2-banner__slide img {
height: 220px;
max-height: 220px;
object-fit: cover;
object-position: center;
}
.hv2-banner { min-height: 220px; }
/* ─── (3) USP trust-line ───
iter-15 сделал inner card-style (bg + radius + sp-3 padding). iter-16:
сохраняем card-style, но выводим геометрию по системе — inner совпадает
с .v2-container, min-height 56, padding-block 10-12 (sp-3≈12 ок).
Подписи не обрезаются (white-space:normal уже задан в .v2-usp__label). */
.v2-usp__inner {
min-height: 56px;
padding: 10px var(--layout-gutter);
box-sizing: border-box;
}
/* ─── (4) Main 2-col grid ───
sidebar = 260px фиксированный, content = minmax(0, 1fr), gap = 24.
На 1200 viewport: контейнер с padding 32+32 → внутренние 1136. 1136 −
260 − 24 = 852 → content column ровно 852px. ✓ */
.v2-main {
/* Owner 2026-06-18 #1(r5): pt 0 (воздух даёт USP), pb 0 — нижний воздух перед
«Лидерами» дают сами секции в v2-content (их pb 32) + leaders pt 32 = 64.
Было 0/32 → давало лишние +32 (disc→leaders = 96). */
padding-block: 0;
padding-inline: var(--layout-gutter);
}
.v2-main__inner {
grid-template-columns: 260px minmax(0, 1fr);
gap: var(--sp-5); /* 24 */
}
/* Owner 2026-06-18 #2(r3): сайдбар главной — ровные минимальные зазоры 8px.
gap НЕ используем (между hv2-cs и brands лежит flex-item #hv2-sidebar-end —
sentinel для sticky-кнопки, давал двойной зазор 16). Вместо gap — явный
margin-bottom 8 на реальных блоках; sentinel и последний блок без отступа. */
.v2-sidebar { gap: 0; }
.v2-sidebar > #hv2-sidebar-end { height: 0; margin: 0; }
.v2-sidebar > .hv2-cs,
.v2-sidebar > .hv2-sidebar-brands { margin: 0 0 var(--sp-2); }
.v2-sidebar > .v2-sidebar__widget { margin: 0; }
/* Sidebar widgets — общий card radius 12 */
.hv2-cs,
.hv2-sidebar-brands,
.v2-sidebar__widget,
.v2-sidebar .cs-wrap {
border-radius: var(--r-card);
}
/* ─── (5) Section rhythm ───
.hv2-section 56px (vs sp-7=48). --tight 32. head margin-bottom 24.
Первая секция после фильтра (=каталог товаров) подтягивается выше:
padding-top 32 вместо 56 → визуально «−24». */
.hv2-section { padding-block: var(--sp-6); } /* Owner 2026-06-18 #1(r4): общий ритм 56→32 */
.hv2-section--tight { padding-block: var(--sp-6); } /* 32 */
.hv2-section__head { margin-bottom: var(--sp-5); } /* 24 */
/* Первая .hv2-section после фильтра в .v2-content («Каталог товаров»).
Структура DOM: .v2-content > .v2-filter, .v2-recent, .hv2-section, …
Trick: применяем сжатие ко всем sibling'ам .v2-filter, потом восстанавливаем
полный 56px для всех кроме первой (двойной ~). */
.v2-content > .v2-filter ~ .hv2-section { padding-top: var(--sp-6); } /* 32 */
.v2-content > .v2-filter ~ .hv2-section ~ .hv2-section { padding-top: 56px; }
/* ─── (6) Category cards (большие 4-col) ───
gap 16 (sp-4) — мельче чем 24 чтобы тайлы плотнее.
Высота 144px фиксированная (одинаковая посадка подписи).
Aspect-ratio: auto → высота управляется явно.
__bottom: 14/16 padding, min-height 56 → подпись всегда на одной линии. */
.hv2-cats-big--4col { gap: var(--sp-4); }
.hv2-cats-big--4col .hv2-cat-big {
/* 8 (Owner): тайлы каталога ВЫШЕ. height:144 → 4:3 (196) → ещё ×1.5 → 8:9 (~294).
2026-07-24 (Owner): оставляем портретный 8:9 + зум 165% как есть; «белое поле»
будет убрано за счёт БОЛЕЕ ВЫСОКИХ исходников фото (Owner адаптирует картинки),
а не изменением пропорций тайла. */
aspect-ratio: 8 / 9;
height: auto;
border-radius: var(--r-card);
/* Owner 2026-06-27: зум-аут ВСЕХ тайлов (как детские) — субъекты целиком в кадре,
не обрезаны портретным тайлом. Белый фон сливается с фоном фото. */
background-size: 165% auto;
background-position: center;
background-color: #fff;
}
.hv2-cats-big--4col .hv2-cat-big__bottom {
padding: 14px 16px;
min-height: 56px;
box-sizing: border-box;
}
/* ─── (7) Product grid «Лидеры продаж» — 5 cols ───
Сохраняем 5-col, gap 24 vertical + 16 horizontal (row-gap × column-gap).
Карточка: radius 12, 1px solid border, no shadow at rest, shadow на hover. */
.hv2-products--5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
column-gap: var(--sp-4); /* 16 */
row-gap: var(--sp-5); /* 24 */
}
.hv2-pc {
border: 1px solid var(--c-border);
border-radius: var(--r-card);
box-shadow: none;
}
.hv2-pc:hover { box-shadow: var(--sh-md); }
.hv2-pc__body {
padding: var(--sp-4); /* 16 */
gap: 6px;
}
.hv2-pc__cta {
height: 36px;
border-radius: var(--r-card);
margin-top: var(--sp-3); /* 12 */
}
/* ─── (8) Promo / SEO / WhyUs ─── */
.hv2-seotext-wrap { padding-block: var(--sp-6); } /* Owner 2026-06-18 #1(r4): единый ритм 32 */
/* Owner 2026-06-29 #1/#2: SEO-блок выровнен по 5-колоночной сетке лидеров.
Текст = колонки 1–3 (с отступом карточки 16 → левый край = текст карточки),
фото = колонки 4–5 (правые 2 карточки). gap = inter-card 16. */
.hv2-seotext-grid {
grid-template-columns: repeat(5, 1fr);
gap: var(--sp-4); /* 16 = gap лидеров */
align-items: start;
}
.hv2-seotext-grid > .hv2-seotext { grid-column: 1 / 4; padding-left: var(--sp-4); }
.hv2-seotext-grid > .hv2-seotext-aside { grid-column: 4 / 6; }
@media (max-width: 900px) {
.hv2-seotext-grid { grid-template-columns: 1fr; } /* стек на мобиле (перекрывает 5-col выше) */
.hv2-seotext-grid > .hv2-seotext,
.hv2-seotext-grid > .hv2-seotext-aside { grid-column: auto; }
.hv2-seotext-grid > .hv2-seotext { padding-left: 0; }
}
.hv2-promos {
grid-template-columns: 1fr 1fr;
gap: var(--sp-5); /* 24 */
}
.hv2-promo-card {
aspect-ratio: auto;
height: 300px;
border-radius: 20px; /* design-system: promo = 20 */
}
.hv2-promo-card img {
aspect-ratio: auto;
height: 100%;
width: 100%;
object-fit: cover;
}
.hv2-whyus {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--sp-4); /* 16 */
}
.hv2-wu {
padding: var(--sp-5); /* 24 */
border-radius: var(--r-card); /* 12 */
}
/* ─── (9) Contact CTA / banner — promo-tier radius 20 ─── */
.hv2-contact,
.hv2-contact-cta,
.hv2-banner { border-radius: 20px; }
/* ─── (10) Reviews — card radius 12 ─── */
.hv2-rv { border-radius: var(--r-card); }
/* ─── (11) Footer inner геометрия ─── */
.hv2-footer__inner {
max-width: var(--layout-max);
margin-inline: auto;
padding-inline: var(--layout-gutter);
box-sizing: border-box;
}
/* ─── (12) Legacy width cap cleanup ───
Старые 960/1000-pixel max-width контейнеры на главной — снимаем cap.
Селекторы намеренно scoped к homepage-классам, чтобы не задеть legacy
страницы (cart/login). */
.homepage .center-block,
.homepage .headless-center-block,
.homepage .container1 {
max-width: none;
}
/* ════════════════════════════════════════════════════════════════════
iter-17 (2026-06-09) — DESKTOP QA FIXES после аудита Codex (FAIL)
────────────────────────────────────────────────────────────────────
Источники iter-16 не покрыли:
- horizontal overflow @1200 (scrollWidth=1264, clientWidth=1200);
- реальный видимый hero — `.v2-slider-fullwidth` 320px, а не
`.hv2-banner__slide img`;
- CTA внутри hero обрезается на 1536/1920;
- `` подпадает под legacy
`header { width: 1200px }` (styles_modern.css:1036) → создаёт overflow;
- `.hv2-actions` правый край ≈ 1259 на 1200 (cart clip);
- первая секция после фильтра определялась хрупким `~` селектором;
- sidebar L1/L2/all rows — рассинхрон по text-anchor (44/52/56).
Подход:
- НЕ глобальный `overflow-x:hidden`. Лечим источники.
- Минимум новых `!important`; повышаем специфичность правильно.
- HTML/Smarty не трогаем (отдельные partials в filter/index получают
при необходимости wrap-classes — см. ниже список).
HTML точки правок (минимум):
1) `index.html`: первой `.hv2-section` после `.v2-filter` добавлен
класс `.hv2-section--after-filter` (явный target).
════════════════════════════════════════════════════════════════════ */
/* ─── (A) Price section overflow ───
— HTML5 , получает
`width:1200px` из styles_modern.css:1036 legacy `header` правила.
Specificity `.hv2-price__head` = (0,1,0) > `header` (0,0,1) — без !important. */
.hv2-price__head,
.hv2-price__head h2,
.hv2-price__head p {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
/* ─── (B) Header overflow: hv2-actions/cart должны помещаться ───
.hv2-main — `.v2-container` flex row внутри `` width:1200.
Inner content edge = 1136. Items: brand, search, city, lang, phone,
actions. На 1200 contact-block--phone + actions(comparison+wish+cart)
не помещались — clip cart right ≈ 91px.
Стратегия для 1200..1279:
- Сжать gap в .hv2-main с 16 до 8 (минус 5×8 = 40px).
- Поиск может shrink ниже 200px (min-width:0).
- Скрыть второй телефонный номер + мессенджеры (оставить главный +
заголовок "Заказать звонок" но без "Пн.–вс. 9:00–21:00" suffix).
- Слегка уменьшить action-buttons (compare/wishlist) до 56×52,
корзина (--cart-xl) — 96px min-width с full text+icon. */
@media (max-width: 1279px) {
.hv2-main { gap: var(--sp-2) !important; } /* 8 */
.hv2-main .hv2-search { min-width: 0; }
.hv2-main .hv2-search input[type="text"] { padding-left: 38px; }
.hv2-main .hv2-contact-block--btn .hv2-contact-block__s { font-size: 11px; }
/* Phone block — компакт: один номер, без мессенджеров. Второй
номер + WA/TG скрыты; «Заказать звонок» без suffix. */
.hv2-contact-block--phone .hv2-contact-block__phone2 { display: none; }
.hv2-contact-block--phone .hv2-contact-block__s--muted { display: none; }
.hv2-actions { gap: var(--sp-1); }
.hv2-action {
min-width: 56px;
height: 52px;
padding: 4px 8px;
}
.hv2-action--cart-xl {
min-width: 96px;
height: 56px;
padding: 8px 14px;
gap: 4px;
}
.hv2-action--cart-xl svg { width: 22px; height: 22px; }
}
/* ─── (C) Hero: реальный видимый slider ───
Закрепляем height/object-position на `.v2-slider-fullwidth .slick-slide img`
(а не на бесполезном `.hv2-banner__slide img`).
Стратегия CTA: object-position center 60% — смещает crop к низу
картинки, где визуально живёт CTA-кнопка. На широких viewports
высоту немного увеличиваем — CTA остаётся в кадре.
Тестовые viewports:
- 1200: 260
- 1280-1535: 280
- ≥1536: 300
Примечание: правило `.hv2-banner__slide img height:220` из iter-16
относится к нижнему промо-banner'у — оставляем как есть. */
.v2-slider-fullwidth {
height: 260px;
}
.v2-slider-fullwidth .slick-slider,
.v2-slider-fullwidth .slick-list,
.v2-slider-fullwidth .slick-track,
.v2-slider-fullwidth .slick-slide,
.v2-slider-fullwidth .slick-slide > div {
height: 260px;
}
.v2-slider-fullwidth .slick-slide img {
height: 260px;
object-fit: cover;
object-position: center 60%;
}
@media (min-width: 1280px) {
.v2-slider-fullwidth,
.v2-slider-fullwidth .slick-slider,
.v2-slider-fullwidth .slick-list,
.v2-slider-fullwidth .slick-track,
.v2-slider-fullwidth .slick-slide,
.v2-slider-fullwidth .slick-slide > div,
.v2-slider-fullwidth .slick-slide img { height: 280px; }
.v2-slider-fullwidth .slick-slide img { object-position: center 55%; }
}
@media (min-width: 1536px) {
.v2-slider-fullwidth,
.v2-slider-fullwidth .slick-slider,
.v2-slider-fullwidth .slick-list,
.v2-slider-fullwidth .slick-track,
.v2-slider-fullwidth .slick-slide,
.v2-slider-fullwidth .slick-slide > div,
.v2-slider-fullwidth .slick-slide img { height: 300px; }
.v2-slider-fullwidth .slick-slide img { object-position: center 50%; }
}
/* Hero ↔ Nav: маленький breath между навигацией и слайдером */
.v2-slider-fullwidth { margin-top: var(--sp-2); }
/* ─── (D) USP / trust-line: align to grid 1136 ───
iter-15/16 сделал full-bleed .v2-usp + card-style .v2-usp__inner.
Owner: нужна симметрия hero/main — card width 1136 (то есть прямо
контент-edge в [32, 1168]). Сделаем .v2-usp__inner ровно 1136 на 1200
и согласованно на широких viewports — кэп 1496 (как hero/main inner).
*/
.v2-usp__inner {
/* Радиус 12, padding 12 24 — компактнее, ниже card mass.
.v2-usp снаружи имеет padding:8 0 — снимаем чтобы не было double-frame. */
width: auto;
max-width: calc(var(--layout-max) - 2 * var(--layout-gutter));
/* На 1200: max-width = 1560 - 64 = 1496. Реальная width ограничится
parent .v2-usp (full-bleed) шириной viewport, т.е. на 1200 = 1200.
Чтобы card был 1136 — задаём `max-width: calc(100% - 2*32px)` через
padding-inline у parent. */
}
.v2-usp {
padding-inline: var(--layout-gutter); /* 32 → card-edge от viewport [32, viewport-32] */
}
/* ─── (E) Sidebar catalog: unified row rhythm ───
L1 padding: 12 16, gap 12, icon-box 28 → text-anchor = 16+28+12 = 56.
panel-head/all link был padding-left 52 (off −4). L2 row был
padding-left 44 (off −12). Привести всё к 56. */
.hv2-cs__all { padding-left: 56px; }
.hv2-cs__l2-row { padding-left: 56px; padding-right: var(--sp-4); }
/* Chevrons / arrow — общий right inset 16.
.hv2-cs__all уже несёт свой padding-right sp-4(16); доп. padding-right на
panel-head давал двойной отступ (32) → стрелка «Все →» не доходила до колонки
шевронов и образовывалась пустая белая зона справа (Owner 2026-06-18 #2.1).
Убрали — теперь стрелка/шеврон в одной правой колонке (inset 16). */
.hv2-cs__l1 { padding-right: var(--sp-4); }
.hv2-cs__l2-row .hv2-cs__l2-chev { margin-right: 0; }
/* ─── (F) First section after filter — robust class target ───
Перешли на класс `.hv2-section--after-filter` (HTML: index.html добавил
класс на первую секцию каталога/категорий после фильтра). Старый
sibling-selector оставлен как fallback. */
.hv2-section.hv2-section--after-filter,
.v2-content > .v2-filter ~ .hv2-section {
padding-top: var(--sp-6); /* 32 */
}
/* reset: следующие секции остаются на полном rhythm */
.v2-content > .v2-filter ~ .hv2-section ~ .hv2-section {
padding-top: var(--sp-6); /* Owner 2026-06-18 #1(r5): 56→32 — единый ритм */
}
/* ════════════════════════════════════════════════════════════════════
iter-18 (2026-06-09) — HERO READABLE BANNER + AFTER-FILTER SPACING
────────────────────────────────────────────────────────────────────
iter-17 фиксил высоту hero 260/280/300 + object-position 60/55/50%,
что обрезало headline сверху на всех desktop viewports (visual FAIL).
Probe: текущая hero-картинка (`/uploads/carousel/316@1x.jpg`) имеет
natural 2067×761 px, ratio 2.716. На 1136 контент-ширине показать
баннер без crop = 1136/2.716 ≈ 418 px высоты. Owner-target 260-300px
математически невозможен без обрезки headline или CTA.
Решение iter-18: aspect-ratio контейнера = natural ratio баннера.
Картинка показывается без crop на любом desktop viewport. Высота
адаптивна: на 1200 = 418, на 1366 = 479, на 1920 (cap inner 1496)
= 550. Это превышает owner-range, но это compromise за primary
acceptance «headline + CTA полностью видны».
`object-fit: contain` — страховка от любого crop при разных
intrinsic-ratios у будущих banner-картинок (если admin зальёт
баннер с другой пропорцией, image останется внутри коробки).
──────────────────────────────────────────────────────────────────── */
/* Сброс iter-17 фиксированных высот hero */
.v2-slider-fullwidth,
.v2-slider-fullwidth .slick-slider,
.v2-slider-fullwidth .slick-list,
.v2-slider-fullwidth .slick-track,
.v2-slider-fullwidth .slick-slide,
.v2-slider-fullwidth .slick-slide > div {
height: auto;
min-height: 0;
max-height: none;
}
/* iter-18: контейнер фиксированной высоты + object-fit:contain.
Image (2067×761, ratio 2.716) показывается полностью без crop:
на 1200 high=300, image displayed 815×300, centered with 160px
padding по бокам (заполняется --c-bg-soft). На 1366/1440/1536/1920
контейнер шире, image stays 815×300 без crop. На самых широких
высота поднимается до 360 чтобы дать image больше места. */
.v2-slider-fullwidth {
width: 100%;
height: 300px;
margin-top: var(--sp-2); /* воздух между nav и hero — сохранён из iter-17 */
overflow: hidden;
}
@media (min-width: 1366px) { .v2-slider-fullwidth { height: 320px; } }
@media (min-width: 1536px) { .v2-slider-fullwidth { height: 340px; } }
@media (min-width: 1800px) { .v2-slider-fullwidth { height: 360px; } }
.v2-slider-fullwidth .slick-slider,
.v2-slider-fullwidth .slick-list,
.v2-slider-fullwidth .slick-track,
.v2-slider-fullwidth .slick-slide,
.v2-slider-fullwidth .slick-slide > div,
.v2-slider-fullwidth .slick-slide .carousel,
.v2-slider-fullwidth .slick-slide .carousel a,
.v2-slider-fullwidth .slick-slide .carousel picture {
width: 100%;
height: 100%;
}
.v2-slider-fullwidth .slick-slide img {
width: 100%;
height: 100%;
object-fit: contain; /* iter-18: гарантия full-image visibility */
object-position: center center;
display: block;
background: var(--c-bg-soft); /* лёгкое заполнение если ratio мизмач */
}
/* ─── (after-filter spacing) ──────────────────────────────
iter-17 ставил padding-top: 32. Owner: gap от фильтра до «Каталог
товаров» должен быть 24-32px. Оставляем 24px (минимум) — каталог
подтягивается ещё ближе. */
.hv2-section.hv2-section--after-filter,
.v2-content > .v2-filter ~ .hv2-section {
padding-top: var(--sp-6); /* Owner 2026-06-18 #1(r5): 24→32 — фильтр→секция = 64 (ритм 32) */
}
/* ════════════════════════════════════════════════════════════════════
iter-19 (2026-06-10) — HOMEPAGE COMMERCE: «Вы смотрели» v2 + cart wiring
────────────────────────────────────────────────────────────────────
1) Cart icon hardening — гарантируем что кнопка корзины не «инвертится»
при .not_empty (issue через ngrok) и счётчик виден после первого
add-to-cart. Базовые правила в styles.css:15476-15484; здесь добавляем
explicit .not_empty правила с !important чтобы перебить возможный
legacy override.
2) «Вы смотрели» (v2-recent) теперь рендерится через hv2-carousel +
hv2-pc — компонентного CSS правила уже есть, здесь только убираем
legacy `.tovars_carousel`/`.tovar_item` блок если что-то осталось.
──────────────────────────────────────────────────────────────────── */
/* Cart icon — всегда orange background, белая иконка */
.hv2-action--cart,
.hv2-action--cart.not_empty {
background: var(--c-orange) !important;
border-color: var(--c-orange) !important;
color: #fff !important;
}
.hv2-action--cart svg,
.hv2-action--cart.not_empty svg {
color: #fff !important;
fill: none;
stroke: currentColor;
}
.hv2-action--cart:hover,
.hv2-action--cart.not_empty:hover {
background: var(--c-orange-dk) !important;
border-color: var(--c-orange-dk) !important;
}
/* Счётчик: после add-to-cart `is_empty` снимется JS-ом (cartbox.js:21);
но если cache хранит inline html без `is_empty` снятия — счётчик
должен показаться как только .not_empty активен (страховка). */
.hv2-action--cart.not_empty .hv2-action__count {
display: inline-flex !important;
}
/* «Вы смотрели» legacy block hide если случайно дренулся (старый шаблон
расположен в .legacy backup, не подгружается) */
.v2-recent .tovars_carousel,
.v2-recent .tovar_item { display: none; }
/* hv2-recent section — внутри .v2-recent wrapper в DOM. Section использует
--tight padding (32) от iter-16 spec — норм. */
.v2-recent .hv2-recent { margin-block: 0; }
/* ════════════════════════════════════════════════════════════════════
iter-19.3 (2026-06-10) — hero banner card-radius
────────────────────────────────────────────────────────────────────
Owner: «везде на главной должен быть единный вариант скругления».
iter-05 #3 правило выше (строка 2039-2047) ставило `border-radius: 0
!important` на slider/slide/img — это шло вразрез с design-system
(--r-card = 12px для cards/sidebar/filter/products/whyus / promo 20).
Hero — это card-tier blok, значит --r-card (12px). Возвращаем
скругление контейнеру + slick-detail’ам, перебивая `!important`
через большую specificity (.v2-slider-fullwidth .slick-slide
= 0,3,0). `overflow: hidden` уже на контейнере (iter-18) — image
корректно клиппится по углам.
──────────────────────────────────────────────────────────────────── */
.v2-slider-fullwidth {
/* Owner 2026-08-10: низ без скругления — hero сливается с USP-строкой
(v2-usp__inner скруглена только снизу) в единый блок */
border-radius: var(--r-card) var(--r-card) 0 0 !important;
overflow: hidden !important;
}
.v2-slider-fullwidth .slick-slider,
.v2-slider-fullwidth .slick-list,
.v2-slider-fullwidth .slick-track,
.v2-slider-fullwidth .slick-slide,
.v2-slider-fullwidth .slick-slide > div,
.v2-slider-fullwidth .slick-slide .carousel,
.v2-slider-fullwidth .slick-slide picture,
.v2-slider-fullwidth .slick-slide a,
.v2-slider-fullwidth .slick-slide img {
border-radius: 0 !important; /* inner: 0, чтобы клиппинг
шёл от контейнера, без
двойных скруглений */
}
/* ════════════════════════════════════════════════════════════════════
iter-19.4 (2026-06-10) — Hero FOUC fix (pre-slick-init)
────────────────────────────────────────────────────────────────────
Owner: при загрузке страницы 2-3 сек hero показывается обрезанным
стэком с боковыми стрелками; после slick init layout исправляется.
Причина: pre-init все 2+ banner-`
- ` рендерятся подряд внутри
`.main-slider`, плюс slick CSS даёт default `.slick-prev/.slick-next`
до того как `arrows: false` отключит их (utils.js:227).
Решение — CSS guard for pre-init state:
1. До `.slick-initialized` показываем только первый slide.
2. Контейнер ограничен высотой как и после init.
3. Slick arrows внутри hero hide полностью (опция уже false в JS,
но мы перебиваем CSS на случай race condition / cache).
──────────────────────────────────────────────────────────────────── */
.v2-slider-fullwidth .main-slider:not(.slick-initialized) {
display: block;
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
list-style: none;
margin: 0; padding: 0;
}
.v2-slider-fullwidth .main-slider:not(.slick-initialized) > li {
display: block;
width: 100%;
height: 100%;
}
.v2-slider-fullwidth .main-slider:not(.slick-initialized) > li ~ li {
display: none !important; /* скрываем второй, третий и далее до slick */
}
/* slick arrows: arrows:false в JS, но если HTML-cache отдал их раньше
inline-style — скроем CSS-ом. */
.v2-slider-fullwidth .slick-prev,
.v2-slider-fullwidth .slick-next {
display: none !important;
}
/* ════════════════════════════════════════════════════════════════════
iter-19.5 (2026-06-10) — Hero высота под hv2-banner image natural
────────────────────────────────────────────────────────────────────
iter-18 ставил `.v2-slider-fullwidth { height: 300px }` потому что
тогда внутри жил legacy slick + object-fit:contain (letterbox).
После iter-19.4 legacy убран, активный hv2-banner__slide img
использует object-fit:cover — фиксированный 300px контейнер
обрезал нижнюю часть картинки с CTA.
Owner: «размер стал меньше — вернуть высоту как было». Возвращаем
контейнер к auto-высоте, пусть baner img сам определяет высоту
(image natural 2067×761 → ratio 2.716 → 1136 ширина даёт ≈418 высоту).
──────────────────────────────────────────────────────────────────── */
/* Owner 2026-06-10: hero auto-height (=418 на 1200) был визуально
слишком большой; «вернуть как было раньше». Возвращаемся к компактной
фикс-высоте iter-18 (280px на 1200, поднимается на широких viewport'ах).
hv2-banner img растягивается object-fit:cover — нижняя часть с CTA
слегка обрезается, owner accepts. */
.v2-slider-fullwidth {
height: 280px !important;
min-height: 0 !important;
max-height: none !important;
}
@media (min-width: 1366px) { .v2-slider-fullwidth { height: 300px !important; } }
@media (min-width: 1536px) { .v2-slider-fullwidth { height: 320px !important; } }
@media (min-width: 1800px) { .v2-slider-fullwidth { height: 340px !important; } }
/* Внутренние slick/hv2 элементы наследуют 100% высоту, чтобы
.hv2-banner__slide img правильно cover-рендерился. */
.v2-slider-fullwidth .slick-slider,
.v2-slider-fullwidth .slick-list,
.v2-slider-fullwidth .slick-track,
.v2-slider-fullwidth .slick-slide,
.v2-slider-fullwidth .slick-slide > div {
height: 100% !important;
}
.v2-slider-fullwidth .hv2-banner {
border-radius: 0 !important; /* outer .v2-slider-fullwidth уже даёт 12 */
margin: 0 !important;
min-height: 0 !important;
height: 100% !important;
}
.v2-slider-fullwidth .hv2-banner__slide,
.v2-slider-fullwidth .hv2-banner__slide.is-active {
height: 100% !important;
}
.v2-slider-fullwidth .hv2-banner__slide img {
height: 100% !important;
max-height: none !important;
width: 100% !important;
object-fit: cover !important;
object-position: center 35% !important; /* верх кадра — приоритет
headline; CTA внизу
частично обрезается */
}
/* ════ 2026-06-26: ЕДИНАЯ СИСТЕМА СКРУГЛЕНИЙ — кнопки-CTA + чипы скидок = 12px ════
Перебивает легаси pill/999px-оверрайды повышенной специфичности. Круглые
элементы (иконки-кружки, аватары, точки, прогресс-бары) НЕ затронуты —
у них собственные селекторы и они здесь не перечислены. */
.btn,
.button.buy,
.cat-card__buy, .cat-more, .cat-card__phone,
.v2-filter__cta,
.pp-buy__cta,
.cart-cta,
.szf-submit, .szf-ok-btn,
.hv2-pc__cta,
.hv2-header__request-call,
.hv2-seotext-tabs button,
.cat-card__badge, .pp-buy__disc,
.v2-promo__tag, .hv2-pc__badge, .tovar_item__badge, .hv2-price__badge {
border-radius: var(--r-card) !important;
}
/* ════════════════════════════════════════════════════════════════════
Пакет 3 п.8 (2026-07-23) — врезка товаров в статьях/контенте
(products/descr_slider.html → .hv2-descr-slider, hv2-carousel + .hv2-pc).
════════════════════════════════════════════════════════════════════ */
.hv2-descr-slider { margin: var(--sp-6) 0; }
.hv2-descr-slider .hv2-section__head h2 a { color: inherit; text-decoration: none; }
.hv2-descr-slider .hv2-section__head h2 a:hover { color: var(--c-blue); }
/* В узкой статейной колонке карточки .hv2-pc — по 3 в ряд (как в старой врезке). */
.hv2-descr-slider .hv2-carousel__track {
grid-auto-columns: calc((100% - var(--sp-4) * 2) / 3);
}
@media (max-width: 720px) {
.hv2-descr-slider .hv2-carousel__track {
grid-auto-columns: calc((100% - var(--sp-4)) / 2);
}
}
/* 2026-08-05: визуально скрытый заголовок (SEO/a11y) — доступен ботам и
скринридерам, не влияет на вёрстку. НЕ display:none (тот игнорируется). */
.hv2-sronly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}