/* ══════════════════════════════════════════════════════════════
   DEFAULT THEME — 2026 Design System
   Modern, minimal, fluid, dark-mode ready
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   TYPOGRAPHY & VERTICAL RHYTHM
   Единая ритмическая система: отступы между «пунктами»
   (hero / text / columns / products / cta …) и эстетичная
   типографика заголовков и абзацев.
   ══════════════════════════════════════════════════════════════ */
:root {
    /* 8-px grid spacing scale */
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
    --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
    --s-9: 80px; --s-10: 120px;

    /* Vertical rhythm для блоков (fluid) */
    --block-py:        clamp(48px, 5.5vw, 88px);
    --block-py-tight:  clamp(32px, 3.5vw, 56px);
    --block-py-loose:  clamp(72px, 8vw, 128px);
    --block-gap:       clamp(16px, 1.8vw, 28px);

    /* Type-scale (modular ~1.2) */
    --fs-xs:      clamp(12px, .72vw + 10px, 13px);
    --fs-sm:      clamp(13px, .8vw  + 11px, 14.5px);
    --fs-base:    clamp(15px, .9vw  + 12px, 17px);
    --fs-lg:      clamp(17px, 1.1vw + 13.5px, 20px);
    --fs-xl:      clamp(20px, 1.4vw + 15px, 24px);
    --fs-2xl:     clamp(24px, 2vw   + 16px, 32px);
    --fs-3xl:     clamp(30px, 3vw   + 18px, 44px);
    --fs-4xl:     clamp(38px, 4vw   + 20px, 60px);
    --fs-display: clamp(46px, 5vw   + 24px, 84px);

    --measure:   65ch;
    --lh-tight:  1.14;
    --lh-snug:   1.3;
    --lh-base:   1.65;
    --lh-loose:  1.8;
}

/* Body — улучшенный рендеринг и базовая плотность текста */
body {
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-variant-numeric: oldstyle-nums proportional-nums;
}

/* Заголовки — компактная подача, balance-wrap, негативный трекинг */
.site-content h1, .site-content h2, .site-content h3,
.site-content h4, .site-content h5, .site-content h6,
article h1, article h2, article h3 {
    text-wrap: balance;
    font-family: var(--font-heading, inherit);
}
.site-content h1, .block-text h1, .block-hero h1, article h1 {
    font-size: var(--fs-4xl); line-height: var(--lh-tight);
    letter-spacing: -.025em; font-weight: 800;
}
.site-content h2, .block-text h2, article h2 {
    font-size: var(--fs-3xl); line-height: var(--lh-tight);
    letter-spacing: -.02em; font-weight: 700;
}
.site-content h3, .block-text h3, article h3 {
    font-size: var(--fs-2xl); line-height: var(--lh-snug);
    letter-spacing: -.015em; font-weight: 700;
}
.site-content h4, article h4 {
    font-size: var(--fs-xl); line-height: var(--lh-snug);
    letter-spacing: -.01em; font-weight: 600;
}
.site-content h5 { font-size: var(--fs-lg); font-weight: 600; line-height: var(--lh-snug); letter-spacing: -.005em; }
.site-content h6 {
    font-size: var(--fs-sm); font-weight: 700; line-height: 1.4;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--color-muted-dark, #64748b);
}

/* Параграфы — красивый перенос, без жёсткого max-width
   (measure-ограничение даёт «прижатие к левому краю» в широком container'е) */
.block-text p, article p {
    text-wrap: pretty;
    hyphens: auto;
    word-spacing: .005em;
}
.block-text--centered p { margin-left: auto; margin-right: auto; }

/* Списки — ритм, без жёсткого max-width */
.block-text ul, .block-text ol, article ul, article ol { }
.block-text ul li, .block-text ol li, article li {
    margin-bottom: var(--s-2);
    padding-left: 2px;
}
.block-text ul li::marker, article ul li::marker {
    color: var(--color-primary, var(--primary));
}

/* Первый элемент после заголовка плотнее */
h1 + p, h2 + p, h3 + p, h4 + p { margin-top: var(--s-3); }

/* ── Блог-пост: «пункты» с жирным термином + описание ──────
   Структура в контенте:
       <h3>Функциональные ограничения</h3>
       <p>Вводный абзац…</p>
       <ul>
           <li><strong>Примитивное приложение:</strong> описание…</li>
           <li><strong>Сомнительная точность:</strong> описание…</li>
       </ul>
   Ниже — точно под неё стили: ритм между пунктами, брендовый
   термин, читаемая длина строки. */
.post-content, .block-post-content {
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--color-text, #333);
}

.post-content p, .block-post-content p { margin: 0 0 var(--s-4); }
.post-content p + p { margin-top: 0; }

