/* ==========================================================================
   Сквозная типографика, шапка, подвал, кнопки
   ========================================================================== */

/* --- Дисплейная типографика ------------------------------------------------
   Капслок, вес 900, отрицательный трекинг. Только для заявлений:
   заголовки страниц, названия товаров, врезки.
   -------------------------------------------------------------------------- */
h1, h2,
.shop-page-title,
.product-title,
.entry-title {
  letter-spacing: -0.035em;
  color: var(--gr-ink);
}

h1, .shop-page-title {
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.98;
}

/* --- Голос этикетки --------------------------------------------------------
   Моноширинный там, где на упаковке печатают данные: цены, размеры,
   навигация, ярлыки, фильтры.
   -------------------------------------------------------------------------- */
.price,
.woocommerce-Price-amount,
.woocommerce-result-count,
.header-nav a,
.nav > li > a,
.breadcrumbs,
.woocommerce-breadcrumb {
  font-family: var(--gr-mono);
  font-variant-numeric: tabular-nums;
}

.header-nav a,
.nav > li > a {
  letter-spacing: 0.09em;
  font-weight: 500;
  font-size: 0.78rem;
}

.woocommerce-breadcrumb,
.breadcrumbs {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gr-muted);
}

/* --- Кнопки ----------------------------------------------------------------
   Прямые углы, моноширинный, разрядка. Ни одной скруглённой формы —
   этикетка не бывает скруглённой.
   -------------------------------------------------------------------------- */
.button,
button,
input[type="submit"],
.single_add_to_cart_button,
.checkout-button {
  border-radius: var(--gr-radius);
  font-family: var(--gr-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
}

/* Заливка — только сплошным кнопкам.
   .is-outline у Flatsome означает прозрачный фон и цветной текст. Если залить
   фон и ему, текст останется контурного цвета и сольётся с заливкой: так
   «Продовжити покупки» в корзине давала контраст 1.01 — текст был не виден. */
.button.primary:not(.is-outline),
.single_add_to_cart_button,
.checkout-button {
  background-color: var(--gr-mint-deep);
  border-color: var(--gr-mint-deep);
  color: #fff;
}

.button.primary:not(.is-outline):hover,
.single_add_to_cart_button:hover,
.checkout-button:hover {
  background-color: var(--gr-mint-darker);
  border-color: var(--gr-mint-darker);
  color: #fff;
}

/* Контурные кнопки: фон прозрачный, цвет — фирменный, а не серый по умолчанию. */
.button.primary.is-outline {
  background-color: transparent;
  border-color: var(--gr-mint-deep);
  color: var(--gr-mint-deep);
}

.button.primary.is-outline:hover {
  background-color: var(--gr-mint-deep);
  border-color: var(--gr-mint-deep);
  color: #fff;
}

/* Отключённая кнопка должна читаться как отключённая, а не как поломанная:
   WooCommerce гасит «Оновити кошик», пока количество не изменили. */
.button[disabled],
.button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* --- Шапка ------------------------------------------------------------------
   Без разделительной линии: шапка и первый экран должны читаться как одна
   плоскость. Линия резала кадр от навигации и добавляла лишнюю горизонталь
   там, где её и так хватает.
   -------------------------------------------------------------------------- */
.header-main {
  border-bottom: 0;
}

.header-bottom {
  background-color: transparent;
  border-bottom: 0;
}

/* --- Подвал ------------------------------------------------------------------ */
.footer-wrapper .widget .widget-title {
  font-family: var(--gr-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* --- Фокус с клавиатуры ------------------------------------------------------
   У темы его местами нет вовсе.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gr-mint-deep);
  outline-offset: 2px;
}

/* --- Верхняя строка ----------------------------------------------------------
   Одно объявление во всю ширину. Голос — тот же моноширинный, что у цен
   и навигации: строка сообщает условие, а не продаёт.
   -------------------------------------------------------------------------- */
#top-bar {
  background-color: var(--gr-ink);
  color: #fff;
}

#top-bar,
#top-bar a,
#top-bar .html {
  font-family: var(--gr-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}

#top-bar .html {
  /* Текст объявления не должен прижиматься к краям на узких экранах. */
  padding: 0 1rem;
  text-align: center;
}

@media (max-width: 549px) {
  #top-bar {
    font-size: 0.6rem;
    letter-spacing: 0.08em;
  }
}

@media (max-width: 849px) {
  /* На телефоне строка объявления конкурирует за высоту с товаром.
     Одна короткая строка не требует 36px — 28 достаточно, а разница
     возвращается первому ряду витрины. */
  #top-bar,
  #top-bar .flex-row,
  #top-bar .flex-col {
    min-height: 28px;
    height: 28px;
  }
}