/* ——— Grace Design System tokens ——— */
:root {
--grace-ink: #121412;
--grace-ink-85: rgba(18,20,18,0.85);
--grace-ink-60: rgba(18,20,18,0.60);
--grace-ink-40: rgba(18,20,18,0.40);
--grace-ink-25: rgba(18,20,18,0.25);
--grace-ink-10: rgba(18,20,18,0.10);
--grace-ink-06: rgba(18,20,18,0.06);
--ivory: #f6f1e8;
--ivory-deep: #ece4d1;
--ivory-soft: #fbf8f1;
--white: #ffffff;
--brass: #a8803a;
--brass-soft: #d8b777;
--brass-deep: #7c5c22;
--brass-wash: #f5ecd8;
--forest: #1e3329;
--forest-deep: #142019;
--sage: #c4cbb6;
--sage-wash: #e7eadc;
--burgundy: #6b1e2b;
--burgundy-wash: #f3e2e4;
--text-primary: var(--grace-ink);
--text-secondary: var(--grace-ink-60);
--text-tertiary: var(--grace-ink-40);
--text-on-dark: #f6f1e8;
--text-on-dark-soft:rgba(246,241,232,0.70);
--text-brass: var(--brass);
--border-hair: rgba(18,20,18,0.10);
--border-default: rgba(18,20,18,0.16);
--border-strong: rgba(18,20,18,0.25);
--border-focus: var(--brass);
--font-display: "Cormorant Garamond","Iowan Old Style",Georgia,serif;
--font-sans: "Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
--font-mono: "JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
--tracking-tight: -0.02em;
--tracking-body: -0.005em;
--tracking-eyebrow: 0.12em;
--leading-tight: 1.10;
--leading-display: 1.15;
--leading-snug: 1.35;
--leading-body: 1.55;
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
--space-9: 96px; --space-10:128px;
--gutter-desktop: 64px;
--gutter-mobile: 24px;
--content-max: 1280px;
--radius-xs: 2px;
--radius-sm: 4px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-pill:999px;
--shadow-card: 0 1px 2px rgba(18,20,18,0.04), 0 4px 16px rgba(18,20,18,0.04);
--shadow-card-hover: 0 2px 4px rgba(18,20,18,0.06), 0 12px 32px rgba(18,20,18,0.08);
--shadow-modal: 0 24px 48px rgba(18,20,18,0.18), 0 2px 8px rgba(18,20,18,0.08);
--shadow-nav: 0 1px 0 rgba(18,20,18,0.06), 0 2px 8px rgba(18,20,18,0.04);
--ease-out: cubic-bezier(0.2,0.6,0.2,1);
--dur-default: 200ms;
--z-nav: 40;
}
* { margin:0; padding:0; box-sizing:border-box; }
html, body { font-family:var(--font-sans); background:var(--ivory); color:var(--text-primary); font-size:16px; line-height:var(--leading-body); letter-spacing:var(--tracking-body); -webkit-font-smoothing:antialiased; overflow-x:clip; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; border:none; }
/* Базовые правила для медиа — предотвращают горизонтальное переполнение на узких экранах */
img, video, canvas, svg { max-width:100%; height:auto; }
img, video { display:block; }
picture { display:contents; }
table { max-width:100%; }
/* Уважаем системные предпочтения по анимации */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ——— Buttons ——— */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:14px; font-weight:600; padding:12px 22px; border-radius:var(--radius-sm); border:1px solid transparent; transition:opacity var(--dur-default) var(--ease-out), background var(--dur-default) var(--ease-out), border-color var(--dur-default) var(--ease-out); background:transparent; color:inherit; }
.btn:hover { opacity:0.88; }
.btn:active { opacity:0.72; }
.btn-primary { background:var(--grace-ink); color:var(--ivory); }
.btn-brass { background:#a8803a; color:#FFFFFF; border-color:#a8803a; }
.btn-brass:hover { background:#7c5c22; border-color:#7c5c22; opacity:1; }
.btn-secondary{ background:transparent; color:#3A3A35; border:1px solid rgba(0,0,0,0.25); }
.btn-secondary:hover { border-color:rgba(0,0,0,0.5); opacity:1; }
.btn-ghost { background:transparent; color:var(--grace-ink); }
.btn-ghost:hover { background:var(--grace-ink-06); opacity:1; }
.btn-outline-dark { background:transparent; color:var(--ivory); border-color:rgba(246,241,232,0.45); }
.btn-outline-dark:hover { background:rgba(246,241,232,0.08); opacity:1; }
.btn-lg { padding:15px 30px; font-size:15px; }
.btn-sm { padding:8px 18px; font-size:13px; font-weight:500; border-radius:6px; }
/* ——— Badges: 4 визуальных типа (тексты не меняем) ——— */
.badge { display:inline-block; font-size:10px; font-weight:500; padding:4px 10px; border-radius:20px; letter-spacing:0.08em; text-transform:uppercase; white-space:nowrap; margin-bottom:10px; }
/* Тип A — позиционирование */
.badge-sage { background:#E8EDE3; color:#2F4A36; }
/* Тип B — маркетинговая метка */
.badge-ink { background:#1A1A1A; color:#FFFFFF; }
/* Тип C — премиальная метка */
.badge-brass { background:transparent; color:#7c5c22; border:1px solid #7c5c22; padding:3px 9px; }
/* Тип D — статус */
.badge-soon { background:#E5E1D5; color:#5A5550; }
.badge-sale { background:var(--burgundy); color:#fff; }
/* ——— Eyebrow ——— */
.eyebrow { font-family:var(--font-sans); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:var(--tracking-eyebrow); color:rgba(18,20,18,0.78); }
.eyebrow-brass { color:var(--brass); }
/* ——— NAV (прозрачный поверх hero, зелёный при скролле) ——— */
.nav {
background: transparent;
padding: 0 var(--gutter-desktop);
display: flex; justify-content: space-between; align-items: center;
height: 72px;
position: fixed; top: 0; left: 0; right: 0; width: 100%;
z-index: var(--z-nav);
box-shadow: none;
transition: background 260ms var(--ease-out), box-shadow 260ms var(--ease-out), height 260ms var(--ease-out);
}
.nav.scrolled {
background: var(--forest);
height: 60px;
box-shadow: var(--shadow-nav);
}
/* На всех страницах, кроме главной, шапка сразу зелёная (не прозрачная) */
.nav.nav--solid {
background: var(--forest);
box-shadow: var(--shadow-nav);
}
.nav.nav--solid.scrolled {
height: 60px;
}
/* main под фиксированной шапкой нужно подвинуть вниз на её высоту */
.nav.nav--solid ~ main,
.nav.nav--solid + main { padding-top: 72px; }
.nav-logo { display: inline-flex; align-items: center; gap: 12px; }
.nav-logo svg path { fill:var(--ivory); }
.nav-logo__tagline {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(246,241,232,0.55);
padding-left: 12px;
border-left: 1px solid rgba(246,241,232,0.18);
white-space: nowrap;
}
@media (max-width: 720px) {
.nav-logo__tagline { display: none; }
}
.nav-links { display:flex; gap:28px; }
.nav-links a { color:rgba(246,241,232,0.65); font-size:13px; font-weight:500; transition:color var(--dur-default); }
.nav-links a:hover { color:var(--ivory); }
.nav-cta { background:var(--brass); color:#fff; padding:9px 22px; border-radius:var(--radius-sm); font-size:13px; font-weight:600; transition:opacity var(--dur-default); }
.nav-cta:hover { opacity:0.88; }
/* ——— HERO (ровно один экран, единый forest-фон) ——— */
.hero {
position: relative;
background: var(--forest);
display: block;
height: 100vh;
min-height: 560px;
overflow: hidden;
}
/* subtle top scrim — повышает читаемость nav поверх фото */
.hero::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 140px;
background: linear-gradient(180deg, rgba(10,18,13,0.55) 0%, transparent 100%);
z-index: 4;
pointer-events: none;
}
/* левая часть — текст (лежит над фото, читается сквозь плавный градиент) */
.hero-left {
position: relative;
z-index: 3;
padding: 80px var(--gutter-desktop) 80px var(--gutter-desktop);
display: flex;
flex-direction: column;
justify-content: center;
max-width: 820px;
width: 100%;
height: 100%;
}
.hero-eyebrow {
color: var(--brass-soft);
font-size: 12px;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
margin-bottom: 24px;
font-weight: 600;
}
.hero-title {
font-family: var(--font-display);
color: var(--ivory);
font-size: clamp(48px, 5.3vw, 77px);
font-weight: 400;
line-height: 1.05;
letter-spacing: var(--tracking-tight);
margin-bottom: 28px;
max-width: none;
}
.hero-sub {
color: rgba(246,241,232,0.75);
font-size: 15px;
line-height: 1.55;
margin-bottom: 36px;
max-width: 420px;
}
/* Буллеты с иконками под кнопками */
.hero-bullets {
list-style: none;
padding: 0;
margin: 32px 0 0 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px 0;
}
.hero-bullets li {
color: rgba(246,241,232,0.88);
font-size: 13px;
font-weight: 500;
line-height: 1.3;
letter-spacing: 0.01em;
display: inline-flex;
align-items: center;
gap: 12px;
padding: 0 18px;
}
.hero-bullets li:first-child { padding-left: 0; }
.hero-bullets li:last-child { padding-right: 0; }
.hero-bullets li + li {
border-left: 1px solid rgba(246,241,232,0.22);
}
.hero-bullets svg {
width: 28px;
height: 28px;
color: var(--brass);
flex-shrink: 0;
stroke-width: 1.7;
}
/* правая часть — сцена-фото, шире на 1см (левый край дальше влево, правый край у края экрана), наезжает на текст с плавным градиентом */
.hero-piano {
position: absolute;
top: 0; right: 0; bottom: 0;
width: calc(68% + 2cm);
z-index: 2;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
padding: 48px;
overflow: hidden;
}
.hero-piano img {
position: relative;
max-width: 100%;
max-height: 560px;
width: auto;
height: auto;
object-fit: contain;
object-position: center;
filter: drop-shadow(0 32px 56px rgba(0,0,0,0.45));
}
/* когда подгружена сцена (piano-room.jpg) — фото заполняет всю область, слева плавно растворяется в фон */
.hero-piano.has-scene {
padding: 0;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.35) 10%, #000 34%, #000 100%);
mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.35) 10%, #000 34%, #000 100%);
}
.hero-piano.has-scene img {
max-height: none;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 72% center;
filter: none;
}
/* лёгкая виньетка в верхнем правом углу для глубины */
.hero-piano.has-scene::after {
content: '';
position: absolute; inset: 0;
background: radial-gradient(ellipse 80% 60% at 100% 0%, rgba(0,0,0,0.35), transparent 55%);
z-index: 2;
pointer-events: none;
}
.hero-baseboard { display: none; }
/* По умолчанию (десктоп и мобайл) — планшетный br скрыт, обычный br виден */
.hero-sub .hero-sub__br--tablet { display: none; }
.hero-sub .hero-sub__br--default { display: inline; }
.hero-sub .hero-sub__br--m1 { display: none; }
.hero-sub .hero-sub__br--m2 { display: none; }
/* Заголовок: дефолт — переносы как на десктопе/планшете */
.hero-title__br--m1 { display: none; }
.hero-title__br--m2 { display: none; }
.hero-title__br--default-mid { display: inline; }
/* Кнопка с иконкой: иконка часов и перенос текста только на мобиле */
.btn--with-icon { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.btn__icon { width: 22px; height: 22px; flex-shrink: 0; display: none; }
.btn__text-br--mobile { display: none; }
/* ——— Планшетная версия hero (600—1100): отдельное вертикальное фото piano-room-midi2 ——— */
@media (min-width: 600px) and (max-width: 1100px) {
.hero {
height: auto;
min-height: 100vh;
}
.hero-left {
max-width: 58%;
padding: 110px 28px 72px 56px;
z-index: 3;
}
.hero-eyebrow {
margin-bottom: 22px;
font-size: 11px;
}
.hero-title {
font-size: clamp(40px, 5.6vw, 58px);
margin-bottom: 26px;
line-height: 1.05;
}
.hero-sub {
font-size: 14px;
margin-bottom: 30px;
max-width: 340px;
}
/* подзаголовок — фиксированный перенос для планшета: "ход" со 2-й строки */
.hero-sub .hero-sub__br--default { display: none; }
.hero-sub .hero-sub__br--tablet { display: inline; }
/* кнопки в столбик */
.hero-left > div[style*="flex"] {
flex-direction: column !important;
align-items: stretch !important;
gap: 12px !important;
max-width: 320px;
}
.hero-left > div[style*="flex"] .btn {
width: 100%;
text-align: center;
justify-content: center;
}
/* буллеты в строку (как на десктопе) */
.hero-bullets {
margin-top: 40px;
}
/* сцена справа — фото piano-room-midi2 через background, img скрыт */
.hero-piano {
width: 68%;
padding: 0;
z-index: 1;
}
.hero-piano.has-scene {
background-image: url('/piano-room-midi2.webp?v=1');
background-size: auto 144%;
background-position: 100% 100%;
background-repeat: no-repeat;
background-color: var(--forest);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.25) 4%, #000 22%, #000 100%);
mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.25) 4%, #000 22%, #000 100%);
}
.hero-piano.has-scene img {
display: none;
}
.hero-piano.has-scene::after {
display: none;
}
}
/* ——— Мобильная версия hero (≤ 599px): вертикальная сцена piano-room-midi2 фоном на весь экран ——— */
@media (max-width: 599px) {
.hero {
/* Стабильная «большая» высота viewport — lvh не меняется при показе/скрытии UI
мобильного браузера, поэтому фоновое фото и буллеты не «прыгают» при скролле. */
height: 100lvh;
min-height: 100lvh;
background: var(--forest);
}
/* Каталог: фото пианино занимает почти всю ширину карточки с малым зазором */
.model-img {
height: 320px;
padding: 14px 8px 8px 8px;
}
.model-img img {
width: 100%;
max-width: 100%;
height: 100%;
object-fit: contain;
object-position: center bottom;
}
/* фото-блок растягивается на весь hero, картинка cover */
.hero-piano {
position: absolute;
inset: 0;
width: 100%;
z-index: 1;
padding: 0;
}
.hero-piano.has-scene {
background-image: url('/piano-room-midi2.webp?v=1');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
-webkit-mask-image: none;
mask-image: none;
}
.hero-piano.has-scene img { display: none; }
.hero-piano.has-scene::after { display: none; }
/* затемняющая вуаль поверх фото — для читаемости текста */
.hero::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(10,18,13,0.62) 0%, rgba(10,18,13,0.25) 45%, rgba(10,18,13,0.55) 100%);
z-index: 2;
pointer-events: none;
}
/* текст поверх фото; левый отступ совпадает с навигацией (16px) — текст по краю лого */
.hero-left {
max-width: 100%;
padding: 20px 16px 48px 16px;
z-index: 3;
}
.hero-eyebrow {
margin-top: 1.5cm;
margin-bottom: 16px;
font-size: 11px;
}
.hero-title {
font-size: clamp(38px, 9vw, 50px);
margin-bottom: 18px;
line-height: 1.06;
}
/* убираем слово «Создаём» в заголовке и капитализируем «Цифровые»;
переносы: «Цифровые пианино / нового поколения» (2 строки) */
.hero-title__create { display: none; }
.hero-title::first-letter { text-transform: uppercase; }
.hero-title__br--m1 { display: none; }
.hero-title__br--m2 { display: none; }
.hero-title__br--default-mid { display: inline; }
/* Связка размеров: nav-cta «Оставить заявку» в шапке и кнопки в hero сжимаются по одной формуле.
Шрифт + горизонтальный и вертикальный padding используют общие clamp-переменные.
Логотип Grace не масштабируется (явный flex-shrink: 0). */
:root {
--mobile-btn-fz: clamp(9px, 2.7vw, 12px);
--mobile-btn-px: clamp(9px, 3vw, 14px);
--mobile-btn-py: clamp(8px, 2.4vw, 11px);
}
.nav-logo { flex-shrink: 0; }
.nav-cta {
font-size: var(--mobile-btn-fz);
padding: var(--mobile-btn-py) var(--mobile-btn-px);
white-space: nowrap;
flex-shrink: 1;
}
/* Кнопка-иконка часов и перенос «Подобрать / за 30 секунд» */
.btn__icon { display: inline-block; }
.btn__text-br--mobile { display: inline; }
.hero-sub {
font-size: 16px;
margin-bottom: 24px;
max-width: 100%;
}
/* подзаголовок — переносы как на мобильном образце:
"...звук, / натуральный ход клавиш. / ...играть / с удовольствием." */
.hero-sub .hero-sub__br--tablet { display: none !important; }
.hero-sub .hero-sub__br--default { display: inline !important; }
.hero-sub .hero-sub__br--m1 { display: inline !important; }
.hero-sub .hero-sub__br--m2 { display: inline !important; }
/* кнопка "Подобрать за 30 секунд" скрыта на мобильном */
.hero-left > div[style*="flex"] .btn--with-icon { display: none !important; }
/* кнопки в столбик, прижаты к левому краю; кнопка с иконкой — две строки */
.hero-left > div[style*="flex"] {
flex-direction: column !important;
align-items: stretch !important;
gap: 14px !important;
max-width: calc(89% + 1cm); /* ещё +1 см к длине */
margin-top: 3cm; /* кнопки подняты ещё на 1 см выше нижней UI-панели */
margin-left: 0;
margin-right: auto;
}
.hero-left > div[style*="flex"] .btn {
font-size: 18px;
font-weight: 600;
letter-spacing: 0.01em;
padding: 20px 32px;
min-height: 0;
white-space: nowrap;
width: 100%;
text-align: center;
justify-content: center;
border-radius: 14px;
box-shadow: 0 8px 24px rgba(184, 146, 61, 0.28);
}
.hero-left > div[style*="flex"] .btn--with-icon {
text-align: left;
justify-content: flex-start;
padding: clamp(11px, 3vw, 14px) clamp(14px, 4vw, 22px);
line-height: 1.2;
gap: 12px;
}
.hero-left > div[style*="flex"] .btn--with-icon .btn__text {
text-align: left;
font-size: clamp(13px, 4vw, 17px);
white-space: nowrap;
}
.hero-left > div[style*="flex"] .btn--with-icon .btn__icon {
width: clamp(22px, 6vw, 26px);
height: clamp(22px, 6vw, 26px);
}
.hero-left > div[style*="flex"] .btn--with-icon .btn__icon {
width: 18px;
height: 18px;
}
/* Буллеты на мобильном — компактный inline-блок под кнопками, в стиле сайта:
brass-иконки (тонкие), белый текст с прозрачностью, тонкие разделители. */
.hero-left { padding-bottom: 32px; }
.hero-bullets {
position: static;
margin: 24px 0 0;
padding: 16px 0 0;
border-top: 1px solid rgba(246, 241, 232, 0.18);
background: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border-radius: 0;
border-left: 0;
border-right: 0;
border-bottom: 0;
flex-direction: column !important;
align-items: flex-start;
justify-content: flex-start;
gap: 12px;
max-width: 100%;
z-index: 3;
}
.hero-bullets li {
flex: initial;
width: 100%;
padding: 0 !important;
border: 0 !important;
font-size: 13px;
line-height: 1.3;
color: rgba(246, 241, 232, 0.92);
letter-spacing: 0.005em;
display: flex;
align-items: center;
gap: 12px;
}
.hero-bullets li span {
white-space: normal;
display: inline;
}
.hero-bullets li span br { display: none; }
.hero-bullets svg {
width: 18px;
height: 18px;
flex-shrink: 0;
color: var(--brass, #B8923D);
stroke-width: 1.4;
}
}
/* От 664 до 600 — контейнер для текста (.hero-left) фиксируется на ширине,
которую он имел при 664px (58% × 664 ≈ 385px), и больше не сжимается.
Заголовок и подзаголовок при сужении экрана не меняют положение и переносы. */
@media (min-width: 600px) and (max-width: 664px) {
.hero-left {
max-width: 385px;
}
}
/* Узкий планшет — буллеты вертикально, чтобы третий не «уезжал» на новую строку */
@media (min-width: 600px) and (max-width: 900px) {
/* кнопки на 20% короче, чем на широком планшете (320 → 256) */
.hero-left > div[style*="flex"] {
max-width: 256px !important;
}
.hero-bullets {
flex-direction: column;
align-items: stretch;
gap: 0;
max-width: 320px;
}
.hero-bullets li {
padding: 16px 0;
width: 100%;
border-left: 0 !important;
border-bottom: 1px solid rgba(246,241,232,0.18);
}
.hero-bullets li:last-child {
border-bottom: none;
}
.hero-bullets li + li {
border-left: 0;
}
/* Фото пианино «замораживается» в положении, которое оно имело на 901px:
блок 612px (68% × 900) с левым краем на 288px от левого края экрана.
При дальнейшем сужении экрана левый край фото остаётся на месте,
а правая часть уходит за правый край экрана. */
.hero-piano {
width: 612px;
left: 288px;
right: auto;
}
}
/* ——— CATALOG HEADER ——— */
.catalog-header { background:#F5F1E8; padding:52px var(--gutter-desktop) 0; border-bottom:1px solid var(--border-hair); }
.catalog-header h2 { font-family:var(--font-display); font-size:clamp(28px,3vw,48px); font-weight:400; letter-spacing:var(--tracking-tight); line-height:1.15; margin:10px 0 0; padding-bottom:24px; color:#1A1A1A; }
/* ——— TABS ——— */
.tabs { display:flex; background:#F5F1E8; padding:0 var(--gutter-desktop); border-bottom:1px solid var(--border-hair); }
.tab-btn { padding:14px 26px; font-size:13px; font-weight:500; cursor:pointer; background:none; color:#3A3A35; border:none; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color var(--dur-default),border-color var(--dur-default); white-space:nowrap; flex-shrink:0; }
.tab-btn.active { color:#7c5c22; border-bottom-color:#7c5c22; border-bottom-width:2px; }
.tab-btn:hover:not(.active) { color:#1A1A1A; }
.tab-btn__count { white-space:nowrap; display:inline; margin-left:4px; }
@media (max-width: 480px) {
.tab-btn { white-space:normal; }
.tab-btn__count { display:block; margin-top:2px; margin-left:0; }
}
.tab-content { display:none; background:#F5F1E8; padding:28px var(--gutter-desktop) 56px; }
.tab-content.active { display:block; }
/* ——— GRIDS ——— */
.grid-5 { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:12px; }
/* ——— MODEL CARDS ——— */
.model-card {
background:var(--white);
border:1px solid var(--border-hair);
border-radius:var(--radius-md);
box-shadow:var(--shadow-card);
transition:transform var(--dur-default) var(--ease-out), box-shadow var(--dur-default) var(--ease-out);
cursor:pointer;
overflow:hidden;
}
.model-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-card-hover); }
.model-card.is-highlighted { box-shadow:0 0 0 2px #B8923D, var(--shadow-card-hover); animation:cardPulse 1.5s ease-out; }
@keyframes cardPulse {
0% { box-shadow:0 0 0 0 rgba(184,146,61,0.55), var(--shadow-card-hover); }
60% { box-shadow:0 0 0 14px rgba(184,146,61,0), var(--shadow-card-hover); }
100% { box-shadow:0 0 0 2px #B8923D, var(--shadow-card-hover); }
}
.model-card.featured { background:var(--forest); }
.model-card.flagship { background:var(--forest-deep); }
.model-card.coming-soon { opacity:0.72; }
.coming-soon-overlay { position:absolute; inset:0; background:repeating-linear-gradient(-45deg,transparent,transparent 6px,rgba(18,20,18,0.025) 6px,rgba(18,20,18,0.025) 12px); pointer-events:none; }
/* Photo area — выровнено по нижней линии, единая «полка» для всех пианино */
.model-img {
height: 300px;
display: flex;
align-items: flex-end;
justify-content: center;
background: #F5F1E8;
overflow: hidden;
position: relative;
padding: 24px 16px 14px 16px;
border-bottom: 0.5px solid rgba(0,0,0,0.06);
}
.model-card.featured .model-img,
.model-card.flagship .model-img { background:transparent; }
.model-img img {
max-width: 100%;
max-height: 100%;
width: auto;
height: 100%;
object-fit: contain;
object-position: center bottom;
display: block;
transition: opacity 200ms var(--ease-out);
}
.model-card:not(.featured):not(.flagship):not(.coming-soon) .model-img img { mix-blend-mode:multiply; }
.model-card.featured .model-img::after,
.model-card.flagship .model-img::after { content:''; position:absolute; bottom:0; left:0; right:0; height:72px; z-index:2; pointer-events:none; }
.model-card.featured .model-img::after { background:linear-gradient(transparent,var(--forest)); }
.model-card.flagship .model-img::after { background:linear-gradient(transparent,var(--forest-deep)); }
/* Card body */
.model-body { padding:16px 16px 18px; }
.model-name { font-family:var(--font-sans); font-size:16px; font-weight:500; color:#1A1A1A; letter-spacing:0; margin:0 0 2px 0; line-height:1.2; }
.model-card.featured .model-name,
.model-card.flagship .model-name { color:var(--ivory); }
.model-price { font-family:var(--font-sans); font-size:14px; font-weight:400; color:#1A1A1A; margin-bottom:12px; font-variant-numeric:tabular-nums; }
.model-stock { font-family:var(--font-sans); font-size:12px; font-weight:500; line-height:1.2; margin:-6px 0 12px; padding:4px 10px; border-radius:999px; display:inline-flex; align-items:center; gap:6px; letter-spacing:0.01em; }
.model-stock::before { content:''; width:7px; height:7px; border-radius:50%; background:currentColor; }
.model-stock[data-schema="InStock"] { color:#2A6F3D; background:rgba(42,111,61,0.10); }
.model-stock[data-schema="OutOfStock"],
.model-stock[data-schema="PreOrder"],
.model-stock[data-schema="LimitedAvailability"] { color:#6B4A0A; background:rgba(184,138,30,0.18); }
.model-stock[data-schema=""] { display:none; }
.mm-stock { font-family:var(--font-sans); font-size:13px; font-weight:500; margin:-4px 0 16px; padding:5px 12px; border-radius:999px; display:inline-flex; align-items:center; gap:7px; letter-spacing:0.01em; }
.mm-stock::before { content:''; width:8px; height:8px; border-radius:50%; background:currentColor; }
.mm-stock[data-schema="InStock"] { color:#2A6F3D; background:rgba(42,111,61,0.10); }
.mm-stock[data-schema="OutOfStock"],
.mm-stock[data-schema="PreOrder"],
.mm-stock[data-schema="LimitedAvailability"] { color:#9B6B12; background:rgba(184,138,30,0.12); }
.mm-stock[data-schema=""] { display:none; }
.model-card.featured .model-price,
.model-card.flagship .model-price { color:var(--brass-soft); }
.model-card.coming-soon .model-price { color:#8A8A80; }
.model-desc { font-size:13px; color:#3A3A35; line-height:1.5; margin-bottom:14px; min-height:40px; }
.model-card.featured .model-desc,
.model-card.flagship .model-desc { color:var(--text-on-dark-soft); }
.model-card.coming-soon .model-name { color:var(--text-tertiary); }
.model-actions { display:flex; gap:8px; flex-wrap:wrap; }
/* Цветовые варианты — подпись + swatches */
.model-colors { margin:0 0 14px 0; min-height:52px; }
.color-label { font-size:12px; color:#6A6A60; margin-bottom:6px; font-family:var(--font-sans); }
.color-name { color:#3A3A35; }
.swatches { display:flex; gap:8px; flex-wrap:wrap; }
.color-chip {
width:22px; height:22px; border-radius:50%;
background: var(--c, #1a1a1a);
border: 0.5px solid rgba(0,0,0,0.15);
display:inline-block;
cursor:pointer;
transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
position: relative;
padding: 0;
background-clip: padding-box;
}
.color-chip:hover { transform: translateY(-1px); }
.color-chip.is-active {
border: none;
box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3px #B8923D;
}
.color-chip.is-unavailable { opacity:0.6; cursor:not-allowed; }
.color-chip.is-unavailable::after {
content:''; position:absolute; inset:0;
background: linear-gradient(to bottom right, transparent 45%, rgba(0,0,0,0.5) 48%, rgba(0,0,0,0.5) 52%, transparent 55%);
border-radius:50%;
}
/* Полированный глянец: блик top-left + тень bottom-right */
.color-chip.is-polished {
background:
radial-gradient(circle at 72% 72%, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 45%),
radial-gradient(circle at 28% 28%, rgba(255,255,255,0.60) 0%, rgba(255,255,255,0) 45%),
var(--c, #1a1a1a);
border-color: rgba(0,0,0,0.25);
}
.model-card.featured .color-chip,
.model-card.flagship .color-chip { border-color:rgba(246,241,232,0.3); }
.model-card.featured .color-label,
.model-card.flagship .color-label { color:var(--text-on-dark-soft); }
.model-card.featured .color-name,
.model-card.flagship .color-name { color:var(--ivory); }
/* Характеристики — одна строка "X ядер · Y Вт" */
.specs { font-size:12px; color:#3A3A35; margin-bottom:14px; font-family:var(--font-sans); }
.model-card.featured .specs,
.model-card.flagship .specs { color:var(--text-on-dark-soft); }
.model-card.coming-soon .specs { color:#8A8A80; }
/* ——— LINEUP ——— */
.lineup { background:#1F3A2E; padding:64px 0 56px; color:#F0EBE0; position:relative; }
.lineup__container { width:100%; }
.lineup__header { text-align:center; margin-bottom:36px; padding:0 var(--gutter-desktop); }
.lineup__eyebrow { font-family:var(--font-sans); font-size:12px; letter-spacing:0.15em; text-transform:uppercase; font-weight:500; color:#B8923D; display:block; margin-bottom:12px; }
.lineup__title { font-family:var(--font-display); font-size:clamp(30px,3.2vw,40px); font-weight:400; line-height:1.15; letter-spacing:var(--tracking-tight); color:#F0EBE0; margin:0 0 12px; }
.lineup__title .italic-accent { font-style:italic; color:#B8923D; font-weight:400; }
.lineup__lead { font-family:var(--font-sans); font-size:14px; line-height:1.5; color:rgba(240,235,224,0.7); margin:0 auto; max-width:560px; }
/* 4 параметра */
.lineup__params { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; max-width:1040px; margin:0 auto 40px; padding:0 var(--gutter-desktop); }
.param { display:flex; align-items:flex-start; gap:12px; }
.param__icon { width:24px; height:24px; color:#B8923D; flex-shrink:0; }
.param__icon svg { width:100%; height:100%; }
.param__title { font-family:var(--font-sans); font-size:14px; font-weight:500; color:#F0EBE0; margin-bottom:2px; }
.param__range { font-family:var(--font-sans); font-size:12px; line-height:1.35; color:rgba(240,235,224,0.6); }
/* Ряд цифровых моделей */
.lineup__digital { max-width:var(--content-max); margin:0 auto; padding:0 var(--gutter-desktop); }
.lineup__subtitle { font-family:var(--font-sans); font-size:11px; letter-spacing:0.15em; text-transform:uppercase; font-weight:500; color:rgba(240,235,224,0.5); text-align:center; margin-bottom:24px; }
.lineup__models { display:grid; grid-template-columns:repeat(5,1fr); gap:20px; align-items:flex-end; margin-bottom:14px; }
.model { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; }
/* Радиальное золотое свечение вокруг плитки */
.model::before { content:''; position:absolute; top:0; bottom:50px; left:50%; transform:translateX(-50%); width:110%; background:radial-gradient(ellipse at center, rgba(184,146,61,0.18) 0%, rgba(184,146,61,0.08) 45%, transparent 75%); z-index:0; pointer-events:none; filter:blur(12px); }
.model__image-wrap { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; background:#FFFFFF; border-radius:4px; padding:10px 12px; box-shadow:0 4px 16px rgba(0,0,0,0.2); }
.model__image { width:auto; height:auto; max-width:100%; object-fit:contain; display:block; }
.model--1 .model__image { height:44px; }
.model--2 .model__image { height:64px; }
.model--3 .model__image { height:82px; }
.model--4 .model__image { height:100px; }
.model--5 .model__image { height:115px; }
.model__name { position:relative; z-index:1; font-family:var(--font-sans); font-size:13px; font-weight:500; color:#F0EBE0; letter-spacing:-0.005em; }
.model__role { position:relative; z-index:1; font-family:var(--font-sans); font-size:10px; color:#B8923D; letter-spacing:0.06em; text-transform:uppercase; margin-top:-8px; }
/* Ось под моделями */
.lineup__axis { position:relative; padding:10px 0 8px; }
.axis__line { position:absolute; top:14px; left:0; right:0; height:1px; background:linear-gradient(to right, transparent 0%, rgba(184,146,61,0.45) 8%, rgba(184,146,61,0.45) 92%, transparent 100%); }
.axis__dots { display:grid; grid-template-columns:repeat(5,1fr); gap:20px; position:relative; z-index:1; }
.axis__dot { width:8px; height:8px; border-radius:50%; background:#B8923D; margin:10px auto 0; box-shadow:0 0 10px rgba(184,146,61,0.5); }
.axis__labels { display:flex; justify-content:space-between; margin-top:14px; font-family:var(--font-sans); font-size:11px; color:rgba(240,235,224,0.55); }
/* Разделитель + акустический флагман */
.lineup__separator { display:flex; align-items:center; gap:24px; max-width:620px; margin:80px auto 40px; padding:0 var(--gutter-desktop); }
.separator__line { flex:1; height:0.5px; background:rgba(184,146,61,0.25); }
.separator__label { font-family:var(--font-sans); font-size:12px; letter-spacing:0.2em; text-transform:uppercase; font-weight:500; color:#B8923D; white-space:nowrap; }
.lineup__acoustic { max-width:620px; margin:0 auto; text-align:center; padding:0 var(--gutter-desktop); }
.acoustic__model { position:relative; }
.acoustic__model::before { content:''; position:absolute; bottom:80px; left:50%; transform:translateX(-50%); width:85%; height:55%; background:radial-gradient(ellipse at center, rgba(184,146,61,0.22) 0%, rgba(184,146,61,0.1) 40%, transparent 75%); z-index:0; pointer-events:none; filter:blur(12px); }
.acoustic__image { position:relative; z-index:1; max-width:360px; width:100%; height:auto; margin:0 auto 20px; display:block; mix-blend-mode:multiply; filter:brightness(1.45) contrast(1.05); }
.acoustic__name { position:relative; z-index:1; font-family:var(--font-display); font-size:26px; font-weight:500; color:#F0EBE0; margin-bottom:6px; letter-spacing:var(--tracking-tight); }
.acoustic__role { position:relative; z-index:1; font-family:var(--font-sans); font-size:12px; color:#B8923D; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:18px; }
.acoustic__note { position:relative; z-index:1; font-family:var(--font-sans); font-size:13px; line-height:1.55; color:rgba(240,235,224,0.65); margin:0 auto; max-width:460px; }
/* Steinway блок — 2 колонки */
.steinway-section { background:#1F3A2E; padding:80px 0; color:#F0EBE0; }
.lineup__steinway { padding:0 var(--gutter-desktop); }
.steinway__container { max-width:var(--content-max); margin:0 auto; background:rgba(255,255,255,0.03); border:0.5px solid rgba(184,146,61,0.3); border-radius:16px; padding:48px; display:grid; grid-template-columns:360px 1fr; gap:48px; align-items:center; }
.steinway__image { border-radius:12px; overflow:hidden; aspect-ratio:1/1; background:#0a0a0a; display:flex; align-items:center; justify-content:center; position:relative; }
.steinway__image img { width:100%; height:100%; object-fit:cover; }
.steinway__image::after { content:'STEINWAY & SONS'; position:absolute; left:50%; top:60%; transform:translateX(-50%); font-family:var(--font-display); font-size:13px; font-weight:400; letter-spacing:0.28em; color:#C9A34D; text-shadow:0 1px 4px rgba(0,0,0,0.6); white-space:nowrap; pointer-events:none; }
.steinway__eyebrow { font-family:var(--font-sans); font-size:12px; letter-spacing:0.15em; text-transform:uppercase; font-weight:500; color:#B8923D; margin-bottom:16px; }
.steinway__title { font-family:var(--font-display); font-size:clamp(26px,2.6vw,32px); font-weight:400; line-height:1.2; color:#F0EBE0; margin:0 0 20px; letter-spacing:var(--tracking-tight); }
.steinway__title .italic-accent { font-style:italic; color:#B8923D; }
.steinway__text { font-family:var(--font-sans); font-size:15px; line-height:1.6; color:rgba(240,235,224,0.8); margin:0 0 14px; }
.steinway__text strong { color:#F0EBE0; font-weight:500; }
.steinway__text:last-of-type { margin-bottom:28px; }
.steinway__features { display:flex; flex-direction:column; gap:14px; }
.steinway__feature { display:flex; align-items:center; gap:12px; font-family:var(--font-sans); font-size:14px; color:rgba(240,235,224,0.9); }
.steinway__feature svg { width:20px; height:20px; color:#B8923D; flex-shrink:0; }
@media (max-width: 1199px) {
.lineup__params { grid-template-columns:repeat(2,1fr); gap:24px; }
.lineup__models { gap:12px; }
.model--1 .model__image { height:80px; }
.model--2 .model__image { height:110px; }
.model--3 .model__image { height:130px; }
.model--4 .model__image { height:150px; }
.model--5 .model__image { height:165px; }
.steinway__container { grid-template-columns:280px 1fr; gap:32px; padding:36px; }
.steinway__title { font-size:26px; }
}
@media (max-width: 767px) {
.lineup { padding:64px 0; }
.lineup__title { font-size:32px; }
.lineup__params { grid-template-columns:1fr; gap:20px; }
.lineup__models { display:flex; overflow-x:auto; gap:20px; padding:0 var(--gutter-mobile); scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.lineup__models::-webkit-scrollbar { display:none; }
.model { flex:0 0 140px; scroll-snap-align:center; }
.model--1 .model__image { height:80px; }
.model--2 .model__image { height:100px; }
.model--3 .model__image { height:110px; }
.model--4 .model__image { height:120px; }
.model--5 .model__image { height:125px; }
.lineup__axis { display:none; }
.lineup__separator { margin:48px auto 32px; }
.steinway__container { grid-template-columns:1fr; gap:24px; padding:28px 24px; }
.steinway__image { max-width:280px; margin:0 auto; }
.steinway__title { font-size:24px; text-align:center; }
}
/* ——— COMPARE ——— */
.compare-section { background:var(--ivory); padding:88px var(--gutter-desktop) 96px; border-top:1px solid var(--border-hair); }
.compare-header { max-width:var(--content-max); margin:0 auto 40px; }
.compare-header .eyebrow { display:block; margin-bottom:10px; }
.compare-header h2 { font-family:var(--font-display); font-size:clamp(28px,3vw,48px); font-weight:400; letter-spacing:var(--tracking-tight); line-height:var(--leading-display); color:#1A1A1A; margin-bottom:10px; }
.compare-header p { color:var(--text-secondary); font-size:15px; line-height:var(--leading-body); max-width:560px; }
.compare-group { max-width:var(--content-max); margin:0 auto; }
.compare-group + .compare-group { margin-top:56px; }
.compare-group-head { display:flex; align-items:baseline; gap:14px; margin-bottom:18px; }
.compare-group-title { font-family:var(--font-display); font-size:24px; font-weight:500; color:#1A1A1A; letter-spacing:var(--tracking-tight); }
.compare-group-meta { font-size:12px; color:var(--text-secondary); letter-spacing:0.04em; text-transform:uppercase; }
.compare-scroll { overflow-x:auto; border:1px solid var(--border-hair); border-radius:var(--radius-md); background:#FFFFFF; }
.compare-scroll::-webkit-scrollbar { height:8px; }
.compare-scroll::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.12); border-radius:4px; }
.compare-table { width:100%; border-collapse:collapse; font-family:var(--font-sans); font-size:13px; min-width:1040px; table-layout:fixed; }
.compare-table[aria-label*="серии CP"] { min-width:1360px; }
@media (max-width: 1024px) {
.compare-table[aria-label*="серии BP"] { min-width:1080px; }
.compare-table[aria-label*="серии CP"] { min-width:1480px; }
.compare-table .model-col-badge { white-space:normal; max-width:100%; line-height:1.3; }
}
.compare-table thead th.row-label-head { width:180px; }
.compare-table[aria-label*="серии BP"] thead th:not(.row-label-head) { width:calc((100% - 180px) / 5); }
.compare-table[aria-label*="серии CP"] thead th:not(.row-label-head) { width:calc((100% - 180px) / 7); }
.compare-table th,
.compare-table td { padding:14px 16px; text-align:left; border-bottom:1px solid var(--border-hair); vertical-align:middle; white-space:nowrap; }
.compare-table tbody td { font-family:var(--font-sans); font-variant-numeric:tabular-nums; letter-spacing:0; }
.compare-table td.size { letter-spacing:0; }
.compare-table tr:last-child th,
.compare-table tr:last-child td { border-bottom:none; }
.compare-table thead th { background:transparent; font-weight:500; font-size:13px; color:#1A1A1A; border-bottom:1px solid var(--border-default); vertical-align:top; padding-top:18px; padding-bottom:16px; }
.compare-table thead th.row-label-head { font-size:11px; font-weight:500; letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--text-secondary); vertical-align:middle; background:#FBF8F1; }
.compare-table .model-col-thumb { background:transparent; display:flex; align-items:flex-end; justify-content:center; margin-bottom:12px; overflow:hidden; padding:4px 4px 0; }
.compare-table[aria-label*="серии BP"] .model-col-thumb { height:140px; padding: 8px 6px 0; }
.compare-table[aria-label*="серии BP"] .model-col-thumb img { width:100%; }
.compare-table[aria-label*="серии CP"] .model-col-thumb { height:160px; }
.compare-table .model-col-thumb img { width:var(--w, 100%); max-width:100%; max-height:100%; height:auto; object-fit:contain; object-position:center bottom; display:block; mix-blend-mode:multiply; }
.compare-table .model-col-name { font-family:var(--font-sans); font-size:16px; font-weight:600; color:#1A1A1A; margin-bottom:4px; display:block; letter-spacing:-0.01em; }
.compare-table .model-col-badge { display:inline-block; font-size:9px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; padding:3px 8px; border-radius:20px; white-space:nowrap; }
.compare-table .model-col-badge.sage { background:#E8EDE3; color:#2F4A36; }
.compare-table .model-col-badge.ink { background:#1A1A1A; color:#FFFFFF; }
.compare-table .model-col-badge.brass { background:transparent; color:#B8923D; border:1px solid #B8923D; padding:2px 7px; }
.compare-table .model-col-badge.soon { background:#E5E1D5; color:#5A5550; }
.compare-table tbody th { font-weight:500; font-size:11px; letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--text-secondary); background:#FBF8F1; white-space:nowrap; width:180px; }
.compare-table tbody td { color:#1A1A1A; }
.compare-table td.price { font-variant-numeric:tabular-nums; font-weight:500; }
.compare-table td.muted,
.compare-table td.price.muted { color:#8A8A80; font-weight:400; }
.compare-table .dot-row { display:inline-flex; gap:6px; align-items:center; }
.compare-table .dot { width:18px; height:18px; border-radius:50%; border:1px solid rgba(0,0,0,0.14); display:inline-block; }
/* Кнопка-чип для типа клавиатуры со всплывающей подсказкой */
.kb-chip {
background: none;
border: 0;
padding: 0;
font: inherit;
color: inherit;
cursor: pointer;
border-bottom: 1px dotted var(--grace-ink-40);
transition: color .15s ease, border-color .15s ease;
}
.kb-chip:hover { color: var(--brass); border-bottom-color: var(--brass); }
.kb-chip:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; border-radius: 2px; }
/* Глобальный выбор цвета каталога BP/CP */
.catalog-color-bar {
display: flex;
align-items: center;
gap: 18px;
padding: 14px 22px;
background: #FBF8F1;
border: 1px solid var(--border-hair);
border-radius: 12px;
margin: 0 0 22px;
flex-wrap: wrap;
font-family: var(--font-sans);
}
.catalog-color-bar__label {
font-size: 11px;
font-weight: 500;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--text-secondary);
}
.catalog-color-bar__swatches {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.cc-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 12px 7px 8px;
background: #fff;
border: 1px solid var(--border-hair);
border-radius: 999px;
cursor: pointer;
font-family: inherit;
font-size: 13px;
color: var(--text-primary, #1A1A1A);
transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.cc-chip:hover { border-color: var(--brass); }
.cc-chip.is-active {
border-color: var(--brass);
background: #fff;
color: #1A1A1A;
box-shadow: 0 0 0 1px var(--brass) inset;
}
.cc-chip:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.cc-chip__dot {
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--c, #000);
border: 1px solid rgba(0,0,0,0.18);
flex-shrink: 0;
}
.cc-chip__dot.is-polished {
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25), 0 1px 2px rgba(0,0,0,0.15);
}
.cc-chip__name { white-space: nowrap; }
.model-card.is-color-dimmed { opacity: 0.55; }
.model-card.is-color-dimmed::after {
content: 'Только в исходном цвете';
position: absolute;
top: 8px;
right: 8px;
font-size: 10px;
letter-spacing: 0.04em;
background: rgba(26,26,26,0.85);
color: #F6F1E8;
padding: 4px 8px;
border-radius: 999px;
pointer-events: none;
z-index: 5;
}
.model-card { position: relative; }
@media (max-width: 600px) {
.catalog-color-bar { padding: 12px 14px; gap: 12px; }
.cc-chip { font-size: 12px; padding: 6px 10px 6px 6px; }
.cc-chip__dot { width: 16px; height: 16px; }
}
/* Inline-кнопки подсказок в сравнительной таблице */
.compare-table .cmp-info {
background: none;
border: 0;
padding: 0;
font: inherit;
color: inherit;
letter-spacing: inherit;
text-transform: inherit;
cursor: help;
border-bottom: 1px dotted var(--grace-ink-40);
transition: color .15s ease, border-color .15s ease;
}
.compare-table .cmp-info:hover { color: var(--brass); border-bottom-color: var(--brass); }
.compare-table .cmp-info:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; border-radius: 2px; }
.compare-table .cmp-val {
background: none;
border: 0;
padding: 0;
font: inherit;
color: inherit;
cursor: help;
border-bottom: 1px dotted var(--grace-ink-40);
transition: color .15s ease, border-color .15s ease;
font-variant-numeric: tabular-nums;
}
.compare-table .cmp-val:hover { color: var(--brass); border-bottom-color: var(--brass); }
.compare-table .cmp-val:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; border-radius: 2px; }
/* Всплывающее облачко подсказки */
.cmp-pop {
position: absolute;
z-index: 90;
max-width: 320px;
background: #1A1A1A;
color: #F6F1E8;
font-family: var(--font-sans);
font-size: 13px;
line-height: 1.5;
padding: 12px 14px;
border-radius: 10px;
box-shadow: 0 8px 24px rgba(0,0,0,0.18);
opacity: 0;
transform: translateY(-4px);
transition: opacity .14s ease, transform .14s ease;
pointer-events: none;
}
.cmp-pop.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.cmp-pop strong { color: #fff; font-weight: 500; }
.cmp-pop::after {
content: '';
position: absolute;
width: 10px;
height: 10px;
background: #1A1A1A;
transform: rotate(45deg);
top: -5px;
left: var(--arrow-x, 24px);
}
/* Всплывающая форма заявки (из квиза) */
.lead-popup {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
font-family: var(--font-sans);
}
.lead-popup[hidden] { display: none; }
.lead-popup__backdrop {
position: absolute;
inset: 0;
background: rgba(18,20,18,0.45);
backdrop-filter: blur(2px);
cursor: pointer;
}
.lead-popup__card {
position: relative;
background: var(--ivory);
border-radius: 14px;
padding: 36px 32px 28px;
max-width: 420px;
width: 100%;
box-shadow: var(--shadow-modal);
z-index: 1;
}
.lead-popup__close {
position: absolute;
top: 12px;
right: 12px;
width: 36px;
height: 36px;
background: transparent;
border: 0;
cursor: pointer;
color: var(--grace-ink-60);
padding: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background .15s ease, color .15s ease;
}
.lead-popup__close:hover { background: var(--grace-ink-06); color: var(--grace-ink); }
.lead-popup__close svg { width: 18px; height: 18px; }
.lead-popup__title {
font-family: var(--font-display);
font-size: 26px;
font-weight: 400;
letter-spacing: var(--tracking-tight);
margin: 0 0 6px;
padding-right: 28px;
color: var(--grace-ink);
}
.lead-popup__subtitle {
font-size: 13px;
color: var(--text-secondary);
margin: 0 0 16px;
}
.lead-popup__model {
font-size: 14px;
color: var(--text-secondary);
background: var(--ivory-soft);
border-left: 3px solid var(--brass);
padding: 10px 14px;
border-radius: 0 6px 6px 0;
margin-bottom: 20px;
}
.lead-popup__model strong { color: var(--grace-ink); font-weight: 500; }
.lead-popup__form {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Упрощённая форма для «Консультация» / «Оставить заявку» — только имя + телефон */
.lead-popup__form.is-simple .lead-popup__bundles,
.lead-popup__form.is-simple input[name="address"],
.lead-popup__form.is-simple .lead-popup__contact { display: none; }
.lead-popup__form input,
.lead-popup__form textarea {
width: 100%;
padding: 13px 14px;
border: 1px solid var(--grace-ink-10);
border-radius: 8px;
font: inherit;
font-size: 14px;
background: #fff;
color: var(--grace-ink);
transition: border-color .15s ease;
box-sizing: border-box;
}
.lead-popup__form textarea {
resize: vertical;
min-height: 96px;
font-family: inherit;
line-height: 1.45;
}
.lead-popup__form input:focus,
.lead-popup__form textarea:focus {
outline: none;
border-color: var(--brass);
}
.lead-popup__form select {
width: 100%;
padding: 13px 36px 13px 14px;
border: 1px solid var(--grace-ink-10);
border-radius: 8px;
font: inherit;
font-size: 14px;
background: #fff url("data:image/svg+xml;utf8,") no-repeat right 14px center;
color: var(--grace-ink);
cursor: pointer;
appearance: none;
-webkit-appearance: none;
box-sizing: border-box;
transition: border-color .15s ease;
}
.lead-popup__form select:focus {
outline: none;
border-color: var(--brass);
}
.lead-popup__select {
display: flex;
flex-direction: column;
gap: 6px;
}
.lead-popup__select-label {
font-size: 13px;
color: var(--grace-ink-60);
padding-left: 2px;
}
.lead-popup__submit {
margin-top: 6px;
width: 100%;
justify-content: center;
}
.lead-popup__bundles {
border: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.lead-popup__bundles-label,
.lead-popup__contact-label {
font-size: 13px;
color: var(--grace-ink-60);
padding-left: 2px;
margin-bottom: 2px;
letter-spacing: 0.02em;
text-transform: uppercase;
}
/* Способ связи — pill-радио */
.lead-popup__contact {
border: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.lead-popup__contact-options {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.lead-popup__contact-pill {
flex: 1 1 auto;
min-width: 100px;
position: relative;
cursor: pointer;
}
.lead-popup__contact-pill input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.lead-popup__contact-pill span {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 11px 14px;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
color: var(--grace-ink);
background: var(--ivory-soft, #fbf8f1);
border: 1.5px solid var(--grace-ink-10);
border-radius: 10px;
transition: border-color 150ms, background 150ms;
}
.lead-popup__contact-pill:hover span {
border-color: var(--brass-soft);
}
.lead-popup__contact-pill input:checked + span {
border-color: var(--brass);
background: var(--brass-wash);
}
.lead-popup__contact-pill input:focus-visible + span {
outline: 2px solid var(--brass);
outline-offset: 2px;
}
.lead-popup__bundle {
display: block;
cursor: pointer;
}
.lead-popup__bundle input {
position: absolute;
opacity: 0;
pointer-events: none;
width: 0;
height: 0;
}
.lead-popup__bundle-card {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border: 1px solid var(--grace-ink-10);
border-radius: 10px;
background: #fff;
transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
position: relative;
}
.lead-popup__bundle-card::before {
content: '';
flex-shrink: 0;
width: 18px;
height: 18px;
border-radius: 50%;
border: 1.5px solid var(--grace-ink-10);
background: #fff;
transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.lead-popup__bundle:hover .lead-popup__bundle-card {
border-color: var(--brass);
}
.lead-popup__bundle input:checked + .lead-popup__bundle-card {
border-color: var(--brass);
background: rgba(184, 134, 76, 0.06);
}
.lead-popup__bundle input:checked + .lead-popup__bundle-card::before {
border-color: var(--brass);
background: var(--brass);
box-shadow: inset 0 0 0 4px #fff;
}
.lead-popup__bundle input:focus-visible + .lead-popup__bundle-card {
box-shadow: 0 0 0 3px rgba(184, 134, 76, 0.25);
}
.lead-popup__bundle-main {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0;
}
.lead-popup__bundle-title {
font-size: 14px;
color: var(--grace-ink);
font-weight: 500;
line-height: 1.3;
}
.lead-popup__bundle-sub {
font-size: 12.5px;
color: var(--grace-ink-60);
line-height: 1.35;
}
.lead-popup__bundle-price {
flex-shrink: 0;
font-size: 13px;
font-weight: 500;
color: var(--grace-ink);
}
.lead-popup__bundle-price--gift { color: var(--brass); }
.kb-popover {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
font-family: var(--font-sans);
}
.kb-popover[hidden] { display: none; }
.kb-popover__backdrop {
position: absolute;
inset: 0;
background: rgba(18,20,18,0.45);
backdrop-filter: blur(2px);
cursor: pointer;
}
.kb-popover__card {
position: relative;
background: var(--ivory);
border-radius: 14px;
padding: 28px 28px 24px;
max-width: 480px;
width: 100%;
max-height: 88vh;
overflow: auto;
box-shadow: var(--shadow-modal);
z-index: 1;
}
.kb-popover__close {
position: absolute;
top: 12px;
right: 12px;
width: 32px;
height: 32px;
background: transparent;
border: 0;
cursor: pointer;
color: var(--grace-ink-60);
font-size: 22px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background .15s ease, color .15s ease;
}
.kb-popover__close:hover { background: var(--grace-ink-06); color: var(--grace-ink); }
.kb-popover__title {
font-family: var(--font-display);
font-size: 22px;
font-weight: 400;
letter-spacing: var(--tracking-tight);
margin: 0 0 14px;
padding-right: 28px;
color: var(--grace-ink);
}
.kb-popover__body {
font-size: 14px;
line-height: 1.55;
color: var(--text-secondary);
}
.kb-popover__body p { margin: 0 0 10px; }
.kb-popover__body p:last-child { margin-bottom: 0; }
.kb-popover__body strong { color: var(--grace-ink); font-weight: 500; }
.kb-popover__body ul { margin: 6px 0 10px; padding-left: 18px; }
.kb-popover__body li { margin-bottom: 4px; }
.compare-table tr.compare-actions th,
.compare-table tr.compare-actions td { padding:16px; background:#FBF8F1; border-top:1px solid var(--border-default); border-bottom:none; white-space:nowrap; }
.compare-table tr.compare-actions .btn-sm { width:100%; padding:8px 10px; font-size:12px; }
.compare-table tr.highlight td,
.compare-table tr.highlight th { background:#FDFAF1; }
.compare-table tbody tr:hover td:not(:first-child) { background:#FBF8F1; }
.compare-note { max-width:var(--content-max); margin:28px auto 0; font-size:12px; color:rgba(18,20,18,0.65); text-align:right; }
@media (max-width: 900px) {
.compare-section { padding:56px var(--gutter-mobile) 64px; }
.compare-table tbody th { width:140px; }
.compare-table th, .compare-table td { padding:12px 14px; }
}
/* ——— SERVICE / WARRANTY (v3 redesign) ——— */
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.service-section { background:#F5F1E8; padding:80px var(--gutter-desktop); border-top:1px solid var(--border-hair); }
/* === SERVICE COVERAGE (intro + map) === */
.service-coverage__container {
max-width:var(--content-max);
margin:0 auto 20px;
background:#FBF8F1;
border:0.5px solid rgba(0,0,0,0.06);
border-radius:16px;
padding:56px 48px;
}
.service-coverage__grid { display:grid; grid-template-columns:minmax(320px,440px) 1fr; gap:56px; align-items:center; }
.service-coverage__eyebrow { font-family:var(--font-sans); font-size:13px; letter-spacing:0.15em; text-transform:uppercase; color:#B8923D; font-weight:500; margin-bottom:24px; display:block; }
.service-coverage__title { font-family:var(--font-display); font-size:clamp(36px,3.4vw,48px); font-weight:400; line-height:1.1; letter-spacing:var(--tracking-tight); color:#1A1A1A; margin:0 0 20px; }
.service-coverage__title .italic-accent { font-style:italic; color:#B8923D; font-weight:400; }
.service-coverage__lead { font-family:var(--font-sans); font-size:16px; line-height:1.5; color:#3A3A35; margin:0 0 36px; max-width:440px; }
.service-coverage__metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-bottom:32px; max-width:440px; }
.metric { display:flex; flex-direction:column; gap:8px; padding:0 18px; position:relative; }
.metric:first-child { padding-left:0; }
.metric:not(:last-child)::after { content:''; position:absolute; right:0; top:8px; bottom:8px; width:1px; background:rgba(0,0,0,0.08); }
.metric__icon { width:22px; height:22px; color:#B8923D; }
.metric__value { font-family:var(--font-display); font-size:26px; font-weight:500; color:#1A1A1A; line-height:1; letter-spacing:var(--tracking-tight); }
.metric__label { font-family:var(--font-sans); font-size:13px; color:#6A6A60; line-height:1.3; }
.service-coverage__btn { display:inline-flex; align-items:center; gap:10px; background:#a8803a; color:#FFFFFF; border:none; padding:14px 26px; border-radius:8px; font-family:var(--font-sans); font-size:14px; font-weight:500; text-decoration:none; cursor:pointer; transition:background 150ms var(--ease-out); }
.service-coverage__btn:hover { background:#7c5c22; opacity:1; }
.service-coverage__btn-icon, .service-coverage__btn-arrow { width:16px; height:16px; }
.service-coverage__caption { font-family:var(--font-sans); font-size:13px; line-height:1.5; color:#6A6A60; margin:16px 0 0; max-width:440px; }
/* === MAP COMPONENT === */
.coverage-map { position:relative; width:100%; aspect-ratio:3/2; background:transparent; overflow:visible; }
.coverage-map__image { display:block; width:100%; height:100%; object-fit:contain; border-radius:12px; user-select:none; pointer-events:none; }
.coverage-map__badge { position:absolute; top:24px; left:50%; transform:translateX(-50%); z-index:3; display:inline-flex; align-items:center; gap:10px; padding:10px 18px; background:#FFFFFF; border-radius:999px; box-shadow:0 4px 16px rgba(0,0,0,0.08); font-family:var(--font-sans); font-size:14px; font-weight:500; color:#1A1A1A; white-space:nowrap; }
.coverage-map__badge-icon { width:18px; height:18px; color:#B8923D; flex-shrink:0; }
.coverage-map__label { position:absolute; z-index:2; padding:6px 12px; background:#FFFFFF; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,0.08); font-family:var(--font-sans); font-size:14px; font-weight:500; color:#1A1A1A; white-space:nowrap; transform:translate(-50%,-50%); transition:transform 150ms var(--ease-out), box-shadow 150ms var(--ease-out); cursor:default; }
.coverage-map__label::after { content:''; position:absolute; width:8px; height:8px; background:#FFFFFF; transform:rotate(45deg); }
.coverage-map__label--right::after { right:-4px; top:50%; margin-top:-4px; box-shadow:2px -2px 4px rgba(0,0,0,0.04); }
.coverage-map__label--top::after { bottom:-4px; left:50%; margin-left:-4px; box-shadow:-2px 2px 4px rgba(0,0,0,0.04); }
.coverage-map__label:hover { transform:translate(-50%, calc(-50% - 2px)); box-shadow:0 4px 12px rgba(0,0,0,0.12); }
/* === AFTER-PURCHASE BLOCK === */
.service-after {
max-width:var(--content-max);
margin:0 auto 20px;
background:#FBF8F1;
border:0.5px solid rgba(0,0,0,0.06);
border-radius:16px;
padding:48px;
display:grid;
grid-template-columns:minmax(0,0.34fr) minmax(0,0.66fr);
gap:40px;
align-items:start;
}
.after-left { padding-top:4px; }
.after-eyebrow { color:#7c5c22; font-size:12px; letter-spacing:0.15em; text-transform:uppercase; font-weight:600; margin-bottom:18px; display:block; }
.after-title { font-family:var(--font-display); font-size:clamp(24px,2.4vw,34px); font-weight:400; line-height:1.15; letter-spacing:var(--tracking-tight); color:#1A1A1A; margin-bottom:16px; }
.after-title em { font-style:italic; color:#7c5c22; }
.after-lead { font-size:14px; line-height:1.55; color:#3A3A35; }
.after-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.after-card { background:#FFFFFF; border:0.5px solid rgba(0,0,0,0.06); border-radius:10px; padding:20px 16px; display:flex; flex-direction:column; }
.after-card-icon { width:36px; height:36px; color:#B8923D; margin-bottom:14px; stroke-width:1.5; }
.after-card-eyebrow { font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:#7c5c22; font-weight:600; margin-bottom:4px; line-height:1.3; }
.after-card-sub { font-size:11px; color:#6A6A60; margin-bottom:14px; line-height:1.4; }
.after-card ul { list-style:none; padding:0; margin:0; }
.after-card li { display:flex; gap:8px; align-items:flex-start; font-size:12px; color:#1A1A1A; line-height:1.4; padding:4px 0; }
.after-card li::before { content:''; width:14px; height:14px; border-radius:50%; background:#B8923D url("data:image/svg+xml;utf8,") center/contain no-repeat; flex-shrink:0; margin-top:2px; }
/* === SUPPORT BAR === */
.service-support-bar {
max-width:var(--content-max); margin:0 auto;
background:#F0E9D7;
border:0.5px solid rgba(0,0,0,0.06);
border-radius:12px;
padding:22px 28px;
display:grid;
grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) auto;
gap:28px;
align-items:center;
}
.sb-claim, .sb-help { display:flex; gap:14px; align-items:center; }
.sb-circle { width:44px; height:44px; border-radius:50%; background:#EDE0C0; display:flex; align-items:center; justify-content:center; color:#B8923D; flex-shrink:0; }
.sb-circle svg { width:20px; height:20px; stroke-width:1.5; }
.sb-claim-text { font-size:13px; line-height:1.5; color:#1A1A1A; }
.sb-help-text strong { display:block; font-weight:500; font-size:13px; color:#1A1A1A; margin-bottom:2px; }
.sb-help-text span { color:#6A6A60; font-size:12px; }
.sb-cta { background:#a8803a; color:#FFFFFF; border:none; padding:13px 24px; border-radius:8px; font-size:14px; font-weight:500; text-decoration:none; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; transition:background 150ms; }
.sb-cta:hover { background:#7c5c22; opacity:1; }
@media (max-width: 1100px) {
.after-cards { grid-template-columns:repeat(2,1fr); gap:12px; }
}
@media (max-width: 1100px) {
.service-coverage__grid { grid-template-columns:1fr; gap:40px; }
.service-coverage__map { order:-1; }
.service-coverage__title { font-size:38px; }
.coverage-map__label, .coverage-map__badge { font-size:13px; }
.coverage-map__label { padding:5px 10px; }
}
@media (max-width: 900px) {
.service-section { padding:56px var(--gutter-mobile); }
.service-coverage__container { padding:32px 24px; }
.service-after { grid-template-columns:1fr; padding:32px 24px; gap:32px; }
.service-support-bar { grid-template-columns:1fr; gap:18px; padding:20px; }
.coverage-map__label { font-size:12px; padding:4px 8px; }
.coverage-map__badge { font-size:12px; padding:8px 14px; max-width:calc(100% - 32px); white-space:normal; text-align:center; }
}
@media (max-width: 640px) {
.after-cards { grid-template-columns:1fr; }
.service-coverage__title { font-size:32px; }
.service-coverage__lead { font-size:15px; }
.coverage-map { aspect-ratio:3/2; }
.coverage-map__label { display:none; }
.coverage-map__badge { top:12px; font-size:11px; padding:6px 12px; line-height:1.3; }
.coverage-map__badge-icon { width:14px; height:14px; }
.service-coverage__metrics { max-width:none; }
.metric { padding:0 12px; }
.metric__value { font-size:22px; }
.service-coverage__btn { width:100%; justify-content:center; }
}
/* ——— FLAGSHIP / GRAND ——— */
.flagship-section {
position:relative;
background:#1F3A2E;
color:var(--ivory);
height:100vh;
min-height:620px;
display:block;
overflow:hidden;
border-top:1px solid rgba(246,241,232,0.08);
}
/* лёгкое затемнение слева под текстом */
.flagship-section::before {
content:'';
position:absolute;
inset:0;
background:radial-gradient(ellipse 55% 80% at 0% 50%, rgba(10,18,13,0.35), transparent 60%);
pointer-events:none;
z-index:0;
}
/* тонкая золотая линия-рампа у верхнего края */
.flagship-section::after {
content:'';
position:absolute;
left:var(--gutter-desktop);
right:var(--gutter-desktop);
top:0;
height:1px;
background:linear-gradient(90deg, transparent, rgba(168,128,58,0.35), transparent);
z-index:1;
pointer-events:none;
}
.flagship-left {
position:relative;
z-index:3;
padding:80px var(--gutter-desktop);
display:flex;
flex-direction:column;
justify-content:center;
max-width:640px;
width:100%;
height:100%;
}
.flagship-eyebrow {
color:var(--brass-soft);
font-size:12px;
letter-spacing:var(--tracking-eyebrow);
text-transform:uppercase;
font-weight:600;
display:block;
margin-bottom:22px;
}
.flagship-title {
font-family:var(--font-display);
font-size:clamp(38px,4vw,58px);
font-weight:400;
line-height:1.08;
letter-spacing:var(--tracking-tight);
color:var(--ivory);
margin-bottom:24px;
}
.flagship-title em { font-style:italic; color:var(--brass-soft); font-weight:400; }
.flagship-lead {
font-family:var(--font-sans);
font-size:17px;
line-height:1.5;
color:var(--ivory);
font-weight:600;
margin-bottom:22px;
max-width:520px;
letter-spacing:-0.005em;
}
.flagship-body { margin-bottom:24px; max-width:520px; }
.flagship-body p { color:rgba(246,241,232,0.78); font-size:15px; line-height:1.65; margin-bottom:14px; }
.flagship-body p:last-child { margin-bottom:0; }
.flagship-body strong { color:var(--ivory); font-weight:600; }
.flagship-badges { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px; }
.flagship-badge {
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 16px;
background:rgba(184,146,61,0.08);
border:1px solid rgba(184,146,61,0.3);
border-radius:999px;
color:var(--ivory);
font-size:14px;
font-weight:400;
letter-spacing:0.01em;
line-height:1;
white-space:nowrap;
}
.flagship-final {
font-family:var(--font-display);
font-size:21px;
font-style:italic;
font-weight:400;
color:var(--ivory);
line-height:1.35;
margin:0 0 36px;
padding-left:18px;
border-left:2px solid var(--brass);
max-width:520px;
letter-spacing:var(--tracking-tight);
}
.flagship-final em { font-style:italic; color:var(--brass-soft); }
.flagship-actions { display:flex; gap:12px; flex-wrap:wrap; }
.flagship-media {
position:absolute;
inset:0;
z-index:1;
overflow:hidden;
background:transparent;
}
.flagship-media .grand-glow { display:none; }
.flagship-media img.grand-hero {
position:absolute;
right:0;
top:0;
bottom:0;
height:100%;
width:auto;
max-width:none;
max-height:100%;
object-fit:contain;
object-position:right center;
mix-blend-mode:normal;
filter:none;
z-index:2;
}
/* градиент-затемнение слева — фото плавно уходит в bg секции #1F3A2E */
.flagship-media::before {
content:'';
position:absolute;
inset:0;
background:linear-gradient(
to right,
rgba(31, 58, 46, 1) 0%,
rgba(31, 58, 46, 1) 28%,
rgba(31, 58, 46, 0.75) 38%,
rgba(31, 58, 46, 0) 52%
);
z-index:3;
pointer-events:none;
}
.flagship-signature {
position:absolute;
right:var(--gutter-desktop);
bottom:28px;
font-family:var(--font-display);
font-size:13px;
font-style:italic;
color:rgba(255,255,255,0.8);
text-shadow:0 1px 4px rgba(0,0,0,0.5);
letter-spacing:0.04em;
z-index:4;
}
@media (max-width: 900px) {
.flagship-section { height:auto; min-height:unset; }
.flagship-left { padding:64px var(--gutter-mobile) 40px; max-width:100%; height:auto; }
.flagship-media { position:relative; width:100%; height:auto; padding:0; }
.flagship-media img.grand-hero {
position:relative;
inset:auto;
width:100%;
height:auto;
max-width:100%;
object-fit:cover;
object-position:center center;
-webkit-mask-image:none;
mask-image:none;
display:block;
}
.flagship-media::before { display:none; }
.flagship-signature { position:static; margin:24px var(--gutter-mobile) 32px; text-align:right; }
}
/* ——— REVIEWS ——— */
.reviews { background:#F5F1E8; padding:96px var(--gutter-desktop); border-top:1px solid var(--border-hair); }
.reviews__container { max-width:var(--content-max); margin:0 auto; }
.reviews__header { text-align:center; margin-bottom:36px; }
.reviews__eyebrow { font-family:var(--font-sans); font-size:13px; letter-spacing:0.15em; text-transform:uppercase; color:#7c5c22; font-weight:500; display:block; margin-bottom:16px; }
.reviews__title { font-family:var(--font-display); font-size:clamp(36px,4vw,48px); font-weight:400; line-height:1.1; letter-spacing:var(--tracking-tight); color:#1A1A1A; margin:0 0 18px; }
.reviews__title .italic-accent { font-style:italic; color:#7c5c22; font-weight:400; }
.reviews__lead { font-family:var(--font-sans); font-size:16px; line-height:1.5; color:#3A3A35; margin:0 auto; max-width:600px; }
/* Aggregate rating */
.reviews__aggregate { display:grid; grid-template-columns:1fr 1fr 1fr 1fr 1fr; gap:0; max-width:1100px; margin:0 auto 20px; padding:24px 32px; background:#FFFFFF; border-radius:16px; box-shadow:0 2px 20px rgba(0,0,0,0.04); align-items:center; border:0.5px solid rgba(0,0,0,0.04); }
.agg-rating { display:flex; align-items:center; gap:12px; padding-right:20px; border-right:1px solid rgba(0,0,0,0.08); }
.agg-rating .big-star { width:36px; height:36px; color:#B8923D; flex-shrink:0; }
.agg-rating .big-star svg { width:100%; height:100%; }
.agg-rating .agg-val { display:flex; align-items:baseline; gap:5px; font-family:var(--font-display); font-size:40px; font-weight:400; color:#1A1A1A; line-height:1; letter-spacing:-0.02em; }
.agg-rating .agg-val .sfx { font-family:var(--font-sans); font-size:13px; color:#6A6A60; font-weight:400; }
.agg-count { padding:0 20px; border-right:1px solid rgba(0,0,0,0.08); }
.agg-count .count-label { font-family:var(--font-sans); font-size:12px; color:#6A6A60; line-height:1.3; }
.agg-count .count-value { font-family:var(--font-sans); font-size:16px; font-weight:600; color:#1A1A1A; margin:2px 0 6px; }
.stars-mini { display:flex; gap:2px; }
.stars-mini svg { width:13px; height:13px; color:#B8923D; }
.aggregate-platform { display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:0 20px; text-decoration:none; color:inherit; position:relative; transition:opacity 150ms; }
.aggregate-platform:hover { opacity:0.7; }
.aggregate-platform:not(:last-child)::after { content:''; position:absolute; right:0; top:8px; bottom:8px; width:1px; background:rgba(0,0,0,0.08); }
.platform-rating { font-family:var(--font-sans); font-size:15px; font-weight:500; color:#1A1A1A; }
.platform-count { font-family:var(--font-sans); font-size:13px; color:#6A6A60; }
/* Platform logos (SVG/text hybrid) */
.plogo { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-sans); font-weight:600; font-size:14px; color:#1A1A1A; margin-bottom:8px; letter-spacing:-0.01em; line-height:1; }
.plogo--lp .heart-ico { width:16px; height:16px; color:#E63946; flex-shrink:0; }
.plogo--ozon { color:#005BFF; font-weight:700; font-size:18px; letter-spacing:-0.04em; margin-bottom:6px; }
.plogo--ym { gap:5px; }
.plogo--ym .ym-badge { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; background:#FC3F1D; color:#FFFFFF; border-radius:3px; font-size:11px; font-weight:700; line-height:1; }
/* Footer-size logos (smaller variant) */
.plogo-sm { display:inline-flex; align-items:center; gap:5px; font-family:var(--font-sans); font-weight:600; font-size:12px; color:#1A1A1A; letter-spacing:-0.01em; line-height:1; white-space:nowrap; flex-shrink:0; }
.plogo-sm--lp .heart-ico { width:13px; height:13px; color:#E63946; flex-shrink:0; }
.plogo-sm--ozon { color:#005BFF; font-weight:700; font-size:14px; letter-spacing:-0.04em; }
.plogo-sm--ym .ym-badge { display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; background:#FC3F1D; color:#FFFFFF; border-radius:2px; font-size:9px; font-weight:700; line-height:1; }
.reviews__verified { display:flex; align-items:center; justify-content:center; gap:8px; margin:0 auto 40px; font-family:var(--font-sans); font-size:14px; color:#3A3A35; }
.reviews__verified svg { width:16px; height:16px; color:#B8923D; flex-shrink:0; }
/* Review cards grid */
.reviews__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:40px; }
.review-card { background:#FFFFFF; border-radius:12px; padding:24px; display:flex; flex-direction:column; gap:16px; border:0.5px solid rgba(0,0,0,0.06); box-shadow:0 2px 12px rgba(0,0,0,0.03); }
.review-card__header { display:grid; grid-template-columns:48px 1fr auto; gap:12px; align-items:start; }
.review-card__avatar { width:48px; height:48px; border-radius:50%; object-fit:cover; background:#E8EDE3; color:#2F4A36; display:flex; align-items:center; justify-content:center; font-family:var(--font-sans); font-weight:600; font-size:16px; letter-spacing:0.02em; flex-shrink:0; }
/* Review media (photos / video thumbs) */
.review-card__media { display:grid; gap:6px; margin-top:4px; }
.review-card__media--single { grid-template-columns:1fr; max-width:120px; margin-left:auto; }
.review-card__media--double { grid-template-columns:1fr 1fr; }
.review-card__media .media-item { position:relative; aspect-ratio:4/3; border-radius:6px; overflow:hidden; background:#F5F1E8; }
.review-card__media .media-item img { width:100%; height:100%; object-fit:cover; display:block; }
.media-item--video::before { content:''; position:absolute; inset:0; background:rgba(0,0,0,0.25); pointer-events:none; }
.media-item--video::after { content:'▶'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:28px; height:28px; background:rgba(0,0,0,0.65); color:#FFF; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; padding-left:2px; pointer-events:none; }
.media-item .timecode { position:absolute; bottom:4px; left:4px; background:rgba(0,0,0,0.7); color:#FFF; font-size:10px; padding:2px 6px; border-radius:3px; font-family:var(--font-sans); font-weight:500; line-height:1.2; z-index:2; }
.review-card__author { display:flex; flex-direction:column; gap:2px; }
.review-card__author .author-name { font-family:var(--font-sans); font-size:15px; font-weight:500; color:#1A1A1A; }
.review-card__author .author-city { font-family:var(--font-sans); font-size:13px; color:#6A6A60; }
.review-card__author .author-model { font-family:var(--font-sans); font-size:13px; font-weight:500; color:#7c5c22; text-decoration:none; margin-top:4px; align-self:flex-start; }
.review-card__author .author-model:hover { text-decoration:underline; }
.review-card__rating { display:flex; gap:2px; }
.review-card__rating svg { width:14px; height:14px; color:#B8923D; }
.review-card__body { font-family:var(--font-sans); font-size:14px; line-height:1.6; color:#3A3A35; flex-grow:1; }
.review-card__body p { margin:0 0 12px; }
.review-card__body p:last-child { margin-bottom:0; }
.review-card__footer { display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding-top:14px; border-top:0.5px solid rgba(0,0,0,0.08); margin-top:auto; }
.verified-label { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-sans); font-size:11px; color:#6A6A60; white-space:nowrap; }
.verified-label svg { width:14px; height:14px; color:#B8923D; stroke-width:2; flex-shrink:0; }
/* Pagination */
.reviews__pagination { display:flex; justify-content:center; gap:10px; margin:0 0 32px; }
.reviews__pagination .dot { width:8px; height:8px; border-radius:50%; border:none; background:rgba(0,0,0,0.2); cursor:pointer; padding:0; transition:background 150ms, transform 150ms; }
.reviews__pagination .dot:hover { background:rgba(0,0,0,0.4); }
.reviews__pagination .dot.active { background:#B8923D; transform:scale(1.2); }
/* Compact mini reviews carousel */
.reviews__mini-head { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:8px 0 20px; }
.reviews__mini-head h3 { font-family:var(--font-display); font-size:24px; font-weight:500; color:#1A1A1A; margin:0; letter-spacing:var(--tracking-tight); }
.reviews__mini-sub { font-family:var(--font-sans); font-size:13px; color:#6A6A60; flex:1; min-width:0; }
.reviews__mini-controls { display:flex; gap:8px; }
.reviews__mini-arrow { width:40px; height:40px; border-radius:50%; border:1px solid rgba(0,0,0,0.12); background:#FFFFFF; color:#3A3A35; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:background 150ms, color 150ms, border-color 150ms, opacity 150ms; padding:0; }
.reviews__mini-arrow svg { width:18px; height:18px; }
.reviews__mini-arrow:hover { background:#1A1A1A; color:#FFFFFF; border-color:#1A1A1A; }
.reviews__mini-arrow:disabled { opacity:0.35; cursor:default; }
.reviews__mini-arrow:disabled:hover { background:#FFFFFF; color:#3A3A35; border-color:rgba(0,0,0,0.12); }
.reviews__mini-carousel { position:relative; margin-bottom:24px; }
.reviews__mini-track { display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:4px 4px 6px; }
.reviews__mini-track::-webkit-scrollbar { display:none; }
.reviews__mini-track .review-mini { flex:0 0 calc((100% - 28px) / 3); scroll-snap-align:start; }
.reviews__mini-dots { display:flex; justify-content:center; gap:8px; margin-top:14px; }
.reviews__mini-dots .dot {
width:44px; height:44px;
border-radius:50%; border:none;
background:transparent;
cursor:pointer; padding:0;
position:relative;
transition:background 150ms, transform 150ms;
}
.reviews__mini-dots .dot::before {
content:'';
position:absolute;
top:50%; left:50%;
width:8px; height:8px;
margin:-4px 0 0 -4px;
border-radius:50%;
background:rgba(0,0,0,0.18);
transition:background 150ms, transform 150ms;
}
.reviews__mini-dots .dot:hover::before { background:rgba(0,0,0,0.4); }
.reviews__mini-dots .dot.is-active::before { background:#7c5c22; transform:scale(1.4); }
.review-mini { background:#FFFFFF; border:1px solid rgba(0,0,0,0.08); border-radius:12px; padding:18px 18px 16px; display:flex; flex-direction:column; gap:10px; }
.review-mini header { display:grid; grid-template-columns:36px 1fr auto; align-items:center; gap:10px; }
.review-mini__avatar { width:36px; height:36px; border-radius:50%; background:#E8EDE3; color:#2F4A36; font-family:var(--font-sans); font-weight:600; font-size:14px; display:flex; align-items:center; justify-content:center; }
.review-mini__avatar[data-c="2"] { background:#F5EAD8; color:#8A6F2A; }
.review-mini__avatar[data-c="3"] { background:#E5E1D5; color:#5A5550; }
.review-mini__avatar[data-c="4"] { background:#EDE3E8; color:#5A2F46; }
.review-mini__avatar[data-c="5"] { background:#DFE6EC; color:#2F4A5A; }
.review-mini__avatar[data-c="6"] { background:#F0E5DD; color:#5C3F28; }
.review-mini__meta { min-width:0; }
.review-mini__name { font-family:var(--font-sans); font-size:13.5px; font-weight:600; color:#1A1A1A; line-height:1.2; }
.review-mini__date { font-family:var(--font-sans); font-size:11.5px; color:#6A6A60; margin-top:2px; }
.review-mini__model { color:#7c5c22; font-weight:500; }
.review-mini__stars { color:#B8923D; font-size:12px; letter-spacing:1px; white-space:nowrap; }
.review-mini p { font-family:var(--font-sans); font-size:13.5px; line-height:1.55; color:#3A3A35; margin:0; }
/* CTA + external links */
.reviews__cta { display:flex; flex-direction:column; align-items:center; gap:16px; }
.reviews__btn { display:inline-flex; align-items:center; gap:10px; background:#B8923D; color:#FFFFFF; padding:16px 32px; border-radius:8px; font-family:var(--font-sans); font-size:15px; font-weight:500; text-decoration:none; transition:background 150ms; }
.reviews__btn:hover { background:#A37F30; opacity:1; }
.reviews__btn svg { width:16px; height:16px; }
.reviews__external-links { font-family:var(--font-sans); font-size:14px; color:#6A6A60; }
.reviews__external-links a { color:#3A3A35; text-decoration:none; font-weight:500; transition:color 150ms; }
.reviews__external-links a:hover { color:#B8923D; text-decoration:underline; }
@media (max-width: 1199px) {
.reviews__aggregate { grid-template-columns:1fr 1fr; gap:20px; }
.aggregate-main { grid-column:1 / -1; border-right:none; border-bottom:1px solid rgba(0,0,0,0.08); padding-right:0; padding-bottom:20px; }
.aggregate-platform:nth-child(2)::after { display:none; }
.reviews__grid { grid-template-columns:repeat(2,1fr); }
.reviews__mini-track .review-mini { flex:0 0 calc((100% - 14px) / 2); }
}
@media (max-width: 640px) {
.reviews { padding:64px var(--gutter-mobile); }
.reviews__title { font-size:clamp(26px, 7vw, 36px); }
.reviews__aggregate { grid-template-columns:1fr; padding:20px 24px; }
.aggregate-platform:not(:last-child)::after { display:none; }
.aggregate-platform { padding:16px 0 0; border-top:1px solid rgba(0,0,0,0.08); }
.reviews__grid { grid-template-columns:1fr; }
.reviews__mini-track .review-mini { flex:0 0 calc(100% - 8px); }
.reviews__btn { width:100%; justify-content:center; }
}
/* ——— FAQ ——— */
.faq { background:#1F3A2E; padding:96px var(--gutter-desktop); color:#F0EBE0; position:relative; }
.faq__container { max-width:var(--content-max); margin:0 auto; }
.faq__header { margin-bottom:56px; text-align:center; }
.faq__eyebrow { font-family:var(--font-sans); font-size:13px; letter-spacing:0.15em; text-transform:uppercase; font-weight:500; color:#7c5c22; display:block; margin-bottom:16px; }
.faq__title { font-family:var(--font-display); font-size:clamp(36px,4vw,48px); font-weight:400; line-height:1.15; letter-spacing:var(--tracking-tight); color:#F0EBE0; margin:0 0 16px; }
.faq__title .italic-accent { font-style:italic; color:#B8923D; font-weight:400; }
.faq__lead { font-family:var(--font-sans); font-size:16px; line-height:1.5; color:rgba(240,235,224,0.7); margin:0 auto; max-width:600px; }
.faq__grid { display:grid; grid-template-columns:minmax(280px,360px) 1fr; gap:48px; align-items:start; }
/* Left support card */
.faq__support { background:rgba(255,255,255,0.03); border:0.5px solid rgba(255,255,255,0.08); border-radius:16px; padding:40px 32px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; position:sticky; top:32px; }
.support__icon { width:48px; height:48px; color:#B8923D; margin-bottom:4px; }
.support__icon svg { width:100%; height:100%; }
.support__title { font-family:var(--font-display); font-size:22px; font-weight:500; line-height:1.3; color:#F0EBE0; margin:0; letter-spacing:var(--tracking-tight); }
.support__text { font-family:var(--font-sans); font-size:14px; line-height:1.55; color:rgba(240,235,224,0.7); margin:0; }
.support__cta { width:100%; justify-content:center; background:#a8803a; color:#FFFFFF; display:inline-flex; align-items:center; gap:10px; padding:14px 24px; border-radius:8px; font-family:var(--font-sans); font-size:14px; font-weight:500; text-decoration:none; margin-top:8px; transition:background 150ms; }
.support__cta:hover { background:#A37F30; opacity:1; }
.support__cta svg { width:16px; height:16px; }
.support__trust { display:flex; align-items:flex-start; gap:12px; text-align:left; margin-top:8px; padding-top:20px; border-top:0.5px solid rgba(255,255,255,0.08); width:100%; }
.trust__icon { width:20px; height:20px; color:#B8923D; flex-shrink:0; margin-top:2px; }
.trust__title { font-family:var(--font-sans); font-size:13px; font-weight:500; color:#F0EBE0; margin-bottom:4px; }
.trust__desc { font-family:var(--font-sans); font-size:12px; line-height:1.5; color:rgba(240,235,224,0.55); }
/* Accordion */
.faq__accordion { display:flex; flex-direction:column; }
.faq-item { border-bottom:0.5px solid rgba(255,255,255,0.1); }
.faq-item:first-child { border-top:0.5px solid rgba(255,255,255,0.1); }
.faq-item__question { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:24px 4px; cursor:pointer; list-style:none; font-family:var(--font-sans); font-size:17px; font-weight:400; line-height:1.4; color:#F0EBE0; transition:color 150ms; }
.faq-item__question::-webkit-details-marker { display:none; }
.faq-item__question::marker { content:''; }
.faq-item__question:hover { color:#B8923D; }
.faq-item__icon { position:relative; width:20px; height:20px; flex-shrink:0; }
.faq-item__icon::before, .faq-item__icon::after { content:''; position:absolute; background:#B8923D; transition:transform 300ms ease-out; }
.faq-item__icon::before { top:50%; left:0; width:100%; height:1.5px; margin-top:-0.75px; }
.faq-item__icon::after { left:50%; top:0; height:100%; width:1.5px; margin-left:-0.75px; }
.faq-item[open] .faq-item__icon::after { transform:scaleY(0); }
.faq-item[open] .faq-item__question { color:#B8923D; }
.faq-item__answer { padding:0 4px 28px; font-family:var(--font-sans); font-size:15px; line-height:1.6; color:rgba(240,235,224,0.8); }
.faq-item__answer p { margin:0 0 14px; }
.faq-item__answer p:last-child { margin-bottom:0; }
.faq-item__answer strong { color:#F0EBE0; font-weight:500; }
.faq-item__answer ul { padding-left:20px; margin:8px 0 14px; }
.faq-item__answer ul li { margin-bottom:6px; padding-left:4px; }
.faq-item__answer ul li::marker { color:#B8923D; }
.faq-item__answer a { color:#B8923D; text-decoration:none; border-bottom:1px solid rgba(184,146,61,0.4); transition:border-color 150ms; }
.faq-item__answer a:hover { border-bottom-color:#B8923D; }
@media (max-width: 1023px) {
.faq__grid { grid-template-columns:1fr; gap:32px; }
.faq__support { position:static; }
}
@media (max-width: 640px) {
.faq { padding:64px var(--gutter-mobile); }
.faq__title { font-size:clamp(26px, 7vw, 36px); }
.faq__header { margin-bottom:40px; }
.faq__support { padding:28px 24px; order:-1; }
.support__cta { width:100%; }
.faq-item__question { font-size:15px; padding:20px 4px; gap:16px; }
.faq-item__answer { font-size:14px; padding-bottom:24px; }
}
/* ——— ABOUT ——— */
.about-section {
background:var(--forest);
color:var(--ivory);
padding:80px var(--gutter-desktop);
display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;
}
.about-eyebrow { color:var(--brass-soft); margin-bottom:16px; display:block; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:var(--tracking-eyebrow); }
.about-section h2 { font-family:var(--font-display); font-size:clamp(28px,3vw,44px); font-weight:400; line-height:var(--leading-display); letter-spacing:var(--tracking-tight); margin-bottom:16px; color:var(--ivory); }
.about-section p { color:var(--text-on-dark-soft); font-size:15px; line-height:var(--leading-body); }
.about-stats { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.stat-num { font-family:var(--font-display); font-size:40px; font-weight:400; color:var(--brass-soft); line-height:1; letter-spacing:var(--tracking-tight); }
.stat-label { font-size:12px; color:var(--text-on-dark-soft); margin-top:5px; }
/* ——— FORM ——— */
.form-section {
padding:80px var(--gutter-desktop);
background:var(--ivory-deep);
display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start;
border-top:1px solid var(--border-hair);
}
.form-info h2 { font-family:var(--font-display); font-size:clamp(26px,3vw,40px); font-weight:400; letter-spacing:var(--tracking-tight); line-height:var(--leading-display); margin:10px 0 16px; }
.form-info p { color:var(--text-secondary); font-size:15px; line-height:var(--leading-body); margin-bottom:24px; }
.contact-item { margin-bottom:12px; }
.contact-item strong { display:block; font-size:14px; font-weight:600; }
.contact-item span { color:var(--text-secondary); font-size:12px; }
.form-fields { display:flex; flex-direction:column; gap:10px; }
.form-fields input,
.form-fields select,
.form-fields textarea {
padding:11px 14px; border:1px solid var(--border-default); border-radius:var(--radius-xs);
font-size:14px; font-family:var(--font-sans); background:var(--white); width:100%;
color:var(--text-primary); outline:none; transition:border-color var(--dur-default);
}
.form-fields input:focus,
.form-fields select:focus,
.form-fields textarea:focus { border-color:var(--brass); box-shadow:0 0 0 3px var(--brass-wash); }
.form-fields textarea { min-height:88px; resize:vertical; }
.btn-submit { background:var(--brass); color:#fff; border:none; padding:14px; border-radius:var(--radius-sm); font-size:14px; font-weight:600; width:100%; font-family:var(--font-sans); cursor:pointer; transition:opacity var(--dur-default); }
.btn-submit:hover { opacity:0.88; }
/* ——— FOOTER ——— */
/* === FOOTER === */
.footer {
background: var(--forest-deep);
color: rgba(246, 241, 232, 0.55);
padding: 32px var(--gutter-desktop) 24px;
display: grid;
grid-template-columns: 1.2fr 1.2fr 1.2fr 1.2fr;
gap: 32px;
align-items: start;
font-family: var(--font-sans);
font-size: 12px;
line-height: 1.5;
}
.footer__brand { display: flex; flex-direction: column; gap: 10px; }
.footer-logo svg path { fill: rgba(246, 241, 232, 0.65); }
.footer-copy { font-size: 11px; color: rgba(246, 241, 232, 0.4); line-height: 1.5; }
.footer__col-title {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(246, 241, 232, 0.45);
margin-bottom: 10px;
}
.footer__nav {
display: flex !important;
flex-direction: column !important;
gap: 6px;
}
.footer__nav a {
display: block;
color: rgba(246, 241, 232, 0.72);
font-size: 12px;
line-height: 1.4;
text-decoration: none;
transition: color var(--dur-default);
}
.footer__nav a:hover { color: var(--ivory); }
.footer-legal { font-size: 11px; line-height: 1.5; color: rgba(246, 241, 232, 0.55); }
.footer-legal__company { font-weight: 600; color: rgba(246, 241, 232, 0.8); margin-bottom: 4px; font-size: 12px; }
.footer-legal__details { color: rgba(246, 241, 232, 0.55); font-size: 11px; }
.footer-contacts { display: flex; flex-direction: column; gap: 6px; }
.footer-contacts__item {
display: block;
color: rgba(246, 241, 232, 0.8);
font-size: 12px;
line-height: 1.4;
text-decoration: none;
transition: color var(--dur-default);
}
.footer-contacts__item:hover { color: var(--ivory); }
/* Планшет */
@media (max-width: 1024px) {
.footer {
grid-template-columns: 1fr 1fr;
gap: 24px 32px;
padding: 28px 24px 24px;
}
}
/* Мобильный */
@media (max-width: 599px) {
.footer {
grid-template-columns: 1fr;
gap: 20px;
padding: 28px 20px 20px;
}
.footer__col-title { margin-bottom: 8px; }
}
/* ——— SOUND (Steinway, hero-style) ——— */
.sound {
position: relative;
background: #1F3A2E;
color: #F0EBE0;
overflow: hidden;
min-height: 480px;
display: block;
}
/* фото слева, сдвинуто на 2см за левый край — рояль и градиент смещены влево */
.sound__image {
position: absolute;
top: 0; left: -2cm; bottom: 0;
width: 50%;
z-index: 2;
overflow: hidden;
}
/* мягкий градиент-затемнение справа — как в блоке «Мы делаем даже концертные рояли», зеркально. Фейд только после правого края рояля. */
.sound__image::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to right,
rgba(31, 58, 46, 0) 0%,
rgba(31, 58, 46, 0) 82%,
rgba(31, 58, 46, 0.75) 93%,
rgba(31, 58, 46, 1) 100%
);
z-index: 1;
pointer-events: none;
}
.sound__image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
}
.sound__image .image-caption {
position: absolute;
bottom: 24px;
left: 28%;
font-family: var(--font-display);
font-size: 13px;
font-style: italic;
color: rgba(184, 146, 61, 0.85);
text-shadow: 0 1px 3px rgba(0,0,0,0.5);
letter-spacing: 0.02em;
z-index: 2;
pointer-events: none;
}
/* текст — начинается после фото, полностью на зелёном */
.sound__content {
position: relative;
z-index: 3;
margin-left: 48%;
padding: 64px var(--gutter-desktop) 64px 40px;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 480px;
}
.sound__eyebrow {
font-family: var(--font-sans);
font-size: 13px;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
font-weight: 600;
color: var(--brass-soft);
margin-bottom: 24px;
}
.sound__title {
font-family: var(--font-display);
font-size: clamp(34px, 4vw, 56px);
font-weight: 400;
line-height: 1.08;
color: #F0EBE0;
margin: 0 0 32px;
letter-spacing: var(--tracking-tight);
}
.sound__title .italic-accent {
font-style: italic;
color: #B8923D;
}
.sound__lead {
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.65;
color: rgba(240,235,224,0.85);
margin: 8px 0 0;
max-width: 540px;
}
.sound__lead + .sound__lead { margin-top: 16px; }
.sound__lead strong { color: #d8b777; font-weight: 500; }
.sound__player {
display: flex;
align-items: center;
gap: 16px;
margin-top: 28px;
max-width: 420px;
}
.sound__player audio { display: none; }
.sound__player-btn {
width: 44px; height: 44px;
border: 1px solid rgba(184,146,61,0.4);
border-radius: 50%;
background: rgba(184,146,61,0.08);
color: #B8923D;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
padding: 0;
flex-shrink: 0;
transition: background var(--dur-default), border-color var(--dur-default), transform var(--dur-default);
}
.sound__player-btn:hover { background: rgba(184,146,61,0.18); border-color: rgba(184,146,61,0.65); }
.sound__player-btn:active { transform: scale(0.96); }
.sound__player-btn svg { width: 16px; height: 16px; }
.sound__player-btn .icon-play { margin-left: 2px; }
.sound__player-btn .icon-pause { display: none; }
.sound__player.is-playing .icon-play { display: none; }
.sound__player.is-playing .icon-pause { display: block; }
.sound__player-info { flex: 1; min-width: 0; }
.sound__player-label {
font-family: var(--font-sans);
font-size: 12px;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
font-weight: 500;
color: var(--brass-soft);
margin-bottom: 8px;
}
.sound__player-bar {
height: 2px;
background: rgba(184,146,61,0.2);
border-radius: 1px;
overflow: hidden;
}
.sound__player-fill {
display: block;
height: 100%;
width: 0%;
background: #B8923D;
transition: width 0.1s linear;
}
/* ——— WHY GRACE ——— */
.why-section {
position: relative;
background: #F5F1E8;
padding: 88px 0 80px;
overflow: hidden;
}
.why-section__bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.why-section__bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 65% 50%;
display: block;
}
.why-section__bg::after {
content: "";
position: absolute;
inset: 0;
background:
/* Низ плавно уходит в ivory, чтобы карточки лежали на чистом фоне */
linear-gradient(
to bottom,
transparent 0%,
rgba(245, 241, 232, 0) 35%,
rgba(245, 241, 232, 0.78) 70%,
rgba(245, 241, 232, 0.96) 92%
),
/* Левая часть — текст всегда читаемый на ivory-фоне */
linear-gradient(
to right,
rgba(245, 241, 232, 0.94) 0%,
rgba(245, 241, 232, 0.85) 25%,
rgba(245, 241, 232, 0.4) 48%,
rgba(245, 241, 232, 0.05) 70%,
transparent 90%
);
}
.why-section__container {
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
position: relative;
z-index: 1;
width: 100%;
}
.why-header {
max-width: 560px;
margin-bottom: 40px;
}
.why-eyebrow {
display: inline-block;
font-family: var(--font-sans);
font-size: 13px;
letter-spacing: 0.15em;
text-transform: uppercase;
font-weight: 500;
color: var(--brass);
margin-bottom: 24px;
}
.why-title {
font-family: var(--font-display);
font-size: clamp(34px, 3.6vw, 52px);
font-weight: 400;
line-height: 1.08;
color: #1A1A1A;
margin: 0 0 20px;
letter-spacing: var(--tracking-tight);
}
.why-title .italic-accent {
font-style: italic;
color: var(--brass);
}
.why-lead {
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.5;
color: #3A3A35;
margin: 0;
max-width: 460px;
}
.why-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-top: 56px;
}
.why-card {
background: #FFFFFF;
border: 0.5px solid rgba(0, 0, 0, 0.06);
border-radius: 16px;
padding: 24px 22px;
display: flex;
flex-direction: column;
gap: 14px;
transition: transform 200ms, box-shadow 200ms;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
}
.why-card:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}
.why-card__icon {
width: 52px;
height: 52px;
border-radius: 50%;
background: rgba(168, 128, 58, 0.08);
border: 0.5px solid rgba(168, 128, 58, 0.2);
display: flex;
align-items: center;
justify-content: center;
color: var(--brass);
flex-shrink: 0;
}
.why-card__icon svg { width: 22px; height: 22px; }
.why-card__title {
font-family: var(--font-sans);
font-size: 15px;
font-weight: 500;
color: #1A1A1A;
margin: 0;
line-height: 1.3;
}
.why-card__desc {
font-family: var(--font-sans);
font-size: 13.5px;
line-height: 1.5;
color: #6A6A60;
margin: 0;
}
@media (max-width: 1199px) {
.why-section { padding: 64px 0 56px; }
.why-title { font-size: clamp(28px, 4.4vw, 42px); }
.why-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
.why-section { padding: 56px 0 48px; }
.why-section__container { padding: 0 16px; }
.why-header { margin-bottom: 28px; }
.why-title { font-size: clamp(24px, 6.5vw, 32px); }
.why-lead { font-size: 15px; }
.why-cards { grid-template-columns: 1fr; gap: 12px; }
.why-card { padding: 20px 18px; }
}
/* ——— FACTORY / PRODUCTION ——— */
.factory-section {
background: #F5F1E8;
padding: 40px 0;
position: relative;
height: 100vh;
min-height: 600px;
display: flex;
align-items: center;
box-sizing: border-box;
}
.factory-section__container {
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
width: 100%;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
gap: 24px;
}
.factory-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
gap: 36px;
align-items: stretch;
flex: 0 0 auto;
}
.factory-hero__text {
display: flex;
flex-direction: column;
justify-content: center;
}
.factory-eyebrow {
font-family: var(--font-sans);
font-size: 12px;
letter-spacing: 0.15em;
text-transform: uppercase;
font-weight: 500;
color: var(--brass-deep);
margin-bottom: 14px;
}
.factory-title {
font-family: var(--font-display);
font-size: clamp(24px, 2.4vw, 36px);
font-weight: 400;
line-height: 1.1;
color: #1A1A1A;
margin: 0 0 14px;
letter-spacing: var(--tracking-tight);
}
.factory-lead {
font-family: var(--font-sans);
font-size: 13.5px;
line-height: 1.5;
color: #3A3A35;
margin: 0 0 20px;
max-width: 520px;
}
.factory-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.factory-stat {
display: flex;
flex-direction: column;
gap: 8px;
}
.factory-stat__icon {
width: 24px;
height: 24px;
color: var(--brass);
display: flex;
align-items: center;
justify-content: flex-start;
}
.factory-stat__icon svg { width: 24px; height: 24px; }
.factory-stat__num {
font-family: var(--font-display);
font-size: 22px;
font-weight: 400;
color: var(--brass);
line-height: 1;
letter-spacing: var(--tracking-tight);
}
.factory-stat__label {
font-family: var(--font-sans);
font-size: 11.5px;
line-height: 1.4;
color: #6A6A60;
}
.factory-hero__photo {
position: relative;
border-radius: 12px;
overflow: hidden;
background: var(--ivory-deep);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
min-height: 280px;
}
.factory-hero__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
position: absolute;
inset: 0;
}
.factory-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
flex: 0 0 auto;
}
.factory-card {
display: flex;
flex-direction: column;
gap: 8px;
}
.factory-card__photo {
aspect-ratio: 16 / 10;
border-radius: 10px;
overflow: hidden;
background: var(--ivory-deep);
}
.factory-card__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 400ms ease;
}
.factory-card:hover .factory-card__photo img { transform: scale(1.04); }
.factory-card__title {
font-family: var(--font-sans);
font-size: 13.5px;
font-weight: 600;
color: #1A1A1A;
margin: 2px 0 0;
line-height: 1.3;
}
.factory-card__desc {
font-family: var(--font-sans);
font-size: 12.5px;
line-height: 1.4;
color: #6A6A60;
margin: 0;
}
@media (max-height: 720px) {
.factory-section { height: auto; min-height: 100vh; padding: 32px 0; }
.factory-title { font-size: 22px; }
.factory-lead { font-size: 13px; margin-bottom: 16px; }
.factory-hero__photo { min-height: 240px; }
}
@media (max-width: 1199px) {
.factory-section { height: auto; min-height: auto; padding: 48px 0; }
.factory-hero {
grid-template-columns: 1fr;
gap: 24px;
}
.factory-hero__photo { min-height: 280px; }
.factory-stats { grid-template-columns: repeat(4, 1fr); gap: 12px; }
.factory-cards { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 767px) {
.factory-section { padding: 40px 0; height: auto; }
.factory-section__container { padding: 0 16px; gap: 20px; }
.factory-hero__photo { min-height: 200px; order: -1; }
.factory-title { font-size: clamp(20px, 5.5vw, 28px); }
.factory-stats { grid-template-columns: 1fr 1fr; gap: 14px; }
.factory-cards { grid-template-columns: 1fr; gap: 14px; }
}
/* ——— VIDEO MODAL ——— */
.video-modal {
position: fixed;
inset: 0;
z-index: 1100;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
}
.video-modal.is-open { display: flex; }
.video-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(10, 18, 13, 0.88);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.video-modal__dialog {
position: relative;
width: 100%;
max-width: 1280px;
aspect-ratio: 16 / 9;
background: #000;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 24px 80px rgba(0,0,0,0.55);
animation: vmFadeIn 0.25s ease-out;
}
@keyframes vmFadeIn {
from { opacity: 0; transform: translateY(12px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.video-modal__iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
}
.video-modal__close {
position: absolute;
top: 12px;
right: 12px;
width: 44px;
height: 44px;
border: 1px solid rgba(255,255,255,0.25);
background: rgba(20, 24, 22, 0.78);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #ffffff;
transition: background 150ms, transform 150ms, border-color 150ms;
z-index: 5;
box-shadow: 0 4px 18px rgba(0,0,0,0.35);
}
.video-modal__close:hover {
background: rgba(168, 128, 58, 0.95);
border-color: rgba(255,255,255,0.45);
transform: scale(1.08);
}
.video-modal__close:focus-visible {
outline: 2px solid var(--brass-soft);
outline-offset: 2px;
}
.video-modal__close svg { width: 20px; height: 20px; }
.video-modal__hint {
position: absolute;
bottom: 12px;
left: 12px;
z-index: 5;
padding: 8px 14px;
border-radius: 999px;
background: rgba(20, 24, 22, 0.65);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
font-family: var(--font-sans);
font-size: 12px;
color: rgba(255,255,255,0.85);
letter-spacing: 0.02em;
pointer-events: none;
opacity: 0;
transform: translateY(4px);
transition: opacity 200ms, transform 200ms;
}
.video-modal.is-open .video-modal__hint { opacity: 1; transform: translateY(0); }
.video-modal.is-open .video-modal__hint { animation: vmHintFade 4s ease-out forwards; }
@keyframes vmHintFade {
0% { opacity: 0; transform: translateY(4px); }
10% { opacity: 1; transform: translateY(0); }
80% { opacity: 1; }
100% { opacity: 0; }
}
@media (max-width: 768px) {
.video-modal { padding: 12px; }
.video-modal__close { width: 40px; height: 40px; top: 10px; right: 10px; }
.video-modal__hint { font-size: 11px; padding: 6px 12px; bottom: 10px; left: 10px; }
}
/* ——— MODEL MODAL ——— */
.model-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
}
.model-modal.is-open { display: flex; }
.model-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(10, 18, 13, 0.65);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.model-modal__dialog {
position: relative;
background: var(--ivory);
width: 100%;
max-width: 1080px;
max-height: calc(100vh - 48px);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 24px 80px rgba(10, 18, 13, 0.4);
display: flex;
flex-direction: column;
animation: mmFadeIn 0.25s ease-out;
}
@keyframes mmFadeIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.model-modal__close {
position: absolute;
top: 16px;
right: 16px;
z-index: 5;
width: 36px; height: 36px;
border: none;
background: rgba(255,255,255,0.9);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
color: var(--grace-ink);
transition: background var(--dur-default), transform var(--dur-default);
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.model-modal__close:hover { background: var(--white); transform: scale(1.06); }
.model-modal__close svg { width: 18px; height: 18px; }
.mm-grid {
display: grid;
grid-template-columns: 45% 55%;
flex: 1;
min-height: 0;
}
.mm-media {
background: var(--ivory-soft);
padding: 56px 40px 32px;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 8px;
overflow: hidden;
}
.mm-image {
width: 100%;
aspect-ratio: 4/3;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.mm-image-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.35);
border: 1px solid rgba(18,20,18,0.06);
border-radius: 50%;
cursor: pointer;
color: rgba(18,20,18,0.55);
padding: 0;
opacity: 0;
transition: opacity .2s ease, background .15s ease, color .15s ease;
z-index: 2;
backdrop-filter: blur(3px);
}
.mm-image:hover .mm-image-nav,
.mm-image-nav:focus-visible { opacity: 0.7; }
.mm-image-nav:hover:not(:disabled) {
opacity: 1;
background: rgba(255,255,255,0.7);
color: var(--grace-ink);
}
.mm-image-nav:disabled { opacity: 0; pointer-events: none; }
.mm-image-nav svg { width: 16px; height: 16px; }
.mm-image-nav--prev { left: 10px; }
.mm-image-nav--next { right: 10px; }
@media (hover: none) {
.mm-image-nav { opacity: 0.35; }
.mm-image-nav:active { opacity: 1; background: rgba(255,255,255,0.85); }
}
.mm-image img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
display: block;
transition: opacity .15s ease;
}
.mm-thumbs {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 0;
justify-content: flex-start;
}
.mm-thumbs:empty { display: none; }
.mm-thumbs::-webkit-scrollbar { height: 5px; }
.mm-thumbs::-webkit-scrollbar-thumb { background: var(--grace-ink-25); border-radius: 3px; }
.mm-thumb {
flex: 0 0 64px;
width: 64px;
height: 64px;
padding: 4px;
background: #fff;
border: 1px solid var(--grace-ink-10);
border-radius: 8px;
cursor: pointer;
overflow: hidden;
transition: border-color .15s ease, transform .15s ease;
}
.mm-thumb img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
mix-blend-mode: multiply;
}
.mm-thumb:hover { border-color: var(--brass-soft); transform: translateY(-1px); }
.mm-thumb.is-active { border-color: var(--brass); border-width: 2px; padding: 3px; }
.mm-color-row {
display: flex;
align-items: baseline;
gap: 6px;
font-family: var(--font-sans);
font-size: 13px;
line-height: 1.3;
color: var(--text-secondary);
}
.mm-color-label { color: var(--text-tertiary); }
.mm-color-name {
color: var(--grace-ink);
font-weight: 500;
}
.mm-color-row:has(.mm-color-name:empty) { display: none; }
.mm-swatches {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: flex-start;
}
.mm-swatch {
width: 32px; height: 32px;
border-radius: 50%;
border: 1px solid var(--border-default);
background: var(--c, #1a1a1a);
cursor: pointer;
position: relative;
transition: transform var(--dur-default), border-color var(--dur-default);
flex-shrink: 0;
}
.mm-swatch:hover { transform: scale(1.08); }
.mm-swatch.is-active {
border-color: var(--brass);
box-shadow: 0 0 0 2px rgba(168,128,58,0.25);
}
.mm-content {
padding: 48px 44px 44px;
display: flex;
flex-direction: column;
gap: 24px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.mm-head { display: flex; flex-direction: column; gap: 8px; }
.mm-badge {
display: inline-block;
width: fit-content;
padding: 4px 10px;
border-radius: 4px;
font-family: var(--font-sans);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 600;
color: var(--brass-deep);
background: var(--brass-wash);
}
.mm-title {
font-family: var(--font-display);
font-size: 36px;
font-weight: 400;
line-height: 1.1;
margin: 0;
color: var(--grace-ink);
letter-spacing: var(--tracking-tight);
}
.mm-desc {
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.55;
color: var(--text-secondary);
margin: 0;
}
.mm-price {
font-family: var(--font-display);
font-size: 36px;
font-weight: 500;
line-height: 1.1;
color: var(--brass);
letter-spacing: var(--tracking-tight);
font-variant-numeric: tabular-nums;
}
.mm-price:empty { display: none; }
.mm-price-row {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 12px;
}
.mm-price-old {
font-family: var(--font-sans);
font-size: 17px;
font-weight: 500;
color: var(--grace-ink-40);
text-decoration: line-through;
text-decoration-thickness: 1px;
text-decoration-color: var(--grace-ink-40);
font-variant-numeric: tabular-nums;
letter-spacing: 0;
white-space: nowrap;
}
.mm-price-old[hidden] { display: none; }
.mm-price-discount {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
color: var(--brass-deep);
background: var(--brass-wash);
padding: 4px 10px;
border-radius: 999px;
letter-spacing: 0.04em;
text-transform: uppercase;
align-self: center;
font-variant-numeric: tabular-nums;
border: 1px solid rgba(168, 128, 58, 0.18);
}
.mm-price-discount[hidden] { display: none; }
/* Компактный выбор комплекта рядом с ценой */
.mm-bundle-pills {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 14px;
margin-bottom: 4px;
}
[data-bundle-block][hidden] { display: none !important; }
.mm-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border: 1px solid var(--grace-ink-10);
border-radius: 999px;
background: #fff;
cursor: pointer;
font-family: var(--font-sans);
font-size: 13px;
color: var(--text-secondary);
transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.mm-pill:hover { border-color: var(--brass-soft); }
.mm-pill.is-active {
border-color: var(--brass);
background: var(--ivory-soft);
color: var(--grace-ink);
}
.mm-pill__icon {
font-size: 14px;
line-height: 1;
}
.mm-pill__text { font-weight: 500; }
.mm-pill__price {
margin-left: 4px;
color: var(--brass);
font-weight: 500;
font-variant-numeric: tabular-nums;
}
.mm-pill.is-active .mm-pill__price { color: var(--brass); }
.mm-specs {
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
padding: 14px 16px;
background: var(--ivory-soft);
border-radius: 8px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-secondary);
}
.mm-specs:empty { display: none; }
.mm-specs span { white-space: nowrap; }
.mm-specs span + span::before {
content: '·';
margin-right: 16px;
color: var(--text-tertiary);
}
.mm-spec--tip {
position: relative;
cursor: help;
border-bottom: 1px dotted var(--grace-ink-25);
padding-bottom: 1px;
transition: color var(--dur-default), border-color var(--dur-default);
}
.mm-spec--tip:hover { color: var(--grace-ink); border-bottom-color: var(--brass); }
.mm-spec--tip::after {
content: attr(data-spec-tip);
position: absolute;
left: 50%;
bottom: calc(100% + 10px);
transform: translateX(-50%) translateY(4px);
width: 240px;
max-width: 80vw;
white-space: pre-line;
padding: 10px 12px;
background: var(--grace-ink);
color: var(--ivory);
border-radius: 8px;
font-family: var(--font-sans);
font-size: 12px;
font-weight: 400;
line-height: 1.45;
letter-spacing: 0.01em;
text-align: left;
opacity: 0;
pointer-events: none;
transition: opacity 180ms var(--ease-out, ease-out), transform 180ms var(--ease-out, ease-out);
z-index: 4;
box-shadow: 0 8px 24px rgba(18,20,18,0.18);
}
.mm-spec--tip::before {
content: '';
position: absolute;
left: 50%;
bottom: calc(100% + 4px);
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: var(--grace-ink);
opacity: 0;
transition: opacity 180ms var(--ease-out, ease-out);
z-index: 4;
}
.mm-spec--tip:hover::after,
.mm-spec--tip:focus-visible::after {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.mm-spec--tip:hover::before,
.mm-spec--tip:focus-visible::before { opacity: 1; }
.mm-fulldesc {
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.6;
color: var(--text-secondary);
margin: 0;
}
.mm-fulldesc:empty { display: none; }
.mm-section {
display: flex;
flex-direction: column;
gap: 12px;
}
.mm-section[hidden] { display: none; }
.mm-section__title {
font-family: var(--font-sans);
font-size: 12px;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
font-weight: 600;
color: var(--brass);
}
.mm-video-reviews__track { display:flex; flex-direction:row; gap:10px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; padding-bottom:6px; -webkit-overflow-scrolling:touch; }
.mm-video-reviews__track::-webkit-scrollbar { height:6px; }
.mm-video-reviews__track::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.18); border-radius:3px; }
.mm-video-tile { position:relative; flex:0 0 auto; width:130px; aspect-ratio:9/16; border:none; padding:0; margin:0; border-radius:8px; overflow:hidden; cursor:pointer; background:#0a0a0a; scroll-snap-align:start; }
.mm-video-tile video { width:100%; height:100%; object-fit:cover; pointer-events:none; }
.mm-video-tile::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.45) 100%); pointer-events:none; transition:background 150ms ease; }
.mm-video-tile:hover::after { background:linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.55) 100%); }
.mm-video-tile__play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,0.92); color:#1A1A1A; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(0,0,0,0.3); transition:transform 150ms ease, background 150ms ease; }
.mm-video-tile:hover .mm-video-tile__play { transform:translate(-50%,-50%) scale(1.08); background:#FFFFFF; }
.mm-video-reviews__more { align-self:flex-start; margin-top:4px; padding:8px 16px; border:1px solid rgba(0,0,0,0.18); background:transparent; border-radius:999px; font-family:var(--font-sans); font-size:13px; font-weight:500; color:var(--ink); cursor:pointer; transition:border-color 150ms ease, color 150ms ease; }
.mm-video-reviews__more:hover { border-color:var(--brass); color:var(--brass); }
@media (max-width: 520px) {
.mm-video-tile { width:108px; }
}
/* Подробные видеообзоры (VK) — горизонтальная карусель */
.mm-section__sub { font-family:var(--font-sans); font-size:13px; color:var(--text-secondary); margin-top:-4px; margin-bottom:12px; letter-spacing:var(--tracking-body); }
.mm-vk-reviews__track { display:flex; flex-direction:row; gap:12px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; padding:2px 0 8px; }
.mm-vk-reviews__track::-webkit-scrollbar { height:6px; }
.mm-vk-reviews__track::-webkit-scrollbar-track { background:transparent; }
.mm-vk-reviews__track::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.18); border-radius:3px; }
.mm-vk-reviews__track::-webkit-scrollbar-thumb:hover { background:rgba(0,0,0,0.32); }
.mm-vk-tile { flex:0 0 auto; width:240px; display:flex; flex-direction:column; gap:6px; padding:0; border:none; background:transparent; cursor:pointer; text-align:left; font:inherit; color:inherit; scroll-snap-align:start; }
.mm-vk-tile__poster { position:relative; aspect-ratio:16/9; border-radius:10px; overflow:hidden; background:linear-gradient(135deg, var(--ivory-soft) 0%, var(--brass-wash) 100%); border:1px solid var(--border-hair); transition:transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; padding:10px 14px; box-sizing:border-box; }
.mm-vk-tile:hover .mm-vk-tile__poster { transform:translateY(-2px); box-shadow:0 8px 22px rgba(124,92,34,0.18); border-color:var(--brass-soft); }
.mm-vk-tile__img { display:block; width:100%; height:100%; object-fit:contain; transition:transform 240ms ease; }
.mm-vk-tile:hover .mm-vk-tile__img { transform:scale(1.04); }
.mm-vk-tile__poster::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 100%, rgba(124,92,34,0.10) 0%, transparent 55%); pointer-events:none; z-index:1; }
.mm-vk-tile__play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:48px; height:48px; border-radius:50%; background:var(--brass); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(124,92,34,0.42); transition:transform 200ms ease, background 200ms ease; z-index:2; }
.mm-vk-tile__play svg { margin-left:3px; width:20px; height:20px; }
.mm-vk-tile:hover .mm-vk-tile__play { transform:translate(-50%,-50%) scale(1.08); background:var(--brass-deep); }
.mm-vk-tile__caption { font-family:var(--font-sans); font-size:13px; font-weight:500; color:var(--text-primary); padding:0 2px; letter-spacing:var(--tracking-body); transition:color 180ms ease; }
.mm-vk-tile:hover .mm-vk-tile__caption { color:var(--brass-deep); }
@media (max-width: 520px) {
.mm-vk-tile { width:200px; }
.mm-vk-tile__play { width:40px; height:40px; }
.mm-vk-tile__play svg { width:18px; height:18px; }
}
.mm-section__table {
display: grid;
grid-template-columns: minmax(140px, max-content) 1fr;
row-gap: 8px;
column-gap: 20px;
margin: 0;
font-family: var(--font-sans);
font-size: 13px;
line-height: 1.45;
border-top: 1px solid var(--border-hair);
padding-top: 12px;
}
.mm-section__table dt {
color: var(--text-secondary);
margin: 0;
padding: 4px 0;
border-bottom: 1px dashed var(--border-hair);
}
.mm-section__table dd {
color: var(--grace-ink);
margin: 0;
padding: 4px 0;
border-bottom: 1px dashed var(--border-hair);
}
.mm-section__table dt:last-of-type,
.mm-section__table dd:last-of-type {
border-bottom: none;
}
.mm-section__table-group {
grid-column: 1 / -1;
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--brass-deep);
padding: 14px 0 6px;
border-bottom: 1px solid var(--brass-wash);
margin-bottom: 4px;
}
.mm-section__table-group:first-child { padding-top: 0; }
/* «В комплекте» — карточки с иконками */
.mm-included {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.mm-included__card {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 14px;
background: var(--ivory-soft);
border: 1px solid var(--grace-ink-06);
border-radius: 10px;
transition: border-color var(--dur-default), background var(--dur-default);
}
.mm-included__card:hover {
border-color: var(--brass-soft);
background: #fff;
}
.mm-included__icon {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--brass-wash);
color: var(--brass-deep);
flex-shrink: 0;
}
.mm-included__icon svg { width: 20px; height: 20px; }
.mm-included__body { min-width: 0; }
.mm-included__name {
font-family: var(--font-sans);
font-size: 13.5px;
font-weight: 500;
color: var(--grace-ink);
line-height: 1.3;
}
.mm-included__sub {
font-family: var(--font-sans);
font-size: 12px;
color: var(--text-secondary);
margin-top: 2px;
line-height: 1.35;
}
.mm-section__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.mm-section__list li {
display: flex;
align-items: flex-start;
gap: 10px;
font-family: var(--font-sans);
font-size: 13px;
line-height: 1.5;
color: var(--text-primary);
padding-left: 0;
}
.mm-section__list li::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--brass);
flex-shrink: 0;
margin-top: 8px;
}
.mm-section__list--check li::before {
content: "✓";
width: auto;
height: auto;
background: transparent;
color: var(--brass);
font-weight: 600;
font-size: 14px;
margin-top: 0;
line-height: 1.5;
}
.mm-bundle {
display: flex;
flex-direction: column;
gap: 8px;
}
.mm-bundle__label {
font-family: var(--font-sans);
font-size: 12px;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 4px;
}
.mm-bundle__option {
display: block;
cursor: pointer;
border: 1px solid var(--border-hair);
border-radius: 8px;
padding: 12px 14px;
transition: border-color var(--dur-default), background var(--dur-default);
position: relative;
}
.mm-bundle__option:hover { border-color: var(--brass-soft); }
.mm-bundle__option input {
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 1px;
margin: 0;
padding: 0;
opacity: 0;
pointer-events: none;
border: 0;
clip: rect(0,0,0,0);
overflow: hidden;
}
.mm-bundle__option:has(input:checked) {
border-color: var(--brass);
background: var(--brass-wash);
}
.mm-bundle__row { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.mm-bundle__main { flex: 1; min-width: 0; }
.mm-bundle__name {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
color: var(--grace-ink);
margin-bottom: 2px;
}
.mm-bundle__sub {
font-family: var(--font-sans);
font-size: 12px;
color: var(--text-secondary);
}
.mm-bundle__price {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
white-space: nowrap;
}
.mm-bundle__gift {
color: var(--brass-deep);
font-weight: 600;
font-size: 15px;
font-variant-numeric: tabular-nums;
}
.mm-bundle__price-old {
font-size: 12px;
font-weight: 400;
color: var(--text-tertiary);
text-decoration: line-through;
font-variant-numeric: tabular-nums;
letter-spacing: 0.01em;
}
.mm-bundle__price-current {
font-family: var(--font-sans);
font-size: 15px;
font-weight: 600;
color: var(--grace-ink);
font-variant-numeric: tabular-nums;
}
/* Радио комплектации в 2 колонки */
.mm-bundle--grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
align-items: stretch;
}
.mm-bundle--grid .mm-bundle__label { grid-column: 1 / -1; margin-bottom: 0; }
.mm-bundle--grid .mm-bundle__option { display: flex; align-items: center; padding: 10px 14px; }
.mm-bundle--grid .mm-bundle__row {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
width: 100%;
}
.mm-bundle--grid .mm-bundle__main { flex: 0 0 auto; min-width: 0; }
.mm-bundle--grid .mm-bundle__price { flex: 0 0 auto; align-self: flex-start; }
.mm-bundle--grid .mm-bundle__main { flex: 1 1 auto; }
.mm-bundle--grid .mm-bundle__name {
font-size: 13.5px;
font-weight: 500;
line-height: 1.35;
color: var(--grace-ink);
margin-bottom: 0;
}
.mm-bundle--grid .mm-bundle__price {
display: inline-flex;
align-items: baseline;
gap: 8px;
text-align: left;
}
.mm-bundle__badge {
position: absolute;
top: -9px; left: 12px;
background: var(--grace-ink);
color: var(--cream, #f4eee3);
padding: 3px 10px;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
border-radius: 999px;
white-space: nowrap;
z-index: 1;
}
/* Видимый радио-индикатор слева в bundle-карточке */
.mm-bundle__radio {
position: absolute;
top: 50%;
left: 14px;
transform: translateY(-50%);
width: 18px;
height: 18px;
border: 2px solid var(--grace-ink-25);
border-radius: 50%;
background: var(--white, #fff);
flex-shrink: 0;
transition: border-color var(--dur-default), background var(--dur-default);
}
.mm-bundle__option:has(input:checked) .mm-bundle__radio {
border-color: var(--brass);
}
.mm-bundle__option:has(input:checked) .mm-bundle__radio::after {
content: '';
position: absolute;
inset: 2px;
background: var(--brass);
border-radius: 50%;
}
.mm-bundle--in-buybox .mm-bundle__option { padding-left: 14px; }
/* Тег рядом с названием комплекта: «Выгодно» / «Популярный выбор» */
.mm-bundle__head {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 4px;
}
.mm-bundle__head .mm-bundle__name { margin: 0; }
.mm-bundle__tag {
display: inline-flex;
align-items: center;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
padding: 3px 8px;
border-radius: 4px;
letter-spacing: 0.02em;
white-space: nowrap;
flex-shrink: 0;
}
.mm-bundle__tag--save { background: var(--brass-wash); color: var(--brass-deep); }
.mm-bundle__tag--popular { background: #E5EFE3; color: #3F5D44; }
/* Лейбл-заголовок «Выберите комплект» */
.mm-buybox .mm-bundle__label {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 600;
color: var(--grace-ink);
letter-spacing: 0;
text-transform: none;
margin: 0 0 0;
padding: 0;
}
/* Сравнение под title */
.mm-compare-chips {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 8px;
margin: -4px 0 0;
padding-bottom: 4px;
}
.mm-compare-chips__label {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-tertiary);
margin-right: 2px;
}
.mm-compare-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
background: var(--white, #fff);
border: 1px solid var(--grace-ink-10);
border-radius: 999px;
font-family: var(--font-sans);
font-size: 12px;
color: var(--grace-ink);
text-decoration: none;
transition: border-color var(--dur-default), background var(--dur-default), transform var(--dur-default);
font-variant-numeric: tabular-nums;
}
.mm-compare-chip:hover {
border-color: var(--brass-soft);
background: var(--ivory-soft);
transform: translateY(-1px);
}
.mm-compare-chip__model { font-weight: 500; }
.mm-compare-chip__diff {
font-size: 12px;
font-weight: 500;
padding: 1px 6px;
border-radius: 4px;
letter-spacing: 0.01em;
}
.mm-compare-chip__diff--save { background: #E5EFE3; color: #3F5D44; }
.mm-compare-chip__diff--more { background: var(--brass-wash); color: var(--brass-deep); }
.mm-compare-chip--all {
border-style: dashed;
color: var(--text-secondary);
font-size: 12px;
letter-spacing: 0.01em;
}
@media (max-width: 480px) {
.mm-bundle--grid { grid-template-columns: 1fr; }
}
/* Визуализация комплектации: иконки/фото в строку с «+» между ними */
.mm-bundle--visual .mm-bundle__option {
padding: 14px 14px 12px;
flex-direction: column;
align-items: stretch;
}
.mm-bundle__visual {
display: flex;
align-items: flex-end;
justify-content: center;
gap: 4px;
padding: 4px 0 10px;
border-bottom: 1px dashed var(--grace-ink-06);
margin-bottom: 10px;
}
.mm-bundle__visual-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
flex: 0 0 auto;
min-width: 0;
}
.mm-bundle__visual-img {
width: 48px;
height: 48px;
object-fit: contain;
display: block;
}
.mm-bundle__visual-icon {
width: 48px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--brass-wash);
color: var(--brass-deep);
}
.mm-bundle__visual-icon svg { width: 26px; height: 26px; }
.mm-bundle__visual-name {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--text-secondary);
text-align: center;
white-space: nowrap;
}
.mm-bundle__visual-plus {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 400;
color: var(--text-tertiary);
align-self: center;
margin: 0 2px 12px;
line-height: 1;
}
.mm-bundle--visual .mm-bundle__option:has(input:checked) .mm-bundle__visual-icon {
background: var(--brass-soft);
color: #fff;
}
.mm-info {
display: flex;
flex-direction: column;
gap: 12px;
padding: 14px 16px;
background: var(--ivory-soft);
border-radius: 8px;
}
.mm-info__item {
display: flex;
gap: 12px;
align-items: flex-start;
}
.mm-info__item svg {
width: 22px; height: 22px;
color: var(--brass);
flex-shrink: 0;
margin-top: 1px;
}
.mm-info__title {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
color: var(--grace-ink);
margin-bottom: 2px;
}
.mm-info__sub {
font-family: var(--font-sans);
font-size: 12px;
line-height: 1.4;
color: var(--text-secondary);
}
/* ─── PDP TOC: якорная навигация по секциям ─────────────────────── */
.pdp-toc {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 40;
background: rgba(244, 238, 227, 0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--grace-ink-06);
margin: 0;
padding: 0 24px;
opacity: 0;
transform: translateY(-6px);
pointer-events: none;
transition: opacity 200ms var(--ease-out, ease-out), transform 200ms var(--ease-out, ease-out), top 220ms var(--ease-out, ease-out);
}
/* Когда зелёный навбар пинуется сверху — TOC сдвигается вниз на его высоту */
body.nav-pinned .pdp-toc { top: 60px; }
.pdp-toc.is-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.pdp-toc__inner {
max-width: 1080px;
margin: 0 auto;
display: flex;
gap: 4px;
overflow-x: auto;
scrollbar-width: none;
padding: 8px 0;
-webkit-overflow-scrolling: touch;
}
.pdp-toc__inner::-webkit-scrollbar { display: none; }
.pdp-toc__link {
flex: 0 0 auto;
padding: 8px 14px;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
text-decoration: none;
border-radius: 999px;
letter-spacing: 0.01em;
white-space: nowrap;
transition: color var(--dur-default), background var(--dur-default);
}
.pdp-toc__link:hover { color: var(--grace-ink); background: var(--grace-ink-06); }
.pdp-toc__link.is-active {
color: var(--grace-ink);
background: rgba(255,255,255,0.85);
box-shadow: inset 0 0 0 1px var(--grace-ink-10);
}
@media (max-width: 720px) {
.pdp-toc { margin: 0 -12px 12px; padding: 0 12px; }
.pdp-toc__link { font-size: 12px; padding: 7px 12px; }
}
/* offset якоря, чтобы заголовок секции не уходил под navbar+toc при скролле по якорю */
body[data-product-page] .mm-section,
body[data-product-page] #mmReviewsBlock,
body[data-product-page] #mmVkReviews,
body[data-product-page] #mmVideoReviews {
scroll-margin-top: 120px;
}
/* ─── «Почему выбирают» — якорь ценности сразу после hero ───────────────── */
.mm-why {
margin: 28px 0 8px;
padding: 36px 40px;
background: var(--ivory-soft, #fbf8f1);
border: 1px solid var(--grace-ink-06);
border-radius: 18px;
}
.mm-why__title {
font-family: var(--font-sans);
font-size: 26px;
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.2;
color: var(--grace-ink);
margin: 0 0 28px;
}
.mm-why__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 56px;
row-gap: 28px;
}
.mm-why__item {
display: flex;
align-items: flex-start;
gap: 16px;
font-family: var(--font-sans);
}
.mm-why__icon {
flex: 0 0 44px;
width: 44px;
height: 44px;
margin-top: 2px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--grace-ink-06);
color: var(--grace-ink);
}
.mm-why__icon svg {
width: 22px;
height: 22px;
}
.mm-why__body {
min-width: 0;
flex: 1 1 auto;
}
.mm-why__name {
font-size: 17px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--grace-ink);
line-height: 1.3;
margin: 0 0 6px;
}
.mm-why__desc {
font-size: 14.5px;
line-height: 1.55;
color: var(--text-secondary);
}
@media (max-width: 768px) {
.mm-why { padding: 22px 20px; margin: 18px 0 8px; }
.mm-why__title { font-size: 22px; margin-bottom: 20px; }
.mm-why__list { grid-template-columns: 1fr; row-gap: 22px; column-gap: 0; }
.mm-why__name { font-size: 16px; }
.mm-why__desc { font-size: 14px; }
.mm-why__icon { flex-basis: 38px; width: 38px; height: 38px; }
.mm-why__icon svg { width: 19px; height: 19px; }
}
/* ─── Конверсионный bridge-блок между отзывами и сравнением ─────────────── */
.mm-midcta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 24px;
margin: 32px 0;
padding: 28px 32px;
background: var(--ivory, #f6f1e8);
border: 1px solid var(--grace-ink-06);
border-radius: 16px;
box-shadow: 0 6px 22px rgba(10, 18, 13, 0.06);
}
.mm-midcta__copy { flex: 1 1 280px; min-width: 0; }
.mm-midcta__title {
font-family: var(--font-sans);
font-size: 22px;
font-weight: 600;
letter-spacing: -0.015em;
color: var(--grace-ink);
line-height: 1.2;
margin: 0 0 6px;
}
.mm-midcta__sub {
font-family: var(--font-sans);
font-size: 14px;
color: var(--text-secondary);
line-height: 1.4;
}
.mm-midcta__actions {
display: flex;
gap: 10px;
flex: 0 0 auto;
}
.mm-midcta__buy {
height: 50px;
padding: 0 22px;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.01em;
white-space: nowrap;
}
.mm-midcta__buy svg { width: 18px; height: 18px; flex-shrink: 0; }
.mm-midcta__consult {
height: 50px;
padding: 0 18px;
font-size: 14px;
background: transparent;
border: 1.5px solid var(--grace-ink);
color: var(--grace-ink);
white-space: nowrap;
}
.mm-midcta__consult:hover {
background: var(--grace-ink);
color: var(--ivory);
}
.mm-midcta__tg {
height: 50px;
padding: 0 18px;
font-size: 14px;
font-weight: 500;
background: transparent;
border: 1.5px solid var(--grace-ink);
color: var(--grace-ink);
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
}
.mm-midcta__tg svg { width: 18px; height: 18px; flex-shrink: 0; color: #229ED9; }
.mm-midcta__tg:hover { background: var(--grace-ink); color: var(--ivory); }
.mm-midcta__tg:hover svg { color: #fff; }
.mm-midcta__note {
flex: 1 0 100%;
margin-top: 12px;
font-family: var(--font-sans);
font-size: 13px;
color: var(--text-secondary);
line-height: 1.4;
}
@media (max-width: 768px) {
.mm-midcta { padding: 20px; gap: 16px; flex-direction: column; align-items: stretch; }
.mm-midcta__title { font-size: 19px; }
.mm-midcta__actions { flex-direction: column; }
.mm-midcta__buy, .mm-midcta__consult, .mm-midcta__tg { width: 100%; justify-content: center; }
.mm-midcta__note { margin-top: 4px; text-align: center; }
}
/* ─── Кнопка «Послушать» поверх hero ────────────────────────────── */
.mm-image-play {
position: absolute;
right: 16px;
bottom: 16px;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 9px 16px 9px 9px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.65);
background: rgba(255,255,255,0.78);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 6px 18px rgba(18,20,18,0.10), 0 1px 2px rgba(18,20,18,0.06);
color: var(--grace-ink);
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.01em;
cursor: pointer;
transition: background var(--dur-default), box-shadow var(--dur-default), transform var(--dur-default);
z-index: 3;
}
.mm-image-play:hover {
background: rgba(255,255,255,0.95);
box-shadow: 0 10px 24px rgba(18,20,18,0.14), 0 2px 4px rgba(18,20,18,0.08);
}
.mm-image-play:active { transform: scale(0.97); }
/* Пульсация при загрузке — обращаем внимание на интерактив со звуком */
@keyframes mm-image-play-pulse {
0% { box-shadow: 0 6px 18px rgba(18,20,18,0.10), 0 0 0 0 rgba(168,128,58,0.55); }
60% { box-shadow: 0 6px 18px rgba(18,20,18,0.10), 0 0 0 14px rgba(168,128,58,0); }
100% { box-shadow: 0 6px 18px rgba(18,20,18,0.10), 0 0 0 0 rgba(168,128,58,0); }
}
.mm-image-play:not(.is-playing):not(.is-seen) {
animation: mm-image-play-pulse 2.2s ease-out 1.2s 3;
}
.mm-image-play__icon {
width: 30px; height: 30px;
border-radius: 50%;
background: var(--grace-ink);
color: var(--ivory);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.mm-image-play__svg { width: 13px; height: 13px; }
.mm-image-play__svg--pause { display: none; }
.mm-image-play.is-playing .mm-image-play__svg--play { display: none; }
.mm-image-play.is-playing .mm-image-play__svg--pause { display: block; }
.mm-image-play.is-playing .mm-image-play__icon { background: var(--brass); }
.mm-image-play__bar {
display: none;
width: 60px;
height: 3px;
background: rgba(18,20,18,0.12);
border-radius: 999px;
overflow: hidden;
}
.mm-image-play.is-playing .mm-image-play__bar { display: inline-block; }
.mm-image-play.is-playing .mm-image-play__label { display: none; }
.mm-image-play__fill {
display: block;
height: 100%;
width: 0;
background: var(--brass);
transition: width 120ms linear;
}
@media (max-width: 720px) {
.mm-image-play {
right: 10px; bottom: 10px;
padding: 7px 12px 7px 7px;
font-size: 12px;
}
.mm-image-play__icon { width: 26px; height: 26px; }
}
/* ─── Карточка товара: hero во всю ширину блока + одна строка миниатюр ─── */
body[data-product-page] .product-page__dialog { overflow: visible; }
body[data-product-page] .mm-grid { align-items: start; }
@media (min-width: 1025px) {
body[data-product-page] .mm-media {
position: sticky;
top: 80px;
align-self: start;
max-height: calc(100vh - 96px);
}
body[data-product-page].media-unstuck .mm-media {
position: static;
max-height: none;
}
}
/* Спек-полоса под фото на странице товара — 4 карточки value+label */
body[data-product-page] .mm-specs {
display: grid;
grid-template-columns: repeat(4, minmax(80px, 1fr));
gap: 8px;
padding: 4px 0 0;
background: transparent;
font-family: var(--font-sans);
border-radius: 0;
}
body[data-product-page] .mm-specs span {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 12px 8px;
min-height: 64px;
background: var(--ivory-soft);
border: 1px solid var(--grace-ink-06);
border-radius: 8px;
white-space: normal;
line-height: 1.2;
cursor: default;
}
body[data-product-page] .mm-specs span + span::before { display: none; }
body[data-product-page] .mm-spec__val {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 600;
color: var(--grace-ink);
font-style: normal;
letter-spacing: 0;
font-variant-numeric: tabular-nums;
}
body[data-product-page] .mm-spec__lbl {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-tertiary);
font-style: normal;
margin-top: 4px;
}
body[data-product-page] .mm-spec--tip { border-bottom: none; padding-bottom: 10px; }
body[data-product-page] .mm-spec--tip:hover { background: var(--white, #fff); border-color: var(--brass-soft); color: var(--grace-ink); }
body[data-product-page] .mm-spec--tip::after { bottom: calc(100% + 6px); }
body[data-product-page] .mm-spec--tip::before { bottom: calc(100% + 0px); }
/* Compact-режим для 1366×768 — самый частый ноут.
Уменьшаем заголовок, отступы, размеры — чтобы первый экран помещал buybox целиком. */
@media (min-width: 1025px) and (max-width: 1440px) and (max-height: 820px) {
body[data-product-page] .mm-title { font-size: 36px; }
body[data-product-page] .mm-content { gap: 18px; }
body[data-product-page] .mm-specs { padding: 10px 4px; margin-bottom: 0; }
body[data-product-page] .mm-specs span { font-size: 12px; }
body[data-product-page] .mm-bundle__option { padding: 10px 12px; }
body[data-product-page] .mm-bundle__name { font-size: 13.5px; }
body[data-product-page] .mm-bundle__sub { font-size: 11.5px; }
body[data-product-page] .mm-buybox { padding: 14px 18px 16px; gap: 10px; }
body[data-product-page] .mm-buybox .mm-price { font-size: 30px; }
body[data-product-page] .mm-cta-buy,
body[data-product-page] .mm-cta-consult { height: 46px; font-size: 14px; }
body[data-product-page] .mm-stock { font-size: 12px; padding: 4px 10px; }
body[data-product-page] .mm-thumb { padding: 6px; }
}
body[data-product-page] .mm-media {
padding: 0 0 22px;
gap: 14px;
}
body[data-product-page] .mm-content {
padding-top: 0;
}
body[data-product-page] .mm-head { padding-top: 4px; }
body[data-product-page] .mm-title {
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 40px;
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1.08;
}
.mm-tagline {
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.4;
color: var(--grace-ink);
margin: 6px 0 0;
letter-spacing: 0.01em;
max-width: 540px;
font-weight: 400;
}
.mm-tagline-specs {
font-family: var(--font-sans);
font-size: 13px;
color: var(--text-secondary);
margin: 4px 0 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
letter-spacing: 0.01em;
}
.mm-tagline-specs__sep { color: var(--text-tertiary); }
.mm-tagline-quote {
font-family: var(--font-display);
font-size: 14px;
font-style: italic;
color: var(--brass-deep);
margin: 6px 0 0;
line-height: 1.4;
letter-spacing: 0.01em;
}
body[data-product-page] .mm-color-row {
align-items: center;
flex-wrap: wrap;
gap: 8px 12px;
}
body[data-product-page] .mm-color-row .mm-color-name { display: none; }
body[data-product-page] .mm-color-row .mm-swatches {
margin-left: 4px;
gap: 8px;
}
/* Pill-цветовые свотчи на странице товара */
body[data-product-page] .mm-swatch {
width: auto !important;
height: auto !important;
background: var(--white, #fff) !important;
border: 1.5px solid var(--grace-ink-10);
border-radius: 999px;
padding: 5px 12px 5px 5px;
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
transition: border-color var(--dur-default), box-shadow var(--dur-default);
box-shadow: none !important;
}
body[data-product-page] .mm-swatch:hover { border-color: var(--brass-soft); transform: none; }
body[data-product-page] .mm-swatch.is-active {
border-color: var(--grace-ink);
box-shadow: inset 0 0 0 1px var(--grace-ink) !important;
}
body[data-product-page] .mm-swatch__dot {
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--c, #1a1a1a);
border: 1px solid rgba(0,0,0,0.08);
flex-shrink: 0;
}
body[data-product-page] .mm-swatch__name {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
color: var(--grace-ink);
letter-spacing: 0.01em;
}
body[data-product-page] .mm-image {
aspect-ratio: auto;
width: 100%;
display: block;
overflow: hidden;
}
body[data-product-page] .mm-image img {
width: 100%;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
body[data-product-page] .mm-thumbs {
flex-wrap: nowrap;
overflow: hidden;
gap: 8px;
padding: 0;
}
body[data-product-page] .mm-thumbs.is-expanded { flex-wrap: wrap; overflow: visible; }
body[data-product-page] .mm-thumb { flex: 1 1 0; min-width: 0; height: auto; aspect-ratio: 1/1; width: auto; }
body[data-product-page] .mm-thumbs.is-expanded .mm-thumb { flex: 0 0 64px; width: 64px; height: 64px; }
.mm-thumb--more {
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 18px;
font-weight: 500;
color: var(--text-secondary);
background: var(--ivory-soft);
border: 1px dashed var(--grace-ink-25);
letter-spacing: 0.01em;
transition: color var(--dur-default), border-color var(--dur-default), background var(--dur-default);
}
.mm-thumb--more:hover {
color: var(--brass);
border-color: var(--brass);
background: var(--brass-wash);
}
/* ─── Buyzone: общий контейнер для buybox + trust ──────────────────── */
.mm-buyzone {
background: var(--ivory-soft);
border: 1px solid var(--grace-ink-06);
border-radius: 14px;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* ─── Buybox: цена + CTA + trust ──────────────────────────────────── */
.mm-buybox {
display: flex;
flex-direction: column;
gap: 18px;
padding: 22px 24px;
background: transparent;
border: none;
border-radius: 0;
}
.mm-buybox__header {
display: grid;
grid-template-columns: 1fr auto;
gap: 16px;
align-items: start;
}
.mm-buybox__price-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mm-buybox__header .mm-stock {
align-self: start;
margin: 4px 0 0;
padding: 4px 12px;
font-size: 12px;
letter-spacing: 0.04em;
display: inline-flex;
align-items: center;
gap: 8px;
border-radius: 999px;
white-space: nowrap;
}
.mm-buybox__header .mm-stock[data-schema="InStock"] {
background: rgba(42,111,61,0.10);
color: #2A6F3D;
}
.mm-buybox__header .mm-stock::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
display: inline-block;
}
.mm-buybox .mm-price-row { gap: 8px 10px; align-items: baseline; margin-bottom: 4px; flex-wrap: wrap; }
.mm-buybox .mm-price {
font-family: var(--font-sans);
font-size: 32px;
font-weight: 600;
line-height: 1;
letter-spacing: -0.02em;
color: var(--brass-deep);
white-space: nowrap;
font-variant-numeric: tabular-nums lining-nums;
}
.mm-buybox .mm-installment { font-size: 14px; }
.mm-buybox .mm-installment {
font-family: var(--font-sans);
font-size: 13px;
color: var(--text-secondary);
margin-top: -6px;
}
.mm-buybox .mm-installment strong { color: var(--grace-ink); font-weight: 600; }
.mm-cta-row {
display: flex;
gap: 10px;
margin-top: 4px;
}
.mm-cta-buy {
flex: 1 1 auto;
height: 52px;
padding: 0 24px;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.01em;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.mm-cta-buy #mmCtaPrice { font-weight: 600; }
.mm-cta-buy svg, .mm-cta-consult svg { width: 18px; height: 18px; flex-shrink: 0; }
/* Trust-маркеры под кнопкой «Купить» */
.mm-cta-trust {
list-style: none;
margin: 12px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.mm-cta-trust__item {
display: flex;
align-items: flex-start;
gap: 8px;
font-family: var(--font-sans);
font-size: 13px;
line-height: 1.4;
color: var(--text-secondary);
}
.mm-cta-trust__item svg {
flex: 0 0 14px;
width: 14px;
height: 14px;
margin-top: 3px;
color: var(--brass-deep);
}
@media (max-width: 768px) {
.mm-cta-trust { margin-top: 10px; }
.mm-cta-trust__item { font-size: 12.5px; }
}
.mm-cta-consult {
flex: 0 0 auto;
height: 52px;
padding: 0 22px;
font-size: 14px;
font-weight: 500;
background: transparent;
border: 1.5px solid var(--grace-ink);
color: var(--grace-ink);
}
.mm-cta-consult:hover { background: var(--grace-ink); color: var(--ivory); border-color: var(--grace-ink); opacity: 1; }
.mm-trust {
list-style: none;
margin: 6px 0 0;
padding: 14px 0 0;
border-top: 1px solid var(--grace-ink-06);
display: flex;
flex-wrap: wrap;
gap: 14px 22px;
}
.mm-trust__item {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-sans);
font-size: 13px;
color: var(--text-secondary);
letter-spacing: 0.01em;
}
.mm-trust__icon {
width: 18px; height: 18px;
color: var(--brass);
flex-shrink: 0;
}
/* mm-info внутри buybox: убираем двойной фон/паддинг, добавляем разделитель сверху */
.mm-info--in-buybox {
background: transparent;
padding: 14px 0 0;
border-top: 1px solid var(--grace-ink-06);
margin-top: 6px;
border-radius: 0;
gap: 14px;
}
/* Trust-row под buybox: 2 колонки с иконкой + описанием */
.mm-trust-row {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
gap: 16px 24px;
padding: 16px 24px 18px;
margin-top: 0;
border-top: 1px solid var(--grace-ink-06);
background: rgba(255,255,255,0.4);
}
.mm-trust-row__item {
display: flex;
gap: 12px;
align-items: flex-start;
font-family: var(--font-sans);
}
.mm-trust-row__item > svg {
width: 22px;
height: 22px;
color: var(--brass);
flex-shrink: 0;
margin-top: 1px;
}
.mm-trust-row__title {
font-size: 13.5px;
font-weight: 600;
color: var(--grace-ink);
margin-bottom: 2px;
}
.mm-trust-row__sub {
font-size: 12px;
line-height: 1.4;
color: var(--text-secondary);
}
.mm-trust-row .mm-delivery-loc {
margin-top: 8px;
padding: 7px 14px 7px 10px;
font-size: 13px;
font-weight: 500;
border-color: var(--grace-ink-25);
background: rgba(255, 255, 255, 0.6);
max-width: 100%;
white-space: nowrap;
}
.mm-trust-row .mm-delivery-loc [data-city-label] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.mm-trust-row .mm-delivery-loc svg { width: 15px; height: 15px; color: var(--brass); flex-shrink: 0; }
.mm-trust-row .mm-delivery-loc__edit { color: var(--brass); font-size: 12px; flex-shrink: 0; }
@media (max-width: 720px) {
.mm-trust-row { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 720px) {
.mm-buybox { padding: 16px 16px 18px; }
.mm-buybox .mm-price { font-size: 32px; }
.mm-cta-row { flex-direction: column; }
.mm-cta-buy, .mm-cta-consult { width: 100%; height: 48px; }
.mm-trust { gap: 10px 18px; }
.mm-trust__item { font-size: 12px; }
}
/* ─── Quick-FAQ под CTA ──────────────────────────────────────────── */
.mm-quickfaq {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--grace-ink-06);
display: flex;
flex-direction: column;
gap: 2px;
}
.mm-quickfaq__item {
border-radius: 8px;
transition: background var(--dur-default);
}
.mm-quickfaq__item[open] { background: rgba(255,255,255,0.55); }
.mm-quickfaq__q {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
cursor: pointer;
font-family: var(--font-sans);
font-size: 13.5px;
font-weight: 500;
color: var(--grace-ink);
list-style: none;
user-select: none;
}
.mm-quickfaq__q::-webkit-details-marker { display: none; }
.mm-quickfaq__q:hover { color: var(--brass-deep); }
.mm-quickfaq__chevron {
width: 16px; height: 16px;
color: var(--grace-ink-40);
transition: transform var(--dur-default), color var(--dur-default);
flex-shrink: 0;
}
.mm-quickfaq__item[open] .mm-quickfaq__chevron {
transform: rotate(180deg);
color: var(--brass);
}
.mm-quickfaq__a {
padding: 0 12px 12px;
font-family: var(--font-sans);
font-size: 13px;
line-height: 1.55;
color: var(--text-secondary);
}
.mm-delivery-loc {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 8px;
padding: 5px 10px 5px 8px;
border: 1px solid var(--grace-ink-10);
border-radius: 999px;
background: transparent;
font: inherit;
font-size: 12px;
color: var(--grace-ink);
cursor: pointer;
transition: border-color .15s ease, background .15s ease;
}
.mm-delivery-loc:hover {
border-color: var(--brass);
background: rgba(184, 134, 76, 0.06);
}
.mm-delivery-loc svg {
width: 13px;
height: 13px;
color: var(--brass);
flex-shrink: 0;
}
.mm-delivery-loc__edit {
color: var(--text-secondary);
font-size: 11.5px;
text-decoration: underline;
text-decoration-color: var(--grace-ink-10);
text-underline-offset: 2px;
}
.mm-delivery-loc:hover .mm-delivery-loc__edit {
color: var(--brass);
text-decoration-color: var(--brass);
}
/* Пикер города */
.city-picker {
position: fixed;
inset: 0;
z-index: 1100;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
font-family: var(--font-sans);
}
.city-picker[hidden] { display: none; }
.city-picker__backdrop {
position: absolute;
inset: 0;
background: rgba(18, 20, 18, 0.55);
backdrop-filter: blur(3px);
cursor: pointer;
}
.city-picker__card {
position: relative;
width: 100%;
max-width: 460px;
max-height: min(640px, 90vh);
display: flex;
flex-direction: column;
background: var(--ivory);
border-radius: 16px;
padding: 28px 28px 16px;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
}
.city-picker__close {
position: absolute;
top: 14px;
right: 14px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
border-radius: 50%;
color: var(--text-secondary);
cursor: pointer;
transition: background .15s ease, color .15s ease;
}
.city-picker__close:hover { background: var(--grace-ink-06); color: var(--grace-ink); }
.city-picker__close svg { width: 18px; height: 18px; }
.city-picker__title {
font-family: var(--font-serif);
font-size: 22px;
font-weight: 400;
color: var(--grace-ink);
margin: 0 0 4px;
padding-right: 32px;
}
.city-picker__sub {
font-size: 13px;
color: var(--text-secondary);
margin: 0 0 16px;
}
.city-picker__search {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--grace-ink-10);
border-radius: 10px;
font: inherit;
font-size: 14px;
background: #fff;
color: var(--grace-ink);
margin-bottom: 12px;
box-sizing: border-box;
transition: border-color .15s ease;
}
.city-picker__search:focus {
outline: none;
border-color: var(--brass);
}
.city-picker__list {
flex: 1;
overflow-y: auto;
margin-right: -10px;
padding-right: 10px;
}
.city-picker__group {
margin-bottom: 12px;
}
.city-picker__group-title {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--brass);
padding: 4px 4px;
margin-bottom: 4px;
}
.city-picker__city {
display: block;
width: 100%;
text-align: left;
padding: 9px 10px;
border: none;
background: transparent;
font: inherit;
font-size: 14px;
color: var(--grace-ink);
border-radius: 8px;
cursor: pointer;
transition: background .12s ease;
}
.city-picker__city:hover { background: var(--grace-ink-06); }
.city-picker__city.is-active {
background: rgba(184, 134, 76, 0.1);
color: var(--brass);
font-weight: 500;
}
.city-picker__empty {
padding: 20px 4px;
text-align: center;
font-size: 13px;
color: var(--text-secondary);
}
.mm-summary {
display: flex;
flex-direction: column;
gap: 14px;
padding-top: 16px;
border-top: 1px solid var(--border-hair);
}
.mm-summary__row {
display: flex;
justify-content: space-between;
align-items: baseline;
font-family: var(--font-sans);
font-size: 14px;
color: var(--text-secondary);
}
.mm-summary__total {
font-family: var(--font-display);
font-size: 28px;
font-weight: 500;
color: var(--grace-ink);
font-variant-numeric: tabular-nums;
}
.mm-form { display: flex; flex-direction: column; gap: 8px; }
.mm-form input {
font-family: var(--font-sans);
font-size: 14px;
padding: 12px 14px;
border: 1px solid var(--border-default);
border-radius: 8px;
background: var(--white);
color: var(--grace-ink);
transition: border-color var(--dur-default);
}
.mm-form input:focus { outline: none; border-color: var(--brass); }
.mm-form__submit { margin-top: 0; width: 100%; }
.mm-form__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.mm-form__consult { background: transparent; color: var(--ink); border: 1px solid rgba(0,0,0,0.18); }
.mm-form__consult:hover { background: rgba(184,138,30,0.08); border-color: var(--brass); color: var(--brass); }
@media (max-width: 520px) {
.mm-form__actions { grid-template-columns: 1fr; }
}
.mm-quick {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.mm-quick__label {
font-family: var(--font-sans);
font-size: 12px;
color: var(--text-tertiary);
width: 100%;
margin-bottom: -2px;
}
.mm-quick__btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: 6px;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
text-decoration: none;
transition: opacity var(--dur-default);
}
.mm-quick__btn:hover { opacity: 0.85; }
.mm-quick__btn svg { width: 16px; height: 16px; }
.mm-quick__btn--tg { background: #229ED9; color: #fff; }
@media (max-width: 900px) {
.model-modal { padding: 0; }
.model-modal__dialog {
max-width: 100%;
max-height: 100vh;
height: 100%;
border-radius: 0;
}
.mm-grid {
grid-template-columns: 1fr;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.mm-media {
padding: 60px 24px 16px;
overflow: visible;
}
.mm-image { aspect-ratio: 16/10; max-height: 240px; }
.mm-content {
padding: 24px 24px 32px;
gap: 20px;
overflow: visible;
}
.mm-title { font-size: 28px; }
.mm-summary__total { font-size: 24px; }
}
body.mm-locked { overflow: hidden; }
/* ─── Рассрочка под ценой ──────────────────────────────────────────── */
.mm-installment {
margin-top: 4px;
font-size: 14px;
color: rgba(18, 20, 18, 0.6);
line-height: 1.4;
}
.mm-installment strong {
font-weight: 600;
color: rgba(18, 20, 18, 0.85);
}
.mm-installment[hidden] { display: none; }
/* ─── Пояснение под формой «Что будет дальше» ──────────────────────── */
.mm-form__hint {
margin-top: 4px;
font-size: 14px;
color: rgba(18, 20, 18, 0.7);
line-height: 1.5;
}
.mm-form__hint-title {
font-weight: 600;
margin-bottom: 6px;
color: rgba(18, 20, 18, 0.85);
}
.mm-form__hint-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.mm-form__hint-list li {
position: relative;
padding-left: 18px;
}
.mm-form__hint-list li::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--brass, #b08a3e);
}
/* ─── Страница товара /catalog// ─────────────────────────────── */
body[data-product-page] {
background: var(--ivory-soft, #f1ece2);
}
/* Шапка на странице товара — стоит абсолютом и уезжает вместе со страницей при скролле вниз.
При скролле вверх класс .is-pinned делает её fixed со slide-in анимацией. */
body[data-product-page] nav.nav {
position: absolute;
top: 0;
left: 0;
right: 0;
background: var(--forest);
height: 60px;
box-shadow: var(--shadow-nav);
}
body[data-product-page] nav.nav.is-pinned {
position: fixed;
animation: nav-slide-down 220ms var(--ease-out, ease-out);
}
@keyframes nav-slide-down {
from { transform: translateY(-100%); }
to { transform: translateY(0); }
}
body[data-product-page] main.product-page {
padding: 80px 24px 64px;
min-height: calc(100vh - 220px);
}
body[data-product-page] .breadcrumbs {
margin-top: 14px;
margin-bottom: 8px;
}
body[data-product-page] .product-page__dialog {
margin-top: 8px;
}
.product-page__dialog {
position: relative;
max-width: 1080px;
margin: 0 auto;
background: transparent;
border-radius: 0;
box-shadow: none;
overflow: visible;
display: flex;
flex-direction: column;
gap: 28px;
}
/* Hero-карточка: единый контейнер для первого экрана (фото + buybox).
overflow:visible — чтобы тултипы спек-тайлов и подобные элементы могли
выходить за пределы карточки. Скругление работает без clip, т.к. внутреннее
изображение `.mm-media` имеет свой `overflow:hidden` для собственных углов. */
body[data-product-page] .mm-grid--hero {
background: var(--ivory, #f6f1e8);
border: 1px solid rgba(18, 20, 18, 0.06);
border-radius: 18px;
box-shadow: 0 12px 40px rgba(10, 18, 13, 0.10);
padding: 28px;
gap: 28px;
align-items: start;
overflow: visible;
}
body[data-product-page] .mm-grid--hero .mm-media {
background: transparent;
padding: 0;
border-radius: 12px;
/* visible — чтобы тултипы спек-тайлов не подрезались */
overflow: visible;
}
body[data-product-page] .mm-grid--hero .mm-content--hero {
padding: 0;
}
body[data-product-page] .mm-content--rest {
padding: 0 4px;
}
/* Единый ритм между секциями: gap у родителя контролирует расстояние ПЕРЕД заголовком,
а внутренний gap у .mm-section — расстояние от заголовка до контента (12px).
Зануляем внешние margin у всех прямых детей, чтобы они не конфликтовали с flex-gap.
На десктопе 24px (плотнее), на планшете/мобиле — больше воздуха. */
body[data-product-page] .mm-content--rest { gap: 24px; }
body[data-product-page] .mm-content--rest > * { margin-top: 0; margin-bottom: 0; }
body[data-product-page] .mm-content--rest .mm-section { gap: 12px; padding: 0; }
@media (max-width: 1023px) {
body[data-product-page] .mm-content--rest { gap: 32px; }
}
@media (max-width: 768px) {
body[data-product-page] .mm-grid--hero {
padding: 14px;
border-radius: 12px;
gap: 16px;
}
body[data-product-page] .mm-content--rest {
padding: 0;
gap: 32px;
}
}
.product-page__dialog .mm-content {
/* На странице товара контент не должен скроллиться отдельно — листает вся страница */
max-height: none;
overflow: visible;
}
.product-page__dialog .mm-grid {
/* Снимаем 100vh-зависимости модалки — на странице обычный flow */
max-height: none;
overflow: visible;
}
@media (max-width: 768px) {
body[data-product-page] main.product-page {
padding: 56px 12px 48px;
}
.product-page__dialog {
border-radius: 0;
box-shadow: none;
gap: 18px;
}
}
/* ─── Сравнение моделей линейки (на странице товара) ──────────────── */
.mm-compare__viewport {
margin-top: 16px;
/* НЕ обрезаем — иначе бейдж «Вы смотрите» уходит под край */
overflow: visible;
}
.mm-compare__grid {
display: grid;
grid-template-columns: minmax(140px, 1.1fr) repeat(var(--cols, 3), minmax(0, 1fr));
font-size: 14px;
line-height: 1.4;
border-radius: 12px;
border: 1px solid rgba(18, 20, 18, 0.08);
background: var(--ivory, #f6f1e8);
/* визуально clip без обрезки бейджа: используем clip вместо hidden */
overflow: clip;
position: relative;
}
.mm-compare__head,
.mm-compare__cell,
.mm-compare__label,
.mm-compare__cta,
.mm-compare__corner {
padding: 14px 12px;
border-bottom: 1px solid rgba(18, 20, 18, 0.06);
}
/* Последний row (cta) без нижней границы */
.mm-compare__cta { border-bottom: 0; }
.mm-compare__corner--bottom { border-bottom: 0; }
.mm-compare__head {
position: relative;
padding: 28px 10px 16px;
text-align: center;
background: rgba(255, 255, 255, 0.45);
}
.mm-compare__head.is-current {
background: rgba(176, 138, 62, 0.08);
box-shadow: inset 0 0 0 2px var(--brass, #b08a3e);
z-index: 1;
}
/* Бейдж «Вы смотрите» — верхний край колонки, без вылета */
.mm-compare__pill {
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
background: var(--brass, #b08a3e);
color: #fff;
font-size: 11px;
font-weight: 600;
padding: 3px 9px;
border-radius: 999px;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
}
.mm-compare__head-img {
width: 100%;
max-width: 200px;
height: auto;
aspect-ratio: 1 / 1;
object-fit: contain;
display: block;
margin: 4px auto 12px;
}
.mm-compare__diff {
position: absolute;
top: 8px;
left: 8px;
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
padding: 3px 9px;
border-radius: 999px;
letter-spacing: 0.02em;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.mm-compare__diff--save {
background: #E5EFE3;
color: #3F5D44;
}
.mm-compare__diff--more {
background: var(--brass-wash);
color: var(--brass-deep);
}
.mm-compare__head-hint {
font-family: var(--font-sans);
font-size: 13px;
color: var(--text-secondary);
line-height: 1.35;
margin-top: 6px;
padding: 0 6px;
}
.mm-compare__head-name {
font-weight: 600;
font-size: 14px;
color: var(--grace-ink, #121412);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mm-compare__head-price {
margin-top: 4px;
color: rgba(18, 20, 18, 0.6);
font-size: 13px;
white-space: nowrap;
}
.mm-compare__label {
font-weight: 500;
color: rgba(18, 20, 18, 0.7);
background: rgba(255, 255, 255, 0.25);
text-align: left;
}
.mm-compare__cell {
color: rgba(18, 20, 18, 0.85);
text-align: center;
}
.mm-compare__cell.is-current {
background: rgba(176, 138, 62, 0.06);
font-weight: 600;
}
.mm-compare__cta {
background: rgba(255, 255, 255, 0.4);
text-align: center;
padding: 14px 8px;
}
.mm-compare__cta.is-current { background: rgba(176, 138, 62, 0.08); }
.mm-compare__cta .btn {
display: block;
width: 100%;
white-space: nowrap;
padding: 9px 8px;
font-size: 13px;
letter-spacing: 0;
text-align: center;
min-width: 0;
}
.mm-compare__corner { background: transparent; border-bottom: 1px solid rgba(18, 20, 18, 0.06); }
@media (max-width: 720px) {
.mm-compare__viewport {
margin-left: -12px;
margin-right: -12px;
}
.mm-compare__grid {
grid-template-columns: 100px repeat(var(--cols, 3), 62vw);
overflow-x: auto;
overflow-y: visible;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
border-radius: 0;
border-left: 0;
border-right: 0;
}
.mm-compare__head { scroll-snap-align: start; }
.mm-compare__head-img { max-width: 140px; }
.mm-compare__head-name { font-size: 13px; }
.mm-compare__cta .btn { width: 100%; }
}
/* ─── Блок «Что умеет инструмент» ──────────────────────────────────── */
.mm-capabilities {
list-style: none;
padding: 0;
margin: 8px 0 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.mm-capability {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 12px;
background: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(18, 20, 18, 0.06);
border-radius: 10px;
}
.mm-capability__icon {
width: 24px;
height: 24px;
flex: 0 0 auto;
color: var(--brass, #b08a3e);
margin-top: 2px;
}
.mm-capability__name {
font-weight: 600;
font-size: 14px;
color: var(--grace-ink, #121412);
margin-bottom: 4px;
}
.mm-capability__desc {
font-size: 13px;
line-height: 1.45;
color: rgba(18, 20, 18, 0.6);
}
@media (max-width: 720px) {
.mm-capabilities { grid-template-columns: 1fr; gap: 10px; }
.mm-capability { padding: 10px; }
}
/* ─── Блок «С чем работает» ────────────────────────────────────────── */
.mm-apps {
margin-top: 8px;
background: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(18, 20, 18, 0.08);
border-radius: 10px;
overflow: hidden;
}
.mm-apps__row {
display: grid;
grid-template-columns: 180px 1fr;
grid-template-rows: auto auto;
column-gap: 16px;
row-gap: 4px;
align-items: start;
padding: 14px;
}
.mm-apps__row + .mm-apps__row {
border-top: 1px solid rgba(18, 20, 18, 0.06);
}
.mm-apps__cat {
grid-column: 1;
grid-row: 1 / span 2;
align-self: center;
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
color: var(--grace-ink, #121412);
}
.mm-apps__cat svg {
width: 16px;
height: 16px;
flex: 0 0 auto;
color: var(--brass, #b08a3e);
}
.mm-apps__items {
grid-column: 2;
grid-row: 1;
font-size: 13px;
line-height: 1.5;
color: rgba(18, 20, 18, 0.8);
}
.mm-apps__desc {
grid-column: 2;
grid-row: 2;
font-size: 13px;
line-height: 1.5;
color: rgba(18, 20, 18, 0.55);
margin-top: 2px;
}
.mm-apps__note {
margin-top: 10px;
font-size: 13px;
color: rgba(18, 20, 18, 0.55);
line-height: 1.5;
}
@media (max-width: 720px) {
.mm-apps__row {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
row-gap: 6px;
padding: 14px;
}
.mm-apps__cat { grid-column: 1; grid-row: 1; align-self: start; }
.mm-apps__items { grid-column: 1; grid-row: 2; }
.mm-apps__desc { grid-column: 1; grid-row: 3; margin-top: 0; }
}
/* ─── Хлебные крошки на странице товара ────────────────────────────── */
.breadcrumbs {
max-width: 1080px;
margin: 0 auto 16px;
font-size: 13px;
color: rgba(18, 20, 18, 0.55);
}
.breadcrumbs__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 6px;
}
.breadcrumbs__item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.breadcrumbs__link {
color: rgba(18, 20, 18, 0.55);
text-decoration: none;
transition: color 120ms ease;
}
.breadcrumbs__link:hover { color: var(--brass, #b08a3e); }
.breadcrumbs__current {
color: rgba(18, 20, 18, 0.85);
font-weight: 500;
}
.breadcrumbs__sep {
width: 12px;
height: 12px;
color: rgba(18, 20, 18, 0.3);
flex: 0 0 auto;
}
@media (max-width: 720px) {
.breadcrumbs { font-size: 12px; }
}
/* ─── Габариты и вес ───────────────────────────────────────────────── */
.mm-dimensions {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin-top: 8px;
}
.mm-dimension {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 14px 8px;
background: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(18, 20, 18, 0.06);
border-radius: 10px;
gap: 4px;
}
.mm-dimension__icon {
width: 22px;
height: 22px;
color: var(--brass, #b08a3e);
margin-bottom: 4px;
}
.mm-dimension__label {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: rgba(18, 20, 18, 0.55);
}
.mm-dimension__value {
font-size: 16px;
font-weight: 600;
color: var(--grace-ink, #121412);
}
.mm-dimension__hint {
font-size: 12.5px;
line-height: 1.4;
color: rgba(18, 20, 18, 0.55);
margin-top: 6px;
}
@media (max-width: 720px) {
.mm-dimensions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mm-dimension__hint { font-size: 12px; }
}
/* ─── Подключения и разъёмы ────────────────────────────────────────── */
.mm-ports {
list-style: none;
padding: 0;
margin: 8px 0 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.mm-port {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px 12px;
background: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(18, 20, 18, 0.06);
border-radius: 10px;
}
.mm-port__icon {
width: 22px;
height: 22px;
flex: 0 0 auto;
color: var(--brass, #b08a3e);
margin-top: 2px;
}
.mm-port__name {
font-weight: 600;
font-size: 13px;
color: var(--grace-ink, #121412);
margin-bottom: 2px;
}
.mm-port__desc {
font-size: 12px;
line-height: 1.45;
color: rgba(18, 20, 18, 0.6);
}
@media (max-width: 720px) {
.mm-ports { grid-template-columns: 1fr; gap: 8px; }
}
/* Главные разъёмы — 2 крупные карточки */
.mm-ports--lead { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mm-port--lead {
padding: 18px 18px;
background: var(--ivory-soft);
border-color: var(--brass-soft);
align-items: center;
gap: 14px;
}
.mm-port--lead .mm-port__icon { width: 28px; height: 28px; }
.mm-port--lead .mm-port__name { font-size: 15px; margin-bottom: 4px; }
.mm-port--lead .mm-port__desc { font-size: 13px; }
/* Подзаголовок для второстепенных разъёмов */
.mm-ports__sub-label {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-tertiary);
margin: 18px 0 8px;
}
/* Второстепенные разъёмы — компактная сетка */
.mm-ports--compact {
margin-top: 0;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 6px;
}
.mm-port--compact {
padding: 8px 10px;
background: transparent;
border: 1px solid transparent;
align-items: center;
gap: 10px;
}
.mm-port--compact:hover { background: rgba(255, 255, 255, 0.45); border-color: var(--grace-ink-06); }
.mm-port--compact .mm-port__icon { width: 18px; height: 18px; margin-top: 0; opacity: 0.7; }
.mm-port--compact .mm-port__name { font-weight: 500; font-size: 12.5px; margin-bottom: 1px; }
.mm-port--compact .mm-port__desc { font-size: 11.5px; line-height: 1.35; }
/* ─── FAQ в карточке товара ────────────────────────────────────────── */
.mm-faq {
list-style: none;
padding: 0;
margin: 8px 0 0;
display: flex;
flex-direction: column;
gap: 0;
border: 1px solid rgba(18, 20, 18, 0.08);
border-radius: 10px;
overflow: hidden;
background: rgba(255, 255, 255, 0.5);
}
.mm-faq__item + .mm-faq__item {
border-top: 1px solid rgba(18, 20, 18, 0.06);
}
.mm-faq__item details {
padding: 0;
}
.mm-faq__q {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
font-size: 14px;
font-weight: 500;
color: var(--grace-ink, #121412);
user-select: none;
}
.mm-faq__q::-webkit-details-marker { display: none; }
.mm-faq__q:hover { background: rgba(176, 138, 62, 0.04); }
.mm-faq__chevron {
width: 18px;
height: 18px;
flex: 0 0 auto;
color: rgba(18, 20, 18, 0.45);
transition: transform 200ms ease;
}
.mm-faq__item details[open] .mm-faq__chevron { transform: rotate(180deg); }
.mm-faq__a {
padding: 0 16px 14px 16px;
font-size: 14px;
line-height: 1.55;
color: rgba(18, 20, 18, 0.7);
}
.mm-faq__a strong {
font-weight: 600;
color: var(--grace-ink, #121412);
}
/* ─── Группы FAQ ──────────────────────────────────────────── */
.mm-faq-group {
margin-top: 20px;
}
.mm-faq-group:first-of-type {
margin-top: 8px;
}
.mm-faq-group__title {
margin: 0 0 8px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(18, 20, 18, 0.55);
}
.mm-faq-group .mm-faq {
margin-top: 0;
}
/* ─── CTA-блок «Не нашли ответ?» в FAQ ────────────────────── */
.mm-faq-cta {
margin-top: 24px;
padding: 22px 22px 22px;
border: 1px solid rgba(176, 138, 62, 0.22);
background: linear-gradient(135deg, rgba(176, 138, 62, 0.06), rgba(176, 138, 62, 0.02));
border-radius: 12px;
text-align: left;
}
.mm-faq-cta__title {
margin: 0 0 6px;
font-size: 17px;
font-weight: 600;
color: var(--grace-ink, #121412);
}
.mm-faq-cta__text {
margin: 0 0 14px;
font-size: 14px;
line-height: 1.55;
color: rgba(18, 20, 18, 0.7);
}
.mm-faq-cta__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.mm-faq-cta__actions .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 18px;
font-size: 14px;
font-weight: 500;
border-radius: 999px;
cursor: pointer;
transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}
.mm-faq-cta__tg {
text-decoration: none;
}
.mm-faq-cta__tg:hover {
transform: translateY(-1px);
}
.mm-faq-cta__call:hover {
transform: translateY(-1px);
}
@media (max-width: 540px) {
.mm-faq-cta { padding: 18px; }
.mm-faq-cta__actions .btn { width: 100%; }
}
/* ─── Документы (PDF-инструкция) на странице товара ────────────────── */
.mm-doc {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
background: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(18, 20, 18, 0.08);
border-radius: 10px;
text-decoration: none;
color: var(--grace-ink, #121412);
transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}
.mm-doc:hover {
border-color: var(--brass, #b08a3e);
background: rgba(176, 138, 62, 0.05);
}
.mm-doc__icon {
width: 32px;
height: 32px;
flex: 0 0 auto;
color: var(--brass, #b08a3e);
}
.mm-doc__text {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.mm-doc__title {
font-weight: 600;
font-size: 15px;
color: var(--grace-ink, #121412);
}
.mm-doc__meta {
font-size: 12px;
color: rgba(18, 20, 18, 0.55);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.mm-doc__arrow {
width: 22px;
height: 22px;
flex: 0 0 auto;
color: rgba(18, 20, 18, 0.45);
}
/* ─── Форма «Оставить отзыв» (попап) ───────────────────────────────── */
.review-form__rating {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.review-form__rating-label {
font-size: 14px;
color: rgba(18, 20, 18, 0.65);
}
.review-form__stars {
display: inline-flex;
gap: 2px;
}
.review-form__star {
background: none;
border: 0;
padding: 4px 2px;
cursor: pointer;
font-size: 28px;
line-height: 1;
color: rgba(18, 20, 18, 0.18);
transition: color 120ms ease;
}
.review-form__star:hover,
.review-form__star.is-active {
color: var(--brass, #b08a3e);
}
.review-form__media { display: flex; flex-direction: column; gap: 8px; }
.review-form__media-cta {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border: 1px dashed rgba(18, 20, 18, 0.18);
border-radius: 10px;
font-size: 14px;
color: rgba(18, 20, 18, 0.7);
cursor: pointer;
transition: border-color 120ms ease, background 120ms ease;
}
.review-form__media-cta:hover {
border-color: var(--brass, #b08a3e);
background: rgba(176, 138, 62, 0.04);
}
.review-form__media-cta svg {
width: 20px;
height: 20px;
flex: 0 0 auto;
}
.review-form__media-hint {
margin-left: auto;
font-size: 12px;
color: rgba(18, 20, 18, 0.45);
}
.review-form__media-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.review-form__media-list:empty { display: none; }
.review-form__media-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
background: var(--ivory-soft, #f1ece2);
border-radius: 8px;
font-size: 13px;
}
.review-form__media-thumb {
width: 36px; height: 36px;
border-radius: 6px;
background: rgba(18, 20, 18, 0.08);
object-fit: cover;
flex: 0 0 auto;
}
.review-form__media-name {
flex: 1 1 auto;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.review-form__media-size {
color: rgba(18, 20, 18, 0.5);
font-size: 12px;
flex: 0 0 auto;
}
.review-form__media-remove {
background: none;
border: 0;
cursor: pointer;
font-size: 18px;
line-height: 1;
color: rgba(18, 20, 18, 0.45);
padding: 4px 8px;
flex: 0 0 auto;
}
.review-form__media-remove:hover { color: #d04545; }
.review-form__media-error {
color: #d04545;
font-size: 12px;
}
/* ─── Sticky CTA panel внизу страницы товара ───────────────────────── */
.product-page__sticky-cta {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 900;
background: #fff;
box-shadow: 0 -4px 16px rgba(10, 18, 13, 0.08);
border-top: 1px solid rgba(18, 20, 18, 0.06);
transform: translateY(100%);
opacity: 0;
transition: transform 200ms var(--ease-out, ease-out), opacity 200ms ease-out;
pointer-events: none;
}
.product-page__sticky-cta.is-visible {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.product-page__sticky-cta-inner {
max-width: 1080px;
margin: 0 auto;
height: 72px;
padding: 0 24px;
display: flex;
align-items: center;
gap: 16px;
}
.product-page__sticky-cta-info {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
flex: 1 1 auto;
}
.product-page__sticky-cta-img {
width: 48px;
height: 48px;
border-radius: 6px;
object-fit: cover;
background: var(--ivory-soft, #f1ece2);
flex: 0 0 auto;
}
.product-page__sticky-cta-text { min-width: 0; }
.product-page__sticky-cta-title {
font-weight: 600;
font-size: 15px;
line-height: 1.2;
color: var(--grace-ink, #121412);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.product-page__sticky-cta-config {
font-size: 12px;
color: rgba(18, 20, 18, 0.55);
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.product-page__sticky-cta-price {
flex: 0 0 auto;
text-align: right;
}
.product-page__sticky-cta-total {
font-weight: 600;
font-size: 17px;
color: var(--grace-ink, #121412);
}
.product-page__sticky-cta-installment {
font-size: 12px;
color: rgba(18, 20, 18, 0.55);
margin-top: 2px;
}
.product-page__sticky-cta-actions {
display: flex;
gap: 8px;
flex: 0 0 auto;
}
.product-page__sticky-cta-actions .btn {
height: 44px;
padding: 0 18px;
font-size: 14px;
white-space: nowrap;
}
@keyframes mm-form-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(176, 138, 62, 0); }
50% { box-shadow: 0 0 0 6px rgba(176, 138, 62, 0.35); }
}
.mm-form__submit.is-pulse { animation: mm-form-pulse 1.4s ease-out; }
@media (max-width: 720px) {
.product-page__sticky-cta-inner {
height: 64px;
padding: 0 12px;
gap: 10px;
}
.product-page__sticky-cta-info { display: none; }
.product-page__sticky-cta-price { flex: 0 0 auto; min-width: 0; }
.product-page__sticky-cta-actions { flex: 1 1 auto; }
.product-page__sticky-cta-actions .btn {
flex: 1 1 50%;
padding: 0 12px;
font-size: 13px;
}
}
/* Не перекрываем нижний контент страницы товара */
body[data-product-page] main.product-page { padding-bottom: 96px; }
@media (max-width: 720px) {
body[data-product-page] main.product-page { padding-bottom: 88px; }
}
@media (max-width: 1199px) {
.sound { min-height: 420px; }
.sound__image { width: 50%; }
.sound__content { margin-left: 50%; padding: 48px 28px 48px 28px; min-height: 420px; }
.sound__title { font-size: clamp(24px, 6.5vw, 34px); margin-bottom: 24px; }
.sound__lead { font-size: 14px; }
}
@media (max-width: 767px) {
.sound { min-height: auto; }
.sound__image {
position: relative;
left: 0;
width: 100%;
height: 260px;
}
.sound__image::after {
background: linear-gradient(
to bottom,
rgba(31, 58, 46, 0) 0%,
rgba(31, 58, 46, 0) 48%,
rgba(31, 58, 46, 0.75) 72%,
rgba(31, 58, 46, 1) 90%,
rgba(31, 58, 46, 1) 100%
);
}
.sound__image .image-caption { font-size: 12px; bottom: 16px; left: 20px; }
.sound__content {
margin-left: 0;
padding: 8px 24px 56px;
min-height: auto;
}
.sound__title { font-size: 28px; margin-bottom: 22px; }
.sound__title br { display: none; }
.sound__lead { font-size: 14px; }
}
/* ===================== QUIZ ===================== */
.quiz-section {
background: #1F3A2E;
padding: 80px 0;
}
.quiz-section__container {
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
}
.quiz {
background: #F5F1E8;
color: #1A1A1A;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0,0,0,0.18);
position: relative;
}
.quiz__content { display: contents; }
.quiz__screen {
animation: quizFadeIn 300ms ease-out;
}
@keyframes quizFadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ---------- Welcome ---------- */
.quiz__screen--welcome {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
padding: 24px;
min-height: 580px;
}
.welcome__text {
padding: 32px 32px 32px 8px;
display: flex;
flex-direction: column;
justify-content: center;
}
.quiz__eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 28px;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--brass-deep);
}
.eyebrow__dash {
display: inline-block;
width: 24px;
height: 1px;
background: var(--brass);
}
.quiz__title--welcome {
font-family: var(--font-display);
font-size: 56px;
font-weight: 400;
line-height: 1.05;
color: #1A1A1A;
margin: 0 0 22px;
letter-spacing: var(--tracking-tight);
}
.quiz__title--welcome .italic-accent {
font-style: italic;
color: var(--brass);
}
.quiz__lead {
font-family: var(--font-sans);
font-size: 17px;
line-height: 1.5;
color: #3A3A35;
margin: 0 0 36px;
}
.quiz__preview {
display: flex;
gap: 10px;
margin-bottom: 36px;
align-items: flex-start;
}
.quiz__preview .preview-item { flex: 0 0 88px; }
@media (min-width: 541px) and (max-width: 1024px) {
.quiz__preview { gap: 12px; justify-content: flex-start; }
.quiz__preview .preview-item { flex: 0 0 96px; }
}
.preview-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
text-align: center;
flex: 0 0 auto;
position: relative;
}
.preview-item + .preview-item::before { display: none; }
.preview-item__icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: rgba(168,128,58,0.1);
border: 0.5px solid rgba(168,128,58,0.3);
display: flex;
align-items: center;
justify-content: center;
color: var(--brass);
}
.preview-item__icon svg { width: 24px; height: 24px; }
.preview-item__label {
font-family: var(--font-sans);
font-size: 13px;
line-height: 1.3;
color: #3A3A35;
font-weight: 400;
}
.quiz__cta-start {
align-self: flex-start;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 18px 40px;
background: var(--brass);
color: #FFFFFF;
border: none;
border-radius: 12px;
font-family: var(--font-sans);
font-size: 15px;
font-weight: 500;
cursor: pointer;
transition: all 180ms;
margin-bottom: 22px;
}
.quiz__cta-start:hover {
background: var(--brass);
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(168,128,58,0.25);
}
.cta__arrow {
width: 18px;
height: 18px;
transition: transform 180ms;
}
.quiz__cta-start:hover .cta__arrow { transform: translateX(3px); }
.quiz__trust {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-sans);
font-size: 14px;
color: #6A6A60;
}
.trust__icon {
width: 18px;
height: 18px;
color: var(--brass);
flex-shrink: 0;
}
.quiz__photo {
position: relative;
overflow: hidden;
background: #ece4d1;
border-radius: 20px;
min-height: 520px;
}
.quiz__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ---------- Question ---------- */
.quiz__screen--question {
padding: 56px 64px;
display: flex;
flex-direction: column;
}
.quiz__progress {
display: flex;
align-items: center;
gap: 16px;
margin: 0 0 32px;
background: rgba(168,128,58,0.08);
border: 0.5px solid rgba(168,128,58,0.3);
border-radius: 999px;
padding: 9px 18px;
width: fit-content;
}
.progress__label {
font-family: var(--font-sans);
font-size: 13px;
color: var(--brass);
white-space: nowrap;
letter-spacing: 0.02em;
}
.progress__bar { display: flex; gap: 6px; }
.progress__segment {
width: 32px;
height: 4px;
border-radius: 2px;
background: rgba(168,128,58,0.25);
transition: background 200ms;
}
.progress__segment--active { background: var(--brass); }
.quiz__question-title {
font-family: var(--font-display);
font-size: 36px;
font-weight: 400;
line-height: 1.2;
color: #1A1A1A;
margin: 0 0 28px;
letter-spacing: var(--tracking-tight);
}
.quiz__options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin: 0 0 24px;
width: 100%;
}
.quiz .option {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 18px;
background: #FFFFFF;
border: 0.5px solid rgba(0,0,0,0.08);
border-radius: 12px;
cursor: pointer;
transition: all 200ms;
text-align: left;
font-family: var(--font-sans);
color: #1A1A1A;
width: 100%;
}
.quiz .option:hover,
.quiz .option:focus-visible {
border-color: var(--brass);
background: rgba(168,128,58,0.04);
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(0,0,0,0.06);
outline: none;
}
.option__icon {
width: 40px;
height: 40px;
color: var(--brass);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(168,128,58,0.1);
border: 0.5px solid rgba(168,128,58,0.3);
border-radius: 50%;
}
.option__icon svg { width: 22px; height: 22px; }
.option__title {
font-size: 14px;
font-weight: 500;
line-height: 1.3;
margin-bottom: 4px;
color: #1A1A1A;
}
.option__subtitle {
font-size: 12px;
line-height: 1.4;
color: #8A8A80;
}
.quiz__back {
background: none;
border: none;
color: #8A8A80;
font-family: var(--font-sans);
font-size: 13px;
cursor: pointer;
padding: 8px 0;
transition: color 150ms;
align-self: flex-start;
}
.quiz__back:hover { color: var(--brass); }
/* ---------- Result ---------- */
.quiz__screen--result {
padding: 48px;
display: grid;
grid-template-columns: 45% 55%;
gap: 40px;
align-items: stretch;
}
.result__image {
background: #FFFFFF;
border: 0.5px solid rgba(0,0,0,0.08);
border-radius: 16px;
padding: 32px;
display: flex;
align-items: center;
justify-content: center;
min-height: 480px;
}
.result__image img {
width: 100%;
height: 100%;
max-height: 460px;
object-fit: contain;
display: block;
}
.result__content {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 0;
}
.result__eyebrow {
font-family: var(--font-sans);
font-size: 12px;
letter-spacing: 0.15em;
text-transform: uppercase;
font-weight: 500;
color: var(--brass);
margin-bottom: 12px;
}
.result__title {
font-family: var(--font-display);
font-size: 40px;
font-weight: 400;
line-height: 1.1;
color: #1A1A1A;
margin: 0 0 10px;
letter-spacing: var(--tracking-tight);
}
.result__role {
display: inline-block;
padding: 4px 12px;
background: rgba(168,128,58,0.12);
border: 0.5px solid var(--brass);
border-radius: 999px;
font-family: var(--font-sans);
font-size: 12px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--brass);
margin-bottom: 20px;
}
.result__explanation {
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.55;
color: #3A3A35;
margin: 0 0 18px;
}
.result__explanation .answers-summary {
color: var(--brass);
font-weight: 500;
}
.result__note {
background: rgba(168,128,58,0.08);
border-left: 2px solid var(--brass);
padding: 12px 14px;
margin: 0 0 18px;
font-family: var(--font-sans);
font-size: 13px;
line-height: 1.5;
color: #3A3A35;
border-radius: 0 6px 6px 0;
}
.result__features {
list-style: none;
padding: 0;
margin: 0 0 20px;
display: flex;
flex-direction: column;
gap: 10px;
}
.result__features li {
display: flex;
align-items: center;
gap: 12px;
font-family: var(--font-sans);
font-size: 14px;
color: #3A3A35;
}
.result__features li svg {
width: 18px;
height: 18px;
color: var(--brass);
flex-shrink: 0;
}
.result__colors {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin: 0 0 20px;
font-family: var(--font-sans);
font-size: 13px;
line-height: 1.4;
color: #3A3A35;
}
.result__colors-label {
font-weight: 500;
color: #1A1A1A;
}
.result__colors-swatches {
display: inline-flex;
gap: 6px;
align-items: center;
}
.color-dot {
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--c, #1a1a1a);
border: 1px solid rgba(0,0,0,0.15);
display: inline-block;
box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.result__colors-hint {
color: #8A8A80;
font-size: 12px;
}
.result__price {
font-family: var(--font-display);
font-size: 36px;
font-weight: 500;
color: var(--brass);
margin-bottom: 20px;
letter-spacing: var(--tracking-tight);
}
.result__actions {
display: flex;
gap: 12px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.quiz .btn-primary,
.quiz .btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 13px 22px;
border-radius: 8px;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
text-decoration: none;
cursor: pointer;
transition: all 150ms;
border: 0.5px solid transparent;
}
.quiz .btn-primary {
background: var(--brass);
color: #FFFFFF;
}
.quiz .btn-primary:hover {
background: var(--brass-deep);
transform: translateY(-1px);
}
.quiz .btn-secondary {
border-color: rgba(0,0,0,0.18);
background: transparent;
color: #1A1A1A;
}
.quiz .btn-secondary:hover {
border-color: var(--brass);
background: rgba(168,128,58,0.06);
}
.result__alternative {
display: flex;
align-items: center;
gap: 8px;
padding-top: 16px;
border-top: 0.5px solid rgba(0,0,0,0.08);
font-family: var(--font-sans);
font-size: 14px;
color: #8A8A80;
width: 100%;
}
.alt__link {
background: none;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
color: var(--brass);
text-decoration: underline;
text-decoration-color: rgba(168,128,58,0.4);
text-underline-offset: 3px;
font-weight: 500;
}
.alt__link:hover {
text-decoration-color: var(--brass);
}
.quiz__restart {
margin-top: 18px;
background: none;
border: none;
color: #8A8A80;
font-family: var(--font-sans);
font-size: 12px;
cursor: pointer;
transition: color 150ms;
align-self: flex-start;
}
.quiz__restart:hover { color: var(--brass); }
/* ---------- Адаптация ---------- */
@media (max-width: 1023px) {
.quiz-section { padding: 64px 0; }
.quiz__screen--welcome {
grid-template-columns: 1fr;
gap: 24px;
padding: 20px;
min-height: auto;
}
.quiz__photo { min-height: 280px; }
.welcome__text { padding: 16px 24px 24px; }
.quiz__title--welcome { font-size: 42px; }
.quiz__preview { gap: 24px; justify-content: flex-start; flex-wrap: wrap; }
.preview-item + .preview-item::before { left: -12px; }
.quiz__screen--question { padding: 48px 36px; }
.quiz__question-title { font-size: 28px; }
.quiz__screen--result {
grid-template-columns: 1fr;
gap: 28px;
padding: 40px 36px;
}
.result__image { min-height: 240px; padding: 18px; }
.result__image img { max-height: 240px; }
}
@media (max-width: 767px) {
.quiz-section { padding: 48px 0; }
.quiz-section__container { padding: 0 16px; }
.quiz { border-radius: 20px; }
.quiz__screen--welcome { padding: 16px; gap: 16px; }
.quiz__photo { min-height: 220px; border-radius: 14px; }
.welcome__text { padding: 12px 16px 20px; }
.quiz__eyebrow { margin-bottom: 18px; font-size: 12px; }
.quiz__title--welcome { font-size: 30px; }
.quiz__lead { font-size: 15px; margin-bottom: 24px; }
.quiz__preview { gap: 14px; margin-bottom: 24px; }
.preview-item + .preview-item::before { left: -7px; top: 6px; bottom: 6px; }
.preview-item__icon { width: 48px; height: 48px; }
.preview-item__icon svg { width: 20px; height: 20px; }
.preview-item__label { font-size: 11px; }
.quiz__cta-start { width: 100%; align-self: stretch; padding: 16px 24px; }
.quiz__screen--question { padding: 32px 22px; }
.quiz__question-title { font-size: 22px; margin-bottom: 22px; }
.quiz__options { grid-template-columns: 1fr; }
.quiz .option { padding: 14px; }
.option__title { font-size: 13px; }
.option__subtitle { font-size: 11px; }
.quiz__screen--result { padding: 32px 22px; gap: 20px; }
.result__image { min-height: 200px; padding: 14px; }
.result__image img { max-height: 200px; }
.result__title { font-size: 30px; }
.result__price { font-size: 30px; }
.result__actions { flex-direction: column; width: 100%; }
.quiz .btn-primary,
.quiz .btn-secondary { width: 100%; }
}
/* ===== Product page modal (per-model) ===== */
/* Product hero block inside modal */
.ph-hero { display:grid; grid-template-columns:1fr 1fr; gap:32px; padding:8px 4px 28px; border-bottom:1px solid rgba(0,0,0,0.08); margin-bottom:28px; }
.ph-hero__image { background:#FFFFFF; border:1px solid rgba(0,0,0,0.08); border-radius:12px; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; padding:20px; overflow:hidden; }
.ph-hero__image img { max-width:100%; max-height:100%; object-fit:contain; mix-blend-mode:multiply; }
.ph-hero__info { display:flex; flex-direction:column; gap:14px; padding-top:8px; }
.ph-badge { display:inline-block; padding:4px 12px; border-radius:20px; font-family:var(--font-sans); font-size:11px; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; align-self:flex-start; }
.ph-badge.badge-sage { background:#E8EDE3; color:#2F4A36; }
.ph-badge.badge-ink { background:#1A1A1A; color:#FFFFFF; }
.ph-badge.badge-brass { background:transparent; color:#B8923D; border:1px solid #B8923D; }
.ph-hero__name { font-family:var(--font-display); font-size:36px; font-weight:500; color:#1A1A1A; margin:0; letter-spacing:var(--tracking-tight); line-height:1.1; }
.ph-hero__desc { font-family:var(--font-sans); font-size:14.5px; line-height:1.55; color:#5A5550; margin:0; }
.ph-colors { display:flex; flex-direction:column; gap:8px; }
.ph-colors__label { font-family:var(--font-sans); font-size:13px; color:#3A3A35; }
.ph-colors__label > span { color:#1A1A1A; font-weight:500; }
.ph-swatches { display:flex; gap:8px; }
.ph-chip { width:28px; height:28px; border-radius:50%; background:var(--c, #ccc); cursor:pointer; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.12); transition:transform 150ms, box-shadow 150ms; }
.ph-chip:hover { transform:scale(1.1); }
.ph-chip.is-active { box-shadow:0 0 0 2px #FBF8F1, 0 0 0 4px #B8923D; }
.ph-specs { font-family:var(--font-sans); font-size:13px; color:#5A5550; padding:10px 14px; background:#FBF8F1; border-radius:8px; }
.ph-price { font-family:var(--font-display); font-size:32px; font-weight:500; color:#B8923D; }
.ph-actions { display:flex; gap:12px; }
.ph-buy { display:inline-flex; align-items:center; justify-content:center; padding:14px 28px; background:#B8923D; color:#FFFFFF; border-radius:8px; font-family:var(--font-sans); font-size:14.5px; font-weight:500; text-decoration:none; transition:background 150ms; border:none; cursor:pointer; }
.ph-buy:hover { background:#A37F30; }
/* Reviews section inside product modal */
.ph-reviews { padding:0 4px; }
.ph-reviews__title { font-family:var(--font-display); font-size:22px; font-weight:500; color:#1A1A1A; margin:0 0 18px; letter-spacing:var(--tracking-tight); }
.ph-reviews-count { font-family:var(--font-sans); font-size:13px; font-weight:400; color:#8A8A80; margin-left:10px; }
/* Modal becomes wider/taller for product page */
.rmodal__panel { max-width:1080px; }
/* ===== Reviews modal (per-model) ===== */
.rmodal { position:fixed; inset:0; z-index:200; display:none; }
.rmodal.is-open { display:block; }
.rmodal__backdrop { position:absolute; inset:0; background:rgba(20,22,20,0.62); backdrop-filter:blur(2px); }
.rmodal__panel { position:relative; max-width:920px; margin:40px auto; height:calc(100vh - 80px); background:#FBF8F1; border-radius:12px; display:flex; flex-direction:column; box-shadow:0 24px 60px rgba(0,0,0,0.4); overflow:hidden; }
.rmodal__head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; border-bottom:1px solid rgba(0,0,0,0.08); flex-shrink:0; background:#FBF8F1; }
.rmodal__titles { min-width:0; }
.rmodal__title { font-family:var(--font-display); font-size:24px; font-weight:500; color:#1A1A1A; margin:0; letter-spacing:var(--tracking-tight); }
.rmodal__sub { font-family:var(--font-sans); font-size:13px; color:#8A8A80; margin:4px 0 0; }
.rmodal__close { width:40px; height:40px; border-radius:50%; border:1px solid rgba(0,0,0,0.12); background:#FFFFFF; color:#3A3A35; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; transition:background 150ms, color 150ms; flex-shrink:0; }
.rmodal__close:hover { background:#1A1A1A; color:#FFFFFF; border-color:#1A1A1A; }
.rmodal__body { flex:1; overflow-y:auto; padding:18px 24px 28px; -webkit-overflow-scrolling:touch; }
.rmodal__empty { text-align:center; padding:60px 20px; color:#8A8A80; }
.rmodal__empty h3 { color:#3A3A35; margin:0 0 8px; }
/* Single review card inside modal */
.rreview { background:#FFFFFF; border:1px solid rgba(0,0,0,0.08); border-radius:10px; padding:18px; margin-bottom:16px; }
.rreview__head { display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:12px; margin-bottom:12px; }
.rreview__avatar { width:42px; height:42px; border-radius:50%; background:#E8EDE3; color:#2F4A36; font-family:var(--font-sans); font-weight:600; font-size:16px; display:flex; align-items:center; justify-content:center; }
.rreview__avatar[data-c="2"] { background:#F5EAD8; color:#8A6F2A; }
.rreview__avatar[data-c="3"] { background:#E5E1D5; color:#5A5550; }
.rreview__avatar[data-c="4"] { background:#EDE3E8; color:#5A2F46; }
.rreview__avatar[data-c="5"] { background:#DFE6EC; color:#2F4A5A; }
.rreview__avatar[data-c="6"] { background:#F0E5DD; color:#5C3F28; }
.rreview__name { font-family:var(--font-sans); font-size:14px; font-weight:600; color:#1A1A1A; line-height:1.2; }
.rreview__date { font-family:var(--font-sans); font-size:12px; color:#8A8A80; margin-top:2px; }
.rreview__stars { color:#B8923D; font-size:13px; letter-spacing:1px; white-space:nowrap; }
.rreview__photos { position:relative; margin-bottom:12px; }
.rreview__photos.is-empty { display:none; }
.rreview__track { display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:2px 2px 4px; border-radius:8px; }
.rreview__track::-webkit-scrollbar { display:none; }
.rreview__track img { flex:0 0 auto; width:auto; height:280px; max-width:100%; object-fit:cover; border-radius:8px; scroll-snap-align:start; cursor:zoom-in; background:#1a1a1a; }
.rreview__nav { position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:50%; background:rgba(0,0,0,0.55); color:#fff; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; opacity:0; transition:opacity 150ms; }
.rreview__photos:hover .rreview__nav { opacity:1; }
.rreview__nav.prev { left:8px; }
.rreview__nav.next { right:8px; }
.rreview__nav svg { width:16px; height:16px; }
.rreview__nav:hover { background:#000; }
.rreview__count { position:absolute; bottom:10px; right:10px; background:rgba(0,0,0,0.6); color:#fff; padding:3px 8px; border-radius:12px; font-size:11px; font-family:var(--font-sans); }
.rreview__text { font-family:var(--font-sans); font-size:14px; line-height:1.6; color:#3A3A35; margin:0; white-space:pre-wrap; }
.rreview__reply { margin-top:14px; padding:12px 14px; background:#F5F2EA; border-left:3px solid #B8923D; border-radius:0 8px 8px 0; }
.rreview__reply-head { display:flex; align-items:baseline; gap:10px; margin-bottom:6px; flex-wrap:wrap; }
.rreview__reply-label { font-family:var(--font-sans); font-size:12px; font-weight:600; color:#8A6F2A; letter-spacing:0.3px; text-transform:uppercase; }
.rreview__reply-date { font-family:var(--font-sans); font-size:11px; color:#8A8A80; }
.rreview__reply-text { font-family:var(--font-sans); font-size:13.5px; line-height:1.55; color:#4A453F; margin:0; white-space:pre-wrap; }
/* Lightbox for full-size photo */
.rlightbox { position:fixed; inset:0; z-index:2000; display:none; background:rgba(0,0,0,0.92); align-items:center; justify-content:center; padding:20px; }
.rlightbox.is-open { display:flex; }
.rlightbox img { max-width:92vw; max-height:88vh; object-fit:contain; display:block; margin:0 auto; }
.rlightbox__stage { display:flex; align-items:center; justify-content:center; max-width:96vw; max-height:92vh; }
.rlightbox__video { max-width:92vw; max-height:88vh; width:auto; height:auto; background:#000; border-radius:6px; outline:none; }
.rlightbox button { position:absolute; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,0.15); color:#fff; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 150ms ease, transform 150ms ease; }
.rlightbox button:hover { background:rgba(255,255,255,0.3); }
.rlightbox__close { top:16px; right:16px; }
.rlightbox__nav { top:50%; transform:translateY(-50%); width:52px; height:52px; }
.rlightbox__nav--prev { left:16px; }
.rlightbox__nav--next { right:16px; }
.rlightbox__nav:hover { transform:translateY(-50%) scale(1.06); }
.rlightbox__count { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); padding:6px 14px; border-radius:999px; background:rgba(0,0,0,0.5); color:#fff; font-family:var(--font-sans); font-size:13px; font-weight:500; letter-spacing:0.02em; pointer-events:none; }
.rlightbox.is-single .rlightbox__nav,
.rlightbox.is-single .rlightbox__count { display:none; }
@media (max-width: 720px) {
.rlightbox__nav { width:44px; height:44px; }
.rlightbox__nav--prev { left:8px; }
.rlightbox__nav--next { right:8px; }
}
@media (max-width: 720px) {
.rmodal__panel { margin:0; height:100vh; max-width:none; border-radius:0; }
.rmodal__head { padding:16px 20px; }
.rmodal__title { font-size:20px; }
.rmodal__body { padding:14px 16px 24px; }
.rreview { padding:14px; }
.rreview__track img { height:220px; }
.ph-hero { grid-template-columns:1fr; gap:18px; padding-bottom:18px; margin-bottom:18px; }
.ph-hero__name { font-size:28px; }
.ph-price { font-size:26px; }
.ph-buy { width:100%; }
.ph-reviews__title { font-size:18px; }
.ph-reviews-count { display:block; margin-left:0; margin-top:4px; }
}
/* ===== Reviews block inside modelModal (mm-reviews) ===== */
.mm-reviews { gap: 14px; }
.mm-reviews__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.mm-reviews__title {
font-family: var(--font-sans);
font-size: 12px;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
font-weight: 600;
color: var(--brass);
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.mm-reviews__meta {
font-family: var(--font-sans);
font-size: 12px;
letter-spacing: 0;
text-transform: none;
font-weight: 500;
color: var(--text-tertiary);
}
.mm-reviews__meta:empty { display: none; }
.mm-reviews__rating {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: 999px;
background: rgba(184, 146, 61, 0.10);
color: var(--brass);
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
line-height: 1;
}
.mm-reviews__rating-stars { letter-spacing: 1px; font-size: 13px; }
.mm-reviews__rating-num { color: var(--grace-ink); }
.mm-reviews__list {
display: flex;
flex-direction: column;
gap: 14px;
position: relative;
}
.mm-reviews__list .rreview { margin-bottom: 0; }
.mm-reviews__list.is-collapsed > .rreview:nth-child(n+3) { display: none; }
.mm-reviews__loading {
font-family: var(--font-sans);
font-size: 13px;
color: var(--text-tertiary);
padding: 20px;
text-align: center;
background: #fff;
border: 1px dashed var(--border-hair);
border-radius: 10px;
}
.mm-reviews__empty {
font-family: var(--font-sans);
font-size: 13px;
line-height: 1.55;
color: var(--text-secondary);
padding: 18px;
background: #fff;
border: 1px dashed var(--border-hair);
border-radius: 10px;
text-align: center;
}
.mm-reviews__more {
display: inline-flex;
align-items: center;
justify-content: center;
align-self: stretch;
height: 46px;
padding: 0 22px;
background: transparent;
border: 1px solid rgba(0,0,0,0.25);
color: var(--grace-ink);
border-radius: var(--radius-sm);
font-family: var(--font-sans);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.01em;
cursor: pointer;
transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.mm-reviews__more:hover {
border-color: rgba(0,0,0,0.5);
}
.mm-reviews__more:focus-visible {
outline: 2px solid var(--brass);
outline-offset: 2px;
}
@media (max-width: 720px) {
.mm-reviews__head { gap: 10px; }
.mm-reviews__rating { padding: 5px 10px; font-size: 12px; }
}
/* Кликабельный рейтинг в шапке модалки — переход к отзывам */
.mm-headrating {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
align-self: flex-start;
margin-top: 4px;
background: transparent;
padding: 0;
font-family: var(--font-sans);
font-size: 13px;
line-height: 1;
}
.mm-headrating__pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-radius: 999px;
background: rgba(184, 146, 61, 0.10);
color: var(--text-secondary);
font-family: var(--font-sans);
font-size: 12px;
font-weight: 500;
text-decoration: none;
transition: background 150ms ease, color 150ms ease, transform 150ms ease;
cursor: pointer;
font-variant-numeric: tabular-nums;
}
.mm-headrating__pill:hover {
background: rgba(184, 146, 61, 0.22);
color: var(--grace-ink);
transform: translateY(-1px);
}
.mm-headrating__pill[hidden] { display: none; }
.mm-headrating__pill svg { width: 14px; height: 14px; opacity: 0.7; }
.mm-headrating__pill:hover svg { opacity: 1; }
.mm-headrating__pill:first-child { background: rgba(184, 146, 61, 0.16); }
.mm-headrating__pill:first-child:hover { background: rgba(184, 146, 61, 0.28); }
.mm-headrating__stars {
letter-spacing: 1.5px;
font-size: 13px;
color: var(--brass);
}
.mm-headrating__avg { font-weight: 700; color: var(--grace-ink); }
.mm-headrating__sep { color: var(--text-tertiary); }
.mm-headrating__meta {
font-weight: 500;
color: var(--text-secondary);
}
.mm-headrating__chevron {
width: 14px;
height: 14px;
margin-left: 2px;
opacity: 0.7;
transition: transform 150ms ease;
}
.mm-headrating:hover .mm-headrating__chevron { transform: translateY(2px); }
/* Действия под списком отзывов: «Показать ещё» + «Написать отзыв» */
.mm-reviews__actions {
display: flex;
gap: 10px;
align-items: stretch;
flex-wrap: wrap;
}
.mm-reviews__actions .mm-reviews__more { flex: 1 1 220px; }
.mm-reviews__write {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 46px;
padding: 0 22px;
border-radius: var(--radius-sm);
background: transparent;
color: var(--grace-ink);
border: 1px solid rgba(0,0,0,0.25);
font-family: var(--font-sans);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.01em;
text-decoration: none;
transition: border-color 150ms ease;
flex: 1 1 200px;
}
.mm-reviews__write:hover {
border-color: rgba(0,0,0,0.5);
}
.mm-reviews__write:focus-visible {
outline: 2px solid var(--brass);
outline-offset: 2px;
}
.mm-reviews__write svg { width: 16px; height: 16px; }
@media (max-width: 720px) {
/* без горизонтального padding — пилюли выравниваются по левому краю карточки, как заголовок */
.mm-headrating { font-size: 12px; padding: 6px 0; gap: 6px; }
.mm-reviews__actions { flex-direction: column; }
}
/* ─── Похожие модели в конце страницы товара ────────────────────── */
body[data-product-page] .related-products {
margin: 56px auto 32px;
max-width: 1040px;
padding: 0 4px;
}
body[data-product-page] .related-products__head {
text-align: center;
margin: 0 auto 28px;
max-width: 560px;
}
body[data-product-page] .related-products__title {
font-family: var(--font-display, Georgia, serif);
font-size: 28px;
font-weight: 500;
letter-spacing: -0.3px;
color: var(--grace-ink, #121412);
margin: 0 0 8px;
}
body[data-product-page] .related-products__subtitle {
font-size: 14px;
color: rgba(18, 20, 18, 0.6);
margin: 0;
}
body[data-product-page] .related-products__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
body[data-product-page] .related-product {
display: flex;
flex-direction: column;
background: rgba(255, 255, 255, 0.6);
border: 1px solid rgba(18, 20, 18, 0.08);
border-radius: 12px;
text-decoration: none;
color: inherit;
overflow: hidden;
transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
body[data-product-page] .related-product:hover {
border-color: rgba(176, 138, 62, 0.5);
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}
body[data-product-page] .related-product__media {
display: flex;
align-items: center;
justify-content: center;
background: #fff;
padding: 22px 18px 14px;
aspect-ratio: 4 / 3;
}
body[data-product-page] .related-product__media img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
body[data-product-page] .related-product__body {
padding: 16px 18px 20px;
display: flex;
flex-direction: column;
gap: 4px;
}
body[data-product-page] .related-product__name {
font-family: var(--font-display, Georgia, serif);
font-size: 20px;
font-weight: 500;
color: var(--grace-ink, #121412);
}
body[data-product-page] .related-product__role {
font-size: 13px;
color: rgba(18, 20, 18, 0.55);
}
body[data-product-page] .related-product__price {
margin-top: 6px;
font-size: 15px;
font-weight: 600;
color: var(--grace-ink, #121412);
font-variant-numeric: tabular-nums;
}
body[data-product-page] .related-product__cta {
margin-top: 10px;
font-size: 13px;
color: var(--grace-brass, #b08a3e);
font-weight: 500;
}
@media (max-width: 760px) {
body[data-product-page] .related-products__grid {
grid-template-columns: 1fr;
gap: 14px;
}
body[data-product-page] .related-product {
flex-direction: row;
align-items: stretch;
}
body[data-product-page] .related-product__media {
flex: 0 0 130px;
aspect-ratio: auto;
padding: 14px;
}
body[data-product-page] .related-product__body {
flex: 1;
padding: 14px 16px;
justify-content: center;
}
body[data-product-page] .related-products__title { font-size: 22px; }
}
/* ─── Декоративный разделитель между FAQ и блоком заказа ───────── */
body[data-product-page] .section-divider {
display: flex;
align-items: center;
gap: 16px;
margin: 48px auto 32px;
max-width: 720px;
padding: 0 20px;
color: var(--grace-brass, #b08a3e);
}
body[data-product-page] .section-divider__line {
flex: 1;
height: 1px;
background: linear-gradient(to right, transparent, currentColor 50%, transparent);
opacity: 0.5;
}
body[data-product-page] .section-divider__icon {
flex-shrink: 0;
opacity: 0.7;
}
/* ─── Order block: тёмный «остров» заказа ───────────────────────── */
body[data-product-page] .order-block {
--ob-dark: #1F2D24;
--ob-card: #263730;
--ob-line: #3A4A3F;
--ob-brass: #b08a3e;
--ob-brass-soft: rgba(176, 138, 62, 0.14);
--ob-text: #f6f1e8;
--ob-text-muted: #c9c2b0;
--ob-text-accent: #9bb39d;
background: var(--ob-dark);
color: var(--ob-text);
padding: 56px 24px 48px;
margin: 0 -24px 48px;
border-radius: 14px;
}
body[data-product-page] .order-block__header {
text-align: center;
margin: 0 auto 32px;
max-width: 560px;
}
body[data-product-page] .order-block__title {
font-family: var(--font-display, Georgia, serif);
font-size: 32px;
font-weight: 500;
line-height: 1.15;
letter-spacing: -0.4px;
color: var(--ob-text);
margin: 0 0 10px;
}
body[data-product-page] .order-block__subtitle {
font-size: 14px;
line-height: 1.55;
color: var(--ob-text-muted);
margin: 0;
}
body[data-product-page] .order-block__layout {
max-width: 1040px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
gap: 32px;
align-items: center;
}
body[data-product-page] .order-block__media {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
body[data-product-page] .order-block__media img {
width: 100%;
max-width: 460px;
height: auto;
display: block;
filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.35));
}
body[data-product-page] .order-block__caption {
font-size: 12px;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--ob-text-accent);
font-weight: 500;
}
body[data-product-page] .order-form {
background: var(--ob-card);
border-radius: 12px;
padding: 24px 22px;
width: 100%;
margin: 0;
display: flex;
flex-direction: column;
gap: 0;
border: none;
}
body[data-product-page] .order-step {
border: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
body[data-product-page] .order-step__label {
display: block;
font-size: 12px;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--ob-text-accent);
margin: 0 0 12px;
padding: 0;
font-weight: 500;
}
body[data-product-page] .order-option {
position: relative;
display: grid;
grid-template-columns: auto 1fr auto auto;
align-items: center;
gap: 10px;
padding: 13px 14px;
background: var(--ob-dark);
border: 1px solid var(--ob-line);
border-radius: 9px;
cursor: pointer;
transition: border-color 120ms ease, background 120ms ease;
}
body[data-product-page] .order-option:hover {
border-color: var(--ob-brass);
}
body[data-product-page] .order-option:has(.order-option__input:checked) {
background: #2d3f33;
border-color: var(--ob-brass);
box-shadow: 0 0 0 1px var(--ob-brass) inset;
}
body[data-product-page] .order-option__input {
position: absolute;
opacity: 0;
pointer-events: none;
width: 1px;
height: 1px;
}
body[data-product-page] .order-option__radio {
width: 16px;
height: 16px;
border-radius: 50%;
border: 1.5px solid #6b7a6f;
flex-shrink: 0;
transition: border-color 120ms ease, background 120ms ease;
}
body[data-product-page] .order-option:has(.order-option__input:checked) .order-option__radio {
border-color: var(--ob-brass);
background: radial-gradient(circle, var(--ob-brass) 38%, transparent 42%);
}
body[data-product-page] .order-option__title {
color: var(--ob-text);
font-size: 14px;
font-weight: 500;
}
body[data-product-page] .order-option__badge {
color: var(--ob-brass);
font-size: 12px;
background: var(--ob-brass-soft);
padding: 3px 9px;
border-radius: 999px;
font-weight: 500;
white-space: nowrap;
}
body[data-product-page] .order-option__price {
color: var(--ob-text);
font-size: 14px;
font-weight: 500;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
body[data-product-page] .order-divider {
border: none;
height: 1px;
background: var(--ob-line);
margin: 22px 0;
}
body[data-product-page] .order-input {
display: block;
width: 100%;
padding: 13px 15px;
background: var(--ob-dark);
color: var(--ob-text);
border: 1px solid var(--ob-line);
border-radius: 9px;
font-size: 14px;
font-family: inherit;
box-sizing: border-box;
transition: border-color 120ms ease;
}
body[data-product-page] .order-input + .order-input {
margin-top: 9px;
}
body[data-product-page] .order-input::placeholder {
color: rgba(246, 241, 232, 0.4);
}
body[data-product-page] .order-input:focus {
outline: none;
border-color: var(--ob-brass);
box-shadow: 0 0 0 1px var(--ob-brass);
}
body[data-product-page] .order-promise {
margin-top: 20px;
padding: 14px 16px 14px 18px;
background: var(--ob-brass-soft);
border-radius: 9px;
border-left: 3px solid var(--ob-brass);
}
body[data-product-page] .order-promise__title {
font-size: 13px;
color: var(--ob-text);
font-weight: 600;
margin: 0 0 8px;
}
body[data-product-page] .order-promise__list {
list-style: none;
padding: 0;
margin: 0;
font-size: 13px;
color: var(--ob-text-muted);
line-height: 1.5;
}
body[data-product-page] .order-promise__list li {
position: relative;
padding-left: 18px;
margin: 0 0 5px;
}
body[data-product-page] .order-promise__list li:last-child { margin-bottom: 0; }
body[data-product-page] .order-promise__list li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: var(--ob-brass);
font-weight: 600;
}
body[data-product-page] .order-total {
display: flex;
justify-content: space-between;
align-items: baseline;
margin: 22px 0 14px;
}
body[data-product-page] .order-total__label {
font-size: 13px;
color: var(--ob-text-accent);
letter-spacing: 0.3px;
}
body[data-product-page] .order-total__value {
font-family: var(--font-display, Georgia, serif);
font-size: 28px;
color: var(--ob-text);
font-weight: 500;
font-variant-numeric: tabular-nums;
}
body[data-product-page] .order-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 12px;
}
body[data-product-page] .order-actions__main,
body[data-product-page] .order-actions__secondary {
border: none;
border-radius: 9px;
padding: 14px 16px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
font-family: inherit;
transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
body[data-product-page] .order-actions__main {
background: var(--ob-brass);
color: var(--ob-text);
}
body[data-product-page] .order-actions__main:hover {
background: #a07c36;
transform: translateY(-1px);
}
body[data-product-page] .order-actions__secondary {
background: transparent;
color: var(--ob-text);
border: 1px solid #6b7a6f;
}
body[data-product-page] .order-actions__secondary:hover {
border-color: var(--ob-brass);
background: var(--ob-brass-soft);
}
body[data-product-page] .order-telegram {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
color: var(--ob-text-accent);
font-size: 13px;
text-decoration: none;
padding: 8px;
margin: 4px auto 0;
transition: color 120ms ease;
}
body[data-product-page] .order-telegram:hover {
color: var(--ob-brass);
}
body[data-product-page] .order-telegram svg {
color: #229ed9;
flex-shrink: 0;
}
@media (max-width: 880px) {
body[data-product-page] .order-block__layout {
grid-template-columns: 1fr;
gap: 24px;
max-width: 560px;
}
body[data-product-page] .order-block__media img {
max-width: 320px;
}
}
@media (max-width: 600px) {
body[data-product-page] .order-block {
padding: 40px 16px 32px;
margin: 0 -16px 32px;
border-radius: 0;
}
body[data-product-page] .order-block__title { font-size: 26px; }
body[data-product-page] .order-block__media { display: none; }
body[data-product-page] .order-form { padding: 20px 16px; }
body[data-product-page] .order-actions { grid-template-columns: 1fr; }
body[data-product-page] .section-divider { margin: 32px auto 24px; }
body[data-product-page] .order-option {
grid-template-columns: auto 1fr auto;
grid-template-rows: auto auto;
row-gap: 4px;
}
body[data-product-page] .order-option__radio { grid-row: 1 / 3; }
body[data-product-page] .order-option__title { grid-column: 2 / 3; grid-row: 1; }
body[data-product-page] .order-option__price { grid-column: 3 / 4; grid-row: 1; }
body[data-product-page] .order-option__badge { grid-column: 2 / 4; grid-row: 2; justify-self: start; }
}
/* ═════════════════════════════════════════════════════════════════
RESPONSIVE FIXES — Phase 1 (mobile/tablet)
═════════════════════════════════════════════════════════════════ */
/* — safety net против горизонтального скролла страницы — */
html { overflow-x: hidden; }
body { overflow-x: clip; }
/* (overflow-x:clip на body не создаёт containing block для fixed — в отличие от hidden — поэтому
.nav и .pdp-toc продолжают приклеиваться к viewport) */
/* — Подсказки у спек-плиток (8 ядер, 20 Вт и т.д.):
pseudo-элемент ::after шириной 240px при центрировании раздувал scrollWidth родителя.
От горизонтального скролла страницы защищает `body { overflow-x: clip }` выше.
contain: layout НЕ ставим — это блокирует position:fixed для тултипа на мобиле. — */
/* — Тултипы спек-плиток (8 ядер, 20 Вт и т.д.):
На узких экранах position:absolute шириной 240px при центральном transform всегда
вылезает за viewport. Делаем тултип position:fixed по центру нижней зоны экрана,
стрелочку (::before) скрываем — это уже не «привязанный» tooltip, а floating-popover.
При position:fixed гарантированно перекрывает любую кнопку, включая «Послушать»
(которая z:3 + backdrop-filter создаёт stacking context). — */
@media (max-width: 1023px) {
body[data-product-page] .mm-spec--tip::after {
position: fixed;
left: 50%;
right: auto;
top: auto;
bottom: 24px;
transform: translateX(-50%) translateY(8px);
width: min(320px, calc(100vw - 32px));
max-width: none;
z-index: 9999;
}
body[data-product-page] .mm-spec--tip:hover::after,
body[data-product-page] .mm-spec--tip:focus-visible::after {
transform: translateX(-50%) translateY(0);
}
body[data-product-page] .mm-spec--tip::before { display: none; }
}
/* — Специфик-плитки (8 ядер / 20 Вт / 189 голосов / 512 МБ): на узких экранах
min 80px × 4 колонки = 320 + gap 24 = 344px, что больше 313px ширины контента карточки
на 375px viewport. Разрешаем колонкам ужиматься ниже 80px. — */
body[data-product-page] .mm-specs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 380px) {
body[data-product-page] .mm-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* — Sticky PDP TOC: жёстко ограничиваем шириной viewport, контент скроллится внутри.
top: 0 по умолчанию + body.nav-pinned делает top:60px (правило выше в файле). — */
.pdp-toc { width: 100vw; max-width: 100vw; box-sizing: border-box; }
.pdp-toc__inner { width: 100%; max-width: 1080px; }
@media (max-width: 720px) {
.pdp-toc { margin: 0; padding: 0 12px; }
.pdp-toc__link { min-height: 44px; padding: 10px 14px; font-size: 12px; display: inline-flex; align-items: center; }
}
/* — NAV: бургер на мобиле — */
.nav-burger {
display: none;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid rgba(246,241,232,0.18);
border-radius: 8px;
color: var(--ivory);
cursor: pointer;
padding: 0;
margin-left: 12px;
transition: background 150ms ease, border-color 150ms ease;
}
.nav-burger:hover { background: rgba(246,241,232,0.08); }
.nav-burger__bars { position: relative; width: 18px; height: 12px; }
.nav-burger__bars span {
position: absolute;
left: 0;
width: 100%;
height: 1.5px;
background: var(--ivory);
border-radius: 1px;
transition: transform 220ms ease, top 220ms ease, opacity 150ms ease;
}
.nav-burger__bars span:nth-child(1) { top: 0; }
.nav-burger__bars span:nth-child(2) { top: 5px; }
.nav-burger__bars span:nth-child(3) { top: 10px; }
.nav-burger.is-open .nav-burger__bars span:nth-child(1) { top: 5px; transform: rotate(45deg); }
.nav-burger.is-open .nav-burger__bars span:nth-child(2) { opacity: 0; }
.nav-burger.is-open .nav-burger__bars span:nth-child(3) { top: 5px; transform: rotate(-45deg); }
@media (max-width: 880px) {
.nav { padding: 0 16px; }
.nav-burger { display: inline-flex; margin-left: 8px; }
/* CTA сразу после лого, бургер вплотную к CTA — компактная правая зона на мобиле */
.nav-cta { padding: 9px 14px; font-size: 12px; margin-left: auto; }
.nav-links {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--forest);
flex-direction: column;
gap: 0;
padding: 8px 0;
box-shadow: 0 12px 28px rgba(0,0,0,0.25);
border-top: 1px solid rgba(246,241,232,0.08);
max-height: 0;
overflow: hidden;
opacity: 0;
visibility: hidden;
transition: max-height 280ms ease, opacity 200ms ease, visibility 0s linear 280ms;
}
.nav-links.is-open {
max-height: 80vh;
opacity: 1;
visibility: visible;
transition: max-height 320ms ease, opacity 220ms ease, visibility 0s;
}
.nav-links a {
display: flex;
align-items: center;
min-height: 48px;
padding: 0 20px;
font-size: 15px;
color: rgba(246,241,232,0.85);
border-bottom: 1px solid rgba(246,241,232,0.06);
}
.nav-links a:last-child { border-bottom: none; }
}
.nav.is-menu-open { background: var(--forest); box-shadow: var(--shadow-nav); }
/* — Footer: переносим строки на мобиле — */
@media (max-width: 720px) {
.footer {
flex-direction: column;
align-items: flex-start;
gap: 14px;
padding: 24px 16px;
}
.footer-links { flex-wrap: wrap; gap: 14px 18px; }
}
/* — Тач-таргеты: галерея и карусели — */
@media (max-width: 720px) {
.mm-image-nav { width: 44px; height: 44px; opacity: 0.55; }
.mm-image-nav svg { width: 18px; height: 18px; }
.rreview__nav { width: 44px; height: 44px; opacity: 0.85; }
.rreview__nav svg { width: 18px; height: 18px; }
.breadcrumbs__link { padding: 6px 0; display: inline-block; }
}
/* — Карусели VK / Видео-отзывы: подсказка скролла на мобиле — */
@media (max-width: 720px) {
.mm-vk-reviews,
.mm-video-reviews { position: relative; }
.mm-vk-reviews__track,
.mm-video-reviews__track {
-webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 32px), transparent 100%);
mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 32px), transparent 100%);
padding-right: 28px;
}
.mm-vk-reviews__track::-webkit-scrollbar,
.mm-video-reviews__track::-webkit-scrollbar { height: 4px; }
}
/* ═════════════════════════════════════════════════════════════════
RESPONSIVE FIXES — Phase 1.1 (патчи по фидбеку)
═════════════════════════════════════════════════════════════════ */
/* — Reviews actions: «Показать ещё» и «Написать отзыв» в одном стиле, во всю ширину — */
@media (max-width: 720px) {
.mm-reviews__actions {
flex-direction: column;
flex-wrap: nowrap;
gap: 10px;
}
.mm-reviews__actions .mm-reviews__more,
.mm-reviews__actions .mm-reviews__write {
flex: 0 0 auto;
align-self: stretch;
width: 100%;
}
}
/* — Mid-CTA: убираем огромные пустоты на мобиле — */
@media (max-width: 768px) {
.mm-midcta {
justify-content: flex-start;
align-items: stretch;
padding: 18px;
gap: 14px;
}
.mm-midcta__copy { flex: 0 0 auto; min-width: 0; }
.mm-midcta__actions { flex: 0 0 auto; gap: 8px; }
.mm-midcta__note { flex: 0 0 auto; margin-top: 0; }
.mm-midcta__buy,
.mm-midcta__consult,
.mm-midcta__tg { height: 46px; padding: 0 16px; }
.mm-midcta__title { font-size: 18px; margin-bottom: 4px; }
.mm-midcta__sub { font-size: 13.5px; }
}
/* — Safe-area + минимальный gutter справа/слева для узких устройств вроде Fold6 — */
@media (max-width: 1023px) {
body[data-product-page] main.product-page {
padding-left: max(16px, env(safe-area-inset-left, 16px));
padding-right: max(16px, env(safe-area-inset-right, 16px));
}
}
/* — Главное фото на странице товара: даём пианино показаться целиком на всех экранах.
На <=900 модальный CSS жёстко ставил max-height:240px — на странице товара отменяем. — */
body[data-product-page] .mm-image {
max-height: none;
aspect-ratio: auto;
}
/* Без min-width:0 grid-ячейка может разъехаться по min-content картинки (1200px) и вылезти за карточку — */
body[data-product-page] .mm-grid--hero .mm-media,
body[data-product-page] .mm-grid--hero .mm-content { min-width: 0; }
body[data-product-page] .mm-image,
body[data-product-page] .mm-image img { max-width: 100%; }
@media (max-width: 720px) {
body[data-product-page] .mm-grid--hero { grid-template-columns: minmax(0, 1fr); }
/* Фото на всю ширину блока, аспект 1:1, пианино — по центру по вертикали */
body[data-product-page] .mm-image {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1 / 1;
min-height: 0;
}
body[data-product-page] .mm-image img {
width: 100%;
height: 100%;
object-fit: contain;
max-height: none;
}
}
/* — «Подключения»: главные разъёмы (mm-ports--lead) в одну колонку на мобиле и планшете,
иначе заголовок «Два разъёма для наушников» лесенкой по словам — */
@media (max-width: 1023px) {
.mm-ports--lead { grid-template-columns: 1fr; }
.mm-ports--compact { grid-template-columns: 1fr; }
}
/* — Buybox: на узких экранах статус наличия идёт ПОД ценой, а не справа.
Это даёт место длинным статусам типа «Доступен для заказа» без поломки. — */
@media (max-width: 1023px) {
.mm-buybox__header {
grid-template-columns: 1fr;
gap: 8px;
}
.mm-buybox__header .mm-stock {
justify-self: start;
white-space: normal;
margin: 2px 0 0;
}
}
/* ═════════════════════════════════════════════════════════════════
RESPONSIVE FIXES — Phase 2 (планшет 721–1023, двухколоночные сетки)
═════════════════════════════════════════════════════════════════ */
/* — «Почему выбирают» — две колонки уже от 721 (а не от 769) — */
@media (min-width: 721px) and (max-width: 768px) {
.mm-why__list { grid-template-columns: 1fr 1fr; row-gap: 22px; column-gap: 32px; }
.mm-why__name { font-size: 17px; }
.mm-why__desc { font-size: 14px; }
.mm-why__icon { flex-basis: 44px; width: 44px; height: 44px; }
.mm-why__icon svg { width: 22px; height: 22px; }
}
/* — Hero PDP на планшете: одна колонка (фото сверху, инфа снизу) — */
@media (min-width: 721px) and (max-width: 1023px) {
body[data-product-page] .mm-grid--hero {
grid-template-columns: minmax(0, 1fr);
padding: 20px;
gap: 24px;
border-radius: 14px;
}
body[data-product-page] .mm-grid--hero .mm-media {
padding: 0;
}
body[data-product-page] .mm-image {
aspect-ratio: 4 / 3;
max-height: 520px;
}
body[data-product-page] .mm-image img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* CTA в одну строку, кнопки одинаковой ширины */
body[data-product-page] .mm-cta-row { grid-template-columns: 1fr 1fr; }
body[data-product-page] .mm-cta-buy,
body[data-product-page] .mm-cta-consult { white-space: nowrap; }
/* На планшете «Что умеет» остаётся 2 колонки (по умолчанию уже так) */
/* mm-included с auto-fit minmax(180px,1fr) даёт 3-4 колонки — оставляем */
/* mm-compare на 768 уже показывает полную сетку */
/* TOC чипы — комфортнее по высоте на сенсорном планшете */
.pdp-toc__link { min-height: 40px; }
/* Footer — две колонки горизонтально */
.footer { padding: 24px 32px; }
}
.mm-carousel-nav { display: none; }
/* ================================================================ *
* ЭТАП 1+3 — Системная адаптивность *
* ================================================================ */
/* Системные брейкпоинты (используются как референс для media queries) */
:root {
--bp-sm: 480px; /* small phone */
--bp-md: 768px; /* tablet portrait */
--bp-lg: 1024px; /* small laptop */
--bp-xl: 1280px; /* desktop */
/* Fluid scale-токен для будущих rem-стилей */
--type-base: clamp(15px, 0.4vw + 13.5px, 17px);
}
/* Адаптивный gutter — глобально схлопывает 64px в clamp на узких */
@media (max-width: 1023px) {
:root {
--gutter-desktop: clamp(16px, 4vw, 40px);
}
}
@media (max-width: 540px) {
:root {
--gutter-desktop: 16px;
--gutter-mobile: 16px;
}
}
/* Fluid body-text для главных читаемых блоков (lead/intro абзацы) */
@media (max-width: 767px) {
.hero-subtitle, .why-lead, .reviews__lead, .sound__lead,
.factory-lead, .lineup__lead, .faq__intro, .quiz__lead {
font-size: clamp(14px, 3.6vw, 16px);
line-height: 1.5;
}
}
/* 2. Сетки без mobile-фолбэка — добавляем graceful degradation */
@media (max-width: 1280px) and (min-width: 721px) {
/* Планшет/узкий десктоп: каталог по 3 в ряд */
.grid-4 { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-5 { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
@media (max-width: 720px) {
.grid-4 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.grid-5 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 1024px) and (min-width: 541px) {
/* Планшет: три метрики в строку с воздухом */
.service-coverage__metrics { grid-template-columns: repeat(3, 1fr); gap: 24px; max-width:none; }
.metric { padding: 0; }
}
@media (max-width: 540px) {
.service-coverage__metrics { grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: none; }
.metric { padding: 0 4px; gap: 4px; }
.metric__icon { width: 22px; height: 22px; }
.metric__value { font-size: clamp(16px, 4.6vw, 22px); line-height: 1.1; }
.metric__label { font-size: clamp(10px, 2.8vw, 12px); line-height: 1.3; }
/* Каталог: табы серий BP/CP не должны выходить за экран — равная ширина и компактный шрифт */
.tabs {
padding: 0 12px;
gap: 0;
}
.tab-btn {
flex: 1 1 50%;
flex-shrink: 1;
padding: 12px 8px;
font-size: clamp(11px, 3.2vw, 13px);
white-space: normal;
text-align: center;
line-height: 1.25;
}
.tab-btn__count {
display: block;
margin-top: 2px;
margin-left: 0;
font-size: 0.92em;
}
/* catalog-color-bar свотчей не должно растягиваться шире контейнера */
.catalog-color-bar {
padding: 12px;
}
.catalog-color-bar__swatches {
gap: 6px;
}
.cc-chip {
font-size: 12px;
padding: 6px 10px 6px 7px;
}
}
@media (max-width: 480px) {
.grid-4 { grid-template-columns: 1fr; }
.grid-5 { grid-template-columns: 1fr; }
}
/* 3. Compare-table — визуальный индикатор горизонтального скролла */
.compare-scroll { position: relative; }
.compare-scroll::after { display: none; }
@media (max-width: 1023px) {
/* Подсказка вынесена НАД таблицей — не наслаивается на содержимое */
.compare-section .compare-scroll[data-hint] {
margin-top: 28px;
}
.compare-section .compare-scroll[data-hint]::before {
content: attr(data-hint);
position: absolute;
top: -22px; right: 4px;
font-family: var(--font-sans);
font-size: 11px;
color: rgba(18,20,18,0.65);
letter-spacing: 0.04em;
pointer-events: none;
z-index: 2;
}
}
/* 4. iOS safe-area: nav + sticky footer-CTA + body */
@supports (padding: env(safe-area-inset-top)) {
.nav { padding-left: max(var(--gutter-desktop), env(safe-area-inset-left));
padding-right: max(var(--gutter-desktop), env(safe-area-inset-right)); }
body { padding-bottom: env(safe-area-inset-bottom); }
.site-footer { padding-bottom: max(48px, env(safe-area-inset-bottom)); }
/* sticky/floating CTA, если когда-нибудь появится */
.floating-cta, .sticky-bottom {
bottom: max(16px, env(safe-area-inset-bottom));
}
}
/* 5. Touch targets — расширенное правило для тач-устройств */
@media (hover: none) and (pointer: coarse) {
/* Все основные кнопки и линки — минимум 44px по высоте */
.btn, .btn-sm, .nav-cta, .nav-logo, .nav-links a,
.kb-chip, .cmp-info, .cmp-val, .cc-chip,
.reviews__mini-arrow, .author-model {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Защита от "залипшего" hover после тапа на ключевых элементах */
.btn:hover, .nav-cta:hover, .btn-brass:hover, .btn-secondary:hover,
.nav-links a:hover, .why-card:hover, .review-card:hover {
background: initial;
border-color: initial;
color: initial;
opacity: initial;
transform: none;
box-shadow: initial;
}
/* На тач — спрячем scrollbar в compare-table для чище вида (поведение остаётся) */
.compare-scroll::-webkit-scrollbar { height: 4px; }
}
/* Skip-to-main: показываем только при фокусе с клавиатуры */
.skip-to-main {
position: absolute;
top: -40px;
left: 8px;
padding: 10px 16px;
background: #121412;
color: #ffffff;
border-radius: 4px;
z-index: 9999;
transition: top 200ms ease;
text-decoration: none;
font-weight: 600;
}
.skip-to-main:focus { top: 8px; outline: 2px solid var(--brass); outline-offset: 2px; }
/* 6. Focus-visible — единый стиль для клавиатурной навигации */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: 2px solid var(--brass);
outline-offset: 2px;
border-radius: 2px;
}
/* Не отключать outline у элементов которые уже имеют свой focus-style */
.btn:focus-visible, .nav-cta:focus-visible {
outline: 2px solid var(--brass);
outline-offset: 3px;
}
/* 6. Защита от случайного переполнения для типовых контейнеров */
.hero, .why-section, .reviews, .factory-section, .service-section,
.compare-section, .flagship-section, .quiz-section, .sound,
.steinway-section, footer {
max-width: 100vw;
overflow-x: clip;
}
/* ================================================================ *
* ФИНАЛЬНЫЙ ПРОХОД: AA-контраст для брендового золотого текста *
* на светлых секциях (ivory/white) — контраст ≥ 4.5:1 *
* ================================================================ */
.compare-section .eyebrow,
.factory-section .factory-eyebrow,
.service-coverage__eyebrow,
.factory-stat__num,
.compare-header .eyebrow,
.compare-section .italic-accent,
.service-coverage__title .italic-accent {
color: #7c5c22;
}
/* ================================================================ *
* POLISH ROUND: исправления от реальных mobile-скриншотов *
* ================================================================ */
/* Contacts: 1 колонка на mobile, иначе input-ы налезают друг на друга */
@media (max-width: 767px) {
.form-section {
grid-template-columns: 1fr;
gap: 32px;
padding: 56px var(--gutter-desktop);
}
.form-info {
max-width: 100%;
}
}
/* Compare-table: добавим pad-top чтобы подсказка вместилась */
@media (max-width: 767px) {
.compare-section { padding-top: 56px; }
.compare-group + .compare-group { margin-top: 56px; }
}
/* Service-coverage agg-rating: убрать вертикальные разделители на узких */
@media (max-width: 767px) {
.agg-rating {
border-right: none;
padding-right: 0;
padding-bottom: 12px;
border-bottom: 1px solid rgba(0,0,0,0.08);
margin-bottom: 12px;
}
}
/* Hero — поправить кадрирование изображения на mobile (показать клавиатуру и корпус) */
@media (max-width: 767px) {
#hero-piano-img {
object-position: center 35%;
}
}
/* === Кнопка возврата на юр. страницах === */
.legal-back { margin-top: 56px; padding-top: 28px; border-top: 1px solid #E5E1D5; }
.legal-back__btn {
display: inline-flex;
align-items: center;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
padding: 12px 24px;
border: 1px solid #1A1A1A;
border-radius: 10px;
color: #1A1A1A;
text-decoration: none;
transition: background 0.15s, color 0.15s;
}
.legal-back__btn:hover { background: #1A1A1A; color: #fff; }
/* === Согласие на ОПД (под кнопками отправки форм) === */
.form-consent {
margin: 10px 0 0;
font-size: 11px;
line-height: 1.4;
color: #777;
text-align: center;
}
.form-consent a {
color: #7c5c22;
text-decoration: underline;
text-decoration-color: rgba(124, 92, 34, 0.4);
text-underline-offset: 2px;
}
.form-consent a:hover { text-decoration-color: #7c5c22; }
.form-consent--popup {
color: rgba(246, 241, 232, 0.6);
}
.form-consent--popup a {
color: rgba(246, 241, 232, 0.9);
text-decoration-color: rgba(246, 241, 232, 0.4);
}
.form-consent--popup a:hover { color: var(--ivory); text-decoration-color: var(--ivory); }
/* Логотип в футере — ссылка */
.footer-logo__link { display: inline-block; text-decoration: none; transition: opacity 0.15s; }
.footer-logo__link:hover { opacity: 0.7; }