* { box-sizing: border-box; }

/* Тема (не в статичном референсе): базовый safety-reset для любых
   реальных <img> — в первую очередь для картинок внутри the_content()
   статьи, которых в статичном референсе не было вовсе. Без этого широкая
   картинка в тексте могла бы вылезти за пределы .article-body. Точечные
   контейнеры превью (.card__image, .gallery-main и т.д.) переопределяют
   это через object-fit:cover в своих файлах — см. 02-cards.css и др. 16.07.2026. */
img { max-width: 100%; height: auto; display: block; }
/* Тот же "hidden vs display" баг (см. 06-product-detail.css, найден там
   19.07.2026 на .btn/.email-gate__form/др.) — здесь его источник этот же
   img{display:block} двумя строками выше: авторское правило побеждает
   UA-правило [hidden]{display:none}, поэтому <img hidden> без явного
   override оставался виден (пойман на "уже подписан" в .newsletter —
   мигал битой картинкой поверх обычной формы даже без куки is_subscribed). */
img[hidden] { display: none; }

body {
  margin: 0;
  background: var(--color-bg-alt);
  font-family: var(--font-body);
  color: var(--color-text-primary);
  padding: var(--space-6);
}

/* Базовый hover для ЛЮБОЙ ссылки на сайте, не описанной точечно ниже
   (nav/footer/breadcrumbs/section-head/toc уже переопределены явно —
   см. соответствующие файлы). Единый оранжевый акцент — тот же hex,
   что и на .footer-site-link (--color-accent-amber, #FC9B00). 15.07.2026. */
a:hover { color: var(--color-accent-amber); text-decoration: underline; }

.sheet-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 700;
  margin: 0 0 var(--space-6);
}

.frame-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

.frame {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.frame h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-body-lg);
  font-weight: 700;
  margin: 0 0 var(--space-1);
}

.frame p.desc {
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-4);
}

.state-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}
.state-row:last-child { border-bottom: none; }

.state-label {
  font-size: var(--fs-caption);
  color: var(--color-text-secondary);
  width: 64px;
  flex-shrink: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px var(--space-5);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-body);
  border: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn-primary { background: var(--color-primary); color: var(--color-text-inverse); }
/* Hover унифицирован под фирменный оранжевый на всех зелёных кнопках сайта
   (было — светло-зелёный + мог "утекать" подчёркивание/цвет текста от
   базового a:hover, если кнопка — <a class="btn btn-primary">). Текст
   всегда белый, без подчёркивания. 16.07.2026. */
.btn-primary:hover, .btn-primary.is-hover { background: var(--color-accent-amber); color: var(--color-text-inverse); text-decoration: none; }
.btn-primary:active, .btn-primary.is-active { background: var(--color-primary-active); color: var(--color-text-inverse); text-decoration: none; }
.btn-primary:disabled, .btn-primary.is-disabled { background: var(--color-primary); opacity: .4; cursor: not-allowed; }

.btn-secondary { background: transparent; border: 2px solid var(--color-primary); color: var(--color-primary); }
.btn-secondary:hover, .btn-secondary.is-hover { background: var(--color-accent-amber); border-color: var(--color-accent-amber); color: var(--color-text-inverse); text-decoration: none; }
.btn-secondary:active, .btn-secondary.is-active { background: var(--color-tint-green); border-color: var(--color-primary-active); color: var(--color-primary-active); }
.btn-secondary:disabled, .btn-secondary.is-disabled { border-color: #C7CBD1; color: #C7CBD1; }

.btn-ghost { background: transparent; border: none; color: var(--color-primary); padding: var(--space-2) var(--space-1); }
.btn-ghost:hover, .btn-ghost.is-hover { text-decoration: underline; }
.btn-ghost:active, .btn-ghost.is-active { color: var(--color-primary-active); }
.btn-ghost:disabled, .btn-ghost.is-disabled { color: #C7CBD1; }

/* ---------- Inputs ---------- */
.input {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-text-primary);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus, .input.is-focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(108,153,34,.15); }
.input.is-error { border-color: var(--color-red); }
.error-text { color: var(--color-red); font-size: var(--fs-caption); margin-top: var(--space-1); }

/* ---------- Input on dark background (newsletter/promo blocks) ----------
   Тема (не в статичном референсе): поле подписки лежит на тёмном
   --color-dark-section — базовый .input:focus (зелёная рамка+свечение)
   там теряется/спорит с фоном. Серое поле сделано светлее, а фокус —
   тёмно-серой рамкой темнее фона, вместо зелёной. 16.07.2026. */
.input--on-dark { background: #2E3440; border-color: #454B56; color: #fff; }
.input--on-dark::placeholder { color: #8A8F98; }
.input--on-dark:focus, .input--on-dark.is-focus { border-color: #14171C; box-shadow: none; }

/* ---------- Newsletter consent checkbox (Home/статьи, 17.07.2026) ----------
   Три фикса по прямому запросу: 1) отступ от формы ввода сверху (+5px, было
   впритык к кнопке); 2) ссылка Privacy Policy — белая по умолчанию, амбер на
   hover, как и все остальные ссылки на сайте (не браузерный дефолтный синий);
   3) на single.php та же разметка держит свой inline color:#fff по умолчанию
   (частный случай тёмной секции без класса) — этот hover-стиль применяется
   поверх него без конфликта, т.к. задаёт другое псевдо-состояние. */
.newsletter-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 15px;
  font-size: var(--fs-caption);
  color: #C9CDD3;
}
.newsletter-consent a { color: #fff; text-decoration: underline; }
.newsletter-consent a:hover { color: var(--color-accent-amber); }

/* ---------- Checkbox ---------- */
.checkbox-row { display: flex; align-items: center; gap: var(--space-2); }
.checkbox {
  width: 20px; height: 20px;
  border: 1.5px solid var(--color-border);
  border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.checkbox.is-checked { background: var(--color-primary); border-color: var(--color-primary); color: #fff; font-size: 13px; }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--radius-full); font-size: var(--fs-caption); font-weight: 700; }
.badge-new { background: var(--color-primary); color: #fff; }
.badge-bestseller { background: var(--color-accent-amber); color: #fff; }
.badge-sale { background: var(--color-red); color: #fff; }

.badge-outline { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--radius-full); border: 1.5px solid var(--color-primary); color: var(--color-primary); font-size: var(--fs-small); font-weight: 600; background: #fff; }

/* ---------- Category pills ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--radius-full); border: 1.5px solid; font-size: var(--fs-small); font-weight: 600; background: #fff; }
.pill-green { border-color: var(--color-primary); color: var(--color-primary); }
.pill-orange { border-color: var(--color-accent-amber); color: #B36B00; }
.pill-blue { border-color: var(--color-blue); color: var(--color-blue); }

/* ---------- Кнопки, вставленные форматированием в контенте (редактор блоков) ----------
   Тема (не в статичном референсе): в статичном UI Kit таких кнопок не было —
   в реальном the_content() (статьи, описание товара) редактор блоков может
   вставить свою кнопку (.wp-block-button__link), которая без этого правила
   рендерится дефолтным серым/чёрным цветом ядра WordPress, выбиваясь из
   фирменного стиля. Приводим к тому же виду, что и .btn.btn-primary
   (тот же hover-переход в оранжевый, см. выше). 16.07.2026. */
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px var(--space-5);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-body);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.wp-block-button__link:hover {
  background: var(--color-accent-amber);
  color: var(--color-text-inverse);
  text-decoration: none;
}
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--color-accent-amber);
  border-color: var(--color-accent-amber);
  color: var(--color-text-inverse);
}