:root {
  --chart-line-color: var(--accent-secondary-color);
  --chart-point-color: var(--accent-secondary-color);
}

.btn,
.btn-mobile {
  background: var(--accent-secondary-color);
  background: linear-gradient(
    180deg,
    var(--surface-muted-color) 0,
    var(--accent-color) 33%,
    var(--accent-secondary-color) 66%,
    var(--primary-color) 100%
  );
  background-size: 1px 168px;
  color: var(--text-color);
}

.btn-mobile:hover,
.btn:hover {
  color: var(--surface-color);
}

.card {
  box-shadow: 0 0 3px var(--border-color);
}

.card:hover {
  box-shadow: 0 0 5px var(--accent-secondary-color);
}

.card .fire_badge,
.modal .savings_badge {
  background-color: var(--accent-secondary-color);
}

.card .toggle,
.ui-menu .ui-menu-item a:hover,
.sidebar,
.sidebar .sidebar-button,
.about-intro-section,
.about-methodology-section {
  background-color: var(--surface-muted-color);
}

.card .deals .link,
.ui-widget-content,
.sidebar,
.category_grid .navigation .ring:after {
  border-color: var(--border-color);
}

footer,
.page-header,
.header-menu {
  background-color: var(--footer-background-color);
  color: var(--surface-color);
}

body {
  background: linear-gradient(
    180deg,
    var(--surface-muted-color),
    var(--surface-muted-color) 50%,
    var(--surface-color)
  );
}

.promo {
  background-color: var(--accent-color);
  color: var(--text-color);
}

.page-header .page-header__search .searchsubmit .search-line,
.page-header .page-header__search .searchsubmit .search-circle {
  border-color: var(--footer-background-color);
}

@media screen and (max-width: 650px) {
  .page-header .page-header__search .searchsubmit .search-line {
    background: var(--surface-color);
  }

  .page-header .page-header__search .searchsubmit .search-circle {
    border-color: var(--surface-color);
  }
}

@media screen and (min-width: 651px) {
  .page-header .page-header__search .searchsubmit .search-line {
    background: var(--footer-background-color);
  }
}

.page-header .page-header__menu-button,
.page-header .page-header__menu-button .text,
.page-header .page-header__menu-button .burger .bar,
.header-menu li a,
.hero h2 {
  color: var(--surface-color);
}

.page-header .page-header__menu-button .burger .bar {
  background-color: var(--surface-color);
}

h1,
h2,
h3,
h4,
h5,
h6,
.modal h2,
.about-intro-section .about-intro-content p,
.about-advantages-section .about-section-title,
.about-advantages-section .about-section-subtitle,
.about-advantages-section .about-advantage-title,
.about-advantages-section .about-advantage-description,
.about-methodology-section .about-section-title,
.about-methodology-section .about-methodology-text,
.about-methodology-section .about-ranking-item-title,
.about-methodology-section .about-ranking-item-text,
.about-methodology-section .about-methodology-footer p {
  color: var(--text-color);
}

.product .detail_card .deals .link:first-of-type,
.product .detail_card .deals .link:hover {
  box-shadow: 0 0 5px var(--accent-secondary-color);
}

.sidebar .price-range input,
.sidebar input[type="radio"],
.sidebar input[type="checkbox"] {
  accent-color: var(--footer-background-color);
}

.about-advantages-section,
.about-advantages-section .about-advantage-card,
.about-methodology-section .about-methodology-text {
  background: var(--surface-color);
}

.about-advantages-section .about-advantage-card {
  border-color: var(--surface-muted-color);
}

.about-methodology-section .about-methodology-text {
  border-left-color: var(--primary-color);
}

.about-methodology-section .about-bg-symbol {
  color: var(--primary-color);
}