/* TMA DESIGN SYSTEM v7 - bridge+tokens+atoms+footer+header. */

/* ============================================================
   TechMash Agro - Golos Text (self-host) + міст на змінні Woodmart
   Частина глобального шару дизайн-системи (Блок 1).
   Прибрати весь шар = зняти enqueue tma-design-system.css у
   functions.php дочірньої теми. Тема при цьому НЕ змінена.
   ============================================================ */

/* ---- Golos Text, варіативний 400-900, локально ----
   Підмножини як у Google Fonts: браузер тягне лише потрібні.
   cyrillic-ext містить ₴ (U+20B4) - він у нас у цінах. */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/golos-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/golos-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/golos-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/golos-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- МІСТ: наші токени -> глобальні змінні Woodmart ----
   Подвійний :root підвищує специфічність (0,2,0 проти 0,1,0) - тема
   друкує свої змінні в inline-<style> ПІЗНІШЕ за цей файл, тож без
   цього прийому наші значення програли б по порядку. !important не
   потрібен. Змінюємо ТІЛЬКИ шрифт і кольори: розміри/ваги лишаємо
   темі, щоб не зсунути верстку внутрішніх сторінок. */
:root:root {
  /* шрифт на весь сайт */
  --wd-text-font:            'Golos Text', system-ui, -apple-system, sans-serif;
  --wd-title-font:           'Golos Text', system-ui, -apple-system, sans-serif;
  --wd-alternative-font:     'Golos Text', system-ui, -apple-system, sans-serif;
  --wd-entities-title-font:  'Golos Text', system-ui, -apple-system, sans-serif;
  --btn-default-font-family: 'Golos Text', system-ui, -apple-system, sans-serif;

  /* бренд-колір і базові кольори тексту */
  --wd-primary-color: #d81f2a;
  --wd-title-color:   #1a1712;
  --wd-text-color:    #5f584c;
}

/* Font overrides for places that hardcode Montserrat directly (not via var).
   Specificity raised by one step (html / html body) - no !important needed.
   Icon fonts (woodmart-font, dashicons, eicons) are intentionally untouched.
   Keep selector lists SHORT and comments ASCII-only: the LiteSpeed minifier
   on this site drops long lists and anything with :is(). Verified 2026-07-23. */

html .elementor-kit-46 h1,
html .elementor-kit-46 h2,
html .elementor-kit-46 h3 { font-family: var(--tma-font); }

html .elementor-kit-46 h4,
html .elementor-kit-46 h5,
html .elementor-kit-46 h6 { font-family: var(--tma-font); }

html body .wd-nav.wd-nav-main > li > a,
html body .wd-nav.wd-nav-secondary > li > a { font-family: var(--tma-font); }

html body .wd-product .wd-entities-title a { font-family: var(--tma-font); }

html .custom-language-switcher-black { font-family: var(--tma-font); }

/* Legacy homepage blocks (.tm-*) - until page 896 is replaced in Block 4. */
html body .tm-hero,
html body .tm-hero h1,
html body .tm-hero__label { font-family: var(--tma-font); }

html body .tm-hero__btn,
html body .tm-hero__stat-number,
html body .tm-advantages { font-family: var(--tma-font); }

html body .tm-categories,
html body .tm-seo,
html body .tm-seo__heading { font-family: var(--tma-font); }

html body .tm-seo__block-title,
html body .tm-cta-gov__badge,
html body .tm-cta-gov__heading { font-family: var(--tma-font); }

html body .tm-cta-gov__text,
html body .tm-cta-gov__btn,
html body .tm-cta-gov__phone,
html body .tm-cta-gov__note { font-family: var(--tma-font); }


/* TOKENS */
/* ============================================================
   TechMash Agro - Design Tokens (єдине джерело правди)
   Namespace: --tma-*  (щоб не конфліктувати з Woodmart/Elementor)
   Джерело: редизайн головної (design_handoff_home).
   Фаза 1 дизайн-системи. Поки НЕ підключено на сайті.
   ============================================================ */

:root {

  /* ---- Кольори: бренд ---- */
  --tma-red:            #d81f2a;  /* бренд-червоний (кнопки, акценти) */
  --tma-red-hover:      #b5141f;  /* hover червоних кнопок */
  --tma-red-soft:       #f4b9bd;  /* світлий червоний: текст на темному */
  --tma-red-deep:       #a01c22;  /* приглушений глибокий червоний: великі заливки (менш агресивний) */

  /* ---- Кольори: темні фони (hero / виробництво / футер) ---- */
  --tma-ink:            #141210;  /* базовий темний фон */
  --tma-ink-panel:      #1b1815;  /* панель на темному (спеки виробництва) */
  --tma-ink-card:       #161310;  /* панель картки hero */
  --tma-ink-deep:       #0d0b0a;  /* найтемніший (фон під зображенням) */

  /* ---- Кольори: світлі фони ---- */
  --tma-paper:          #f7f4ef;  /* базовий фон сторінки */
  --tma-white:          #ffffff;  /* білі картки */

  /* ---- Кольори: текст на світлому ---- */
  --tma-text:           #1a1712;  /* основний текст */
  --tma-text-2:         #5f584c;  /* вторинний текст */
  --tma-text-muted:     #a49c8e;  /* приглушений */
  --tma-text-muted-2:   #8a8375;  /* приглушений (варіант) */

  /* ---- Кольори: текст на темному ---- */
  --tma-on-dark:        #f2ede4;  /* основний на темному */
  --tma-on-dark-2:      #e9e3d8;  /* варіант */
  --tma-on-dark-3:      #c3bcaf;  /* підзаголовки на темному */
  --tma-on-dark-4:      #b6ae9f;  /* абзаци на темному */
  --tma-on-dark-top:    #cfc9bf;  /* текст top-bar */

  /* ---- Кольори: межі ---- */
  --tma-border:         #e7e1d6;  /* світлі межі (картки, лінії) */
  --tma-border-field:   #ddd6c9;  /* межі полів/кнопок */
  --tma-border-field-2: #e0d9cc;  /* межі полів (варіант) */
  --tma-border-soft:    #ede8df;  /* найтонша межа всередині карток */
  --tma-border-dark:    rgba(255,255,255,.1);  /* межа на темному */

  /* ---- Кольори: стани ---- */
  --tma-success:        #3bbf6a;  /* зелений індикатор наявності */

  /* ---- Акцент, що перемикається (tweak) ---- */
  --tma-accent:         #d81f2a;  /* деф. = бренд-червоний */
  /* альтернативи для tweak: #2f7d3a (зелений), #e07a1a (помаранч), #1a1712 (графіт) */


  /* ---- Типографіка ---- */
  --tma-font:           'Golos Text', system-ui, -apple-system, sans-serif;

  --tma-w-regular:      400;
  --tma-w-medium:       500;
  --tma-w-semibold:     600;  /* UI, кнопки, бейджі, заголовки карток */
  --tma-w-bold:         700;  /* цифри, логотип, теги */
  --tma-w-extrabold:    800;  /* H1, H2 секцій */
  --tma-w-black:        900;

  /* Розміри (десктоп; адаптив зменшує окремо) */
  --tma-fs-h1:          44px;
  --tma-fs-h2:          38px;   /* секції: діапазон 36-42, базове 38 */
  --tma-fs-h2-lg:       42px;   /* більша H2 (виробництво) */
  --tma-fs-h2-sm:       36px;   /* менша H2 (держпрограма, контакти) */
  --tma-fs-card-title:  20px;   /* заголовок картки (діапазон 19-23) */
  --tma-fs-lead:        18px;   /* підзаголовки */
  --tma-fs-body:        16px;   /* тіло */
  --tma-fs-body-sm:     15px;   /* тіло дрібне */
  --tma-fs-ui:          14px;   /* кнопки/UI */
  --tma-fs-small:       13px;   /* дрібне, мета */
  --tma-fs-eyebrow:     13px;   /* eyebrow-мітки */

  /* Letter-spacing */
  --tma-ls-h1:          -.015em; /* великі заголовки uppercase */
  --tma-ls-ui:          .05em;   /* кнопки uppercase */
  --tma-ls-eyebrow:     .14em;   /* eyebrow uppercase */
  --tma-ls-eyebrow-wide:.16em;

  --tma-lh-tight:       1.07;    /* H1 */
  --tma-lh-body:        1.6;     /* абзаци */
  --tma-lh-relaxed:     1.68;    /* довгий SEO-текст */


  /* ---- Радіуси ---- */
  --tma-r-btn:          2px;   /* кнопки, бейджі */
  --tma-r-card:         4px;   /* картки, секції */
  --tma-r-hero:         7px;   /* картки hero */
  --tma-r-round:        50%;   /* кругла кнопка / крапка */


  /* ---- Відступи / сітка ---- */
  --tma-maxw:           1240px; /* ширина контенту */
  --tma-pad-x:          32px;   /* горизонтальний padding секцій (десктоп) */
  --tma-pad-x-tab:      20px;   /* планшет <=900px */
  --tma-pad-x-mob:      16px;   /* телефон <=600px */
  --tma-sec-y:          76px;   /* вертикальний padding великих секцій */
  --tma-sec-y-sm:       56px;   /* менший вертикальний padding */
  --tma-gap-card:       16px;   /* gap між картками */
  --tma-gap-grid:       56px;   /* gap великих 2-колонкових сіток (44-56) */


  /* ---- Тіні ---- */
  --tma-shadow-hero:    0 26px 54px rgba(0,0,0,.5);


  /* ---- Декор ---- */
  /* вертикальні лінії на темному hero */
  --tma-hero-lines:     repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 80px);
  /* смугастий плейсхолдер (у проді замінюється фото товару) */
  --tma-stripe:         repeating-linear-gradient(135deg, #252017 0 16px, #1c1813 16px 32px);
  /* затемнення знизу на картці категорії */
  --tma-cat-overlay:    linear-gradient(180deg, rgba(20,18,16,.15) 30%, rgba(20,18,16,.88) 100%);
}


