/* ============================================================
   TORETTO LED PRODUCT STICKERS v1.0.17

   This stylesheet changes only Horoshop product stickers:
   popular, discount, promo, new, video and countdown.
   ============================================================ */


/* ============================================================
   STICKER STACK
   ============================================================ */

.catalogCard .productSticker {
  position: absolute !important;
  z-index: 4;
  inset: 14px auto auto 14px !important;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  line-height: 1;
  pointer-events: none;
}


/* ============================================================
   BASE STICKER
   ============================================================ */

.catalogCard .productSticker-item {
  position: relative;
  isolation: isolate;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  min-height: 17px !important;
  margin: 0 !important;
  padding: 3px 7px !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 4px !important;
  color: #ffffff !important;
  background: #263238 !important;
  box-shadow: 0 2px 6px rgba(35, 42, 46, 0.2) !important;
  font-family: inherit;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase;
  text-shadow: none;
  transform-origin: left center;
  animation:
    toretto-sticker-enter 520ms
    cubic-bezier(0.22, 1, 0.36, 1) both;
}

.catalogCard .productSticker-item::before,
.catalogCard .productSticker-item::after {
  content: none !important;
  display: none !important;
}

.catalogCard .productSticker-container,
.catalogCard .productSticker-content {
  position: relative;
  z-index: 1;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #ffffff !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: 1 !important;
  letter-spacing: inherit !important;
}


/* ============================================================
   TOP SELLER / HIT
   ============================================================ */

.catalogCard .productSticker-item.__popular,
.catalogCard .productSticker-item.__[style*="#1f8f4e"] {
  background: #1f8f4e !important;
  box-shadow: 0 2px 6px rgba(31, 143, 78, 0.2) !important;
  animation:
    toretto-sticker-enter 550ms
    cubic-bezier(0.22, 1, 0.36, 1) both,
    toretto-hit-glow 6s linear 2s infinite;
}


/* ============================================================
   DISCOUNT PERCENTAGE
   ============================================================ */

.catalogCard .productSticker-item.__discount {
  min-height: 17px !important;
  padding: 3px 7px !important;
  background: #e53935 !important;
  box-shadow: 0 2px 6px rgba(229, 57, 53, 0.2) !important;
  font-size: 12px !important;
  letter-spacing: 0.01em !important;
  animation:
    toretto-sticker-enter 550ms
    cubic-bezier(0.22, 1, 0.36, 1) 120ms both,
    toretto-sticker-nudge 6s
    cubic-bezier(0.22, 1, 0.36, 1) 3.8s infinite;
}


/* ============================================================
   SALE / PROMO
   ============================================================ */

.catalogCard .productSticker-item.__promo,
.catalogCard .productSticker-item.__countdown {
  background: #f07c00 !important;
  box-shadow: 0 2px 6px rgba(240, 124, 0, 0.2) !important;
}


/* ============================================================
   NEW
   ============================================================ */

.catalogCard .productSticker-item.__new {
  background: #3da5ca !important;
  box-shadow: 0 2px 6px rgba(61, 165, 202, 0.2) !important;
}


/* ============================================================
   VIDEO AND OTHER NEUTRAL STICKERS
   ============================================================ */

.catalogCard .productSticker-item.__video {
  background: #4c626e !important;
  box-shadow: 0 2px 6px rgba(76, 98, 110, 0.2) !important;
}


/* ============================================================
   PRODUCT PAGE STICKERS
   ============================================================ */

.gallery .productSticker,
.gallery__photos .productSticker {
  position: absolute !important;
  z-index: 4;
  inset: 14px auto auto 14px !important;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  line-height: 1;
  pointer-events: none;
}

