/* =========================================================
   Monterra — базовая стилевая система
   Переменные, типографика, кнопки, eyebrow, контейнер.
   Подключается на всех страницах.
   ========================================================= */

:root {
  /* Тёмные фоны */
  --mtr-navy:       #0d1f2d;
  --mtr-navy-2:     #0a1a27;
  --mtr-navy-3:     #14314d;

  /* Светлые фоны */
  --mtr-bg-light:   #ffffff;
  --mtr-bg-light-2: #f4f7f4;
  --mtr-bg-light-3: #f8faf8;

  /* Бренд */
  --mtr-green:      #37c159;
  --mtr-green-dk:   #2ca34a;
  --mtr-green-2:    #1a7a4a;

  /* Текст */
  --mtr-white:      #ffffff;
  --mtr-text-dark:  #0d1f2d;
  --mtr-muted:      #9fb5c7;
  --mtr-muted-dk:   #5a7080;

  /* Бордеры */
  --mtr-border:     rgba(255,255,255,0.07);
  --mtr-border-lt:  rgba(13,31,45,0.08);

  /* Шрифты */
  --mtr-fh: 'Unbounded', sans-serif;
  --mtr-fb: 'Geologica', sans-serif;

  /* Радиусы */
  --mtr-r-sm: 6px;
  --mtr-r-md: 8px;
  --mtr-r-lg: 12px;
  --mtr-r-xl: 16px;
}

/* ── Контейнер 1280px ── */
.mtr-container {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

@media (max-width: 1100px) { .mtr-container { padding: 0 24px; } }
@media (max-width: 900px)  { .mtr-container { padding: 0 16px; } }
@media (max-width: 540px)  { .mtr-container { padding: 0 10px; } }

/* ── Eyebrow (зелёная черта + UPPERCASE) ── */
.mtr-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mtr-fb);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mtr-green);
  margin: 0 0 14px;
  line-height: 1;
}
.mtr-eyebrow::before {
  content: '';
  width: 22px;
  height: 1.5px;
  background: var(--mtr-green);
  flex-shrink: 0;
}

/* ── Кнопки ── */
.mtr-btn,
.mtr-btn-primary,
.mtr-btn-primary-dark,
.mtr-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--mtr-fb);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  padding: 13px 26px;
  border-radius: var(--mtr-r-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none !important;
  transition: background .18s, color .18s, transform .18s, border-color .18s;
  white-space: nowrap;
  outline: none !important;
  box-shadow: none !important;
  border-bottom: 1px solid transparent !important;
}

.mtr-btn-primary {
  background: var(--mtr-green);
  color: #fff !important;
}
.mtr-btn-primary:hover,
.mtr-btn-primary:focus,
.mtr-btn-primary:active {
  background: var(--mtr-green-dk);
  color: #fff !important;
  transform: translateY(-1px);
}

.mtr-btn-primary-dark {
  background: var(--mtr-text-dark);
  color: #fff !important;
}
.mtr-btn-primary-dark:hover,
.mtr-btn-primary-dark:focus,
.mtr-btn-primary-dark:active {
  background: #1a3550;
  color: #fff !important;
  transform: translateY(-1px);
}

.mtr-btn-ghost {
  background: transparent;
  color: var(--mtr-muted) !important;
  font-weight: 500;
  padding: 13px 0;
  border-radius: 0;
  border-bottom: 1px solid rgba(159,181,199,.25) !important;
}
.mtr-btn-ghost:hover,
.mtr-btn-ghost:focus,
.mtr-btn-ghost:active {
  color: var(--mtr-white) !important;
  border-bottom-color: var(--mtr-white) !important;
}

/* Ghost-кнопка на светлом фоне. Лёгкая текстовая кнопка с подчёркиванием.
   Покрываем и <a>, и <button>. Hello Elementor / Elementor Pro
   агрессивно перебивают :hover, поэтому body + !important. */