/* Лид — первый абзац, полностью обёрнутый в <strong> */
.post-content > p:first-child > strong:only-child,
.post-content > p:first-of-type > strong:only-child {
    display: block;
    font-size: var(--fs-lg);
    line-height: var(--lh-snug);
    font-weight: 600;
    color: var(--color-heading, #121216);
    letter-spacing: -.005em;
}

/* Подзаголовок-строка: <p><strong>Как это будет работать:</strong></p> */
.post-content p > strong:only-child {
    color: var(--color-heading, #121216);
}

/* Заголовки блог-поста — используем единую шкалу */
.post-content h2, .post-content h2.wp-block-heading,
.block-post-content h2 {
    font-size: var(--fs-3xl); line-height: var(--lh-tight);
    letter-spacing: -.02em; font-weight: 700;
    margin: var(--s-8) 0 var(--s-4);
    text-wrap: balance;
}
.post-content h3, .post-content h3.wp-block-heading,
.block-post-content h3 {
    font-size: var(--fs-2xl); line-height: var(--lh-snug);
    letter-spacing: -.015em; font-weight: 700;
    margin: var(--s-7) 0 var(--s-3);
    text-wrap: balance;
}
.post-content h4, .block-post-content h4 {
    font-size: var(--fs-xl); line-height: var(--lh-snug);
    letter-spacing: -.01em; font-weight: 600;
    margin: var(--s-6) 0 var(--s-3);
}
.post-content h2:first-child,
.post-content h3:first-child { margin-top: 0; }

/* Пункты списков — воздушный ритм между items */
.post-content ul, .post-content ol,
.block-post-content ul, .block-post-content ol {
    margin: var(--s-4) 0 var(--s-6);
    padding-left: 1.4em;
}
.post-content li, .block-post-content li {
    margin-bottom: var(--s-4);
    padding-left: 4px;
    line-height: var(--lh-base);
}
.post-content li:last-child, .block-post-content li:last-child { margin-bottom: 0; }
.post-content ul li::marker, .block-post-content ul li::marker {
    color: var(--color-primary, var(--primary));
    font-size: 1.1em;
}

/* «Термин: описание» — первый <strong> в элементе списка —
   выделяем брендовым цветом и уплотняем отбивку двоеточия. */
.post-content li > strong:first-child,
.block-post-content li > strong:first-child {
    color: var(--color-heading, #121216);
    font-weight: 700;
    letter-spacing: -.005em;
}
.post-content li > strong:first-child::after,
.block-post-content li > strong:first-child::after {
    content: '';
    /* расстояние между термином и описанием чуть больше обычного пробела */
    margin-right: .15em;
}

/* Картинки внутри поста — воздух сверху/снизу.
   ВАЖНО: только прямые потомки `.post-content` или внутри <p>, чтобы не ломать
   галереи/карточки товаров/любые UI-блоки со своими размерами. */
.post-content > figure,
.post-content > img,
.post-content > .wp-block-image,
.post-content > .wp-block-gallery,
.post-content > p > figure,
.post-content > p > img {
    margin: var(--s-7) 0;
    border-radius: 16px;
    overflow: hidden;
}

/* Цитаты в постах */
.post-content blockquote {
    margin: var(--s-7) 0;
    padding: var(--s-5) var(--s-6);
    border-left: 3px solid var(--color-primary, var(--primary));
    background: var(--color-surface-alt, #f8fafc);
    border-radius: 0 14px 14px 0;
    font-size: var(--fs-lg);
    line-height: 1.55;
    color: var(--color-text, #334155);
    font-style: italic;
}
.post-content blockquote p:last-child { margin-bottom: 0; }

/* Вертикальный ритм для верхнеуровневых блоков страницы */
.site-content > .block-hero,
.site-content > .block-text,
.site-content > .block-columns,
.site-content > .block-image,
.site-content > .block-gallery,
.site-content > .block-products,
.site-content > .block-video,
.site-content > .block-map,
.site-content > .block-blog-feed,
.site-content > .block-testimonials,
.site-content > .block-accordion,
.site-content > .block-tabs,
.site-content > .block-form,
.site-content > .block-features,
.site-content > .block-stats,
.site-content > .block-pricing,
.site-content > .block-section {
    padding-block: var(--block-py);
}
.site-content > .block-cta { padding-block: var(--block-py-loose); }
.site-content > .block-breadcrumbs { padding-block: var(--s-3); }

/* Соседние блоки одного фона — схлопываем двойной паддинг */
.block-section--dark + .block-section--dark,
.block-section--accent + .block-section--accent,
.block-section--gradient + .block-section--gradient { padding-top: 0; }

/* Разделитель */
.site-content hr {
    border: 0; height: 1px; margin: var(--s-8) auto;
    max-width: 240px;
    background: linear-gradient(90deg, transparent,
        color-mix(in srgb, var(--color-border, #e2e8f0) 80%, transparent),
        transparent);
}

/* Цитаты — более «дыхательный» стиль */
.block-text blockquote, article blockquote {
    font-size: var(--fs-lg);
    line-height: 1.55;
    font-style: italic;
}

/* Ссылки внутри текста — тонкое подчёркивание на дистанции */
.block-text a, article a {
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: color-mix(in srgb, var(--color-primary, var(--primary)) 30%, transparent);
    transition: text-decoration-color .2s;
}
.block-text a:hover, article a:hover {
    text-decoration-color: var(--color-primary, var(--primary));
}

/* Выделение текста */
::selection {
    background: color-mix(in srgb, var(--color-primary, var(--primary)) 22%, #fff);
    color: var(--color-heading, #121216);
}

/* Accessible focus ring */
:focus-visible {
    outline: 2px solid var(--color-primary, var(--primary));
    outline-offset: 3px;
    border-radius: 4px;
}

/* ── Fade-truncate utilities ──
   Вместо «…» — плавный уход текста в прозрачность. Используется как в быстром
   заказе (.ocb-title-fade), теперь унифицировано для всех мест, где текст режется:
   мини-корзина, popup-корзина, карточки, заголовки в плитках. */
.fade-truncate {
    overflow: hidden;
    white-space: nowrap;
    -webkit-mask-image: linear-gradient(to right, #000 72%, transparent 100%);
            mask-image: linear-gradient(to right, #000 72%, transparent 100%);
}
.fade-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 98%);
            mask-image: linear-gradient(180deg, #000 62%, transparent 98%);
}
.fade-truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 98%);
            mask-image: linear-gradient(180deg, #000 70%, transparent 98%);
}

/* Компактнее на узких экранах — не съедаем весь экран отступами */
@media (max-width: 640px) {
    :root {
        --block-py:       clamp(32px, 7vw, 48px);
        --block-py-tight: clamp(20px, 5vw, 32px);
        --block-py-loose: clamp(40px, 9vw, 64px);
    }
    .block-text p, article p { line-height: 1.6; }
}

/* ── Hero ─────────────────────────────────────────────────── */
.block-hero { position:relative; display:flex; align-items:center; justify-content:center;
    text-align:center; color:#fff; background-size:cover; background-position:center;
    min-height:70vh; overflow:hidden; }
.block-hero-overlay { position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.6) 100%); }
.block-hero-content { position:relative; z-index:1; padding:60px 24px; max-width:900px; }
.block-hero h1 { font-size:clamp(32px, 6vw, 72px); font-weight:800; margin-bottom:16px;
    letter-spacing:-.02em; line-height:1.1; }
.block-hero p { font-size:clamp(16px, 2.5vw, 22px); opacity:.85; margin-bottom:32px;
    max-width:600px; margin-left:auto; margin-right:auto; line-height:1.6; }
.block-hero .btn { display:inline-block; padding:16px 36px; background:var(--color-primary,var(--primary));
    color:#fff; border-radius:12px; font-weight:600; font-size:16px; text-decoration:none;
    transition:all .2s; box-shadow:0 4px 16px rgba(0,0,0,.2); }
.block-hero .btn:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.3); text-decoration:none; }

/* Default hero background (когда variant=default и фоновой картинки нет) */
.block-hero:not([style*="background-image"]):not(.block-hero--gradient):not(.block-hero--minimal):not(.block-hero--dark):not(.block-hero--split) {
    background: #1a1a2e;
}
/* Gradient hero — полноценный бренд-градиент с мягкой радиальной подсветкой */
.block-hero--gradient {
    background: radial-gradient(ellipse at 30% 20%, color-mix(in srgb, var(--color-primary,#0F2451) 75%, #378ADD) 0%, transparent 55%),
                radial-gradient(ellipse at 80% 90%, color-mix(in srgb, var(--color-primary,#0F2451) 60%, #1e428d) 0%, transparent 60%),
                linear-gradient(135deg, #0F2451 0%, #1e428d 55%, #2d5dc2 100%);
    color: #fff;
}
.block-hero--gradient .block-hero-content h1 { color: #fff; letter-spacing: -.03em; }
.block-hero--gradient .block-hero-content p { color: rgba(255,255,255,.88); }
.block-hero--gradient .btn {
    background: #fff; color: var(--color-primary, #0F2451);
    box-shadow: 0 10px 28px rgba(0,0,0,.22);
}
.block-hero--gradient .btn:hover { background: #f8fafc; box-shadow: 0 14px 40px rgba(0,0,0,.28); }
/* Плюс очень деликатная виньетка для читаемости */
.block-hero--gradient::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.18) 100%);
}
/* Hero компактнее на внутренних страницах (не главная) */
.block-hero:not(.block-hero--split) { min-height: clamp(280px, 42vw, 440px); }

/* ── Text ──────────────────────────────────────────────────── */
.block-text { padding:48px 0; }
/* #4619 (MaksimFilin): на главной вертикальные отступы текст-блоков компактнее */
body.is-home .block-text { padding:20px 0; }
/* #4628 (MaksimFilin): заголовки секций главной («Хиты продаж» и т.п.) — без
   браузерного дефолтного margin-top (~0.83em ≈ 35px при 42px шрифте) */
body.is-home .block-text .container > h1:first-child,
body.is-home .block-text .container > h2:first-child,
body.is-home .block-text .container > h3:first-child { margin-top:0; }
.block-text .container { max-width:var(--container-md,800px); }
.block-text h1 { font-size:clamp(28px,4vw,48px); font-weight:800; letter-spacing:-.02em; margin:32px 0 16px; line-height:1.2; }
.block-text h2 { font-size:clamp(24px,3vw,36px); font-weight:700; letter-spacing:-.01em; margin:28px 0 14px; line-height:1.25; }
.block-text h3 { font-size:clamp(20px,2.5vw,28px); font-weight:600; margin:24px 0 12px; line-height:1.3; }
.block-text p { margin:0 0 16px; line-height:1.75; color:var(--color-text-muted,#555); }
.block-text ul,.block-text ol { margin:0 0 16px; padding-left:24px; line-height:1.75; }
.block-text blockquote { border-left:4px solid var(--color-primary,var(--primary)); padding:16px 24px; margin:24px 0;
    background:var(--color-surface-alt,#f8f9fa); border-radius:0 12px 12px 0; color:var(--color-text,#333); font-style:italic; }
.block-text code { background:var(--color-surface-alt,#f0f0f0); padding:3px 8px; border-radius:6px; font-size:88%;
    font-family:var(--font-mono,'JetBrains Mono',monospace); }
.block-text pre { background:#1a1a2e; color:#e4e4e7; padding:24px; border-radius:12px; overflow-x:auto;
    font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:14px; line-height:1.6; }
.block-text a { color:var(--color-primary,var(--primary)); text-decoration:underline; text-underline-offset:3px;
    text-decoration-color:color-mix(in srgb, var(--color-primary,var(--primary)) 30%, transparent); }
.block-text a:hover { text-decoration-color:var(--color-primary,var(--primary)); }

/* ── Columns ───────────────────────────────────────────────── */
/* Без дефолтного padding: управляется общим настройкой _padding у блока.
   Раньше было padding:48px 0 — перебивало «Отступы внутри: Нет» и не зависело
   от выбора пользователя. */
.block-columns-inner { display:grid; gap:32px; }
.block-columns-2 { grid-template-columns:1fr 1fr; }
.block-columns-3 { grid-template-columns:repeat(3, 1fr); }
.block-columns-4 { grid-template-columns:repeat(4, 1fr); }
@media (max-width:768px) {
    .block-columns-2,.block-columns-3,.block-columns-4 { grid-template-columns:1fr; }
}
/* Сами ячейки тоже без дефолтного padding — пусть внутренние блоки сами
   определяют свои отступы, иначе получается двойной отступ. */
.block-column { border-radius:16px; transition:transform .2s, box-shadow .2s; min-width:0; }
.block-column h3 { margin-bottom:12px; font-weight:700; }

/* ── Image ─────────────────────────────────────────────────── */
.block-image { padding:32px 0; text-align:center; }
/* #4333: картинка в колонке стоит над заголовком (паттерн image→heading в сниппетах) —
   32px снизу давали большой отступ до заголовка. В колонках поджимаем до 10px. */
.block-column .block-image { padding:10px 0; }
.block-image img { border-radius:16px; max-width:100%; transition:transform .3s; }
.block-image img:hover { transform:scale(1.01); }
.block-image figcaption { color:var(--color-text-muted,#888); font-size:13px; margin-top:12px; }

/* ── Gallery ───────────────────────────────────────────────── */
.block-gallery { padding:48px 0; }
.block-gallery-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:16px; }
.block-gallery-item { border-radius:16px; overflow:hidden; cursor:pointer; aspect-ratio:1;
    transition:transform .3s, box-shadow .3s; }
.block-gallery-item:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg,0 12px 40px rgba(0,0,0,.1)); }
.block-gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.block-gallery-item:hover img { transform:scale(1.08); }

/* ── Products ──────────────────────────────────────────────── */
.block-products { padding:48px 0; }
/* #4624 (MaksimFilin): «Хиты продаж» на главной — вертикальные отступы компактнее */
body.is-home .block-products { padding:16px 0; }
.block-products-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:24px; }
.block-products-grid > * { align-self:stretch; }
.product-card { background:var(--color-surface,#fff); border:1px solid var(--color-border,#eee);
    border-radius:20px; overflow:hidden; transition:all .25s cubic-bezier(.22,1,.36,1);
    display:flex; flex-direction:column; height:100%; }
/* Заглушка для товаров без картинок — соотношение 3:4 (как у обычных карточек),
   логотип ~35% по ширине, центрирован. Используется PHP-блоками commerce. */
.product-card-placeholder { aspect-ratio:3/4; width:100%; display:block;
    background:url('/uploads/website/2026/05/herzring-logo-big.webp') center/35% no-repeat #f8fafc; }
.product-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg,0 12px 40px rgba(0,0,0,.1));
    border-color:transparent; }
/* ── Акценты магазина: переливающийся синий градиент ───────── */
@keyframes shopShimmer {
    0%   { background-position:   0% 50%; }
    100% { background-position: 200% 50%; }
}
.shop-sale-badge, .product-card-price del + .shop-sale-badge {
    display:inline-flex; align-items:center; padding:4px 10px;
    background: linear-gradient(110deg, #0F2451 0%, #1e428d 40%, #378ADD 50%, #1e428d 60%, #0F2451 100%);
    background-size: 220% 100%;
    animation: shopShimmer 9s ease-in-out infinite;
    color:#fff; border-radius:999px; font-size:11px; font-weight:700;
    letter-spacing:.02em;
    box-shadow: 0 2px 8px rgba(15,36,81,.25);
}
.shop-price-sale {
    color:#0F2451; font-weight:700;
}
.shop-price-old {
    color:#94a3b8; text-decoration:line-through; font-weight:500; font-size:.82em;
}
/* #3244: цена в блоках products-grid (кросс-селл «С этим покупают» и др.) не должна
   переноситься посимвольно — числа в одну строку, ряд переносим между элементами. */
.block-products-grid .product-card-price { display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 8px; }
.block-products-grid .shop-price-sale, .block-products-grid .shop-price-old { white-space:nowrap; }
/* Shimmer-кнопка (buy) — старая версия (оставлена для обратной совместимости) */
.shop-shimmer-btn {
    background: linear-gradient(110deg, #0F2451 0%, #1a3a7c 40%, #2d5dc2 50%, #1a3a7c 60%, #0F2451 100%);
    background-size: 220% 100%;
    animation: shopShimmer 10s ease-in-out infinite;
    color:#fff; border:none; transition: transform .15s, box-shadow .2s;
}
.shop-shimmer-btn:hover {
    animation-duration: 5s;
    box-shadow: 0 8px 24px rgba(15,36,81,.3);
    transform: translateY(-1px);
}

/* ── Premium-кнопка «Приобрести» / «Оформить заказ» ──
   Богатый градиент (navy → indigo → steel-blue → light), медленный drift +
   диагональный «отблеск» (shine sweep) + мягкое свечение на hover.
   Применяется через класс .shop-premium-btn — поверх существующих классов. */
@keyframes premiumShimmer {
    0%   { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}
@keyframes premiumShine {
    0%, 100% { left: -120%; opacity: 0; }
    20%      { opacity: 1; }
    45%      { left: 130%; opacity: 0; }
}
.shop-premium-btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(110deg,
        #0b1c3e 0%,
        #0F2451 18%,
        #1a3a7c 38%,
        #2d5dc2 50%,
        #5a8fd8 58%,
        #2d5dc2 68%,
        #1a3a7c 82%,
        #0F2451 100%
    );
    background-size: 300% 100%;
    animation: premiumShimmer 18s linear infinite;
    color: #fff;
    border: none;
    font-weight: 600;
    letter-spacing: .015em;
    text-shadow: 0 1px 2px rgba(0,0,0,.18);
    box-shadow:
        0 2px 10px rgba(15,36,81,.28),
        inset 0 0 0 1px rgba(255,255,255,.10),
        inset 0 1px 0 rgba(255,255,255,.15),
        0 0 24px -10px rgba(90,143,216,.4);
    transition: transform .25s cubic-bezier(.22,1,.36,1),
                box-shadow .35s ease,
                animation-duration .3s;
}
.shop-premium-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 55%;
    height: 100%;
    background: linear-gradient(110deg,
        transparent 0%,
        rgba(255,255,255,.18) 45%,
        rgba(255,255,255,.32) 50%,
        rgba(255,255,255,.18) 55%,
        transparent 100%
    );
    transform: skewX(-18deg);
    animation: premiumShine 7s cubic-bezier(.5,0,.2,1) infinite;
    animation-delay: 3s;
    pointer-events: none;
    z-index: 1;
}
.shop-premium-btn > * { position: relative; z-index: 2; }
.shop-premium-btn:hover {
    animation-duration: 8s;
    transform: translateY(-2px);
    box-shadow:
        0 14px 34px rgba(15,36,81,.38),
        inset 0 0 0 1px rgba(255,255,255,.18),
        inset 0 1px 0 rgba(255,255,255,.22),
        0 0 48px -8px rgba(90,143,216,.6);
}
.shop-premium-btn:hover::before { animation-duration: 3s; animation-delay: 0s; }
.shop-premium-btn:active { transform: translateY(0); transition-duration: .08s; }
.shop-premium-btn:focus-visible {
    outline: 2px solid rgba(255,255,255,.5);
    outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
    .shop-premium-btn { animation: none; }
    .shop-premium-btn::before { animation: none; opacity: 0; }
}

.product-card-img { aspect-ratio:1; overflow:hidden; background:var(--color-surface-alt,#f8f9fa);
    position:relative; display:block; isolation:isolate; touch-action:pan-y; }
/* Слайды: как в галерее товара — без overlay, чистый crossfade через blur */
.product-card-slide { position:absolute; inset:0; width:100% !important; height:100% !important; object-fit:cover;
    opacity:0; transform:scale(1.06);
    filter:blur(22px) saturate(1.3);
    transition:opacity .85s cubic-bezier(.22,1,.36,1),
               filter .85s cubic-bezier(.22,1,.36,1),
               transform 1s cubic-bezier(.22,1,.36,1);
    will-change:opacity,filter,transform;
    z-index:1;
}
.product-card-slide.active { opacity:1; transform:scale(1);
    filter:blur(0) saturate(1.05); z-index:2; }
/* Video slides */
video.product-card-slide { object-fit:cover; }
.product-card:hover .product-card-slide.active { filter:blur(0) saturate(1.08) brightness(1.04); }

/* ── Точки пагинации — тот же shimmer что и у sale-badge ── */
.product-card-dots { position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
    display:flex; gap:6px; padding:6px 10px; background:rgba(255,255,255,.55);
    backdrop-filter:blur(14px) saturate(1.6); -webkit-backdrop-filter:blur(14px) saturate(1.6);
    border-radius:999px; z-index:4; opacity:0; transition:opacity .3s;
    box-shadow:0 2px 12px rgba(0,0,0,.08); pointer-events:auto; }
.product-card:hover .product-card-dots, .product-card-img.touched .product-card-dots { opacity:1; }
.product-card-dot { width:6px; height:6px; border-radius:50%;
    background:rgba(15,36,81,.35);
    transition:background .25s,transform .25s,width .35s; cursor:pointer; }
.product-card-dot:hover { background:rgba(15,36,81,.7); }
.product-card-dot.active {
    width:18px; border-radius:4px;
    background: linear-gradient(110deg, #0F2451 0%, #1e428d 40%, #378ADD 50%, #1e428d 60%, #0F2451 100%);
    background-size: 220% 100%;
    animation: shopShimmer 9s ease-in-out infinite;
    box-shadow: 0 1px 4px rgba(15,36,81,.3);
}
.product-card-body { padding:16px 20px; flex:1; display:flex; flex-direction:column; }
.product-card-title { font-family:'Roboto Serif',sans-serif; font-size:16px; font-weight:500;
    letter-spacing:.1px; line-height:24px; color:#121216; margin:0 0 7px;
    min-height:79px; text-align:center; transition:.4s; overflow:hidden; }
.product-card-title a { color:inherit; text-decoration:none; display:inline; }
.product-card-title a:hover { color:var(--color-primary,var(--primary)); }
.product-card-sizes { margin-top:auto; padding-top:10px; }
.product-card-price { margin-top:auto; padding-top:6px; }
.product-card-sizes + .product-card-price { margin-top:6px; padding-top:0; }
.product-card-btn { margin-top:0; }
.product-card-price { font-size:18px; font-weight:600; color:var(--color-text,#333); }
.product-card-price del { color:var(--color-text-muted,#999); font-weight:400; font-size:13px; margin-left:8px; }
.product-card-btn { display:block; width:100%; padding:12px; text-align:center;
    background:var(--color-text,#333); color:#fff; border:none; border-radius:0 0 20px 20px;
    cursor:pointer; font-size:14px; transition:background .2s; }
.product-card-btn:hover { background:var(--color-primary,var(--primary)); }

/* ── Product gallery hover-zoom ────────────────────────────── */
.pgz-lens { position:absolute; width:120px; height:120px; border:2px solid rgba(15,36,81,.15);
    border-radius:50%; background:rgba(255,255,255,.12);
    pointer-events:none; z-index:5; display:none; opacity:0;
    transition:opacity .15s; box-shadow:0 0 0 1px rgba(255,255,255,.4) inset, 0 4px 12px rgba(0,0,0,.08); }
.pgz-pane { position:fixed; width:420px; height:420px;
    border-radius:18px; overflow:hidden; background:#fff;
    box-shadow:0 20px 60px rgba(15,23,42,.18), 0 0 0 1px rgba(226,232,240,.6);
    pointer-events:none; z-index:10001; display:none; opacity:0;
    transition:opacity .15s; }
.pgz-img { position:absolute; top:0; left:0; object-fit:cover; pointer-events:none; }

/* ── Breadcrumbs ──────────────────────────────────────────── */
.block-breadcrumbs { padding:14px 0; font-size:13px; color:var(--color-muted,#94a3b8); }
.block-breadcrumbs a { color:var(--color-muted,#94a3b8); text-decoration:none; transition:color .15s; }
.block-breadcrumbs a:hover { color:var(--color-primary,var(--primary)); text-decoration:none; }
.block-breadcrumbs span[style*="color:var(--color-text)"] { font-weight:500; }

/* ── CTA ───────────────────────────────────────────────────── */
.block-cta { padding:80px 0; text-align:center; }
.block-cta-inner { padding:60px 40px; border-radius:24px; background:var(--color-surface-alt,#f8f9fa); }
.block-cta h2 { font-size:clamp(24px,3vw,36px); font-weight:800; margin-bottom:16px; letter-spacing:-.01em; }
.block-cta p { font-size:17px; color:var(--color-text-muted,#555); margin-bottom:32px;
    max-width:560px; margin-left:auto; margin-right:auto; line-height:1.7; }
.block-cta .btn { display:inline-block; padding:16px 36px; background:var(--color-primary,var(--primary)); color:#fff;
    border-radius:12px; font-weight:600; text-decoration:none; font-size:16px;
    transition:all .2s; box-shadow:0 4px 16px color-mix(in srgb, var(--color-primary,var(--primary)) 30%, transparent); }
.block-cta .btn:hover { transform:translateY(-2px); box-shadow:0 8px 24px color-mix(in srgb, var(--color-primary,var(--primary)) 40%, transparent); }

/* ── Accordion ──────────────────────────────────────────────── */
.block-accordion { padding:48px 0; max-width:800px; margin:0 auto; }
@media (max-width:768px) { .block-accordion { padding:0; } }
.accordion-item { border:1px solid var(--color-border,#eee); border-radius:16px; margin-bottom:12px;
    overflow:hidden; transition:box-shadow .2s; }
.accordion-item:hover { box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,.08)); }
.accordion-header { padding:18px 24px; cursor:pointer; font-weight:600; display:flex;
    justify-content:space-between; align-items:center; background:var(--color-surface-alt,#f8f9fa);
    transition:background .2s; font-size:15px; }
.accordion-header:hover { background:var(--color-border,#eee); }
.accordion-header::after { content:'▸'; transition:transform .25s; font-size:12px; color:var(--color-text-muted,#999); }
.accordion-item.open .accordion-header::after { transform:rotate(90deg); }
/* max-height:500px раньше обрезал длинные инструкции (HerzRing Slim Pro RQ
   и т.п. — там тысячи пикселей контента). Поднимаем до 5000px — transition
   корректно интерполирует, длинный контент полностью виден. */
.accordion-body { padding:0 24px; max-height:0; overflow:hidden; transition:max-height .35s cubic-bezier(.22,1,.36,1), padding .25s; }
.accordion-item.open .accordion-body { padding:18px 24px 22px; max-height:5000px; }
/* Типографика ВНУТРИ аккордеона — для инструкций с h2/h3/h4/p/ul/ol/blockquote */
.accordion-body { font-size:15px; line-height:1.7; color:#1e293b; }
.accordion-body h2 { font-size:18px; font-weight:600; margin:20px 0 10px; color:#0F2451; letter-spacing:-.005em; }
.accordion-body h3 { font-size:16px; font-weight:600; margin:18px 0 10px; color:#0F2451; }
.accordion-body h4 { font-size:14px; font-weight:600; margin:16px 0 8px; color:#0F2451; text-transform:none; letter-spacing:0; }
.accordion-body p { margin:0 0 12px; }
.accordion-body p:last-child { margin-bottom:0; }
.accordion-body ul, .accordion-body ol { margin:0 0 12px; padding-left:24px; }
.accordion-body li { margin:4px 0; }
.accordion-body strong { color:#0F2451; font-weight:600; }
.accordion-body a { color:#378ADD; text-decoration:underline; text-underline-offset:2px; }
.accordion-body a:hover { color:#0F2451; }
.accordion-body img { max-width:100%; height:auto; border-radius:10px; margin:8px 0; }
.accordion-body blockquote { border-left:3px solid #378ADD; padding:8px 14px; margin:0 0 12px;
    color:#475569; background:#f8fbff; border-radius:0 8px 8px 0; }
/* ── Tabs ──────────────────────────────────────────────────── */
.block-tabs { padding:48px 0; }
.tabs-nav { display:flex; gap:6px; border-bottom:2px solid var(--color-border,#eee); margin-bottom:24px; }
.tab-btn { padding:12px 24px; border:none; background:none; cursor:pointer; font-size:14px;
    font-weight:600; color:var(--color-text-muted,#888); border-bottom:2px solid transparent;
    margin-bottom:-2px; transition:all .2s; border-radius:8px 8px 0 0; }
.tab-btn:hover { color:var(--color-text,#333); background:var(--color-surface-alt,#f8f9fa); }
.tab-btn.active { color:var(--color-primary,var(--primary)); border-bottom-color:var(--color-primary,var(--primary)); }
.tab-content { display:none; animation:fadeIn .3s; }
.tab-content.active { display:block; }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

/* ── Testimonials ──────────────────────────────────────────── */
.block-testimonials { padding:48px 0; }
.testimonials-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:24px; }
.testimonial-card { padding:32px; border:1px solid var(--color-border,#eee); border-radius:20px;
    transition:all .25s; position:relative; }
.testimonial-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md,0 4px 12px rgba(0,0,0,.06));
    border-color:transparent; }
.testimonial-card::before { content:'\201C'; position:absolute; top:16px; left:24px;
    font-size:48px; color:var(--color-primary,var(--primary)); opacity:.2; font-family:serif; line-height:1; }
.testimonial-text { font-style:italic; color:var(--color-text-muted,#555); margin-bottom:16px; line-height:1.7; font-size:15px; }
.testimonial-author { font-weight:700; font-size:14px; color:var(--color-text,#333); }
.testimonial-role { color:var(--color-text-muted,#888); font-size:12px; margin-top:2px; }
.testimonial-rating { color:#f59e0b; margin-bottom:12px; font-size:16px; letter-spacing:2px; }

/* ── Form ──────────────────────────────────────────────────── */
.block-form { padding:48px 0; max-width:600px; margin:0 auto; }
.ws-form { display:flex; flex-direction:column; gap:16px; }
.ws-field { display:flex; flex-direction:column; gap:6px; }
.ws-field label { font-size:13px; color:var(--color-text,#333); font-weight:600; }
.ws-field input,.ws-field textarea,.ws-field select { padding:12px 16px; border:1.5px solid var(--color-border,#ddd);
    border-radius:12px; font-size:15px; font-family:inherit; background:var(--color-surface,#fff);
    transition:border-color .2s, box-shadow .2s; }
.ws-field input:focus,.ws-field textarea:focus { border-color:var(--color-primary,var(--primary)); outline:none;
    box-shadow:0 0 0 4px color-mix(in srgb, var(--color-primary,var(--primary)) 12%, transparent); }
.ws-form-submit { padding:14px 28px; background:var(--color-primary,var(--primary)); color:#fff; border:none;
    border-radius:12px; font-weight:700; cursor:pointer; font-size:15px; transition:all .2s;
    box-shadow:0 4px 12px color-mix(in srgb, var(--color-primary,var(--primary)) 25%, transparent); }
.ws-form-submit:hover { transform:translateY(-1px);
    box-shadow:0 6px 20px color-mix(in srgb, var(--color-primary,var(--primary)) 35%, transparent); }
.ws-form-message { padding:14px 20px; border-radius:12px; font-size:14px; display:none; font-weight:500; }

/* ── Video ─────────────────────────────────────────────────── */
.block-video { padding:48px 0; text-align:center; }
.block-video-wrap { position:relative; padding-bottom:56.25%; height:0; overflow:hidden;
    border-radius:20px; max-width:900px; margin:0 auto; box-shadow:var(--shadow-lg,0 12px 40px rgba(0,0,0,.1)); }
.block-video-wrap iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:none; }

/* ── Map ───────────────────────────────────────────────────── */
.block-map { padding:48px 0; }
.block-map iframe { width:100%; height:450px; border:none; border-radius:20px;
    box-shadow:var(--shadow-md,0 4px 12px rgba(0,0,0,.06)); }

/* ── Blog feed ─────────────────────────────────────────────── */
.block-blog-feed { padding:48px 0; }
.blog-feed-grid { display:grid; grid-template-columns:repeat(var(--blog-feed-cols,3), minmax(0, 1fr)); gap:28px; }
.blog-card { background:var(--color-surface,#fff); border:1px solid var(--color-border,#eee);
    border-radius:20px; overflow:hidden; transition:all .25s cubic-bezier(.22,1,.36,1); }
.blog-card:hover { box-shadow:var(--shadow-lg,0 12px 40px rgba(0,0,0,.1));
    border-color:transparent; }
.blog-card-img { display:block; aspect-ratio:16/9; overflow:hidden; background:var(--color-surface-alt,#f8f9fa); }
.blog-card-img img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; transition:filter .4s; }
.blog-card:hover .blog-card-img img { filter:brightness(1.05); }
.blog-card-body { padding:20px 24px; }
.blog-card-title { font-weight:700; font-size:17px; margin-bottom:8px; line-height:1.35; }
.blog-card-title a { color:var(--color-text,#333); text-decoration:none; }
.blog-card-title a:hover { color:var(--color-primary,var(--primary)); }
.blog-card-excerpt { font-size:14px; color:var(--color-text-muted,#666); margin-bottom:12px; line-height:1.6; }
.blog-card-meta { font-size:12px; color:var(--color-text-muted,#999); font-weight:500; }

/* ── Page listing ──────────────────────────────────────────── */
.page-listing { padding:48px 0; }
.page-listing h1 { margin-bottom:32px; font-size:clamp(24px,3vw,36px); font-weight:800; letter-spacing:-.01em; }
.page-listing-filters { display:flex; gap:8px; margin-bottom:24px; flex-wrap:wrap; }
.page-listing-filters a { padding:8px 20px; border:1.5px solid var(--color-border,#eee); border-radius:24px;
    font-size:13px; color:var(--color-text-muted,#555); font-weight:500; transition:all .2s; }
.page-listing-filters a:hover,.page-listing-filters a.active {
    background:var(--color-primary,var(--primary)); color:#fff; border-color:transparent; text-decoration:none; }

/* ── 404 ───────────────────────────────────────────────────── */
.page-404 { text-align:center; padding:120px 20px; }
.page-404 h1 { font-size:clamp(64px,10vw,120px); font-weight:900; color:var(--color-border,#eee);
    margin-bottom:16px; letter-spacing:-.03em; }
.page-404 p { font-size:18px; color:var(--color-text-muted,#888); margin-bottom:32px; line-height:1.6; }
.page-404 a { display:inline-block; padding:14px 32px; background:var(--color-primary,var(--primary)); color:#fff;
    border-radius:12px; font-weight:600; text-decoration:none; transition:all .2s; }
.page-404 a:hover { transform:translateY(-2px); box-shadow:var(--shadow-md,0 4px 12px rgba(0,0,0,.06)); }

/* ══════════════════════════════════════════════════════════════
   ANIMATIONS — scroll-triggered block entrance
   ══════════════════════════════════════════════════════════════ */

/* Initial hidden state for animated blocks */
/* #24037: will-change убран из базового правила — он держал слой композитора
   на КАЖДОМ [data-anim] (58 штук на карточке товара). Подсказку ставит theme.js
   только подлетающим к экрану элементам и снимает после анимации. */
[data-anim] { opacity:0; transition-property:opacity,transform,filter,clip-path; transition-timing-function:var(--anim-ease,cubic-bezier(.22,1,.36,1)); }
[data-anim].anim-visible { opacity:1; transform:none; filter:none; }

/* Fade */
[data-anim="fade-in"] { opacity:0; }
[data-anim="fade-up"] { transform:translateY(40px); }
[data-anim="fade-down"] { transform:translateY(-40px); }
[data-anim="fade-left"] { transform:translateX(40px); }
[data-anim="fade-right"] { transform:translateX(-40px); }

/* Zoom */
[data-anim="zoom-in"] { transform:scale(.85); }
[data-anim="zoom-out"] { transform:scale(1.15); }

/* Flip */
[data-anim="flip-up"] { transform:perspective(800px) rotateX(20deg); }
[data-anim="flip-left"] { transform:perspective(800px) rotateY(-20deg); }

/* Slide */
[data-anim="slide-up"] { transform:translateY(80px); }
[data-anim="slide-down"] { transform:translateY(-80px); }

/* Bounce */
[data-anim="bounce-in"] { transform:scale(.6); }
[data-anim="bounce-in"].anim-visible { animation:bounceIn var(--anim-dur,.6s) cubic-bezier(.34,1.56,.64,1); }
@keyframes bounceIn { 0%{transform:scale(.6);opacity:0} 50%{transform:scale(1.05)} 100%{transform:scale(1);opacity:1} }

/* Blur */
[data-anim="blur-in"] { filter:blur(12px); transform:scale(.95); }

/* Rotate */
[data-anim="rotate-in"] { transform:rotate(-8deg) scale(.9); }

/* Scale up */
[data-anim="scale-up"] { transform:scale(.5); }

/* ── #2797: расширенный набор анимаций появления ──────────────────────
   Базовый [data-anim] уже даёт opacity 0→1 + transition (easing берётся из
   --anim-ease). Здесь только НАЧАЛЬНОЕ состояние; .anim-visible снимает
   transform/filter (а для clip — задаём финал явно). */
/* Явный выезд по горизонтали (дальше fade-left/right) */
[data-anim="slide-left"]      { transform:translateX(-100px); }
[data-anim="slide-right"]     { transform:translateX(100px); }
[data-anim="slide-left-far"]  { transform:translateX(-200px); }
[data-anim="slide-right-far"] { transform:translateX(200px); }
/* Диагонали (выезд + появление) */
[data-anim="fade-up-left"]    { transform:translate(-50px,50px); }
[data-anim="fade-up-right"]   { transform:translate(50px,50px); }
[data-anim="fade-down-left"]  { transform:translate(-50px,-50px); }
[data-anim="fade-down-right"] { transform:translate(50px,-50px); }
/* Флипы во все стороны */
[data-anim="flip-down"]  { transform:perspective(800px) rotateX(-20deg); }
[data-anim="flip-right"] { transform:perspective(800px) rotateY(20deg); }
/* Повороты влево/вправо */
[data-anim="rotate-left"]  { transform:rotate(-12deg) scale(.92); }
[data-anim="rotate-right"] { transform:rotate(12deg) scale(.92); }
/* Блюр-комбо */
[data-anim="blur-up"]   { filter:blur(14px); transform:translateY(40px); }
[data-anim="blur-zoom"] { filter:blur(14px); transform:scale(1.1); }
/* Зум «из дали» + поворот/блюр */
[data-anim="zoom-rotate"] { transform:scale(.7) rotate(-8deg); }
[data-anim="zoom-blur"]   { transform:scale(.6); filter:blur(8px); }
[data-anim="zoom-far"]    { transform:scale(.3); }
/* Skew / light-speed (резкий заезд) */
[data-anim="skew-in"]     { transform:skewX(-12deg) translateX(60px); }
[data-anim="light-speed"] { transform:translateX(120px) skewX(-18deg); }
/* Упругие/overshoot — через keyframes */
[data-anim="back-in"]              { transform:scale(.3); }
[data-anim="back-in"].anim-visible { animation:wbBackIn var(--anim-dur,.6s) var(--anim-ease,cubic-bezier(.34,1.56,.64,1)); }
@keyframes wbBackIn { 0%{transform:scale(.3);opacity:0} 60%{transform:scale(1.08);opacity:1} 100%{transform:scale(1)} }
[data-anim="pop-in"]              { transform:scale(.2); }
[data-anim="pop-in"].anim-visible { animation:wbPopIn var(--anim-dur,.5s) cubic-bezier(.68,-0.55,.265,1.55); }
@keyframes wbPopIn { 0%{transform:scale(.2);opacity:0} 70%{transform:scale(1.12)} 100%{transform:scale(1);opacity:1} }
[data-anim="roll-in"]  { transform:translateX(-100px) rotate(-120deg); }
[data-anim="swing-in"] { transform:perspective(800px) rotateX(-90deg); transform-origin:top center; }
/* Reveal через clip-path (тренд 2026) */
[data-anim="reveal-up"]                { clip-path:inset(100% 0 0 0); }
[data-anim="reveal-up"].anim-visible   { clip-path:inset(0 0 0 0); }
[data-anim="reveal-left"]              { clip-path:inset(0 100% 0 0); }
[data-anim="reveal-left"].anim-visible { clip-path:inset(0 0 0 0); }
/* Уважаем prefers-reduced-motion: без движения, мгновенное проявление */
@media (prefers-reduced-motion: reduce) {
  [data-anim] { transition-duration:.001s !important; transform:none !important; filter:none !important; clip-path:none !important; animation:none !important; opacity:1 !important; }
}

/* Block style variants — base classes */
.block-hero--dark { background:#111; color:#fff; }
.block-hero--gradient { background:linear-gradient(135deg, var(--color-primary,#1a73e8), var(--color-accent,#34a853)); color:#fff; }
.block-hero--minimal { background:transparent; color:var(--color-text,#333); }
.block-hero--split { display:grid; grid-template-columns:1fr 1fr; text-align:left; }

.block-section--dark { background:#1a1a2e; color:#fff; }
.block-section--accent { background:var(--color-primary,#1a73e8); color:#fff; }
.block-section--bordered { border:1px solid var(--color-border,#eee); border-radius:16px; }
.block-section--gradient { background:linear-gradient(180deg, var(--color-surface-alt,#f8f9fa), var(--color-surface,#fff)); }

.block-text--narrow .container { max-width:600px; }
.block-text--wide .container { max-width:1000px; }
.block-text--centered { text-align:center; }

.block-columns--cards .block-column { background:#fff; border-radius:12px; box-shadow:var(--shadow-md,0 4px 12px rgba(0,0,0,.06)); padding:24px; }
.block-columns--bordered .block-column { border:1px solid var(--color-border,#eee); border-radius:12px; padding:24px; }
.block-columns--icons .block-column { text-align:center; }

.block-image--rounded img { border-radius:16px; }
.block-image--shadow img { box-shadow:var(--shadow-lg,0 12px 40px rgba(0,0,0,.1)); }
.block-image--full-width { padding:0; }
.block-image--full-width img { width:100%; border-radius:0; }

.block-cta--dark .block-cta-inner { background:#1a1a2e; color:#fff; }
.block-cta--gradient .block-cta-inner { background:linear-gradient(135deg, var(--color-primary,#1a73e8), var(--color-accent,#34a853)); color:#fff; }
.block-cta--outlined .block-cta-inner { background:transparent; border:2px solid var(--color-primary,#1a73e8); }
.block-cta--minimal .block-cta-inner { background:transparent; padding:0; }

.block-accordion--bordered .accordion-item { border:1px solid var(--color-border,#eee); }
.block-accordion--minimal .accordion-item { border:none; border-bottom:1px solid var(--color-border,#eee); border-radius:0; }
.block-accordion--pills .accordion-header { border-radius:24px; background:var(--color-surface-alt,#f8f9fa); margin-bottom:4px; }

/* ── Features grid (адаптивная сетка преимуществ) ────────────── */
.block-features-grid { display:grid; gap:32px;
    grid-template-columns:repeat(var(--cols, 3), minmax(0, 1fr)); }

/* ══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

/* Tablet: 768px — specificity via .site-content avoids !important */
/* Catalog layout — desktop */
.cat-page { max-width:1280px; margin:0 auto; padding:32px 24px; }
.cat-layout { display:grid; grid-template-columns:220px 1fr; gap:28px; align-items:start; }
.cat-filter-toggle { display:none; }

@media (max-width: 1024px) {
    .container { padding:0 12px; }
    /* Remove nested padding on catalog page */
    .cat-page { padding:8px 0 !important; max-width:100% !important; }
    .cat-page .block-section, .cat-page .container { padding:0 !important; max-width:100% !important; }
    .site-content > div[style*="padding"] { padding:8px !important; }
    .cat-layout { grid-template-columns:1fr !important; gap:0 !important; }
    .cat-sidebar { display:none !important; position:fixed !important; bottom:0 !important; left:0 !important; right:0 !important;
        background:#fff !important; border-radius:20px 20px 0 0 !important; z-index:9990 !important;
        box-shadow:0 -12px 40px rgba(15,23,42,.12) !important; max-height:75vh !important; overflow-y:auto !important;
        padding:20px !important; transform:translateY(100%) !important;
        transition:transform .35s cubic-bezier(.22,1,.36,1) !important; }
    .cat-sidebar.open { display:block !important; transform:translateY(0) !important; }
    .cat-sidebar-inner { position:static !important; }
    .cat-filter-toggle { display:flex !important; align-items:center; gap:8px;
        width:100%; padding:14px 16px; margin-bottom:12px;
        background:#fff; border:1.5px solid #e2e8f0; border-radius:14px;
        font-size:14px; font-weight:600; color:#121216; cursor:pointer; }
    .block-products-grid, .site-content .block-products-grid { grid-template-columns:repeat(2,1fr) !important; gap:8px !important; }
    .site-content .block-columns-inner,
    .block-columns-inner { grid-template-columns:1fr !important; gap:20px !important; }
    .site-content .blog-feed-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
    .site-content .block-hero-content { padding:60px 20px; }
    .site-content .block-hero h1 { font-size:clamp(28px,6vw,48px); }
    .site-content .block-hero p { font-size:16px; margin-bottom:24px; }
    .block-section { padding:32px 0; }
    .block-cta { padding:48px 0; }
    .block-cta-inner { padding:40px 24px; }
    .site-content .block-stats-grid { grid-template-columns:repeat(2,1fr); }
    .site-content .block-features-grid,
    .block-features-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px; }
    .site-content .testimonials-grid { grid-template-columns:1fr; }
    .site-content .block-gallery-grid { grid-template-columns:repeat(2,1fr); }
    .site-content .block-pricing-grid { grid-template-columns:1fr; }
    .page-listing-filters { overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
    .page-listing-filters::-webkit-scrollbar { display:none; }
    .page-listing-filters a { flex-shrink:0; }

    /* Product cards — mobile optimized */
    .product-card { border-radius:14px; border:0; box-shadow:0 1px 4px rgba(0,0,0,.04); overflow:hidden; }
    .product-card:hover { transform:none; box-shadow:0 1px 4px rgba(0,0,0,.04); }
    .product-card-body { padding:10px 12px 12px; }
    .product-card-title { font-size:13px; font-weight:500; min-height:54px;
        line-height:18px; overflow:hidden; }
    .product-card-price { font-size:15px; font-weight:800; }
    .product-card-price del { font-size:11px; }
    .product-card-btn { padding:10px; font-size:13px; font-weight:700; border-radius:0 0 14px 14px; }
}

/* Small phones — keep 2 columns */
@media (max-width: 480px) {
    .container { padding:0 12px; }
    .block-products-grid, .site-content .block-products-grid { grid-template-columns:repeat(2,1fr) !important; gap:8px !important; }
    .site-content .blog-feed-grid { grid-template-columns:1fr; }
    .site-content .block-stats-grid { grid-template-columns:repeat(2,1fr); }
    .site-content .block-gallery-grid { grid-template-columns:repeat(2,1fr); }
    .site-content .block-features-grid,
    .block-features-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
    .tabs-nav { overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }
    .tabs-nav::-webkit-scrollbar { display:none; }
    .tab-btn { flex-shrink:0; white-space:nowrap; }
    /* Колонки/секции — минимальные боковые отступы, чтобы картинки и сниппеты */
    /* были почти во всю ширину экрана (было 24px + 16px = 40px съедалось). */
    .block-column { padding: 6px !important; }
    .block-columns--cards .block-column,
    .block-columns--bordered .block-column { padding: 10px !important; }
    .block-columns { padding: 12px 0 !important; }
    .block-section { padding: 16px 0 !important; }
    .block-section .container, .block-columns .container { padding: 0 !important; }
}



/* ── Варианты вкладок и избранных товаров ─────────────────────────
   Эти варианты были в списке у блоков, но правил под них не было —
   в редакторе выбор вида ничего не менял. Класс варианта ставит
   BlockRegistry на первый тег: block-{тип}--{вариант}. */

/* Вкладки-«пилюли»: без нижней линии, кнопки скруглены, активная залита. */
.block-tabs--pills .tabs-nav { border-bottom:none; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.block-tabs--pills .tab-btn { border-radius:999px; border-bottom:none; margin-bottom:0;
    background:var(--color-surface-alt,#f8f9fa); padding:10px 20px; }
.block-tabs--pills .tab-btn.active { background:var(--color-primary,var(--primary)); color:#fff; }
.block-tabs--pills .tab-btn.active:hover { background:var(--color-primary,var(--primary)); color:#fff; }

/* Подчёркивание: тонкая линия у полосы, у активной вкладки — жирная, без плашек. */
.block-tabs--underline .tabs-nav { border-bottom-width:1px; gap:24px; }
.block-tabs--underline .tab-btn { padding:12px 2px; border-radius:0; }
.block-tabs--underline .tab-btn:hover { background:none; }
.block-tabs--underline .tab-btn.active { border-bottom-width:3px; }

/* Вертикально: полоса вкладок слева, содержимое справа. */
.block-tabs--vertical .container { display:flex; gap:28px; align-items:flex-start; }
.block-tabs--vertical .tabs-nav { flex-direction:column; gap:2px; min-width:180px; flex:0 0 auto;
    border-bottom:none; border-right:2px solid var(--color-border,#eee); margin-bottom:0; }
.block-tabs--vertical .tab-btn { width:100%; text-align:left; border-bottom:none; margin-bottom:0;
    margin-right:-2px; border-right:2px solid transparent; border-radius:8px 0 0 8px; }
.block-tabs--vertical .tab-btn.active { border-right-color:var(--color-primary,var(--primary)); }
.block-tabs--vertical .tab-content.active { flex:1 1 auto; min-width:0; }

/* Избранные товары, компактный вид: плотнее сетка и мельче подписи. */
.block-featured_products--compact { padding:24px 0; }
.block-featured_products--compact .block-products-grid { gap:12px; }
.block-featured_products--compact .product-card-body { padding:10px 12px; }
.block-featured_products--compact .product-card-title { font-size:14px; }
.block-featured_products--compact .product-card-price { font-size:15px; padding-top:4px; }

@media (max-width:640px) {
    /* На узком экране вертикальные вкладки складываются в обычную полосу. */
    .block-tabs--vertical .container { display:block; }
    .block-tabs--vertical .tabs-nav { flex-direction:row; border-right:none; min-width:0;
        border-bottom:2px solid var(--color-border,#eee); margin-bottom:24px; }
    .block-tabs--vertical .tab-btn { width:auto; margin-right:0; border-right:none;
        border-radius:8px 8px 0 0; }
}