/* ATOMS */
/* ============================================================
   TechMash Agro - Атоми (Фаза 2)
   Найдрібніші повторювані елементи. Спираються на tokens.css.
   Namespace класів: .tma-*  Поки НЕ підключено на сайті.
   ============================================================ */

/* ---------- КНОПКИ ----------
   Спільна база: uppercase, semibold, гострий кут 2px. */
.tma-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--tma-font);
  font-weight: var(--tma-w-semibold);
  font-size: var(--tma-fs-body);
  letter-spacing: var(--tma-ls-ui);
  text-transform: uppercase;
  padding: 15px 30px;
  border-radius: var(--tma-r-btn);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
  white-space: nowrap;
}

/* Основна: суцільна червона (головна дія) */
.tma-btn--primary {
  background: var(--tma-red);
  color: var(--tma-white);
}
.tma-btn--primary:hover { background: var(--tma-red-hover); color: var(--tma-white); }

/* Контурна на темному фоні (друга дія в hero) */
.tma-btn--ghost {
  background: transparent;
  color: var(--tma-on-dark);
  border-color: rgba(255,255,255,.25);
}
.tma-btn--ghost:hover { border-color: var(--tma-white); color: var(--tma-white); }

/* Світла на червоній секції (держпрограма) */
.tma-btn--light {
  background: var(--tma-white);
  color: var(--tma-ink);
}
.tma-btn--light:hover { background: var(--tma-ink); color: var(--tma-white); }

/* Контурна на червоній секції */
.tma-btn--on-red {
  background: transparent;
  color: var(--tma-white);
  border-color: rgba(255,255,255,.6);
}
.tma-btn--on-red:hover { background: var(--tma-white); color: var(--tma-red); }

/* Компактна (шапка "Замовити") */
.tma-btn--sm { font-size: var(--tma-fs-ui); padding: 11px 20px; }

/* На всю ширину (кнопка форми) */
.tma-btn--block { display: flex; width: 100%; }


/* ---------- EYEBROW (надзаголовок-мітка) ----------
   Дрібний uppercase-підпис над H2, з червоним квадратиком. */
.tma-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--tma-font);
  font-weight: var(--tma-w-semibold);
  font-size: var(--tma-fs-eyebrow);
  letter-spacing: var(--tma-ls-eyebrow);
  text-transform: uppercase;
  color: var(--tma-red);
}
.tma-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--tma-red);
  flex: none;
}
/* Варіант у рамці на темному фоні (бейдж hero) */
.tma-eyebrow--boxed {
  color: var(--tma-red-soft);
  border: 1px solid rgba(216,31,42,.5);
  border-radius: var(--tma-r-btn);
  padding: 7px 14px;
  letter-spacing: var(--tma-ls-eyebrow);
}


/* ---------- ТЕГ / БЕЙДЖ ---------- */
/* Червоний текстовий тег (заголовок картки-переваги) */
.tma-tag {
  font-family: var(--tma-font);
  font-weight: var(--tma-w-bold);
  font-size: var(--tma-fs-small);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tma-red);
}

/* Заповнений бейдж-пігулка (кількість моделей на картці категорії) */
.tma-badge {
  display: inline-block;
  font-family: var(--tma-font);
  font-weight: var(--tma-w-semibold);
  font-size: var(--tma-fs-small);
  line-height: 1;
  padding: 6px 11px;
  border-radius: var(--tma-r-btn);
  background: rgba(216,31,42,.92);
  color: var(--tma-white);
}
/* Світлий бейдж моделі (на фото товару) */
.tma-badge--light { background: var(--tma-white); color: var(--tma-ink); }


/* ---------- ЗАГОЛОВКИ СЕКЦІЙ ---------- */
.tma-h1 {
  font-family: var(--tma-font);
  font-weight: var(--tma-w-extrabold);
  font-size: var(--tma-fs-h1);
  line-height: var(--tma-lh-tight);
  letter-spacing: var(--tma-ls-h1);
  text-transform: uppercase;
  text-wrap: balance;
}
.tma-h2 {
  font-family: var(--tma-font);
  font-weight: var(--tma-w-bold);
  font-size: var(--tma-fs-h2);
  line-height: 1.1;
  letter-spacing: -.01em;
  text-transform: uppercase;
}


/* ---------- ПОСИЛАННЯ-АКЦЕНТ ("Весь каталог →") ---------- */
.tma-link {
  font-family: var(--tma-font);
  font-weight: var(--tma-w-semibold);
  font-size: var(--tma-fs-ui);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tma-text);
  border-bottom: 2px solid var(--tma-red);
  padding-bottom: 2px;
}
.tma-link:hover { color: var(--tma-red); }


/* FOOTER */
/* ============================================================
   Футер - стилі (Фаза 3). Темна секція.
   ============================================================ */
.tma-footer { background: var(--tma-ink); color: var(--tma-on-dark-4); }
.tma-footer__inner {
  max-width: var(--tma-maxw);
  margin: 0 auto;
  padding: 56px var(--tma-pad-x) 24px;
}
.tma-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 40px;
}
.tma-footer__logo {
  display: block;
  height: 50px;
  width: auto;
  margin-bottom: 16px;
}
.tma-footer__desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--tma-text-muted);
  max-width: 360px;
}
.tma-footer__head {
  font-family: var(--tma-font);
  font-weight: var(--tma-w-semibold);
  font-size: var(--tma-fs-small);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tma-white);
  margin-bottom: 16px;
}
.tma-footer__links { list-style: none; }
.tma-footer__links li { margin-bottom: 11px; }
.tma-footer__links a {
  font-size: 14.5px;
  color: var(--tma-on-dark-4);
  transition: color .18s ease;
}
.tma-footer__links a:hover { color: var(--tma-white); }

.tma-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: 13px;
  color: var(--tma-text-muted);
}

