/* ============================================================================
   Страница цен /tarify — блок с вкладками.
   Макет: Figma ky6llEIeu5xAzUOLWutlnT, экраны 1:47, 1:190, 1:267, 1:458, 1:398.
   Подключается только лейаутом views/layouts/tarif.php.

   Порядок подключения в нашу пользу: site.css вшит в _head.php жёстким <link>,
   а этот файл идёт ниже, из $model->head(). Поэтому при равной специфичности
   выигрывают правила отсюда и !important не нужен.

   Вкладка «Грузоперевозки — По городу» использует классы .ev2-* из
   /css/express_v2.css — он подключается рядом, чтобы блок выглядел ровно так же,
   как на странице «Буряков Экспресс». Здесь его правила не дублируются.
   ============================================================================ */

/* --- Roboto (самохост). Montserrat приходит глобально из _head.php, а Roboto
       до сих пор объявлялся только в gruzchiki_hub.css — на этой странице его
       бы не было, и весь текст съехал бы в Arial. --- */
@font-face { font-family:'Roboto'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/fonts/roboto/roboto-cyrillic-400-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Roboto'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/fonts/roboto/roboto-latin-ext-400-normal.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:'Roboto'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/fonts/roboto/roboto-latin-400-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Roboto'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/fonts/roboto/roboto-cyrillic-700-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Roboto'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/fonts/roboto/roboto-latin-ext-700-normal.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:'Roboto'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/fonts/roboto/roboto-latin-700-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* --- Токены макета --- */
#tarify-block {
    --tf-green:        #2e5b35;   /* основной тёмно-зелёный */
    --tf-green-deep:   #0f502c;   /* акцент активного таба машин */
    --tf-lime:         #94c121;
    --tf-text:         #333;
    --tf-black:        #1d1d1d;
    --tf-muted:        rgba(29, 29, 29, .6);
    --tf-bg:           #f5f7f8;
    --tf-border:       #d7d7d7;
    --tf-yellow:       #ffdd2d;
    --tf-note-bg:      #f6fce9;

    --tf-font:      'Roboto', Arial, sans-serif;
    --tf-font-alt:  'Montserrat', Arial, sans-serif;
}

/* --- Заголовок страницы под макет (Montserrat Medium 40, по левому краю).
       Глобальные .wrap h1 (site.css:155) центрируют заголовок и дорисовывают
       под ним декоративную черту через ::after — в макете ни того, ни другого
       нет, поэтому здесь отменяем. Только на этой странице: файл больше нигде
       не подключается. --- */
.page-tarify .wrap #content h1 {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--tf-black, #1d1d1d);
    margin: 0 0 4px;
    text-align: left;
    text-transform: none;
}
.page-tarify .wrap #content h1::after { content: none; }

/* --- Корень блока + защита от общих правил site.css ---
       .wrap .content p { height: 100% } (site.css:66) и
       .wrap .content #content img { height: 250px } (site.css:139)
       ломали бы вёрстку, поэтому гасим их точечно. Специфичность по id
       выигрывает у двух классов. --- */
#tarify-block {
    font-family: var(--tf-font);
    color: var(--tf-text);
    margin: 0 0 40px;
}
#tarify-block p { height: auto; text-indent: 0; text-align: left; }
#tarify-block img {
    height: auto;
    width: auto;
    max-width: 100%;
    padding-bottom: 0;
}
#tarify-block *, #tarify-block *::before, #tarify-block *::after { box-sizing: border-box; }

/* Скрытие вкладок держится на атрибуте hidden. Браузер прячет его правилом
   [hidden]{display:none} из UA-стилей, но у наших .tf__subtabs{display:flex}
   специфичность выше — без этой строки вторая строка подвкладок вылезала
   поверх первой. */
#tarify-block [hidden] { display: none !important; }

/* --- Подзаголовок под H1 --- */
.tf__subtitle {
    font-family: var(--tf-font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--tf-black);
    margin: 0 0 24px;
}

