/* ==========================================================================
ОТКЛИК КНОПОК НА НАВЕДЕНИЕ И НАЖАТИЕ — общее правило для всего сайта
Замечание заказчика: «Общая анимация при нажатии на объекты (кнопки):
зелёное менять на бордовое, бордовое на зелёное + плавная анимация».
Отдельно названы места, где отклика не было совсем: значки шапки
(«Избранное», «Корзина»), круглая зелёная «>» в плитках и в блоках
главной, кнопка «Весь каталог», поле поиска.
Разделение состояний:
:hover — мягко, «кнопка проснулась»: лёгкое затемнение (brightness .92)
и уже существующий подъём на 2px. Цвет НЕ меняем: смена цвета
по заказчику — это отклик именно на нажатие.
:active — смена цвета зелёный ↔ бордовый, переход 0,2 с ease, и прижатие
(scale .98) вместо подъёма.
Исключение — то, что заказчик назвал поимённо как «нет изменения цвета»:
значки шапки, «Весь каталог», круглая «>» в плитках и в карточках теста.
Первые — не переходы, а три последних — ссылки: :active на них длится
доли секунды до ухода со страницы, и цвета заказчик так и не увидел бы.
Поэтому у всех четырёх цвет меняется уже на :hover, а нажатие добавляет
прижатие. Остальные кнопки (действия, а не переходы) остаются на :active.
Весь :hover обёрнут в @media (hover:hover): на телефоне :hover залипает
после тапа — в проекте это уже ловили.
ЧЕМ ЗАДАН ЦВЕТ У РАЗНЫХ ВИДОВ КНОПОК И КАКИМ ПРИЁМОМ ЕГО МЕНЯЕМ
1. Фирменная фигура из трёх подложек — колпачки SVG по краям и заливка
середины градиентом (BRAND-RULES §3.1, site.css:2397). Цвет живёт в
файлах колпачков, поэтому меняем НАБОР ФАЙЛОВ: cap-green-* ↔ cap-bordo-*,
cap-lgreen-* ↔ cap-lbordo-* (все четыре пары уже лежат в newdesign/img).
background-image не анимируется, поэтому для .pbtn/.pbtn-green/.pbtn-line
бордовый (или зелёный) вариант лежит вторым слоем в ::before и
проявляется прозрачностью — это и даёт плавность.
2. Клякса под МАСКОЙ, цвет обычным background-color (.pact, site.css:3417).
Здесь ничего изобретать не нужно: меняем background-color, он
анимируется сам (в site.css уже стоит transition:background-color .2s).
3. Цельная одноцветная фигура фоном (.hd-cat — hd-shape-btn.svg). Подложку
CSS не перекрашивает, а маску вешать нельзя (BRAND-RULES §3.1: маска
срежет подпись). Поэтому кладём ТОТ ЖЕ путь из hd-shape-btn.svg
строкой data:-URI, поменяв только заливку на бордовую #8B2628 из набора.
Путь скопирован из файла байт в байт, ничего не дорисовано.
4. Круглая клякса со стрелкой (btn-arrow-green.svg / tile-arrow.svg /
cart/btn-go-green.svg). Маска не годится: она даст сплошную кляксу без
белой стрелки. Файла с бордовой стрелкой в наборе нет (bтn-remove-red
— та же клякса, но с крестиком), поэтому бордовый двойник лежит
data:-URI из тех же двух путей, у кляксы заменена только заливка.
Проявляется прозрачностью в ::after — переход плавный.
5. Одноцветный значок картинкой или под маску). Здесь
меняем то, что можем без разметки, остальное — в отчёте.
Файл подключать ПОСЛЕ cart-popover.css и ДО мобильного слоя (glob
mobile/*.css) в header.php: он перебивает site.css и card-actions.css,
но мобильные правила должны оставаться последними.
========================================================================== */
:root{
/* Длительность из задания (0,18–0,22 с) и мягкая кривая. */
--ix-t:.2s;
--ix-e:ease;
/* Бордовая «пилюля» шапки: путь из img/hd-shape-btn.svg, заливка заменена
на #8B2628 (бордовый из набора Frame 639). */
--ix-pill-bordo:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='174' height='54' viewBox='0 0 174 54'%3E%3Cpath d='M3.03146 16.2521C4.83055 6.82169 13.0767 0 22.6772 0H153.654C166.202 0 175.651 11.4217 173.3 23.7479L170.629 37.7479C168.83 47.1783 160.583 54 150.983 54H20.0063C7.45777 54 -1.99094 42.5783 0.360604 30.2521L3.03146 16.2521Z' fill='%238B2628'/%3E%3C/svg%3E");
/* Круглая «>» в бордовом. Два варианта — под две разные подложки:
...-fit повторяет img/tile-arrow.svg (viewBox 53×52, вписывается),
...-fill повторяет img/btn-arrow-green.svg и img/cart/btn-go-green.svg
(viewBox 52.132×52 с preserveAspectRatio='none', растягивается).
Пути кляксы и стрелки взяты из файлов без изменений, заменена только
заливка кляксы. */
--ix-arrow-bordo-fit:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='53' height='52' viewBox='0 0 53 52'%3E%3Cpath d='M52.1171 26C51.8099 33.6803 50.4919 41.6055 44.1172 46.5C40.7008 49.1231 35.194 50.4336 29.2159 51.4808C27.1563 51.8416 25.0605 52.0512 22.9794 51.8474C9.90709 50.5673 -1.27274 41.2886 0.117133 26C0.117133 11.6406 9.11713 -2.11518e-08 26.1171 0C40.4765 0 52.6171 13.5 52.1171 26Z' fill='%238B2628'/%3E%3Cpath d='M14.9138 38.234C14.1946 37.9716 13.5564 37.5557 13.0534 37.0219C14.556 34.6711 30.7554 26.5231 32.7732 24.362C30.2324 23.3284 27.7675 22.1484 25.3938 20.8293C24.1869 20.0529 23.4189 19.6086 22.5317 18.513C21.778 17.6202 18.5725 16.2106 17.6184 15.046L17.6184 13C20.7238 13.5306 23.2758 16.6238 25.9185 17.5641C26.1999 18.1636 26.9488 18.4656 27.3972 19.0522C30.908 21.1442 36.3937 21.6705 38.9219 24.5518C38.3876 25.7682 36.8469 26.6482 35.5255 27.5712C33.6175 28.8566 19.4645 36.9572 16.922 37.9493C16.0538 38.0227 15.1809 38.0485 14.9138 38.234Z' fill='%23ffffff'/%3E%3C/svg%3E");
--ix-arrow-bordo-fill:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='52.132' height='52' viewBox='0 0 52.132 52'%3E%3Cpath d='M52.1171 26C51.8099 33.6803 50.4919 41.6055 44.1172 46.5C40.7008 49.1231 35.194 50.4336 29.2159 51.4808C27.1563 51.8416 25.0605 52.0512 22.9794 51.8474C9.90709 50.5673 -1.27274 41.2886 0.117133 26C0.117133 11.6406 9.11713 -2.11518e-08 26.1171 0C40.4765 0 52.6171 13.5 52.1171 26Z' fill='%238B2628'/%3E%3Cpath d='M14.9138 38.234C14.1946 37.9716 13.5564 37.5557 13.0534 37.0219C14.556 34.6711 30.7554 26.5231 32.7732 24.362C30.2324 23.3284 27.7675 22.1484 25.3938 20.8293C24.1869 20.0529 23.4189 19.6086 22.5317 18.513C21.778 17.6202 18.5725 16.2106 17.6184 15.046L17.6184 13C20.7238 13.5306 23.2758 16.6238 25.9185 17.5641C26.1999 18.1636 26.9488 18.4656 27.3972 19.0522C30.908 21.1442 36.3937 21.6705 38.9219 24.5518C38.3876 25.7682 36.8469 26.6482 35.5255 27.5712C33.6175 28.8566 19.4645 36.9572 16.922 37.9493C16.0538 38.0227 15.1809 38.0485 14.9138 38.234Z' fill='%23ffffff'/%3E%3C/svg%3E");
/* Поле поиска в фокусе: тот же путь, что в img/field-frame-green.svg,
но линия толще (4 вместо 2,6) и середина залита белым — по набору
активное поле белое с зелёной обводкой. Фигура не меняется. */
--ix-field-focus:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180.25' height='56.6' viewBox='-3.3 -1.3 180.25 56.6'%3E%3Cpath d='M3.03146 16.2521C4.83055 6.82169 13.0767 0 22.6772 0H153.654C166.202 0 175.651 11.4217 173.3 23.7479L170.629 37.7479C168.83 47.1783 160.583 54 150.983 54H20.0063C7.45777 54 -1.99094 42.5783 0.360604 30.2521L3.03146 16.2521Z' fill='%23ffffff' stroke='%2300723B' stroke-width='4'/%3E%3C/svg%3E");
}
/* ==========================================================================
1. ФИРМЕННАЯ ФИГУРА ИЗ КОЛПАЧКОВ — .pbtn и родня
Сюда же попадает «Весь каталог» (.hits-all — это .pbtn-green,
public/index.sc2026.php:158).
========================================================================== */
/* Второй слой лежит в ::before. z-index:0 на самой кнопке нужен, чтобы
z-index:-1 у слоя не провалился под фон родителя: подложка обязана
лечь НАД фоном кнопки, но ПОД её подписью. Маску не используем —
она срезала бы текст (BRAND-RULES §3.1). */
.pbtn,.pbtn-green,.pbtn-line{position:relative;z-index:0}
.pbtn::before,.pbtn-green::before,.pbtn-line::before{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
opacity:0;transition:opacity var(--ix-t) var(--ix-e);
/* геометрия слово в слово как у site.css:2397 — иначе поедет скос */
background-repeat:no-repeat;
background-position:left center, right center, center;
background-size:auto 100%, auto 100%, calc(100% - 2 * var(--cap)) 100%}
/* Бордовая «В корзину» → зелёная. */
.pbtn::before{background-image:url(img/cap-green-l.svg),url(img/cap-green-r.svg),
linear-gradient(var(--green-brand),var(--green-brand))}
/* Зелёная («Весь каталог», «Оформить заказ») → бордовая. */
.pbtn-green::before{background-image:url(img/cap-bordo-l.svg),url(img/cap-bordo-r.svg),
linear-gradient(var(--cart),var(--cart))}
/* Контурная зелёная → контурная бордовая: у неё середина — две линии,
поэтому и позиции, и размеры свои (site.css:2420). */
.pbtn-line::before{
background-position:left center, right center, center top, center bottom;
background-size:auto 100%, auto 100%,
calc(100% - 2 * var(--cap)) calc(var(--btn-h) * 0.0288),
calc(100% - 2 * var(--cap)) calc(var(--btn-h) * 0.0288);
background-image:url(img/cap-lbordo-l.svg),url(img/cap-lbordo-r.svg),
linear-gradient(var(--cart),var(--cart)),
linear-gradient(var(--cart),var(--cart))}
/* ИСКЛЮЧЕНИЯ. Есть места, где кнопка сохраняет базовый класс .pbtn
(бордовый), но перекрашена в ЗЕЛЁНЫЙ. Общий слой .pbtn::before (0,1,0)
кладёт на них зелёное на зелёное — отклика не видно вовсе. Возвращаем
таким кнопкам бордовый слой:
— «В корзине» в плитке каталога, site.css:2439 и 1574, вес (0,4,0);
— «Доставить сюда» в окне адреса, site.css:2444, вес (0,2,0);
— «В корзине» на странице товара (class="pbtn buy-cta ... is-in-cart",
sc2026.detail/template.php:501), site.css:2586, вес (0,4,0). Без этой
строки бордовая подложка из блока 1б (строка «зелёные → бордовые»)
не видна: её закрывает зелёный слой ::before.
Все три селектора тяжелее .pbtn::before, !important не нужен. */
.pcard .pbtn.add-to-cart-btn.is-in-cart::before,
.sc-addr-acts .pbtn::before,
.sc2026-page .pdp-buy .buy-cta.is-in-cart::before{
background-image:url(img/cap-bordo-l.svg),url(img/cap-bordo-r.svg),
linear-gradient(var(--cart),var(--cart))}
.pbtn:active::before,.pbtn-green:active::before,.pbtn-line:active::before{opacity:1}
/* «Весь каталог» (public/index.sc2026.php:168) — ссылка-переход: на десктопе
:active длится доли секунды до ухода со страницы, и заказчик, назвавший
эту кнопку поимённо, цвета так и не увидит. Поэтому слой проявляем уже на
наведении — тем же исключением, что сделано для значков шапки (блок 5).
Конкурент — .pbtn-green::before (0,1,0), здесь (0,2,0). */
@media (hover:hover){
.hits-all:hover::before{opacity:1}
}
/* Подпись контурной кнопки красится вместе с обводкой.
Конкурент — site.css:2424 .pbtn-line{color:var(--green-deep-2)} (0,1,0),
поэтому берём (0,3,0) повтором класса. */
.pbtn-line.pbtn-line:active{color:var(--cart)}
@media (hover:hover){
/* Конкурент — site.css:2409 и 2600, оба (0,2,0) с brightness(1.06).
Повторяем класс, чтобы перебить весом, а не порядком файлов.
transform не трогаем: подъём на 2px из site.css остаётся. */
.pbtn.pbtn:hover,
.pbtn-green.pbtn-green:hover,
.pbtn-line.pbtn-line:hover,
.pbtn-white.pbtn-white:hover,
.pbtn-lwhite.pbtn-lwhite:hover{filter:brightness(.92)}
}
/* Нажатие: подъём меняем на прижатие, затемнение снимаем — цвет и так уже
другой. Белые варианты цвет не меняют (белое не зелёное и не бордовое),
им остаётся только прижатие. */
.pbtn.pbtn:active,
.pbtn-green.pbtn-green:active,
.pbtn-line.pbtn-line:active,
.pbtn-white.pbtn-white:active,
.pbtn-lwhite.pbtn-lwhite:active{
filter:none;transform:translateY(0) scale(.98)}
/* ==========================================================================
1б. ТЕ ЖЕ ФИГУРЫ, НО СО СВОИМИ !important
site.css:2452–2600 подменяет подложки коробочных кнопок Битрикса и
страницы «О компании» с !important. Перебить их можно только тем же
!important — специфичности не хватает по определению. Второго слоя тут
нет, поэтому цвет меняется сразу, а плавным остаётся само нажатие.
========================================================================== */
/* бордовые → зелёные */
.sc2026-page .btn-primary:active,
.sc2026-page .btn-secondary:active,
.sc2026-page .btn-dark:active,
.offcanvas .btn-primary:active,
.offcanvas .btn-dark:active,
.sc2026-page .pdp-buy .buy-cta:active,
.pdp-buy .buy-cta:active,
.sc-basket .basket-btn-checkout:active,
.sc2026-page .bx-soa-cart-total-button-container .btn-primary:active,
.sc2026-page .btn-order-save:active,
.sc-checkout .btn-default:active,
.sc-checkout .btn-primary:active,
.sc-checkout .btn-lg:active{
background-image:url(img/cap-green-l.svg),url(img/cap-green-r.svg),
linear-gradient(var(--green-brand),var(--green-brand))!important}
/* зелёные → бордовые (порядок как в site.css: зелёные объявлены после
бордовых и перебивают их у одних и тех же кнопок) */
/* «Применить» у промокода стоит в этом списке, а не среди контурных:
контурной она была раньше и site.css:2487 её так и объявляет, но
site.css:4272 ниже перекрашивает её в ЗАЛИТУЮ зелёную с !important —
«действие должно выглядеть действием». Контурный бордовый набор сменил бы
ей форму (BRAND-RULES §3.1), поэтому берём залитый бордовый. */
.sc-checkout .bx-soa-cart-total-button-container .btn:active,
.about .ab-btn:active,
.sc2026-page .pdp-buy .buy-cta.is-in-cart:active,
.sc-cart .promo-apply:active{
background-image:url(img/cap-bordo-l.svg),url(img/cap-bordo-r.svg),
linear-gradient(var(--cart),var(--cart))!important}
/* контурные зелёные → контурные бордовые */
.sc-added-more:active,
.sc-addr-cancel:active,
.about .ab-btn-line:active{
color:var(--cart)!important;
background-image:url(img/cap-lbordo-l.svg),url(img/cap-lbordo-r.svg),
linear-gradient(var(--cart),var(--cart)),
linear-gradient(var(--cart),var(--cart))!important}
@media (hover:hover){
/* Конкурент — site.css:2530, тот же список с brightness(1.06). Селекторы
повторены один в один, вес равный — выигрывает порядок: interactions.css
подключается после site.css. Наращивать вес тут нечем: у самих правил
фона стоит !important, а список селекторов задан коробочной темой. */
.sc2026-page .btn-primary:hover,
.sc2026-page .btn-outline-primary:hover,
.offcanvas .btn-primary:hover,
.sc-added-more:hover,
.sc-addr-cancel:hover,
.about .ab-btn:hover,
.about .ab-btn-line:hover,
.about .ab-btn-ghost:hover,
.about .ab-btn-white:hover,
.sc-cart .promo-apply:hover,
.sc-checkout .bx-soa-cart-total-button-container .btn:hover,
.sc2026-page .pdp-buy .buy-cta:hover,
.sc-basket .basket-btn-checkout:hover{filter:brightness(.92)}
}
.sc2026-page .btn-primary:active,
.sc2026-page .btn-secondary:active,
.sc2026-page .btn-dark:active,
.offcanvas .btn-primary:active,
.offcanvas .btn-dark:active,
.sc-added-more:active,
.sc-addr-cancel:active,
.about .ab-btn:active,
.about .ab-btn-line:active,
.about .ab-btn-ghost:active,
.about .ab-btn-white:active,
.sc-cart .promo-apply:active,
.sc-checkout .bx-soa-cart-total-button-container .btn:active,
.sc2026-page .pdp-buy .buy-cta:active,
.sc-basket .basket-btn-checkout:active{
filter:none;transform:translateY(0) scale(.98)}
/* ==========================================================================
2. КЛЯКСА ПОД МАСКОЙ — кнопки карточки товара .pact
Цвет здесь обычный background-color (site.css:3417), маска только режет
силуэт. Значит меняем цвет напрямую; transition:background-color .2s ease
у .pact уже стоит — попадает в требуемые 0,18–0,22 с.
========================================================================== */
/* Зелёная «в корзину» → бордовая (site.css:3423). */
.pact-cart:active{background:var(--cart)}
/* Бордовая «посмотреть» → зелёная (site.css:3424). */
.pact-view:active{background:var(--green-brand)}
/* В карточке каталога цвета обратные: card-actions.css:40 красит
.pcard .pacts .pact-cart в бордовый (0,3,0). Берём (0,4,0). */
.pcard .pacts .pact-cart:active{background:var(--green-brand)}
/* «В избранное» — та же клякса и та же пара цветов: в покое зелёная
(card-actions.css:282, (0,3,0)), с классом is-fav бордовая
(card-actions.css:288, (0,4,0)). Правило для неё было пропущено, и при
нажатии кнопка только сжималась. Веса (0,4,0) и (0,5,0) — на ступень
выше конкурентов. var(--cart) — это тот же #8b2628, что в card-actions. */
.pcard .pacts .pact-fav:active{background:var(--cart)}
.pcard .pacts .pact-fav.is-fav:active{background:var(--green-brand)}
.pact{transition:background-color var(--ix-t) var(--ix-e),transform var(--ix-t) var(--ix-e)}
.pact:active{transform:scale(.94)}
@media (hover:hover){
/* У .pact цвет меняется уже на наведении (site.css:3425) — это осталось
от прежней правки и заказчику нравится. Добавляем только лёгкое
затемнение, чтобы отклик был из того же семейства, что у остальных. */
.pact:hover{filter:brightness(.96)}
}
/* ==========================================================================
3. КРУГЛАЯ ЗЕЛЁНАЯ «>» — плитки главной, карточки теста, всплывашка корзины
Заказчик: «нет изменения цвета». Бордовый двойник кладём вторым слоем и
проявляем прозрачностью — так переход получается плавным.
========================================================================== */
/* --- плитки главной: .entry > .go > img (site.css:3887, tile-arrow.svg).
.go уже position:absolute, поэтому слой ложится прямо в него.
background-size:contain повторяет поведение с stroke/fill="currentColor"
(components/.../sale.basket.basket.line/sc2026.icons/top_template.php и
header.php:453), поэтому достаточно поменять color у ссылки: перекрасятся
и значок, и подпись, и счётчик. Никаких масок и подмен файлов не нужно.
========================================================================== */
/* Конкуренты по transition: site-hf.css:113 (opacity .15s) и
site.css:4607 (background-color .18s), оба (0,1,0). Берём (0,2,0)
и перечисляем всё, что должно ехать плавно. */
.hd-ico.hd-ico,
.hd-city-btn.hd-city-btn{
transition:color var(--ix-t) var(--ix-e),
background-color .18s var(--ix-e),
transform .18s var(--ix-e),
opacity .15s var(--ix-e)}
@media (hover:hover){
/* Зелёные значки — «Избранное», «Войти/Кабинет» — становятся бордовыми.
Конкуренты: site-hf.css:113 .hd-ico{color:var(--green-brand)} (0,1,0)
и site.css:4607 .hd-ico:hover{opacity:1;background:var(--green-pale)}
(0,2,0). Берём (0,3,0), светло-зелёную плашку оставляем. */
.hd-ico.hd-ico:hover{color:var(--cart);opacity:1}
/* Счётчик у них покрашен отдельно: site-hf.css:110
.hd-ico:not(.cart) .cnt{color:var(--green-brand)} — это (0,3,0),
поэтому здесь нужен (0,4,0). */
.hd-ico:not(.cart):hover .cnt{color:var(--cart)}
/* Корзина в покое бордовая (site-hf.css:117, (0,2,0)) — значит зеленеет.
Правило стоит после общего: у обоих (0,3,0), выигрывает последнее. */
.hd-ico.cart:hover{color:var(--green-brand)}
/* Конкурент — site-hf.css:121 .hd-ico .cnt{color:#8b2628} (0,2,0). */
.hd-ico.cart:hover .cnt{color:var(--green-brand)}
/* Город: подпись бордовеет. Конкурент — site.css:4640
.hd-city-wrap b{color:var(--green-deep-2)} (0,1,1), берём (0,3,1).
Сама метка — , метка станет перекрашиваемой —
фигура придёт маской, а цвет от currentColor. */
.hd-ico-mask{
background-color:currentColor;
-webkit-mask:url(img/ico-pin.svg) no-repeat center/contain;
mask:url(img/ico-pin.svg) no-repeat center/contain}
/* ==========================================================================
6. ПОЛЕ ПОИСКА — .hd-search
Заказчик: «поменять состояние активности».
Фигуру полю рисует border-image из img/field-frame-green.svg
(site.css:4352, всё с !important) — линия 2,6, середина прозрачная.
Усиливаем, не трогая фигуру: кладём ВТОРОЙ такой же контур слоем ниже
подписи, у него тот же путь, но линия 4 и белая заливка середины —
по набору активное поле белое с зелёной обводкой. Слой проявляется
прозрачностью, поэтому переход плавный. Свечение
.hd-search:focus-within{filter:drop-shadow(...)} из site.css:3539
остаётся сверху и работает вместе с ним.
========================================================================== */
.hd-search{position:relative;z-index:0}
/* Слой считается от ВНУТРЕННЕЙ коробки поля, а у поля боковины рамки
шириной --frame-cap. Поэтому раздвигаем его по горизонтали ровно на
боковину — иначе второй контур встал бы уже первого. По вертикали
рамки нет, там ноль. */
.hd-search::before{
content:"";position:absolute;z-index:-1;pointer-events:none;
top:0;bottom:0;
left:calc(-1 * var(--frame-cap));right:calc(-1 * var(--frame-cap));
/* геометрия рамки слово в слово как у site.css:4352 */
border-style:solid;
border-width:0 var(--frame-cap);
border-color:transparent;
border-image-source:var(--ix-field-focus);
border-image-slice:0 28 fill;
border-image-width:0 var(--frame-cap);
border-image-repeat:stretch;
border-image-outset:0;
opacity:0;transition:opacity var(--ix-t) var(--ix-e)}
.hd-search:focus-within::before{opacity:1}
/* ==========================================================================
7. ЩАДЯЩИЙ РЕЖИМ
При «уменьшить движение» переходы и сдвиги выключаем совсем: цвет
меняется мгновенно, само поведение остаётся.
========================================================================== */
@media (prefers-reduced-motion:reduce){
.pbtn,.pbtn-green,.pbtn-line,.pbtn-white,.pbtn-lwhite,
.pbtn::before,.pbtn-green::before,.pbtn-line::before,
.pact,.hd-cat,.hd-ico,.hd-city-btn,
.entry .go,.entry .go::after,
.qc .qc-go,.qc .qc-go::after,
.scp-go,.scp-go::after,.scp-del,
.hd-search::before,
.sc2026-page .btn-primary,.sc2026-page .btn-secondary,.sc2026-page .btn-dark,
.offcanvas .btn-primary,.offcanvas .btn-dark,
.sc-added-more,.sc-addr-cancel,.sc-cart .promo-apply,
.about .ab-btn,.about .ab-btn-line,.about .ab-btn-ghost,.about .ab-btn-white,
.sc-checkout .bx-soa-cart-total-button-container .btn,
.sc2026-page .pdp-buy .buy-cta,
.sc-basket .basket-btn-checkout{
transition:none!important}
.pbtn.pbtn:active,.pbtn-green.pbtn-green:active,.pbtn-line.pbtn-line:active,
.pbtn-white.pbtn-white:active,.pbtn-lwhite.pbtn-lwhite:active,
.pact:active,.hd-cat:active,
.hd-ico.hd-ico:active,.hd-city-btn.hd-city-btn:active,
.scp-del:active,.scp-go:active{transform:none}
}