/* ---- Адаптив ---- */
@media (max-width: 900px) {
  .tma-footer__inner { padding-left: var(--tma-pad-x-tab); padding-right: var(--tma-pad-x-tab); }
  .tma-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 600px) {
  .tma-footer__inner { padding-left: var(--tma-pad-x-mob); padding-right: var(--tma-pad-x-mob); }
  .tma-footer__grid { grid-template-columns: 1fr; text-align: center; }
  .tma-footer__brand { display: flex; flex-direction: column; align-items: center; }
  .tma-footer__desc { margin-left: auto; margin-right: auto; }
  .tma-footer__bottom { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
}


/* HEADER */
/* ============================================================
   Top bar + Header - стилі (Фаза 3).
   ============================================================ */
.tma-topbar {
  background: var(--tma-ink);
  color: var(--tma-on-dark-top);
  font-size: var(--tma-fs-small);
}
.tma-topbar__inner {
  max-width: var(--tma-maxw);
  margin: 0 auto;
  padding: 9px var(--tma-pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.tma-topbar__left { display: flex; align-items: center; gap: 10px; letter-spacing: .02em; }
.tma-topbar__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--tma-success);
  box-shadow: 0 0 0 3px rgba(59,191,106,.18);
  flex: none;
}
.tma-topbar__right { display: flex; align-items: center; gap: 22px; }
.tma-lang b { color: var(--tma-white); }
.tma-lang a { color: var(--tma-on-dark-top); }

/* Липка обгортка (top bar + header + панель пошуку) */
.tma-headwrap {
  position: sticky;
  top: 0;
  z-index: 50;
}
.tma-header {
  position: relative;
  background: var(--tma-white);
  border-bottom: 1px solid var(--tma-border);
}
.tma-header__inner {
  max-width: var(--tma-maxw);
  margin: 0 auto;
  padding: 12px var(--tma-pad-x);
  display: flex;
  align-items: center;
  gap: 18px;
}
/* Бургер (тільки мобільний) */
.tma-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  flex: none;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 8px;
}
.tma-burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--tma-ink);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
html.is-menu .tma-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
html.is-menu .tma-burger span:nth-child(2) { opacity: 0; }
html.is-menu .tma-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Лого-картинка */
.tma-header__logo { flex: none; display: block; line-height: 0; }
.tma-header__logo img { height: 46px; width: auto; display: block; }

.tma-header__nav { display: flex; gap: 15px; }
.tma-header__nav a {
  font-family: var(--tma-font);
  font-weight: var(--tma-w-semibold);
  font-size: 13.5px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #2a251d;
  white-space: nowrap;
}
.tma-header__nav a:hover { color: var(--tma-red); }

.tma-header__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Іконка-кнопка (пошук) */
.tma-iconbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: 0;
  background: none;
  color: var(--tma-ink);
  cursor: pointer;
  transition: color .18s ease;
}
.tma-iconbtn:hover { color: var(--tma-red); }
/* лупа -> × коли пошук відкритий (та сама кнопка закриває) */
.tma-iconbtn__close { display: none; }
html.is-searching .tma-iconbtn { color: var(--tma-red); }
html.is-searching .tma-iconbtn__search { display: none; }
html.is-searching .tma-iconbtn__close { display: block; }

/* Панель пошуку: виїжджає З-ПІД шапки вниз (max-height + fade), плавно.
   Не накриває шапку - сидить під нею (top:100% від .tma-header). */
.tma-searchpanel {
  position: absolute;
  top: calc(100% + 10px);   /* зазор від шапки: крізь нього видно затемнення */
  left: 12px; right: 12px;  /* трохи вужче за шапку - вигляд окремої панелі */
  background: var(--tma-white);
  border-top: 3px solid var(--tma-red);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 22px 44px rgba(20,18,16,.22);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .34s cubic-bezier(.22,.61,.36,1), opacity .26s ease;
  z-index: 5;
}
html.is-searching .tma-searchpanel {
  max-height: 78vh;
  opacity: 1;
}
.tma-searchpanel__inner {
  max-width: var(--tma-maxw);
  margin: 0 auto;
  padding: 16px var(--tma-pad-x) 20px;
}
/* Явна кнопка "Закрити" внизу панелі, праворуч (додатково до × у шапці) */
.tma-searchpanel__foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}
.tma-searchpanel__closebtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--tma-border-field);
  background: var(--tma-white);
  border-radius: var(--tma-r-btn);
  padding: 7px 14px;
  font-family: var(--tma-font);
  font-weight: var(--tma-w-semibold);
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tma-text-2);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.tma-searchpanel__closebtn span { font-size: 15px; line-height: 1; }
.tma-searchpanel__closebtn:hover {
  border-color: var(--tma-red);
  color: var(--tma-red);
}
.tma-searchpanel__form {
  display: flex;
  align-items: center;
  gap: 14px;
}
.tma-searchpanel__icon { color: var(--tma-text-muted); flex: none; }
.tma-searchpanel__input {
  flex: 1;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid var(--tma-border-field);
  background: none;
  padding: 11px 4px;
  font-family: var(--tma-font);
  font-size: 19px;
  color: var(--tma-text);
  outline: none;
}
.tma-searchpanel__input:focus { border-bottom-color: var(--tma-red); }

/* Живі результати пошуку */
.tma-searchpanel__results {
  margin-top: 6px;
  max-height: calc(78vh - 96px);
  overflow-y: auto;
}
.tma-searchpanel__results:empty { display: none; }
.tma-sr {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 8px;
  border-radius: var(--tma-r-btn);
  transition: background .15s ease;
}
.tma-sr:hover { background: var(--tma-paper); }
.tma-sr__img {
  width: 46px; height: 46px;
  flex: none;
  object-fit: cover;
  border-radius: var(--tma-r-btn);
  background: #efeae1;
}
.tma-sr__name {
  flex: 1;
  min-width: 0;
  font-family: var(--tma-font);
  font-weight: var(--tma-w-semibold);
  font-size: 15px;
  color: var(--tma-text);
  line-height: 1.3;
}
.tma-sr__price {
  flex: none;
  font-family: var(--tma-font);
  font-weight: var(--tma-w-bold);
  font-size: 15px;
  color: var(--tma-text);
  white-space: nowrap;
}
.tma-sr__msg {
  padding: 16px 8px;
  font-size: 15px;
  color: var(--tma-text-2);
}
.tma-sr__all {
  display: block;
  margin-top: 6px;
  padding: 12px 8px;
  border-top: 1px solid var(--tma-border);
  font-family: var(--tma-font);
  font-weight: var(--tma-w-semibold);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--tma-red);
}
.tma-searchpanel__close {
  flex: none;
  width: 40px; height: 40px;
  border: 0;
  background: none;
  font-size: 28px;
  line-height: 1;
  color: var(--tma-text-2);
  cursor: pointer;
}
.tma-searchpanel__close:hover { color: var(--tma-red); }

/* Затемнення сторінки під панеллю */
.tma-searchbackdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(20,18,16,.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s;
}
html.is-searching .tma-searchbackdrop,
html.is-menu .tma-searchbackdrop {
  opacity: 1;
  visibility: visible;
}

/* Мобільне меню - виїжджає з-під шапки (як панель пошуку) */
.tma-mobmenu {
  position: absolute;
  top: calc(100% + 10px);
  left: 12px; right: 12px;
  background: var(--tma-white);
  border-top: 3px solid var(--tma-red);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 22px 44px rgba(20,18,16,.22);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .34s cubic-bezier(.22,.61,.36,1), opacity .26s ease;
  z-index: 5;
  padding: 0 20px;
}
html.is-menu .tma-mobmenu { max-height: 80vh; opacity: 1; padding: 8px 20px; }
.tma-mobmenu > a {
  display: block;
  padding: 14px 4px;
  border-bottom: 1px solid var(--tma-border);
  font-family: var(--tma-font);
  font-weight: var(--tma-w-semibold);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--tma-text);
}
.tma-mobmenu > a:hover { color: var(--tma-red); }
.tma-mobmenu__phones {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 4px 18px;
}
.tma-mobmenu__phones a {
  font-family: var(--tma-font);
  font-weight: var(--tma-w-bold);
  font-size: 18px;
  color: var(--tma-ink);
}