body a.mtr-btn-ghost--light,
body button.mtr-btn-ghost--light,
body .mtr-btn-ghost--light {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: var(--mtr-muted-dk) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(13,31,45,.18) !important;
  font-family: var(--mtr-fb) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  padding: 13px 0 !important;
  height: auto !important;
  width: auto !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer !important;
  transition: color .18s, border-color .18s !important;
}
body a.mtr-btn-ghost--light:hover,
body a.mtr-btn-ghost--light:focus,
body a.mtr-btn-ghost--light:active,
body button.mtr-btn-ghost--light:hover,
body button.mtr-btn-ghost--light:focus,
body button.mtr-btn-ghost--light:active,
body .mtr-btn-ghost--light:hover,
body .mtr-btn-ghost--light:focus,
body .mtr-btn-ghost--light:active {
  color: var(--mtr-text-dark) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--mtr-text-dark) !important;
  box-shadow: none !important;
  outline: none !important;
  opacity: 1 !important;
}

/* Тёмная ghost-кнопка — для тёмных секций (hero, CTA-блок). */
body a.mtr-btn-ghost,
body .mtr-btn-ghost {
  color: var(--mtr-muted) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-bottom: 1px solid rgba(159,181,199,.25) !important;
  text-decoration: none !important;
  box-shadow: none !important;
  outline: none !important;
}
body a.mtr-btn-ghost:hover,
body a.mtr-btn-ghost:focus,
body a.mtr-btn-ghost:active,
body .mtr-btn-ghost:hover,
body .mtr-btn-ghost:focus,
body .mtr-btn-ghost:active {
  color: var(--mtr-white) !important;
  background: transparent !important;
  border-bottom: 1px solid var(--mtr-white) !important;
  box-shadow: none !important;
  outline: none !important;
  opacity: 1 !important;
}

/* Primary кнопки — также защита от темы */
body a.mtr-btn-primary,
body .mtr-btn-primary {
  background: var(--mtr-green) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  border-bottom: 1px solid transparent !important;
  text-decoration: none !important;
  box-shadow: none !important;
  outline: none !important;
}
body a.mtr-btn-primary:hover,
body a.mtr-btn-primary:focus,
body a.mtr-btn-primary:active,
body .mtr-btn-primary:hover,
body .mtr-btn-primary:focus,
body .mtr-btn-primary:active {
  background: var(--mtr-green-dk) !important;
  color: #fff !important;
  opacity: 1 !important;
}

/* Outline-кнопка для светлых секций — альтернатива ghost-light когда нужна
   читаемая «вторая» кнопка с тёмной обводкой. Имеет явную рамку, поэтому
   Hello Elementor не может её сломать на :hover. */
body a.mtr-btn-outline,
body button.mtr-btn-outline,
body .mtr-btn-outline {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 24px !important;
  background: transparent !important;
  color: var(--mtr-text-dark) !important;
  font-family: var(--mtr-fb) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  text-shadow: none !important;
  border: 1px solid var(--mtr-text-dark) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer !important;
  transition: background .18s, color .18s, border-color .18s !important;
  white-space: nowrap !important;
  height: auto !important;
}
body a.mtr-btn-outline:hover,
body a.mtr-btn-outline:focus,
body a.mtr-btn-outline:active,
body button.mtr-btn-outline:hover,
body button.mtr-btn-outline:focus,
body .mtr-btn-outline:hover,
body .mtr-btn-outline:focus,
body .mtr-btn-outline:active {
  background: var(--mtr-text-dark) !important;
  color: #fff !important;
  border-color: var(--mtr-text-dark) !important;
  opacity: 1 !important;
  text-decoration: none !important;
}

/* Тёмный outline-вариант для тёмных секций (404, hero и т.п.) */
body a.mtr-btn-outline--dark,
body button.mtr-btn-outline--dark,
body .mtr-btn-outline--dark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 24px !important;
  background: transparent !important;
  color: #fff !important;
  font-family: var(--mtr-fb) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  text-shadow: none !important;
  border: 1px solid rgba(255,255,255,.4) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer !important;
  transition: background .18s, color .18s, border-color .18s !important;
  white-space: nowrap !important;
}
body a.mtr-btn-outline--dark:hover,
body a.mtr-btn-outline--dark:focus,
body button.mtr-btn-outline--dark:hover,
body .mtr-btn-outline--dark:hover {
  background: #fff !important;
  color: var(--mtr-text-dark) !important;
  border-color: #fff !important;
  opacity: 1 !important;
}

/* ── Анимации ── */
@keyframes mtrFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes mtrFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes mtrFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-13px); }
}

/* ── Декоративный фоновый текст ── */
.mtr-bg-label-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.mtr-bg-label {
  position: absolute;
  font-family: var(--mtr-fh);
  font-size: clamp(80px, 12vw, 150px);
  font-weight: 700;
  letter-spacing: -0.03em;
  white-space: nowrap;
  user-select: none;
  line-height: 1;
  color: rgba(255,255,255,0.022);
}
.mtr-bg-label--light {
  color: rgba(13,31,45,0.04);
}

