/* IM-3 «Ярлык»: движение (13.11.2026). Своё, чужой код не взят; идеи - образцы designbookmark.com/motion и
   microinteractions.dev (Tab indicator, Text swap button, FAQ panel, Plucked underline).
   Правила: только от действия посетителя (наведение, фокус, нажатие), ничего не стартует само; только transform,
   opacity, background-size - раскладка не сдвигается (CLS 0); при prefers-reduced-motion: reduce - ничего;
   наведение - только там, где оно есть (hover: hover, pointer: fine), на телефоне его нет. */

/* Индикатор рубрик: подложка под активной рубрикой переезжает под наведённую (JS ставит .has-ind и --x, --w) */
.pills.has-ind { position: relative; isolation: isolate; }
.pills.has-ind .pill[aria-current] { border-color: transparent; background: transparent; }
.pills.has-ind .pill:hover { text-decoration: none; } /* подложка сама показывает наведение */
.pill-ind { position: absolute; left: 0; top: 50%; z-index: -1; height: 44px; width: var(--w, 0); border: 1px solid var(--line); border-radius: 999px; background: #fff; transform: translate(var(--x, 0), -50%); pointer-events: none; }
.pill-ind[hidden] { display: none; }

/* Кнопка «В корзину»: подпись меняется на «Добавлено» (JS ставит .is-added после ответа WooCommerce) */
.im3-buy .btn { position: relative; overflow: hidden; }
.im3-buy .b-ok { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; opacity: 0; transform: translateY(100%); }
.im3-buy .b-ok svg { width: 18px; height: 18px; flex: none; }
.im3-buy .is-added .b-l { opacity: 0; transform: translateY(-100%); }
.im3-buy .is-added .b-ok { opacity: 1; transform: none; }
.im3-buy .btn[aria-busy="true"] { cursor: progress; }
.im3-added-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; }
.im3-added-link[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .pill-ind.is-live { transition: transform .28s cubic-bezier(.2, .7, .2, 1), width .28s cubic-bezier(.2, .7, .2, 1); }

  .im3-buy .b-l, .im3-buy .b-ok { transition: transform .26s cubic-bezier(.2, .7, .2, 1), opacity .2s ease; }

  /* Счётчик корзины в шапке: цифра въезжает снизу, когда меняется после нажатия */
  .im3-cart-n.bump { display: inline-block; animation: im3-bump .32s cubic-bezier(.2, .7, .2, 1); }
  @keyframes im3-bump { from { transform: translateY(45%); opacity: 0; } to { transform: none; opacity: 1; } }

  /* Сердце вишлиста: короткий отклик на нажатие и на появление «добавлено» (только после нажатия, не при загрузке) */
  .wl .im3-pop svg, .wl .im3-pop i { animation: im3-pop .32s cubic-bezier(.3, 1.6, .5, 1); }
  .wl .yith-wcwl-wishlistaddedbrowse svg, .wl .yith-wcwl-wishlistaddedbrowse i { animation: im3-pop .32s cubic-bezier(.3, 1.6, .5, 1); }
  @keyframes im3-pop { 0% { transform: scale(1); } 45% { transform: scale(1.22); } 100% { transform: scale(1); } }

  /* FAQ: ответ раскрывается по высоте (браузеры с interpolate-size; остальные открывают сразу, как раньше) */
  @supports (interpolate-size: allow-keywords) {
    .qa { interpolate-size: allow-keywords; }
    .qa::details-content { block-size: 0; overflow: clip; transition: block-size .26s ease, content-visibility .26s allow-discrete; }
    .qa[open]::details-content { block-size: auto; }
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* Мягкие ссылки шапки и подвала: подчёркивание вытягивается слева направо */
  /* все эти ссылки - строка текста в блоке 44 px без вертикальных отступов: линия на 10 px выше низа блока */
  .hdr-links a, .pills:not(.has-ind) .pill, .fcol a, .legal-ct a, .crumbs a {
    text-decoration: none;
    background: linear-gradient(currentColor, currentColor) no-repeat 0 calc(100% - 10px) / 0 1px;
    background-origin: content-box;
    transition: background-size .24s cubic-bezier(.2, .7, .2, 1), color .2s ease;
  }
  .hdr-links a:hover, .hdr-links a:focus-visible, .pills:not(.has-ind) .pill:hover, .pills:not(.has-ind) .pill:focus-visible,
  .fcol a:hover, .fcol a:focus-visible, .legal-ct a:hover, .legal-ct a:focus-visible,
  .crumbs a:hover, .crumbs a:focus-visible { text-decoration: none; background-size: 100% 1px; }
  .hdr-links a[aria-current] { text-decoration: none; background-size: 100% 1px; }

  /* Карточка: рамка сдвигается на 3 px, под ней проступает тень того же размера */
  .card { transition: transform .2s cubic-bezier(.2, .7, .2, 1), box-shadow .2s cubic-bezier(.2, .7, .2, 1); }
  .card:hover, .card:focus-within { transform: translate(-3px, -3px); box-shadow: 3px 3px 0 0 var(--ink); }
}