:root {
  --background-color: #424547;
  --color: #e5e5e5;
  --link-color: #bdbdbd;
  --link-color-hover: #dee2e6;
  --link-color-hover-white: #fff;
  --icon-filter: invert(100%);
  --icon-filter_hover: invert(40%);
  --image-filter: grayscale(50%);
  --main-headline-color: rgb(233, 30, 99);
  --accent-background-color: rgb(0, 188, 212);
  --accent-color: rgb(5, 5, 5);
  --productPrice-text-color: #bdbdbd;
  --product-title-text-color: #bdbdbd;

  --box-background-color: #4c5053;
  --card-background-color: #4c5053;
  --card-background-color-hover: #424547;
  --tab-background-color: #4c5053;

  --button-background-color: #4c5053;
  --button-background-color-hover: transparent;

  --button-border-color: #9a9a9a;
  --button-border-color-hover: #dd2c00;
  --button-text-color: #f3f3f3;
  --button-text-color-hover: #f3f3f3;

  --nav-tab-background-color: #c09b74;
  --nav-tab-background-color-active: #c09b74;
  --nav-tab-border-color: #fff;
  --nav-tab-border-color-active: #dd2c00;
  --nav-tab-text-color: #f3f3f3;
  --nav-tab-text-color-active: #dee2e6;

  --footer-background-color: #4c5053;

  --border-gray: #424547;
  --background-gray: #4c5053;
  
  --color-red: #ff5151;
}

/* Применяем переменные к заголовку */
.product-title a {
    color: var(--product-title-text-color) !important;
}

/* Применяем переменные к цене */
.productPrice {
    color: var(--productPrice-text-color) !important;
}

/* Если цена обернута в price-wrap, добавим и его */
.price-wrap {
    color: var(--productPrice-text-color) !important;
}

/* Подсветка логотипа в темной теме */
/* Описываем саму анимацию пульсации */
@keyframes logo-neon-pulse {
  0% {
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.2));
  }
  50% {
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.6));
  }
  100% {
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.2));
  }
}

/* Применяем анимацию к логотипу */
.smllogo img {
  /* Название анимации, длительность 3 секунды, бесконечно, плавно */
  animation: logo-neon-pulse 5s infinite ease-in-out;
  transition: all 0.3s ease;
}

/* При наведении можно заставить его светиться постоянно ярко */
.smllogo img:hover {
  animation-play-state: paused; /* Останавливает пульсацию при наведении */
  filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.8)) !important;
}



img[src*=".svg"] {
  filter: var(--icon-filter);
}

img:not([src*=".svg"]) {
  filter: var(--image-filter);
}