/* ===== MOBILE STABILIZER ===== */
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
}
html, body {
overflow-x: hidden;
overflow-x: clip;
max-width: 100%;
width: 100%;
}
body {
position: relative;
min-width: 0;
}
* {
min-width: 0;
max-width: 100%;
}
/* Восстанавливаем нормальные размеры для интерактивных элементов (кнопки, ссылки, поля ввода) */
button, a, input, select, textarea, label, [role="button"], [role="tab"], [role="menuitem"] {
min-width: unset;
max-width: none;
}
/* Псевдоэлементам НЕ нужны width-ограничения — они ломают иконки Font Awesome, SVG и т.д. */
*::before, *::after {
min-width: unset;
max-width: none;
}
img, video, iframe, svg, picture, canvas {
max-width: 100%;
height: auto;
}
table { max-width: 100%; }
pre, code { white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; }
/* фикс для длинных URL/слов внутри текста */
p, h1, h2, h3, h4, h5, h6, span, a, li, dd, dt {
overflow-wrap: anywhere;
word-break: break-word;
}
/* отключаем дабл-тап-зум на интерактивных элементах (он мешает обычным тапам) */
button, a, [role="button"], input[type="button"], input[type="submit"], select {
touch-action: manipulation;
}
@supports (height: 100dvh) {
.yk-vh-100 { height: 100dvh; }
.yk-min-vh-100 { min-height: 100dvh; }
}
/* ===== HORIZONTAL CHIP ROWS — protect from flex-shrink in mobile stabilizer ===== */
/* Глобальное правило * { min-width: 0; max-width: 100% } выше позволяет flex-children
сжиматься меньше content-size. Это ломает горизонтально-скроллящиеся чипы
("В наличии", "Под заказ", "Со скидкой" и т.п.) — они сжимаются в кружочки.
Восстанавливаем нормальное поведение для всех таких рядов. */
.chips-row,
.quick-chips-row,
.fast-chips,
.sale-quick-chips,
[data-yk-chips-scroll] {
flex-wrap: nowrap !important;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
}
.chips-row > *,
.quick-chips-row > *,
.fast-chips > *,
.sale-quick-chips > *,
[data-yk-chips-scroll] > * {
flex-shrink: 0 !important;
scroll-snap-align: start;
}
/* Сами чипы (на случай если их положили в нестандартный контейнер) */
.chip,
.quick-chip,
.fast-chip,
.ck-quick-chip,
.sale-chip {
flex-shrink: 0 !important;
}
/* На мобильных даём чипам полный edge-to-edge скролл и тач-инерцию */
@media (max-width: 768px) {
.chips-row,
.quick-chips-row,
.fast-chips,
.sale-quick-chips,
[data-yk-chips-scroll] {
overflow-x: auto !important;
overflow-y: hidden;
/* небольшие отступы по краям, чтобы первый/последний чип не прилипал к краю экрана */
padding-left: 4px;
padding-right: 16px;
scroll-padding-left: 4px;
}
}
/* ===== END MOBILE STABILIZER ===== */
html[data-mobile="1"] .mg-desktop { display: none !important; }
html[data-mobile="1"] .mg-mobile { display: flex !important; align-items: flex-start; width: 100%; box-sizing: border-box; max-width: 100%; }
html[data-mobile="1"] .mg-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* ─── Fix «прижатой к правому краю» правой колонки на мобильных ───
Симптом: слева отступ 14px есть, справа — нет (карточки не отцентрированы).
Причина: контейнер/сетка на ~14px шире вьюпорта и переполняет его вправо
(padding выталкивает width:100%-ребёнка за правый край, либо горизонтальный
overflow страницы). Лечим принудительно: box-sizing:border-box (padding внутри
ширины), max-width:100vw на контейнере и overflow-x:hidden на body. */
html[data-mobile="1"] .yk-container { box-sizing: border-box; max-width: 100vw; }
html[data-mobile="1"] body { overflow-x: clip; }
/* ─── Scroll-jank fix: отключаем backdrop-filter на мобильных ───
backdrop-filter: blur() на кнопках карточек (.hp-card-fav/.hp-card-compare/
.dv-card-fav/.dv-card-compare) — их сотни в водопаде. Каждый такой элемент
заставляет браузер создать отдельный композитный слой и пере-блюрить фон
на каждом кадре скролла → сильный jank на мобильных GPU (десктоп справляется,
телефон — нет). Отключаем blur на мобильных: эффект чисто декоративный,
на layout не влияет (у кнопок и так полупрозрачный белый фон). */
html[data-mobile="1"] *,
html[data-mobile="1"] *::before,
html[data-mobile="1"] *::after {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
/* Тяжёлые анимированные blur-подсветки hero (Хиты) на мобильных — выключаем
непрерывную анимацию и размытие, чтобы не грузить композитор при скролле. */
html[data-mobile="1"] .hp-hero-glow,
html[data-mobile="1"] .hp-hero-glow-1,
html[data-mobile="1"] .hp-hero-glow-2 {
animation: none !important;
filter: none !important;
opacity: 0.08 !important;
}
html[data-mobile="1"] .yk-container {
padding-left: 14px !important;
padding-right: 14px !important;
}
html[data-mobile="1"] .hp-toolbar,
html[data-mobile="1"] .np-toolbar,
html[data-mobile="1"] .sp-toolbar,
html[data-mobile="1"] .dv-toolbar {
position: static !important;
}
html[data-mobile="1"] .hp-toolbar-inner,
html[data-mobile="1"] .np-toolbar-inner,
html[data-mobile="1"] .sp-toolbar-inner,
html[data-mobile="1"] .dv-toolbar-inner {
flex-direction: column !important;
align-items: flex-start !important;
justify-content: flex-start !important;
height: auto !important;
padding: 10px 14px !important;
gap: 8px !important;
}
html[data-mobile="1"] .hp-filter-row,
html[data-mobile="1"] .np-filter-row,
html[data-mobile="1"] .sp-filter-row,
html[data-mobile="1"] .dv-filter-row {
width: 100% !important;
flex: 1 1 auto !important;
min-width: 0 !important;
flex-shrink: 1 !important;
gap: 6px !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
}
html[data-mobile="1"] .hp-filter-btn,
html[data-mobile="1"] .np-filter-btn,
html[data-mobile="1"] .sp-filter-btn,
html[data-mobile="1"] .dv-filter-btn {
font-size: 12px !important;
padding: 6px 12px !important;
flex-shrink: 0 !important;
}
html[data-mobile="1"] .hp-toolbar-info,
html[data-mobile="1"] .np-toolbar-info,
html[data-mobile="1"] .sp-toolbar-info,
html[data-mobile="1"] .dv-toolbar-info {
font-size: 12px !important;
flex-shrink: 1 !important;
white-space: nowrap !important;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: #F8FAFC;
font-family: 'Manrope', sans-serif;
color: #1A1A1A;
font-size: 15px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
.yk-container {
max-width: 1440px;
margin: 0 auto;
padding: 0 32px;
}
@media (max-width: 1024px) { .yk-container { padding: 0 20px; } }
@media (max-width: 640px) { .yk-container { padding: 0 14px; } }
:root {
--yk-lift-ease: cubic-bezier(0.22, 0.85, 0.26, 1);
--yk-air-sm: 0 6px 14px -4px rgba(20, 42, 71, 0.10), 0 2px 4px rgba(20, 42, 71, 0.04);
--yk-air-md: 0 14px 28px -10px rgba(20, 42, 71, 0.14), 0 4px 8px -2px rgba(20, 42, 71, 0.06);
--yk-air-lg: 0 24px 48px -16px rgba(20, 42, 71, 0.18), 0 8px 16px -6px rgba(20, 42, 71, 0.08);
--yk-lift-shadow-sm: 0 14px 28px -8px rgba(20, 42, 71, 0.16), 0 4px 8px -2px rgba(20, 42, 71, 0.06);
--yk-lift-shadow-md: 0 24px 48px -14px rgba(20, 42, 71, 0.22), 0 8px 16px -4px rgba(20, 42, 71, 0.10);
--yk-lift-shadow-lg: 0 36px 70px -20px rgba(20, 42, 71, 0.30), 0 12px 24px -8px rgba(20, 42, 71, 0.14);
--yk-glow-yellow: 0 16px 36px -8px rgba(245, 166, 35, 0.50), 0 4px 12px -2px rgba(245, 166, 35, 0.30);
--yk-glow-blue: 0 16px 36px -8px rgba(30, 58, 95, 0.45), 0 4px 12px -2px rgba(30, 58, 95, 0.25);
--yk-glow-red: 0 16px 36px -8px rgba(230, 57, 70, 0.50), 0 4px 12px -2px rgba(230, 57, 70, 0.30);
--yk-hover-border: rgba(30, 58, 95, 0.55);
--yk-hover-tint: rgba(30, 58, 95, 0.04);
}
.yk-lift {
box-shadow: var(--yk-air-sm);
transition: transform 0.4s var(--yk-lift-ease), box-shadow 0.4s var(--yk-lift-ease), border-color 0.3s ease;
will-change: transform;
}
@media (hover: hover) {
.yk-lift:hover { transform: translateY(-6px); box-shadow: var(--yk-lift-shadow-md); border-color: var(--yk-hover-border); }
}
.btn-yellow {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
background: linear-gradient(135deg, #FFB84A 0%, #F5A623 55%, #E0951A 100%);
color: #1A1A1A; border: none; border-radius: 12px;
height: 50px; padding: 0 24px; font-weight: 700; font-size: 15px;
font-family: 'Manrope', sans-serif; cursor: pointer; text-decoration: none; white-space: nowrap;
box-shadow: 0 8px 20px -4px rgba(245, 166, 35, 0.40);
transition: transform 0.3s var(--yk-lift-ease), box-shadow 0.3s var(--yk-lift-ease), background 0.25s ease;
}
@media (hover: hover) {
.btn-yellow:hover { background: linear-gradient(135deg, #FFCB6E 0%, #FFB84A 55%, #F5A623 100%); transform: translateY(-3px); box-shadow: var(--yk-glow-yellow); }
}
.btn-yellow:active { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(245, 166, 35, 0.30); }
.btn-blue {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
background: linear-gradient(135deg, #2A4D7A 0%, #1E3A5F 55%, #142A47 100%);
color: #FFFFFF; border: none; border-radius: 12px;
height: 50px; padding: 0 24px; font-weight: 700; font-size: 15px;
font-family: 'Manrope', sans-serif; cursor: pointer; text-decoration: none; white-space: nowrap;
box-shadow: 0 8px 20px -4px rgba(30, 58, 95, 0.35);
transition: transform 0.3s var(--yk-lift-ease), box-shadow 0.3s var(--yk-lift-ease), background 0.25s ease;
}
@media (hover: hover) {
.btn-blue:hover { background: linear-gradient(135deg, #3D6097 0%, #2A4D7A 55%, #1E3A5F 100%); transform: translateY(-3px); box-shadow: var(--yk-glow-blue); }
}
.btn-blue:active { transform: translateY(-1px); }
.btn-ghost {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
background: #FFFFFF; color: #1A1A1A;
border: 1.5px solid #E5E7EB; border-radius: 12px;
height: 50px; padding: 0 22px; font-weight: 600; font-size: 14px;
cursor: pointer; text-decoration: none; white-space: nowrap;
box-shadow: var(--yk-air-sm);
transition: transform 0.3s var(--yk-lift-ease), box-shadow 0.3s var(--yk-lift-ease), border-color 0.25s ease, color 0.25s ease;
}
@media (hover: hover) {
.btn-ghost:hover { border-color: #1E3A5F; color: #1E3A5F; transform: translateY(-3px); box-shadow: var(--yk-lift-shadow-sm); }
}
.btn-ghost:active { transform: translateY(-1px); }
.btn-light {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
background: rgba(255,255,255,0.96); color: #1A1A1A;
border: none; border-radius: 12px;
height: 50px; padding: 0 24px; font-weight: 700; font-size: 15px;
cursor: pointer; text-decoration: none; white-space: nowrap;
box-shadow: 0 8px 20px -4px rgba(0,0,0,0.18);
transition: transform 0.3s var(--yk-lift-ease), box-shadow 0.3s var(--yk-lift-ease), background 0.25s ease;
}
@media (hover: hover) {
.btn-light:hover { background: #FFFFFF; transform: translateY(-3px); box-shadow: 0 20px 40px -8px rgba(0,0,0,0.28); }
}
.btn-light:active { transform: translateY(-1px); }
.btn-dark {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
background: linear-gradient(135deg, #1A1A1A 0%, #0E0E0E 100%);
color: #FFFFFF; border: none; border-radius: 12px;
height: 50px; padding: 0 24px; font-weight: 700; font-size: 15px;
cursor: pointer; text-decoration: none; white-space: nowrap;
box-shadow: 0 8px 20px -4px rgba(0,0,0,0.30);
transition: transform 0.3s var(--yk-lift-ease), box-shadow 0.3s var(--yk-lift-ease), background 0.25s ease;
}
@media (hover: hover) {
.btn-dark:hover { background: linear-gradient(135deg, #2A2A2A, #1A1A1A); transform: translateY(-3px); box-shadow: 0 16px 36px -6px rgba(0,0,0,0.40); }
}
.btn-dark:active { transform: translateY(-1px); }
.yk-card {
background: #FFFFFF; border: 1px solid #EEF0F3; border-radius: 18px;
overflow: hidden; position: relative; box-shadow: var(--yk-air-sm);
transition: border-color 0.3s ease, box-shadow 0.45s var(--yk-lift-ease), transform 0.45s var(--yk-lift-ease);
}
@media (hover: hover) {
.yk-card:hover { border-color: var(--yk-hover-border); box-shadow: var(--yk-lift-shadow-md); transform: translateY(-8px); }
}
.badge {
display: inline-flex; align-items: center;
font-weight: 700; font-size: 11.5px;
padding: 5px 11px; border-radius: 8px; letter-spacing: 0.02em;
box-shadow: 0 4px 10px -2px rgba(0,0,0,0.18);
}
.badge-sale { background: linear-gradient(135deg, #FF4D5E 0%, #E63946 100%); color: #FFFFFF; }
.badge-hit { background: linear-gradient(135deg, #FFCB4A 0%, #F5A623 100%); color: #1A1A1A; }
.badge-new { background: linear-gradient(135deg, #2A4D7A 0%, #1E3A5F 100%); color: #FFFFFF; }
.badge-ai { background: linear-gradient(135deg, #F5A623 0%, #E07B4C 100%); color: #FFFFFF; }
.badge-eco { background: linear-gradient(135deg, #34D399 0%, #10B981 100%); color: #FFFFFF; }
.h-display {
font-family: 'Unbounded', sans-serif;
font-weight: 700; letter-spacing: -0.01em; color: #1A1A1A;
}
.h-section {
font-family: 'Unbounded', sans-serif;
font-weight: 700; letter-spacing: -0.015em;
font-size: clamp(22px, 2.4vw, 32px); line-height: 1.15; color: #1A1A1A; margin: 0;
}
.yk-section { padding: 56px 0; }
@media (max-width: 768px) { .yk-section { padding: 36px 0; } }
.yk-scroll-row {
display: grid; grid-auto-flow: column;
grid-auto-columns: minmax(220px, 1fr); gap: 16px;
overflow-x: auto; scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch; padding-bottom: 8px;
}
.yk-scroll-row > * { scroll-snap-align: start; }
.yk-scroll-row::-webkit-scrollbar { height: 0; }
.yk-no-scrollbar::-webkit-scrollbar { display: none; }
.yk-no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #F4F5F7; }
::-webkit-scrollbar-thumb { background: #C5CCD4; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #1E3A5F; }