/* yammi.css — общие стили для всех страниц магазина (catalog, product, cart, checkout). Главная (index.html) имеет свой расширенный набор inline в . */ @import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600;700;800;900&display=swap'); :root { --c-bg: #F5F1E6; --c-bg-alt: #FFFFFF; --c-dark: #1A1F16; --c-green: #2E4A3A; --c-green-lt: #6A8F5B; --c-honey: #DBA859; /* site-wide узор-россыпь ингредиентов (концепция: язык блога на весь сайт) */ --bl-pat-scatter: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='260'%20height='260'%20viewBox='0%200%20260%20260'%3E%3Cg%20fill='%23000'%3E%20%3Cellipse%20cx='42'%20cy='40'%20rx='17'%20ry='9'%20transform='rotate(-22%2042%2040)'/%3E%20%3Cpath%20d='M168%2026c14%201%2024%2012%2022%2027c-1%209-9%2013-14%209c8-9%204-24-11-31c1-3%202-5%203-5z'%20transform='rotate(12%20178%2044)'/%3E%20%3Cpath%20d='M214%20132c11%203%2016%2017%209%2030c-3%206-9%206-12%201c9-9%206-22-3-27c1-2%203-4%206-4z'%20transform='rotate(-30%20216%20148)'/%3E%20%3Ccircle%20cx='66'%20cy='150'%20r='6'/%3E%3Ccircle%20cx='86'%20cy='166'%20r='6'/%3E%3Ccircle%20cx='58'%20cy='174'%20r='6'/%3E%20%3Cellipse%20cx='128'%20cy='116'%20rx='16'%20ry='8'%20transform='rotate(38%20128%20116)'/%3E%20%3Ccircle%20cx='34'%20cy='214'%20r='9'/%3E%20%3Cpath%20d='M150%20200c12%200%2018%2015%206%2027c-11-9-17-27-6-27z'%20transform='rotate(20%20156%20214)'/%3E%20%3Cellipse%20cx='220'%20cy='214'%20rx='15'%20ry='8'%20transform='rotate(-14%20220%20214)'/%3E%20%3Ccircle%20cx='198'%20cy='68'%20r='5'/%3E%3Ccircle%20cx='108'%20cy='210'%20r='5'/%3E%20%3C/g%3E%3C/svg%3E"); --c-berry: #C984A6; --c-blueberry: #2C3F66; --c-text: #1A1F16; --c-text-mut: #6E6E6E; --c-line: rgba(0,0,0,.08); --c-surface: #FFFFFF; --c-surface-2: rgba(0,0,0,.03); /* Семантика: --c-ink — фон «тёмного акцента» (кнопки, summary, active-nav); --c-on-ink — контрастный текст на нём. Используется ВМЕСТО (--c-dark/white) для всех акцентных кнопок и панелей. */ --c-ink: #1A1F16; --c-on-ink: #FFFFFF; /* Полупрозрачное «стекло» для иконок-кнопок поверх фото (fav/compare/arrow). */ --c-glass: rgba(255,255,255,.92); --c-glass-2: rgba(255,255,255,.85); --font-display: 'Unbounded', 'Onest', system-ui, -apple-system, sans-serif; --font-text: 'Onest', system-ui, -apple-system, sans-serif; } /* Все заголовки на сайте — Unbounded (плотный display-шрифт). Текст и кнопки остаются Onest (наследуется от body). */ h1, h2, h3, h4, h5 { font-family: var(--font-display); letter-spacing: -0.03em; } * { box-sizing: border-box; min-width: 0; } /* min-width: 0 на ВСЁМ — фикс самого частого бага: flex/grid-ребёнок шириной "по контенту" игнорирует ширину родителя и распирает grid за пределы экрана. С min-width:0 контент сжимается правильно (и появляется text-overflow вместо горизонтального скролла). */ html { scroll-behavior: smooth; } body { margin: 0; font-family: 'Onest', system-ui, -apple-system, sans-serif; color: var(--c-text); background: var(--c-bg); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: rgba(244,185,66,.18); } button { font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } /* Глобально: input/select/textarea — не зумятся на iOS если font-size >= 16px */ input, select, textarea { font-size: 16px; max-width: 100%; } /* Hover-эффекты только на устройствах с настоящим hover (десктоп) — на телефоне они липнут */ @media (hover: none) { *:hover { transition: none !important; } } /* Пользователь явно попросил минимум движения (Settings → Accessibility → Reduce Motion). Сильно сокращаем длительность анимаций — но не убираем совсем, чтобы UI не «прыгал». */ @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; } } /* ── Универсальная адаптивность ──────────────────────────────────────────── */ img, video, svg, iframe { max-width: 100%; height: auto; } img { display: block; } /* Таблицы: на мобильном горизонтально-скроллимая обёртка */ @media (max-width: 720px) { table { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; white-space: nowrap; border-radius: 12px; border: 1px solid rgba(0,0,0,.08); background: var(--c-bg-alt); } table thead, table tbody, table tr { display: table-row-group; } table tr { display: table-row; } table th, table td { padding: 10px 14px; font-size: 14px; } } /* Картинки в карточках — корректные размеры */ .pcard img, .ys-row-img img { max-width: 100%; } /* Длинные нерасторжимые строки (email, URL, slug) — переносим, но обычные слова не режем. `overflow-wrap: break-word` ломает только если слово не помещается в строку, а `anywhere` рвал бы и русские слова посреди — мы это поведение убрали. */ .pcard-name, .ys-row-name, .ord-items code, .crumbs span, .ct-val { overflow-wrap: break-word; } /* iOS safe-area paddings для фиксированных элементов */ @supports (padding: env(safe-area-inset-bottom)) { body { padding-bottom: env(safe-area-inset-bottom); } } /* Большие display-заголовки — корректно сжимаются. `overflow-wrap` срабатывает только если одно слово длиннее ширины контейнера. */ .display-l, .display-m { overflow-wrap: break-word; hyphens: manual; } /* ── Мобильные оверрайды: общая компактность ────────────────────────────── На экранах <=720px все большие 100px-отступы режутся вдвое, грид-листы ужимаются, и крупные шрифты получают clamp-fallback. */ @media (max-width: 720px) { /* Секции с большим вертикальным паддингом */ .cats, .ps, .rev, .nws, section.sub, .ab-section, .ab-timeline, .ab-values, .ab-cta, .ab-numbers, .dl-tracker, .dl-faq, .ct-section, .about-hero { padding-top: 56px; padding-bottom: 56px; } /* Большие inner-баннеры */ .banner-inner { padding-top: 56px; padding-bottom: 56px; padding-left: 16px; padding-right: 16px; } .hero-slide { padding-left: 20px; padding-right: 20px; padding-top: 56px; padding-bottom: 56px; } /* Жирные ценники на товаре */ .prod-info .prod-price { font-size: clamp(28px, 8vw, 40px); } /* Cart-summary не должен залипать sticky на мобайле — он гигантский */ .cart-summary { position: static !important; top: auto !important; padding: 22px; border-radius: 18px; } .cart-summary h3 { font-size: 18px; margin-bottom: 14px; } .cart-summary .row.total { font-size: 18px; } /* Footer top — выравнивание в 1 колонку (по умолчанию 2fr 1fr 1fr 1fr на 768+) */ .ft-top { gap: 28px; } /* Все секции с большим h2 — уменьшим h2 чтобы влез на 360px */ .ph { padding: 32px 0 20px; } .ph .display-l { font-size: clamp(26px, 8.5vw, 44px); } } /* На очень узких экранах (iPhone SE ~320px) ужмём ещё */ @media (max-width: 380px) { .cats, .ps, .rev, .nws, section.sub { padding-top: 44px; padding-bottom: 44px; } .btn { padding: 12px 18px; font-size: 14px; } } /* ════════════════════════════════════════════════════════════════════════════ ГЛОБАЛЬНАЯ MOBILE SAFETY-NET — автокоррекция без правки каждого блока ────────────────────────────────────────────────────────────────────────── Эти правила страхуют от типичных багов в любых блоках сайта на узких экранах: - текст за рамки не вылазит - картинки в карточках не торчат - грид-сетки не уезжают вправо - кнопки достаточно крупные для пальца ════════════════════════════════════════════════════════════════════════════ */ /* 1. Любая картинка глобально — capped at container, никогда не больше ширины */ img, video, picture, iframe, embed, object, canvas { max-width: 100%; height: auto; } /* 2. Длинные строки (URL, slug, email) не расширяют контейнер */ p, h1, h2, h3, h4, h5, h6, dd, dt, li, td, th, blockquote, figcaption, span, a, button, label { overflow-wrap: break-word; } /* 2b. Заголовки и крупные тексты — балансируем переносы. Это убирает «висячие» одиночные буквы/слова на последней строке (text-wrap: balance, Chrome 114+/FF 121+/Safari 17.5+). Если браузер не поддерживает — просто игнорится, безопасно. */ h1, h2, h3, h4, .display-l, .display-m, .display-xl, .display-xxl, .eyebrow, .pcard-name, .cat-tile-name, .nws-card-title, .bl-card h2, .ys-row-name, .hero-line, .ph .display-l, blockquote { text-wrap: balance; } /* Длинные параграфы — `pretty` для более красивых переносов (не balance, чтоб было быстрее) */ p, li, dd { text-wrap: pretty; } /* 3. Глобальная защита от горизонтального скролла страницы — даже если что-то вылезло за экран, документ остаётся в пределах viewport */ html, body { overflow-x: clip; } /* 4. Все position:absolute/fixed элементы внутри карточек не должны вылезать */ [class*="card"] > [class*="art"], [class*="card"] > [class*="img"], [class*="tile"] > [class*="art"], [class*="tile"] > [class*="img"] { max-width: 100%; max-height: 100%; } /* 5. Все ::before / ::after декоративные элементы — capped */ *::before, *::after { max-width: 100%; } /* 6. Минимальные touch-targets — ВСЕ buttons и links в navigation ≥40px высоты */ @media (hover: none) and (pointer: coarse) { button:not([class*="-mini"]):not([class*="-xs"]):not(.qty-stepper button), a.btn, a[role="button"] { min-height: 40px; } } /* 7. Mobile-режим (≤720px) — глобальные коррекции для любых грид/флекс-родителей */ @media (max-width: 720px) { /* Если grid задан жёстко repeat(N, ...) — НИЧЕГО не делаем (не ломаем кастомный код). Но добавим страховку: column-gap уменьшаем, чтобы карточки шире */ [class*="grid"]:not(.cat-side):not(.wrap-narrow) { column-gap: clamp(8px, 2vw, 16px); } /* Любые row-flex c множеством детей переносим на новые строки */ .row, [class*="-row"] { flex-wrap: wrap; } /* Большие inline-padding > 60px ужимаем до 24px (нельзя точечно — но эвристически работает) */ section { padding-left: max(env(safe-area-inset-left), 0px); padding-right: max(env(safe-area-inset-right), 0px); } /* SVG-иконки в карточках — не больше 60% ширины родителя */ [class*="card"] svg, [class*="tile"] svg { max-width: 60%; max-height: 60%; } } /* 8. Защита: если разработчик случайно задал inline width: 800px — не больше viewport */ [style*="width: 8"][style*="px"], [style*="width:8"][style*="px"], [style*="width: 9"][style*="px"], [style*="width:9"][style*="px"] { max-width: 100% !important; } /* 9. Любые модалки — никогда не выходят за viewport */ [class*="modal"]:not(body), [role="dialog"] { max-width: 100vw; max-height: 100dvh; } .modal, .modal-content { max-width: min(96vw, var(--modal-w, 720px)); } /* ════════════════════════════════════════════════════════════════════════════ ЕДИНАЯ MOBILE-FIRST CARD SYSTEM ────────────────────────────────────────────────────────────────────────── Принцип: на мобайле (<720px) ВСЕ карточки сайта получают упрощённый стиль: • радиус 16px (вместо 24) • padding 14-16px (вместо 28-32) • заголовок 16-18px (вместо 22-28) • простой вертикальный flow, никаких абсолютных позиционирований текста • text-wrap: balance уже глобально включён выше На десктопе (≥1024px) — оригинальный богатый дизайн без изменений. ════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 720px) { /* Все карточки — компактнее и единообразнее */ .pcard, .nws-card, .rev-card, .bl-card, .ct-card, .dl-method, .val-card, .info-tile, .ab-tl-item, .deliv-opt { border-radius: 16px !important; padding: 14px 14px 16px !important; } /* У news/blog/product «изображение-шапка» — не сжимаем, она и так responsive */ /* Body внутри карточек — уменьшаем padding */ .nws-card-body, .bl-card-body { padding: 16px !important; } /* Заголовки карточек */ .nws-card-title, .bl-card h2, .info-tile h3, .val-card h3, .dl-method h3, .rev-text { font-size: clamp(16px, 4vw, 18px) !important; line-height: 1.2 !important; } .pcard-name { font-size: clamp(14px, 3.8vw, 16px) !important; line-height: 1.25 !important; } /* Подзаголовки/метаинфо — компактнее */ .nws-card-date, .bl-card-meta, .info-tile p, .val-card p, .dl-method p, .bl-card-excerpt { font-size: clamp(12px, 3vw, 13px) !important; line-height: 1.4 !important; } /* Цены товара — главная информация, делаем читабельной но не огромной */ .pcard-price { font-size: clamp(16px, 4.5vw, 20px) !important; } .pcard-price-old { font-size: clamp(12px, 3vw, 14px) !important; } .pcard-foot { gap: 8px !important; } /* Кнопка «в корзину» — touch-friendly 44×44, но компактнее на узком */ .pcard-buy { width: 40px !important; height: 40px !important; } /* Иконки/badges на карточках товара */ .pcard-badge { padding: 4px 8px !important; font-size: 10px !important; } .pcard-fav { width: 32px !important; height: 32px !important; top: 8px !important; right: 8px !important; } /* Категория-eyebrow внутри карточки — мельче */ .pcard-cat, .nws-card-cat, .bl-card-cat { font-size: 10px !important; padding: 4px 8px !important; } /* Stars в отзывах */ .rev-stars { font-size: 16px !important; margin-bottom: 10px !important; } .rev-author-avatar { width: 38px !important; height: 38px !important; font-size: 15px !important; } .rev-author-name { font-size: 13px !important; } .rev-author-source { font-size: 11px !important; } .rev-author { padding-top: 14px !important; gap: 10px !important; } /* Иконки в info-tile, val-card, dl-method, ct-card — фиксированные 44-48px */ .info-tile-icon, .val-card-icon, .dl-method-icon, .ct-card-icon { width: 44px !important; height: 44px !important; margin-bottom: 12px !important; border-radius: 10px !important; } /* News-card-img/bl-card-img — оставляем как есть (она и так adaptive), но уменьшаем aspect чтобы не съедала экран */ .nws-card-img, .bl-card-img { aspect-ratio: 16 / 9 !important; } .nws-card-img img, .bl-card-img img { width: 30% !important; height: 60% !important; } /* Timeline-карточки about — без отрицательных margin */ .ab-tl-item { margin-top: 0 !important; width: 100% !important; padding: 18px 18px !important; } .ab-tl-item::before { display: none !important; } /* Cart-summary — оторвать sticky на мобайле уже сделано глобально */ } /* Самый узкий брейк (<400px) — ещё чуть компактнее */ @media (max-width: 400px) { .pcard, .nws-card, .rev-card, .bl-card, .ct-card, .dl-method, .val-card, .info-tile, .ab-tl-item { padding: 12px 12px 14px !important; border-radius: 14px !important; } .nws-card-title, .bl-card h2 { font-size: 15px !important; } .pcard-name { font-size: 13px !important; } } /* ── Точечные mobile-фиксы по результатам аудита ───────────────────────── */ @media (max-width: 720px) { .prod { padding: 16px 0 56px; } .prod-gallery { padding: 0; } .prod-thumbs { gap: 8px; } .prod-thumb { width: 56px; height: 56px; } .cart { padding: 24px 0 56px; } .chk { padding: 24px 0 56px; } } @media (max-width: 640px) { /* Product «купить» — стейпер и кнопка в столбик */ .prod-buy-row { flex-direction: column; align-items: stretch; gap: 12px; } .qty-stepper { width: 100%; justify-content: space-between; } .qty-stepper input { flex: 1; } /* Метаинфо товара — в 1 столбец */ .prod-meta { grid-template-columns: 1fr !important; gap: 10px; } } @media (max-width: 480px) { .empty { padding: 36px 14px; font-size: 14px; } /* Корзинная строка — сетка не помещается на узких, перестраиваем во flex */ .cart-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .cart-row > .cart-row-img { width: 64px; height: 64px; } .cart-row > .cart-row-name { flex: 1 1 100%; order: 1; } .cart-row > .cart-row-price { order: 2; } .cart-row > .cart-row-qty { order: 3; margin-left: auto; } .cart-row > .cart-row-actions { order: 4; } } input, select, textarea { font-family: inherit; } .wrap { max-width: 1640px; margin-inline: auto; padding-inline: 16px; } @media (min-width: 768px) { .wrap { padding-inline: 40px; } } .wrap-narrow { max-width: 1100px; margin-inline: auto; padding-inline: 16px; } @media (min-width: 768px) { .wrap-narrow { padding-inline: 24px; } } @media (min-width: 768px) { .wrap-narrow { padding-inline: 40px; } } .display-l { font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-size: clamp(28px, 8vw, 76px); margin: 0; } .display-m { font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; font-size: clamp(24px, 6vw, 52px); margin: 0; } .display-s { font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; font-size: clamp(22px, 2.4vw, 36px); margin: 0; } .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-green); } .text-mut { color: var(--c-text-mut); } /* ── HEADER ─────────────────────────────────────────────── */ .yh { position: fixed; top: 0; left: 0; right: 0; z-index: 80; background: var(--c-bg); transition: background-color .25s, box-shadow .25s, border-color .25s; border-bottom: 1px solid transparent; } .yh-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; } .yh-logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .yh-logo img { height: 40px; width: 40px; object-fit: cover; border-radius: 50%; } .yh-logo .yh-brand { font-weight: 900; font-size: 18px; letter-spacing: -0.03em; color: var(--c-dark); line-height: 1; white-space: nowrap; } .yh-inner { position: relative; } .yh-spacer { flex: 0 1 24px; min-width: 12px; } .yh-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } /* На мобайле (≤900px) — упрощённая шапка: лого + КОРЗИНА + бургер. Поиск, избранное, кабинет, каталог-CTA и «отследить» уезжают в drawer-меню. Корзину оставляем прямо в шапке — быстрый доступ к оформлению с телефона. */ @media (max-width: 900px) { /* Показываем контейнер, но внутри оставляем только корзину */ .yh-right { display: flex; order: 4; } .yh-right .yh-track-link, .yh-right .yh-account-btn { display: none; } .yh-actions [data-search-open], .yh-actions a[aria-label="Избранное"] { display: none; } .yh-track-link { display: none; } /* Каталог-CTA на мобиле — иконка-сумка, визуально неотличимая от корзины; скрываем во избежание двух одинаковых значков. Каталог доступен в бургер-меню. */ .yh-inner .yh-cta-catalog { display: none; } /* Бургер — крайний справа, корзина слева от него */ .yh-burger { order: 5; } } /* На очень узких — даже текст CTA «Вкусняшки тут» скрываем, остаётся одна иконка-капля */ @media (max-width: 480px) { .yh-cta-catalog .yh-cta-text { display: none; } .yh-cta-catalog { padding: 10px; } } /* Сердечко-избранное в шапке + бейдж */ .yh-fav-count { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; background: var(--c-honey); color: var(--c-dark); border-radius: 50%; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; padding: 0 5px; } .yh-fav-count.is-empty { display: none; } /* Сердечко на карточках — toggle стиль */ .pcard-fav { position: absolute; top: 12px; right: 12px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; background: var(--c-glass); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color .15s, transform .12s; color: var(--c-text); } .pcard-fav svg { pointer-events: none; } .pcard-fav:hover { background: var(--c-berry); color: white; transform: scale(1.08); } .pcard-fav:active { transform: scale(.92); } .pcard-fav.is-fav { background: var(--c-berry); color: white; } .pcard-fav.is-fav svg { fill: white; } /* Кнопка сравнения на карточках — под сердечком */ .pcard-compare { position: absolute; top: 56px; right: 12px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; background: var(--c-glass); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color .15s, transform .12s; color: var(--c-text); } .pcard-compare svg { pointer-events: none; } .pcard-compare:hover { background: var(--c-honey); color: var(--c-on-ink); transform: scale(1.08); } .pcard-compare:active { transform: scale(.92); } .pcard-compare.is-compare { background: var(--c-honey); color: var(--c-on-ink); } .pcard-compare.is-compare svg { stroke: var(--c-on-ink); } /* Бэйдж счётчика сравнения в шапке */ .yh-compare-count { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; background: var(--c-honey); color: var(--c-dark); border-radius: 50%; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; padding: 0 5px; } .yh-compare-count.is-empty { display: none; } /* ════ SEARCH OVERLAY ════════════════════════════════════════════════════ */ .ys-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(5, 13, 40, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: none; align-items: flex-start; justify-content: center; padding: 80px 16px 16px; opacity: 0; transition: opacity .2s; } .ys-overlay.is-open { display: flex; opacity: 1; } .ys-modal { width: 100%; max-width: 720px; background: var(--c-bg-alt); border-radius: 24px; overflow: hidden; box-shadow: 0 32px 80px rgba(0,0,0,.4); display: flex; flex-direction: column; max-height: calc(100vh - 100px); } .ys-input-wrap { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--c-line); } .ys-input-icon { color: var(--c-text-mut); flex-shrink: 0; } .ys-input { flex: 1; border: none; outline: none; font-size: 18px; font-weight: 600; background: transparent; color: var(--c-dark); font-family: inherit; } .ys-input::placeholder { color: var(--c-text-mut); font-weight: 500; } .ys-close { position: relative; z-index: 2; width: 36px; height: 36px; border-radius: 50%; background: var(--c-bg); border: none; color: var(--c-dark); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .15s; flex-shrink: 0; } .ys-close svg { pointer-events: none; } .ys-close:hover { background: var(--c-dark); color: white; } .ys-results { overflow-y: auto; padding: 8px; } .ys-hint { padding: 32px 22px; text-align: center; color: var(--c-text-mut); font-size: 14px; } .ys-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; transition: background-color .12s; } .ys-row:hover, .ys-row.is-active { background: var(--c-bg); } .ys-row.is-active { outline: 2px solid rgba(244,185,66,.5); outline-offset: -2px; } .ys-section-title { padding: 10px 14px 4px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-mut); } .ys-row-all { background: linear-gradient(90deg, rgba(244,185,66,.08), transparent); } .ys-row-all:hover { background: linear-gradient(90deg, rgba(244,185,66,.18), rgba(244,185,66,.04)); } .ys-row-img { width: 56px; height: 56px; border-radius: 10px; background: var(--c-bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ys-row-img img { width: 70%; height: 70%; object-fit: contain; } .ys-row-body { flex: 1; min-width: 0; } .ys-row-cat { font-size: 11px; color: var(--c-green); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 2px; } .ys-row-name { font-weight: 800; font-size: 16px; line-height: 1.2; letter-spacing: -0.01em; } .ys-row-meta { font-size: 13px; color: var(--c-text-mut); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ys-row-price { font-weight: 900; font-size: 16px; white-space: nowrap; flex-shrink: 0; } /* Компактная «Отследить вкусняшку» — outline-кнопка рядом с иконками */ .yh-track-link { display: none; align-items: center; gap: 8px; padding: 9px 16px; border: 1.5px solid var(--c-line); border-radius: 999px; font-weight: 700; font-size: 13px; letter-spacing: -0.005em; color: var(--c-dark); white-space: nowrap; text-decoration: none; transition: background-color .15s, border-color .15s, color .15s, transform .12s; } @media (min-width: 1280px) { .yh-track-link { display: inline-flex; } } .yh-track-link:hover { background: var(--c-green); color: white; border-color: var(--c-green); transform: translateY(-1px); } .yh-track-link svg { flex-shrink: 0; opacity: .85; } .yh-track-link:hover svg { animation: trackBob 1.2s ease-in-out infinite; } @keyframes trackBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } .yh-nav { display: none; align-items: center; gap: 4px; flex-shrink: 0; } @media (min-width: 1100px) { .yh-nav { display: flex; } } .yh-nav a { padding: 10px 14px; border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--c-dark); transition: background-color .15s, color .15s; white-space: nowrap; } .yh-nav a:hover { background: rgba(47, 95, 30, .08); color: var(--c-green); } .yh-nav a.is-active { background: var(--c-ink); color: var(--c-on-ink); } /* Hamburger — виден только до 1100px (где скрыт yh-nav) */ .yh-burger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; margin-left: 8px; background: var(--c-bg-alt); border: 1px solid rgba(0,0,0,.08); border-radius: 50%; color: var(--c-dark); cursor: pointer; transition: background-color .15s, transform .1s; touch-action: manipulation; } .yh-burger:hover { background: var(--c-green); color: white; } .yh-burger:active { transform: scale(.95); } @media (min-width: 1100px) { .yh-burger { display: none; } } /* Drawer слайд-меню */ .yh-drawer-backdrop { position: fixed; inset: 0; background: rgba(15,25,15,.55); backdrop-filter: blur(6px); z-index: 1099; opacity: 0; transition: opacity .25s ease; } .yh-drawer-backdrop.is-open { opacity: 1; } .yh-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(86vw, 380px); background: var(--c-bg-alt); z-index: 1100; box-shadow: -20px 0 50px rgba(0,0,0,.25); transform: translateX(100%); transition: transform .28s cubic-bezier(.4, 0, .2, 1); display: flex; flex-direction: column; /* safe-area внутри head/nav, чтобы фон drawer-а тянулся под status-bar */ } .yh-drawer.is-open { transform: translateX(0); } .yh-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: calc(env(safe-area-inset-top, 0px) + 22px) 24px 18px; border-bottom: 1px solid var(--c-line, rgba(0,0,0,.06)); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--c-mut, #8a8a7d); } .yh-drawer-head strong { font-weight: 700; } .yh-drawer-close { width: 42px; height: 42px; border: none; background: var(--c-bg, #fff); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--c-dark); touch-action: manipulation; box-shadow: 0 2px 6px rgba(0,0,0,.06); transition: background-color .15s, transform .12s; } .yh-drawer-close:hover { background: var(--c-bg-soft, #f4ede0); } .yh-drawer-close:active { transform: scale(.94); } .yh-drawer-nav { display: flex; flex-direction: column; padding: 14px 14px; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); gap: 1px; overflow-y: auto; } .yh-drawer-section { margin-top: 14px; padding: 0 18px 6px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-mut, #999); font-weight: 600; } .yh-drawer-section:first-child { margin-top: 0; } .yh-drawer-nav a, .yh-drawer-nav-btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; border-radius: 12px; color: var(--c-dark); font-weight: 500; font-size: 16px; letter-spacing: -0.005em; background: transparent; border: none; width: 100%; text-align: left; font-family: inherit; cursor: pointer; transition: background-color .18s, color .18s; touch-action: manipulation; } .yh-drawer-nav a:active, .yh-drawer-nav-btn:active { background: var(--c-bg); } @media (hover: hover) { .yh-drawer-nav a:hover, .yh-drawer-nav-btn:hover { background: var(--c-bg); } } /* Бейджи количества в drawer — справа от пункта */ .yh-drawer-cart-count, .yh-drawer-fav-count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 7px; background: var(--c-berry); color: white; border-radius: 999px; font-size: 12px; font-weight: 800; } .yh-drawer-cart-count.is-empty, .yh-drawer-fav-count.is-empty { display: none; } /* CTA каталога в шапке: заметная, но спокойная пилюля без свечения */ .yh-cta-catalog { display: none; position: relative; align-items: center; gap: 9px; flex-shrink: 0; padding: 10px 18px 10px 15px; background: rgba(47, 95, 30, .08); color: var(--c-dark); border: 1px solid rgba(47, 95, 30, .18); border-radius: 999px; font-weight: 750; font-size: 14px; letter-spacing: 0; line-height: 1; white-space: nowrap; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55); transition: background-color .15s, border-color .15s, color .15s, transform .12s, box-shadow .15s; overflow: hidden; z-index: 2; } @media (min-width: 720px) { .yh-cta-catalog { display: inline-flex; } } .yh-cta-catalog::before, .yh-cta-catalog::after, .yh-cta-pulse { display: none; } .yh-cta-catalog:hover { transform: translateY(-1px); background: var(--c-green); border-color: var(--c-green); color: white; box-shadow: 0 8px 20px rgba(47, 95, 30, .16); } .yh-cta-catalog:active { transform: translateY(0) scale(.98); } .yh-cta-icon, .yh-cta-text { position: relative; z-index: 1; } .yh-cta-icon { flex-shrink: 0; opacity: .86; } @media (max-width: 719px) { .yh-cta-catalog { display: inline-flex; padding: 10px 12px; font-size: 13px; gap: 7px; } .yh-cta-catalog .yh-cta-text { font-size: 13px; } } .yh-actions { display: flex; align-items: center; gap: 10px; } .yh-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--c-bg-alt); border: 1px solid rgba(47,95,30,.12); border-radius: 50%; color: var(--c-dark); transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .12s; position: relative; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .yh-icon-btn:hover { background: var(--c-green); color: white; } .yh-icon-btn:active { transform: scale(.95); } .yh-cart-count { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; background: var(--c-berry); color: white; border-radius: 50%; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; padding: 0 5px; } .yh-cart-count.is-empty { display: none; } /* Кнопка «Кабинет» — отдельно от .yh-actions, заметная */ .yh-account-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 12px; background: var(--c-bg-alt); border: 1px solid rgba(47,95,30,.18); border-radius: 999px; color: var(--c-dark); font-weight: 700; font-size: 14px; line-height: 1; transition: background-color .15s, border-color .15s, color .15s, transform .1s; margin-left: 8px; white-space: nowrap; text-decoration: none; } .yh-account-btn:hover { background: var(--c-green); border-color: var(--c-green); color: white; } .yh-account-btn:active { transform: scale(.97); } .yh-account-btn svg { width: 18px; height: 18px; flex-shrink: 0; } @media (max-width: 768px) { .yh-account-btn .yh-account-text { display: none; } .yh-account-btn { padding: 9px; width: 38px; height: 38px; justify-content: center; gap: 0; margin-left: 6px; } } main { padding-top: 76px; } /* ── PAGE-HEAD (общий блок-шапка под секции) ─────────── */ .ph { padding: 60px 0 40px; } .ph .crumbs { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--c-text-mut); margin-bottom: 16px; } .ph .crumbs a { color: inherit; } .ph .crumbs a:hover { color: var(--c-green); } .ph .crumbs .sep { opacity: .5; } /* ── BUTTONS ────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; border-radius: 999px; font-weight: 700; font-size: 15px; border: 2px solid transparent; transition: transform .12s, background-color .15s, border-color .15s, color .15s; line-height: 1; } .btn:active { transform: scale(.97); } .btn-light { background: var(--c-bg-alt); color: var(--c-text); } .btn-light:hover { background: var(--c-honey); } .btn-dark { background: var(--c-ink); color: var(--c-on-ink); } .btn-dark:hover { background: var(--c-green); color: white; } .btn-outline-dark { background: transparent; color: var(--c-text); border-color: var(--c-line-strong, rgba(0,0,0,.2)); } .btn-outline-dark:hover { background: var(--c-ink); color: var(--c-on-ink); border-color: var(--c-ink); } /* feedback-успех «добавлено в корзину» — зелёный, читаем в обеих темах */ .btn.is-added { background: var(--c-green) !important; color: white !important; } .btn-block { width: 100%; padding: 18px 24px; font-size: 16px; } /* ── PRODUCT CARD (универсальная) ───────────────────────── */ .ps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; } @media (min-width: 768px) { .ps-grid { gap: 20px; } } @media (min-width: 1280px) { .ps-grid { grid-template-columns: repeat(4, 1fr); } } .pcard { background: var(--c-bg-alt); border-radius: 24px; padding: 16px; display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s; position: relative; } .pcard:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(0,0,0,.06); } .pcard a:not(.pcard-slide) { display: contents; color: inherit; } .pcard-img { aspect-ratio: 3 / 4; border-radius: 16px; background: var(--c-bg); margin-bottom: 16px; position: relative; overflow: hidden; } .pcard-img-icon { width: 70%; height: 70%; max-width: 70%; max-height: 70%; object-fit: contain; } /* Фото товара: object-fit: cover. Картинки нормализованы в 3:4, поэтому cover в 3:4 контейнере не обрезает. */ .pcard-img-photo { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--c-bg-alt); } .pcard-img-art { width: 100%; height: 100%; object-fit: contain; display: block; padding: clamp(10px, 2vw, 24px); } /* Карусель фото в карточке: JS-управляемый transform-track. */ .pcard-img.has-slider { background: var(--c-bg-alt); } .pcard-slider { position: absolute; inset: 0; overflow: hidden; touch-action: pan-y; user-select: none; } .pcard-track { display: flex; width: 100%; height: 100%; will-change: transform; } .pcard-slide { flex: 0 0 100%; height: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; color: inherit; -webkit-user-drag: none; } .pcard-slide img { pointer-events: none; } .pcard-imgwrap { position: relative; margin-bottom: 16px; } .pcard-imgwrap .pcard-img { margin-bottom: 0; } .pcard-dots { display: flex; gap: 6px; justify-content: center; margin-top: 8px; } .pcard-dot { width: 8px; height: 8px; padding: 0; border-radius: 50%; border: none; background: rgba(0,0,0,.25); cursor: pointer; transition: background-color .15s, transform .12s; } .pcard-dot:hover { background: rgba(0,0,0,.5); transform: scale(1.2); } .pcard-dot.is-active { background: var(--c-dark); } /* Стрелки prev/next: видны на hover (desktop), на тач-устройствах всегда полупрозрачные */ .pcard-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; background: var(--c-glass); color: var(--c-dark); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 3; opacity: 0; transition: opacity .15s, background-color .15s; box-shadow: 0 2px 8px rgba(0,0,0,.12); padding: 0; } .pcard-arrow-prev { left: 8px; } .pcard-arrow-next { right: 8px; } .pcard:hover .pcard-arrow { opacity: 1; } .pcard-arrow:hover { background: var(--c-green-lt); color: white; transform: translateY(-50%) scale(1.08); box-shadow: 0 8px 18px rgba(106,143,91,.28); } @media (hover: none) { .pcard-arrow { opacity: .85; } } .pcard-badge { position: absolute; top: 12px; left: 12px; background: var(--c-berry); color: white; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .04em; } .pcard-badge.b-new { background: var(--c-green); } .pcard-fav { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; background: var(--c-glass-2); display: flex; align-items: center; justify-content: center; transition: background-color .15s; border: none; cursor: pointer; } .pcard-fav:hover { background: var(--c-berry); color: white; } .pcard-cat { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--c-green); font-weight: 700; margin-bottom: 6px; } .pcard-name { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; margin: 0 0 6px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; min-height: 0; } .pcard-meta { font-size: 12px; color: var(--c-text-mut); margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; } .pcard-price { font-weight: 900; letter-spacing: -0.02em; font-size: 22px; } .pcard-price-old { font-size: 14px; color: var(--c-text-mut); text-decoration: line-through; margin-right: 8px; font-weight: 600; } .pcard-buy { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--c-ink); color: var(--c-on-ink); border: none; border-radius: 50%; transition: background-color .15s, transform .1s; } .pcard-buy:hover { background: var(--c-green); color: white; transform: translateY(-2px) scale(1.06); box-shadow: 0 10px 20px rgba(46,74,58,.24); } .pcard-buy:active { transform: scale(.92); } /* ── CATALOG GRID ────────────────────────────────────────── */ .catalog { padding: 36px 0 100px; } .cat-layout { display: grid; grid-template-columns: 1fr; gap: 32px; } @media (min-width: 1024px) { .cat-layout { grid-template-columns: 240px 1fr; gap: 40px; } } .cat-side { align-self: start; } @media (min-width: 1024px) { .cat-side { position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow-y: auto; padding-right: 6px; } } /* На мобильном — фильтры в bottom-sheet drawer с backdrop. Поверх остального контента, контент за ним не видно. */ @media (max-width: 1023px) { /* Скрываем всё содержимое sidebar, оставляем только триггер-кнопку ::before */ .cat-side > * { display: none; } .cat-side::before { content: '🔍 Фильтры и категории'; display: block; padding: 14px 18px; background: var(--c-bg-alt); border-radius: 14px; font-weight: 700; cursor: pointer; margin-bottom: 12px; text-align: center; touch-action: manipulation; box-shadow: 0 4px 12px rgba(0,0,0,.04); } /* Открытое состояние: cat-side → bottom-sheet, поверх затемнённого фона */ .cat-side.is-open { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 1000; max-height: 80vh; overflow-y: auto; background: var(--c-bg-alt); border-radius: 20px 20px 0 0; padding: 64px 18px 24px; box-shadow: 0 -16px 40px rgba(0,0,0,.18); animation: catSheetIn .25s cubic-bezier(.4, 0, .2, 1); } /* Внутри open-state — показываем фильтры обратно */ .cat-side.is-open > * { display: revert; } /* Триггер становится плашкой-закрытие (фиксирована на верху sheet) */ .cat-side.is-open::before { content: '✕ Скрыть фильтры'; position: sticky; top: -64px; margin: -64px -18px 14px; z-index: 5; background: var(--c-dark); color: white; border-radius: 20px 20px 0 0; padding-top: max(14px, env(safe-area-inset-top)); } /* Затемнение фона — body:has — все современные браузеры от 2023 года */ body:has(.cat-side.is-open) { overflow: hidden; } body:has(.cat-side.is-open)::before { content: ''; position: fixed; inset: 0; z-index: 999; background: rgba(0,0,0,.45); backdrop-filter: blur(4px); animation: catSideBackdrop .2s ease; pointer-events: none; /* клик уйдёт на sheet/script для закрытия */ } @keyframes catSheetIn { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes catSideBackdrop { from { opacity: 0; } to { opacity: 1; } } } .cat-side h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--c-text-mut); margin: 0 0 12px; } .cat-side ul { list-style: none; padding: 0; margin: 0 0 28px; } .cat-side li a { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: 12px; font-weight: 600; transition: background-color .15s; } .cat-side li a:hover { background: var(--c-bg-alt); } .cat-side li a.is-active { background: var(--c-ink); color: var(--c-on-ink); } .cat-side li a .cnt { font-size: 12px; color: var(--c-text-mut); font-weight: 500; } .cat-side li a.is-active .cnt { color: rgba(255,255,255,.6); } .cat-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .cat-toolbar select { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--c-line); background: var(--c-bg-alt); font-weight: 600; } .cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; } @media (min-width: 768px) { .cat-grid { gap: 20px; } } @media (min-width: 1280px) { .cat-grid { grid-template-columns: repeat(4, 1fr); } } .empty { padding: 60px 24px; text-align: center; color: var(--c-text-mut); } /* ── PRODUCT PAGE ────────────────────────────────────────── */ .prod { padding: 20px 0 100px; } .prod-grid { display: grid; grid-template-columns: 1fr; gap: 40px; } @media (min-width: 1024px) { .prod-grid { grid-template-columns: 1fr 1fr; gap: 64px; } } .prod-gallery { background: var(--c-bg-alt); border-radius: 24px; padding: 60px; display: flex; flex-direction: column; align-items: stretch; gap: 16px; } .prod-gallery > img:not(.prod-photo) { width: 70%; height: 70%; object-fit: contain; align-self: center; aspect-ratio: 1 / 1; } .prod-gallery .prod-photo { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--c-bg-alt); border-radius: 16px; } .prod-thumbs { display: flex; gap: 10px; flex-wrap: wrap; } .prod-thumb { width: 64px; height: 64px; padding: 0; border-radius: 10px; overflow: hidden; border: 2px solid transparent; background: var(--c-bg); cursor: pointer; transition: .15s; } .prod-thumb:hover { border-color: var(--c-text-mut); } .prod-thumb.is-active { border-color: var(--c-dark); } .prod-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .prod-info .prod-cat { color: var(--c-green); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 14px; } .prod-info h1 { font-size: clamp(32px, 4vw, 56px); font-weight: 800; letter-spacing: -0.025em; line-height: 1; margin: 0 0 16px; } .prod-info .prod-short { font-size: 17px; line-height: 1.5; color: var(--c-text-mut); margin: 0 0 24px; } .prod-info .prod-price-row { display: flex; align-items: baseline; gap: 14px; margin: 24px 0; } .prod-info .prod-price { font-size: 40px; font-weight: 900; letter-spacing: -0.02em; } .prod-info .prod-price-old { font-size: 22px; text-decoration: line-through; color: var(--c-text-mut); } .prod-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0; padding: 24px 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); } .prod-meta dt { font-size: 12px; color: var(--c-text-mut); text-transform: uppercase; letter-spacing: .1em; margin: 0 0 4px; font-weight: 600; } .prod-meta dd { margin: 0; font-weight: 600; } .prod-buy-row { display: flex; gap: 12px; align-items: stretch; margin: 24px 0; } .qty-stepper { display: inline-flex; align-items: center; border: 2px solid var(--c-line); border-radius: 999px; overflow: hidden; } .qty-stepper button { width: 44px; height: 52px; background: transparent; border: none; font-size: 22px; color: var(--c-dark); } .qty-stepper button:hover { background: var(--c-bg); } .qty-stepper input { width: 50px; height: 52px; border: none; text-align: center; font-weight: 800; font-size: 17px; background: transparent; outline: none; } /* ── CART PAGE ───────────────────────────────────────────── */ .cart { padding: 40px 0 100px; } .cart-grid { display: grid; grid-template-columns: 1fr; gap: 32px; } @media (min-width: 1024px) { .cart-grid { grid-template-columns: 1fr 380px; gap: 40px; } } .cart-list { display: flex; flex-direction: column; gap: 12px; } .cart-row { display: grid; grid-template-columns: 80px 1fr auto; gap: 16px; align-items: center; padding: 16px; background: var(--c-bg-alt); border-radius: 16px; } @media (min-width: 640px) { .cart-row { grid-template-columns: 100px 1fr 140px auto auto; } } .cart-row-img { width: 80px; height: 80px; border-radius: 12px; background: var(--c-bg); display: flex; align-items: center; justify-content: center; overflow: hidden; } .cart-row-img img { width: 70%; height: 70%; object-fit: contain; } .cart-row-img.is-photo img { width: 100%; height: 100%; object-fit: cover; } .cart-row-name { font-weight: 800; font-size: 16px; line-height: 1.2; } .cart-row-cat { color: var(--c-text-mut); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; margin-top: 4px; } .cart-row-price { font-weight: 800; font-size: 17px; white-space: nowrap; } .cart-row-del { background: transparent; border: none; color: var(--c-text-mut); padding: 8px; transition: color .15s; } .cart-row-del:hover { color: var(--c-berry); } .cart-summary { background: var(--c-ink); color: var(--c-on-ink); padding: 32px; border-radius: 24px; align-self: start; position: sticky; top: 92px; } .cart-summary h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 24px; } .cart-summary .row { display: flex; justify-content: space-between; padding: 10px 0; font-size: 15px; } .cart-summary .row.total { border-top: 1px solid rgba(255,255,255,.15); margin-top: 10px; padding-top: 18px; font-size: 22px; font-weight: 800; } .cart-summary .row .lab { color: rgba(255,255,255,.7); } /* ── CHECKOUT ────────────────────────────────────────────── */ .chk { padding: 40px 0 100px; } .chk-grid { display: grid; grid-template-columns: 1fr; gap: 32px; } @media (min-width: 1024px) { .chk-grid { grid-template-columns: 1fr 380px; gap: 40px; } } .chk-form { background: var(--c-bg-alt); border-radius: 24px; padding: 32px; } .chk-form fieldset { border: none; padding: 0 0 24px; margin: 0 0 24px; border-bottom: 1px solid var(--c-line); } .chk-form fieldset:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .chk-form legend { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; padding: 0 0 14px; } .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .field label { font-size: 13px; font-weight: 600; color: var(--c-text-mut); } .field input, .field textarea, .field select { padding: 14px 16px; border: 1px solid var(--c-line); border-radius: 12px; font-size: 15px; background: var(--c-bg); outline: none; transition: border-color .15s, background-color .15s; } .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--c-text); background: var(--c-bg-alt); } .field-row { display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } } .deliv-options { display: grid; grid-template-columns: 1fr; gap: 10px; } @media (min-width: 640px) { .deliv-options { grid-template-columns: 1fr 1fr; } } .deliv-opt { display: flex; gap: 12px; padding: 14px 16px; border: 2px solid var(--c-line); border-radius: 12px; cursor: pointer; transition: border-color .15s, background-color .15s; } .deliv-opt input { margin-top: 4px; } .deliv-opt:hover { border-color: var(--c-green); } .deliv-opt:has(input:checked) { border-color: var(--c-dark); background: var(--c-bg); } .deliv-opt-text { display: flex; flex-direction: column; gap: 4px; } .deliv-opt-name { font-weight: 700; } .deliv-opt-meta { font-size: 12px; color: var(--c-text-mut); } /* ── FOOTER ─────────────────────────────────────────────── */ footer { background: var(--c-dark); color: rgba(255,255,255,.7); padding: 60px 0 24px; } .ft-top { display: grid; grid-template-columns: 1fr; gap: 32px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.1); } @media (min-width: 640px) { .ft-top { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .ft-top { grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; } } .ft-brand .ft-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .ft-brand .ft-logo img { height: 44px; width: 44px; border-radius: 50%; } .ft-brand .ft-logo span { font-weight: 900; font-size: 22px; color: white; letter-spacing: -0.03em; } .ft-brand p { font-size: 14px; line-height: 1.6; max-width: 360px; margin: 0 0 16px; } .ft-socials { display: flex; gap: 10px; } .ft-socials a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center; transition: background-color .15s; color: white; } .ft-socials a:hover { background: var(--c-honey); color: var(--c-dark); } .ft-col h4 { color: white; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; margin: 0 0 16px; } .ft-col a { display: block; padding: 6px 0; color: rgba(255,255,255,.6); font-size: 14px; transition: color .15s; } .ft-col a:hover { color: var(--c-honey); } .ft-bottom { padding-top: 24px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; font-size: 13px; color: rgba(255,255,255,.5); } /* ════════════════════════════════════════════════════════════════════════════ * MOBILE PASS (≤ 720px) — переопределения для узких экранов. * Цель: компактная шапка, hero не на 2 экрана, нормальные сетки карточек, * читаемые отступы, чтобы фото товаров реально были видны. * ════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 720px) { /* — Глобальные базовые — */ .wrap { padding-inline: 16px; } /* overflow-x: clip, а НЕ hidden: hidden делает body скролл-контейнером, и в iOS Safari ломается свайп у вложенных горизонтальных лент (бренды, категории). */ body { overflow-x: clip; } /* — Шапка — */ .yh-inner { gap: 8px; padding: 10px 0; } .yh-logo img { height: 32px; width: 32px; } .yh-logo .yh-brand { font-size: 15px; } .yh-spacer { min-width: 0; } .yh-cta-catalog { padding: 8px 12px; font-size: 12px; gap: 6px; } .yh-cta-catalog .yh-cta-text { display: none; } /* только иконка-сумка на мобиле */ .yh-cta-catalog { padding: 9px 11px; } /* квадратная иконка */ .yh-cta-pulse { inset: -10px; filter: blur(10px); opacity: .5; } .yh-right { gap: 6px; } .yh-actions { gap: 6px; } .yh-icon-btn { width: 38px; height: 38px; } .yh-icon-btn svg { width: 18px; height: 18px; } .yh-cart-count, .yh-fav-count { min-width: 16px; height: 16px; font-size: 10px; } /* — Hero (bhero) — */ .bhero { height: 100vh; min-height: 600px; } /* было 160vh */ .bhero-stage { min-height: 0; height: 100vh; } .bhero-text h1 { font-size: clamp(42px, 13vw, 80px) !important; } .bhero-text .subhead { font-size: 15px; margin-bottom: 24px; padding: 0 8px; } .bhero-actions { gap: 10px; } .bhero-decor-1 { top: -2%; right: -16%; width: 200px; height: 200px; opacity: .55; } .bhero-decor-2 { bottom: -10%; left: -22%; width: 180px; height: 180px; opacity: .45; } .bhero-promo-card { transform: scale(.85); transform-origin: center top; } /* — Hero slider — */ .hero-slider { height: auto; min-height: 480px; max-height: none; } .hero-slide { padding: 56px 16px 88px; } /* место под точки/стрелки снизу */ .hero-slide h1 { font-size: clamp(28px, 8vw, 44px); } .hero-slide p { font-size: 14px; margin-bottom: 24px; } .hero-slide-actions .btn { padding: 12px 20px; font-size: 14px; } .hero-nav { padding: 0 16px; bottom: 20px; } .hero-arrow { width: 40px; height: 40px; } .hero-dot { width: 24px; } .hero-dot.is-active { width: 40px; } /* — Категории — */ .cats { padding: 60px 0; } .cats-head { margin-bottom: 28px; gap: 12px; } .cats-head .btn { padding: 10px 18px; font-size: 13px; } .cats-grid { gap: 10px; } .cat-tile { padding: 16px; aspect-ratio: 1 / 1.1; border-radius: 18px; } .cat-tile-name { font-size: 16px; } .cat-tile-count { font-size: 11px; } .cat-tile-art { width: 64px; height: 64px; right: 8px; bottom: 8px; } .cat-tile-arrow { width: 28px; height: 28px; top: 12px; right: 12px; } /* — Секции (.ps) и карточки товаров — */ .ps { padding: 56px 0; } .ps-head { margin-bottom: 24px; gap: 12px; } .ps-head .btn { padding: 10px 18px; font-size: 13px; } .ps-grid { gap: 10px; } .pcard { padding: 10px; border-radius: 18px; } .pcard-img { margin-bottom: 12px; border-radius: 12px; } .pcard-cat { font-size: 10px; letter-spacing: .1em; margin-bottom: 4px; } .pcard-name { font-size: 14px; line-height: 1.2; min-height: 34px; margin-bottom: 4px; } .pcard-meta { font-size: 11px; margin-bottom: 10px; } .pcard-price { font-size: 18px; } .pcard-price-old { font-size: 12px; margin-right: 6px; } .pcard-buy { width: 38px; height: 38px; } .pcard-buy svg { width: 16px; height: 16px; } .pcard-badge { top: 8px; left: 8px; padding: 4px 8px; font-size: 10px; } .pcard-fav { top: 8px; right: 8px; width: 30px; height: 30px; } .pcard-fav svg { width: 14px; height: 14px; } .pcard-compare { top: 44px; right: 8px; width: 30px; height: 30px; } .pcard-compare svg { width: 14px; height: 14px; } /* — Banner / Info / Reviews / News / Sub — */ .banner-inner { padding: 64px 16px; } .info { padding: 56px 0; } .info-tile { padding: 22px; border-radius: 18px; } .info-tile-icon { width: 44px; height: 44px; margin-bottom: 14px; } .info-tile h3 { font-size: 18px; } .rev { padding: 56px 0; } .rev-card { padding: 22px; border-radius: 18px; } .rev-text { font-size: 15px; margin-bottom: 18px; } .nws { padding: 56px 0; } .nws-card { border-radius: 18px; } .nws-card-body { padding: 18px; } .nws-card-title { font-size: 17px; } section.sub { padding: 56px 0; } .sub-form input { min-width: 0; width: 100%; padding: 14px 18px; font-size: 14px; } .sub-form .btn { width: 100%; } /* — Footer — */ footer { padding: 44px 0 20px; } .ft-top { gap: 28px; padding-bottom: 28px; } .ft-brand .ft-logo img { height: 40px; width: 40px; } .ft-brand .ft-logo span { font-size: 20px; } .ft-bottom { font-size: 12px; } /* — Product detail — */ .prod-gallery { padding: 24px; } .prod-gallery .prod-photo { border-radius: 12px; } .prod-thumb { width: 52px; height: 52px; } .prod-info h1 { font-size: clamp(24px, 7vw, 36px); } .prod-info .prod-price { font-size: 28px; } } /* Микро-мобилка (iPhone SE / 320-360px) — ещё компактнее */ @media (max-width: 380px) { .yh-logo .yh-brand { display: none; } /* оставляем только круглый аватар-лого */ .pcard-name { font-size: 13px; min-height: 30px; } .pcard-price { font-size: 16px; } } /* CODEX BRAND REDESIGN START */ /* === ZOZHZH brand redesign layer (server) === */ :root { --c-bg: #F2EFE6; --c-bg-alt: #FFFCF4; --c-surface: #FFFCF4; --c-surface-2: #E7D9C1; --c-dark: #2E4A3A; --c-green: #2E4A3A; --c-green-lt: #6A8F5B; --c-green-fresh: #9BAA6A; --c-honey: #DBA859; --c-honey-2: #B98236; --c-berry: #C984A6; --c-berry-2: #A95F83; --c-blueberry: #58646F; --c-text: #24372D; --c-text-mut: #6F756A; --c-line: rgba(46,74,58,.16); --c-line-strong: rgba(46,74,58,.28); } body { color: var(--c-text); background: radial-gradient(900px 520px at 8% -8%, rgba(219,168,89,.18), transparent 62%), radial-gradient(780px 520px at 100% 8%, rgba(106,143,91,.14), transparent 58%), linear-gradient(180deg, #F7F2E8 0%, var(--c-bg) 42%, #EFE7D7 100%); } ::selection { background: rgba(219,168,89,.28); color: var(--c-dark); } a { -webkit-tap-highlight-color: rgba(219,168,89,.20); } .btn, button.btn, .pcard-buy, .cart-checkout, .checkout-submit, .btn-honey, .btn-primary, .hero-cta .btn, section.sub button, .sub-form button, .nws-more, .cat-cta, .prod-buy, .qty button { border-radius: 10px; } .btn-primary, .btn-honey, .pcard-buy, .cart-checkout, .checkout-submit, .prod-buy, section.sub button, .sub-form button, button[type="submit"]:not(.ce-ui button):not(.sb-item):not(.sb-link) { background: linear-gradient(180deg, var(--c-honey) 0%, var(--c-honey-2) 100%) !important; color: #2B1A08 !important; border-color: rgba(92,61,20,.14) !important; box-shadow: 0 10px 24px rgba(185,130,54,.22), inset 0 1px 0 rgba(255,255,255,.28) !important; } .btn-dark, .btn-outline-dark:hover, .cat-side a.active, .filter-chip.active { background: var(--c-dark) !important; color: #FFF8EA !important; border-color: var(--c-dark) !important; } .btn-outline, .btn-outline-dark, .btn-ghost, .filter-chip, .cat-side a { color: var(--c-dark) !important; border-color: var(--c-line-strong) !important; } /* CODEX LIVE BUTTONS — единый «живой» ховер для всех кнопок сайта. Раньше базовые кнопки на ховере только меняли цвет (а submit-кнопки с медовым !important-градиентом не реагировали вовсе). Теперь у всех — подъём + тень + лёгкая яркость, единым стилем. transform/filter ничем не перебиты; тень — с !important, чтобы усилить статичную тень primary-кнопок. */ .btn { transition: transform .16s ease, box-shadow .16s ease, background-color .15s, border-color .15s, color .15s, filter .15s; will-change: transform; } .btn:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(46,74,58,.20) !important; filter: brightness(1.03); } .btn:active { transform: translateY(0) scale(.98); box-shadow: 0 6px 14px rgba(46,74,58,.18) !important; } input, select, textarea { background: rgba(255,252,244,.86); border-color: var(--c-line-strong); color: var(--c-text); } input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus { border-color: var(--c-green-lt) !important; box-shadow: 0 0 0 3px rgba(106,143,91,.18) !important; } /* Брендовый цвет нативных контролов (чекбоксы/радио/range) — в палитре нет синего, убираем дефолтную браузерную синюю «галку»/заливку. */ html { accent-color: #2E4A3A; } input[type="checkbox"], input[type="radio"] { accent-color: #2E4A3A; } /* Убираем «рамку»-обводку при выборе радио/чекбокса мышью (на checkout и фильтрах каталога); для навигации с клавиатуры оставляем аккуратную брендовую обводку. */ input[type="checkbox"]:focus, input[type="radio"]:focus { outline: none; box-shadow: none !important; } input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--c-green-lt); outline-offset: 2px; } /* СЛУЖЕБНЫЕ СТРАНИЦЫ (404 / 500 / order-success) — единый вид: тёплая карточка на общем фоне сайта + зелёный бейдж/номер + брендовые кнопки. */ .techp { min-height: calc(100vh - 64px); display: flex; align-items: center; justify-content: center; padding: 60px 20px; } .techp-card { width: 100%; max-width: 560px; text-align: center; padding: clamp(40px, 6vw, 64px) clamp(24px, 5vw, 48px); background: linear-gradient(180deg, #FFFFFF 0%, #F6F1E4 100%); border: 1px solid rgba(46,74,58,.10); border-radius: 24px; box-shadow: 0 24px 60px rgba(46,74,58,.12), inset 0 1px 0 rgba(255,255,255,.7); } .techp-code { font-family: 'Onest', system-ui, sans-serif; font-size: clamp(80px, 16vw, 150px); line-height: 1; font-weight: 900; letter-spacing: -0.04em; background: linear-gradient(135deg, #2f5f1e 0%, #DBA859 100%); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0 0 6px; } .techp-badge { width: 84px; height: 84px; border-radius: 50%; background: linear-gradient(145deg, #17351f, #2f5f1e 70%, #20372A); color: #FFF8EA; display: flex; align-items: center; justify-content: center; margin: 0 auto 22px; box-shadow: 0 14px 30px rgba(46,74,58,.22); } .techp-badge svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .techp-title { font-family: 'Onest', system-ui, sans-serif; font-size: clamp(24px, 3.6vw, 34px); font-weight: 800; color: #1C3528; letter-spacing: -0.02em; margin: 0 0 14px; } .techp-text { font-size: 16px; line-height: 1.6; color: var(--c-text-mut); margin: 0 0 32px; } .techp-num { font-family: 'Onest', system-ui, sans-serif; font-size: 32px; font-weight: 900; letter-spacing: -0.02em; color: #1C3528; margin: 0 0 24px; } .techp-info { margin: 24px 0; padding: 22px 0; border-top: 1px solid rgba(46,74,58,.12); border-bottom: 1px solid rgba(46,74,58,.12); text-align: left; } .techp-info > div { display: flex; justify-content: space-between; padding: 8px 0; } .techp-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* loyalty / gift-cert hero — светлые, как «О фабрике», «Доставка», «Контакты» и блог (общая концепция светлых шапок, см. ниже «КОНЦЕПЦИЯ: светлые хиро»). Раньше тут был отдельный тёмно-зелёный стандарт — он выбивался из сайта. */ .gc-hero, .ly-hero { position: relative; overflow: hidden; background: radial-gradient(circle at 82% 18%, rgba(219,168,89,.16), transparent 46%), linear-gradient(135deg, #FBF7EC 0%, #F3EEDF 60%, #EDE6D3 100%) !important; color: #2E4A3A !important; } .gc-hero::before, .ly-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: transparent !important; background-color: #2E4A3A !important; -webkit-mask-image: var(--bl-pat-scatter); mask-image: var(--bl-pat-scatter); -webkit-mask-repeat: repeat; mask-repeat: repeat; -webkit-mask-size: 240px 240px; mask-size: 240px 240px; opacity: .06; } .gc-hero .wrap, .ly-hero .wrap { position: relative; z-index: 1; } .gc-hero h1, .ly-hero h1 { font-family: 'Onest', system-ui, sans-serif !important; color: #2E4A3A !important; } .gc-hero p, .ly-hero p, .ly-hero .lead { color: rgba(46,74,58,.78) !important; } .gc-hero .eyebrow, .ly-hero .eyebrow { display: inline-flex; align-items: center; width: fit-content; margin-bottom: 14px; padding: 7px 12px; border-radius: 999px; background: rgba(219,168,89,.20) !important; border: 1px solid rgba(158,104,10,.34) !important; color: #8A5A08 !important; font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; } .ly-hero .big-num strong { color: #9A6A1E !important; } .ly-hero .big-num span { color: rgba(46,74,58,.72) !important; } .pcard, .nws-card, .rev-card, .bl-card, .ct-card, .dl-method, .val-card, .info-tile, .ab-tl-item, .deliv-opt, .cart-summary, .cart-item, .checkout-card, .prod-info, .prod-gallery, .cat-side, .surface, .modal, table { background: rgba(255,252,244,.92) !important; border-color: var(--c-line) !important; box-shadow: 0 18px 46px rgba(46,74,58,.08) !important; } /* .prod-info без своего padding/radius в базовом yammi.css — фон CODEX-слоя * показывался прямоугольником без обводки, и описание визуально вываливалось * за карточку. Делаем карточкой как .prod-gallery. */ .prod-info { padding: 36px 32px !important; border-radius: 24px !important; } @media (max-width: 720px) { .prod-info { padding: 24px 20px !important; border-radius: 18px !important; } } .pcard:hover, .nws-card:hover, .bl-card:hover, .cat-tile:hover, .dl-method:hover { box-shadow: 0 24px 60px rgba(46,74,58,.13) !important; } .pcard-badge, .badge, .ord-status, .cat-tag, .eyebrow, .nws-card-cat, .bl-card-cat { background: rgba(106,143,91,.14) !important; color: var(--c-dark) !important; border-color: rgba(106,143,91,.22) !important; } .pcard-badge.sale, .badge.sale, .discount-badge, .promo-badge { background: rgba(201,132,166,.18) !important; color: var(--c-berry-2) !important; } .header, .yh-header, .site-header, .topbar, .nav, footer, .footer { border-color: var(--c-line) !important; } .yh-account-btn, .yh-icon-btn, .cart-btn, .fav-btn, .search-btn { background: rgba(255,252,244,.76) !important; border-color: var(--c-line) !important; color: var(--c-dark) !important; } .yh .yh-icon-btn:hover, .yh .yh-account-btn:hover { background: var(--c-green) !important; border-color: var(--c-green) !important; color: white !important; box-shadow: 0 8px 20px rgba(47, 95, 30, .16); transform: translateY(-1px); } .ph, .about-hero, .ab-numbers, .dl-hero, .ct-hero, .bl-hero { background: linear-gradient(135deg, #2E4A3A 0%, #476B4F 100%) !important; color: #FFF8EA !important; } .ab-cta, section.sub, .banner-inner { background: linear-gradient(135deg, #DBA859 0%, #E7D9C1 100%) !important; color: #2E4A3A !important; } hr, .line { border-color: var(--c-line) !important; } /* CODEX BRAND REDESIGN END */ /* CODEX SITEWIDE CONTRAST FIX */ .ph, .about-hero, .dl-hero, .ct-hero, .bl-hero { color: #FFF8EA !important; } .ph .crumbs, .ph .crumbs a, .ph .text-mut, .ph p, .about-hero .text-mut, .about-hero p, .dl-hero .text-mut, .dl-hero p, .ct-hero .text-mut, .ct-hero p, .bl-hero .crumbs, .bl-hero .crumbs a, .bl-hero .text-mut, .bl-hero p { color: rgba(255,248,234,.84) !important; } .ph .display-l, .ph .display-m, .ph h1, .ph h2, .about-hero h1, .about-hero h2, .dl-hero h1, .dl-hero h2, .ct-hero h1, .ct-hero h2, .bl-hero h1, .bl-hero h2 { color: #FFF8EA !important; } .ph .eyebrow, .about-hero .eyebrow, .dl-hero .eyebrow, .ct-hero .eyebrow, .bl-hero .eyebrow { background: rgba(231,217,193,.14) !important; border: 1px solid rgba(231,217,193,.18) !important; color: #E7D9C1 !important; display: inline-flex; width: fit-content; padding: 5px 10px; border-radius: 999px; } .ph .crumbs .sep, .ph .crumbs span, .dl-hero .crumbs span, .ct-hero .crumbs span, .bl-hero .crumbs span { color: rgba(255,248,234,.62) !important; } .page-head .sub, .dl-tracker .sub, .legal .sub, .kpi .sub, .st-section > .sub { background: transparent !important; box-shadow: none !important; } section.sub p, section.sub h2 { color: inherit !important; } /* CODEX CATALOG FILTER FIX */ .cat-side { background: rgba(255,252,244,.92) !important; border: 1px solid var(--c-line) !important; border-radius: 16px !important; padding: 22px 18px !important; box-shadow: 0 18px 46px rgba(46,74,58,.08) !important; overflow: hidden; } @media (min-width: 1024px) { .cat-layout { grid-template-columns: minmax(280px, 300px) 1fr; gap: 36px; } .cat-side { padding: 22px 18px !important; overflow-y: auto; } } @media (max-width: 720px) { .cat-side { padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .cat-side.is-open { padding: 72px 22px 28px !important; background: var(--c-bg-alt) !important; border-radius: 24px 24px 0 0 !important; } } .cat-side h4 { padding: 0 4px; margin: 0 0 12px; color: #77756B; } .cat-side ul { margin-left: 0; margin-right: 0; } .cat-side li a, .cat-side a { min-height: 42px; gap: 10px; color: var(--c-dark) !important; } .cat-side li a.is-active, .cat-side li a.active, .cat-side a.is-active, .cat-side a.active { background: var(--c-dark) !important; color: #FFF8EA !important; box-shadow: inset 0 0 0 1px rgba(255,248,234,.12); } .cat-side li a.is-active *, .cat-side li a.active *, .cat-side a.is-active *, .cat-side a.active * { color: #FFF8EA !important; } .cat-side input[type="number"] { background: rgba(255,252,244,.95) !important; color: var(--c-text) !important; border-color: var(--c-line-strong) !important; } /* CODEX HOME PREMIUM PASS START */ body[data-page-source="index.html"] { --home-cream: #FFF8EA; --home-paper: #F7F1E5; --home-sage: #6A8F5B; --home-forest: #2E4A3A; --home-straw: #E7D9C1; --home-honey: #DBA859; --home-berry: #C984A6; --home-ink: #21392C; background: var(--home-cream); } body[data-page-source="index.html"] .cats, body[data-page-source="index.html"] .ps.bg-light, body[data-page-source="index.html"] .info, body[data-page-source="index.html"] .nws { background: radial-gradient(circle at 10% 12%, rgba(219,168,89,.16), transparent 28%), radial-gradient(circle at 88% 10%, rgba(201,132,166,.12), transparent 30%), linear-gradient(180deg, #FFF8EA 0%, #F4EBDD 100%) !important; } body[data-page-source="index.html"] .cats, body[data-page-source="index.html"] .ps, body[data-page-source="index.html"] .info, body[data-page-source="index.html"] .rev, body[data-page-source="index.html"] .nws, body[data-page-source="index.html"] section.sub { position: relative; overflow: hidden; } body[data-page-source="index.html"] .cats::before, body[data-page-source="index.html"] .ps.bg-light::before, body[data-page-source="index.html"] .nws::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(46,74,58,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(46,74,58,.035) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%); } body[data-page-source="index.html"] .wrap { position: relative; z-index: 1; } body[data-page-source="index.html"] .cats-head, body[data-page-source="index.html"] .ps-head { align-items: flex-end; margin-bottom: clamp(28px, 4vw, 56px) !important; } body[data-page-source="index.html"] .cats-head .display-l, body[data-page-source="index.html"] .ps-head .display-l { color: var(--home-ink); letter-spacing: -.045em; max-width: 920px; } body[data-page-source="index.html"] .eyebrow { background: rgba(231,217,193,.58); border: 1px solid rgba(46,74,58,.11); color: #5E6F46; box-shadow: 0 8px 20px rgba(46,74,58,.045); } body[data-page-source="index.html"] .cat-tile { isolation: isolate; background: linear-gradient(145deg, rgba(255,252,244,.88), rgba(231,217,193,.68)) !important; border: 1px solid rgba(46,74,58,.10); box-shadow: 0 22px 52px rgba(46,74,58,.10), inset 0 1px 0 rgba(255,255,255,.82); } body[data-page-source="index.html"] .cat-tile::before { content: ""; position: absolute; right: -34%; bottom: -34%; width: 86%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.88) 0 18%, rgba(219,168,89,.32) 19% 47%, rgba(106,143,91,.18) 48% 70%, transparent 71%); z-index: -1; } body[data-page-source="index.html"] .cat-tile.t-konfety { background: linear-gradient(145deg, #FFF8EA, #E7D9C1) !important; } body[data-page-source="index.html"] .cat-tile.t-sherbety { background: linear-gradient(145deg, #FFF8EA, #EBCEDB) !important; } body[data-page-source="index.html"] .cat-tile.t-kozinaki { background: linear-gradient(145deg, #FBF4E3, #DDE5C9) !important; } body[data-page-source="index.html"] .cat-tile.t-kolbaski { background: linear-gradient(145deg, #F8EDD9, #E0C194) !important; } body[data-page-source="index.html"] .cat-tile.t-smesi { background: linear-gradient(145deg, #F4F2E2, #C9D8BC) !important; } body[data-page-source="index.html"] .cat-tile.t-slaysy { background: linear-gradient(145deg, #FFF3D8, #DBA859) !important; } body[data-page-source="index.html"] .cat-tile-art { filter: drop-shadow(0 18px 18px rgba(46,74,58,.20)); } body[data-page-source="index.html"] .cat-tile:hover .cat-tile-art img { transform: translateY(-6px) scale(1.09) rotate(-2deg); } body[data-page-source="index.html"] .cat-tile-name { color: var(--home-forest); } body[data-page-source="index.html"] .cat-tile-count { color: rgba(33,57,44,.68); } body[data-page-source="index.html"] .cat-tile-arrow { background: rgba(255,248,234,.72); box-shadow: inset 0 0 0 1px rgba(46,74,58,.08); } body[data-page-source="index.html"] .ps-grid { gap: clamp(16px, 2vw, 28px) !important; } body[data-page-source="index.html"] .ps-grid:empty { min-height: 360px; border-radius: 28px; background: linear-gradient(135deg, rgba(255,252,244,.54), rgba(231,217,193,.38)); border: 1px dashed rgba(46,74,58,.16); } body[data-page-source="index.html"] .pcard { border: 1px solid rgba(46,74,58,.10); background: rgba(255,252,244,.88) !important; box-shadow: 0 20px 54px rgba(46,74,58,.11), inset 0 1px 0 rgba(255,255,255,.78); } body[data-page-source="index.html"] .pcard-img { background: radial-gradient(circle at 50% 36%, #FFFFFF 0 27%, #F3E5CF 28% 62%, #E7D9C1 63% 100%) !important; border: 1px solid rgba(46,74,58,.08); box-shadow: inset 0 -18px 42px rgba(46,74,58,.06); } body[data-page-source="index.html"] .pcard-img img, body[data-page-source="index.html"] img.pcard-img-icon { filter: drop-shadow(0 20px 20px rgba(46,74,58,.18)); } body[data-page-source="index.html"] .ps.bg-dark { background: radial-gradient(circle at 88% 18%, rgba(219,168,89,.22), transparent 30%), linear-gradient(135deg, #2E4A3A 0%, #15251D 100%) !important; color: #FFF8EA; } body[data-page-source="index.html"] .ps.bg-dark .pcard { background: rgba(255,248,234,.10) !important; border-color: rgba(255,248,234,.14); box-shadow: 0 26px 58px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08); color: #FFF8EA; } body[data-page-source="index.html"] .ps.bg-dark .pcard-img { background: radial-gradient(circle at 50% 36%, rgba(255,248,234,.92), rgba(231,217,193,.42) 58%, rgba(21,37,29,.5)) !important; } body[data-page-source="index.html"] .banner { background: radial-gradient(circle at 22% 16%, rgba(219,168,89,.20), transparent 46%), linear-gradient(135deg, #FBF7EC 0%, #F4EFE1 58%, #EFE8D6 100%) !important; } body[data-page-source="index.html"] .banner-inner { padding-block: clamp(76px, 9vw, 132px) !important; } body[data-page-source="index.html"] .banner h2 { color: #2E4A3A; text-wrap: balance; } body[data-page-source="index.html"] .banner p { color: rgba(46,74,58,.80); } body[data-page-source="index.html"] .info-grid { gap: clamp(16px, 2vw, 26px) !important; align-items: stretch; } body[data-page-source="index.html"] .info-tile { position: relative; overflow: hidden; min-height: 206px; padding: 30px 28px 28px !important; border-radius: 28px !important; display: flex; flex-direction: column; justify-content: center; background: radial-gradient(circle at 92% 12%, rgba(219,168,89,.18), transparent 0 28%, transparent 29%), radial-gradient(circle at 108% 112%, rgba(106,143,91,.16), transparent 0 34%, transparent 35%), linear-gradient(90deg, rgba(46,74,58,.035) 1px, transparent 1px), linear-gradient(0deg, rgba(46,74,58,.035) 1px, transparent 1px), linear-gradient(145deg, rgba(255,252,244,.97), rgba(247,241,229,.84)) !important; background-size: auto, auto, 34px 34px, 34px 34px, auto; border: 1px solid rgba(46,74,58,.11); box-shadow: 0 22px 54px rgba(46,74,58,.10), inset 0 1px 0 rgba(255,255,255,.82); } body[data-page-source="index.html"] .info-tile::before { content: ""; position: absolute; top: 24px; left: 28px; width: 82px; height: 10px; border-radius: 999px; background: linear-gradient(90deg, #21392C 0 44%, #DBA859 44% 68%, rgba(106,143,91,.55) 68%); box-shadow: 0 16px 32px rgba(46,74,58,.10); } body[data-page-source="index.html"] .info-tile::after { content: ""; position: absolute; inset: 18px; border-radius: 22px; border: 1px solid rgba(46,74,58,.035); pointer-events: none; } body[data-page-source="index.html"] .info-tile h3 { position: relative; z-index: 2; color: var(--home-forest); font-size: clamp(22px, 2vw, 29px); line-height: 1.02; max-width: 260px; margin-top: 42px; } body[data-page-source="index.html"] .info-tile p { position: relative; z-index: 2; color: rgba(33,57,44,.72); max-width: 290px; } @media (max-width: 720px) { body[data-page-source="index.html"] .info-tile { min-height: 164px; padding: 26px 22px 24px !important; } body[data-page-source="index.html"] .info-tile::before { top: 22px; left: 22px; } body[data-page-source="index.html"] .info-tile::after { inset: 14px; border-radius: 20px; } body[data-page-source="index.html"] .info-tile h3 { margin-top: 36px; } } body[data-page-source="index.html"] .rev { background: radial-gradient(circle at 12% 8%, rgba(201,132,166,.16), transparent 28%), linear-gradient(180deg, #F4EBDD 0%, #FFF8EA 100%) !important; } body[data-page-source="index.html"] .rev-card { position: relative; background: rgba(255,252,244,.90) !important; border: 1px solid rgba(46,74,58,.10); box-shadow: 0 22px 54px rgba(46,74,58,.10), inset 0 1px 0 rgba(255,255,255,.78); } body[data-page-source="index.html"] .rev-card::before { content: "\201C"; position: absolute; right: 22px; top: 12px; font-size: 76px; line-height: 1; color: rgba(219,168,89,.22); font-family: Georgia, serif; } body[data-page-source="index.html"] .rev-stars { color: #DBA859; } body[data-page-source="index.html"] .rev-author-avatar { box-shadow: 0 10px 22px rgba(46,74,58,.14); } body[data-page-source="index.html"] .nws-grid { gap: clamp(18px, 2.5vw, 32px) !important; align-items: stretch; } body[data-page-source="index.html"] .nws-card { position: relative; overflow: hidden; min-height: 306px; display: flex; flex-direction: column; background: linear-gradient(90deg, rgba(46,74,58,.035) 1px, transparent 1px), linear-gradient(0deg, rgba(46,74,58,.035) 1px, transparent 1px), linear-gradient(145deg, rgba(255,252,244,.96), rgba(247,241,229,.84)) !important; background-size: 34px 34px, 34px 34px, auto; border: 1px solid rgba(46,74,58,.10); border-radius: 28px !important; box-shadow: 0 22px 54px rgba(46,74,58,.10), inset 0 1px 0 rgba(255,255,255,.8); } body[data-page-source="index.html"] .nws-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 82% 14%, rgba(219,168,89,.22), transparent 0 28%, transparent 29%), radial-gradient(circle at 102% 102%, rgba(106,143,91,.15), transparent 0 38%, transparent 39%); pointer-events: none; } body[data-page-source="index.html"] .nws-card-img { position: relative; height: 132px; aspect-ratio: auto; background: transparent !important; } body[data-page-source="index.html"] .nws-card-img::before { content: ""; position: absolute; left: 24px; bottom: 24px; width: min(58%, 220px); height: 14px; border-radius: 999px; background: linear-gradient(90deg, #21392C 0 42%, #DBA859 42% 68%, rgba(106,143,91,.55) 68%); box-shadow: 0 16px 30px rgba(46,74,58,.10); transition: transform .25s ease; } body[data-page-source="index.html"] .nws-card-img::after { content: ""; position: absolute; inset: 18px; border-radius: 22px; border: 1px solid rgba(46,74,58,.035); } body[data-page-source="index.html"] .nws-card-cat { z-index: 2; background: #21392C !important; color: #FFF8EA !important; border: 0; box-shadow: 0 12px 24px rgba(46,74,58,.16); } body[data-page-source="index.html"] .nws-card-body { position: relative; z-index: 2; padding: 4px 28px 30px; } body[data-page-source="index.html"] .nws-card-date { color: rgba(33,57,44,.58); font-weight: 700; } body[data-page-source="index.html"] .nws-card-title { color: var(--home-forest); font-size: clamp(21px, 2vw, 28px); line-height: 1.04; } body[data-page-source="index.html"] .nws-card:hover .nws-card-img::before { transform: translateX(8px); } @media (max-width: 720px) { body[data-page-source="index.html"] .nws-card { min-height: 244px; border-radius: 22px !important; } body[data-page-source="index.html"] .nws-card-img { height: 104px; } body[data-page-source="index.html"] .nws-card-img::before { left: 20px; bottom: 20px; } body[data-page-source="index.html"] .nws-card-img::after { inset: 14px; border-radius: 18px; } body[data-page-source="index.html"] .nws-card-body { padding: 0 20px 22px; } } body[data-page-source="index.html"] section.sub { background: radial-gradient(circle at 84% 18%, rgba(255,248,234,.42), transparent 30%), linear-gradient(135deg, #DBA859 0%, #E7D9C1 55%, #C984A6 135%) !important; color: var(--home-forest) !important; } body[data-page-source="index.html"] section.sub .sub-inner { max-width: 920px; padding: clamp(36px, 5vw, 64px); border-radius: 34px; background: rgba(255,248,234,.46); border: 1px solid rgba(46,74,58,.10); box-shadow: 0 26px 70px rgba(46,74,58,.14), inset 0 1px 0 rgba(255,255,255,.76); } body[data-page-source="index.html"] section.sub input { background: rgba(255,252,244,.95) !important; border-color: rgba(46,74,58,.18) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.9); } body[data-page-source="index.html"] section.sub .sub-form .btn { background: #21392C !important; color: #FFF8EA !important; border: 1px solid rgba(33,57,44,.16); box-shadow: 0 14px 28px rgba(33,57,44,.16), inset 0 1px 0 rgba(255,255,255,.14); transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease; } body[data-page-source="index.html"] section.sub .sub-form .btn:hover, body[data-page-source="index.html"] section.sub .sub-form .btn:focus-visible { background: #2E4A3A !important; color: #FFF8EA !important; transform: translateY(-2px); box-shadow: 0 20px 38px rgba(33,57,44,.24), inset 0 1px 0 rgba(255,255,255,.18); } body[data-page-source="index.html"] section.sub .sub-form .btn:active { transform: translateY(0); box-shadow: 0 10px 22px rgba(33,57,44,.18), inset 0 2px 6px rgba(0,0,0,.12); } @media (max-width: 720px) { body[data-page-source="index.html"] .cats, body[data-page-source="index.html"] .ps, body[data-page-source="index.html"] .info, body[data-page-source="index.html"] .rev, body[data-page-source="index.html"] .nws, body[data-page-source="index.html"] section.sub { padding-block: 52px !important; } body[data-page-source="index.html"] .cats-head, body[data-page-source="index.html"] .ps-head { gap: 16px; } body[data-page-source="index.html"] .cats-head .btn, body[data-page-source="index.html"] .ps-head .btn { align-self: flex-start; } body[data-page-source="index.html"] .cat-tile { border-radius: 20px !important; padding: 16px 12px !important; } body[data-page-source="index.html"] .cat-tile-art { width: 58% !important; } body[data-page-source="index.html"] .info-tile { min-height: 0; padding: 22px !important; } body[data-page-source="index.html"] .info-tile-icon { width: 60px !important; height: 60px !important; border-radius: 18px !important; } body[data-page-source="index.html"] .rev-card { padding: 24px !important; } body[data-page-source="index.html"] section.sub .sub-inner { border-radius: 26px; padding: 28px 18px; } } body[data-page-source="index.html"] .eyebrow { display: inline-flex !important; width: fit-content !important; max-width: 100%; } body[data-page-source="index.html"] .ps-grid > div[style*="grid-column"] { grid-column: 1 / -1 !important; width: 100%; padding: 26px 28px !important; border-radius: 26px; background: rgba(255,252,244,.58); border: 1px dashed rgba(46,74,58,.18); color: rgba(33,57,44,.68) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.58); } body[data-page-source="index.html"] .ps.bg-dark .ps-grid > div[style*="grid-column"] { background: rgba(255,248,234,.08); border-color: rgba(255,248,234,.16); color: rgba(255,248,234,.72) !important; } @media (min-width: 980px) { body[data-page-source="index.html"] .ps-grid:has(> .pcard:only-child) { grid-template-columns: minmax(280px, 320px) minmax(420px, 1fr) !important; align-items: stretch; } body[data-page-source="index.html"] .ps-grid:has(> .pcard:only-child)::after { content: "Подборка обновляется вручную: показываем товар, который сейчас чаще всего берут на сайте. Больше вкусов и форматов — в каталоге."; display: flex; align-items: flex-end; min-height: 100%; padding: 34px; border-radius: 30px; color: rgba(33,57,44,.74); font-size: clamp(18px, 2vw, 28px); font-weight: 800; line-height: 1.18; letter-spacing: -.025em; background: radial-gradient(circle at 82% 18%, rgba(201,132,166,.20), transparent 28%), radial-gradient(circle at 18% 80%, rgba(106,143,91,.20), transparent 30%), linear-gradient(135deg, rgba(255,252,244,.72), rgba(231,217,193,.46)); border: 1px solid rgba(46,74,58,.10); box-shadow: 0 20px 54px rgba(46,74,58,.08), inset 0 1px 0 rgba(255,255,255,.78); } body[data-page-source="index.html"] .ps.bg-dark .ps-grid:has(> .pcard:only-child)::after { color: rgba(255,248,234,.84); background: radial-gradient(circle at 82% 18%, rgba(219,168,89,.20), transparent 28%), linear-gradient(135deg, rgba(255,248,234,.09), rgba(255,248,234,.04)); border-color: rgba(255,248,234,.14); box-shadow: 0 24px 58px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08); } } body[data-page-source="index.html"] .ps.bg-dark .eyebrow, body[data-page-source="index.html"] .banner .eyebrow { color: #9A6A1E !important; background: rgba(46,74,58,.07) !important; border-color: rgba(46,74,58,.14) !important; } body[data-page-source="index.html"] .banner .banner-inner { background: transparent !important; border: 0 !important; box-shadow: none !important; } /* CODEX HOME PREMIUM PASS END */ /* CODEX SIMPLE PREMIUM HERO START */ body[data-page-source="index.html"] .bhero { height: auto !important; min-height: 0 !important; background: #FFF8EA !important; } body[data-page-source="index.html"] .bhero-stage { position: relative !important; top: auto !important; height: auto !important; min-height: clamp(720px, 92svh, 900px) !important; padding: clamp(96px, 9vw, 140px) 0 clamp(58px, 7vw, 96px) !important; display: flex !important; align-items: center !important; overflow: hidden !important; background: radial-gradient(circle at 82% 22%, rgba(201,132,166,.18), transparent 30%), radial-gradient(circle at 18% 12%, rgba(219,168,89,.20), transparent 28%), linear-gradient(135deg, #FFF8EA 0%, #F4EBDD 48%, #E7D9C1 100%) !important; } body[data-page-source="index.html"] .bhero-bg { background: none !important; transform: none !important; } body[data-page-source="index.html"] .bhero-bg::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(46,74,58,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(46,74,58,.035) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 78%, transparent 100%); } body[data-page-source="index.html"] .bhero-shell { position: relative; z-index: 2; width: 100%; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(420px, .78fr); gap: clamp(34px, 5vw, 88px); align-items: center; } body[data-page-source="index.html"] .bhero-text { position: relative !important; z-index: 3 !important; max-width: 780px !important; margin: 0 !important; padding: 0 !important; text-align: left !important; color: #21392C !important; transform: none !important; opacity: 1 !important; } body[data-page-source="index.html"] .bhero-text .eyebrow { display: inline-flex !important; width: fit-content !important; margin: 0 0 22px !important; padding: 7px 12px; border-radius: 999px; color: #5E6F46 !important; background: rgba(255,252,244,.62) !important; border: 1px solid rgba(46,74,58,.12); box-shadow: 0 10px 22px rgba(46,74,58,.06); font-family: var(--font-display) !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: .14em !important; } body[data-page-source="index.html"] .bhero-text h1 { margin: 0 0 26px !important; max-width: 850px; color: #21392C !important; font-family: var(--font-display) !important; font-size: clamp(52px, 7vw, 118px) !important; font-weight: 900 !important; line-height: .93 !important; letter-spacing: 0 !important; text-transform: none !important; transform: none !important; perspective: none !important; text-wrap: balance; } body[data-page-source="index.html"] .bhero-text .subhead { max-width: 680px !important; margin: 0 0 34px !important; padding: 0 !important; color: rgba(33,57,44,.74) !important; font-size: clamp(17px, 1.35vw, 21px) !important; line-height: 1.52 !important; font-weight: 500 !important; } body[data-page-source="index.html"] .bhero-actions { display: flex !important; justify-content: flex-start !important; gap: 12px !important; margin-bottom: 30px; } body[data-page-source="index.html"] .bhero-proof { display: flex; flex-wrap: wrap; gap: 10px; } body[data-page-source="index.html"] .bhero-proof span { display: inline-flex; align-items: center; min-height: 38px; padding: 8px 13px; border-radius: 999px; color: rgba(33,57,44,.78); background: rgba(255,252,244,.56); border: 1px solid rgba(46,74,58,.10); font-size: 13px; font-weight: 800; box-shadow: inset 0 1px 0 rgba(255,255,255,.74); } body[data-page-source="index.html"] .bhero-proof span::before { content: ""; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: #6A8F5B; box-shadow: 0 0 0 4px rgba(106,143,91,.14); } body[data-page-source="index.html"] .bhero-visual { position: relative; min-height: 560px; perspective: 1200px; } body[data-page-source="index.html"] .bhero-orbit { position: absolute; inset: 8% 2% 8% 4%; border-radius: 42%; background: radial-gradient(circle at 50% 38%, rgba(255,252,244,.88), rgba(231,217,193,.46) 45%, transparent 66%), radial-gradient(circle at 42% 64%, rgba(106,143,91,.24), transparent 38%); border: 1px solid rgba(46,74,58,.08); box-shadow: 0 36px 88px rgba(46,74,58,.13), inset 0 1px 0 rgba(255,255,255,.82); transform: rotate(-8deg); } body[data-page-source="index.html"] .bhero-offer { position: absolute; display: flex; flex-direction: column; color: #21392C; background: #FFFCF4; border: 1px solid rgba(46,74,58,.11); box-shadow: 0 26px 62px rgba(46,74,58,.16), inset 0 1px 0 rgba(255,255,255,.84); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transform-style: preserve-3d; } body[data-page-source="index.html"] .bhero-offer img { object-fit: contain; filter: drop-shadow(0 20px 20px rgba(46,74,58,.18)); transition: transform .28s ease; } body[data-page-source="index.html"] .bhero-offer:hover img { transform: translateY(-5px) scale(1.04); } body[data-page-source="index.html"] .bhero-offer strong { font-size: 22px; line-height: 1.05; letter-spacing: -.02em; } body[data-page-source="index.html"] .bhero-offer span { color: rgba(33,57,44,.65); font-size: 13px; font-weight: 700; } body[data-page-source="index.html"] .bhero-offer-main { left: 13%; top: 14%; width: min(74%, 390px); min-height: 410px; padding: 28px; border-radius: 34px; align-items: center; justify-content: flex-end; text-align: center; background: linear-gradient(155deg, rgba(255,252,244,.92), rgba(231,217,193,.70)); transform: rotate(-4deg) translateZ(30px); } body[data-page-source="index.html"] .bhero-offer-main img { width: min(72%, 230px); margin: auto auto 24px; } body[data-page-source="index.html"] .bhero-offer-kicker { position: absolute; top: 20px; left: 20px; padding: 7px 12px; border-radius: 999px; color: #21392C !important; background: #DBA859; font-size: 12px !important; letter-spacing: .08em; text-transform: uppercase; } body[data-page-source="index.html"] .bhero-offer-side { width: 190px; min-height: 190px; padding: 18px; border-radius: 28px; justify-content: flex-end; } body[data-page-source="index.html"] .bhero-offer-side img { width: 104px; height: 104px; margin: 0 auto 18px; } body[data-page-source="index.html"] .bhero-offer-a { right: 0; top: 4%; background: linear-gradient(145deg, rgba(244,242,226,.94), rgba(201,216,188,.80)); transform: rotate(7deg) translateZ(70px); } body[data-page-source="index.html"] .bhero-offer-b { right: 4%; bottom: 4%; background: linear-gradient(145deg, rgba(255,243,216,.94), rgba(219,168,89,.70)); transform: rotate(-6deg) translateZ(85px); } body[data-page-source="index.html"] .bhero-flash, body[data-page-source="index.html"] .bhero-reward, body[data-page-source="index.html"] .bhero-collage, body[data-page-source="index.html"] .bhero-decor, body[data-page-source="index.html"] .bhero + .hero-slider { display: none !important; } body[data-page-source="index.html"] .bhero + section { margin-top: 0 !important; } @media (max-width: 980px) { body[data-page-source="index.html"] .bhero-stage { min-height: auto !important; padding: 92px 0 54px !important; } body[data-page-source="index.html"] .bhero-shell { grid-template-columns: 1fr; gap: 30px; } body[data-page-source="index.html"] .bhero-text { text-align: center !important; max-width: 720px !important; margin: 0 auto !important; } body[data-page-source="index.html"] .bhero-text .eyebrow { margin-inline: auto !important; } body[data-page-source="index.html"] .bhero-actions, body[data-page-source="index.html"] .bhero-proof { justify-content: center !important; } body[data-page-source="index.html"] .bhero-visual { min-height: 430px; max-width: 620px; width: 100%; margin: 0 auto; } body[data-page-source="index.html"] .bhero-offer-main { left: 50%; top: 5%; width: min(68%, 330px); min-height: 318px; transform: translateX(-50%) rotate(-3deg); } body[data-page-source="index.html"] .bhero-offer-main img { width: min(62%, 170px); } body[data-page-source="index.html"] .bhero-offer-side { width: 154px; min-height: 154px; border-radius: 24px; } body[data-page-source="index.html"] .bhero-offer-side img { width: 78px; height: 78px; margin-bottom: 10px; } body[data-page-source="index.html"] .bhero-offer-a { right: 2%; top: 4%; } body[data-page-source="index.html"] .bhero-offer-b { right: 4%; bottom: 6%; } } @media (max-width: 620px) { body[data-page-source="index.html"] .bhero-stage { padding: 86px 0 44px !important; } body[data-page-source="index.html"] .bhero-text h1 { font-size: clamp(42px, 13vw, 60px) !important; line-height: .96 !important; } body[data-page-source="index.html"] .bhero-text .subhead { font-size: 16px !important; margin-bottom: 24px !important; } body[data-page-source="index.html"] .bhero-actions .btn { width: 100%; justify-content: center; } body[data-page-source="index.html"] .bhero-proof { display: grid; grid-template-columns: 1fr; text-align: left; } body[data-page-source="index.html"] .bhero-visual { min-height: 356px; } body[data-page-source="index.html"] .bhero-orbit { inset: 12% 4% 8%; } body[data-page-source="index.html"] .bhero-offer-main { width: min(74%, 270px); min-height: 260px; padding: 20px; border-radius: 28px; } body[data-page-source="index.html"] .bhero-offer-main img { width: 142px; margin-bottom: 14px; } body[data-page-source="index.html"] .bhero-offer strong { font-size: 18px; } body[data-page-source="index.html"] .bhero-offer span { font-size: 12px; } body[data-page-source="index.html"] .bhero-offer-side { width: 126px; min-height: 126px; padding: 14px; border-radius: 22px; } body[data-page-source="index.html"] .bhero-offer-side img { width: 58px; height: 58px; margin-bottom: 8px; } } body[data-page-source="index.html"] .yh-inner { gap: clamp(8px, 1vw, 18px); } body[data-page-source="index.html"] .yh-spacer { flex: .35 1 8px; min-width: 6px; } body[data-page-source="index.html"] .yh-nav { flex: 0 0 auto; } body[data-page-source="index.html"] .yh-nav a, body[data-page-source="index.html"] .yh-track-link, body[data-page-source="index.html"] .yh-cta-catalog, body[data-page-source="index.html"] .yh-account-btn { white-space: nowrap; } @media (max-width: 1360px) { body[data-page-source="index.html"] .yh-nav a { padding-inline: 10px; font-size: 14px; } body[data-page-source="index.html"] .yh-track-link { padding-inline: 12px; font-size: 13px; } body[data-page-source="index.html"] .yh-account-btn { padding-right: 12px; } } @media (max-width: 1240px) { body[data-page-source="index.html"] .yh-track-link { width: 44px; padding: 0; justify-content: center; font-size: 0; gap: 0; } } @media (max-width: 1160px) { body[data-page-source="index.html"] .yh-nav { display: none !important; } body[data-page-source="index.html"] .yh-burger { display: inline-flex !important; } } @media (min-width: 1161px) { body[data-page-source="index.html"] .yh-burger { display: none !important; } } /* CODEX SIMPLE PREMIUM HERO END */ /* CODEX HERO PREMIUM 3D REWORK START */ body[data-page-source="index.html"] .bhero-stage { min-height: clamp(760px, 94svh, 940px) !important; padding: clamp(104px, 9vw, 148px) 0 clamp(52px, 6vw, 86px) !important; background: radial-gradient(circle at 73% 42%, rgba(219,168,89,.34), transparent 28%), radial-gradient(circle at 88% 14%, rgba(201,132,166,.22), transparent 22%), radial-gradient(circle at 8% 12%, rgba(106,143,91,.28), transparent 28%), linear-gradient(135deg, #14241B 0%, #2E4A3A 45%, #17281F 100%) !important; color: #FFF8EA; } body[data-page-source="index.html"] .bhero-bg::before { background-image: linear-gradient(rgba(255,248,234,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,248,234,.030) 1px, transparent 1px); background-size: 86px 86px; opacity: .55; mask-image: radial-gradient(circle at 58% 48%, #000 0%, rgba(0,0,0,.75) 38%, transparent 76%); } body[data-page-source="index.html"] .bhero-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(20,36,27,.18) 0%, transparent 38%, rgba(20,36,27,.16) 100%), radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.24), transparent 56%); } body[data-page-source="index.html"] .bhero-shell { grid-template-columns: minmax(0, .92fr) minmax(520px, .88fr); gap: clamp(44px, 5vw, 96px); } body[data-page-source="index.html"] .bhero-text { color: #FFF8EA !important; } body[data-page-source="index.html"] .bhero-text .eyebrow { color: #17351f !important; background: rgba(255,248,234,.54) !important; border-color: rgba(23,53,31,.16) !important; box-shadow: 0 14px 34px rgba(23,53,31,.12), inset 0 1px 0 rgba(255,255,255,.58) !important; } body[data-page-source="index.html"] .bhero-text h1 { max-width: 760px; color: #FFF8EA !important; font-size: clamp(50px, 6.15vw, 106px) !important; line-height: .96 !important; letter-spacing: 0 !important; text-shadow: 0 24px 70px rgba(0,0,0,.24); } body[data-page-source="index.html"] .bhero-text .subhead { max-width: 650px !important; color: #27412d !important; font-size: clamp(17px, 1.28vw, 20px) !important; font-weight: 750 !important; text-shadow: 0 1px 0 rgba(255,248,234,.36); } body[data-page-source="index.html"] .bhero-actions .btn-dark { background: #DBA859 !important; color: #17281F !important; border-color: #DBA859 !important; box-shadow: 0 18px 42px rgba(219,168,89,.26); } body[data-page-source="index.html"] .bhero-actions .btn-dark:hover { background: #E7D9C1 !important; border-color: #E7D9C1 !important; } body[data-page-source="index.html"] .bhero-actions .btn-outline-dark { color: #17351f !important; border-color: rgba(23,53,31,.30) !important; background: rgba(255,248,234,.36) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.50), 0 12px 30px rgba(23,53,31,.10); } body[data-page-source="index.html"] .bhero-actions .btn-outline-dark:hover { background: #17351f !important; color: #f6c55a !important; border-color: #17351f !important; } body[data-page-source="index.html"] .bhero-proof span { color: #17351f !important; background: rgba(255,248,234,.42) !important; border-color: rgba(23,53,31,.18) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.62), 0 12px 30px rgba(23,53,31,.12) !important; backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1); } body[data-page-source="index.html"] .bhero-proof span::before { background: #DBA859; box-shadow: 0 0 0 4px rgba(219,168,89,.20), 0 0 20px rgba(219,168,89,.34); } body[data-page-source="index.html"] .bhero-visual { min-height: 620px; perspective: 1500px; transform-style: preserve-3d; isolation: isolate; } body[data-page-source="index.html"] .bhero-orbit { z-index: 0; inset: 5% -1% 2% 0; border-radius: 48% 42% 46% 40%; background: radial-gradient(circle at 52% 36%, rgba(255,248,234,.20), rgba(231,217,193,.10) 32%, transparent 62%), radial-gradient(circle at 42% 64%, rgba(219,168,89,.26), transparent 34%), linear-gradient(135deg, rgba(255,248,234,.10), rgba(255,248,234,.03)); border: 1px solid rgba(255,248,234,.13); box-shadow: 0 54px 120px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -34px 70px rgba(0,0,0,.16); transform: rotateX(62deg) rotateZ(-12deg) translateY(78px); } body[data-page-source="index.html"] .bhero-orbit::after { content: ""; position: absolute; left: 17%; right: 8%; bottom: 18%; height: 18%; border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,.36), transparent 72%); filter: blur(18px); } body[data-page-source="index.html"] .bhero-offer { --lift: 0px; z-index: 2; color: #FFF8EA !important; overflow: visible; transform-style: preserve-3d; border: 1px solid rgba(255,248,234,.18) !important; background: linear-gradient(145deg, #657057, #354436 58%, #203329) !important; box-shadow: 0 34px 78px rgba(0,0,0,.34), 0 11px 20px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.16) !important; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s; } body[data-page-source="index.html"] .bhero-offer::before { content: none; } body[data-page-source="index.html"] .bhero-offer::after { content: ""; position: absolute; left: 7%; right: 7%; bottom: -26px; height: 34px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,.46), transparent 72%); filter: blur(13px); transform: translateZ(-70px); pointer-events: none; } body[data-page-source="index.html"] .bhero-offer:hover { border-color: rgba(231,217,193,.34) !important; box-shadow: 0 46px 92px rgba(0,0,0,.38), 0 16px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.20) !important; } body[data-page-source="index.html"] .bhero-offer img { position: relative; z-index: 2; filter: drop-shadow(0 28px 28px rgba(0,0,0,.32)) drop-shadow(0 8px 10px rgba(219,168,89,.16)) !important; transform: translateZ(72px); } body[data-page-source="index.html"] .bhero-offer strong { position: relative; z-index: 2; color: #FFF8EA; font-size: 25px; font-weight: 900; text-shadow: 0 8px 22px rgba(0,0,0,.28); } body[data-page-source="index.html"] .bhero-offer span { position: relative; z-index: 2; color: rgba(255,248,234,.68) !important; } body[data-page-source="index.html"] .bhero-offer-main { left: 12%; top: 11%; width: min(73%, 410px); min-height: 438px; padding: 30px; border-radius: 38px; background: radial-gradient(circle at 50% 28%, rgba(231,217,193,.24), transparent 36%), linear-gradient(145deg, #657057, #504b37 56%, #203329) !important; transform: rotateX(10deg) rotateY(-18deg) rotateZ(-4deg) translateZ(70px); } body[data-page-source="index.html"] .bhero-offer-main:hover { transform: rotateX(8deg) rotateY(-13deg) rotateZ(-3deg) translateY(-10px) translateZ(96px); } body[data-page-source="index.html"] .bhero-offer-main img { width: min(72%, 244px); margin: auto auto 24px; } body[data-page-source="index.html"] .bhero-offer-kicker { top: 22px; left: 22px; color: #17281F !important; background: linear-gradient(135deg, #E7D9C1, #DBA859) !important; box-shadow: 0 12px 24px rgba(219,168,89,.24); transform: translateZ(82px); } body[data-page-source="index.html"] .bhero-offer-side { width: 205px; min-height: 205px; padding: 20px; border-radius: 30px; } body[data-page-source="index.html"] .bhero-offer-side img { width: 114px; height: 114px; } body[data-page-source="index.html"] .bhero-offer-a { right: -1%; top: 3%; background: radial-gradient(circle at 48% 26%, rgba(106,143,91,.30), transparent 42%), linear-gradient(145deg, #566652, #374b39, #203329) !important; transform: rotateX(7deg) rotateY(16deg) rotateZ(7deg) translateZ(130px); } body[data-page-source="index.html"] .bhero-offer-a:hover { transform: rotateX(6deg) rotateY(11deg) rotateZ(6deg) translateY(-10px) translateZ(154px); } body[data-page-source="index.html"] .bhero-offer-b { right: 2%; bottom: 4%; background: radial-gradient(circle at 48% 26%, rgba(219,168,89,.34), transparent 42%), linear-gradient(145deg, #665a40, #4a4932, #203329) !important; transform: rotateX(8deg) rotateY(18deg) rotateZ(-6deg) translateZ(150px); } body[data-page-source="index.html"] .bhero-offer-b:hover { transform: rotateX(7deg) rotateY(12deg) rotateZ(-5deg) translateY(-10px) translateZ(174px); } @media (max-width: 980px) { body[data-page-source="index.html"] .bhero-stage { min-height: auto !important; padding: 96px 0 58px !important; } body[data-page-source="index.html"] .bhero-shell { grid-template-columns: 1fr; gap: 34px; } body[data-page-source="index.html"] .bhero-text h1 { max-width: 720px; margin-inline: auto !important; } body[data-page-source="index.html"] .bhero-text .subhead { margin-inline: auto !important; } body[data-page-source="index.html"] .bhero-visual { min-height: 460px; max-width: 660px; } } @media (max-width: 620px) { body[data-page-source="index.html"] .bhero-stage { padding: 86px 0 46px !important; } body[data-page-source="index.html"] .bhero-text h1 { font-size: clamp(39px, 11.8vw, 56px) !important; line-height: 1 !important; text-shadow: 0 16px 46px rgba(0,0,0,.22); } body[data-page-source="index.html"] .bhero-text .subhead { color: rgba(255,248,234,.76) !important; } body[data-page-source="index.html"] .bhero-visual { min-height: 390px; } body[data-page-source="index.html"] .bhero-orbit { inset: 15% 5% 6%; transform: rotateX(62deg) rotateZ(-10deg) translateY(60px); } body[data-page-source="index.html"] .bhero-offer-main { width: min(75%, 285px); min-height: 274px; padding: 20px; transform: translateX(-50%) rotateX(8deg) rotateY(-10deg) rotateZ(-4deg) translateZ(62px); } body[data-page-source="index.html"] .bhero-offer-main:hover { transform: translateX(-50%) rotateX(7deg) rotateY(-8deg) rotateZ(-3deg) translateY(-6px) translateZ(78px); } body[data-page-source="index.html"] .bhero-offer-main img { width: 150px; } body[data-page-source="index.html"] .bhero-offer-side { width: 132px; min-height: 132px; padding: 14px; } body[data-page-source="index.html"] .bhero-offer-side img { width: 62px; height: 62px; } body[data-page-source="index.html"] .bhero-offer strong { font-size: 18px; } body[data-page-source="index.html"] .bhero-offer span { font-size: 11px; } } body[data-page-source="index.html"] .bhero-text h1 { max-width: 720px; font-size: clamp(48px, 5.55vw, 92px) !important; line-height: 1 !important; } body[data-page-source="index.html"] .bhero-offer-main { left: 7%; width: min(70%, 392px); min-height: 414px; } body[data-page-source="index.html"] .bhero-offer-a { right: 6%; top: 2%; } body[data-page-source="index.html"] .bhero-offer-b { right: 6%; bottom: 7%; } @media (max-width: 980px) { body[data-page-source="index.html"] .bhero-text h1 { font-size: clamp(44px, 9vw, 76px) !important; max-width: 680px; } body[data-page-source="index.html"] .bhero-visual { min-height: 430px; } } @media (max-width: 620px) { body[data-page-source="index.html"] .bhero-visual { min-height: 350px; overflow: visible; } body[data-page-source="index.html"] .bhero-text h1 { font-size: clamp(37px, 10.8vw, 50px) !important; } body[data-page-source="index.html"] .bhero-offer-main { left: 47%; top: 4%; width: min(72%, 260px); min-height: 252px; } body[data-page-source="index.html"] .bhero-offer-main img { width: 132px; } body[data-page-source="index.html"] .bhero-offer-a { right: 1%; top: 2%; } body[data-page-source="index.html"] .bhero-offer-b { right: 3%; bottom: 4%; } body[data-page-source="index.html"] .bhero-offer-side { width: 118px; min-height: 118px; } body[data-page-source="index.html"] .bhero-offer-side img { width: 54px; height: 54px; } } /* CODEX HERO PREMIUM 3D REWORK END */ /* CODEX HERO CLICK LAYER FIX START */ body[data-page-source="index.html"] .bhero-bg, body[data-page-source="index.html"] .bhero-bg::before, body[data-page-source="index.html"] .bhero-stage::before, body[data-page-source="index.html"] .bhero-orbit, body[data-page-source="index.html"] .bhero-orbit::before, body[data-page-source="index.html"] .bhero-orbit::after { pointer-events: none !important; } body[data-page-source="index.html"] .bhero-visual { position: relative; pointer-events: none !important; } body[data-page-source="index.html"] .bhero-offer { pointer-events: auto !important; cursor: pointer; z-index: 7; } body[data-page-source="index.html"] .bhero-offer-main { z-index: 7; } body[data-page-source="index.html"] .bhero-offer-a, body[data-page-source="index.html"] .bhero-offer-b { z-index: 8; } /* CODEX HERO CLICK LAYER FIX END */ /* CODEX HERO ORBIT CARDS START */ body[data-page-source="index.html"] .bhero-visual { --orbit-a-x: -104px; --orbit-a-y: 38px; --orbit-a-scale: 1.34; --orbit-b-x: 172px; --orbit-b-y: -150px; --orbit-b-scale: .78; --orbit-c-x: 178px; --orbit-c-y: 132px; --orbit-c-scale: .96; } body[data-page-source="index.html"] .bhero-orbit { display: none !important; } body[data-page-source="index.html"] .bhero-offer-main, body[data-page-source="index.html"] .bhero-offer-side { left: 50% !important; top: 50% !important; right: auto !important; bottom: auto !important; width: 244px !important; min-height: 244px !important; padding: 22px !important; transform-origin: center center !important; will-change: transform; animation: none !important; } body[data-page-source="index.html"] .bhero-offer-main img, body[data-page-source="index.html"] .bhero-offer-side img { width: 126px !important; height: 126px !important; margin: 0 auto 20px !important; } body[data-page-source="index.html"] .bhero-visual:hover .bhero-offer:hover { z-index: 30 !important; border-color: rgba(231,217,193,.42) !important; } @media (max-width: 620px) { body[data-page-source="index.html"] .bhero-visual { --orbit-a-x: -54px; --orbit-a-y: 38px; --orbit-a-scale: 1.20; --orbit-b-x: 94px; --orbit-b-y: -92px; --orbit-b-scale: .74; --orbit-c-x: 92px; --orbit-c-y: 104px; --orbit-c-scale: .86; min-height: 360px; } body[data-page-source="index.html"] .bhero-offer-main, body[data-page-source="index.html"] .bhero-offer-side { width: 168px !important; min-height: 168px !important; padding: 15px !important; } body[data-page-source="index.html"] .bhero-offer-main img, body[data-page-source="index.html"] .bhero-offer-side img { width: 78px !important; height: 78px !important; margin-bottom: 10px !important; } body[data-page-source="index.html"] .bhero-visual:hover .bhero-offer:hover { border-color: rgba(231,217,193,.42) !important; } } @media (prefers-reduced-motion: reduce) { body[data-page-source="index.html"] .bhero-offer { animation: none !important; } } /* CODEX HERO ORBIT CARDS END */ /* ── BRANDS — наши бренды (линейки) ─────────────────────── */ .brands { padding: 96px 0; background: var(--c-bg, #F5F1E6); position: relative; z-index: 3; } .brands-head { text-align: center; margin-bottom: 56px; } .brands-eyebrow { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 800; color: #A57013; margin-bottom: 14px; } .brands-title { font-weight: 900; font-size: clamp(34px, 5vw, 60px); letter-spacing: -0.03em; color: var(--c-dark, #2A1F0E); margin: 0 0 14px; line-height: 1.05; } .brands-title .accent { color: var(--c-honey, #DBA859); } .brands-sub { font-size: 16px; color: var(--c-text-mut, #5B4F3B); max-width: 560px; margin: 0 auto; line-height: 1.5; } /* Desktop: сетка в один ряд (стандарт 3, при добавлении 4-го — авто на 4). Mobile (<900px): один горизонтальный ряд со scroll-snap — свайп вбок. */ .brands-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; } @media (min-width: 900px) { .brands-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } } /* При добавлении 4-го бренда — auto-fit сам уложит в один ряд если хватает ширины (≈1280+). */ @media (max-width: 899px) { .brands-grid { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; /* горизонтальный жест остаётся внутри ленты и не уходит в «назад» браузера */ overscroll-behavior-x: contain; touch-action: pan-x pan-y; gap: 14px; padding: 4px 16px 12px; margin: 0 -16px; scrollbar-width: none; } .brands-grid::-webkit-scrollbar { display: none; } .brands-grid > .brand-card { flex: 0 0 78%; scroll-snap-align: center; min-width: 240px; max-width: 320px; } } .brand-card { display: flex; flex-direction: column; background: linear-gradient(145deg, #FBF4E3, #F2E2BA); border-radius: 28px; padding: 28px; text-decoration: none; color: inherit; border: 1px solid rgba(60, 30, 0, .07); box-shadow: 0 2px 12px rgba(60, 30, 0, .04); transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s; min-height: 380px; overflow: hidden; } .brand-card:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(60, 30, 0, .14); border-color: rgba(60, 30, 0, .12); } /* Tones — три разные подложки для placeholder-карточек, чтобы визуально отличались. При замене на реальные бренды можно оставить как есть или переопределить. */ .brand-card-tone-1 { background: linear-gradient(145deg, #FBF4E3, #EAD9A8); } .brand-card-tone-2 { background: linear-gradient(145deg, #F4F2E2, #CFE0BC); } .brand-card-tone-3 { background: linear-gradient(145deg, #FAEAD6, #E8B881); } .brand-card-media { width: 100%; aspect-ratio: 16 / 10; background: rgba(255, 255, 255, .78); border-radius: 18px; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; overflow: hidden; position: relative; } .brand-card-media img { width: 100%; height: 100%; object-fit: contain; padding: 14px; transition: transform .35s cubic-bezier(.2,.7,.3,1); } .brand-card:hover .brand-card-media img { transform: scale(1.04); } .brand-card-placeholder { font-weight: 900; font-size: 64px; color: var(--c-honey, #DBA859); opacity: .55; letter-spacing: -0.04em; user-select: none; } .brand-card-body { display: flex; flex-direction: column; gap: 12px; flex: 1; } .brand-card-name { font-weight: 800; font-size: 22px; letter-spacing: -0.02em; color: var(--c-dark, #2A1F0E); margin: 0; line-height: 1.2; } .brand-card-desc { font-size: 14px; color: var(--c-text-mut, #5B4F3B); line-height: 1.5; margin: 0; flex: 1; } .brand-card-cta { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 8px; padding: 10px 18px; background: var(--c-dark, #2A1F0E); color: var(--c-honey, #DBA859); border-radius: 999px; font-weight: 700; font-size: 14px; transition: background .18s, color .18s; } .brand-card-cta svg { transition: transform .18s; } .brand-card:hover .brand-card-cta { background: var(--c-honey, #DBA859); color: var(--c-dark, #2A1F0E); } .brand-card:hover .brand-card-cta svg { transform: translateX(4px); } @media (max-width: 720px) { .brands { padding: 60px 0; } .brands-head { margin-bottom: 36px; } .brand-card { padding: 22px; min-height: 0; border-radius: 22px; } .brand-card-media { aspect-ratio: 4 / 3; margin-bottom: 18px; border-radius: 14px; } .brand-card-placeholder { font-size: 44px; } .brand-card-name { font-size: 18px; } .brand-card-desc { font-size: 13px; } .brand-card-cta { padding: 9px 16px; font-size: 13px; } } /* ── LOYALTY HINTS — кешбэк-плашки на каталоге и странице товара ───────── */ .cat-loyalty-banner { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 12px 18px; /* Плашка живёт на СВЕТЛОМ hero каталога — тёмный текст на медовой заливке, светлый вариант (#FFF8EA) на нём сливался с фоном. */ background: linear-gradient(135deg, #FCEBC4, #F8DFA8); border: 1px solid rgba(158,104,10,.38); border-radius: 999px; color: #5A3B06; font-size: 14px; line-height: 1.4; text-decoration: none; box-shadow: 0 2px 8px rgba(120,80,10,.10); transition: transform .15s, box-shadow .15s, background .15s; } .cat-loyalty-banner:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(158,104,10,.20); background: linear-gradient(135deg, #FBE3B0, #F5D28C); } .cat-loyalty-banner .cl-icon { display: inline-flex; color: #A9700C; } .cat-loyalty-banner .cl-text { color: #5A3B06; } .cat-loyalty-banner .cl-text b { font-weight: 800; color: #43290A; } .cat-loyalty-banner .cl-arrow { font-weight: 800; color: #A9700C; } .prod-cashback-hint { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; padding: 10px 14px; background: rgba(60,140,75,.07); border: 1px solid rgba(60,140,75,.18); border-radius: 12px; color: var(--c-text); font-size: 14px; line-height: 1.45; text-decoration: none; transition: background .15s; } .prod-cashback-hint:hover { background: rgba(60,140,75,.12); } .prod-cashback-hint .pch-icon { display: inline-flex; color: var(--c-green, #2F5F1E); flex-shrink: 0; } .prod-cashback-hint .pch-text b { color: var(--c-green, #2F5F1E); font-weight: 800; } .prod-cashback-hint .pch-text small { color: var(--c-text-mut); font-size: 12px; margin-left: 2px; } @media (max-width: 720px) { .cat-loyalty-banner { font-size: 13px; padding: 10px 14px; } .prod-cashback-hint { font-size: 13px; padding: 9px 12px; } } /* CODEX HERO SINGLE STRETCHED BACKGROUND START */ body[data-page-source="index.html"] .bhero-stage { background: linear-gradient(90deg, #c7da7b 0%, #c7da7b 52%, #DBA859 76%, #C984A6 100%) !important; } body[data-page-source="index.html"] .bhero-bg { background: linear-gradient(90deg, #c7da7b 0%, #c7da7b 52%, #DBA859 76%, #C984A6 100%) !important; background-size: 100% 100% !important; background-position: center center !important; background-repeat: no-repeat !important; transform: none !important; } body[data-page-source="index.html"] .bhero-bg::before, body[data-page-source="index.html"] .bhero-bg::after, body[data-page-source="index.html"] .bhero-stage::before { content: none !important; display: none !important; background: none !important; background-image: none !important; } /* CODEX HERO SINGLE STRETCHED BACKGROUND END */ /* CODEX CART PREMIUM START */ body[data-page-source="cart.html"] { background: radial-gradient(760px 420px at 90% 0%, rgba(219,168,89,.16), transparent 64%), radial-gradient(620px 420px at 12% 92%, rgba(106,143,91,.12), transparent 66%), linear-gradient(180deg, #F8F5EC 0%, #F2EFE6 58%, #ECE5D8 100%); } body[data-page-source="cart.html"] .cart { padding: clamp(36px, 5vw, 70px) 0 110px !important; } body[data-page-source="cart.html"] .crumbs { color: rgba(46,74,58,.62) !important; font-weight: 600; } body[data-page-source="cart.html"] .display-l { max-width: 980px; margin-bottom: clamp(26px, 4vw, 42px) !important; color: #1C3528; letter-spacing: -.055em; } body[data-page-source="cart.html"] .cart-empty-state { position: relative; isolation: isolate; overflow: hidden; min-height: 374px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(54px, 7vw, 92px) 24px !important; background: linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,252,244,.94)), var(--c-bg-alt) !important; border: 1px solid rgba(46,74,58,.10); border-radius: 26px !important; box-shadow: 0 28px 80px rgba(46,74,58,.12), 0 8px 24px rgba(46,74,58,.07), inset 0 1px 0 rgba(255,255,255,.82); } body[data-page-source="cart.html"] .cart-empty-state::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(360px 240px at 28% 24%, rgba(106,143,91,.16), transparent 64%), radial-gradient(420px 260px at 74% 18%, rgba(219,168,89,.18), transparent 66%), radial-gradient(420px 280px at 78% 88%, rgba(201,132,166,.12), transparent 68%); } body[data-page-source="cart.html"] .cart-empty-state::after { content: ""; position: absolute; width: min(520px, 70vw); height: min(520px, 70vw); right: -150px; top: -170px; z-index: -1; border-radius: 50%; border: 1px solid rgba(46,74,58,.10); background: radial-gradient(circle, rgba(231,217,193,.30), transparent 66%); } body[data-page-source="cart.html"] .cart-empty-icon { width: 86px; height: 86px; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; color: #2E4A3A; border-radius: 22px; background: linear-gradient(180deg, #FFFFFF, #FFF8EA); border: 1px solid rgba(46,74,58,.12); box-shadow: 0 18px 38px rgba(46,74,58,.12); } body[data-page-source="cart.html"] .cart-empty-kicker { margin-bottom: 10px; color: #B98236; font-size: 12px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; } body[data-page-source="cart.html"] .cart-empty-state h2 { color: #1C3528; font-size: clamp(28px, 4vw, 42px); line-height: 1.02; letter-spacing: -.045em; } body[data-page-source="cart.html"] .cart-empty-state p { max-width: 500px; margin-left: auto !important; margin-right: auto !important; color: rgba(46,74,58,.68) !important; font-size: 16px; line-height: 1.55; } body[data-page-source="cart.html"] .cart-empty-state .btn { min-width: 160px; min-height: 48px; border-radius: 12px; background: linear-gradient(180deg, #2E4A3A 0%, #20372A 100%) !important; color: #FFF8EA !important; box-shadow: 0 16px 32px rgba(46,74,58,.22); transition: transform .16s ease, box-shadow .16s ease, filter .16s ease; } body[data-page-source="cart.html"] .cart-empty-state .btn:hover { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(46,74,58,.28); } body[data-page-source="cart.html"] .cart-grid { gap: clamp(22px, 3vw, 38px) !important; } body[data-page-source="cart.html"] .cart-list { gap: 14px !important; } body[data-page-source="cart.html"] .cart-row { position: relative; overflow: hidden; padding: 18px !important; background: linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,252,244,.95)), var(--c-bg-alt) !important; border: 1px solid rgba(46,74,58,.10); border-radius: 20px !important; box-shadow: 0 16px 42px rgba(46,74,58,.09), inset 0 1px 0 rgba(255,255,255,.72); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; } body[data-page-source="cart.html"] .cart-row::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: linear-gradient(180deg, #6A8F5B, #DBA859); opacity: .0; transition: opacity .16s ease; } body[data-page-source="cart.html"] .cart-row:hover { transform: translateY(-2px); border-color: rgba(106,143,91,.24); box-shadow: 0 22px 54px rgba(46,74,58,.13), inset 0 1px 0 rgba(255,255,255,.75); } body[data-page-source="cart.html"] .cart-row:hover::before { opacity: 1; } body[data-page-source="cart.html"] .cart-row-img { width: 92px !important; height: 92px !important; border-radius: 16px !important; background: linear-gradient(180deg, #FFFFFF, #F7F0E2) !important; border: 1px solid rgba(46,74,58,.08); box-shadow: 0 12px 26px rgba(46,74,58,.08); } body[data-page-source="cart.html"] .cart-row-name { color: #1C3528; font-size: 17px !important; letter-spacing: -.02em; } body[data-page-source="cart.html"] .cart-row-cat { color: rgba(46,74,58,.52) !important; } body[data-page-source="cart.html"] .qty-stepper { background: rgba(255,255,255,.74); border: 1px solid rgba(46,74,58,.12); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.7); } body[data-page-source="cart.html"] .qty-stepper button { color: #2E4A3A; } body[data-page-source="cart.html"] .cart-row-price { color: #1C3528; font-size: 18px !important; } body[data-page-source="cart.html"] .cart-row-del { border-radius: 12px; } body[data-page-source="cart.html"] .cart-row-del:hover { background: rgba(201,132,166,.13); } body[data-page-source="cart.html"] .cart-summary { position: sticky; top: 104px; overflow: hidden; padding: 32px !important; border-radius: 22px !important; background: radial-gradient(320px 220px at 88% 0%, rgba(219,168,89,.22), transparent 66%), linear-gradient(145deg, #162C21 0%, #2E4A3A 58%, #20372A 100%) !important; border: 1px solid rgba(231,217,193,.13); box-shadow: 0 28px 70px rgba(46,74,58,.22); } body[data-page-source="cart.html"] .cart-summary::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,248,234,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,248,234,.04) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(180deg, #000, transparent 88%); } body[data-page-source="cart.html"] .cart-summary > * { position: relative; z-index: 1; } body[data-page-source="cart.html"] .cart-summary h3 { color: #FFF8EA; font-size: 26px !important; } body[data-page-source="cart.html"] .cart-summary .row { border-bottom: 1px solid rgba(255,255,255,.08); } body[data-page-source="cart.html"] .cart-summary .row.total { border-top: 0 !important; border-bottom: 0; margin-top: 16px !important; padding-top: 18px !important; } /* CHECKOUT — тёплая палитра как в корзине: фон страницы (кремовый + медовое/зелёное сияние) и тёплая карточка формы с мягкой тенью. */ body[data-page-source="checkout.html"] { background: radial-gradient(760px 420px at 90% 0%, rgba(219,168,89,.16), transparent 64%), radial-gradient(620px 420px at 12% 92%, rgba(106,143,91,.12), transparent 66%), linear-gradient(180deg, #F8F5EC 0%, #F2EFE6 58%, #ECE5D8 100%); } body[data-page-source="checkout.html"] .chk { padding: clamp(36px, 5vw, 70px) 0 110px !important; } body[data-page-source="checkout.html"] .crumbs { color: rgba(46,74,58,.62) !important; font-weight: 600; } body[data-page-source="checkout.html"] .crumbs a { color: inherit !important; } body[data-page-source="checkout.html"] .display-l { color: #1C3528; letter-spacing: -.04em; } body[data-page-source="checkout.html"] .chk-form { background: linear-gradient(180deg, #FFFFFF 0%, #F6F1E4 100%) !important; border: 1px solid rgba(46,74,58,.10); border-radius: 24px; box-shadow: 0 16px 42px rgba(46,74,58,.09), inset 0 1px 0 rgba(255,255,255,.7); } body[data-page-source="checkout.html"] .chk-form legend { color: #1C3528; } body[data-page-source="checkout.html"] .chk-form fieldset { border-bottom-color: rgba(46,74,58,.12); } body[data-page-source="checkout.html"] .chk-form input, body[data-page-source="checkout.html"] .chk-form select, body[data-page-source="checkout.html"] .chk-form textarea { background: rgba(255,253,247,.92) !important; border-color: rgba(46,74,58,.16) !important; } body[data-page-source="checkout.html"] .deliv-opt { background: rgba(255,252,244,.66) !important; border-color: rgba(46,74,58,.14) !important; } body[data-page-source="checkout.html"] .deliv-opt:has(input:checked) { border-color: #2E4A3A !important; background: rgba(106,143,91,.10) !important; } /* CHECKOUT — сводка заказа в едином премиум-стиле корзины (фикс: иначе групповое карточное правило делает фон светлым, а текст остаётся белым → не виден) */ body[data-page-source="checkout.html"] .cart-summary { position: static; /* липкий правый рельс — только на десктопе (см. @media min-width:1024) */ top: 104px; overflow: hidden; padding: 32px !important; border-radius: 8px !important; background: radial-gradient(320px 220px at 88% 0%, rgba(244,185,66,.22), transparent 66%), linear-gradient(145deg, #17351f 0%, #2f5f1e 70%, #20372A 100%) !important; border: 1px solid rgba(231,217,193,.13) !important; box-shadow: 0 28px 70px rgba(46,74,58,.22) !important; color: #FFF8EA; } body[data-page-source="checkout.html"] .cart-summary::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,248,234,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,248,234,.04) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(180deg, #000, transparent 88%); } body[data-page-source="checkout.html"] .cart-summary > * { position: relative; z-index: 1; } body[data-page-source="checkout.html"] .cart-summary h3 { color: #FFF8EA; font-size: 26px !important; font-family: Georgia, 'Times New Roman', serif !important; font-weight: 700 !important; letter-spacing: 0 !important; } body[data-page-source="checkout.html"] .cart-summary .row { border-bottom: 1px solid rgba(255,255,255,.08); } body[data-page-source="checkout.html"] .cart-summary .row .lab { color: rgba(255,248,234,.72) !important; } body[data-page-source="checkout.html"] .cart-summary .row.total { border-top: 0 !important; border-bottom: 0; margin-top: 16px !important; padding-top: 18px !important; } /* Липкий правый рельс сводки — только на десктопе (2 колонки). На мобиле статично. */ @media (min-width: 1024px) { body[data-page-source="checkout.html"] .cart-summary { position: sticky; } } /* Мобайл: запас снизу, чтобы кнопка «Оформить заказ» не пряталась под фикс-баннером cookie. */ @media (max-width: 1023px) { body[data-page-source="checkout.html"] .chk { padding-bottom: 132px !important; } } body[data-page-source="cart.html"] .cart-summary .btn-light { min-height: 50px; border-radius: 12px; background: linear-gradient(180deg, #F2EFE6 0%, #E7D9C1 100%) !important; color: #1C3528 !important; box-shadow: 0 14px 30px rgba(0,0,0,.18); } body[data-page-source="cart.html"] #clear-btn { border-radius: 12px; color: rgba(255,248,234,.66) !important; } body[data-page-source="cart.html"] #clear-btn:hover { background: rgba(255,255,255,.08) !important; color: #FFF8EA !important; } @media (max-width: 760px) { body[data-page-source="cart.html"] .cart-row { display: grid !important; grid-template-columns: 98px minmax(0, 1fr) 42px !important; gap: 12px !important; align-items: center !important; } body[data-page-source="cart.html"] .cart-row-img { grid-column: 1; grid-row: 1; width: 74px !important; height: 74px !important; } body[data-page-source="cart.html"] .cart-row > div:nth-child(2) { grid-column: 2 / 4; grid-row: 1; min-width: 0; } body[data-page-source="cart.html"] .cart-row .qty-stepper { grid-column: 1; grid-row: 2; width: 98px !important; justify-content: space-between; } body[data-page-source="cart.html"] .cart-row .qty-stepper button { width: 30px; height: 38px; font-size: 18px; } body[data-page-source="cart.html"] .cart-row .qty-stepper input { width: 34px; height: 38px; font-size: 14px; } body[data-page-source="cart.html"] .cart-row > div:nth-child(4) { grid-column: 2; grid-row: 2; text-align: right !important; justify-self: end; } body[data-page-source="cart.html"] .cart-row-del { grid-column: 3; grid-row: 2; justify-self: end; } body[data-page-source="cart.html"] .cart-summary { position: static; padding: 24px !important; } } /* CODEX CART PREMIUM END */ /* CODEX SEARCH PREMIUM START */ .ys-overlay { position: fixed !important; inset: 0 !important; z-index: 300 !important; display: none; align-items: flex-start !important; justify-content: center !important; padding: 34px 18px 18px !important; background: radial-gradient(circle at 18% 4%, rgba(244,185,66,.2), transparent 32%), linear-gradient(135deg, rgba(19,30,21,.88), rgba(22,17,11,.9)) !important; backdrop-filter: blur(12px) saturate(1.04) !important; -webkit-backdrop-filter: blur(12px) saturate(1.04) !important; } .ys-modal { position: relative !important; width: min(100%, 980px) !important; max-width: 980px !important; max-height: calc(100svh - 68px) !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; color: #1d2418 !important; background: linear-gradient(180deg, rgba(255,252,244,.98), rgba(245,239,222,.98)), #fffaf0 !important; border: 1px solid rgba(244,185,66,.34) !important; border-radius: 8px !important; box-shadow: 0 40px 120px rgba(0,0,0,.46), 0 0 0 1px rgba(255,255,255,.45) inset !important; } .ys-modal::before { content: ""; position: absolute; inset: 0; height: auto; pointer-events: none; background: linear-gradient(90deg, rgba(244,185,66,.24), transparent 20%, transparent 80%, rgba(47,95,30,.12)), radial-gradient(circle at 84% 14%, rgba(244,185,66,.16), transparent 24%); } .ys-head { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 34px 36px 10px !important; } .ys-kicker { margin: 0 0 8px; color: #a06d22 !important; font-size: 12px !important; font-weight: 900 !important; letter-spacing: .18em !important; text-transform: uppercase !important; } .ys-title { max-width: 700px; color: #17351f !important; font-family: Georgia, 'Times New Roman', serif !important; font-size: clamp(38px, 6vw, 74px) !important; line-height: .92 !important; font-weight: 700 !important; letter-spacing: 0 !important; } .ys-input-wrap { position: relative; z-index: 1; display: flex !important; align-items: center !important; gap: 14px !important; margin: 26px 36px 0 !important; padding: 0 20px !important; height: 64px !important; min-height: 64px !important; background: rgba(255,255,255,.84) !important; border: 1px solid rgba(60,55,48,.16) !important; border-radius: 8px !important; box-shadow: 0 18px 44px rgba(28,37,25,.08), inset 0 1px 0 rgba(255,255,255,.9) !important; } .ys-input-icon { color: #22442c !important; flex-shrink: 0; } .ys-input { flex: 1; min-width: 0; height: auto !important; border: none !important; outline: none !important; box-shadow: none !important; background: transparent !important; color: #17351f !important; font-family: inherit !important; font-size: 19px !important; font-weight: 750 !important; letter-spacing: 0 !important; } .ys-input::placeholder { color: rgba(29,36,24,.48) !important; font-weight: 650 !important; } .ys-input:focus, .ys-input:focus-visible { border: none !important; outline: none !important; box-shadow: none !important; } .ys-close { position: relative; z-index: 2; width: 46px !important; height: 46px !important; border-radius: 8px !important; background: rgba(255,255,255,.58) !important; border: 1px solid rgba(24,47,30,.16) !important; color: #17351f !important; display: flex; align-items: center; justify-content: center; transition: background-color .15s, color .15s, transform .15s, border-color .15s !important; } .ys-close:hover { background: #17351f !important; border-color: #17351f !important; color: #f6c55a !important; transform: translateY(-1px); } .ys-quick { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; padding: 18px 36px 22px !important; } .ys-quick button { min-height: 38px; padding: 0 16px !important; border: 1px solid rgba(24,47,30,.16) !important; border-radius: 999px !important; background: rgba(255,255,255,.54) !important; color: #304731 !important; font-size: 13px !important; font-weight: 800 !important; box-shadow: none !important; transition: background-color .15s, color .15s, border-color .15s, transform .15s !important; } .ys-quick button:hover { background: #17351f !important; border-color: #17351f !important; color: #f6c55a !important; transform: translateY(-1px); } .ys-results { position: relative; z-index: 1; overflow-y: auto !important; padding: 24px 28px 30px !important; border-top: 1px solid rgba(46,39,25,.11); } .ys-section-title { padding: 0 !important; margin: 0 0 12px !important; color: #a06d22 !important; font-size: 12px !important; font-weight: 900 !important; letter-spacing: .16em !important; text-transform: uppercase !important; } .ys-section-title:not(:first-child) { margin-top: 26px !important; } .ys-hint { display: flex; min-height: 190px; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 28px 18px !important; text-align: center; color: rgba(29,36,24,.66) !important; font-size: 15px !important; font-weight: 650; border: 1px solid rgba(24,47,30,.1); border-radius: 8px !important; background: linear-gradient(135deg, rgba(255,255,255,.74), rgba(252,246,229,.62)) !important; } .ys-hint strong { color: #17351f !important; font-family: Georgia, 'Times New Roman', serif !important; font-size: clamp(24px, 3vw, 34px) !important; line-height: 1.02 !important; font-weight: 700 !important; letter-spacing: 0 !important; } .ys-hint span { max-width: 480px; line-height: 1.5; } .ys-empty-link { margin-top: 10px; padding: 12px 18px; border-radius: 8px; background: #17351f; color: #f6c55a; font-weight: 900; } .ys-row { position: relative; display: flex !important; align-items: center !important; gap: 16px !important; margin: 10px 0 !important; padding: 14px 16px !important; min-height: 92px; border: 1px solid rgba(24,47,30,.12) !important; border-radius: 8px !important; background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(252,246,229,.78)) !important; box-shadow: 0 12px 36px rgba(30,38,25,.06), inset 0 1px 0 rgba(255,255,255,.86) !important; transition: background-color .15s, border-color .15s, box-shadow .15s, transform .15s !important; } .ys-row::before { display: none !important; } .ys-row:hover, .ys-row.is-active { border-color: rgba(160,109,34,.36) !important; box-shadow: 0 18px 46px rgba(30,38,25,.11), inset 0 1px 0 rgba(255,255,255,.86) !important; transform: translateY(-1px) !important; outline: none !important; } .ys-row-img { width: 68px !important; height: 68px !important; border-radius: 8px !important; background: radial-gradient(circle at 30% 20%, rgba(244,185,66,.34), transparent 55%), linear-gradient(135deg, #efe2c4, #f9f4e6) !important; border: 1px solid rgba(160,109,34,.22) !important; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.86) !important; overflow: hidden; } .ys-row-img img { width: 64%; height: 64%; object-fit: contain; border-radius: 6px !important; } .ys-cat-row { min-height: 92px; } .ys-cat-img { width: 68px !important; height: 68px !important; border-radius: 8px !important; color: #17351f !important; font-family: Georgia, 'Times New Roman', serif !important; font-size: 34px !important; font-weight: 700 !important; letter-spacing: 0 !important; } .ys-row-body { flex: 1; min-width: 0; } .ys-row-cat { color: #5f7b55 !important; font-size: 11px !important; font-weight: 760 !important; text-transform: uppercase; letter-spacing: .14em !important; margin-bottom: 3px !important; } .ys-row-name { color: #17351f !important; font-family: 'Onest', system-ui, sans-serif !important; font-weight: 760 !important; font-size: 18px !important; line-height: 1.14 !important; letter-spacing: 0 !important; } .ys-row-meta { max-width: 640px; color: rgba(29,36,24,.58) !important; font-size: 13px !important; line-height: 1.35 !important; margin-top: 5px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ys-row-price { padding-left: 18px; color: #17351f !important; font-family: 'Onest', system-ui, sans-serif !important; font-weight: 820 !important; font-size: 21px !important; letter-spacing: 0 !important; white-space: nowrap; flex-shrink: 0; } .ys-row-all { background: linear-gradient(90deg, rgba(244,185,66,.18), rgba(255,252,244,.78)) !important; } .ys-row mark { background: linear-gradient(180deg, rgba(244,185,66,.12), rgba(244,185,66,.3)) !important; color: inherit !important; border-radius: 5px !important; padding: 0 4px !important; } @media (max-width: 720px) { .ys-overlay { padding: 10px !important; align-items: flex-start !important; } .ys-modal { max-height: calc(100svh - 20px) !important; border-radius: 8px !important; } .ys-head { padding: 24px 18px 0 !important; } .ys-title { max-width: calc(100% - 54px); font-size: 42px !important; } .ys-close { width: 42px !important; height: 42px !important; } .ys-input-wrap { height: 58px !important; min-height: 58px !important; margin: 20px 18px 0 !important; padding: 0 15px !important; } .ys-input { font-size: 16px !important; } .ys-quick { padding: 18px 18px !important; } .ys-results { padding: 18px 14px 22px !important; } .ys-row { align-items: flex-start !important; min-height: 86px; padding: 12px !important; gap: 12px !important; } .ys-row-img, .ys-cat-img { width: 58px !important; height: 58px !important; } .ys-row-name { font-size: 16px !important; font-weight: 760 !important; } .ys-row-price { padding-left: 0; margin-left: auto; font-size: 17px !important; font-weight: 780 !important; } } @media (max-width: 480px) { .ys-title { font-size: 36px !important; } .ys-row { flex-wrap: wrap; } .ys-row-body { flex-basis: calc(100% - 70px); } .ys-row-price { width: 100%; padding-left: 70px; margin-top: -8px; } .ys-row-meta { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } } /* CODEX SEARCH PREMIUM END */ /* CODEX FAVORITES PREMIUM START */ body[data-page-source="favorites.html"] main { background: radial-gradient(circle at 12% 8%, rgba(244,185,66,.16), transparent 30%), radial-gradient(circle at 86% 18%, rgba(91,168,79,.12), transparent 28%), var(--c-bg); } .favs-page { padding: 42px 0 100px; } .favs-crumbs { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; color: rgba(29,36,24,.58); font-size: 13px; font-weight: 650; } .favs-crumbs a { color: inherit; } .favs-crumbs span:last-child { color: #17351f; } .favs-hero { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; padding: clamp(26px, 4vw, 42px); overflow: hidden; border: 1px solid rgba(244,185,66,.28); border-radius: 8px; background: linear-gradient(120deg, rgba(255,252,244,.96), rgba(245,239,222,.9)), #fffaf0; box-shadow: 0 24px 70px rgba(30,38,25,.08), inset 0 1px 0 rgba(255,255,255,.82); } .favs-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(244,185,66,.18), transparent 30%, rgba(47,95,30,.08)), radial-gradient(circle at 88% 18%, rgba(244,185,66,.18), transparent 24%); } .favs-hero > * { position: relative; z-index: 1; } .favs-kicker, .favs-empty-kicker, .favs-toolbar-kicker { color: #a06d22; font-size: 12px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; } .favs-title { margin: 8px 0 0; color: #17351f; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(42px, 7vw, 86px); font-weight: 700; line-height: .92; letter-spacing: 0; } .favs-lead { max-width: 620px; margin: 18px 0 0; color: rgba(29,36,24,.62); font-size: 16px; line-height: 1.55; font-weight: 600; } .favs-hero-link, .favs-more-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 8px; background: #17351f; color: #f6c55a; font-weight: 850; white-space: nowrap; transition: transform .15s, box-shadow .15s, background-color .15s; } .favs-hero-link:hover, .favs-more-link:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(23,53,31,.18); } .favs-empty-state { position: relative; overflow: hidden; min-height: 390px; padding: clamp(38px, 6vw, 72px) 24px; text-align: center; border: 1px solid rgba(244,185,66,.3); border-radius: 8px; background: linear-gradient(135deg, rgba(255,255,255,.86), rgba(252,246,229,.78)), #fffaf0; box-shadow: 0 22px 64px rgba(30,38,25,.08), inset 0 1px 0 rgba(255,255,255,.88); } .favs-empty-state::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 0%, rgba(244,185,66,.2), transparent 30%), linear-gradient(90deg, rgba(244,185,66,.12), transparent 22%, transparent 78%, rgba(47,95,30,.08)); } .favs-empty-state > * { position: relative; z-index: 1; } .favs-empty-mark { width: 86px; height: 86px; margin: 0 auto 22px; display: flex; align-items: center; justify-content: center; color: #b9443d; border: 1px solid rgba(160,109,34,.24); border-radius: 8px; background: radial-gradient(circle at 30% 18%, rgba(244,185,66,.34), transparent 55%), linear-gradient(135deg, #efe2c4, #f9f4e6); box-shadow: inset 0 1px 0 rgba(255,255,255,.86); } .favs-empty-state h2 { margin: 8px 0 12px; color: #17351f; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(30px, 4vw, 48px); font-weight: 700; line-height: 1; } .favs-empty-state p { max-width: 560px; margin: 0 auto 26px; color: rgba(29,36,24,.62); font-size: 16px; line-height: 1.55; font-weight: 600; } .favs-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .favs-empty-actions .btn { border-radius: 8px; } .favs-filled { border: 1px solid rgba(244,185,66,.24); border-radius: 8px; background: rgba(255,252,244,.42); box-shadow: 0 18px 54px rgba(30,38,25,.06); } .favs-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 24px; border-bottom: 1px solid rgba(46,39,25,.1); } .favs-count { margin-top: 5px; color: #17351f; font-family: Georgia, 'Times New Roman', serif; font-size: 30px; font-weight: 700; line-height: 1; } .favs-grid { padding: 24px; } body[data-page-source="favorites.html"] .favs-grid .pcard { border-radius: 8px; border-color: rgba(24,47,30,.12); background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(252,246,229,.82)), #fffaf0; box-shadow: 0 14px 40px rgba(30,38,25,.08), inset 0 1px 0 rgba(255,255,255,.86); } body[data-page-source="favorites.html"] .favs-grid .pcard:hover { transform: translateY(-3px); border-color: rgba(160,109,34,.34); box-shadow: 0 22px 54px rgba(30,38,25,.12), inset 0 1px 0 rgba(255,255,255,.86); } body[data-page-source="favorites.html"] .favs-grid .pcard-img { border-radius: 8px; background: radial-gradient(circle at 28% 18%, rgba(244,185,66,.24), transparent 52%), linear-gradient(135deg, #efe2c4, #fffaf0); } body[data-page-source="favorites.html"] .favs-grid .pcard-name { color: #17351f; font-size: 17px; font-weight: 760; line-height: 1.16; letter-spacing: 0; } body[data-page-source="favorites.html"] .favs-grid .pcard-price { color: #17351f; font-size: 21px; font-weight: 820; letter-spacing: 0; } @media (max-width: 720px) { .favs-page { padding: 24px 0 64px; } .favs-hero { align-items: flex-start; flex-direction: column; padding: 24px 18px; } .favs-title { font-size: 42px; } .favs-lead { font-size: 14px; } .favs-hero-link, .favs-more-link { width: 100%; } .favs-empty-state { min-height: 0; padding: 36px 18px; } .favs-empty-state h2 { font-size: 32px; } .favs-empty-state p { font-size: 14px; } .favs-empty-actions .btn { width: 100%; } .favs-toolbar { align-items: stretch; flex-direction: column; padding: 18px; } .favs-count { font-size: 26px; } .favs-grid { padding: 16px; } } /* CODEX FAVORITES PREMIUM END */ /* CODEX COMPARE PRODUCT CART PREMIUM START */ body[data-page-source="compare.html"], body[data-page-source="product.html"], body[data-page-source="cart.html"] { background: radial-gradient(circle at 12% 8%, rgba(244,185,66,.16), transparent 30%), radial-gradient(circle at 86% 18%, rgba(91,168,79,.12), transparent 28%), var(--c-bg) !important; } body[data-page-source="compare.html"] .crumbs, body[data-page-source="product.html"] .crumbs, body[data-page-source="cart.html"] .crumbs { color: rgba(29,36,24,.58) !important; font-weight: 650 !important; } /* Compare */ body[data-page-source="compare.html"] .cmp-wrap { padding: 42px 0 100px !important; } body[data-page-source="compare.html"] .cmp-head { position: relative; overflow: hidden; align-items: flex-end !important; margin-bottom: 28px !important; padding: clamp(26px, 4vw, 42px) !important; border: 1px solid rgba(244,185,66,.28); border-radius: 8px; background: linear-gradient(120deg, rgba(255,252,244,.96), rgba(245,239,222,.9)), #fffaf0; box-shadow: 0 24px 70px rgba(30,38,25,.08), inset 0 1px 0 rgba(255,255,255,.82); } body[data-page-source="compare.html"] .cmp-head::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(244,185,66,.18), transparent 30%, rgba(47,95,30,.08)), radial-gradient(circle at 88% 18%, rgba(244,185,66,.18), transparent 24%); } body[data-page-source="compare.html"] .cmp-head > * { position: relative; z-index: 1; } body[data-page-source="compare.html"] .cmp-head h1, body[data-page-source="cart.html"] .display-l { color: #17351f !important; font-family: Georgia, 'Times New Roman', serif !important; font-size: clamp(42px, 7vw, 86px) !important; font-weight: 700 !important; line-height: .92 !important; letter-spacing: 0 !important; } body[data-page-source="compare.html"] #cmp-subtitle { margin-top: 18px !important; color: rgba(29,36,24,.62) !important; font-size: 16px !important; line-height: 1.55 !important; font-weight: 600 !important; } body[data-page-source="compare.html"] .cmp-tools[hidden] { display: none !important; } body[data-page-source="compare.html"] .cmp-tools { padding: 12px; border: 1px solid rgba(24,47,30,.12); border-radius: 8px; background: rgba(255,255,255,.52); } body[data-page-source="compare.html"] .cmp-tools label { color: #304731 !important; font-weight: 760; } body[data-page-source="compare.html"] .cmp-tools .cmp-clear { border-radius: 8px !important; border-color: rgba(24,47,30,.16) !important; background: rgba(255,255,255,.58) !important; color: #17351f !important; font-weight: 760 !important; } body[data-page-source="compare.html"] .cmp-tools .cmp-clear:hover { background: #17351f !important; border-color: #17351f !important; color: #f6c55a !important; } body[data-page-source="compare.html"] .cmp-empty { position: relative; overflow: hidden; min-height: 390px; padding: clamp(38px, 6vw, 72px) 24px !important; border: 1px solid rgba(244,185,66,.3); border-radius: 8px !important; background: linear-gradient(135deg, rgba(255,255,255,.86), rgba(252,246,229,.78)), #fffaf0 !important; box-shadow: 0 22px 64px rgba(30,38,25,.08), inset 0 1px 0 rgba(255,255,255,.88); } body[data-page-source="compare.html"] .cmp-empty::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 0%, rgba(244,185,66,.2), transparent 30%), linear-gradient(90deg, rgba(244,185,66,.12), transparent 22%, transparent 78%, rgba(47,95,30,.08)); } body[data-page-source="compare.html"] .cmp-empty > * { position: relative; z-index: 1; } body[data-page-source="compare.html"] .cmp-empty .ico { width: 86px !important; height: 86px !important; border-radius: 8px !important; background: radial-gradient(circle at 30% 18%, rgba(244,185,66,.34), transparent 55%), linear-gradient(135deg, #efe2c4, #f9f4e6) !important; border: 1px solid rgba(160,109,34,.24); color: #17351f !important; } body[data-page-source="compare.html"] .cmp-empty h2 { color: #17351f; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(30px, 4vw, 48px); font-weight: 700; line-height: 1; } body[data-page-source="compare.html"] .cmp-empty p { max-width: 620px; margin-left: auto !important; margin-right: auto !important; color: rgba(29,36,24,.62) !important; font-size: 16px; line-height: 1.55; font-weight: 600; } body[data-page-source="compare.html"] .cmp-empty .btn { transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, color .16s ease !important; box-shadow: 0 12px 26px rgba(23,53,31,.14) !important; } body[data-page-source="compare.html"] .cmp-empty .btn:hover { transform: translateY(-2px) !important; box-shadow: 0 18px 34px rgba(23,53,31,.2) !important; } body[data-page-source="compare.html"] .cmp-empty .btn:active { transform: translateY(0) scale(.98) !important; } body[data-page-source="compare.html"] .cmp-scroll { border: 1px solid rgba(244,185,66,.24); border-radius: 8px !important; background: rgba(255,252,244,.42) !important; box-shadow: 0 18px 54px rgba(30,38,25,.06); } body[data-page-source="compare.html"] .cmp-table { border-collapse: separate !important; border-spacing: 0 !important; } body[data-page-source="compare.html"] .cmp-table th, body[data-page-source="compare.html"] .cmp-table td { border-bottom: 1px solid rgba(46,39,25,.1); } body[data-page-source="compare.html"] .cmp-table thead th { background: linear-gradient(135deg, rgba(255,255,255,.86), rgba(252,246,229,.78)) !important; } body[data-page-source="compare.html"] .cmp-table th.cmp-rowtitle { color: #a06d22 !important; font-size: 12px !important; font-weight: 900 !important; letter-spacing: .14em; text-transform: uppercase; background: #fffaf0 !important; } body[data-page-source="compare.html"] .cmp-card { gap: 12px !important; } body[data-page-source="compare.html"] .cmp-card-img { border-radius: 8px !important; background: radial-gradient(circle at 28% 18%, rgba(244,185,66,.24), transparent 52%), linear-gradient(135deg, #efe2c4, #fffaf0) !important; border: 1px solid rgba(24,47,30,.12); box-shadow: 0 12px 32px rgba(30,38,25,.08); } body[data-page-source="compare.html"] .cmp-card-name { color: #17351f !important; font-size: 15px !important; font-weight: 760 !important; line-height: 1.18 !important; letter-spacing: 0 !important; } body[data-page-source="compare.html"] .cmp-card-price { color: #17351f !important; font-size: 21px !important; font-weight: 820 !important; letter-spacing: 0 !important; } body[data-page-source="compare.html"] .cmp-card-buy { border-radius: 8px !important; background: #17351f !important; color: #f6c55a !important; font-weight: 820 !important; } body[data-page-source="compare.html"] .cmp-card-close { border-radius: 8px !important; background: rgba(255,255,255,.58) !important; } /* Product */ body[data-page-source="product.html"] .prod { padding: 42px 0 110px !important; } body[data-page-source="product.html"] .prod-grid { gap: clamp(24px, 4vw, 56px) !important; align-items: start; } body[data-page-source="product.html"] .prod-gallery, body[data-page-source="product.html"] .prod-info { position: relative; overflow: hidden; border: 1px solid rgba(244,185,66,.26); border-radius: 8px !important; background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(252,246,229,.78)), #fffaf0 !important; box-shadow: 0 22px 64px rgba(30,38,25,.08), inset 0 1px 0 rgba(255,255,255,.88); } body[data-page-source="product.html"] .prod-gallery::before, body[data-page-source="product.html"] .prod-info::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 14% 6%, rgba(244,185,66,.16), transparent 32%), linear-gradient(90deg, rgba(244,185,66,.1), transparent 34%, rgba(47,95,30,.06)); } body[data-page-source="product.html"] .prod-gallery > *, body[data-page-source="product.html"] .prod-info > * { position: relative; z-index: 1; } body[data-page-source="product.html"] .prod-gallery { padding: clamp(22px, 4vw, 44px) !important; } body[data-page-source="product.html"] .prod-gallery .prod-photo, body[data-page-source="product.html"] .prod-gallery > img { border-radius: 8px !important; box-shadow: 0 18px 46px rgba(30,38,25,.1); } body[data-page-source="product.html"] .prod-thumb { border-radius: 8px !important; background: rgba(255,255,255,.7) !important; border-color: rgba(24,47,30,.14) !important; } body[data-page-source="product.html"] .prod-thumb.is-active { border-color: #a06d22 !important; box-shadow: 0 8px 18px rgba(160,109,34,.14); } body[data-page-source="product.html"] .prod-info { padding: clamp(26px, 4vw, 42px) !important; } body[data-page-source="product.html"] .prod-info .prod-cat { color: #a06d22 !important; font-size: 12px !important; font-weight: 900 !important; letter-spacing: .18em !important; } body[data-page-source="product.html"] .prod-info h1 { color: #17351f !important; font-family: Georgia, 'Times New Roman', serif !important; font-size: clamp(28px, 3.4vw, 44px) !important; font-weight: 700 !important; line-height: 1.06 !important; letter-spacing: 0 !important; } body[data-page-source="product.html"] .prod-info .prod-short { color: rgba(29,36,24,.62) !important; font-size: 16px !important; font-weight: 600; } body[data-page-source="product.html"] .prod-info .prod-price { color: #17351f !important; font-size: clamp(34px, 4vw, 46px) !important; font-weight: 820 !important; letter-spacing: 0 !important; } body[data-page-source="product.html"] .prod-meta { gap: 12px !important; border-color: rgba(46,39,25,.1) !important; } body[data-page-source="product.html"] .prod-meta div { padding: 14px; border: 1px solid rgba(24,47,30,.1); border-radius: 8px; background: rgba(255,255,255,.48); } body[data-page-source="product.html"] .prod-meta dt { color: #5f7b55 !important; font-weight: 860 !important; } body[data-page-source="product.html"] .prod-meta dd { color: #17351f !important; font-weight: 650 !important; } body[data-page-source="product.html"] .prod-buy-row .btn-dark, body[data-page-source="product.html"] #add-btn { border-radius: 8px !important; background: #17351f !important; color: #f6c55a !important; font-weight: 820 !important; box-shadow: 0 14px 28px rgba(23,53,31,.18); } body[data-page-source="product.html"] .qty-stepper { border-radius: 8px !important; border-color: rgba(24,47,30,.16) !important; background: rgba(255,255,255,.58); } body[data-page-source="product.html"] .prod-desc { padding-top: 22px; border-top: 1px solid rgba(46,39,25,.1); color: rgba(29,36,24,.72); } /* Cart refinement */ body[data-page-source="cart.html"] .cart { padding: 42px 0 110px !important; } body[data-page-source="cart.html"] .cart .wrap > .display-l, body[data-page-source="cart.html"] .cart .wrap > h1.display-l { position: relative; overflow: hidden; margin-bottom: 28px !important; padding: clamp(26px, 4vw, 42px) !important; border: 1px solid rgba(244,185,66,.28); border-radius: 8px; background: linear-gradient(120deg, rgba(255,252,244,.96), rgba(245,239,222,.9)), #fffaf0; box-shadow: 0 24px 70px rgba(30,38,25,.08), inset 0 1px 0 rgba(255,255,255,.82); } body[data-page-source="cart.html"] .cart-empty-state { border-radius: 8px !important; background: linear-gradient(135deg, rgba(255,255,255,.86), rgba(252,246,229,.78)), #fffaf0 !important; border-color: rgba(244,185,66,.3) !important; } body[data-page-source="cart.html"] .cart-empty-state h2 { font-family: Georgia, 'Times New Roman', serif !important; font-weight: 700 !important; letter-spacing: 0 !important; } body[data-page-source="cart.html"] .cart-empty-icon { border-radius: 8px !important; background: radial-gradient(circle at 30% 18%, rgba(244,185,66,.34), transparent 55%), linear-gradient(135deg, #efe2c4, #f9f4e6) !important; } body[data-page-source="cart.html"] .cart-row { border-radius: 8px !important; background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(252,246,229,.78)), #fffaf0 !important; } body[data-page-source="cart.html"] .cart-row-img { border-radius: 8px !important; background: radial-gradient(circle at 28% 18%, rgba(244,185,66,.24), transparent 52%), linear-gradient(135deg, #efe2c4, #fffaf0) !important; } body[data-page-source="cart.html"] .cart-row-name { color: #17351f !important; font-weight: 760 !important; letter-spacing: 0 !important; } body[data-page-source="cart.html"] .cart-row-price { color: #17351f !important; font-weight: 820 !important; letter-spacing: 0 !important; } body[data-page-source="cart.html"] .cart-summary { border-radius: 8px !important; background: radial-gradient(320px 220px at 88% 0%, rgba(244,185,66,.22), transparent 66%), linear-gradient(145deg, #17351f 0%, #2f5f1e 70%, #20372A 100%) !important; } body[data-page-source="cart.html"] .cart-summary h3 { font-family: Georgia, 'Times New Roman', serif !important; font-weight: 700 !important; letter-spacing: 0 !important; } @media (max-width: 720px) { body[data-page-source="compare.html"] .cmp-wrap, body[data-page-source="product.html"] .prod, body[data-page-source="cart.html"] .cart { padding: 24px 0 64px !important; } body[data-page-source="compare.html"] .cmp-head, body[data-page-source="cart.html"] .cart .wrap > h1.display-l { padding: 24px 18px !important; } body[data-page-source="compare.html"] .cmp-head h1, body[data-page-source="cart.html"] .display-l { font-size: 42px !important; } body[data-page-source="compare.html"] .cmp-tools { width: 100%; align-items: stretch; flex-direction: column; } body[data-page-source="compare.html"] .cmp-tools .cmp-clear { min-height: 42px; } body[data-page-source="product.html"] .prod-info h1 { font-size: 28px !important; line-height: 1.08 !important; } body[data-page-source="product.html"] .prod-meta { grid-template-columns: 1fr !important; } body[data-page-source="product.html"] .prod-buy-row { flex-direction: column; } } /* CODEX COMPARE PRODUCT CART PREMIUM END */ /* CODEX DELIVERY PREMIUM REWORK START */ body[data-page-source="delivery.html"] { background: radial-gradient(circle at 12% 8%, rgba(244,185,66,.12), transparent 30%), radial-gradient(circle at 86% 18%, rgba(91,168,79,.10), transparent 28%), var(--c-bg) !important; } body[data-page-source="delivery.html"] .dl-hero { position: relative; overflow: hidden; padding: clamp(44px, 5.8vw, 72px) 0 clamp(48px, 6vw, 76px) !important; background: radial-gradient(760px 420px at 82% 16%, rgba(244,185,66,.16), transparent 64%), linear-gradient(135deg, #17351f 0%, #2f5f1e 64%, #20372a 100%) !important; color: #fff8ea !important; } body[data-page-source="delivery.html"] .dl-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(244,185,66,.14), transparent 28%, rgba(255,255,255,.04)), radial-gradient(circle at 18% 20%, rgba(255,248,234,.08), transparent 24%); } body[data-page-source="delivery.html"] .dl-hero .wrap { position: relative; z-index: 1; } body[data-page-source="delivery.html"] .dl-hero .crumbs, body[data-page-source="delivery.html"] .dl-hero .crumbs a, body[data-page-source="delivery.html"] .dl-hero .crumbs span { color: rgba(255,248,234,.72) !important; } body[data-page-source="delivery.html"] .dl-hero .eyebrow { background: rgba(244,185,66,.12) !important; border: 1px solid rgba(244,185,66,.30) !important; color: #f6c55a !important; font-size: 12px !important; font-weight: 900 !important; letter-spacing: .18em !important; } body[data-page-source="delivery.html"] .dl-hero h1 { max-width: 780px; color: #fff8ea !important; font-family: 'Onest', system-ui, sans-serif !important; font-size: clamp(36px, 4.8vw, 64px) !important; font-weight: 780 !important; line-height: 1.02 !important; letter-spacing: -0.018em !important; text-wrap: balance; } body[data-page-source="delivery.html"] .dl-hero p { max-width: 760px !important; color: rgba(255,248,234,.82) !important; font-size: clamp(15px, 1.3vw, 18px) !important; line-height: 1.56 !important; font-weight: 560 !important; } body[data-page-source="delivery.html"] .dl-methods { padding: clamp(48px, 6vw, 82px) 0 clamp(70px, 7vw, 104px) !important; } body[data-page-source="delivery.html"] .dl-methods-grid { gap: 18px !important; } body[data-page-source="delivery.html"] .dl-method { min-height: 270px; padding: 26px !important; border: 1px solid rgba(244,185,66,.22); border-radius: 8px !important; background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(252,246,229,.78)), #fffaf0 !important; box-shadow: 0 18px 54px rgba(30,38,25,.07), inset 0 1px 0 rgba(255,255,255,.86); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease !important; } body[data-page-source="delivery.html"] .dl-method:hover { transform: translateY(-3px) !important; border-color: rgba(160,109,34,.32); box-shadow: 0 24px 64px rgba(30,38,25,.11), inset 0 1px 0 rgba(255,255,255,.86); } body[data-page-source="delivery.html"] .dl-method-icon { width: 52px !important; height: 52px !important; margin-bottom: 18px !important; border-radius: 14px !important; color: #FFF8EA !important; background: #173326 !important; border: none; box-shadow: none; } body[data-page-source="delivery.html"] .dl-method h3 { color: #17351f !important; font-family: 'Onest', system-ui, sans-serif !important; font-size: 22px !important; font-weight: 800 !important; line-height: 1.12 !important; letter-spacing: -0.015em !important; } body[data-page-source="delivery.html"] .dl-method .price { color: #a06d22 !important; font-size: 17px !important; font-weight: 850 !important; } body[data-page-source="delivery.html"] .dl-method .term { color: #5f7b55 !important; font-weight: 760 !important; } body[data-page-source="delivery.html"] .dl-method p { color: rgba(29,36,24,.64) !important; font-weight: 560 !important; } body[data-page-source="delivery.html"] .dl-methods .wrap > div[style*="linear-gradient"] { margin-top: 28px !important; padding: 26px 28px !important; border: 1px solid rgba(244,185,66,.24); border-radius: 8px !important; background: radial-gradient(circle at 12% 0%, rgba(244,185,66,.18), transparent 42%), linear-gradient(135deg, #17351f 0%, #2f5f1e 68%, #20372a 100%) !important; color: #fff8ea !important; box-shadow: 0 18px 48px rgba(23,53,31,.16); } body[data-page-source="delivery.html"] .dl-methods .wrap > div[style*="linear-gradient"] svg { color: #f6c55a !important; } body[data-page-source="delivery.html"] .dl-methods .wrap > div[style*="linear-gradient"] div { color: inherit !important; } body[data-page-source="delivery.html"] .dl-tracker { padding: clamp(64px, 7vw, 96px) 0 !important; background: radial-gradient(640px 360px at 86% 10%, rgba(244,185,66,.16), transparent 64%), linear-gradient(135deg, #17351f 0%, #20382a 54%, #14231a 100%) !important; color: #fff8ea !important; } body[data-page-source="delivery.html"] .dl-tracker .eyebrow { color: #f6c55a !important; } body[data-page-source="delivery.html"] .dl-tracker h2 { color: #fff8ea !important; font-family: 'Onest', system-ui, sans-serif !important; font-size: clamp(34px, 5vw, 64px) !important; font-weight: 850 !important; line-height: .98 !important; letter-spacing: -0.03em !important; } body[data-page-source="delivery.html"] .dl-tracker .sub { color: rgba(255,248,234,.82) !important; font-size: 16px !important; font-weight: 550 !important; } body[data-page-source="delivery.html"] .dl-trk-form { max-width: 680px !important; padding: 8px; border: 1px solid rgba(255,248,234,.14); border-radius: 8px; background: rgba(255,248,234,.08); } body[data-page-source="delivery.html"] .dl-trk-form input { min-height: 56px; border-radius: 8px !important; background: rgba(255,255,255,.1) !important; border: 1px solid rgba(255,248,234,.18) !important; color: #fff8ea !important; } body[data-page-source="delivery.html"] .dl-trk-form button { min-height: 56px; border-radius: 8px !important; background: #f6c55a !important; color: #17351f !important; font-weight: 850 !important; } body[data-page-source="delivery.html"] .dl-trk-result { border-radius: 8px !important; background: rgba(255,248,234,.08) !important; border: 1px solid rgba(255,248,234,.14) !important; } body[data-page-source="delivery.html"] .dl-faq { padding: clamp(68px, 7vw, 100px) 0 !important; background: var(--c-bg-alt) !important; } body[data-page-source="delivery.html"] .dl-faq .eyebrow { color: #a06d22 !important; font-weight: 900 !important; } body[data-page-source="delivery.html"] .dl-faq .display-m { color: #17351f !important; font-family: 'Onest', system-ui, sans-serif !important; font-size: clamp(32px, 5vw, 58px) !important; font-weight: 850 !important; line-height: 1 !important; letter-spacing: -0.03em !important; } body[data-page-source="delivery.html"] .dl-faq-list { max-width: 940px !important; } body[data-page-source="delivery.html"] .dl-faq details { border: 1px solid rgba(24,47,30,.1); border-radius: 8px !important; background: var(--c-bg) !important; box-shadow: none !important; } body[data-page-source="delivery.html"] .dl-faq details[open] { background: var(--c-bg-alt) !important; box-shadow: 0 14px 34px rgba(30,38,25,.06) !important; } body[data-page-source="delivery.html"] .dl-faq summary { color: #17351f !important; font-size: 17px !important; font-weight: 760 !important; letter-spacing: 0 !important; } body[data-page-source="delivery.html"] .dl-faq details > p { color: rgba(29,36,24,.66) !important; font-weight: 560 !important; } @media (max-width: 720px) { body[data-page-source="delivery.html"] .dl-hero { padding: 34px 0 42px !important; } body[data-page-source="delivery.html"] .dl-hero h1 { font-size: 36px !important; line-height: 1.02 !important; } body[data-page-source="delivery.html"] .dl-hero p { font-size: 15px !important; } body[data-page-source="delivery.html"] .dl-method { min-height: 0; padding: 22px !important; } body[data-page-source="delivery.html"] .dl-method h3 { font-size: 21px !important; } body[data-page-source="delivery.html"] .dl-methods .wrap > div[style*="linear-gradient"] { align-items: flex-start !important; flex-direction: column; } body[data-page-source="delivery.html"] .dl-tracker h2 { font-size: 38px !important; } body[data-page-source="delivery.html"] .dl-trk-form input, body[data-page-source="delivery.html"] .dl-trk-form button { width: 100%; min-width: 0; } } /* CODEX DELIVERY PREMIUM REWORK END */ /* ─── КОНЦЕПЦИЯ: светлые хиро (крем + узор-россыпь ингредиентов) на всех страницах ── */ /* Уход от тёмных шапок. Узор — тот же язык, что на обложках блога (--bl-pat-scatter). */ /* Блог (.bl-hero) НЕ включаем — у него свои обложки-рубрики. */ /* ⚠️ Селекторы префиксованы `body `, чтобы поднять специфичность (0,1,1) ВЫШЕ пер-страничных */ /* inline-