/* --- Верхние вкладки --- */
.tf__tabs {
    display: flex;
    gap: 10px;
    padding: 8px;
    border: 1px solid var(--tf-border);
    border-radius: 20px;
    margin-bottom: 24px;
}
.tf__tab {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    border: .5px solid var(--tf-border);
    border-radius: 16px;
    background: var(--tf-bg);
    color: var(--tf-text);
    font-family: var(--tf-font);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    cursor: pointer;
    transition: background-color .18s, color .18s, box-shadow .18s;
}
.tf__tab:hover { background: #eef1f3; }
.tf__tab.is-active {
    background: linear-gradient(238.12deg, #2f9d36 8.886%, #145d3a 95.245%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 8px rgba(46, 91, 53, .2);
}
.tf__tab-ico { width: 32px; height: 32px; flex: 0 0 32px; }

/* --- Подвкладки --- */
.tf__subtabs {
    display: flex;
    gap: 24px;
    justify-content: center;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--tf-bg);
    border-radius: 19px;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto 24px;
}
.tf__subtab {
    min-width: 244px;
    height: 52px;
    padding: 8px;
    border: 0;
    border-radius: 15px;
    background: var(--tf-bg);
    color: var(--tf-text);
    font-family: var(--tf-font-alt);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    transition: background-color .18s, color .18s;
}
.tf__subtab:hover { background: #e9edef; }
.tf__subtab.is-active {
    background: linear-gradient(90deg, #94c121 0%, #2f9d36 100%);
    color: #fff;
}

/* --- Панель вкладки --- */
.tf__heading {
    font-family: var(--tf-font);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--tf-black);
    margin: 0 0 16px;
}
.tf__desc {
    font-family: var(--tf-font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--tf-black);
    margin: 0 0 16px;
}
.tf__card {
    background: var(--tf-bg);
    border-radius: 16px;
    padding: 24px 32px 32px;
}
.tf__empty {
    font-family: var(--tf-font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--tf-muted);
    margin: 0 0 16px;
}

/* --- Переключатель «Отдельная машина / Попутное авто» --- */
.tf-mode { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.tf-mode__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    border: 1px solid var(--tf-border);
    border-radius: 8px;
    background: #fff;
    font-family: var(--tf-font-alt);
    font-size: 20px;
    font-weight: 400;
    color: var(--tf-text);
    cursor: pointer;
    margin: 0;
    transition: border-color .18s, background-color .18s;
}
.tf-mode__item input { position: absolute; opacity: 0; width: 0; height: 0; }
.tf-mode__dot {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border: 1px solid var(--tf-border);
    border-radius: 50%;
    background: #fff;
    position: relative;
}
.tf-mode__item.is-active { border: 4px solid var(--tf-lime); padding: 5px 13px; }
.tf-mode__item.is-active .tf-mode__dot { border-color: var(--tf-lime); background: #f5f9e9; }
.tf-mode__item.is-active .tf-mode__dot::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--tf-lime);
}
.tf-mode__bolt { width: 20px; height: 25px; flex: 0 0 20px; }
.tf-mode__accent { font-weight: 700; }

/* --- Ряд машин с горизонтальной прокруткой --- */
.tf-cars__label {
    font-family: var(--tf-font);
    font-size: 18px;
    font-weight: 700;
    color: var(--tf-black);
    margin-bottom: 16px;
}
/* Обёртка ряда: на ней держится мобильное затухание у правого края. */
.tf-cars-wrap { position: relative; }
.tf-cars {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--tf-green) #e6e6e6;
    -webkit-overflow-scrolling: touch;
}
.tf-cars__track {
    display: flex;
    gap: 16px;
    scroll-snap-type: x proximity;
}
.tf-cars::-webkit-scrollbar { height: 5px; }
.tf-cars::-webkit-scrollbar-track { background: #e6e6e6; border-radius: 4px; }
.tf-cars::-webkit-scrollbar-thumb { background: var(--tf-green); border-radius: 4px; }

/* --- Карточка машины --- */
.tf-car {
    flex: 0 0 250px;
    width: 250px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #fff;
    border: 1px solid rgba(51, 51, 51, .2);
    border-radius: 12px;
    scroll-snap-align: start;
    margin: 0;
    font-weight: 400;
}
.tf-car--pick { cursor: pointer; transition: border-color .18s, box-shadow .18s; }
.tf-car--pick:hover { border-color: var(--tf-lime); }
.tf-car--pick.is-selected {
    border: 2px solid var(--tf-lime);
    box-shadow: 0 2px 10px rgba(148, 193, 33, .18);
}
.tf-car__radio { position: absolute; opacity: 0; width: 0; height: 0; }
.tf-car__body { padding: 10px 18px; }
.tf-car__pic {
    height: 59px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
.tf-car__pic img { max-height: 59px; max-width: 119px; object-fit: contain; }
.tf-car__name {
    font-family: var(--tf-font);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--tf-green);
    margin-bottom: 10px;
}
.tf-car__spec {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    line-height: 1.5;
    border-bottom: 1px solid var(--tf-border);
    padding: 0 0 1px;
    margin-bottom: 9px;
}
.tf-car__spec-label { color: var(--tf-text); white-space: nowrap; }
.tf-car__spec-value {
    flex: 1 0 0;
    min-width: 0;
    text-align: right;
    font-weight: 700;
    color: var(--tf-green);
}
.tf-car__price { padding: 8px 18px 16px; }
.tf-car__price-val {
    font-family: var(--tf-font-alt);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--tf-green);
    white-space: nowrap;
}