.tma-header__phone {
  font-family: var(--tma-font);
  font-weight: var(--tma-w-bold);
  font-size: 17px;
  letter-spacing: .01em;
  color: var(--tma-ink);
  white-space: nowrap;
}

/* Корзина */
.tma-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tma-ink);
  transition: color .18s ease;
}
.tma-cart:hover { color: var(--tma-red); }

/* Кошик у шапці лишаємо тільки в магазинній частині сайту (каталог, категорія,
   товар, кошик, оформлення, кабінет). Клас tma-shop-area ставить
   woodmart-child/functions.php. Поза магазином іконка зайва: продаж іде
   через заявку, а не через кошик. */
.tma-cart { display: none; }
body.tma-shop-area .tma-cart { display: flex; }

/* ---- Дропдаун телефонів (головний + решта на hover/focus) ---- */
.tma-phones { position: relative; display: flex; align-items: center; outline: none; }
.tma-phones__main { display: inline-flex; align-items: center; gap: 7px; }
.tma-phones__caret {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--tma-text-muted);
  transition: transform .18s ease, border-top-color .18s ease;
}
.tma-phones:hover .tma-phones__caret,
.tma-phones:focus-within .tma-phones__caret {
  transform: rotate(180deg);
  border-top-color: var(--tma-red);
}
.tma-phones__menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 10px;
  min-width: 190px;
  background: var(--tma-white);
  border: 1px solid var(--tma-border);
  border-radius: var(--tma-r-card);
  box-shadow: 0 14px 30px rgba(20,18,16,.14);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 60;
}
.tma-phones__menu::before {
  content: "";
  position: absolute;
  top: -10px; left: 0; right: 0;
  height: 10px;
}
.tma-phones:hover .tma-phones__menu,
.tma-phones:focus-within .tma-phones__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.tma-phones__menu a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--tma-r-btn);
  font-family: var(--tma-font);
  font-weight: var(--tma-w-semibold);
  font-size: 15px;
  color: var(--tma-text);
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.tma-phones__menu a:hover { background: var(--tma-paper); color: var(--tma-red); }

/* ---- Адаптив ---- */
@media (max-width: 1180px) {
  .tma-header__nav { gap: 14px; }
}
@media (max-width: 1024px) {
  .tma-header__nav { display: none; }
  .tma-burger { display: flex; }
}
@media (max-width: 900px) {
  .tma-topbar__inner, .tma-header__inner { padding-left: var(--tma-pad-x-tab); padding-right: var(--tma-pad-x-tab); }
}
@media (max-width: 600px) {
  .tma-topbar__inner, .tma-header__inner { padding-left: var(--tma-pad-x-mob); padding-right: var(--tma-pad-x-mob); }
  .tma-header__logo img { height: 38px; }
  .tma-header__phone { display: none; }
  .tma-phones { display: none; }
  /* "Замовити" зайва на мобільному (це просто дзвінок; телефони є в меню) */
  .tma-header__right > .tma-btn { display: none; }
  /* корзину прибираємо з шапки - переїде в нижнє липке меню */
  body .tma-cart, body.tma-shop-area .tma-cart { display: none; }

  /* лого по центру: бургер зліва, пошук справа, лого абсолютно по центру */
  .tma-header__inner { position: relative; justify-content: space-between; gap: 12px; }
  .tma-header__logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  /* email прибираємо, щоб перемикач мов вмістився в один рядок */
  .tma-topbar__right a[href^="mailto"] { display: none; }
  .tma-lang { white-space: nowrap; }

  /* верхня смужка: осмислений перенос (кожна фраза - свій рядок) */
  .tma-topbar__left { align-items: flex-start; }
  .tma-topbar__dot { margin-top: 4px; }
  .tma-topbar__ph { display: block; }
  .tma-topbar__sep { display: none; }
}

/* ========== СЕКЦІЇ ГОЛОВНОЇ СТОРІНКИ ========== */

/* ===== Секція головної: hero ===== */
/* ============================================================
   HERO - стилі секції (Фаза 3). Спирається на tokens.css/atoms.css.
   ============================================================ */
.tma-hero {
  position: relative;
  color: var(--tma-on-dark);
  overflow: hidden;
  /* багатий темний фон: глибокий градієнт + червоне сяйво за карткою */
  background:
    radial-gradient(105% 85% at 82% 16%, rgba(216,31,42,.20), transparent 58%),
    radial-gradient(85% 95% at 12% 102%, rgba(255,255,255,.05), transparent 55%),
    linear-gradient(158deg, #1b1610 0%, #100e0b 56%, #0a0908 100%);
  /* віньєтка по краях (за контентом) */
  box-shadow: inset 0 0 190px 24px rgba(0,0,0,.5);
}
/* текстурний шар: тонка сітка + зерно, приглушені в центрі (за текстом) */
.tma-hero__lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E"),
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 160px 160px, 66px 66px, 66px 66px;
  opacity: .5;
  -webkit-mask-image: radial-gradient(130% 110% at 50% 42%, transparent 10%, #000 78%);
  mask-image: radial-gradient(130% 110% at 50% 42%, transparent 10%, #000 78%);
}
.tma-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--tma-maxw);
  margin: 0 auto;
  padding: var(--tma-sec-y) var(--tma-pad-x) 84px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  grid-template-areas: "text media" "stats media";
  column-gap: var(--tma-gap-grid);
  row-gap: 0;
  align-items: start;
}

/* десктоп: hero на весь екран мінус шапка (topbar+header ≈ 104px), контент по центру */
@media (min-width: 901px) {
  .tma-hero { display: flex; align-items: center; min-height: calc(100vh - 104px); }
  .tma-hero__inner { width: 100%; }
}
.tma-hero__text  { grid-area: text; }
.tma-hero__media { grid-area: media; align-self: center; }
.tma-hero__stats { grid-area: stats; align-self: start; }

/* eyebrow у рамці має відступ знизу */
.tma-hero .tma-eyebrow--boxed { margin-bottom: 26px; }

.tma-hero__title { margin-bottom: 22px; }
.tma-hero__title-soft   { font-weight: var(--tma-w-medium); color: var(--tma-on-dark-3); }
.tma-hero__title-accent { color: var(--tma-red); }

.tma-hero__lead {
  font-size: var(--tma-fs-lead);
  line-height: var(--tma-lh-body);
  color: var(--tma-on-dark-3);
  max-width: 460px;
  margin-bottom: 34px;
}
.tma-hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

/* Ряд статистики */
.tma-hero__stats {
  display: flex;
  gap: 34px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 26px;
}
.tma-hero__stat-num {
  display: block;
  font-family: var(--tma-font);
  font-weight: var(--tma-w-bold);
  font-size: 34px;
  color: var(--tma-white);
  line-height: 1;
}
.tma-hero__stat-num--red { color: var(--tma-red); }
.tma-hero__stat-label {
  display: block;
  margin-top: 6px;
  font-size: var(--tma-fs-small);
  color: var(--tma-text-muted);
  letter-spacing: .02em;
}

/* ---- Права колонка: стек карток ---- */
.tma-hero__stack { position: relative; padding: 14px 6px 0; }

