/* Mobless 10.11.2026: витрина B4 «Каталог-гастроном» (макет mockups/2026-11-03/B4-katalog-gastronom, выбор Антона 10.11).
 * Подключается из header.php только при sy_b4_on(); каждое правило — под body.b4, чтобы без B4 сайт не менялся.
 * Порядок секций: шрифты · токены · шапка · подвал · нижняя панель · главная · карточки · раздел · товар · корзина.
 * План: docs/superpowers/plans/2026-11-10-b4-rollout.md. transition: all не использовать; анимации — с учётом prefers-reduced-motion. */

/* ── шрифты: свои файлы (не Google Fonts — IP посетителя не уходит за рубеж), переменные по весу, кириллица + латиница ── */
@font-face{font-family:"Rubik";font-style:normal;font-weight:300 900;font-display:swap;src:url(/static/fonts/b4/rubik-cyr.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Rubik";font-style:normal;font-weight:300 900;font-display:swap;src:url(/static/fonts/b4/rubik-lat.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Oswald";font-style:normal;font-weight:200 700;font-display:swap;src:url(/static/fonts/b4/oswald-cyr.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Oswald";font-style:normal;font-weight:200 700;font-display:swap;src:url(/static/fonts/b4/oswald-lat.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito";font-style:normal;font-weight:200 1000;font-display:swap;src:url(/static/fonts/b4/nunito-cyr.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Nunito";font-style:normal;font-weight:200 1000;font-display:swap;src:url(/static/fonts/b4/nunito-lat.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ── токены (значения макета B4) ── */
body.b4{
  --ink:#141a24;--ink-2:#232b38;
  --navy:#1f3a8a;--blue:#3d67df;--blue-h:#2f53c2;--blue-t:#e4ebfc;
  --gold:#b08d31;--gold-ink:#8a6a1f;--gold-l:#e3c77a;--gold-t:#f6ecd2;
  --text:#3a4048;--muted:#5b6472;--line:#e7dcc6;--line-2:#d6c9ae;
  --cream:#fbf5ea;--cream-2:#f4ead6;--paper:#fffcf6;
  --t-kreatin:#cfdcfa;--t-protein:#f0dca6;--t-amino:#f7d0a2;--t-zdorove:#d3e7cf;--t-geynery:#f3d6cf;
  --ok:#1d7a46;
  --f-d:"Rubik","Arial Rounded MT Bold","Segoe UI",sans-serif;
  --f-c:"Oswald","Arial Narrow",sans-serif;
  --f-b:"Nunito","Segoe UI",-apple-system,Arial,sans-serif;
  --gut:16px;--wrap:min(1320px,100% - var(--gut)*2);
  --r:22px;--hdr:72px;
  --out:cubic-bezier(.16,1,.3,1);
  --spring:linear(0,.013 .6%,.05 1.2%,.2 2.6%,.439 4.4%,.849 7.3%,1.012 8.8%,1.118 10.4%,1.169 12%,1.172 13.4%,1.146 15.1%,1.03 20.4%,.993 23.3%,.979 26.5%,.994 33.7%,1.002 40.2%,1);
}
@media (min-width:768px){body.b4{--gut:24px}}

/* ── шапка ── */
/* основа страницы: кремовый фон, текст Nunito, заголовки Rubik (размеры заголовков — в секциях страниц) */
body.b4{background:var(--cream);color:var(--text);font-family:var(--f-b);
  --b4-top:40px;--b4-row:76px;--b4-nav:56px;--b4-logo:236px;
  --t-pokhudenie:#d6ebe5;--t-aksessuary:#e6e0f2}
body.b4 :is(h1,h2,h3){font-family:var(--f-d)}
/* оттенок раздела каталога: плитки выпадашки, пункт меню при наведении, плитки мобильного меню */
body.b4 .header-menu__item{--tint:var(--cream-2)}
body.b4 .header-menu__item:has(>a[href="/catalog/funktsional/"]){--tint:var(--t-kreatin)}
body.b4 .header-menu__item:has(>a[href="/catalog/aminokisloty_/"]){--tint:var(--t-amino)}
body.b4 .header-menu__item:has(>a[href="/catalog/zdorove_i_dolgoletie/"]){--tint:var(--t-zdorove)}
body.b4 .header-menu__item:has(>a[href="/catalog/geynery/"]){--tint:var(--t-geynery)}
body.b4 .header-menu__item:has(>a[href="/catalog/pokhudenie/"]){--tint:var(--t-pokhudenie)}
body.b4 .header-menu__item:has(>a[href="/catalog/protein/"]){--tint:var(--t-protein)}
body.b4 .header-menu__item:has(>a[href="/catalog/aksessuary/"]){--tint:var(--t-aksessuary)}

/* белая шапка; липкая с 992 px (на телефоне внизу и так закреплена нижняя панель, а липкая шапка в 115 px съела бы экран) */
body.b4 .header{z-index:35;background:#fff;border-bottom:1px solid var(--line)}
body.b4 .header__line{border-bottom:0}
body.b4 .header-body__logo{width:100%;height:auto}
body.b4 .header-body__logo-block{flex:0 0 var(--b4-logo);width:var(--b4-logo);margin-right:28px}

/* поиск — кремовая пилюля */
body.b4 .header .search__block{display:flex;align-items:center;height:48px;margin:0;padding:0 4px 0 0;border:2px solid var(--line);border-radius:999px;background:var(--cream);overflow:hidden;box-shadow:none;transition:border-color .2s ease-out,background-color .2s ease-out}
body.b4 .header .search__block:focus-within{border-color:var(--blue);background:#fff;box-shadow:none}
body.b4 .header .search__input{height:44px;padding:0 8px 0 20px;border:0;background:transparent;font:400 16px/1.2 var(--f-b);color:var(--ink)}
body.b4 .header .search__input::placeholder{color:var(--muted);opacity:1}
body.b4 .header .search__input:focus{outline:none}
body.b4 .header .search__icon-block{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;padding:0;border-radius:50%;background:transparent}
body.b4 .header .sy-loupe :is(circle,path){stroke:var(--ink)}

/* корзина — тёмная пилюля со счётчиком золотом, как в макете */
body.b4 .sy-cart{height:46px;padding:0 8px 0 16px;border-radius:999px;background:var(--ink);color:#fff;font:700 15px/1 var(--f-d);box-shadow:none;transition:background-color .2s ease-out,transform .25s var(--out)}
body.b4 .sy-cart:hover{background:var(--ink-2);box-shadow:none}
body.b4 .sy-cart:active{box-shadow:none}
body.b4 .sy-cart:focus-visible{outline:2.5px solid var(--blue);outline-offset:3px}
body.b4 .sy-cart.is-empty{padding-right:16px}
body.b4 .sy-cart__count{min-width:28px;height:28px;padding:0 8px;border-radius:14px;background:var(--gold-l);color:var(--ink);font:800 14px/28px var(--f-b)}
body.b4 .sy-cart__drop{background:var(--gold-l)}
/* избранное */
body.b4 .header-controls .sy-wish{width:44px;height:44px}
body.b4 .header-controls .sy-wish:hover{background:var(--cream)}
body.b4 .header-controls .sy-wish .header-controls__control-circle{background:var(--gold-l)}
body.b4 .header-controls .sy-wish .header-controls__control-count{color:var(--ink);font:800 11px/17px var(--f-b)}
/* «Блогерам» — спокойная золотистая пилюля вместо бегущего градиента */
body.b4 .sy-blog-hdr{min-height:44px;padding:0 18px;border:2px solid var(--gold-l);border-radius:999px;background:var(--gold-t);color:var(--ink)!important;font:700 14px/1 var(--f-d);box-shadow:none;animation:none;transition:background-color .2s ease-out,border-color .2s ease-out}
body.b4 .sy-blog-hdr:hover{transform:none;background:var(--gold-l);box-shadow:none}
body.b4 .sy-blog-hdr svg{stroke:var(--ink)}
/* «Написать нам» и соцсети */
body.b4 .header-body .city__text{font:600 14px/1.2 var(--f-b);color:var(--muted)}
body.b4 .header-body .sy-soc{width:40px;height:40px;border-color:var(--line);color:var(--gold-ink)}
body.b4 .header-body .sy-soc:hover{background:var(--gold-l);border-color:var(--gold-l);color:var(--ink)}
body.b4 .header-body .sy-soc:focus-visible{outline:2.5px solid var(--blue);outline-offset:3px}

/* верхняя строка (≥992): ссылки, телефон, вход — тонкая строка над шапкой, при прокрутке уходит вверх */
@media (min-width:992px){
  body.b4 .header{position:sticky;top:calc(-1*var(--b4-top));border-bottom:0}
  /* пока открыта выпадашка, app.js поднимает строку меню (z-index 105) и затемняет страницу —
     шапку держим над ними, иначе строка меню закрывает низ логотипа, а строка поиска темнеет */
  body.b4.is-main--hover .header,body.b4 .header:has(~ .header-menu-block[style*="z-index"]){z-index:106}
  body.b4 .header>.header__line:first-child{border-bottom:1px solid var(--line)}
  body.b4 .header>.header__line:first-child .header__container{height:var(--b4-top)}
  body.b4 .header__top-menu{min-height:0;padding:0;background:transparent}
  body.b4 .header__top-menu-nav{margin:0;padding:0}
  body.b4 .header__top-menu-link{font:600 13.5px/1.2 var(--f-b);color:var(--muted)}
  body.b4 .header__top-menu-link:hover{color:var(--blue)}
  body.b4 .header-info__phone-link{font:800 15px/1 var(--f-b);letter-spacing:0;color:var(--ink)}
  body.b4 .header-info__order-call .header-info__order-call-text{font:700 12px/1.2 var(--f-b);letter-spacing:.04em;color:var(--ink);text-decoration-color:var(--gold)}
  body.b4 .header-info__order-call .header-info__order-call-text:hover{color:var(--blue)}
  body.b4 .sy-enter-wrap .header-info__enter{min-height:32px;padding:0 16px!important;border-radius:999px;background:var(--ink);box-shadow:none;font:700 13.5px/1 var(--f-d)}
  body.b4 .sy-enter-wrap .header-info__enter:hover{background:var(--navy);transform:none}
  body.b4 .sy-enter-wrap .header-info__enter .header-info__enter-text{font:700 13.5px/1 var(--f-d);text-transform:none;letter-spacing:0}
  body.b4 .sy-enter-bonus{color:var(--gold-ink)}

  /* строка логотипа и поиска */
  body.b4 .header-body{height:var(--b4-row);padding:0;flex-wrap:nowrap;gap:0 14px}
  body.b4 .header-body__logo-block{margin-right:14px}
  body.b4 .header .search{flex:1 1 auto;min-width:0;max-width:560px;margin:0 auto}
  body.b4 .header .search__block{width:100%}
  body.b4 .header-body .city{margin:0;gap:6px}
  body.b4 .header-controls{gap:6px;flex:none}
  body.b4 .header-controls .header-controls__control{margin-right:0}
  body.b4 .sy-cart{margin-left:0}

  /* строка меню каталога: белая, прилипает под строкой логотипа */
  body.b4 .header-menu-block{position:sticky;top:calc(var(--b4-row) - 1px);z-index:34;background:#fff;border-bottom:1px solid var(--line)}
  body.b4 .header-menu-block .header-menu{min-height:var(--b4-nav)}
  body.b4 .header-menu-block .header-menu__list{justify-content:center;gap:2px;height:var(--b4-nav);margin:0;padding:0}
  body.b4 .header-menu-block .header-menu__item{flex:0 0 auto;align-items:center;height:100%;background:transparent}
  body.b4 .header-menu-block .header-menu__item:hover{background:transparent}
  body.b4 .header-menu-block .header-menu__link{height:44px;padding:0 15px;border-radius:999px;font:700 15px/1 var(--f-b)!important;letter-spacing:0;text-transform:none;color:var(--ink);white-space:nowrap;transition:background-color .2s ease-out,color .2s ease-out}
  body.b4 .header-menu-block .header-menu__item:is(:hover,:focus-within) .header-menu__link{background:var(--tint);color:var(--ink)}
  body.b4 .header-menu-block .header-menu__link:focus-visible{outline:2.5px solid var(--blue)!important;outline-offset:2px!important}

  /* выпадашка раздела — плитки цвета раздела */
  body.b4 .header-menu-block .menu-drop-block{z-index:5;padding-top:0}
  body.b4 .header-menu .menu-drop-block .sy-catdrop{gap:14px;padding:14px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 24px 40px -28px rgba(20,26,36,.35)}
  body.b4 .header-menu .sy-catdrop__list{display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));align-content:start;gap:8px;min-width:0;padding:0}
  body.b4 .header-menu .sy-catdrop__item{display:flex;align-items:center;min-height:52px;padding:10px 14px;border-radius:14px;background:var(--tint);color:var(--ink);font:700 15px/1.2 var(--f-d);white-space:normal;transition:transform .35s var(--out),box-shadow .2s ease-out}
  body.b4 .header-menu .sy-catdrop__item:hover{background:var(--tint);color:var(--ink);transform:translateY(-2px);box-shadow:inset 0 0 0 2px var(--ink)}
  body.b4 .header-menu .sy-catdrop__all{grid-column:1/-1;justify-self:start;margin:4px 0 0;padding:0 22px;min-height:44px;display:inline-flex;align-items:center;border-radius:999px;background:var(--ink);color:#fff;font:700 15px/1 var(--f-d);transition:background-color .2s ease-out}
  body.b4 .header-menu .sy-catdrop__all:hover{background:var(--navy)}
  body.b4 .header-menu .sy-catdrop__promo{flex:0 0 210px;border:0;border-radius:18px;background:var(--tint)}
  body.b4 .header-menu .sy-catdrop__promo-label{font:800 12px/1 var(--f-b);letter-spacing:.06em;color:var(--gold-ink)}
  body.b4 .header-menu .sy-catdrop__promo-img{filter:drop-shadow(0 12px 12px rgba(60,40,10,.22))}
  body.b4 .header-menu .sy-catdrop__promo-name{font:700 14px/1.3 var(--f-b);color:var(--ink)}
  body.b4 .header-menu .sy-catdrop__promo:hover .sy-catdrop__promo-name{color:var(--blue)}
}
/* 992–1179: логотип в верхней строке, корзина значком (как сейчас на сайте) — логотип чуть меньше */
@media (min-width:992px) and (max-width:1179.98px){
  body.b4{--b4-logo:200px}
  body.b4 .header-menu-block .header-menu__link{padding:0 11px;font-size:14px!important}
}
@media (min-width:992px) and (max-width:1199.98px){
  body.b4 .header-body .sy-soc{width:36px;height:36px}
}
/* ≥1180: логотип по центру обеих строк (логотип и меню), меню сдвинуто вправо от него */
@media (min-width:1180px){
  body.b4 .header-body{position:relative;padding-left:calc(var(--b4-logo) + 28px)}
  body.b4 .header-body__logo-block{position:absolute;z-index:2;left:0;top:calc((var(--b4-row) + var(--b4-nav))/2);translate:0 -50%;margin:0}
  body.b4 .header-menu-block .header-menu{padding-left:calc(var(--b4-logo) + 28px)}
}
@media (min-width:1180px) and (max-width:1359.98px){
  body.b4 .header-menu-block .header-menu__link{padding:0 10px;font-size:14px!important}
}
/* 1180–1199: контейнер темы ещё 960 px — логотип и отступы пунктов меньше, чтобы меню не заходило под логотип */
@media (min-width:1180px) and (max-width:1199.98px){
  body.b4{--b4-logo:200px}
  body.b4 .header-menu-block .header-menu__list{justify-content:flex-end;gap:0}
  body.b4 .header-menu-block .header-menu__link{padding:0 6px;font-size:13.5px!important}
}

/* телефон и планшет (<992): бургер · логотип · «Войти», ниже поиск; липнет только первая строка */
@media (max-width:991.98px){
  body.b4{--b4-logo:200px}
  body.b4 .header-body{position:relative;flex-wrap:wrap;align-items:center;padding:8px 0 10px;row-gap:0}
  body.b4 .header-body__mobile-menu-button{width:44px;min-height:44px;padding:0;margin-right:8px;justify-content:center}
  body.b4 .header-body__mobile-menu-button path{stroke:var(--ink)}
  body.b4 .header-body__logo-block{margin-right:0}
  body.b4 .mobile-enter{top:12px;right:0}
  body.b4 .mobile-enter>a{min-height:40px;padding:0 16px;border:2px solid var(--line);border-radius:999px;background:#fff;box-shadow:none;font:700 14px/1 var(--f-d);color:var(--ink)}
  body.b4 .mobile-enter>a>img{height:16px}
  body.b4 .header .search{flex:0 0 100%;width:100%;margin-top:10px;order:3}
  body.b4 .header .search__block{width:100%}
}
/* 768–991: избранное и корзина в первой строке справа; «Войти» — одна кнопка (у темы здесь две, одна поверх другой) */
@media (min-width:768px) and (max-width:991.98px){
  body.b4 .mobile-enter{display:none}
  body.b4 .header-controls{order:2;margin-left:auto;gap:6px}
  body.b4 .header-controls .header-controls__control{margin-right:0}
  body.b4 .header-controls .laptop_enter{min-height:40px;padding:0 16px;border:2px solid var(--line);border-radius:999px;background:#fff;font:700 14px/1 var(--f-d);color:var(--ink);gap:6px}
  body.b4 .header-controls .laptop_enter .header-controls__control-icon{width:16px;height:16px;margin:0}
  body.b4 .sy-cart{height:44px}
}
@media (max-width:480px){
  body.b4{--b4-logo:168px}
}
@media (max-width:380px){
  body.b4{--b4-logo:148px}
  body.b4 .mobile-enter>a{padding:0 12px}
}

/* выдвижное мобильное меню: светлый лист, разделы каталога — цветные плитки */
body.b4 .mobile-menu{background:var(--paper)}
body.b4 .sy-mm-close svg{stroke:var(--ink)}
@media (max-width:991.98px){
  body.b4 .mobile-menu .header-menu__item{border-bottom-color:var(--line)}
  body.b4 .mobile-menu .header-menu__item:hover,body.b4 .mobile-menu .header-menu__item:active{background:var(--cream)}
  body.b4 .mobile-menu .header-menu__link{height:54px;font:700 16px/1.2 var(--f-b)!important;letter-spacing:0;text-transform:none;color:var(--ink)}
  body.b4 .mobile-menu .header-menu__item:hover .header-menu__link{color:var(--ink)}
  body.b4 .mobile-menu .sy-mm-cat{font:800 17px/1.2 var(--f-d)!important}
  body.b4 .mobile-menu .itm-link{margin:6px 16px;padding:0;border:0!important;border-radius:14px;background:var(--tint)}
  body.b4 .mobile-menu .itm-link:hover,body.b4 .mobile-menu .itm-link:active{background:var(--tint)}
  body.b4 .mobile-menu .itm-link .header-menu__link{height:48px;padding-left:16px!important;font:700 15px/1.2 var(--f-d)!important}
  body.b4 .mobile-menu .city__text{font:700 12px/1.3 var(--f-b);letter-spacing:.06em;color:var(--muted)}
  body.b4 .mobile-menu .sy-soc{background:#fff;border-color:var(--line)}
  body.b4 .mobile-menu .sy-soc i{color:var(--gold-ink)}
  body.b4 .mobile-menu .sy-soc:is(:hover,:active){background:var(--gold-l);border-color:var(--gold-l)}
  body.b4 .mobile-menu .sy-soc:is(:hover,:active) i{color:var(--ink)}
}
@media (prefers-reduced-motion:reduce){
  body.b4 .header .search__block,body.b4 .sy-cart,body.b4 .sy-blog-hdr,body.b4 .header-menu-block .header-menu__link,body.b4 .header-menu .sy-catdrop__item,body.b4 .header-menu .sy-catdrop__all{transition:none}
  body.b4 .header-menu .sy-catdrop__item:hover{transform:none}
}

/* ── подвал ── */
body.b4 .sy-ft{background:var(--cream-2);color:var(--text);border-top:2px solid var(--ink);font:400 15px/1.55 var(--f-b)}
body.b4 .sy-ft__inner{max-width:1320px;padding:44px 24px 20px}
body.b4 .sy-ft__grid{grid-template-columns:1.3fr 1fr 1fr 1.3fr;gap:28px}
body.b4 .sy-ft__logo{width:184px;height:auto;margin:0 0 14px}
body.b4 .sy-ft__tagline{max-width:320px;color:var(--text);font-size:15px}
body.b4 .sy-ft__col-title{margin:0 0 10px;font:800 17px/1.1 var(--f-d);letter-spacing:0;text-transform:none;color:var(--ink)}
body.b4 .sy-ft__links{gap:0}
body.b4 .sy-ft__links a{display:inline-flex;align-items:center;min-height:40px;color:var(--text);font:400 15px/1.3 var(--f-b);transition:color .18s ease-out,transform .18s ease-out}
body.b4 .sy-ft__links a:hover{color:var(--blue)}
body.b4 .sy-ft__phone{font:800 21px/1.2 var(--f-d);color:var(--ink)}
body.b4 .sy-ft__phone:hover,body.b4 .sy-ft__email:hover{color:var(--blue)}
body.b4 .sy-ft__email{color:var(--text);border-bottom-color:var(--line-2)}
body.b4 .sy-ft__addr{color:var(--text);font-size:15px}
body.b4 .sy-ft__cta{min-height:44px;padding:0 22px;border-radius:999px;background:var(--ink);box-shadow:none;font:700 15px/1 var(--f-d);letter-spacing:0;text-transform:none;transition:background-color .18s ease-out}
body.b4 .sy-ft__cta:hover{background:var(--navy);transform:none;box-shadow:none}
body.b4 .sy-ft__legal{margin-top:28px;padding-top:18px;border-top:1px solid var(--line-2)}
body.b4 .sy-ft__req,body.b4 .sy-ft__copy{color:var(--muted);font-size:13px}
body.b4 .sy-ft__jur a{color:var(--muted);border-bottom-color:var(--line-2)}
body.b4 .sy-ft__jur a:hover{color:var(--blue);border-color:var(--blue)}
body.b4 .sy-ft__bottom{max-width:1320px;border-top:1px solid var(--line-2)}
body.b4 .sy-ft__social a{background:#fff;color:var(--gold-ink);transition:background-color .18s ease-out,color .18s ease-out,transform .18s ease-out}
body.b4 .sy-ft__social a:hover{background:var(--gold-l);color:var(--ink)}
@media (max-width:1180px){
  body.b4 .sy-ft__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body.b4 .sy-ft__inner{padding:36px 16px 18px}
  body.b4 .sy-ft__grid{grid-template-columns:1fr 1fr;gap:20px}
  body.b4 .sy-ft__brand,body.b4 .sy-ft__grid>.sy-ft__col:last-child{grid-column:1/-1}
  body.b4 .sy-ft__bottom{padding:13px 16px}
}
@media (max-width:767.98px){
  /* место под нижнюю панель, чтобы она не закрывала строку с соцсетями и оплатой */
  body.b4 .sy-ft__bottom{padding-bottom:84px}
}
@media (prefers-reduced-motion:reduce){
  body.b4 .sy-ft__links a,body.b4 .sy-ft__social a{transition:none}
  body.b4 .sy-ft__social a:hover{transform:none}
}

/* ── нижняя панель ── вариант B «Приподнятый круг», цвета B4: тёмные чернила, круг и подписи — светлое золото */
body.b4 .bottom-menu__list{background:rgba(20,26,36,.95);border-top:1px solid rgba(227,199,122,.45)}
body.b4 .bottom-menu__icon svg,body.b4 .bottom-menu__icon svg path{fill:var(--cream)}
body.b4 .bottom-menu__icon svg.cart,body.b4 .bottom-menu__icon svg.cart path{fill:var(--gold-l)}
body.b4 .bottom-menu__text.color_f{font:700 11px/13px var(--f-b);letter-spacing:.02em;text-transform:none;color:rgba(251,245,234,.78)}
body.b4 .bottom-menu__item.is-on .bottom-menu__icon{background:var(--gold-l);box-shadow:0 0 0 5px rgba(20,26,36,.95),0 8px 18px rgba(0,0,0,.35)}
body.b4 .bottom-menu__item.is-on .bottom-menu__icon svg,body.b4 .bottom-menu__item.is-on .bottom-menu__icon svg path{fill:var(--ink)}
body.b4 .bottom-menu__item.is-on .bottom-menu__text.color_f{color:var(--gold-l)}
body.b4 .basket-btn__number_bottom{background:var(--gold-l);color:var(--ink);font:800 10px/16px var(--f-b)}
body.b4 .bottom-menu__item.is-on .basket-btn__number_bottom{background:var(--ink);color:var(--gold-l);box-shadow:0 0 0 2px var(--gold-l)}

/* ── главная ── (Task 2: index.php при sy_b4_on() + include/b4/*.php, въезд банки — static/js/b4-home.js)
 * Порядок (как в макете): плитки разделов · плашки условий · первый экран с H1 · полка хитов · «Хит продаж» · цветные полосы · «Доставка» · «Новинки» · «Новости» · «О бренде». */
body.b4 .b4-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.b4 .b4-ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
body.b4 :is(.b4-hero,.b4-cats,.b4-perks,.b4-bands,.b4-ship) :is(p,ul,h1,h2){margin:0}
/* .container темы местами flex (min-width:auto у ленты растягивает страницу вбок) — в блоках B4 обычный блок */
body.b4 :is(.b4-hero,.b4-shelf,.b4-cats,.b4-perks)>.container{display:block}
body.b4 :is(.b4-cats-l,.b4-perks ul){min-width:0;max-width:100%}

/* кнопки: заливка из центра, прокатка подписи, нажатие */
body.b4 .b4-btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:999px;border:2px solid transparent;font:700 15px/1 var(--f-d);letter-spacing:.01em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform .5s var(--spring),color .2s ease-out,border-color .2s ease-out}
body.b4 .b4-btn::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:260%;aspect-ratio:1;border-radius:50%;background:var(--fill);translate:-50% -50%;scale:0;transition:scale .5s var(--out)}
body.b4 .b4-btn:hover::before{scale:1}
body.b4 .b4-btn:active{transform:scale(.975)}
body.b4 .b4-btn .b4-ico{width:18px;height:18px}
body.b4 .b4-lb{display:inline-block;overflow:hidden;height:1.15em;line-height:1.15;vertical-align:top}
body.b4 .b4-lb>span{display:block;transition:transform .42s var(--out)}
body.b4 .b4-lb>span::after{content:attr(data-t);display:block}
body.b4 .b4-btn:hover .b4-lb>span,body.b4 .b4-btn:focus-visible .b4-lb>span{transform:translateY(-50%)}
body.b4 .b4-btn-p,body.b4 .b4-btn-p:hover{background:var(--blue);color:#fff;--fill:var(--blue-h)}
body.b4 .b4-btn-l,body.b4 .b4-btn-l:hover{background:#fff;color:var(--ink);--fill:var(--gold-l)}
body.b4 .b4-btn-k,body.b4 .b4-btn-k:hover{background:var(--ink);color:#fff;--fill:var(--navy)}
body.b4 .b4-btn-g,body.b4 .b4-btn-g:hover{background:transparent;color:var(--ink);border-color:var(--ink);--fill:var(--gold-t)}
body.b4 .b4-btn-s{min-height:44px;padding:0 16px;font-size:14px}
body.b4 .b4-price{font:800 24px/1 var(--f-d);color:var(--ink);letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}

/* наклейки: текст по кругу (поворот от прокрутки — b4-home.js), «отклеить уголком» при наведении */
body.b4 .stk{--c:var(--gold-l);--fg:var(--ink);--back:#fff7e2;position:relative;display:grid;place-items:center;width:var(--sz,132px);aspect-ratio:1;flex:none;color:var(--fg)}
body.b4 .stk-f{position:absolute;inset:0;border-radius:50%;background:var(--c);clip-path:polygon(0 0,100% 0,100% 100%,100% 100%,0 100%);transition:clip-path .45s var(--out);box-shadow:inset 0 0 0 3px rgba(255,255,255,.35)}
body.b4 .stk-fl{position:absolute;inset:0;border-radius:50%;pointer-events:none;background:linear-gradient(135deg,#fffaf0 0%,var(--back) 55%,#e9dcbc 100%);clip-path:polygon(100% 100%,100% 100%,100% 100%);transition:clip-path .45s var(--out);filter:drop-shadow(-3px -3px 4px rgba(60,40,10,.25))}
body.b4 :is(a,.b4-band):hover .peel .stk-f{clip-path:polygon(0 0,100% 0,100% 64%,64% 100%,0 100%)}
body.b4 :is(a,.b4-band):hover .peel .stk-fl{clip-path:polygon(100% 64%,64% 100%,64% 64%)}
body.b4 .stk-in{position:relative;z-index:1;display:grid;place-items:center;width:100%;height:100%;border-radius:50%;text-align:center}
body.b4 .stk-in>span{display:grid;justify-items:center;width:100%}
body.b4 .ring{position:absolute;inset:0;width:100%;height:100%}
body.b4 .ring text{font:800 9.6px var(--f-d);letter-spacing:.14em;text-transform:uppercase;fill:currentColor}
body.b4 .stk-b{position:relative;font:700 calc(var(--sz,132px)*.24)/1 var(--f-c);letter-spacing:0}
body.b4 .stk-b.sm{font-size:calc(var(--sz,132px)*.18)}
body.b4 .stk-m{position:relative;display:block;max-width:74%;margin:3px auto 0;font:800 max(11px,calc(var(--sz,132px)*.085))/1.1 var(--f-b)}

/* первый экран: банка 81106 на цвете креатина; H1 — мелкая строка + крупная надпись <span> */
body.b4 .b4-hero{padding:12px 0 0}
body.b4 .b4-hero-in{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px;align-items:start;padding:28px 44px 40px;border-radius:28px;background:#bacdfb url(/static/img/b4/bg/bg-hero.webp) right top 70%/cover no-repeat}
body.b4 .b4-hero-t{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);gap:18px;justify-items:start}
body.b4 .b4-hero h1{font:800 clamp(17px,1.4vw,21px)/1.25 var(--f-d);color:var(--ink);letter-spacing:0;text-wrap:balance}
body.b4 .b4-hero h1>span{display:block;margin:.14em 0 .16em;font:700 clamp(56px,min(8vw,12.5dvh),132px)/.9 var(--f-c);color:var(--ink);text-transform:uppercase;letter-spacing:0}
body.b4 .b4-hero p{max-width:44ch;font-size:18px;color:var(--ink)}
body.b4 .b4-cta{display:flex;flex-wrap:wrap;gap:10px}
body.b4 .b4-hhit{position:relative;z-index:2;display:grid;justify-items:center;gap:12px}
body.b4 .b4-hhit-ph{position:relative;display:block;width:min(100%,340px)}
body.b4 .b4-hhit-ph img{width:100%;height:auto;filter:drop-shadow(0 24px 22px rgba(20,40,100,.3));transition:transform .6s var(--spring)}
body.b4 .b4-hhit:hover .b4-hhit-ph img{transform:translateY(-8px) rotate(-3deg)}
body.b4 .b4-hhit .stk{position:absolute;top:-8px;right:-22px;z-index:1;rotate:10deg;transition:opacity .4s ease-out,scale .7s var(--spring)}
body.b4 .b4-hhit-t{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 14px;width:100%;transition:opacity .5s ease-out .15s,translate .6s var(--out) .15s}
body.b4 .b4-hhit-n{width:100%;font:800 17px/1.2 var(--f-d);color:var(--ink);text-align:center}
/* въезд банки: до старта (b4-pre) и во время (b4-intro) надпись открывает JS через clip-path, наклейка и подпись ждут финиша */
body.b4 .b4-pre h1>span{clip-path:inset(-12% 100% -12% -6%)}
body.b4 .b4-pre .b4-hhit-ph img{opacity:0}
body.b4 .b4-intro .b4-hhit-ph img{transition:none;will-change:transform}
body.b4 .b4-intro h1>span{will-change:clip-path}
body.b4 :is(.b4-pre,.b4-intro) .b4-hhit .stk{opacity:0;scale:.2}
body.b4 :is(.b4-pre,.b4-intro) .b4-hhit-t{opacity:0;translate:0 12px}

/* полка хитов узкой полосой */
body.b4 .b4-shelf{margin-top:16px}
body.b4 .b4-shelf-a{display:block;border-radius:22px;overflow:hidden}
body.b4 .b4-shelf img{display:block;width:100%;height:auto;aspect-ratio:1536/408;object-fit:cover}

/* плитки разделов */
body.b4 .b4-cats{padding:28px 0 4px}
body.b4 .b4-cats-l{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:14px;padding:0 0 14px;list-style:none}
body.b4 .b4-ct{position:relative;display:flex;flex-direction:column;width:100%;padding:0;border:0;background:none;color:var(--ink);font:inherit;text-align:left;text-decoration:none;cursor:pointer}
body.b4 .b4-ct:hover{color:var(--ink)}
body.b4 .b4-ct-i{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1.2;border-radius:var(--r);background:var(--tint) var(--ctbg,none) center/cover no-repeat;overflow:hidden}
body.b4 .b4-ct-i img{width:60%;height:auto;filter:drop-shadow(0 14px 14px rgba(60,40,10,.25));transition:transform .5s var(--spring)}
body.b4 .b4-ct:is(:hover,:focus-visible) .b4-ct-i img{transform:translateY(-8px) rotate(-3deg) scale(1.04)}
body.b4 .b4-ct-n{display:block;margin-top:10px;font:800 17px/1.15 var(--f-d);letter-spacing:-.01em}
body.b4 .b4-ct-c{display:block;margin-top:4px;font:600 13px/1.3 var(--f-b);color:var(--muted)}
body.b4 .b4-pct{display:grid;justify-items:center;font:700 clamp(36px,3.6vw,54px)/.9 var(--f-c);color:var(--ink);transition:transform .5s var(--spring)}
body.b4 .b4-pct small{margin-top:8px;font:800 14px/1 var(--f-b);letter-spacing:.12em}
body.b4 .b4-ct:hover .b4-pct{transform:rotate(-4deg) scale(1.05)}
/* бонусный баланс вошедшего вместо START20 (include/b4/cats.php): сумма длиннее «−20%» — кегль от ширины плитки */
body.b4 .b4-pct--sum{font-size:clamp(24px,2.3vw,38px);white-space:nowrap}
body.b4 .is-copied .b4-ct-c{color:var(--ok)}

/* плашки условий */
body.b4 .b4-perks{padding:2px 0 0}
body.b4 .b4-perks ul{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:14px;padding:0;list-style:none}
body.b4 .b4-perks li{position:relative;display:flex;align-items:center;gap:14px;min-width:0;padding:12px 18px;border-radius:var(--r);background:var(--pk);color:var(--ink)}
body.b4 .b4-perks li>div{min-width:0}
body.b4 .b4-pk-i{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:50%;background:var(--paper);transition:transform .5s var(--spring)}
body.b4 .b4-perks li:hover .b4-pk-i{transform:rotate(-8deg) scale(1.06)}
body.b4 .b4-pk-i .b4-ico{width:24px;height:24px;stroke-width:1.7}
body.b4 .b4-perks b{display:block;font:700 18px/1.15 var(--f-c);letter-spacing:.03em;text-transform:uppercase}
body.b4 .b4-perks span{display:block;font-size:14px;line-height:1.35;color:var(--text)}
body.b4 .b4-perks a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
body.b4 .b4-code{display:inline-flex;align-items:center;gap:8px;flex:none;min-height:44px;margin-left:auto;padding:0 14px;border:1.5px dashed var(--ink);border-radius:12px;background:var(--paper);color:var(--ink);font:700 16px/1 var(--f-c);letter-spacing:.1em;cursor:pointer;transition:transform .3s var(--spring),background-color .2s ease-out}
body.b4 .b4-code:hover{background:#fff;transform:translateY(-2px)}
body.b4 .b4-code:active{transform:scale(.97)}
body.b4 .b4-code .b4-ico{width:18px;height:18px}
body.b4 .b4-code.is-copied{border-style:solid;border-color:var(--ok);color:var(--ok)}

/* прежние блоки главной в оформлении B4: «Хит продаж», «Новинки», «Новости» — заголовки и отступы (карточки — Task 3) */
body.b4 :is(.section-best-offers,.section-new-product,.section-reviews){padding:56px 0 8px;background:transparent}
body.b4 :is(.section-best-offers,.section-new-product,.section-reviews) .title-block{align-items:flex-end;gap:12px 16px;margin-bottom:18px}
body.b4 :is(.section-best-offers,.section-new-product,.section-reviews) .title-block__h2{margin:0;font:800 clamp(2rem,1.4rem + 1.8vw,3.2rem)/1.02 var(--f-d);letter-spacing:-.015em;color:var(--ink)}
body.b4 :is(.section-best-offers,.section-new-product,.section-reviews) .all-catalog{display:inline-flex;align-items:center;min-height:44px;margin:0;padding:0 18px;border:2px solid var(--ink);border-radius:999px;color:var(--ink);font:700 14px/1 var(--f-d);letter-spacing:.01em;text-transform:none;transition:background-color .2s ease-out}
body.b4 :is(.section-best-offers,.section-new-product,.section-reviews) .all-catalog:hover{background:#fff;color:var(--ink)}
body.b4 #hits{scroll-margin-top:calc(var(--b4-row,76px) + var(--b4-nav,56px) + 12px)}
body.b4 .section-reviews .reviews{gap:18px;flex-wrap:nowrap}
body.b4 .section-reviews .review{flex:1 1 0;min-width:0;padding:22px 22px 24px;border:2px solid var(--ink);border-radius:var(--r);background:var(--paper)}
body.b4 .section-reviews .review__header-info-date{color:var(--muted);font:700 12px/1.3 var(--f-b);letter-spacing:.06em}
body.b4 .section-reviews .review__header-info-name{color:var(--ink);font:800 19px/1.25 var(--f-d)}
body.b4 .section-reviews .review__text{color:var(--text);font:400 15px/1.55 var(--f-b)}
body.b4 .section-reviews .review__button{align-self:flex-start;margin-top:auto;padding:0 18px;min-height:44px;display:inline-flex;align-items:center;border:0;border-radius:999px;background:var(--ink);color:#fff;font:700 14px/1 var(--f-d);text-transform:none;letter-spacing:.01em}
body.b4 .section-reviews .review__button:hover{background:var(--navy);color:#fff}
/* «О бренде»: панель цвета B4, заголовки Rubik */
body.b4 .sy-about{padding:56px 0 56px;background:transparent}
body.b4 .sy-about__panel{border-radius:var(--r);background:var(--blue);box-shadow:none}
body.b4 .sy-about__panel:hover{box-shadow:0 18px 34px -16px rgba(31,58,138,.55)}
body.b4 .sy-about__ptitle{font:800 26px/1.15 var(--f-d)}
body.b4 .sy-about__badge{color:var(--gold-l);font-family:var(--f-d)}
body.b4 .sy-about__btn{border-radius:999px;font-family:var(--f-d);text-transform:none;letter-spacing:.01em;font-size:15px}
body.b4 .sy-about__content .about-info__title{color:var(--ink);font-family:var(--f-d)}
body.b4 .sy-about__content .about-info__text{color:var(--text);font-family:var(--f-b)}

/* цветные полосы разделов */
body.b4 .b4-bands{margin-top:64px}
body.b4 .b4-band{--bg:var(--cream-2);position:relative;display:flex;min-height:440px;overflow:hidden;background:var(--bg) var(--bgi,none) center/cover no-repeat;color:var(--fg,var(--ink))}
body.b4 .b4-band::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 82%,transparent) 34%,transparent 60%);pointer-events:none}
body.b4 .b4-band:nth-child(even)::before{background:linear-gradient(270deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 82%,transparent) 34%,transparent 60%)}
body.b4 .b4-band-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;padding-top:56px}
body.b4 .b4-band:nth-child(even) .b4-band-t{order:2}
body.b4 .b4-band-t{display:grid;gap:18px;justify-items:start;align-content:center;padding-bottom:56px}
body.b4 .b4-band h2{font:700 clamp(64px,9vw,148px)/.9 var(--f-c);color:inherit;text-transform:uppercase;letter-spacing:0;text-wrap:balance}
body.b4 .b4-band-long h2{font-size:clamp(52px,6.4vw,104px)}
body.b4 .b4-band p{max-width:40ch;font-size:18px;font-weight:600}
body.b4 .b4-band-p{position:relative;display:flex;justify-content:center;align-items:flex-end;align-self:end;min-width:0;margin-bottom:-44px}
body.b4 .b4-band-p img{width:min(40%,300px);height:auto;margin-inline:-3%;filter:drop-shadow(0 18px 18px rgba(20,26,36,.28));transition:transform .6s var(--spring)}
body.b4 .b4-band-p.n4 img{width:min(30%,240px)}
body.b4 .b4-band-p img:nth-of-type(2){position:relative;z-index:1}
body.b4 .b4-band:hover .b4-band-p img:nth-of-type(1){transform:rotate(-6deg) translateY(-6px)}
body.b4 .b4-band:hover .b4-band-p img:nth-of-type(2){transform:translateY(-10px)}
body.b4 .b4-band:hover .b4-band-p img:nth-of-type(3){transform:rotate(6deg) translateY(-6px)}
body.b4 .b4-band-p .stk{position:absolute;top:-96px;left:2%;z-index:2;rotate:-10deg}
body.b4 .b4-band-p .stk+.stk{top:-64px;left:auto;right:0;rotate:9deg}
body.b4 .b4-on-blue{--bg:var(--blue);--fg:#fff}
body.b4 .b4-on-blue p{color:#fff}
@supports (animation-timeline:view()){
  body.b4 .b4-band-p{animation:b4drift linear both;animation-timeline:view();animation-range:cover}
}
@keyframes b4drift{from{transform:translateY(16px)}to{transform:translateY(-16px)}}

/* доставка: фото коробок справа на оранжевом */
body.b4 .b4-ship{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:420px;margin-top:56px;overflow:hidden;background:url(/static/img/b4/bg/bg-dostavka.webp) right bottom/auto 100% no-repeat,radial-gradient(120% 140% at 0% 0%,#f8b47e 0%,#f6a56c 30%,#f49a5a 62%) #f49a5a;color:var(--ink)}
body.b4 .b4-ship-t{display:grid;align-content:center;gap:14px;padding:44px 96px 44px max(var(--gut),calc((100vw - 1320px)/2 + 12px))}
body.b4 .b4-ship h2{font:700 clamp(40px,4.4vw,72px)/.92 var(--f-c);color:inherit;text-transform:uppercase}
body.b4 .b4-ship p{font-size:17px;font-weight:600}
body.b4 .b4-ship a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
body.b4 .b4-ship-ph{position:relative;min-height:220px;container-type:size}
body.b4 .b4-ship-ph .stk{position:absolute;top:34%;left:auto;right:104cqh;z-index:2;translate:0 -50%;rotate:-8deg}

@media (max-width:1180px){
  body.b4 .b4-cats-l{grid-auto-columns:160px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
  body.b4 .b4-cats-l>li{scroll-snap-align:start}
  body.b4 .b4-perks li{gap:12px;padding:10px 14px}
  body.b4 .b4-pk-i{width:40px;height:40px}
  body.b4 .b4-pk-i .b4-ico{width:21px;height:21px}
  body.b4 .b4-perks b{font-size:16px}
  body.b4 .b4-perks span{font-size:13px}
}
/* плашки в ленту с прокруткой, пока в три колонки им тесно (контейнер темы 960 px до 1199) */
@media (max-width:1199px){
  body.b4 .b4-perks ul{grid-auto-columns:minmax(320px,1fr);gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  body.b4 .b4-perks ul::-webkit-scrollbar{display:none}
  body.b4 .b4-perks li{scroll-snap-align:start}
}
@media (max-width:1023px){
  body.b4 .b4-hero-in{padding:32px}
  body.b4 .b4-band{min-height:0}
  body.b4 .b4-band-in{grid-template-columns:1fr;gap:4px;padding-top:0}
  body.b4 .b4-band:nth-child(even) .b4-band-t{order:0}
  body.b4 .b4-band-t{padding-bottom:40px}
  body.b4 .b4-band-p{order:-1;align-self:start;margin:-24px 0 8px}
  body.b4 .b4-band::before,body.b4 .b4-band:nth-child(even)::before{background:linear-gradient(0deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 88%,transparent) 50%,color-mix(in srgb,var(--bg) 30%,transparent) 100%)}
  body.b4 .b4-band-p .stk,body.b4 .b4-band-p .stk+.stk{top:auto;bottom:-6px;left:0;right:auto}
  body.b4 .b4-band-p .stk+.stk{left:auto;right:0}
  body.b4 .b4-ship{grid-template-columns:1fr;background:url(/static/img/b4/bg/bg-dostavka.webp) right top/auto 420px no-repeat #f49a5a}
  body.b4 .b4-ship-ph{order:-1;min-height:420px}
  body.b4 .b4-ship-ph::after{content:"";position:absolute;inset:auto 0 0;height:36px;background:linear-gradient(transparent,#f49a5a)}
  body.b4 .b4-ship-t{padding:40px var(--gut)}
  body.b4 .b4-ship-ph .stk{top:24px;bottom:auto;left:var(--gut);right:auto;translate:none}
  body.b4 .section-reviews .reviews{flex-wrap:wrap}
  body.b4 .section-reviews .review{flex:1 1 280px}
}
@media (max-width:760px){
  body.b4 .b4-hero-in{background:linear-gradient(180deg,#bacdfb 0%,rgb(186 205 251/.9) 38%,rgb(186 205 251/.35) 70%,rgb(186 205 251/0) 100%),url(/static/img/b4/bg/bg-hero-900.webp) right 72% bottom/auto 100% no-repeat,#bacdfb}
  body.b4 .b4-cats-l{grid-auto-columns:42vw;gap:12px}
  body.b4 .b4-ct-i{aspect-ratio:1.15}
  body.b4 :is(.b4-band,.b4-hhit,.b4-ship) .stk{--sz:96px}
  body.b4 :is(.b4-band,.b4-hhit,.b4-ship) .ring{display:none}
  body.b4 .b4-band-p img{width:min(40%,200px)}
  body.b4 .b4-band-p.n4 img{width:29%}
  body.b4 .b4-bands{margin-top:48px}
  body.b4 :is(.section-best-offers,.section-new-product,.section-reviews){padding-top:44px}
  body.b4 .sy-about{padding:44px 0}
}
@media (max-width:600px){
  body.b4 .b4-ship{background-size:100% auto;background-position:center top}
  body.b4 .b4-ship-ph{min-height:calc(100vw * 924 / 976)}
  body.b4 .b4-perks ul{grid-auto-columns:86%}
  body.b4 .b4-perks li{gap:12px;padding:12px 14px}
  body.b4 .b4-code{padding:0 10px;font-size:14px}
  body.b4 .b4-hero{padding-top:14px}
  body.b4 .b4-hero-in{grid-template-columns:minmax(0,1fr);gap:18px;padding:18px 20px 24px}
  body.b4 .b4-hero h1{font-size:15px}
  body.b4 .b4-hero p{font-size:16px}
  body.b4 .b4-cta{flex-wrap:nowrap;width:100%}
  body.b4 .b4-cta .b4-btn{flex:1 1 0;min-width:0;padding:0 8px;font-size:14px}
  body.b4 .b4-cta .b4-btn .b4-ico{display:none}
  body.b4 .b4-cta .b4-btn-p{flex-grow:1.3}
  body.b4 .b4-hhit{grid-template-columns:104px minmax(0,1fr);justify-items:start;align-items:center;gap:14px;width:100%;padding:12px;border-radius:20px;background:rgba(255,255,255,.65)}
  body.b4 .b4-hhit-ph{width:104px}
  body.b4 .b4-hhit .stk{--sz:84px;top:-30px;right:auto;left:-26px}
  body.b4 .b4-hhit-t{justify-content:flex-start}
  body.b4 .b4-hhit-n{font-size:16px;text-align:left}
  body.b4 .b4-shelf-a{border-radius:16px}
}
@media (max-width:480px){
  body.b4 .b4-ct-n{font-size:16px}
  body.b4 .b4-band p{font-size:16px}
}
@media (max-width:400px){
  body.b4 .b4-hero h1>span{font-size:min(58px,15vw)}
}
@media (prefers-reduced-motion:reduce){
  body.b4 .b4-btn::before{transition:none}
  body.b4 :is(.b4-btn,.b4-lb>span,.stk-f,.stk-fl,.b4-hhit-ph img,.b4-hhit .stk,.b4-hhit-t,.b4-ct-i img,.b4-pct,.b4-pk-i,.b4-code,.b4-band-p img,.all-catalog){transition:none}
  body.b4 .b4-band-p{animation:none}
}

/* главная, низкие окна (10.11): в порядке макета плитки и плашки стоят над первым экраном — на ноутбуках 720–800 px и телефонах 640 px
   «SYNTIME NUTRITION» уходила под край. Плитки ниже, отступы плотнее, размер надписи — от высоты окна (как в макете: min(vw, dvh)). */
@media (min-width:761px) and (max-height:820px){
  body.b4 .b4-cats{padding-top:14px}
  body.b4 .b4-cats-l{padding-bottom:10px}
  body.b4 .b4-ct-i{aspect-ratio:1.75}
  body.b4 .b4-ct-i img{width:42%}
  body.b4 .b4-perks li{padding-block:8px}
  body.b4 .b4-hero{padding-top:10px}
  body.b4 .b4-hero-in{padding-top:18px}
  body.b4 .b4-hero-t{gap:12px}
  body.b4 .b4-hero h1>span{font-size:clamp(52px,min(8vw,10dvh),132px)}
}
@media (max-width:760px) and (max-height:700px){
  body.b4 .b4-cats{padding-top:12px}
  body.b4 .b4-ct-i{aspect-ratio:1.6}
  body.b4 .b4-hero{padding-top:8px}
  body.b4 .b4-hero-in{padding-top:14px}
}

/* ── карточки ── (Task 3: шаблоны catalog.section search/bootstrap_v4/index_bestseller/index_newproducts/viewed_products)
 * Разметка карточек кэшируется и одна на оба режима: фон фото приходит классом sy-ph и переменными --phbg/--tint
 * (local/php_interface/b4_card_bg.php), всё остальное — перекраска прежних классов. Правила темы в header.php местами
 * с !important (кнопки и счётчик) — здесь перекрываем так же. Полёт банки в корзину — static/js/b4-cart-fly.js. */
/* сетка: 2 в ряд на телефоне и в каталоге с боковым меню до 1200, 3 — с 768 на главной и с 1200 в каталоге, 4 — на главной и в поиске с 1200 */
body.b4 .catalog-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px;margin:0}
body.b4 .catalog-row>.best-offers__col{width:auto;max-width:none!important;flex:none!important;padding:0;margin:0}
@media (min-width:768px){body.b4 .catalog-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 18px}body.b4 .page-container__main .catalog-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){body.b4 .catalog-row{grid-template-columns:repeat(4,minmax(0,1fr))}body.b4 .page-container__main .catalog-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
body.b4 .best-offers>.row{margin:0}

/* рамка карточки, подъём при наведении — только transform */
body.b4 .best-offers-item-block{display:flex;flex-direction:column;height:100%;margin:0;padding:12px 12px 14px;border:2px solid var(--ink);border-radius:var(--r);background:var(--paper);box-shadow:none;transition:transform .5s var(--spring)}
body.b4 .best-offers-item-block.card-hover-effect:hover{border-color:var(--ink);box-shadow:none;transform:translateY(-4px)}
body.b4 .best-offers-item-mini{flex:1 1 auto;box-shadow:none;background:transparent}

/* фото: банка на цвете темы и тематическом фоне, при наведении приподнимается, по фото проходит блик */
body.b4 .best-offers-item__image-block{position:relative;display:block;width:100%;max-width:none;height:auto;aspect-ratio:1.05;margin:0 0 12px;border-radius:14px;overflow:hidden;background:var(--tint,var(--cream-2)) var(--phbg,none) center/cover no-repeat}
body.b4 .best-offers-item__image-block>a{position:absolute;inset:0;display:grid;place-items:center}
body.b4 .best-offers-item__image-product{position:static;width:76%;height:auto;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 14px 14px rgba(60,40,10,.22));transition:transform .5s var(--spring)}
/* у 14 товаров фото — JPEG на белом: белое растворяем в цвете фона, тень от квадрата не рисуем */
body.b4 .best-offers-item__image-product:is([src$=".jpg"],[src$=".jpeg"],[src$=".JPG"]){mix-blend-mode:multiply;filter:none}
body.b4 .best-offers-item-block:hover .best-offers-item__image-product{transform:translateY(-8px)}
body.b4 .best-offers-item__image-block::after{content:"";position:absolute;inset:-20% auto -20% 0;width:45%;background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);transform:translateX(-160%) skewX(-12deg);pointer-events:none}
body.b4 .best-offers-item-block:hover .best-offers-item__image-block::after{transform:translateX(330%) skewX(-12deg);transition:transform .9s var(--out)}
body.b4 .best-offers-item__image-block .sy-badge-cz{left:10px;bottom:10px}
/* «Вы смотрели» — маленькое фото на том же фоне */
body.b4 .you-watched-item__image-block.sy-ph{border-radius:12px;background:var(--tint,var(--cream-2)) var(--phbg,none) center/cover no-repeat}

/* наклейки «Хит» (круг, как в макете) и «Новинка» (пилюля) — на углу фото */
body.b4 .best-offers-item-block .sy-badges{top:20px;left:20px;gap:8px}
body.b4 .best-offers-item-block .sy-badge{display:grid;place-items:center;width:52px;height:52px;padding:0;border:0;border-radius:50%;background:var(--ink);color:var(--gold-l);font:800 13px/1 var(--f-d);letter-spacing:0;text-transform:none;rotate:-10deg}
body.b4 .best-offers-item-block .sy-badge::before{display:none}
body.b4 .best-offers-item-block .sy-badge--new{width:auto;height:auto;padding:7px 10px;border:2px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font-size:12px;rotate:4deg}

/* избранное — белый круг в правом углу фото; «Подробнее» дублирует ссылку фото и названия — в B4 не показываем */
body.b4 .best-offers-item-block .card-controls{top:20px;right:20px;left:auto;display:flex;gap:6px;transition:none}
body.b4 .best-offers-item-block .card-controls__block{width:40px;height:40px;margin:0;border:2px solid var(--ink);border-radius:50%;background:#fff;transition:background-color .2s ease-out}
body.b4 .best-offers-item-block .card-controls__block:not([data-wlid]){display:none}
body.b4 .best-offers-item-block .card-controls__block:hover,body.b4 .best-offers-item-block .card-controls__block.active{border-color:var(--ink);background:var(--gold-l)}
body.b4 .best-offers-item-block .card-controls__block:hover .svg path,body.b4 .best-offers-item-block .card-controls__block.active .svg path{fill:var(--ink)}
body.b4 .best-offers-item-block .card-controls__block:focus-visible{outline:2.5px solid var(--blue);outline-offset:3px}

/* текст: название до 3 строк, наличие и артикул мелко, цена крупно, старая цена зачёркнута, бонусы золотом */
body.b4 .best-offers-item__body{padding:0;gap:0;color:var(--text)}
body.b4 .best-offers-item__name-product{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:0;margin:0 0 6px;font:700 16px/1.3 var(--f-b);color:var(--ink)}
body.b4 .best-offers-item__body:hover .best-offers-item__name-product{color:var(--blue)}
body.b4 .best-offers-item__body .reviews_in_list{margin:0 0 4px;font:700 13px/1.3 var(--f-b);color:var(--muted)}
body.b4 .best-offers-item__body .reviews_in_list :is(i.fa-star,.rating){color:var(--gold-ink)}
body.b4 .best-offers-item__body>.d-flex:not(.reviews_in_list){flex-wrap:wrap;gap:2px 10px;margin:0 0 10px;font:600 13px/1.3 var(--f-b);color:var(--muted)}
body.b4 .best-offers-item__body .count{margin:0}
body.b4 .best-offers-item__body :is(.count__text,.art){font:600 13px/1.3 var(--f-b)}
body.b4 .best-offers-item__body .art{color:var(--muted)}
body.b4 .best-offers-item__price-product{margin:0;font:800 24px/1.1 var(--f-d);color:var(--ink);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
body.b4 .best-offers-item__price-product.old_price{margin:0 0 2px;font:700 15px/1.2 var(--f-d);color:var(--muted);text-decoration:line-through}
body.b4 .best-offers-item-block:not(:has(.product-drop-buttons)) .best-offers-item__price-product{font:700 16px/1.3 var(--f-d);color:var(--muted)}
body.b4 .best-offers-item__body .sy-bonus-line{margin:4px 0 0;font:800 14px/1.3 var(--f-b);color:var(--gold-ink);white-space:normal}

/* покупка: «− 1 +» пилюлей и синяя «В корзину»; всегда видна (у темы до 1200 px — только при наведении) */
body.b4 .best-offers-item-block .product-drop-buttons{position:static;display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:auto;height:auto;margin:12px 0 0;border-radius:0;overflow:visible;box-shadow:none;transform:none;opacity:1}
body.b4 .best-offers-item-block .product-drop-buttons>*{flex:0 0 auto}
body.b4 .product-drop-buttons__count{display:inline-flex;align-items:center;border:2px solid var(--ink);border-radius:999px;background:#fff}
body.b4 .product-drop-buttons__count-dec,body.b4 .product-drop-buttons__count-inc{width:40px!important;min-width:40px!important;height:40px;border:0;border-radius:50%;background:none;color:var(--ink);font:700 20px/1 var(--f-d);transition:transform .35s var(--spring)}
body.b4 .product-drop-buttons__count-dec:hover,body.b4 .product-drop-buttons__count-inc:hover{background:var(--cream-2)}
body.b4 .product-drop-buttons__count-dec:active,body.b4 .product-drop-buttons__count-inc:active{transform:scale(.88)}
body.b4 .product-drop-buttons__input{width:28px!important;height:40px;border:0;color:var(--ink);font:800 16px/1 var(--f-b);font-variant-numeric:tabular-nums}
body.b4 .best-offers-item-block .product-drop-buttons .product-drop-buttons__button{flex:1 1 auto;display:block;min-width:max-content;min-height:44px;padding:0 16px;border:2px solid var(--blue)!important;border-radius:999px;background:var(--blue)!important;color:#fff!important;font:700 15px/40px var(--f-d);letter-spacing:.01em;text-align:center;text-transform:none;white-space:nowrap;transition:background-color .2s ease-out,border-color .2s ease-out,transform .5s var(--spring)}
body.b4 .best-offers-item-block .product-drop-buttons .product-drop-buttons__button::first-letter{text-transform:uppercase}
body.b4 .best-offers-item-block .product-drop-buttons .product-drop-buttons__button:hover{border-color:var(--blue-h)!important;background:var(--blue-h)!important;color:#fff!important}
body.b4 .best-offers-item-block .product-drop-buttons .product-drop-buttons__button:active{transform:scale(.975)}
body.b4 .best-offers-item-block .product-drop-buttons .product-drop-buttons__button:focus-visible{outline:2.5px solid var(--blue);outline-offset:3px}
/* уже в корзине — тёмная пилюля на всю ширину */
body.b4 .best-offers-item-block .product-drop-buttons.in_cart .product-drop-buttons__button{flex-basis:100%;border-color:var(--ink)!important;background:var(--ink)!important}
body.b4 .best-offers-item-block .product-drop-buttons.in_cart .product-drop-buttons__button:hover{border-color:var(--navy)!important;background:var(--navy)!important}

/* банка, летящая в корзину */
body.b4 .b4-fly{position:fixed;z-index:120;left:0;top:0;pointer-events:none;filter:drop-shadow(0 10px 10px rgba(20,26,36,.3))}

@media (max-width:767px){
  body.b4 .best-offers-item-block{padding:8px 8px 10px;border-radius:18px}
  body.b4 .best-offers-item-block .sy-badges{top:14px;left:14px}
  body.b4 .best-offers-item-block .sy-badge{width:44px;height:44px;font-size:12px}
  body.b4 .best-offers-item-block .sy-badge--new{width:auto;height:auto;padding:5px 8px;font-size:11px}
  body.b4 .best-offers-item-block .card-controls{top:14px;right:14px}
  body.b4 .best-offers-item-block .product-drop-buttons{flex-direction:column;align-items:stretch}
  body.b4 .product-drop-buttons__count{justify-content:space-between}
  body.b4 .best-offers-item-block .product-drop-buttons .product-drop-buttons__button{width:100%;min-width:0}
}
/* узкий телефон: две колонки по ~150 px — плотнее поля, цена и бонусы мельче; русское имя со вкусом длинное — до 4 строк */
@media (max-width:480px){
  body.b4 .catalog-row{gap:12px 8px}
  body.b4 .best-offers-item-block{padding:6px 6px 8px}
  body.b4 .best-offers-item__name-product{-webkit-line-clamp:4;font-size:14px}
  body.b4 .best-offers-item__price-product{font-size:clamp(15px,4.6vw,21px)}
  body.b4 .best-offers-item__body .sy-bonus-line{font-size:13px}
  body.b4 .best-offers-item-block .sy-badges{top:12px;left:12px}
  body.b4 .best-offers-item-block .sy-badge{width:40px;height:40px;font-size:11px}
  body.b4 .best-offers-item-block .card-controls{top:12px;right:12px}
  body.b4 .best-offers-item-block .card-controls__block{width:34px;height:34px}
}
@media (prefers-reduced-motion:reduce){
  body.b4 :is(.best-offers-item-block,.best-offers-item__image-product,.best-offers-item__image-block::after,.product-drop-buttons__count-dec,.product-drop-buttons__count-inc,.product-drop-buttons__button){transition:none!important}
  body.b4 .best-offers-item-block.card-hover-effect:hover,body.b4 .best-offers-item-block:hover .best-offers-item__image-product{transform:none}
  body.b4 .best-offers-item-block:hover .best-offers-item__image-block::after{transform:translateX(-160%) skewX(-12deg)}
}

/* ── раздел ── (Task 4: catalog/index.php — лендинг подраздела /catalog/<код>/ с шаблоном карточек search
 * и разделы верхнего уровня через bitrix:catalog sy-catalog с bootstrap_v4). Класс sy-sec-<код раздела верхнего уровня>
 * у section.section-catalog ставит catalog/index.php; по нему — цвет и фон полосы с H1, как полосы разделов на главной. */
body.b4 .section-catalog{padding:20px 0 72px;--sec-c:var(--cream-2);--sec-fg:var(--ink);--sec-bg:none;--sec-x:right}
body.b4 .section-catalog.sy-sec-funktsional{--sec-c:var(--blue);--sec-fg:#fff;--sec-bg:url(/static/img/b4/bg/bg-kreatin.webp)}
body.b4 .section-catalog.sy-sec-protein{--sec-c:#e8b84a;--sec-bg:url(/static/img/b4/bg/bg-protein.webp);--sec-x:left}
body.b4 .section-catalog.sy-sec-zdorove_i_dolgoletie{--sec-c:#8cc79a;--sec-bg:url(/static/img/b4/bg/bg-zdorove.webp)}
body.b4 .section-catalog.sy-sec-aminokisloty_{--sec-c:var(--t-amino)}
body.b4 .section-catalog.sy-sec-geynery{--sec-c:var(--t-geynery)}
body.b4 .section-catalog.sy-sec-pokhudenie{--sec-c:var(--t-pokhudenie)}
body.b4 .section-catalog.sy-sec-aksessuary{--sec-c:var(--t-aksessuary)}
/* крошки над полосой и над H1 (у разделов верхнего уровня, товара и корзины шаблон выводит их после H1 — меняем порядок сеткой, разметка та же) */
body.b4 .section-catalog>.container-fluid>.container:has(>.breadcrumb-block){display:grid;grid-template-columns:minmax(0,1fr)}
body.b4 .section-catalog>.container-fluid>.container:has(>.breadcrumb-block)>.breadcrumb-block{order:-1}
body.b4 .breadcrumb-block{align-items:center;gap:0 8px;margin:0 0 12px}
body.b4 .breadcrumb-block__item{display:inline-flex;align-items:center;min-height:36px;margin:0;color:var(--muted);font:600 14px/1.3 var(--f-b)}
body.b4 a.breadcrumb-block__item{text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
body.b4 a.breadcrumb-block__item:hover{color:var(--blue);text-decoration-color:currentColor}
body.b4 .breadcrumb-block__item:last-child{color:var(--ink)}
body.b4 .breadcrumb-block__item::after{position:static;width:auto;height:auto;margin-left:8px;background:none;content:"/";color:#a59a86}
body.b4 .breadcrumb-block__item:last-child::after{display:none}

/* полоса раздела: цвет раздела, фото-фон справа (у протеина брызги слева — зеркалим), H1 крупно узким шрифтом */
body.b4 .section-catalog .container:has(>.catalog-wrapper)>.section-catalog__title-block{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:12px;min-height:240px;margin:0 0 28px;padding:36px 44px;border-radius:28px;overflow:hidden;background:var(--sec-c);color:var(--sec-fg)}
body.b4 .section-catalog .container:has(>.catalog-wrapper)>.section-catalog__title-block::before{content:"";position:absolute;z-index:-1;inset:0;background:var(--sec-bg) var(--sec-x) 60%/cover no-repeat}
body.b4 .section-catalog.sy-sec-protein .container:has(>.catalog-wrapper)>.section-catalog__title-block::before{transform:scaleX(-1)}
body.b4 .section-catalog .container:has(>.catalog-wrapper)>.section-catalog__title-block::after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,var(--sec-c) 0%,color-mix(in srgb,var(--sec-c) 80%,transparent) 38%,transparent 66%)}
body.b4 .section-catalog .container:has(>.catalog-wrapper) .section-catalog__title{max-width:16ch;margin:0;font:700 clamp(48px,6.4vw,112px)/.92 var(--f-c);color:inherit;text-transform:uppercase;letter-spacing:0;text-wrap:balance;overflow-wrap:anywhere}
body.b4 .section-catalog .container:has(>.catalog-wrapper) .title-count{padding:0 14px;min-height:34px;border:0;border-radius:999px;background:var(--paper)}
body.b4 .section-catalog .container:has(>.catalog-wrapper) .title-count__text{color:var(--ink);font:800 14px/1 var(--f-b)}

/* боковое меню разделов и фильтр — карточки с рамкой, как карточки товаров */
body.b4 .page-container__aside{flex-basis:260px;width:260px;margin-right:28px}
body.b4 .catalog-filter__header{display:flex;align-items:center;gap:8px;margin:0 0 10px;color:var(--ink)}
body.b4 .catalog-filter__header-text{color:var(--ink);font:800 13px/1 var(--f-b);letter-spacing:.08em;text-transform:uppercase}
body.b4 .sy-cat-tree{overflow:hidden;margin-bottom:18px;border:2px solid var(--ink);border-radius:var(--r);background:var(--paper)}
body.b4 .sy-cat-tree__group{border-bottom:1px solid var(--line)}
body.b4 .sy-cat-tree__group:last-child{border-bottom:0}
body.b4 .sy-cat-tree__top{padding:12px 16px;color:var(--ink);font:700 15px/1.25 var(--f-b);transition:color .15s ease-out}
body.b4 .sy-cat-tree__top:hover{color:var(--blue)}
body.b4 .sy-cat-tree__top.is-active{background:none;color:#fff}
body.b4 .sy-cat-tree__head:has(>.is-active){background:var(--ink)}
body.b4 .sy-cat-tree__head:has(>.is-active) .sy-cat-tree__toggle{color:#fff}
body.b4 .sy-cat-tree__toggle{width:44px;height:44px;color:var(--muted)}
body.b4 .sy-cat-tree__sub{padding:0 8px 8px;background:transparent}
body.b4 .sy-cat-tree__sub a{padding:8px 10px 8px 16px;border-radius:12px;color:var(--text);font:600 14px/1.3 var(--f-b)}
body.b4 .sy-cat-tree__sub a:hover{color:var(--blue)}
body.b4 .sy-cat-tree__sub a.is-active{background:var(--blue-t);color:var(--ink);font-weight:800}
body.b4 .page-container__aside .smart-filter{padding:14px 14px 12px;border:2px solid var(--ink);border-radius:var(--r);background:var(--paper)}
body.b4 .smart-filter .smart-filter-parameters-box-title{padding:4px 0!important;margin-bottom:4px!important}
body.b4 .smart-filter .smart-filter-parameters-box-title-text{padding:0!important;color:var(--ink);font:800 16px/1.2 var(--f-d)}
body.b4 .smart-filter .form-control{min-height:40px;border:2px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font:600 15px/1 var(--f-b)}
body.b4 .smart-filter .form-control:focus{border-color:var(--blue);box-shadow:none}
body.b4 .smart-filter .smart-filter-slider-price-bar-v{background:var(--blue)}
body.b4 .smart-filter .bx-filter-param-label{color:var(--ink);font:600 15px/1.3 var(--f-b)}
body.b4 .smart-filter .form-check-input{width:20px;height:20px;margin:0;border:2px solid var(--ink);border-radius:6px;accent-color:var(--blue)}
body.b4 .smart-filter .form-check-input:checked{background-color:var(--blue);border-color:var(--blue)}
body.b4 .smart-filter .filter-send{min-height:44px;border:0;border-radius:999px;background:var(--blue);color:#fff;font:700 15px/1 var(--f-d);transition:background-color .2s ease-out}
body.b4 .smart-filter .filter-send:hover{background:var(--blue-h)}
body.b4 .smart-filter .filter-reset{min-height:44px;border:2px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font:700 15px/1 var(--f-d);text-decoration:none}
body.b4 .smart-filter .filter-reset:hover{background:var(--gold-t)}
body.b4 .smart-filter-popup-result{border-radius:12px;background:var(--ink);color:#fff;font:700 14px/1.4 var(--f-b)}
body.b4 .smart-filter-popup-result a{color:var(--gold-l)}

/* стрелки прокрутки колонки (footer.php) — градиент в цвет фона страницы; колонка липнет под липкой шапкой B4 (≥992) */
body.b4 .sy-aside-arrow{color:var(--ink)}
body.b4 .sy-aside-arrow--up{background:linear-gradient(to bottom,var(--cream) 45%,transparent)}
body.b4 .sy-aside-arrow--down{background:linear-gradient(to top,var(--cream) 45%,transparent)}
@media (min-width:992px){
  body.b4 .catalog-wrapper .page-container__aside{top:calc(var(--b4-row) + var(--b4-nav) + 12px);max-height:calc(100vh - var(--b4-row) - var(--b4-nav) - 24px)}
}

/* пагинатор — круглые кнопки; SEO-текст и FAQ — шрифты B4, ширина строки как была */
body.b4 .pagination-block{justify-content:center;width:100%;margin:28px 0 0}
body.b4 .pagination-body{gap:8px}
body.b4 .pagination-body__link{min-width:44px;height:44px;padding:0 12px;border:2px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font:800 15px/1 var(--f-b);transition:background-color .2s ease-out}
body.b4 .pagination-body__link:hover{background:var(--gold-t);color:var(--ink)}
body.b4 .pagination-body__link--active,body.b4 .pagination-body__link--active:hover{background:var(--ink);color:#fff}
body.b4 .catalog-section-seo-text{color:var(--text)!important;font-family:var(--f-b)!important;font-size:16px!important}
body.b4 .catalog-section-seo-text :is(h2,h3){color:var(--ink);font-family:var(--f-d);letter-spacing:-.01em}
body.b4 .catalog-section-seo-text a{color:var(--navy)}
body.b4 .catalog-section-seo-text table{border-radius:14px;overflow:hidden}
body.b4 .sy-landing-bad-note{border-radius:14px!important;border-color:var(--line)!important;background:var(--gold-t)!important;color:#5d4813!important;font-family:var(--f-b)}

/* фильтр на ≤1023 — кнопка-пилюля, панель снизу (логика — sy_filter_panel в app.js, как сейчас) */
@media (max-width:1023.98px){
  body.b4 .sy-filter-toggle{min-height:44px;border:2px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font:700 15px/1 var(--f-d)}
  body.b4 .sy-filter-toggle svg{stroke:var(--ink)}
  body.b4 .sy-filter-toggle__count{background:var(--blue)}
  body.b4 .catalog-wrapper .page-container__aside.is-open{width:auto;margin:0;background:var(--paper)}
  body.b4 .page-container__aside.is-open .catalog-filter__header,body.b4 .page-container__aside.is-open .smart-filter-form>.row:last-child{background:var(--paper);border-color:var(--line)}
  body.b4 .page-container__aside.is-open .smart-filter{padding:0;border:0;background:transparent}
  body.b4 .section-catalog .container:has(>.catalog-wrapper)>.section-catalog__title-block{min-height:200px;padding:28px 32px}
}
@media (max-width:760px){
  body.b4 .section-catalog{padding:12px 0 56px}
  body.b4 .section-catalog .container:has(>.catalog-wrapper)>.section-catalog__title-block{min-height:170px;margin-bottom:20px;padding:22px 20px;border-radius:22px}
  body.b4 .section-catalog .container:has(>.catalog-wrapper)>.section-catalog__title-block::after{background:linear-gradient(90deg,var(--sec-c) 0%,color-mix(in srgb,var(--sec-c) 70%,transparent) 55%,transparent 100%)}
  body.b4 .section-catalog .container:has(>.catalog-wrapper) .section-catalog__title{font-size:clamp(36px,11vw,56px)}
  body.b4 .breadcrumb-block__item{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  body.b4 :is(.sy-cat-tree__top,.smart-filter .filter-send,.pagination-body__link){transition:none}
}

/* ── товар ── (Task 5: catalog.element/sy-element; у .card-big — класс sy-ph и --phbg/--tint из sy_b4_card_bg_attrs(),
 * без ветвления по режиму: шаблон кэшируется. Вкладки — Bootstrap pills с data-bs-*, перекрашены, логика та же.) */
body.b4 .section-catalog .container:has(>.row>[class*="col-"]>.card-big)>.section-catalog__title-block{margin:4px 0 18px}
body.b4 .section-catalog .container:has(>.row>[class*="col-"]>.card-big) .section-catalog__title{max-width:28ch;margin:0;font:800 clamp(1.75rem,1.2rem + 1.5vw,2.75rem)/1.06 var(--f-d);color:var(--ink);letter-spacing:-.01em;text-wrap:balance}
/* фото: большой квадрат на тематическом фоне, звёзды, артикул и избранное — поверх фона сверху */
body.b4 .card-big{display:flex;flex-direction:column;max-height:none;margin:0 0 28px;padding:18px 20px 20px;border:0;border-radius:28px;background:var(--tint,var(--cream-2)) var(--phbg,none) center/cover no-repeat}
body.b4 .card-big .reviews_plugin{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;width:max-content;max-width:100%;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.75)}
body.b4 .card-big .reviews_plugin .stars_on{color:var(--gold-ink)}
body.b4 .card-big .reviews_plugin .stars_text{margin:0;color:var(--ink);font:800 14px/1.2 var(--f-b);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
body.b4 .card-big__header{margin-top:8px}
body.b4 .card-big__art{margin:0;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.75);color:var(--ink);font:700 13px/1.3 var(--f-b)}
body.b4 .card-big__card-controls{margin-bottom:0}
body.b4 .card-big__card-controls .card-controls__block{width:44px;height:44px;border:2px solid var(--ink);border-radius:50%;background:#fff;transition:background-color .2s ease-out}
body.b4 .card-big__card-controls .card-controls__block:is(:hover,.active){background:var(--gold-l)}
body.b4 .card-big__image-block{flex:1 1 auto;height:auto;aspect-ratio:1.15}
body.b4 .card-big__image{width:min(72%,460px);height:auto;aspect-ratio:1;filter:drop-shadow(0 26px 24px rgba(20,26,36,.28));transition:transform .6s var(--spring)}
body.b4 .card-big__image:is([src$=".jpg"],[src$=".jpeg"],[src$=".JPG"]){mix-blend-mode:multiply;filter:none}
body.b4 .card-big:hover .card-big__image{transform:translateY(-8px) rotate(-2deg)}

/* колонка покупки шире (у шаблона col-4 из 12 — справа оставалась пустая колонка) */
@media (min-width:768px){
  body.b4 .row:has(>[class*="col-"]>.card-big)>[class*="col-"]:has(>.card-big-price){flex:0 0 41.6667%;max-width:41.6667%}
}
/* покупка: белая карточка с рамкой — цена, бонусы, «− 1 +» и «В корзину», наличие, доставка, промокод */
body.b4 .card-big-price{gap:0;margin:0 0 28px;padding:22px;border:2px solid var(--ink);border-radius:24px;background:#fff}
body.b4 .card-big-price__price{margin:0 0 8px;font:800 clamp(32px,2.6vw,42px)/1 var(--f-d);color:var(--ink);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
body.b4 .card-big-price__price .old_price{align-self:flex-end;font:700 18px/1 var(--f-d);color:var(--muted)}
body.b4 .card-big-price .sy-bonus{border-color:var(--gold-l);background:var(--gold-t);color:var(--gold-ink);font-family:var(--f-b)}
body.b4 .card-big-price__buttons{flex-wrap:wrap;gap:10px;margin:6px 0 14px}
body.b4 .card-big-price__buttons .product-drop-buttons__count{border:2px solid var(--ink)}
body.b4 .card-big-price__buttons .product-drop-buttons__count :is(.product-drop-buttons__count-dec,.product-drop-buttons__count-inc){width:46px!important;min-width:46px!important;height:48px}
body.b4 .card-big-price .product-drop-buttons .product-drop-buttons__button{flex:1 1 auto;min-width:0;display:block;min-height:52px;padding:0 20px;border:2px solid var(--blue)!important;border-radius:999px;background:var(--blue)!important;color:#fff!important;font:700 17px/48px var(--f-d);letter-spacing:.01em;text-align:center;text-transform:none;white-space:nowrap;transition:background-color .2s ease-out,border-color .2s ease-out,transform .5s var(--spring)}
body.b4 .card-big-price .product-drop-buttons .product-drop-buttons__button::first-letter{text-transform:uppercase}
body.b4 .card-big-price .product-drop-buttons .product-drop-buttons__button:hover{border-color:var(--blue-h)!important;background:var(--blue-h)!important}
body.b4 .card-big-price .product-drop-buttons .product-drop-buttons__button:active{transform:scale(.975)}
body.b4 .card-big-price .product-drop-buttons.in_cart .product-drop-buttons__button{border-color:var(--ink)!important;background:var(--ink)!important}
body.b4 .card-big-price .product-drop-buttons.in_cart .product-drop-buttons__button:hover{border-color:var(--navy)!important;background:var(--navy)!important}
body.b4 .card-big-price .count{margin:0 0 10px}
body.b4 .card-big-price .count__text{font:800 14px/1.3 var(--f-b)}
body.b4 .card-big-price__text{padding-top:12px;border-top:1px solid var(--line);color:var(--text);font:400 14px/1.55 var(--f-b)}
body.b4 .card-big-price__text a{color:var(--navy)}
body.b4 .card-big-price__text .sy-dlv-sum{color:var(--gold-ink);font-weight:800}
body.b4 .card-big-price__text-info{color:var(--muted);font:400 13px/1.45 var(--f-b)}
body.b4 .card-promo{margin-top:10px;padding:12px 14px;border:1.5px dashed var(--ink);border-radius:14px;background:var(--gold-t);color:var(--ink);font:700 14px/1.45 var(--f-b)}
body.b4 .sy-prod-info{margin-top:16px;font-family:var(--f-b)}
body.b4 .sy-prod-info__h{color:var(--ink);font:800 15px/1.2 var(--f-d)}
body.b4 .sy-prod-info__dl :is(dt,dd){font-size:13px}
body.b4 .sy-prod-info__dl dd{color:var(--ink)}
body.b4 .sy-prod-cert{border:2px solid var(--line);border-radius:14px;background:var(--paper)}
body.b4 .sy-prod-cert:hover{border-color:var(--ink);background:#fff}
body.b4 .sy-prod-cert>span{color:var(--navy);font-family:var(--f-b);font-weight:800}
body.b4 .sy-reestr{color:var(--navy);font-family:var(--f-b);font-weight:800}
body.b4 .sy-bad-note{border-color:var(--line);border-radius:14px;background:var(--gold-t);color:#5d4813;font-family:var(--f-b);font-size:13px}

/* «Другие варианты линейки» — плашки B4 */
body.b4 .sy-line{margin:8px 0 12px;padding:20px 22px;border:2px solid var(--ink);border-radius:var(--r);background:var(--paper);font-family:var(--f-b)}
body.b4 .sy-line__title{color:var(--ink);font:800 18px/1.3 var(--f-d)}
body.b4 .sy-line__title b{color:var(--blue)}
body.b4 .sy-line__items{gap:8px}
body.b4 .sy-line__item{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border:2px solid var(--line-2);border-radius:999px;background:#fff;color:var(--ink);font:700 14px/1.25 var(--f-b);transition:border-color .2s ease-out,background-color .2s ease-out,transform .35s var(--spring)}
body.b4 .sy-line__item:hover{border-color:var(--ink);background:var(--gold-t);color:var(--ink);box-shadow:none;transform:translateY(-2px)}

/* вкладки: строка с линией сверху, активная — синяя черта снизу (как в макете) */
body.b4 .sy-card-tabs{margin-top:32px}
body.b4 .sy-card-tabs .nav-pills{gap:4px;flex-wrap:nowrap;overflow-x:auto;margin:0 0 22px;padding:0;border-top:2px solid var(--ink);border-bottom:1px solid var(--line);scrollbar-width:none}
body.b4 .sy-card-tabs .nav-pills::-webkit-scrollbar{display:none}
body.b4 .sy-card-tabs .nav-pills .nav-link{min-height:56px;padding:0 18px;border:0;border-bottom:4px solid transparent;border-radius:0;background:none;color:var(--muted);font:800 16px/1 var(--f-d);text-transform:none;letter-spacing:0;white-space:nowrap;box-shadow:none;transition:color .2s ease-out,border-color .2s ease-out}
body.b4 .sy-card-tabs .nav-pills .nav-link:hover{border-color:transparent;color:var(--ink)}
body.b4 .sy-card-tabs .nav-pills .nav-link.active{border-color:var(--blue);background:none;color:var(--ink);box-shadow:none}
body.b4 .sy-card-tabs .nav-pills .nav-link:focus-visible{outline:2.5px solid var(--blue);outline-offset:-3px}
body.b4 .sy-card-tabs .sy-tab-h{color:var(--ink);font:800 22px/1.2 var(--f-d)}
body.b4 .sy-card-tabs .tab-pane{max-width:76ch;color:var(--text);font:400 16px/1.65 var(--f-b)}
body.b4 .sy-card-tabs .tab-pane p{color:var(--text)}
body.b4 .sy-nutri{border:2px solid var(--ink);border-radius:var(--r);background:var(--paper)}
body.b4 .sy-nutri__title{color:var(--ink);font:800 17px/1.2 var(--f-d)}
body.b4 .sy-nutri__row{border-bottom-color:var(--line)}
body.b4 .sy-nutri__row span{color:var(--muted)}
body.b4 .sy-nutri__row b{color:var(--ink);font-family:var(--f-d)}
body.b4 .sy-desc p{color:var(--text)}
body.b4 .sy-desc p:first-child{color:var(--ink)}

@media (max-width:767.98px){
  body.b4 .card-big{padding:14px;border-radius:22px}
  body.b4 .card-big__image-block{aspect-ratio:1}
  body.b4 .card-big-price{padding:18px 16px}
  body.b4 .sy-line{padding:16px}
  body.b4 .sy-card-tabs .nav-pills .nav-link{min-height:52px;padding:0 14px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  body.b4 :is(.card-big__image,.card-big__card-controls .card-controls__block,.sy-line__item,.sy-card-tabs .nav-pills .nav-link){transition:none}
  body.b4 .card-big-price .product-drop-buttons .product-drop-buttons__button{transition:none!important}
  body.b4 :is(.card-big:hover .card-big__image,.sy-line__item:hover){transform:none}
}

/* ── корзина ── (Task 5: cart/index.php — правок разметки и логики нет, только перекраска прежних классов .cart и .sy-co;
 * у страницы свои стили в <style> без body.b4 — перекрываем специфичностью. Касса, ПВЗ СДЭК, бонусы, промокод — как были.) */
body.b4 .section-catalog:has(.cart) .section-catalog__title{margin:0;font:800 clamp(2.4rem,1.7rem + 2vw,3.8rem)/1 var(--f-d);color:var(--ink);letter-spacing:-.015em}
body.b4 .section-catalog:has(.cart) .section-catalog__title-block{margin:4px 0 20px}
/* список товаров */
body.b4 .cart .cart-block{margin-bottom:24px;padding:4px 24px 8px;border:2px solid var(--ink);border-radius:24px;background:var(--paper);box-shadow:none}
body.b4 .cart .cart-header{padding:16px 0;border-bottom-color:var(--line);background:none}
body.b4 .cart .cart-header__info{color:var(--ink);font:800 18px/1.3 var(--f-d)}
body.b4 .cart .cart-header__info-count{color:var(--blue)}
body.b4 .cart .cart-header__clean{min-height:40px;padding:0 14px;border:2px solid var(--line-2);border-radius:999px;background:#fff;color:var(--ink);font:700 14px/1 var(--f-b);transition:border-color .2s ease-out}
body.b4 .cart .cart-header__clean:hover{border-color:var(--ink)}
body.b4 .cart .cart-block-product{border-bottom-color:var(--line-2)}
body.b4 .cart .cart-block-product__image-block{flex:none;width:110px;padding:6px;border-radius:16px;background:var(--cream-2)}
body.b4 .cart .cart-block-product__image-block img{display:block;width:100%;height:auto;border-radius:10px;mix-blend-mode:multiply}
body.b4 .cart .cart-block-product__link{color:var(--ink);font:700 17px/1.35 var(--f-b)}
body.b4 .cart .cart-block-product__link:hover{color:var(--blue)}
body.b4 .cart .cart-block-product__price-total .price{color:var(--ink);font:800 22px/1.1 var(--f-d);font-variant-numeric:tabular-nums}
body.b4 .cart .cart-block-product__price-total .price-text{color:var(--muted);font:600 13px/1.3 var(--f-b)}
body.b4 .cart .cart-count{width:auto;height:auto;border:2px solid var(--ink);border-radius:999px;background:#fff}
body.b4 .cart .cart-count .button{width:42px;height:42px;border-radius:50%;background:none;color:var(--ink);font:700 20px/1 var(--f-d)}
body.b4 .cart .cart-count .button:hover{background:var(--cream-2);color:var(--ink)}
body.b4 .cart .cart-count .product-drop-buttons__input{width:40px!important;height:42px;background:none;color:var(--ink);font:800 16px/1 var(--f-b)}
body.b4 .cart .cart-block-product__remove{width:44px;height:44px;padding:0;border-radius:50%;transition:background-color .2s ease-out}
body.b4 .cart .cart-block-product__remove:hover{background:var(--cream-2)}

/* оформление: панель с рамкой, подписи полей Rubik, поля — белые с бежевой рамкой */
body.b4 .cart .sy-co{padding:24px;border:2px solid var(--ink);border-radius:24px;background:var(--paper);font-family:var(--f-b)}
body.b4 .cart .sy-co #send_order p:not(#sy_cdek_map *){color:var(--ink);font:800 16px/1.3 var(--f-d)}
/* #send_order input из main.min.css (с id) перебивал и прежние стили .sy-co — поэтому тоже через #send_order */
body.b4 .cart #send_order :is(input[type=text],input[type=tel],input[type=email],input[type=number],textarea,select){min-height:48px;padding:12px 14px;border:2px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);font:400 16px/1.3 var(--f-b)}
body.b4 .cart #send_order :is(input[type=text],input[type=tel],input[type=email],input[type=number],textarea,select):focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(61,103,223,.14)}
body.b4 .cart #send_order .blocl_coupon input[type=text]{min-height:44px;padding-block:0}
body.b4 .cart .sy-co .order_email_info{color:var(--muted);font-family:var(--f-b)}
/* .row формы — без отрицательных полей Bootstrap: иначе поля и сводка ложатся на рамку панели */
body.b4 .cart .sy-co #send_order .row{margin-left:0;margin-right:0}
/* сводка справа — кремовая карточка */
body.b4 .cart .sy-co #send_order .row:not(.sy-co-map)>*:nth-child(3),body.b4 .cart .sy-co #send_order .row.sy-co-map>.sy-co-s{border:0;border-radius:20px;background:var(--cream-2)}
body.b4 .cart .sy-co .blocl_coupon p{color:var(--ink);font:800 15px/1.3 var(--f-d)}
body.b4 .cart .sy-co .blocl_coupon a{border-radius:999px;background:var(--ink);color:#fff;font-family:var(--f-d);transition:background-color .2s ease-out}
body.b4 .cart .sy-co .blocl_coupon a:hover{background:var(--navy)}
body.b4 .cart .sy-co .tpb>div.blocl_coupon>a{font:700 15px/1 var(--f-d)}
body.b4 .cart .sy-co #used_coupon{border-color:var(--ink);border-radius:12px;background:var(--gold-t);color:var(--ink)}
body.b4 .cart .sy-co .tpb .total-price__block{border-top-color:var(--line-2);color:var(--text);font-family:var(--f-b)}
body.b4 .cart .sy-co .sy-rc-total{color:var(--ink);font-family:var(--f-d)}
body.b4 .cart .sy-co .total-price__block .sy-rc-total .sy-rc-lbl{color:var(--ink)}
body.b4 .cart .sy-co .sy-free{border:0;border-radius:14px;background:#fff;font-family:var(--f-b)}
body.b4 .cart .sy-co .sy-free .sy-free__head{color:var(--ink);font:800 16px/1.35 var(--f-d)}
body.b4 .cart .sy-co .sy-free .sy-free__sub{color:var(--muted);font-family:var(--f-b)}
body.b4 .cart .sy-co .sy-free__bar{background:var(--cream-2);box-shadow:none}
body.b4 .cart .sy-co .total-price__block .sy-bonus{border-color:var(--gold-l);background:var(--gold-t);color:var(--gold-ink)}
body.b4 .cart .sy-co :is(.sy-rc-dlv,.sy-rc-note,#sy_total_dlv,.sy-pay-note){font-family:var(--f-b)!important}
body.b4 .cart .sy-co .pay-choice{border-top-color:var(--line-2);color:var(--ink);font-family:var(--f-b)}
/* согласия и «Оформить заказ» */
body.b4 .cart .sy-co .policy{color:var(--text);font:400 15px/1.5 var(--f-b)}
body.b4 .cart .sy-co .policy a{color:var(--navy)}
body.b4 .cart .sy-co .checkbox__input{accent-color:var(--blue)}
body.b4 .cart .sy-co .cart-total__button{min-height:56px;padding:0 20px;border-radius:999px;background:var(--blue)!important;box-shadow:none;font:700 18px/56px var(--f-d);letter-spacing:.01em;text-transform:none;transition:background-color .2s ease-out,transform .5s var(--spring)}
body.b4 .cart .sy-co .cart-total__button::first-letter{text-transform:uppercase}
body.b4 .cart .sy-co .cart-total__button:hover{background:var(--blue-h)!important;transform:none}
body.b4 .cart .sy-co .cart-total__button:active{transform:scale(.975)}
body.b4 .cart .sy-co .cart-total__button:focus-visible{outline:2.5px solid var(--blue);outline-offset:3px}
body.b4 .cart .sy-co #card_error{border-radius:14px;font-family:var(--f-b)}
/* после оформления: номер заказа и кнопки оплаты */
body.b4 .cart .order_num{color:var(--ink);font:800 26px/1.2 var(--f-d)}
body.b4 .cart .order_prepay a.sy-pay-sbp{border-radius:999px;background:var(--blue);box-shadow:none;font-family:var(--f-d)}
body.b4 .cart .order_prepay a.sy-pay-card{border:2px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink)!important;box-shadow:none;font-family:var(--f-d)}
body.b4 .cart .order_prepay a.sy-pay-card:hover{background:var(--gold-t)}
body.b4 .cart .empty_cart{color:var(--ink);font:800 22px/1.3 var(--f-d)}

@media (max-width:767.98px){
  body.b4 .cart .cart-block{padding:2px 14px 6px;border-radius:20px}
  body.b4 .cart .cart-block-product__image-block{width:84px;margin-right:12px}
  body.b4 .cart .cart-block-product{padding-right:40px}
  body.b4 .cart .cart-block-product__remove{top:8px;right:-4px}
  body.b4 .cart .cart-block-product__link{font-size:15.5px}
  body.b4 .cart .sy-co{padding:16px 14px;border-radius:20px}
  body.b4 .cart .sy-co #send_order .row:not(.sy-co-map)>*:nth-child(3),body.b4 .cart .sy-co #send_order .row.sy-co-map>.sy-co-s{padding:18px 14px 20px}
  /* место под нижнюю панель: «Оформить заказ» можно прокрутить выше неё */
  body.b4 .section-catalog:has(.cart){padding-bottom:96px}
}
@media (prefers-reduced-motion:reduce){
  body.b4 .cart :is(.cart-header__clean,.cart-block-product__remove,.sy-co .blocl_coupon a,.sy-co .cart-total__button){transition:none}
  body.b4 .cart .sy-co .cart-total__button:active{transform:none}
}