.gallery .productSticker-item,
.gallery__photos .productSticker-item {
  position: relative;
  isolation: isolate;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: content-box;
  width: auto !important;
  height: auto !important;
  min-height: 17px !important;
  margin: 0 !important;
  padding: 3px 7px !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 4px !important;
  color: #ffffff !important;
  background: #263238 !important;
  box-shadow: 0 2px 6px rgba(35, 42, 46, 0.2) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase;
  text-shadow: none;
  transform-origin: left center;
  animation:
    toretto-sticker-enter 520ms
    cubic-bezier(0.22, 1, 0.36, 1) both;
}

.gallery .productSticker-item.__popular,
.gallery .productSticker-item.__[style*="#1f8f4e"],
.gallery__photos .productSticker-item.__popular,
.gallery__photos .productSticker-item.__[style*="#1f8f4e"] {
  background: #1f8f4e !important;
  box-shadow:
    0 2px 6px
    rgba(31, 143, 78, 0.2) !important;
  animation:
    toretto-sticker-enter 550ms
    cubic-bezier(0.22, 1, 0.36, 1) both,
    toretto-hit-glow 6s
    linear 2s infinite;
}

.gallery .productSticker-item.__discount,
.gallery__photos .productSticker-item.__discount {
  background: #e53935 !important;
  box-shadow:
    0 2px 6px
    rgba(229, 57, 53, 0.2) !important;
  font-size: 12px !important;
  letter-spacing: 0.01em !important;
  animation:
    toretto-sticker-enter 550ms
    cubic-bezier(0.22, 1, 0.36, 1) 120ms both,
    toretto-sticker-nudge 6s
    cubic-bezier(0.22, 1, 0.36, 1) 3.8s infinite;
}

.gallery .productSticker-item.__promo,
.gallery .productSticker-item.__countdown,
.gallery__photos .productSticker-item.__promo,
.gallery__photos .productSticker-item.__countdown {
  background: #f07c00 !important;
}

.gallery .productSticker-item.__new,
.gallery__photos .productSticker-item.__new {
  background: #3da5ca !important;
}

.gallery .productSticker-item.__video,
.gallery__photos .productSticker-item.__video {
  background: #4c626e !important;
}

.gallery .productSticker-item::before,
.gallery .productSticker-item::after,
.gallery__photos .productSticker-item::before,
.gallery__photos .productSticker-item::after {
  content: none !important;
}

.gallery .productSticker-content,
.gallery__photos .productSticker-content {
  position: relative;
  z-index: 1;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #ffffff !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: 1 !important;
  letter-spacing: inherit !important;
}

.gallery .productSticker-container,
.gallery__photos .productSticker-container {
  position: relative;
  z-index: 1;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}


/* ============================================================
   HOROSHOP MOBILE VERSION

   Horoshop renders a separate mobile DOM with kebab-case class
   names. These rules intentionally mirror the desktop design.
   ============================================================ */

.catalog-card__view > .product-sticker,
.gallery__container > .product-sticker {
  position: absolute !important;
  z-index: 4;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  gap: 2px !important;
  line-height: 1 !important;
  pointer-events: none;
}

.catalog-card__view > .product-sticker {
  inset: 8px auto auto 8px !important;
}

.gallery__container > .product-sticker {
  inset: 10px auto auto 10px !important;
}

.product-sticker__separator {
  display: none !important;
}

.product-sticker__item {
  position: relative;
  isolation: isolate;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box;
  width: auto !important;
  height: 18px !important;
  min-width: 0 !important;
  min-height: 18px !important;
  margin: 0 !important;
  padding: 0 7px !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 4px !important;
  color: #ffffff !important;
  background: #263238 !important;
  box-shadow:
    0 2px 6px
    rgba(35, 42, 46, 0.2) !important;
  font-family: inherit;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 10px !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase;
  text-shadow: none;
  transform-origin: left center;
  animation:
    toretto-sticker-enter 520ms
    cubic-bezier(0.22, 1, 0.36, 1) both;
}

.product-sticker__item::before,
.product-sticker__item::after {
  content: none !important;
  display: none !important;
}