.tma-hero__ghost {
  position: absolute;
  border-radius: var(--tma-r-hero);
  background: var(--tma-stripe);
}
.tma-hero__ghost--a {
  top: 34px; left: 5%; right: 15%; bottom: 78px;
  border: 1px solid rgba(255,255,255,.06);
  transform: rotate(-6.5deg);
  opacity: .5;
}
.tma-hero__ghost--b {
  top: 24px; left: 15%; right: 5%; bottom: 70px;
  border: 1px solid rgba(255,255,255,.09);
  transform: rotate(4.5deg);
  opacity: .75;
}
.tma-hero__cat {
  position: absolute;
  top: 0; left: -10px;
  z-index: 6;
  font-family: var(--tma-font);
  font-weight: var(--tma-w-bold);
  font-size: var(--tma-fs-ui);
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--tma-red);
  color: var(--tma-white);
  padding: 8px 15px;
  border-radius: var(--tma-r-btn);
}
.tma-hero__card {
  position: relative;
  z-index: 4;
  border-radius: var(--tma-r-hero);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: var(--tma-ink-deep);
  box-shadow: var(--tma-shadow-hero);
}
.tma-hero__photo {
  aspect-ratio: 16 / 11;
  background: var(--tma-stripe);
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
}
.tma-hero__photo-cap {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  letter-spacing: .06em;
  color: #6b6459;
  text-transform: uppercase;
}
/* коли підставлено реальне фото - ховаємо підпис-плейсхолдер */
.tma-hero__photo[style*="background-image"] .tma-hero__photo-cap { display: none; }

.tma-hero__panel {
  background: var(--tma-ink-card);
  padding: 15px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.tma-hero__name {
  font-family: var(--tma-font);
  font-weight: var(--tma-w-semibold);
  font-size: 19px;
  color: var(--tma-white);
  line-height: 1.1;
}
.tma-hero__meta { font-size: 12.5px; color: var(--tma-text-muted); }
.tma-hero__num {
  font-family: var(--tma-font);
  font-weight: var(--tma-w-bold);
  font-size: var(--tma-fs-small);
  letter-spacing: .06em;
  color: var(--tma-red);
  white-space: nowrap;
}

.tma-hero__dots {
  display: flex;
  gap: 9px;
  justify-content: center;
  margin-top: 22px;
  position: relative;
  z-index: 6;
}
.tma-hero__dot {
  width: 9px; height: 9px;
  border: 0;
  padding: 0;
  border-radius: 50px;
  background: rgba(255,255,255,.28);
  cursor: pointer;
  transition: all .25s ease;
}
.tma-hero__dot--active { width: 26px; background: var(--tma-red); }

/* ---- Адаптив ---- */
@media (max-width: 900px) {
  .tma-hero__inner {
    grid-template-columns: 1fr;
    grid-template-areas: "text" "media" "stats";  /* слайдер одразу після тексту, статистика внизу */
    column-gap: 0;
    row-gap: 30px;
    padding: 40px var(--tma-pad-x-tab) 44px;
  }
  .tma-hero__media { align-self: stretch; }
  .tma-hero__actions { margin-bottom: 0; }   /* відступ дає row-gap */
  .tma-hero__title { font-size: 34px; }
}
@media (max-width: 600px) {
  .tma-hero__inner { padding-left: var(--tma-pad-x-mob); padding-right: var(--tma-pad-x-mob); }
  .tma-hero__title { font-size: 29px; }

  /* контент по центру */
  .tma-hero__text { text-align: center; }
  .tma-hero__lead { margin-left: auto; margin-right: auto; }

  /* кнопки на всю ширину, однакові */
  .tma-hero__actions { flex-direction: column; align-items: stretch; }
  .tma-hero__actions .tma-btn { width: 100%; }

  /* статистика - 3 в ряд */
  .tma-hero__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    text-align: center;
  }
  .tma-hero__stat-num { font-size: 24px; }
  .tma-hero__stat-label { font-size: 11px; line-height: 1.3; }
}

/* ===== Секція головної: trust ===== */
/* ============================================================
   Смуга переваг (Trust strip) - стилі. Спирається на tokens/atoms.
   4 білі комірки, розділені тонкими лініями (gap 1px на фоні межі).
   ============================================================ */
.tma-trust {
  max-width: var(--tma-maxw);
  margin: 0 auto;
  padding: 64px var(--tma-pad-x) 20px;
}
.tma-trust__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--tma-border);
  border: 1px solid var(--tma-border);
  border-radius: var(--tma-r-card);
  overflow: hidden;
}
.tma-trust__cell {
  background: var(--tma-white);
  padding: 30px 26px;
}
.tma-trust__cell .tma-tag { display: block; margin-bottom: 12px; }
.tma-trust__title {
  font-family: var(--tma-font);
  font-weight: var(--tma-w-semibold);
  font-size: 20px;
  margin-bottom: 9px;
  color: var(--tma-text);
}
.tma-trust__text {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--tma-text-2);
}

/* ---- Адаптив ---- */
@media (max-width: 900px) {
  .tma-trust { padding-left: var(--tma-pad-x-tab); padding-right: var(--tma-pad-x-tab); }
  .tma-trust__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .tma-trust { padding-left: var(--tma-pad-x-mob); padding-right: var(--tma-pad-x-mob); }
  .tma-trust__grid { grid-template-columns: 1fr; }
  .tma-trust__cell { text-align: center; }
}

/* ===== Секція головної: categories ===== */
/* ============================================================
   Категорії техніки - стилі (Фаза 3). Спирається на tokens/atoms.
   Також дає багаторазові .tma-section і .tma-sechead (шапка секції).
   ============================================================ */

/* ---- Багаторазова обгортка світлої секції ---- */
.tma-section {
  padding: var(--tma-sec-y-sm) 0;
}
.tma-section__inner {
  max-width: var(--tma-maxw);
  margin: 0 auto;
  padding: 0 var(--tma-pad-x);
}

/* ---- Багаторазова шапка секції: eyebrow + H2 ліворуч, лінк праворуч ---- */
.tma-sechead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}
.tma-sechead__title { margin-top: 10px; }

/* ---- Сітка категорій ---- */
.tma-cats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tma-gap-card);
}
.tma-cat {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  border-radius: var(--tma-r-card);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: var(--tma-ink-panel);
  transition: transform .2s ease;
}
.tma-cat::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tma-cat-overlay);
}
/* Тільки для пристроїв зі СПРАВЖНІМ наведенням. На тачскріні браузер
   імітує hover при натисканні й утриманні - картка "залипала" піднятою. */
@media (hover: hover) {
  .tma-cat:hover { transform: translateY(-3px); }
}