/* ── Subtle grid pattern (для тёмных секций) ── */
.mtr-grid-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(55,193,89,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(55,193,89,.025) 1px, transparent 1px);
  background-size: 52px 52px;
  pointer-events: none;
  z-index: 0;
}

/* ── Типографика секций ── */
.mtr-h1 {
  font-family: var(--mtr-fh);
  font-size: clamp(26px, 3vw, 44px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 18px;
}
.mtr-h2 {
  font-family: var(--mtr-fh);
  font-size: clamp(22px, 2.6vw, 36px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.mtr-h2 em,
.mtr-h1 em {
  font-style: normal;
  color: var(--mtr-green);
}

.mtr-sub {
  font-family: var(--mtr-fb);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  margin: 0 0 24px;
}

/* ── Сброс body-стилей родителя для тёмных секций ── */
.mtr-section {
  position: relative;
  font-family: var(--mtr-fb);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.mtr-section--dark {
  background: var(--mtr-navy);
  color: var(--mtr-white);
}
.mtr-section--light {
  background: var(--mtr-bg-light);
  color: var(--mtr-text-dark);
}

/* ── Хлебные крошки ──
   Усиленная специфичность через body — нужно перебить розовый цвет
   ссылок Hello Elementor. Стили подключаются на ВСЕХ страницах
   (включая каталог и карточку товара). */
body .mtr-crumbs {
  background: var(--mtr-bg-light);
  border-bottom: 1px solid var(--mtr-border-lt);
}
body .mtr-crumbs__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 24px;
  font-family: var(--mtr-fb);
  font-size: 13px;
  color: var(--mtr-muted-dk);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
body .mtr-crumbs a.mtr-crumbs__link {
  color: var(--mtr-muted-dk) !important;
  text-decoration: none !important;
  border: none !important;
  border-bottom: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  font-weight: 500;
  transition: border-color .15s, color .15s;
}
body .mtr-crumbs a.mtr-crumbs__link:hover,
body .mtr-crumbs a.mtr-crumbs__link:focus,
body .mtr-crumbs a.mtr-crumbs__link:active {
  color: var(--mtr-text-dark) !important;
  border-bottom-color: var(--mtr-green) !important;
}
body .mtr-crumbs__sep { color: rgba(13,31,45,.25); }
body .mtr-crumbs__current { color: var(--mtr-text-dark); font-weight: 500; }


/* ── Свитчер языков GTranslate в шапке ── */
.mtr-hdr .gtranslate_wrapper {
  display: inline-flex !important;
  align-items: center;
  gap: 2px !important;
  margin-right: 6px;
}
body .mtr-hdr .gtranslate_wrapper a.glink,
body .mtr-hdr .gtranslate_wrapper a {
  display: inline-block !important;
  padding: 5px 8px !important;
  font-family: var(--mtr-fb) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  border-radius: 6px !important;
  transition: background 0.15s, color 0.15s;
}
body .mtr-hdr .gtranslate_wrapper a.glink:hover,
body .mtr-hdr .gtranslate_wrapper a.glink:focus,
body .mtr-hdr .gtranslate_wrapper a.glink:active {
  color: var(--mtr-green) !important;
  background: rgba(55, 193, 89, 0.10) !important;
  border-bottom-color: transparent !important;
  text-decoration: none !important;
}
body .mtr-hdr .gtranslate_wrapper a.glink.gt-current-lang {
  color: #fff !important;
  background: var(--mtr-green) !important;
}
/* Прячем плавающий встроенный виджет GTranslate (если включится) */
.gt_float_switcher, #gt_float_wrapper { display: none !important; }
/* Прячем баннер Google Translate сверху страницы */
body { top: 0 !important; }
.skiptranslate, iframe.skiptranslate, #goog-gt-tt, .goog-te-banner-frame.skiptranslate { display: none !important; }
.goog-tooltip, .goog-tooltip:hover { display: none !important; }
.goog-text-highlight { background: transparent !important; box-shadow: none !important; }

@media (max-width: 900px) {
  body .mtr-hdr .gtranslate_wrapper a.glink { padding: 4px 6px !important; font-size: 11px !important; }
}