/* --- Мини-калькулятор «Переезды — По городу» --- */
.tf-calc { margin-top: 24px; }
.tf-calc__fields { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.tf-calc__field { max-width: 400px; }
.tf-calc__label {
    display: block;
    font-family: var(--tf-font);
    font-size: 14px;
    font-weight: 700;
    color: var(--tf-black);
    margin-bottom: 8px;
}
.tf-calc__select {
    width: 100%;
    height: 52px;
    padding: 0 40px 0 16px;
    border: 1px solid var(--tf-border);
    border-radius: 8px;
    background: #fff;
    font-family: var(--tf-font);
    font-size: 16px;
    color: var(--tf-text);
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='11'%3E%3Cpath d='M6.5 11 0 0h13z' fill='%23999'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}
.tf-calc__result {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: stretch;
    margin-bottom: 16px;
}
.tf-calc__lines { flex: 1 1 380px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.tf-calc__line {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-family: var(--tf-font);
    font-size: 16px;
    line-height: 1.5;
}
.tf-calc__line-name { flex: 0 0 90px; color: var(--tf-muted); }
.tf-calc__line-what { flex: 1 1 auto; font-weight: 700; color: var(--tf-black); }
.tf-calc__line-sum { flex: 0 0 auto; font-weight: 700; color: var(--tf-black); white-space: nowrap; }
.tf-calc__total {
    flex: 1 1 380px;
    border: 1px dashed rgba(29, 29, 29, .45);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    background: transparent;
}
.tf-calc__total-title {
    font-family: var(--tf-font);
    font-size: 18px;
    color: var(--tf-black);
    margin-bottom: 4px;
}
.tf-calc__total-old {
    display: block;
    font-family: var(--tf-font);
    font-size: 16px;
    color: var(--tf-muted);
    margin-bottom: 2px;
}
.tf-calc__total-val {
    font-family: var(--tf-font-alt);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--tf-black);
}
.tf-calc__total-cur { font-weight: 400; }

/* --- Карточки услуг грузчиков --- */
.tf-serv { display: flex; flex-wrap: wrap; gap: 24px; }
.tf-serv__card {
    flex: 1 1 280px;
    max-width: 320px;
    background: #fff;
    border: 1px solid var(--tf-border);
    border-radius: 8px;
    padding: 16px 18px;
}
.tf-serv__pic {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
.tf-serv__pic img { max-height: 64px; max-width: 120px; object-fit: contain; }
.tf-serv__title {
    font-family: var(--tf-font);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--tf-green);
    margin-bottom: 6px;
}
.tf-serv__subtitle {
    font-family: var(--tf-font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--tf-muted);
    margin-bottom: 10px;
}
.tf-serv__item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--tf-font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--tf-black);
    border-bottom: 1px solid var(--tf-bg);
    padding-bottom: 1px;
    margin-bottom: 9px;
}
.tf-serv__item:last-child { border-bottom: 0; margin-bottom: 0; }
.tf-serv__item-label { flex: 0 1 auto; }
.tf-serv__item-price { flex: 1 0 auto; text-align: right; font-weight: 700; white-space: nowrap; }

