*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg-dark);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
.container {
  max-width: 1700px;
  margin-inline: auto;
}
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
  position: fixed; top: 10px; left: 10px; z-index: 99999;
  width: auto; height: auto; padding: 12px 20px; clip: auto;
  background: #fff; color: #000;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: none; cursor: pointer; font-family: var(--font-sans);
  transition: opacity var(--transition);
}
.btn:hover { opacity: 0.7; }
.btn--primary {
  background: var(--color-accent); color: #fff;
  padding: 20px 42px; font-size: clamp(18px, 2vw, 28px);
}
.btn--outline {
  background: transparent; color: #fff;
  border: 1px solid #fff; padding: 16px 32px; font-size: 20px;
}
.btn--dark { background: #000; color: #fff; padding: 12px 24px; }
/* div.page — обёртка контента в page.php/single.php/archive.php
   (не body.page — WP вешает класс page на body) */
div.page { padding: 60px 0; }
.page__title { font-family: var(--font-serif); font-size: clamp(32px, 5vw, 56px); margin-bottom: 24px; }

@media (max-width:1441px) {
  .container {
    max-width: 1200px;
  }
}

.text-center {
  text-align: center;
}

.pb-20 {
  padding-bottom: 20px;
}

.RatingBadgeWidget {
  width: 185px !important;
  height: 60px !important;
}

@media (max-width: 1199px) {
  .container {
    max-width: 900px;
  }
}

@media (max-width: 768px) {
  .container {
    max-width: 600px;
  }
}

@media (max-width: 500px) {
  .container {
    max-width: 400px;
  }
}

@media (max-width: 400px) {
  .container {
    max-width: 340px;
  }
}

@media (max-width: 330px) {
  .container {
    max-width: 290px; 
  }
}