/* Єдина реакція всіх кнопок сайту (зафіксовано 08.11.2026).
   Підключати ПІСЛЯ стилів сторінки й /v2/cart/cart.css?v=f64754da — правила тут перекривають їхні наведення й натискання.
   Головні (оранжеві/кольорові): .btn-main, .cb.pri, .dc-btn, .mb
   Другорядні (білі з рамкою):   .btn-ghost, .cb.out, .km-all, .dc-msg
   Кружечок зі стрілкою:         .btn .ic, .cb .ci, .km-all .ci, .dc-btn .ic, .mb .go
   Тінь: м'яка сіра (головні 0 4px 12px .14, білі — слабша 0 1px 3px .06). Наведення: головні темніють, у білих рамка стає тепло-сірою #B8B0A6, кружечок — оранжевим. Натискання: кнопка ледь стискається. */

html :is(.btn-main, .cb.pri, .dc-btn, .mb, .btn-ghost, .cb.out, .km-all, .dc-msg) { transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease, filter 0.2s ease; }
html :is(.btn .ic, .cb .ci, .km-all .ci, .dc-btn .ic, .mb .go) { transition: background-color 0.2s ease, color 0.2s ease, transform 0.25s ease; }
html .dc-msg:hover { transform: none; }
html .dc-btn:hover .ic { transform: none; }

/* Товщина ліній значків у кнопках — однакова на всьому сайті (09.11, власник: «іконки в кнопках трошки відрізняються»).
   Еталон — стрілка в «Обрати книгу»: 18 px, stroke-width 2.6 → лінія 1,95 px на екрані. Значки 18 px з 2.6 уже такі (кошик-шторка, подяка).
   stroke-width рахується в одиницях viewBox, тож для іншого розміру своя цифра: 1,95 × 24 ÷ розмір значка. */
html :is(.cb .ci, .km-all .ci) svg { stroke-width: 2.75; }   /* стрілка «Детальніше» / «Усі казки», 17 px (було 1,84 px) */
html .k-crumb .ci svg { stroke-width: 2.92; }               /* стрілка «Усі казки» над фото, 16 px (було 1,73 px) */
html .cb svg.ic-cart { stroke-width: 2.46; }                 /* кошик на кнопках каталогу, 19 px (було 1,74 px) */
html .rv-arr svg { stroke-width: 2.34; }                     /* стрілки відгуків, 20 px (було 2,17 px) */
html .fq-pm .fq-ic { stroke-width: 5.2; }                    /* плюс у питаннях, 18 px, viewBox 48 (було 1,73 px) */
@media (max-width: 720px) {
  html .fq-pm .fq-ic { stroke-width: 6.24; }                 /* на телефоні плюс 15 px (було 1,44 px) */
}

/* Кружечок зі значком, що при наведенні заливається оранжевим (білі кнопки, стрілки відгуків) — 09.11.
   Раніше фон і значок плавно мінялись разом: посередині переходу вони ставали майже одного кольору, і значок на мить зникав («блимав»).
   Тепер фон заливається за 0,16 с, а значок перемикається одразу: при наведенні — трохи згодом, коли фон уже темний; при відведенні — миттєво. */
html :is(.btn-ghost .ic, .cb.out .ci, .km-all .ci, .k-crumb .ci, .rv-arr) { transition: background-color 0.16s cubic-bezier(0.22, 1, 0.36, 1), color 0s, transform 0.25s ease; }
@media (hover: hover) {
  html :is(.btn-ghost, .cb.out, .km-all, .k-crumb):hover :is(.ic, .ci), html .rv-arr:hover { transition: background-color 0.16s cubic-bezier(0.22, 1, 0.36, 1), color 0s linear 0.05s, transform 0.25s ease; }
}