.product-sticker__container,
.product-sticker__content {
  position: relative;
  z-index: 1;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #ffffff !important;
  font-size: inherit !important;
  line-height: 10px !important;
}

.product-sticker__content {
  box-sizing: border-box;
  padding: 1px 0 0 !important;
}

.product-sticker__item--popular,
.product-sticker__item--[style*="#1f8f4e"] {
  background: #1f8f4e !important;
  box-shadow:
    0 2px 6px
    rgba(31, 143, 78, 0.2) !important;
  animation:
    toretto-sticker-enter 550ms
    cubic-bezier(0.22, 1, 0.36, 1) both,
    toretto-hit-glow 6s
    linear 2s infinite;
}

.product-sticker__item--discount {
  background: #e53935 !important;
  box-shadow:
    0 2px 6px
    rgba(229, 57, 53, 0.2) !important;
  animation:
    toretto-sticker-enter 550ms
    cubic-bezier(0.22, 1, 0.36, 1) 120ms both,
    toretto-sticker-nudge 6s
    cubic-bezier(0.22, 1, 0.36, 1) 3.8s infinite;
}

.product-sticker__item--promo,
.product-sticker__item--countdown {
  background: #f07c00 !important;
  box-shadow:
    0 2px 6px
    rgba(240, 124, 0, 0.2) !important;
}

.product-sticker__item--new {
  background: #3da5ca !important;
  box-shadow:
    0 2px 6px
    rgba(61, 165, 202, 0.2) !important;
}

.product-sticker__item--video {
  background: #4c626e !important;
  box-shadow:
    0 2px 6px
    rgba(76, 98, 110, 0.2) !important;
}


/* ============================================================
   MOBILE: SHORT POPULAR LABEL

   The original Horoshop text stays in the DOM. Only the visible
   mobile label is shortened from "Топ продаж" to "ТОП".
   ============================================================ */

.product-sticker__item--popular
.product-sticker__content,
.product-sticker__item--[style*="#1f8f4e"]
.product-sticker__content {
  font-size: 0 !important;
}

.product-sticker__item--popular
.product-sticker__content::after,
.product-sticker__item--[style*="#1f8f4e"]
.product-sticker__content::after {
  content: "ТОП";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 10px;
  color: #ffffff;
  font-family: inherit;
  font-size: 10px;
  font-weight: 800;
  line-height: 10px;
  letter-spacing: 0.01em;
}


/* ============================================================
   RESPONSIVE DESKTOP DOM

   This is a fallback for narrow screens where Horoshop keeps
   the desktop camelCase markup instead of its mobile template.
   ============================================================ */

