/**
 * Sitranis preset — button styles.
 *
 * Loaded only when "Preset Sitranis" is selected in Theme Styles.
 * Colours come from the Laravel Sitranis build:
 *   green  #20B84B   dark green #18A03F / #0F7E31 (hover)
 *   white text, square corners, uppercase, 16/32 padding, weight 500.
 */

/* ---- Base button: solid green, white label ---- */
body.preset-sitranis .btn {
  height: auto;
  min-height: 3.25rem;
  padding: 1rem 2rem;
  border-width: 2px;
  border-style: solid;
  border-color: #20B84B;
  border-radius: 0;
  background-color: #20B84B;
  color: #ffffff;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

body.preset-sitranis .btn > span {
  color: #ffffff;
}

/* Hover sweep: darker green instead of the primary→secondary gradient */
body.preset-sitranis .btn::before {
  background: linear-gradient(115deg, #18A03F 0%, #18A03F 55%, #0F7E31 100%);
}

body.preset-sitranis .btn:hover,
body.preset-sitranis .btn:focus {
  border-color: #18A03F;
  background-color: #20B84B;
  color: #ffffff;
  box-shadow: 0 0.625rem 1.375rem rgba(32, 184, 75, 0.28);
}

body.preset-sitranis .btn:hover > span,
body.preset-sitranis .btn:focus > span {
  color: #ffffff;
}

body.preset-sitranis .btn:active {
  box-shadow: 0 0.25rem 0.625rem rgba(32, 184, 75, 0.2);
}

/* ---- White variant: for green / dark backgrounds ---- */
body.preset-sitranis .btn--white,
body.preset-sitranis .btn--primary.btn--white,
body.preset-sitranis .btn--primary-white.btn--white {
  border-color: #ffffff;
  background-color: #ffffff;
  color: #20B84B;
}

body.preset-sitranis .btn--white > span {
  color: #20B84B;
}

body.preset-sitranis .btn--white::before {
  background: linear-gradient(115deg, #20B84B 0%, #18A03F 100%);
}

body.preset-sitranis .btn--white:hover,
body.preset-sitranis .btn--white:focus {
  border-color: #ffffff;
  background-color: transparent;
  color: #ffffff;
}

body.preset-sitranis .btn--white:hover > span,
body.preset-sitranis .btn--white:focus > span {
  color: #ffffff;
}

/* ---- "Simple" variant keeps the flat fill, no sweep ---- */
body.preset-sitranis .btn--simple.btn--primary:not(.btn--white) {
  border-color: #20B84B;
  background-color: #20B84B;
  color: #ffffff;
}

body.preset-sitranis .btn--simple.btn--primary:not(.btn--white):hover,
body.preset-sitranis .btn--simple.btn--primary:not(.btn--white):focus {
  border-color: #18A03F;
  background-color: #18A03F;
  color: #ffffff;
}

/* ---- Dark secondary CTA (Sitranis "Open New Account" style) ---- */
body.preset-sitranis .btn--dark {
  border-color: #323232;
  background-color: #323232;
  color: #ffffff;
}

body.preset-sitranis .btn--dark > span {
  color: #ffffff;
}

body.preset-sitranis .btn--dark::before {
  background: linear-gradient(115deg, #192928 0%, #0F1918 100%);
}

/* ---- Декоративные фоны ------------------------------------------------
   В теме bg-top / bg-footer / bg-reviews лежат в общей папке img/decor,
   а не в папке пресета, поэтому от смены палитры не зависят и остаются
   оранжево-красными. Здесь подменяем их на перекрашенные под Sitranis
   копии. Оригиналы не тронуты — другие пресеты работают как раньше.
   Медиазапросы повторяют breakpoint(tab-lg) = 1024px и mob-sm = 576px,
   чтобы не включить фон там, где тема его намеренно не показывает.     */

@media (min-width: 1024px) {
  body.preset-sitranis .hero {
    background-image: url("../../img/decor/bg-top-sitranis.jpg");
  }
}

@media (min-width: 576px) {
  body.preset-sitranis .footer-middle {
    background-image: url("../../img/decor/bg-footer-sitranis.jpg");
  }
}

body.preset-sitranis .global-content__grouped::before {
  background-image: url("../../img/decor/bg-reviews-sitranis.jpg");
}

/* ---- Захардкоженные градиенты ----------------------------------------
   Два блока в теме покрашены мимо CSS-переменных, прямо в SCSS:
   parts/_form-with-img-block.scss:4  и  parts/_card-block.scss:28.
   При любой смене палитры они остаются красным и янтарным.            */

/* Блок подписки на рассылку: красный → зелёный в синий, как в герое */
body.preset-sitranis .bfwi {
  background: linear-gradient(90deg, #20B84B 0%, #266B91 100%);
}

/* CTA-карточка: янтарный → фирменный жёлтый Sitranis #FFBF1A */
body.preset-sitranis .cardblock__inner {
  background: linear-gradient(to bottom, #FFCB33 0%, #F0A800 100%);
  box-shadow: 0 0 50px rgba(255, 191, 26, 0.55);
}

/* ---- Шапка -----------------------------------------------------------
   layout/_header.scss красит .header::before тем же красным градиентом
   (строки 21, 33 и 80 — последняя с !important). На десктопе подложка
   прозрачная и появляется только при скролле, на мобильном она есть
   всегда. Повторяем эту логику в цветах Sitranis.                     */

body.preset-sitranis .header::before,
body.preset-sitranis .header.scrolling::before {
  background: linear-gradient(to right, #20B84B 0%, #266B91 100%);
}

/* Вне скролла на десктопе подложка обязана оставаться прозрачной,
   иначе шапка перестанет «лежать» на герое. */
@media (min-width: 1024px) {
  body.preset-sitranis .header:not(.scrolling)::before {
    background: transparent;
  }
}

body.preset-sitranis.page-template-tmpl-terms-of-service .header::before {
  background: linear-gradient(to right, #20B84B 0%, #266B91 100%) !important;
}

/* ---- Последние два тёплых пятна --------------------------------------
   Найдены сканом output.min.css: во всей собранной CSS тёплых цветов
   ровно 6, из них #FF1919 — семантический красный ошибок форм, его
   трогать нельзя. Остаются эти два.                                    */

/* Карточка нумерованного списка, parts/_list-number-card-block.scss:98 */
body.preset-sitranis .lnc-item__content {
  background: linear-gradient(90deg, #20B84B 0%, #266B91 100%);
}

/* Тень под картинкой героя была коричневой (#694124 — под оранжевую тему),
   parts/_hero-block.scss:378. Пересчитана тем же преобразованием оттенка,
   что и фоны. */
body.preset-sitranis .hero.loaded .hero-right {
  filter: drop-shadow(0 0 0.75rem #164D22);
}

/* ======================================================================
   ФОТОГРАФИИ ВМЕСТО ИЛЛЮСТРАЦИЙ
   Тема рассчитана на изометрические вырезки с прозрачным фоном:
   картинка вписывается через object-fit: contain, в карточках она
   вообще размером 120x120. Фотография в таком слоте превращается в
   марку с полями. Ниже — минимальная адаптация тех же блоков под фото.
   ====================================================================== */

/* --- Герой: было contain в квадрате 1:1, стало кадрирование по месту --- */
body.preset-sitranis .hero-right__img img {
  object-fit: cover;
}

@media (min-width: 1024px) {
  body.preset-sitranis .hero-right__img img {
    aspect-ratio: auto;
    min-height: 0;
    height: 100%;
  }
}

/* Свечение под вырезку заменяем на направленную тень под фото */
body.preset-sitranis .hero.loaded .hero-right {
  filter: drop-shadow(0 1rem 2rem rgba(25, 41, 40, 0.32));
}

/* --- Карточки «текст + картинка»: иконка 120x120 -> фото на всю ширину --- */
body.preset-sitranis .twi-card__img {
  width: 100%;
  height: 13.75rem;
  border-radius: 0.75rem;
  overflow: hidden;
}

body.preset-sitranis .twi-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Глобальные блоки: контакты и подписка --- */
body.preset-sitranis .tci__img img,
body.preset-sitranis .bfwi-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.75rem;
}

/* ======================================================================
   ГЕРОЙ В КОМПОЗИЦИИ СТАРОГО САЙТА

   Замеры с отрендеренной Laravel-страницы при ширине 1440:
   секция 770px, фото от 21% ширины экрана до правого края во всю высоту,
   карточка 820x352 на #F5F5F3 с padding 40, её низ на 139px выше низа
   секции, заголовок 48/700 uppercase #192928, уголок 66px — два
   прямоугольных треугольника (прямой угол снизу-слева), задний светлее
   и смещён вниз-влево на 13px.

   ДВА ПОДВОДНЫХ КАМНЯ ТЕМЫ:
   1. Корневой шрифт плавающий (0.9375vw), при 1440 это 13.5px, а не 16.
      Поэтому все rem-значения ниже пересчитаны: 770px = 57rem, и т.д.
      Так герой продолжает масштабироваться вместе с остальной сеткой.
   2. Тема метит потомков героя селекторами вида .hero.hero--home
      .hero-right — это специфичнее, чем body.preset-... .hero-right.
      Поэтому здесь цепочка через .hero-wrap, она заведомо выигрывает.

   .hero делаем блочным: в теме это flex с центрированием, из-за чего
   .container сжимался до содержимого. Предки фото — static, чтобы
   absolute лёг относительно .hero и дошёл до края экрана без vw-математики.
   Карточка остаётся в потоке и прижимается к низу через align-items —
   так она держит сетку страницы.

   Только с 1024px: ниже у темы своя мобильная раскладка героя.
   ====================================================================== */

@media (min-width: 1024px) {

  /* --- Шапка: сплошная белая, тёмные ссылки ---
     Специфичность :not(.scrolling) выше обычной, поэтому повторяем её
     здесь — правило идёт ниже и выигрывает при равном весе. */
  body.preset-sitranis .header::before,
  body.preset-sitranis .header:not(.scrolling)::before,
  body.preset-sitranis .header.scrolling::before {
    background: #FFFFFF;
    box-shadow: 0 1px 0 rgba(25, 41, 40, 0.08);
  }

  body.preset-sitranis .header a:not(.btn),
  body.preset-sitranis .header .header-menu__items li > a {
    color: #192928;
  }

  body.preset-sitranis .header a:not(.btn):hover,
  body.preset-sitranis .header .header-menu__items li > a:hover {
    color: var(--primary-color);
  }

  /* Логотип Glossol (uploads/2026/08/logo.svg) уже тёмный,
     временный filter: brightness(0) снят. */

  /* Кнопка аккаунта помечена btn--white, то есть белая на белом.
     На старом сайте она сплошная зелёная. */
  body.preset-sitranis .header-menu__account-link,
  body.preset-sitranis .header-menu__account-link.btn--white {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #FFFFFF;
  }

  body.preset-sitranis .header-menu__account-link > span,
  body.preset-sitranis .header-menu__account-link:hover > span {
    color: #FFFFFF;
  }

  body.preset-sitranis .header-menu__account-link:hover,
  body.preset-sitranis .header-menu__account-link:focus {
    background-color: #18A03F;
    border-color: #18A03F;
  }

  /* --- Секция --- */
  body.preset-sitranis .hero:has(.hero-left) {
    display: block;
    height: auto;
    min-height: 57rem;
    padding: 0;
    background-image: none;
    background-color: #FFFFFF;
    color: #192928;
  }

  body.preset-sitranis .hero:has(.hero-left) .hero-wrap {
    position: static;
    display: block;
    width: 100%;
    height: auto;
  }

  body.preset-sitranis .hero:has(.hero-left) .container {
    position: static;
    display: flex;
    align-items: flex-end;
    min-height: 57rem;
    /* Верхний отступ не даёт карточке с длинным заголовком уехать под
       фиксированную шапку: вместо этого подрастает сама секция. */
    padding-top: 6rem;
    padding-bottom: 10.3rem;
    max-width: none;
    padding-left: 1.11rem;
    padding-right: 1.11rem;
  }

  /* --- Фото --- */
  body.preset-sitranis .hero .hero-wrap .hero-right {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 21%;
    width: auto;
    height: auto;
    transform: none;
    filter: none;
    z-index: 0;
  }

  body.preset-sitranis .hero.loaded .hero-wrap .hero-right {
    filter: none;
  }

  body.preset-sitranis .hero .hero-wrap .hero-right__img {
    height: 100%;
    width: 100%;
    min-height: 0;
    max-height: none;
  }

  body.preset-sitranis .hero .hero-wrap .hero-right__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: auto;
    min-height: 0;
    opacity: 1;
  }

  /* --- Карточка с заголовком поверх фото --- */
  body.preset-sitranis .hero .hero-wrap .hero-left {
    position: relative;
    width: 57%;
    max-width: 60.7rem;
    margin: 0;
    padding: 3rem;
    transform: none;
    background: var(--tertiary-color);
    color: #192928;
    z-index: 2;
  }

  body.preset-sitranis .hero .hero-wrap .hero-left__title,
  body.preset-sitranis .hero .hero-wrap .hero-left__title h1,
  body.preset-sitranis .hero .hero-wrap .hero-left__title h2,
  body.preset-sitranis .hero .hero-wrap .hero-left__title h3 {
    font-size: 3.56rem;
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
    color: #192928;
    transform: none;
    opacity: 1;
  }

  body.preset-sitranis .hero .hero-wrap .hero-left__content {
    background: transparent;
    color: #192928;
    font-size: 1.19rem;
    line-height: 1.35;
    margin-top: 1.5rem;
    padding: 0;
    transform: none;
    opacity: 1;
  }

  body.preset-sitranis .hero .hero-wrap .hero-left__slogan {
    color: var(--primary-color);
    font-weight: 600;
  }

  /* --- Уголок из двух треугольников --- */
  body.preset-sitranis .hero .hero-wrap .hero-left::before,
  body.preset-sitranis .hero .hero-wrap .hero-left::after {
    content: "";
    position: absolute;
    width: 4.9rem;
    height: 4.9rem;
    clip-path: polygon(0 0, 100% 100%, 0 100%);
    pointer-events: none;
  }

  body.preset-sitranis .hero .hero-wrap .hero-left::before {
    top: 0.96rem;
    right: 0.96rem;
    background: rgba(var(--primary-color-rgb), 0.5);
  }

  body.preset-sitranis .hero .hero-wrap .hero-left::after {
    top: 0;
    right: 0;
    background: rgba(var(--primary-color-rgb), 0.72);
  }
}

/* ----------------------------------------------------------------------
   Наезд секции на фото героя (только главная).
   pages/_tmpl-home.scss:21 задаёт .tmpl-home-twi-s2 { margin-top: rem(-150) }
   = -112.5px. Приём рассчитан на старого героя с белым изгибом кляксы
   внизу: секция пряталась под изгиб. С полноразмерным фото тот же отступ
   кладёт заголовок «Order Fulfillment» прямо на картинку.
   Отменяем: секция встаёт вплотную к низу героя, а зазор в 60px даёт её
   собственный padding-top. Второй отрицательный отступ в теме
   (.main--separator, -58px) не трогаем — на внутренних страницах он
   работает как задумано.
   ---------------------------------------------------------------------- */

@media (min-width: 1024px) {
  body.preset-sitranis .tmpl-home-twi-s2 {
    margin-top: 0;
  }
}

/* ======================================================================
   ОТЗЫВЫ + ОБЪЕДИНЁННАЯ СЕКЦИЯ «CUSTOMER SERVICE + ПОДПИСКА»

   Как на старом сайте:
   - отзывы: фон #F5F5F3 с тремя зелёными звёздочками
     (main.css: .fb-wr — star-1 дважды и star-2, позиции ниже те же);
   - Customer Service и подписка — ОДНА секция .support-block с фоновым
     фото bg-bottom.png, две колонки, белый текст, без картинок.

   В теме это три разных блока в двух разных родителях:
     .global-content
       section.tblock
       div.global-content__grouped   ← ::before держал зелёную волну
         section.bteam    (отзывы)
         section.btci     (Customer Service)
       section.bfwi       (подписка)

   Чтобы поставить .btci и .bfwi рядом, не трогая PHP: обёртке даём
   display:contents — она перестаёт создавать бокс, и её дети становятся
   элементами грида .global-content. Селекторы при этом работают по DOM,
   поэтому обращаемся через потомка, а не через `>`.

   Фон одной картинкой на две половины: каждая берёт bg-bottom.png с
   background-size: 200% 100% и позицией left / right — вместе они
   складывают целое изображение по всей ширине без шва.
   ====================================================================== */

/* --- Отзывы: светлый фон со звёздочками --- */
body.preset-sitranis .bteam {
  background-color: #F5F5F3;
  background-image:
    url("../../img/decor/star-1.svg"),
    url("../../img/decor/star-1.svg"),
    url("../../img/decor/star-2.svg");
  background-repeat: no-repeat;
  background-position:
    left 10% bottom 57px,
    left 70% bottom -50%,
    right 0 bottom -150px;
  padding-top: 57px;
  padding-bottom: 57px;
  margin-bottom: 0;
}

/* Зелёная волна обёртки больше не нужна — под отзывами свой фон,
   а ниже идёт тёмная секция. */
body.preset-sitranis .global-content__grouped::before {
  content: none;
}

/* --- Тёмная секция: обе половины --- */
body.preset-sitranis .btci,
body.preset-sitranis .bfwi {
  background-color: #2E3E3C;
  background-image: url("../../img/decor/bg-bottom.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #FFFFFF;
  margin: 0;
  padding: 3.5rem 0;
}

/* Картинки внутри убираем — на старом сайте их нет, фон секции их заменяет */
body.preset-sitranis .btci-right,
body.preset-sitranis .bfwi-right {
  display: none;
}

body.preset-sitranis .btci-left,
body.preset-sitranis .bfwi-left {
  width: 100%;
  max-width: none;
}

body.preset-sitranis .btci-left__title,
body.preset-sitranis .btci-left__desc,
body.preset-sitranis .btci-left__phone,
body.preset-sitranis .bfwi-left__desc {
  color: #FFFFFF;
}

body.preset-sitranis .btci-left__phone:hover {
  color: var(--primary-color);
}

/* --- Десктоп: две колонки одной секцией --- */
@media (min-width: 1024px) {

  body.preset-sitranis .global-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }

  body.preset-sitranis .global-content > * {
    grid-column: 1 / -1;
  }

  /* Обёртка растворяется, её дети становятся элементами грида */
  body.preset-sitranis .global-content__grouped {
    display: contents;
  }

  body.preset-sitranis .global-content .bteam {
    grid-column: 1 / -1;
  }

  body.preset-sitranis .global-content .btci {
    grid-column: 1;
    background-size: 200% 100%;
    background-position: left center;
  }

  body.preset-sitranis .global-content .bfwi {
    grid-column: 2;
    background-size: 200% 100%;
    background-position: right center;
  }
}

/* --- Мобильные: половины складываются в столбик, шва между ними нет --- */
@media (max-width: 1023.98px) {
  body.preset-sitranis .btci {
    padding-bottom: 2rem;
  }

  body.preset-sitranis .bfwi {
    margin-top: 0;
    padding-top: 0;
  }
}

/* --- Выравнивание двух колонок объединённой секции ---
   В теме заголовок Customer Service отцентрован, а у блока подписки
   свой внутренний padding 60/75px. В две колонки это давало разную
   стартовую точку по горизонтали и разную высоту начала текста.
   На старом сайте обе колонки начинаются на одной линии сверху,
   текст выключен влево, а левая колонка уже своей половины. */

@media (min-width: 1024px) {
  body.preset-sitranis .btci-left__title {
    text-align: left;
  }

  /* Левая колонка не должна растягиваться на всю половину:
     в эталоне её текст ~460px при половине 720 */
  body.preset-sitranis .btci-left__wrap {
    max-width: 34rem;
  }

  /* Снимаем собственные отступы блока подписки — вертикальные задаёт
     секция, иначе правая колонка опускается на 60px ниже левой */
  body.preset-sitranis .bfwi__wrap {
    padding: 0;
  }
}

/* ======================================================================
   ЗЕЛЁНЫЙ УГОЛОК НА КАРТОЧКАХ

   На старом сайте это не псевдоэлемент, а фоновая картинка:
     .warehousing__item {
       padding: 130px 32px 40px;
       background: #F5F5F3 url(bg-werehousing.svg) no-repeat right top;
     }
   Файл 107x109, два прямоугольных треугольника (прямой угол снизу-слева) —
   та же фигура, что в герое. Верхний padding как раз освобождает под неё
   место, поэтому заголовок карточки начинается ниже уголка.

   Для карточек на цветном фоне у старого сайта есть второй файл, где
   передний треугольник белый — используем его, иначе зелёное по зелёному.

   Фоном, а не через ::before/::after: у половины карточек псевдоэлементы
   уже заняты собственным декором, фон же ни с чем не конфликтует.

   Размер и отступ вынесены в переменные — подкручиваются одной строкой.
   Значения переведены в rem темы (корень 13.5px при 1440):
   107px = 7.93rem, 130px = 9.63rem.
   ====================================================================== */

body.preset-sitranis {
  --card-corner: url("../../img/decor/card-corner.svg");
  --card-corner-light: url("../../img/decor/card-corner-light.svg");
  /* Размер привязан к ширине карточки, но не больше эталонного.
     У старого сайта уголок 107px на карточке 462px — это 23% ширины,
     а padding 130px — 28%. Проценты дают правильную пропорцию на узких
     карточках (238px), потолок в rem не даёт раздуться на широких (1005px).
     Проценты в padding-top считаются от ширины — это здесь и нужно. */
  --card-corner-size: min(23%, 7.93rem);
  --card-corner-pad: min(28%, 9.63rem);
}

/* --- Карточки на светлом фоне --- */
body.preset-sitranis .twi-card__inner,
body.preset-sitranis .gridtext-item__wrap,
body.preset-sitranis .gci-item__wrap,
body.preset-sitranis .principleb-item__wrap,
body.preset-sitranis .cardstep-item__wrap,
body.preset-sitranis .twl__wrap,
body.preset-sitranis .bplan-item__wrap {
  background-image: var(--card-corner);
  background-repeat: no-repeat;
  background-position: right top;
  background-size: var(--card-corner-size) auto;
  padding-top: var(--card-corner-pad);
}

/* --- Карточки на цветном фоне: передний треугольник белый --- */
body.preset-sitranis .gridcards-item__inner,
body.preset-sitranis .textsec__wrap,
body.preset-sitranis .lnc-item__content {
  background-image: var(--card-corner-light);
  background-repeat: no-repeat;
  background-position: right top;
  background-size: var(--card-corner-size) auto;
  padding-top: var(--card-corner-pad);
}

/* У этих карточек фон задан через background-color, а у .lnc-item__content
   раньше стоял градиент — возвращаем его отдельным слоем под уголком */
body.preset-sitranis .lnc-item__content {
  background-image: var(--card-corner-light),
                    linear-gradient(90deg, #20B84B 0%, #266B91 100%);
  background-position: right top, left top;
  background-size: var(--card-corner-size) auto, 100% 100%;
}

/* --- Мобильные: уголок мельче, отступ соразмерно --- */
@media (max-width: 767.98px) {
  body.preset-sitranis {
    --card-corner-size: min(23%, 4.6rem);
    --card-corner-pad: min(28%, 5.8rem);
  }
}

/* ----------------------------------------------------------------------
   CTA-карточка «Start Right Away» — из жёлтой в зелёную.
   Блок повторяется на 11 страницах (home, pricing, fba, overview,
   referrals, support, edi, startups, ecommerce, overseas, hrgeneralist),
   поэтому правим по классу.

   Кнопка внутри: .cardblock__link.btn.btn--primary.btn--primary-white.
   На зелёной подложке зелёная кнопка сливается, поэтому делаем её белой
   с зелёной надписью. Диагональная заливка на ховере у базовой кнопки
   тёмно-зелёная — она сама «заливает» белую кнопку, надпись становится
   белой. В теме у этой кнопки свой цвет через secondary-color
   (_card-block.scss:66) — перекрываем явно, иначе на нашей палитре она
   стала бы почти белой на белом.
   ---------------------------------------------------------------------- */

body.preset-sitranis .cardblock__inner {
  background: linear-gradient(to bottom, #23C351 0%, #189A3E 100%);
  box-shadow: 0 0 50px rgba(32, 184, 75, 0.45);
  color: #FFFFFF;
}

body.preset-sitranis .cardblock__inner .btn,
body.preset-sitranis .cardblock__link {
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  color: var(--primary-color);
}

body.preset-sitranis .cardblock__inner .btn > span,
body.preset-sitranis .cardblock__link > span {
  color: var(--primary-color);
}

body.preset-sitranis .cardblock__inner .btn:hover,
body.preset-sitranis .cardblock__inner .btn:focus,
body.preset-sitranis .cardblock__link:hover,
body.preset-sitranis .cardblock__link:focus {
  background-color: transparent;
  border-color: #FFFFFF;
  color: #FFFFFF;
}

body.preset-sitranis .cardblock__inner .btn:hover > span,
body.preset-sitranis .cardblock__inner .btn:focus > span,
body.preset-sitranis .cardblock__link:hover > span,
body.preset-sitranis .cardblock__link:focus > span {
  color: #FFFFFF;
}

/* ----------------------------------------------------------------------
   Контраст надписи на белых кнопках.
   Фирменный #20B84B на белом даёт 2.6:1 — для текста 14px это мало
   (WCAG AA требует 4.5:1). Заливку кнопки не трогаем, чтобы не уводить
   от фирменного цвета: затемняем только надпись до #177F36 — это тот же
   зелёный, но 5.1:1. Касается всех белых кнопок, а не только CTA-карточки,
   иначе надписи на них разъедутся по насыщенности.
   ---------------------------------------------------------------------- */

body.preset-sitranis {
  --btn-label-on-white: #177F36;
}

body.preset-sitranis .cardblock__inner .btn,
body.preset-sitranis .cardblock__link,
body.preset-sitranis .cardblock__inner .btn > span,
body.preset-sitranis .cardblock__link > span,
body.preset-sitranis .btn--white,
body.preset-sitranis .btn--white > span,
body.preset-sitranis .btn--primary.btn--white,
body.preset-sitranis .btn--primary-white.btn--white {
  color: var(--btn-label-on-white);
}

/* На ховере кнопка заливается тёмно-зелёным — надпись обратно белая */
body.preset-sitranis .cardblock__inner .btn:hover > span,
body.preset-sitranis .cardblock__inner .btn:focus > span,
body.preset-sitranis .cardblock__link:hover > span,
body.preset-sitranis .cardblock__link:focus > span,
body.preset-sitranis .btn--white:hover > span,
body.preset-sitranis .btn--white:focus > span {
  color: #FFFFFF;
}

/* Кнопка аккаунта в шапке помечена btn--white, но на десктопе мы сделали
   её сплошной зелёной — надпись на ней должна остаться белой, иначе
   предыдущее правило красит её в тёмно-зелёный по зелёному. */
@media (min-width: 1024px) {
  body.preset-sitranis .header .header-menu__account-link,
  body.preset-sitranis .header .header-menu__account-link > span {
    color: #FFFFFF;
  }
}

/* Уголок на CTA-карточке. Раньше её пропускали — она была жёлтой и со
   своим свечением. Теперь карточка зелёная, поэтому берём светлый вариант
   (белый передний треугольник), как у остальных цветных блоков.
   Градиент возвращаем вторым слоем под уголком: background-image
   перекрывает предыдущее объявление целиком. */
body.preset-sitranis .cardblock__inner {
  background-image: var(--card-corner-light),
                    linear-gradient(to bottom, #23C351 0%, #189A3E 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: right top, left top;
  background-size: var(--card-corner-size) auto, 100% 100%;
  padding-top: var(--card-corner-pad);
}

/* ==========================================================================
   RevA — правки по замечаниям PM (16.09.2026)
   Палитру НЕ меняем: --secondary-color остаётся #E8F5EC, потому что тема
   использует его и как светлую подложку (file-upload, маркеры списков,
   подчёркивание в футере). Красим точечно только то, на что указал PM.
   ========================================================================== */

/* --- 1. Акцентные заголовки пропали ------------------------------------
   Тема красит их var(--secondary-color). В preset-blue, под который её
   верстали, это #BE4844 — насыщенный акцент. У нас там светлая мята,
   поэтому текст слился с фоном.
   Пункты PM: PRINCIPLE (/values/), PLAN (/referrals/), боковые заголовки
   (/features/, /overseas-order-fulfillment/, /distributed-werehousing/),
   номера 01-04 (/distributed-werehousing/).                              */

body.preset-sitranis .twi-left__title,
body.preset-sitranis .main--features-page .twi-left__title,
body.preset-sitranis .principleb-item__title,
body.preset-sitranis .bplan-item__title,
body.preset-sitranis .circlenumbcard__title,
body.preset-sitranis .circlenumbcard-item__numb,
body.preset-sitranis .cardstep-item__numb span:before {
  color: var(--primary-color);
}

/* На зелёной карточке PRINCIPLE №2 тема уже ставит #fff правилом
   .principleb-item:nth-child(2n) … (0,4,0) — оно специфичнее моего (0,2,1),
   так что белый там сохраняется сам. Специально не переопределяю. */

/* Pricing: карточки на тёмном сине-зелёном, PM просит белый, не зелёный. */
body.preset-sitranis .gridcards-item__title {
  color: #fff;
}

/* --- 2. Подменю в шапке: на hover пропадал текст -----------------------
   Причина — моё же правило .header a:not(.btn):hover { color: primary }:
   у пункта подменю фон на hover тоже зелёный, получалось зелёное по зелёному. */
body.preset-sitranis .header .sub-menu a,
body.preset-sitranis .header .sub-menu .sub-menu__link {
  color: #192928;
}

body.preset-sitranis .header .sub-menu a:hover,
body.preset-sitranis .header .sub-menu .sub-menu__link:hover,
body.preset-sitranis .header .sub-menu li:hover > a {
  color: #fff;
}

/* --- 3. Поповер My Account: светлый текст на светлом фоне ---------------
   Блок сверстан под тёмную подложку (ссылка «Forgot password?» — #fff),
   а фон стал светлым. PM просит чёрный шрифт в полях и в самом блоке.   */
body.preset-sitranis .account-popup__title,
body.preset-sitranis .account-popup__body,
body.preset-sitranis .account-popup__form-field,
body.preset-sitranis .account-popup__form-input,
body.preset-sitranis .account-popup__form-field--link a {
  color: #192928;
}

body.preset-sitranis .account-popup__form-input::placeholder {
  color: rgba(25, 41, 40, 0.55);
  opacity: 1;
}

body.preset-sitranis .account-popup__form-field--link a:hover {
  color: var(--primary-color);
}

/* --- 4. «Сломанный» заголовок на /request-a-quote/ ----------------------
   В ACF-поле tmpl_requestquote_block_hero_title лежит и <h1>, и абзац,
   завёрнутый в <div><div>. Контейнер имеет кегль h1, абзац его наследует.
   Поле ..._hero_desc при этом пустое.
   Правим отображением, а не контентом: на странице с корректным контентом
   в .hero-left__title лежит только <h1>, и этот селектор ни во что не попадёт. */
body.preset-sitranis .hero-left__title > div {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.35;
  text-transform: none;
  margin-top: 1rem;
}

/* --- 5. Чекбоксы должны стоять напротив вопросов ------------------------
   .form .form-checkbox объявлен display:block, но с column-gap — на блочном
   элементе gap не работает, инпут утекает в конец строки.
   inline-flex, а не flex: иначе радио Yes/No встанут друг под друга.       */
body.preset-sitranis .form .form-checkbox {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.666667rem;
  vertical-align: top;
}

body.preset-sitranis .form .form-checkbox input[type="checkbox"],
body.preset-sitranis .form .form-checkbox input[type="radio"] {
  flex: none;
  margin-top: 0.25em;
}

/* --- 6. Главная: рамка со скруглениями вокруг текста под заголовком -----
   .hero-left__content — приём темы для читаемости на фоне картинки
   (полупрозрачная белая подложка + blur + радиус). В нашем герое текст
   и так лежит на плотной карточке #F5F5F3.
   Только десктоп: ниже 1024 остаётся исходный герой темы, там подложка
   пока держит читаемость. Мобильную версию правим отдельным заходом.     */
@media (min-width: 1024px) {
  body.preset-sitranis .hero:has(.hero-left) .hero-left__content {
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0;
    padding: 0;
    width: auto;
    /* мягкая тень рисовала ту же рамку, что и радиус, — убираем вместе с ней */
    box-shadow: none;
  }
}

/* --- 5b. Чекбоксы на /request-a-quote/ — настоящая причина ----------------
   Правка 5 выше била мимо: там класс .form-checkbox (форма отклика на вакансию),
   а на этой странице разметка другая — label.deliveryRadio.labelContainer
   с парой input + span.checkbox-label + span.checkmark.
   Ни одного правила для labelContainer / checkmark / deliveryRadio в теме нет —
   разметку кастомного чекбокса вставили без сопутствующего CSS.
   Из-за этого нативный input подхватывает общее правило ширины и растягивается
   на 972px: замерено getBoundingClientRect() — [238, 331, 973, 13].
   Отсюда он и уезжает на отдельную строку над вопросом.                      */
body.preset-sitranis label.labelContainer {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  margin-bottom: 0.7em;
  cursor: pointer;
}

body.preset-sitranis label.labelContainer > input[type="checkbox"],
body.preset-sitranis label.labelContainer > input[type="radio"] {
  width: 1.1em !important;
  min-width: 1.1em;
  max-width: 1.1em !important;
  height: 1.1em;
  flex: none;
  margin: 0.15em 0 0 0;
  accent-color: var(--primary-color);
}

body.preset-sitranis label.labelContainer .checkbox-label {
  flex: 1 1 auto;
}

/* span.checkmark — пустой и без стилей, в вёрстке ничего не рисует.
   Прячем, чтобы не влиял на flex-раскладку. */
body.preset-sitranis label.labelContainer .checkmark {
  display: none;
}

/* Поля в поповере аккаунта были с белой рамкой на светлом фоне — границы
   не читались. PM просил «в полях ввода» тоже, поэтому даём мягкий контур. */
body.preset-sitranis .account-popup__form-input {
  border-color: rgba(25, 41, 40, 0.25);
  background-color: rgba(255, 255, 255, 0.72);
}

/* ==========================================================================
   RevA — мобильная версия
   ========================================================================== */

/* --- 7. Герой на мобиле: вернуть картинку -------------------------------
   В нашем форке в .hero-right дописан `display: none`, а `display: block`
   включается только с breakpoint(tab-lg) = 1025px. У rapitran, на который
   ссылается PM, этого нет: базовые стили .hero-right там совпадают с нашими
   один в один, кроме этой пары строк. Отсюда и «мобильная версия сухая,
   без картинок».

   Но копировать rapitran дословно нельзя: у них в герое иллюстрации
   с прозрачным фоном, и absolute + translate(20%,20%) в правом нижнем углу
   читается как «выглядывающая» картинка. У нас там фотографии — прямоугольные,
   и обрезанный угол смотрелся бы случайным. Поэтому кладём фото в поток
   под текст, во всю ширину.                                                */
@media (max-width: 1024px) {
  body.preset-sitranis .hero:has(.hero-left) .hero-right {
    display: block;
    position: static;
    transform: none;
    filter: none;
    width: 100%;
    margin-top: 1.7rem;
  }

  body.preset-sitranis .hero:has(.hero-left) .hero-right__img {
    width: 100%;
    height: auto;
    opacity: 1;
  }

  body.preset-sitranis .hero:has(.hero-left) .hero-right__img img {
    display: block;
    width: 100%;
    height: 13rem;
    object-fit: cover;
    object-position: center;
  }
}

/* --- 8. Мобильная главная: текст уходил за края экрана ------------------
   PM, пункт 15 (image18). Виновник найден замером: .cardblock__inner
   на вьюпорте 500px имел ширину 524.6px и торчал по 12px с каждой стороны
   (left -12, right 512 при vw 500).
   Причина: .cardblock__wrap — это display:flex, а у .cardblock__inner
   в базовых стилях нет ширины, поэтому flex-элемент распирает до min-content.
   У rapitran ровно для этого есть отдельное правило .cardblock__inner{width:100%} —
   у нас оно появляется только с 1025px. Возвращаем его на мобилку.        */
@media (max-width: 1024px) {
  body.preset-sitranis .cardblock__inner {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

/* --- 9. Отступ героя от шапки на мобиле ---------------------------------
   PM: «ток надо чуть больший отступ от хедера» (image24).
   Замер: шапка fixed высотой 83px, а padding-top героя 80px — заголовок
   начинался ровно под её нижней кромкой, впритык.                         */
@media (max-width: 1024px) {
  body.preset-sitranis .hero:has(.hero-left) {
    padding-top: 7.2rem;
    /* Одного паддинга мало: .hero — это flex-колонка с min-height 650px
       и центрированием. Содержимое выше content-box, поэтому при
       justify-content:center оно выпирает вверх ЗА паддинг, и заголовок
       оказывался на y=19 при шапке высотой 83. Замерено на /join-our-team/.
       Отпускаем высоту и прижимаем содержимое к верху. */
    justify-content: flex-start;
    min-height: 0;
    height: auto;
  }
}

/* --- 10. Мобильное меню: читаемость и кегль -----------------------------
   PM, пункты 16-17 (image19): «нужно в 2 раза увеличить шрифт, сменить цвет
   шрифта, чтобы его было видно» + «кнопка My Account, сейчас плохо видно».

   Причина найдена диффом с rapitran: у них панель меню — сплошная заливка
   (`background: core.$primary-color`), а наш форк заменил её градиентом из
   семи стопов, построенным на --secondary-color (#E8F5EC, почти белый).
   Белые пункты на светлых участках этого градиента просто исчезают.

   Возвращаем сплошную заливку. Берём тёмный #192928, а не зелёный:
   белым по #20B84B контраст 2.7:1 — ниже порога даже для крупного текста,
   а по #192928 это 17:1. Тёмная панель к тому же совпадает по настроению
   с мобильными героями, на которые PM ссылается как на эталон.            */
@media (max-width: 1024px) {
  body.preset-sitranis .header .header-menu__wrapper {
    background: #192928;
  }

  body.preset-sitranis .header .header-menu__items > li > a {
    font-size: 1.9rem;
    line-height: 1.35;
    color: #FFFFFF;
  }

  body.preset-sitranis .header .header-menu__items .arrow {
    color: #FFFFFF;
  }

  /* Подменю внутри мобильной панели: чуть мельче основного уровня */
  body.preset-sitranis .header .header-menu__wrapper .sub-menu {
    background: transparent;
    border: none;
  }

  body.preset-sitranis .header .header-menu__wrapper .sub-menu a {
    font-size: 1.35rem;
    color: rgba(255, 255, 255, 0.82);
  }

  body.preset-sitranis .header .header-menu__wrapper .sub-menu a:hover {
    color: #FFFFFF;
  }
}

/* ==========================================================================
   RevA — прелоадер
   Было: фон — анимированный градиент из семи стопов на --quaternary-color
   (#266B91), --secondary-color (#E8F5EC) и --primary-color, плюс круглая
   «орбита» с точками на GSAP. К фирменному стилю отношения не имеет,
   и на светлых участках градиента белое слово «Glossol» пропадало.

   Стало: тёмный #192928, слово набрано как вордмарк (Gilroy ExtraBold,
   uppercase, трекинг как в логотипе), вместо орбиты — тот же уголок,
   что в герое и на карточках.

   Всё на CSS: preloader.php не трогаем, поэтому на лайв по-прежнему
   уезжает только этот файл. GSAP продолжает анимировать .loader-content
   (плавное появление) — это оставляем; скрытую орбиту он тоже анимирует,
   но она display:none, так что впустую и без ошибок.
   ========================================================================== */

body.preset-sitranis #preloader {
  background: #192928;
  animation: none;
}

body.preset-sitranis #preloader .loader-content {
  gap: 2rem;
}

body.preset-sitranis #preloader .loader-text {
  color: #FFFFFF;
  font-family: var(--primary-font, "Gilroy", sans-serif);
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Круглую орбиту прячем, её контейнер оставляем как место под уголок */
body.preset-sitranis #preloader .loader-orbit__svg {
  display: none;
}

body.preset-sitranis #preloader .loader-orbit {
  position: relative;
  width: 4.6rem;
  height: 4.6rem;
}

body.preset-sitranis #preloader .loader-orbit::before,
body.preset-sitranis #preloader .loader-orbit::after {
  content: "";
  position: absolute;
  width: 3.4rem;
  height: 3.4rem;
  background-color: var(--primary-color);
  /* тот же треугольник, что у декора: прямой угол снизу-слева */
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

/* задний — смещён вниз-влево и полупрозрачный, как на карточках */
body.preset-sitranis #preloader .loader-orbit::before {
  top: 0.85rem;
  right: 0.85rem;
  opacity: 0.45;
  animation: glossol-wedge-back 1.6s ease-in-out infinite;
}

/* передний — прижат к правому верхнему углу */
body.preset-sitranis #preloader .loader-orbit::after {
  top: 0;
  right: 0;
  animation: glossol-wedge-front 1.6s ease-in-out infinite;
}

@keyframes glossol-wedge-back {
  0%, 100% { transform: translate(0, 0); opacity: 0.45; }
  50%      { transform: translate(0.85rem, -0.85rem); opacity: 0.2; }
}

@keyframes glossol-wedge-front {
  0%, 100% { transform: translate(0, 0); opacity: 1; }
  50%      { transform: translate(-0.5rem, 0.5rem); opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
  body.preset-sitranis #preloader .loader-orbit::before,
  body.preset-sitranis #preloader .loader-orbit::after {
    animation: none;
  }
}

/* ==========================================================================
   Страницы вакансий (шаблон tmpl-hr-generalist) — правки PM от 28.09
   Всё ограничено секцией #form_anchor и телом .main--hrgeneralist-page,
   чтобы не задеть формы и кнопки на других страницах.
   ========================================================================== */

/* --- 1. Заголовок «Job Application» не читался -------------------------
   В parts/part/form/form.php:154 у него ИНЛАЙНОВЫЙ стиль
   style="color: var(--secondary-color)". Инлайн перебивает любой внешний
   CSS, поэтому только !important. В секции два h3, так что селектор узкий —
   бьём ровно в тот, что лежит прямо в контейнере, а не в шагах формы.      */
body.preset-sitranis #form_anchor > .container > div > h3 {
  color: #FFFFFF !important;
}

/* --- 2. Кнопка Edit была невидимой -------------------------------------
   Причина не в самой кнопке: правило темы
   `.main--hrgeneralist-page .formbig .step .btn` задаёт
   background-color: var(--secondary-color) !important и color: #fff !important.
   При нашей палитре это белый текст на #E8F5EC — почти белом.
   Замер на лайве: bg rgb(232,245,236), color rgb(255,255,255).
   Под правило попадают обе кнопки внутри шагов, не только Edit, —
   они все сейчас невидимы, поэтому чиним разом.
   Их селектор весит (0,4,0) с !important, наш — (0,5,1), перебивает.       */
body.preset-sitranis .main--hrgeneralist-page .formbig .step .btn {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #FFFFFF !important;
}

body.preset-sitranis .main--hrgeneralist-page .formbig .step .btn > span {
  color: #FFFFFF !important;
}

body.preset-sitranis .main--hrgeneralist-page .formbig .step .btn:hover,
body.preset-sitranis .main--hrgeneralist-page .formbig .step .btn:focus {
  background-color: #177F36 !important;
  border-color: #177F36 !important;
  color: #FFFFFF !important;
}

/* --- 4. Форматы резюме (Doc / PDF / TXT) по левому краю -----------------
   Список наследовал text-align:center от .text-center выше по дереву,
   из-за чего маркеры стояли слева, а строки плавали по центру.            */
body.preset-sitranis #form_anchor .form-ul,
body.preset-sitranis #form_anchor .form-ul ul,
body.preset-sitranis #form_anchor .form-ul li {
  text-align: left;
}

/* --- 3. Левая карточка вакансии: лишний отступ сверху --------------------
   padding-top был 130px = min(28%, 9.63rem) — это место, которое я резервирую
   под уголок в правом верхнем углу карточки (см. блок с --card-corner-pad).
   Но на страницах вакансий уголок не рисуется: правило темы
   `.main--hrgeneralist-page .cardblock__inner { background: ...!important }`
   использует ШОРТКАТ background и затирает background-image с уголком.
   Отступ при этом остаётся — получается 100px пустоты над заголовком.
   Возвращаем отступ к тому, что задаёт сама тема (2.22rem = 30px),
   вровень с нижним.                                                        */
body.preset-sitranis .main--hrgeneralist-page .hero--hrgeneralist .cardblock__inner {
  padding-top: 2.22222rem;
  background-image: none;
}

/* Выравнивание верхних кромок двух белых блоков (просьба PM).
   Замер при 1440: левая карточка начиналась на y=131, правая — на y=174,
   разница 43px из-за заголовка «Job Application» над формой.
   Сдвигаем левую колонку вниз на эту разницу — 43px = 3.19rem при корне 13.5.
   Только десктоп: ниже 1024 колонки идут друг под другом и сдвиг не нужен.
   Если решите оставить левый блок выше — просто удалите этот блок.         */
@media (min-width: 1025px) {
  body.preset-sitranis .main--hrgeneralist-page .hero--hrgeneralist .cardblock__inner {
    margin-top: 3.19rem;
  }
}