.tma-cat__foot {
  position: absolute;
  z-index: 2;
  left: 0; right: 0; bottom: 0;
  padding: 18px 18px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.tma-cat__name {
  font-family: var(--tma-font);
  font-weight: var(--tma-w-semibold);
  font-size: 22px;
  text-transform: uppercase;
  color: var(--tma-white);
  line-height: 1.1;
}

/* ---- Адаптив ---- */
@media (max-width: 900px) {
  .tma-section__inner { padding-left: var(--tma-pad-x-tab); padding-right: var(--tma-pad-x-tab); }
  .tma-cats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .tma-section__inner { padding-left: var(--tma-pad-x-mob); padding-right: var(--tma-pad-x-mob); }
  .tma-cats { grid-template-columns: 1fr; }
  .tma-sechead { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
}

/* ===== Секція головної: tech ===== */
/* ============================================================
   Модельний ряд - стилі (Фаза 3). Спирається на tokens/atoms.
   Вкладки + сітка товарних карток.
   ============================================================ */

/* ---- Перемикач вкладок ---- */
.tma-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}
.tma-tab {
  font-family: var(--tma-font);
  font-weight: var(--tma-w-semibold);
  font-size: 13.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 11px 22px;
  border-radius: var(--tma-r-btn);
  background: var(--tma-white);
  color: var(--tma-text-2);
  border: 1px solid var(--tma-border-field);
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
@media (hover: hover) {
  .tma-tab:hover { border-color: var(--tma-red); color: var(--tma-red); }
}
.tma-tab--active {
  background: var(--tma-red);
  color: var(--tma-white);
  border-color: var(--tma-red);
}
.tma-tab--active:hover { color: var(--tma-white); }

/* ---- Панелі ---- */
/* Перемикання вкладок робимо плавним: у вкладках різна кількість машин
   (5 / 2 / 5 / 3), тому при миттєвій підміні висота секції стрибала і
   здавалось, ніби картки змінюють розмір. Висоту веде JS, тут - перехід. */
.tma-panels {
  transition: height .32s cubic-bezier(.4, 0, .2, 1);
}

.tma-panels.is-switching {
  overflow: hidden;
}

.tma-panel { display: none; }

.tma-panel--active {
  display: block;
  animation: tma-panel-in .32s cubic-bezier(.4, 0, .2, 1) both;
}

@keyframes tma-panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Повага до системного налаштування "менше руху". */
@media (prefers-reduced-motion: reduce) {
  .tma-panels { transition: none; }
  .tma-panel--active { animation: none; }
}

/* ---- Сітка карток ---- */
.tma-prods {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tma-gap-card);
}
.tma-prod {
  display: flex;
  flex-direction: column;
  background: var(--tma-white);
  border: 1px solid var(--tma-border);
  border-radius: var(--tma-r-card);
  overflow: hidden;
  transition: border-color .18s ease, transform .18s ease;
}
/* Тільки для справжнього наведення - див. коментар у categories.css. */
@media (hover: hover) {
  .tma-prod:hover { border-color: var(--tma-red); transform: translateY(-3px); }
}

.tma-prod__img {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: #efeae1;
}
.tma-prod__body {
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.tma-prod__name {
  font-family: var(--tma-font);
  font-weight: var(--tma-w-semibold);
  font-size: 17px;
  line-height: 1.25;
  color: var(--tma-text);
}
.tma-prod__foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--tma-border-soft);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.tma-prod__price-label {
  display: block;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tma-text-muted);
  margin-bottom: 3px;
}
.tma-prod__price {
  font-family: var(--tma-font);
  font-weight: var(--tma-w-bold);
  font-size: 18px;
  color: var(--tma-text);
}
.tma-prod__more {
  font-family: var(--tma-font);
  font-weight: var(--tma-w-semibold);
  font-size: 13.5px;
  color: var(--tma-red);
  white-space: nowrap;
}

/* ---- Адаптив ---- */
@media (max-width: 900px) {
  .tma-prods { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .tma-prods { grid-template-columns: 1fr; }
  /* вкладки - 4 однакові кнопки 2x2 на всю ширину (а не россыпом) */
  .tma-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .tma-tab { text-align: center; padding: 13px 8px; }
}

/* ===== Секція головної: production ===== */
/* ============================================================
   Власне виробництво - стилі (Фаза 3). Темна секція.
   Спирається на tokens/atoms.
   ============================================================ */
.tma-prod-sec {
  background: var(--tma-ink);
  color: var(--tma-on-dark-2);
}
.tma-prod-sec__inner {
  max-width: var(--tma-maxw);
  margin: 0 auto;
  padding: var(--tma-sec-y) var(--tma-pad-x);
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: var(--tma-gap-grid);
  align-items: center;
}

.tma-prod-sec .tma-eyebrow { color: var(--tma-red-soft); }
.tma-prod-sec__title {
  margin: 12px 0 20px;
  color: var(--tma-white);
  font-weight: var(--tma-w-bold);
  font-size: var(--tma-fs-h2-lg);
}
.tma-prod-sec__text {
  font-size: var(--tma-fs-body);
  line-height: var(--tma-lh-body);
  color: var(--tma-on-dark-4);
  max-width: 460px;
}

/* 2x2 сітка характеристик */
.tma-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.tma-spec {
  background: var(--tma-ink-panel);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--tma-r-card);
  padding: 24px 22px;
}
.tma-spec__val {
  font-family: var(--tma-font);
  font-weight: var(--tma-w-bold);
  font-size: 30px;
  color: var(--tma-white);
  line-height: 1;
  margin-bottom: 10px;
}
.tma-spec__label {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--tma-text-muted);
}

/* ---- Адаптив ---- */
@media (max-width: 900px) {
  .tma-prod-sec__inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 48px var(--tma-pad-x-tab);
  }
  .tma-prod-sec__title { font-size: 30px; }
}
@media (max-width: 600px) {
  .tma-prod-sec__inner { padding-left: var(--tma-pad-x-mob); padding-right: var(--tma-pad-x-mob); }
  .tma-specs { grid-template-columns: 1fr; }
  .tma-prod-sec__title { font-size: 26px; }
  /* по центру на мобільному (як hero) */
  .tma-prod-sec__lead { text-align: center; }
  .tma-prod-sec__text { margin-left: auto; margin-right: auto; }
  .tma-spec { text-align: center; }
}

/* ===== Секція головної: gov ===== */
/* ============================================================
   Держпрограма -25% - стилі (Фаза 3). Червона секція.
   ============================================================ */
/* приглушений глибокий червоний замість неонового - менш агресивно для ока */
.tma-gov { background: var(--tma-red-deep); color: var(--tma-white); }
.tma-gov__inner {
  max-width: var(--tma-maxw);
  margin: 0 auto;
  padding: var(--tma-sec-y-sm) var(--tma-pad-x);
  text-align: center;
}
.tma-gov__eyebrow {
  display: inline-block;
  font-family: var(--tma-font);
  font-weight: var(--tma-w-semibold);
  font-size: var(--tma-fs-eyebrow);
  letter-spacing: var(--tma-ls-eyebrow);
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  margin-bottom: 14px;
}
.tma-gov__title {
  font-family: var(--tma-font);
  font-weight: var(--tma-w-bold);
  font-size: var(--tma-fs-h2-sm);
  line-height: 1.1;
  text-transform: uppercase;
  max-width: 720px;
  margin: 0 auto 16px;
}
.tma-gov__text {
  font-size: var(--tma-fs-body);
  line-height: var(--tma-lh-body);
  color: rgba(255,255,255,.9);
  max-width: 620px;
  margin: 0 auto 28px;
}
.tma-gov__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .tma-gov__inner { padding-left: var(--tma-pad-x-tab); padding-right: var(--tma-pad-x-tab); }
}
@media (max-width: 600px) {
  .tma-gov__inner { padding-left: var(--tma-pad-x-mob); padding-right: var(--tma-pad-x-mob); }
  .tma-gov__title { font-size: 26px; }
}

/* ===== Секція головної: accordion ===== */
/* ============================================================
   SEO-акордеон - стилі (Фаза 3). Спирається на tokens/atoms.
   Текст завжди в DOM; згортання через max-height + opacity.
   ============================================================ */
.tma-acc-head { margin-bottom: 28px; }
.tma-acc-head .tma-h2 { margin: 10px 0 8px; }
.tma-acc-sub {
  font-size: var(--tma-fs-body);
  color: var(--tma-text-2);
}

.tma-acc {
  border-top: 1px solid var(--tma-border);
  max-width: 860px;
}
.tma-acc__item { border-bottom: 1px solid var(--tma-border); }

.tma-acc__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 4px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.tma-acc__title {
  font-family: var(--tma-font);
  font-weight: var(--tma-w-semibold);
  font-size: 23px;
  text-transform: uppercase;
  color: var(--tma-text);
  transition: color .18s ease;
}
.tma-acc__head:hover .tma-acc__title { color: var(--tma-red); }

/* кругла кнопка-індикатор +/- */
.tma-acc__icon {
  position: relative;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--tma-border-field-2);
  background: var(--tma-white);
  transition: background .18s ease, border-color .18s ease;
}
.tma-acc__icon::before,
.tma-acc__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 2px;
  background: var(--tma-red);
  transform: translate(-50%, -50%);
  transition: opacity .18s ease, background .18s ease;
}
.tma-acc__icon::after { transform: translate(-50%, -50%) rotate(90deg); }