@media (max-width: 767px) {
  .catalogCard .productSticker {
    inset: 8px auto auto 8px !important;
    gap: 2px;
  }

  .catalogCard .productSticker-item {
    box-sizing: border-box;
    height: 18px !important;
    min-height: 18px !important;
    padding: 0 7px !important;
    border-radius: 4px !important;
    font-size: 10px !important;
    line-height: 10px !important;
    letter-spacing: 0.01em !important;
  }

  .catalogCard .productSticker-item.__discount {
    min-height: 18px !important;
    padding: 0 7px !important;
    font-size: 10px !important;
  }

  .catalogCard .productSticker-container,
  .catalogCard .productSticker-content,
  .gallery .productSticker-container,
  .gallery .productSticker-content,
  .gallery__photos .productSticker-container,
  .gallery__photos .productSticker-content {
    height: 100% !important;
    line-height: 10px !important;
  }

  .catalogCard .productSticker-content,
  .gallery .productSticker-content,
  .gallery__photos .productSticker-content {
    box-sizing: border-box;
    padding: 1px 0 0 !important;
  }

  .catalogCard
  .productSticker-item.__popular
  .productSticker-content,
  .catalogCard
  .productSticker-item.__[style*="#1f8f4e"]
  .productSticker-content,
  .gallery
  .productSticker-item.__popular
  .productSticker-content,
  .gallery
  .productSticker-item.__[style*="#1f8f4e"]
  .productSticker-content,
  .gallery__photos
  .productSticker-item.__popular
  .productSticker-content,
  .gallery__photos
  .productSticker-item.__[style*="#1f8f4e"]
  .productSticker-content {
    font-size: 0 !important;
  }

  .catalogCard
  .productSticker-item.__popular
  .productSticker-content::after,
  .catalogCard
  .productSticker-item.__[style*="#1f8f4e"]
  .productSticker-content::after,
  .gallery
  .productSticker-item.__popular
  .productSticker-content::after,
  .gallery
  .productSticker-item.__[style*="#1f8f4e"]
  .productSticker-content::after,
  .gallery__photos
  .productSticker-item.__popular
  .productSticker-content::after,
  .gallery__photos
  .productSticker-item.__[style*="#1f8f4e"]
  .productSticker-content::after {
    content: "ТОП";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 10px;
    color: #ffffff;
    font-family: inherit;
    font-size: 10px;
    font-weight: 800;
    line-height: 10px;
    letter-spacing: 0.01em;
  }

  .gallery .productSticker,
  .gallery__photos .productSticker {
    inset: 10px auto auto 10px !important;
    gap: 2px;
  }

  .gallery .productSticker-item,
  .gallery__photos .productSticker-item {
    box-sizing: border-box;
    height: 18px !important;
    min-height: 18px !important;
    padding: 0 7px !important;
    border-radius: 4px !important;
    font-size: 10px !important;
    line-height: 10px !important;
    letter-spacing: 0.01em !important;
  }

  .gallery .productSticker-item.__discount,
  .gallery__photos .productSticker-item.__discount {
    font-size: 10px !important;
  }
}


