html body main section [data-card-accent="blue"][data-card-accent] {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent) 14%, var(--card)),
    var(--card) 60%
  ) !important;
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line)) !important;
  border-style: solid !important;
  box-shadow:
    0 15px 44px -28px color-mix(in srgb, var(--accent) 58%, transparent),
    0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent) !important;
  transition:
    transform .35s cubic-bezier(.22, .7, .3, 1),
    border-color .35s ease,
    box-shadow .35s ease !important;
}

html body main section [data-card-accent="green"][data-card-accent] {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent2) 24%, var(--card)),
    var(--card) 62%
  ) !important;
  border-color: color-mix(in srgb, var(--accent2) 52%, var(--line)) !important;
  border-style: solid !important;
  box-shadow:
    0 15px 44px -28px color-mix(in srgb, var(--accent2) 58%, transparent),
    0 0 0 1px color-mix(in srgb, var(--accent2) 10%, transparent) !important;
  transition:
    transform .35s cubic-bezier(.22, .7, .3, 1),
    border-color .35s ease,
    box-shadow .35s ease !important;
}

html body main section [data-card-accent="blue"][data-card-accent]:hover,
html body main section [data-card-accent="blue"][data-card-accent]:focus-within {
  border-color: color-mix(in srgb, var(--accent) 66%, var(--line)) !important;
  box-shadow:
    0 21px 58px -22px color-mix(in srgb, var(--accent) 66%, transparent),
    0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent) !important;
  transform: translateY(-5px) !important;
}

html body main section [data-card-accent="green"][data-card-accent]:hover,
html body main section [data-card-accent="green"][data-card-accent]:focus-within {
  border-color: color-mix(in srgb, var(--accent2) 68%, var(--line)) !important;
  box-shadow:
    0 21px 58px -22px color-mix(in srgb, var(--accent2) 62%, transparent),
    0 0 0 1px color-mix(in srgb, var(--accent2) 18%, transparent) !important;
  transform: translateY(-5px) !important;
}

@media (prefers-reduced-motion: reduce) {
  html body main section [data-card-accent][data-card-accent] {
    transition: none !important;
  }

  html body main section [data-card-accent][data-card-accent]:hover,
  html body main section [data-card-accent][data-card-accent]:focus-within {
    transform: none !important;
  }
}

/* Адаптивное название в шапке. Этот файл подключён ко всем HTML-страницам
   и шаблонам WordPress, поэтому для обновления на хостинге нужен один CSS.
   Логотип 144px + промежуток 11px + полное название 190px = 345px. */
@supports (container-type: inline-size) {
  html body header[data-screen-label="Навигация"] > :is(button, a):first-child {
    container-name: es-header-brand;
    container-type: inline-size;
    flex: 0 1 345px;
    min-width: 144px !important;
  }

  @container es-header-brand (width < 345px) {
    html body header[data-screen-label="Навигация"] [data-logo-sub] {
      /* В разметке уже есть style="display:block". */
      display: none !important;
    }
  }
}

/* Запасной вариант для браузеров без container queries. */
@supports not (container-type: inline-size) {
  @media (max-width: 640px) {
    html body header[data-screen-label="Навигация"] [data-logo-sub] {
      display: none !important;
    }
  }
}