/* відкритий: червоне коло, білий мінус */
.tma-acc__item--open .tma-acc__icon {
  background: var(--tma-red);
  border-color: var(--tma-red);
}
.tma-acc__item--open .tma-acc__icon::before { background: var(--tma-white); }
.tma-acc__item--open .tma-acc__icon::after { opacity: 0; }

/* тіло, що згортається */
.tma-acc__body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .45s ease, opacity .3s ease;
}
/* no-JS / прев'ю fallback: відкритий блок видно й без скрипта.
   JS перебиває inline-стилем із точною висотою для плавної анімації. */
.tma-acc__item--open .tma-acc__body { opacity: 1; max-height: 2000px; }

.tma-acc__inner { padding: 2px 4px 26px; max-width: 660px; }
.tma-acc__inner p {
  font-size: 15px;
  line-height: var(--tma-lh-relaxed);
  color: var(--tma-text-2);
  margin-bottom: 12px;
}
.tma-acc__inner p:last-child { margin-bottom: 0; }

/* білий бокс характеристик з червоним "дефісом" */
.tma-acc__list {
  list-style: none;
  margin: 16px 0 0;
  padding: 16px 18px;
  background: var(--tma-white);
  border: 1px solid var(--tma-border);
  border-radius: var(--tma-r-card);
}
.tma-acc__list li {
  position: relative;
  padding-left: 20px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--tma-text);
}
.tma-acc__list li + li { margin-top: 8px; }
.tma-acc__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 10px;
  height: 2px;
  background: var(--tma-red);
}

/* ---- Адаптив ---- */
@media (max-width: 600px) {
  .tma-acc__title { font-size: 19px; }
  /* шапку секції по центру; сам SEO-текст лишаємо зліва (читабельність) */
  .tma-acc-head { text-align: center; }
}

/* ===== Секція головної: contacts ===== */
/* ============================================================
   Контакти + форма - стилі (Фаза 3). Спирається на tokens/atoms.
   ============================================================ */
.tma-contacts__inner {
  max-width: var(--tma-maxw);
  margin: 0 auto;
  padding: var(--tma-sec-y) var(--tma-pad-x);
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: var(--tma-gap-grid);
}

.tma-contacts__sub {
  font-size: var(--tma-fs-body);
  line-height: var(--tma-lh-body);
  color: var(--tma-text-2);
  margin: 14px 0 26px;
  max-width: 420px;
}
.tma-contacts__list { list-style: none; }
.tma-contacts__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 0;
  border-top: 1px solid var(--tma-border);
}
.tma-contacts__label {
  font-size: var(--tma-fs-small);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tma-text-muted);
}
.tma-contacts__val {
  font-family: var(--tma-font);
  font-weight: var(--tma-w-semibold);
  font-size: 18px;
  color: var(--tma-text);
}
.tma-contacts__val:hover { color: var(--tma-red); }

/* ---- Картка форми ---- */
.tma-form {
  background: var(--tma-white);
  border: 1px solid var(--tma-border);
  border-radius: var(--tma-r-card);
  padding: 34px;
}
.tma-form__title {
  font-family: var(--tma-font);
  font-weight: var(--tma-w-bold);
  font-size: 24px;
  text-transform: uppercase;
  color: var(--tma-text);
}
.tma-form__desc {
  font-size: var(--tma-fs-body-sm);
  color: var(--tma-text-2);
  margin: 8px 0 22px;
}
.tma-field { display: block; margin-bottom: 16px; }
.tma-field__label {
  display: block;
  font-size: var(--tma-fs-small);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--tma-text-2);
  margin-bottom: 7px;
}
.tma-field__req { color: var(--tma-red); }
.tma-field__input {
  width: 100%;
  font-family: var(--tma-font);
  font-size: var(--tma-fs-body);
  color: var(--tma-text);
  background: var(--tma-paper);
  border: 1px solid var(--tma-border-field);
  border-radius: var(--tma-r-btn);
  padding: 12px 14px;
  transition: border-color .18s ease, background .18s ease;
}
.tma-field__input:focus {
  outline: none;
  border-color: var(--tma-red);
  background: var(--tma-white);
}
.tma-field__textarea { resize: vertical; min-height: 76px; }
.tma-form .tma-btn--block { margin-top: 6px; }
.tma-form__note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--tma-text-muted);
  margin-top: 12px;
  text-align: center;
}

/* ---- Адаптив ---- */
@media (max-width: 900px) {
  .tma-contacts__inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 48px var(--tma-pad-x-tab);
  }
}
@media (max-width: 600px) {
  .tma-contacts__inner { padding-left: var(--tma-pad-x-mob); padding-right: var(--tma-pad-x-mob); }
  .tma-form { padding: 24px 20px; }
  /* по центру на мобільному */
  .tma-contacts__left { text-align: center; }
  .tma-contacts__sub { margin-left: auto; margin-right: auto; }
  .tma-contacts__list li { flex-direction: column; align-items: center; gap: 3px; }
  .tma-form__title, .tma-form__desc { text-align: center; }
}

/* ===== Футер (оновлено: підпис студії) ===== */
/* ============================================================
   Футер - стилі (Фаза 3). Темна секція.
   ============================================================ */
.tma-footer { background: var(--tma-ink); color: var(--tma-on-dark-4); }
.tma-footer__inner {
  max-width: var(--tma-maxw);
  margin: 0 auto;
  padding: 56px var(--tma-pad-x) 24px;
}
.tma-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 40px;
}
.tma-footer__logo {
  display: block;
  height: 50px;
  width: auto;
  margin-bottom: 16px;
}
.tma-footer__desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--tma-text-muted);
  max-width: 360px;
}
.tma-footer__head {
  font-family: var(--tma-font);
  font-weight: var(--tma-w-semibold);
  font-size: var(--tma-fs-small);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tma-white);
  margin-bottom: 16px;
}
.tma-footer__links { list-style: none; }
.tma-footer__links li { margin-bottom: 11px; }
.tma-footer__links a {
  font-size: 14.5px;
  color: var(--tma-on-dark-4);
  transition: color .18s ease;
}
.tma-footer__links a:hover { color: var(--tma-white); }

.tma-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: 13px;
  color: var(--tma-text-muted);
}