/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes toretto-sticker-enter {
  0% {
    opacity: 0;
    transform:
      translateY(-7px)
      scale(0.72);
  }

  65% {
    opacity: 1;
    transform:
      translateY(1px)
      scale(1.045);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes toretto-hit-glow {
  0% {
    filter: drop-shadow(7px 0 6px rgba(31, 143, 78, 0));
  }

  4.5% {
    filter: drop-shadow(5px 5px 6px rgba(31, 143, 78, 0.42));
  }

  9% {
    filter: drop-shadow(0 7px 6px rgba(31, 143, 78, 0.42));
  }

  13.5% {
    filter: drop-shadow(-5px 5px 6px rgba(31, 143, 78, 0.42));
  }

  18% {
    filter: drop-shadow(-7px 0 6px rgba(31, 143, 78, 0.42));
  }

  22.5% {
    filter: drop-shadow(-5px -5px 6px rgba(31, 143, 78, 0.42));
  }

  27% {
    filter: drop-shadow(0 -7px 6px rgba(31, 143, 78, 0.42));
  }

  31.5% {
    filter: drop-shadow(5px -5px 6px rgba(31, 143, 78, 0.42));
  }

  36% {
    filter: drop-shadow(7px 0 6px rgba(31, 143, 78, 0.42));
  }

  42%,
  100% {
    filter: drop-shadow(7px 0 6px rgba(31, 143, 78, 0));
  }
}

@keyframes toretto-sticker-nudge {
  0% {
    transform: none;
  }

  6% {
    transform:
      rotate(-3deg)
      scale(1.07);
  }

  12% {
    transform:
      rotate(2deg)
      scale(1.07);
  }

  18% {
    transform:
      rotate(0deg)
      scale(1.02);
  }

  24%,
  100% {
    transform: none;
  }
}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .catalogCard .productSticker-item,
  .gallery .productSticker-item,
  .gallery__photos .productSticker-item,
  .product-sticker__item {
    animation: none !important;
  }
}


/* ============================================================
   MOBILE: STATIC STICKERS

   The separate Horoshop mobile template uses kebab-case classes.
   No entrance, glow or nudge effects are enabled on mobile.
   ============================================================ */

.product-sticker__item {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
}

@media (max-width: 767px) {
  .catalogCard .productSticker-item,
  .gallery .productSticker-item,
  .gallery__photos .productSticker-item {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
}


/* ============================================================
   PRECISE DESKTOP INTERACTIONS — v1.0.17

   Only real mouse/trackpad devices from the Horoshop desktop
   breakpoint receive these effects. Mobile and touch stay intact.
   ============================================================ */

@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  /* Stable quantity control: no flashing or fading border on card open. */
  .catalogCard .counter__container {
    border: 1px solid #d7d7d7 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    transition: none !important;
  }

  .catalogCard .counter-btn,
  .catalogCard .counter-input,
  .catalogCard .counter-field {
    border: 0 !important;
    box-shadow: none !important;
  }

  /* 1. Top categories: animate only the picture. */
  .frontCategories-img {
    transform: translateZ(0);
    transform-origin: center;
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .frontCategories-a:hover .frontCategories-img {
    transform: scale(1.045);
  }

  /* 3. Product cards: preserve Horoshop's own border and colors. */
  .catalogCard {
    transform: translateZ(0);
    transition: transform 210ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .catalogCard:hover {
    z-index: 4;
    transform: translateY(-4px);
  }

  /*
   * Close the seam only on product cards with an expandable purchase
   * panel. Category tiles and cards without that panel keep all borders.
   * Retain border width so the correction does not change card geometry.
   */
  .catalogCard:not(.__category):has(.catalogCard-extra):hover .catalogCard-main {
    border-bottom-color: transparent !important;
  }

  .catalogCard:not(.__category):hover .catalogCard-extra {
    border-top: 0 !important;
  }

  /* 4. Buy button reacts only when the pointer is over the button. */
  .catalogCard .j-buy-button-add,
  .catalogCard .catalogCard-buy .btn,
  .catalogCard .catalogCard-extra .btn.__special {
    transform: translateZ(0);
    transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .catalogCard .j-buy-button-add:hover,
  .catalogCard .catalogCard-buy .btn:hover,
  .catalogCard .catalogCard-extra .btn.__special:hover {
    transform: translateY(-2px);
  }

  /* 5. Favorite and compare controls in product cards. */
  .catalogCard .catalogCard-toolbar {
    align-items: center;
    gap: 8px;
    height: auto;
    margin: -6px -4px 14px;
  }

  .catalogCard .catalogCard-toolbar-item {
    margin: 6px 0 0;
  }

  .catalogCard .favorites-button,
  .catalogCard .comparison-button {
    box-sizing: border-box;
    border: 1px solid #d5dade !important;
    border-radius: 4px !important;
    min-height: 36px;
    padding: 0 12px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    transform: translateZ(0);
    transition:
      transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
      border-color 180ms ease;
  }

  .catalogCard .favorites-button__text,
  .catalogCard .comparison-button__text {
    margin-left: 6px !important;
  }

  .catalogCard .favorites-button:hover,
  .catalogCard .comparison-button:hover {
    border-color: #aeb6bc !important;
    transform: translateY(-2px);
  }

  /* 6. Buy, credit and quick-order controls on a product page. */
  .product-order > .product-order__row > .product-order__block > .btn {
    transform: translateZ(0);
    transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .product-order > .product-order__row > .product-order__block > .btn:hover {
    transform: translateY(-2px);
  }

  /* 7. Only the basket icon moves in the desktop header. */
  .basket-view .basket__icon {
    transform: translateZ(0);
    transform-origin: center;
    transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .basket-view .basket:hover .basket__icon {
    transform: translateY(-3px);
  }

  /* 8. Similar, accessories and recently viewed cards.
     Category pages reuse the same Horoshop slider card class. */
  .product__bottom .productsSlider-i,
  body:has(.catalog) .productsSlider-i {
    box-sizing: border-box;
    transform: translateZ(0);
    transition: transform 210ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .product__bottom .productsSlider-i:hover,
  body:has(.catalog) .productsSlider-i:hover {
    z-index: 3;
    transform: translateY(-4px);
  }

  /* 9. Cart recommendations, checkout and cumulative-discount link. */
  #cart .j-cart-additional .catalogCard,
  #cart .j-cart-additional .productsSlider-i {
    box-sizing: border-box;
    transform: translateZ(0);
    transition: transform 210ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  #cart .j-cart-additional .catalogCard:hover,
  #cart .j-cart-additional .productsSlider-i:hover {
    z-index: 3;
    transform: translateY(-4px);
  }

  #cart .cart-btnOrder .btn {
    transform: translateZ(0);
    transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  #cart .cart-btnOrder .btn:hover {
    transform: translateY(-2px);
  }

  #cart .cart-discount-l .btn,
  #cart .cart-discount-l .link__text {
    transition: color 180ms ease;
  }

  #cart .cart-discount-l .btn:hover,
  #cart .cart-discount-l .btn:hover .link__text {
    color: #009988 !important;
  }

  /* 10. The two lower homepage banners: zoom the artwork only. */
  .banners__grid .banner-image {
    transform: translateZ(0);
    transform-origin: center;
    transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .banners__grid .banners__item:hover .banner-image {
    transform: scale(1.018);
  }

  /* 11. Brand tiles and blog articles: a restrained lift. */
  .frontBrands-a,
  .entries-i-wrap {
    transform: translateZ(0);
    transition: transform 210ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .frontBrands-a:hover,
  .entries-i-wrap:hover {
    z-index: 3;
    transform: translateY(-4px);
  }

  .entries-container {
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: -5px;
    margin-bottom: -5px;
  }

  .product-order > .product-order__row > .product-order__block > .btn:active,
  .catalogCard .j-buy-button-add:active,
  .catalogCard .catalogCard-buy .btn:active,
  .catalogCard .catalogCard-extra .btn.__special:active,
  .catalogCard .favorites-button:active,
  .catalogCard .comparison-button:active,
  .basket-view .basket:active .basket__icon,
  #cart .cart-btnOrder .btn:active {
    transform: translateY(0) scale(0.98);
    transition-duration: 90ms;
  }

  .product-order > .product-order__row > .product-order__block > .btn:focus-visible,
  .catalogCard .j-buy-button-add:focus-visible,
  .catalogCard .favorites-button:focus-visible,
  .catalogCard .comparison-button:focus-visible,
  #cart .cart-btnOrder .btn:focus-visible {
    outline: 2px solid #009988;
    outline-offset: 3px;
  }
}

/* Catalog text opens the localized catalog; the arrow keeps its menu action. */
.j-productsMenu-toggleButton,
.j-productsMenu-toggleButton .products-menu__button-text {
  cursor: pointer !important;
}

.j-productsMenu-toggleButton .products-menu__button-text {
  display: inline-flex;
  align-items: center;
  color: inherit !important;
  text-decoration: none !important;
}

.j-productsMenu-toggleButton .products-menu__button-text:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .frontCategories-img,
  .catalogCard,
  .catalogCard .j-buy-button-add,
  .catalogCard .catalogCard-buy .btn,
  .catalogCard .catalogCard-extra .btn.__special,
  .catalogCard .favorites-button,
  .catalogCard .comparison-button,
  .product-order > .product-order__row > .product-order__block > .btn,
  .basket-view .basket__icon,
  .product__bottom .productsSlider-i,
  #cart .j-cart-additional .catalogCard,
  #cart .j-cart-additional .productsSlider-i,
  #cart .cart-btnOrder .btn,
  #cart .cart-discount-l .btn,
  #cart .cart-discount-l .link__text,
  .banners__grid .banner-image,
  .frontBrands-a,
  .entries-i-wrap {
    transition: none !important;
    animation: none !important;
  }
}