/* --- «Важно знать», дисклеймер, кнопка --- */
.tf__note {
    background: var(--tf-note-bg);
    border-left: 3px solid var(--tf-lime);
    border-radius: 4px;
    padding: 24px 16px;
    font-family: var(--tf-font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--tf-black);
    margin: 24px 0 0;
}
.tf__extra {
    font-family: var(--tf-font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--tf-black);
    margin: 24px 0 0;
}
.tf__disclaimer {
    font-family: var(--tf-font);
    font-size: 14px;
    font-style: italic;
    line-height: 1.5;
    color: rgba(0, 0, 0, .5);
    margin: 24px 0 0;
}
.tf__cta-wrap { margin-top: 24px; }
.tf__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 10px 24px;
    border: 0;
    border-radius: 60px;
    background: var(--tf-yellow);
    color: var(--tf-text);
    font-family: var(--tf-font-alt);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s, box-shadow .18s;
}
.tf__cta:hover,
.tf__cta:focus { background: #ffd400; color: var(--tf-text); text-decoration: none; box-shadow: 0 4px 10px rgba(0, 0, 0, .12); }

/* --- Блок тарифов Экспресса внутри вкладки: снимаем внешние отступы,
       остальное берётся из express_v2.css без изменений --- */
#tarify-block .ev2-tarifs { padding: 0; }

/* --- Видимая обводка при навигации с клавиатуры --- */
#tarify-block button:focus-visible,
#tarify-block select:focus-visible,
#tarify-block a:focus-visible,
#tarify-block input:focus-visible + * { outline: 2px solid var(--tf-green-deep); outline-offset: 2px; }

/* --- Уважение к системной настройке «меньше движения» --- */
@media (prefers-reduced-motion: reduce) {
    #tarify-block * { transition: none !important; scroll-behavior: auto !important; }
}

/* ============================ Адаптив ============================ */

@media (max-width: 1199px) {
    .tf__tab { font-size: 20px; padding: 14px 12px; }
    .tf__subtab { min-width: 200px; }
}

@media (max-width: 991px) {
    .page-tarify .wrap #content h1 { font-size: 32px; }
    .tf__card { padding: 20px; }
    .tf__tabs { gap: 8px; padding: 6px; }
    .tf__tab { font-size: 17px; padding: 12px 8px; gap: 6px; }
    .tf__tab-ico { width: 24px; height: 24px; flex-basis: 24px; }
    .tf__subtabs { gap: 12px; width: 100%; }
    .tf__subtab { min-width: 0; flex: 1 1 0; font-size: 16px; }
    .tf-calc__field { max-width: none; }
}

/* ============================================================================
   Мобильная версия (≤767px).
   Макет: Figma IafCOCAgOP0nDHXJurCrpY, экраны 1:49, 1:192, 1:271, 1:402, 1:554
   (кадр iPhone 14/15 Pro Max — 450px, контент 418px, поля по 16px).

   Это не «сжатый десктоп»: у мобильной версии свой набор размеров.
   Главное отличие — вкладки первого уровня встают столбиком, подвкладки
   наоборот растягиваются в строку, а текст КРУПНЕЕ десктопного
   (18px против 14px): так в макете, и с руки это читается.
   ============================================================================ */
@media (max-width: 767px) {

    /* --- Заголовок и подзаголовок: Montserrat 28/400 #333 и Roboto 18/1.3.
           Селектор повторяет базовый (.page-tarify .wrap #content h1) —
           у короткого «.page-tarify #content h1» специфичность ниже базового
           правила с 40px, и размер на телефоне не менялся вовсе. --- */
    .page-tarify .wrap #content h1 {
        font-size: 28px;
        font-weight: 400;
        color: var(--tf-text, #333);
        margin-bottom: 10px;
    }
    .tf__subtitle { font-size: 18px; line-height: 1.3; color: #545454; margin-bottom: 10px; }

    /* --- Вкладки первого уровня: столбиком, каждая во всю ширину.
           Раньше они уезжали в горизонтальную прокрутку, и «Грузчики»
           не было видно без свайпа — в макете такого нет. --- */
    .tf__tabs {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 10px;
        padding: 8px;
        border-radius: 20px;
        margin-bottom: 34px;
    }
    .tf__tab {
        flex: 0 0 auto;
        width: 100%;
        gap: 10px;
        padding: 16px;
        font-size: 20px;
        white-space: normal;
    }
    .tf__tab-ico { width: 32px; height: 32px; flex-basis: 32px; }

    /* --- Подвкладки: две в строке, во всю ширину, скругление 24px --- */
    .tf__subtabs { width: 100%; gap: 24px; padding: 8px; border-radius: 19px; margin-bottom: 24px; }
    .tf__subtab {
        flex: 1 0 0;
        min-width: 0;
        height: 52px;
        padding: 8px 16px;
        border-radius: 24px;
        font-family: var(--tf-font);
        font-size: 18px;
        font-weight: 400;
        line-height: 1.3;
    }
    .tf__subtab.is-active { font-weight: 700; }

    /* --- Заголовок раздела и описание --- */
    .tf__heading { font-size: 20px; color: var(--tf-text); margin-bottom: 24px; }
    .tf__desc { font-size: 18px; line-height: 1.3; color: #545454; margin-bottom: 34px; }
    .tf__empty { font-size: 16px; }

    /* --- Панель вкладки: поля по 8px, чтобы карточка машины (250px)
           влезала целиком даже на 360px --- */
    .tf__card {
        padding: 16px 8px;
        border: .5px solid rgba(51, 51, 51, .2);
        border-radius: 16px;
    }

    /* --- Переключатель «Отдельная машина / Попутное авто»: строки во всю ширину --- */
    .tf-mode { flex-direction: column; flex-wrap: nowrap; gap: 10px; margin-bottom: 24px; }
    .tf-mode__item {
        width: 100%;
        gap: 12px;
        font-family: var(--tf-font);
        font-size: 18px;
        line-height: 1.3;
    }

    /* --- Ряд машин. Карточка остаётся 250px, как в макете: сужать её
           не нужно — ряд и так листается вбок. --- */
    .tf-cars__label { font-size: 20px; margin-bottom: 16px; }
    .tf-cars { padding-bottom: 16px; scrollbar-color: #d9d9d9 transparent; }
    .tf-cars::-webkit-scrollbar-track { background: transparent; }
    .tf-cars::-webkit-scrollbar-thumb { background: #d9d9d9; border-radius: 16px; }
    .tf-car { flex: 0 0 250px; width: 250px; }
    .tf-car__price-val { font-size: 24px; }

    /* Затухание у правого края — подсказка «ряд листается».
       Живёт на обёртке, а не на самом .tf-cars: слой внутри прокручиваемого
       блока уехал бы вместе с карточками. Снизу отступ под полосу прокрутки. */
    .tf-cars-wrap::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 16px;   /* ровно на высоту отступа под полосу прокрутки */
        width: 39px;
        background: linear-gradient(to right, rgba(245, 247, 248, 0) 0%, var(--tf-bg) 100%);
        pointer-events: none;
    }

    /* --- Карточки услуг грузчиков: столбиком, иконка слева от текста --- */
    .tf-serv { flex-direction: column; flex-wrap: nowrap; gap: 12px; }
    .tf-serv__card { flex: 0 0 auto; width: 100%; max-width: none; padding: 26px 18px; }
    .tf-serv__head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
    .tf-serv__pic { flex: 0 0 68px; width: 68px; height: 64px; margin-bottom: 0; }
    .tf-serv__pic img { max-width: 68px; max-height: 64px; }
    .tf-serv__head-text { flex: 1 1 auto; min-width: 0; }
    .tf-serv__title { margin-bottom: 10px; }
    .tf-serv__subtitle { margin-bottom: 0; }

    /* --- Мини-калькулятор «Переезды — По городу» --- */
    .tf-calc__fields { gap: 24px; margin-bottom: 24px; }
    .tf-calc__field { max-width: none; }
    .tf-calc__label { font-size: 20px; line-height: 1.5; margin-bottom: 10px; }
    .tf-calc__select {
        padding: 8px 40px 8px 12px;
        border-radius: 4px;
        font-family: var(--tf-font-alt);
        font-size: 18px;
        background-position: right 12px center;
    }

    /* В колонке flex-basis из десктопа (380px) превращается в ВЫСОТУ —
       из-за этого между строками расчёта и рамкой зияли пустые полосы
       в пол-экрана. Поэтому здесь обе колонки по содержимому. */
    .tf-calc__result { flex-direction: column; flex-wrap: nowrap; gap: 24px; }
    .tf-calc__lines { flex: 0 0 auto; gap: 0; padding: 10px; }
    .tf-calc__total { flex: 0 0 auto; padding: 10px; border-radius: 10px; border-color: var(--tf-text); }
    .tf-calc__line {
        flex-wrap: wrap;
        align-items: baseline;
        gap: 10px;
        font-family: var(--tf-font-alt);
        font-size: 16px;
        line-height: 1.6;
    }
    .tf-calc__line-name { flex: 0 0 82px; color: var(--tf-text); }
    .tf-calc__line-what { flex: 1 1 auto; min-width: 0; font-size: 20px; font-weight: 600; color: var(--tf-text); }
    .tf-calc__line-sum { font-size: 20px; font-weight: 600; color: var(--tf-text); }
    .tf-calc__total-title { font-family: var(--tf-font-alt); font-size: 20px; font-weight: 600; line-height: 1.3; margin-bottom: 0; }
    .tf-calc__total-old { font-family: var(--tf-font-alt); font-size: 20px; line-height: 1.3; color: var(--tf-text); margin-bottom: 0; }
    .tf-calc__total-val { font-size: 32px; font-weight: 900; line-height: 1.3; }
    .tf-calc__total-cur { font-weight: 600; }

    /* --- «Важно знать», доп. текст, дисклеймер --- */
    .tf__note { margin-top: 24px; padding: 24px 16px; }
    .tf__extra { margin-top: 24px; font-size: 18px; line-height: 1.3; color: #545454; }
    .tf__disclaimer { margin-top: 24px; }

    /* --- Кнопка: во всю ширину, Montserrat Bold 16 (в макете для мобильной
           версии заведён отдельный стиль «mob/Button name»). Высота не
           жёсткая: длинная надпись на 360px переносится на две строки
           и не должна обрезаться. --- */
    .tf__cta-wrap { display: flex; margin-top: 24px; }
    .tf__cta {
        flex: 1 1 auto;
        width: 100%;
        min-height: 50px;
        padding: 10px 18px;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.2;
        text-align: center;
    }

    /* --- Вкладка «Грузоперевозки — По городу»: блок тарифов Экспресса.
           Правки ТОЛЬКО внутри #tarify-block — страница «Буряков Экспресс»
           не меняется. В общем адаптиве Экспресса типы авто ужимаются
           в одну строку и подписи падают до 12px; в макете вместо этого
           ряд листается вбок, а карточка остаётся 200px. --- */
    #tarify-block .ev2-tarifs__tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 24px;
        padding-bottom: 16px;
        scrollbar-width: thin;
        scrollbar-color: #d9d9d9 transparent;
    }
    #tarify-block .ev2-tarifs__tabs::-webkit-scrollbar { height: 5px; }
    #tarify-block .ev2-tarifs__tabs::-webkit-scrollbar-track { background: transparent; }
    #tarify-block .ev2-tarifs__tabs::-webkit-scrollbar-thumb { background: #d9d9d9; border-radius: 16px; }
    #tarify-block .ev2-tarifs__tab {
        flex: 0 0 200px;
        width: 200px;
        min-width: 200px;
        gap: 16px;
        padding: 0 0 10px;
    }
    #tarify-block .ev2-tarifs__tab-truck { height: 59px; width: 119px; }
    #tarify-block .ev2-tarifs__tab-label { font-size: 14px; line-height: 1.5; }
    #tarify-block .ev2-tarifs__panel-sub { font-size: 14px; padding: 12px 16px; }
    #tarify-block .ev2-tarifs__table thead th { font-size: 16px; padding: 10px 16px; }
    #tarify-block .ev2-tarifs__table tbody td { font-size: 14px; padding: 10px 16px; }
    #tarify-block .ev2-tarifs__note { padding: 24px 16px; border-left-width: 3px; }
}

/* --- Узкие телефоны (400px и меньше). Отдельного макета на эту ширину нет:
       здесь только то, что иначе не влезает в строку. --- */
@media (max-width: 400px) {
    .tf__tab { font-size: 18px; }
    .tf__subtabs { gap: 12px; }
    .tf__subtab { padding: 8px 10px; font-size: 16px; }
    .tf-calc__line { font-size: 14px; }
    .tf-calc__line-name { flex-basis: 72px; }
    .tf-calc__line-what,
    .tf-calc__line-sum { font-size: 17px; }
    .tf-calc__total-val { font-size: 28px; }
}