/* ---- Адаптив ---- */
@media (max-width: 900px) {
  .tma-footer__inner { padding-left: var(--tma-pad-x-tab); padding-right: var(--tma-pad-x-tab); }
  .tma-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 600px) {
  .tma-footer__inner { padding-left: var(--tma-pad-x-mob); padding-right: var(--tma-pad-x-mob); }
  .tma-footer__grid { grid-template-columns: 1fr; text-align: center; }
  .tma-footer__brand { display: flex; flex-direction: column; align-items: center; }
  .tma-footer__desc { margin-left: auto; margin-right: auto; }
  .tma-footer__bottom { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
}

/* Підпис розробника. Перенесений із блоку копірайтів теми: там він
   дублював наш рядок про права. Посилання те саме - t.me/milspil. */
.tma-footer__dev a {
  color: var(--tma-on-dark-3);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  transition: color .18s ease, border-color .18s ease;
}

@media (hover: hover) {
  .tma-footer__dev a:hover {
    color: var(--tma-white);
    border-color: rgba(255, 255, 255, .5);
  }
}

/* --- Продакшн-накладка: наш хедер усередині хедера Woodmart --- */

/* Липкість робить тема (whb-sticky) - наш sticky вимикаємо.
   У продакшн-розкладці обгортки .tma-headwrap немає (топбар і шапка
   лежать в окремих рядах теми), правило тримаємо для прев'ю-версії. */
.whb-header .tma-headwrap { position: static; z-index: auto; }

/* Фон смуг малює РЯД теми (він на всю ширину екрана), тому наші
   власні фони робимо прозорими - інакше вийде "плаваюча картка"
   завширшки з контейнер. Вміст центрує наш .tma-*__inner. */
.whb-header_tma .tma-topbar,
.whb-header_tma .tma-header {
  background: transparent;
  border-bottom: 0;
}

/* Прибираємо подвійні відступи обгортки теми навколо нашого блока. */
.whb-header_tma .wd-header-text {
  padding-left: 0;
  padding-right: 0;
}

/* Темна смуга: ряд теми віддає свій #212121, нам потрібен наш токен.
   Селектор навмисно з .whb-row: правило теми .whb-color-light має таку
   саму вагу, як просте .whb-header_tma .whb-top-bar, і вантажиться
   пізніше - тобто перемагало б при рівній вазі. Третій клас знімає
   залежність від порядку підключення файлів. */
.whb-header_tma .whb-row.whb-top-bar {
  background-color: #141210;
}

/* Woodmart тримає ДВІ окремі шапки: колонки 5/8 під десктоп
   (whb-visible-lg) і колонки mobile1/mobile2 під телефон (whb-hidden-lg).
   Справжнім мобільним пристроям він десктопні колонки взагалі НЕ віддає -
   це рішення приймається на сервері, а не через CSS. Тому наш HTML має
   лежати в обох парах колонок; показом керує сама тема.

   Раніше тут стояв примусовий `display: flex` на колонках 5/8, щоб шапка
   з'являлась на вузькому екрані. З ним на вузькому десктопі показувались
   би ОБИДВІ шапки одразу, тому його прибрано.

   flex:1 1 100% лишається: колонка - флекс-контейнер, і без нього наш
   блок стискається до ширини вмісту (шапка виходила 124px замість повної).

   Селектор навмисно з трьох класів: у теми є правило
   `.whb-general-header :is(.whb-mobile-left, .whb-mobile-right){flex:1 1 0%}`
   тієї самої ваги, і воно вантажиться пізніше - на телефоні наша колонка
   отримувала 183px замість 345px, і шапка збивалась ліворуч. */
.whb-header_tma .whb-row .whb-column5,
.whb-header_tma .whb-row .whb-column8,
.whb-header_tma .whb-row .whb-column_mobile1,
.whb-header_tma .whb-row .whb-column_mobile2 {
  flex: 1 1 100%;
}

.whb-header_tma .whb-row .whb-column5 > .wd-header-text,
.whb-header_tma .whb-row .whb-column8 > .wd-header-text,
.whb-header_tma .whb-row .whb-column_mobile1 > .wd-header-text,
.whb-header_tma .whb-row .whb-column_mobile2 > .wd-header-text {
  width: 100%;
}

/* Порожні колонки-сусіди (mobile3/mobile4, а на десктопі 9/10) інакше
   з'їдають частину рядка і зсувають нашу шапку. */
.whb-header_tma .whb-row .whb-empty-column {
  flex: 0 0 0;
  padding: 0;
}

/* Тема стилізує КОЖЕН <button> правилом :is(.btn,.button,button,...):
   padding 5px 20px і min-height 42px. Наші іконки-кнопки цього не
   очікували - у кнопки пошуку padding з'їдав усю ширину, вміст лишався
   0px, і значок ставав невидимим (на десктопі теж). Селектор з двох
   класів перебиває правило теми незалежно від порядку файлів. */
.whb-header_tma .tma-iconbtn,
.whb-header_tma .tma-burger {
  min-width: 0;
  min-height: 0;
  border-radius: 0;
  box-shadow: none;
}

.whb-header_tma .tma-iconbtn { padding: 0; width: 38px; height: 38px; }
.whb-header_tma .tma-burger  { padding: 8px; width: 40px; height: 40px; }

/* Значки покладались на атрибути width/height. Усередині флексу без
   явного CSS-розміру вони схлопуються в нуль. */
.whb-header_tma .tma-iconbtn svg {
  flex: none;
  width: 19px;
  height: 19px;
}

/* Перемикач мов: сніпет сайту фарбує його чорним (робився під світлу
   шапку) - на темній смузі не читається. */
.whb-header_tma .custom-language-switcher-black {
  color: rgba(255, 255, 255, .40);
  font-size: 13px;
  letter-spacing: .04em;
}

.whb-header_tma .custom-language-switcher-black a {
  color: rgba(255, 255, 255, .55);
  text-decoration: none;
  transition: color .15s ease;
}

.whb-header_tma .custom-language-switcher-black a:hover { color: #fff; }

.whb-header_tma .custom-language-switcher-black a.active {
  color: #fff;
  font-weight: 600;
}

/* --- Вузькі екрани --- */
@media (max-width: 1024px) {

  /* Ряди теми мають фіксовану висоту, а на телефоні верхня смуга
     переносить текст у два рядки - фіксована висота його обрізала.
     Дозволяємо ряду тягнутись під вміст, лишаючи налаштовану висоту
     як мінімум. Тоді на планшеті (один рядок) і на телефоні (два)
     висота рівно та, що потрібна. */
  .whb-header_tma .whb-top-bar-inner {
    height: auto;
    max-height: none;
    min-height: var(--wd-top-bar-sm-h);
  }

  .whb-header_tma .whb-general-header-inner {
    height: auto;
    max-height: none;
    min-height: var(--wd-header-general-sm-h);
  }

  /* На 13px фраза не влазить у рядок і ламається посередині.
     На 12px кожна фраза займає рівно один рядок - тобто перенос
     відбувається по смислу, як і домовлялись. */
  .whb-header_tma .tma-topbar__note {
    font-size: 12px;
  }
}

/* --- Продакшн-накладка: секції головної всередині теми --- */

/* Тема фарбує КОЖЕН заголовок правилом
   `legend, h1, h2, h3, h4, h5, h6, .title { color: var(--wd-title-color) }`.
   Будь-яке пряме правило б'є успадкований колір, тому заголовки в темних
   секціях ставали темними. Заміряно в браузері: у hero контраст падав до
   1.0 (заголовок фізично зливався з фоном), у блоці держпрограми - до 2.3.
   Секції задають колір на собі й розраховують на успадкування, тому тут
   ставимо його заголовкам явно. */
.tma-hero .tma-hero__title {
  color: var(--tma-on-dark);
}

.tma-gov .tma-gov__title {
  color: var(--tma-white);
}

/* Крапки-перемикачі слайдера hero.
   Тема задає КОЖНІЙ кнопці `min-height: 42px` - і круглі крапки 9×9
   перетворювались на вертикальні смужки 9×42. Виглядало як незрозумілий
   елемент, а не як пагінація.
   Заміряно в браузері: було 9×42, за задумом 9×9 (активна - пігулка 26×9).
   Перевірено, що з решти кнопок наших секцій (вкладки, акордеон, кнопка
   форми) не постраждала жодна - у них власні розміри перебивають тему. */
.tma-hero .tma-hero__dot {
  min-width: 0;
  min-height: 0;
  height: 9px;
  padding: 0;
  box-shadow: none;
}

.tma-hero .tma-hero__dot--active {
  width: 26px;
}

/* Футер на всю ширину екрана.
   Тема кладе HTML-блок футера в свій `.container.main-footer` з бічним
   padding 15px, тому наш темний футер не діставав до країв - на телефоні
   це особливо помітно (345px замість 375px). Відступи всередині футера
   задає він сам (.tma-footer__inner), тому контейнерні тут зайві. */
.wd-footer .main-footer {
  padding-left: 0;
  padding-right: 0;
}

/* --- Прибирання зайвого в темі (діє на весь сайт, не лише на хедер) --- */

/* Кнопка "Бічна панель" (Woodmart, клас wd-hide-lg - тобто тільки вузькі
   екрани) висіла на лівому краю поверх контенту. Перевірено 2026-07-23:
   з'являється рівно на двох сторінках (російська головна і технічне
   прев'ю), а сама панель ПОРОЖНЯ - 0 віджетів, 0 посилань. Тобто кнопка
   відкривала порожнечу і тільки заважала.

   Якщо колись у бічну панель додадуть реальні віджети - зняти це
   правило, інакше на телефоні до них не буде доступу. */
.wd-sidebar-opener {
  display: none;
}