@media (hover: hover) {
  html :is(.btn-main, .cb.pri, .dc-btn):hover { background: #C6650B; }
  html .mb:hover { filter: brightness(0.92); }
  html .btn-ghost:hover { border-color: #B8B0A6; }
  html .dc-msg:hover { box-shadow: inset 0 0 0 1.5px #B8B0A6; }
  html :is(.cb.out, .km-all):hover { box-shadow: inset 0 0 0 1px #B8B0A6, 0 1px 3px rgba(33, 30, 26, 0.06); }
  html :is(.btn-ghost, .cb.out, .km-all):hover :is(.ic, .ci) { background: #E77500; color: #fff; }
}

/* Тінь кнопок — «м'яка сіра» (зафіксовано 08.11). Без кольорової (оранжевої тощо) тіні — власник.
   Вкладки каталогу й плюс FAQ — без тіні. Білі .cb.out/.km-all малюють рамку тінню, тож рамку тут зберігаємо. */
html :is(.btn-main, .cb.pri, .dc-btn, .mb) { box-shadow: 0 4px 12px rgba(33, 30, 26, 0.14); }
/* рамка білих кнопок — 1px (власник 09.11: 1.5px «загруба») */
html .btn-ghost { border-width: 1px; box-shadow: 0 1px 3px rgba(33, 30, 26, 0.06); } /* слабша тінь (власник 09.11: «занадто піднята») */
html :is(.cb.out, .km-all) { box-shadow: inset 0 0 0 1px #E3DED7, 0 1px 3px rgba(33, 30, 26, 0.06); }
html :is(.tab.on, .tab.on:hover), html .fq-it[open] .fq-pm { box-shadow: none; }

/* Телефон (09.11): без сірого спалаху при тапі (шапка, логотип, кнопки)… */
html { -webkit-tap-highlight-color: transparent; }
/* …і без «залиплого» наведення. Сторінки мають старі :hover з чорною рамкою — на телефоні вони спрацьовували
   після тапу. Тут повертаємо звичайний вигляд; реакція на телефоні — лише стискання при натиску. */
@media (hover: none) {
  html :is(.btn-main, .cb.pri, .dc-btn):hover { background: #E77500; }
  html .mb.tg:hover { background: var(--tg); } html .mb.vb:hover { background: var(--vb); } html .mb.wa:hover { background: var(--wa); }
  html .btn-ghost:hover { border-color: #E3DED7; }
  html :is(.cb.out, .km-all):hover { box-shadow: inset 0 0 0 1px #E3DED7, 0 1px 3px rgba(33, 30, 26, 0.06); }
  html :is(.btn-ghost, .cb.out, .km-all):hover :is(.ic, .ci) { background: #FFF4EE; color: #A8550A; }
  html .k-crumb:hover { color: #A8550A; }
  html .k-crumb:hover .ci { background: #fff; color: inherit; }
  html .tab:not(.on):hover { background: transparent; color: #57514A; }
  html .fq-mo .fq-ico:hover { transform: none; }
  html :is(.ft .ftc-msg a, .ft .ftc-soc a):hover { background: rgba(255, 255, 255, 0.08); } /* на телефоні не «залипає» оранжевим після тапу */
  /* тап по білій кнопці — кружечок з іконкою одразу оранжевий, як наведення на ПК (власник 09.11).
     Клас tap ставить скрипт сторінки й тримає 0,6 с: звичайний тап коротший за плавну зміну кольору — оранжевий не встигав з'явитись. */
  html :is(.btn-ghost, .cb.out, .km-all):is(:active, .tap) :is(.ic, .ci), html .k-crumb:is(:active, .tap) .ci { background: #E77500; color: #fff; transition-duration: 0s; }
}

html :is(.btn-main, .cb.pri, .dc-btn, .mb, .btn-ghost, .cb.out, .km-all, .dc-msg):active { transform: scale(0.97); transition-duration: 0.08s; }
/* круглі кнопки-значки: месенджери й соцмережі у футері, «Не знайшли відповідь?» у FAQ — при натиску стискаються, як решта кнопок (власник 09.11) */
html :is(.ft .ftc-msg a, .ft .ftc-soc a, .fq-mo .fq-ico) { transition: background-color 0.18s ease, color 0.18s ease, transform 0.2s ease; }
html :is(.ft .ftc-msg a, .ft .ftc-soc a, .fq-mo .fq-ico):active { transform: scale(0.94); transition-duration: 0.08s; }
/* натиснута — тінь притискається */
html :is(.btn-main, .cb.pri, .dc-btn, .mb, .btn-ghost):active { box-shadow: 0 1px 3px rgba(33, 30, 26, 0.12); }

@media (prefers-reduced-motion: reduce) {
  html :is(.btn-main, .cb.pri, .dc-btn, .mb, .btn-ghost, .cb.out, .km-all, .dc-msg) { transition: none; }
}