/*
Theme Name: Flekk — Октан Гранат
Theme URI: https://flekk.ru/
Description: Шаблон лендинга для автосервиса, СТО и шиномонтажа. Тёмное фото-полотно, тонкий Inter, красный акцент. Дочерняя тема Hello Elementor.
Author: Flekk
Template: hello-elementor
Version: 1.0.8
Text Domain: flekk-oktan
*/

/* ── Токены ───────────────────────────────────────────────── */
:root{
  --flk-ground:#FFFFFF;
  --flk-ground2:#F4F5F6;
  --flk-ink:#141618;
  --flk-ink2:#5A6167;
  --flk-ink3:#8B9198;
  --flk-line:#E3E5E7;
  --flk-line-d:rgba(255,255,255,.18);
  --flk-red:#B31410;
  --flk-red-h:#8E100C;
  --flk-dark:#0D0F11;

  --flk-wrap:1680px;
  --flk-pad:80px;
  --flk-gap:32px;
  --flk-sect:140px;

  --flk-h1:82px;
  --flk-h2:54px;
  --flk-h3:26px;
  --flk-lede:22px;
  --flk-body:19px;
  --flk-small:16px;
  --flk-r-lg:28px;
  --flk-r-md:18px;
}
@media (max-width:1439px){
  :root{--flk-h1:62px;--flk-h2:44px;--flk-sect:112px}
}
@media (max-width:1023px){
  :root{
    --flk-h1:44px;--flk-h2:34px;--flk-h3:22px;--flk-lede:19px;--flk-body:17px;
    --flk-sect:80px;--flk-pad:24px;--flk-gap:20px;--flk-r-lg:22px;--flk-r-md:14px;
  }
}

/* ── Основа ───────────────────────────────────────────────── */
html,body{max-width:100%;overflow-x:hidden}
body{
  margin:0;background:var(--flk-ground);color:var(--flk-ink);
  font-family:Inter,-apple-system,"Segoe UI",sans-serif;
  font-size:var(--flk-body);line-height:1.55;-webkit-font-smoothing:antialiased;
}
body h1,body h2,body h3{
  margin:0;font-weight:300;letter-spacing:-.025em;line-height:1.06;
  text-wrap:balance;color:inherit;
}
body h1{font-size:var(--flk-h1)}
body h2{font-size:var(--flk-h2)}
body h3{font-size:var(--flk-h3);font-weight:600;letter-spacing:-.015em;line-height:1.25}
body h1 b,body h2 b,body h1 strong,body h2 strong{font-weight:600}
body p{margin:0}

/* ── Обуздание Elementor ──────────────────────────────────── */
/* Полосу контента держит тема: в full_width Elementor свой content_width игнорирует. */
body .elementor-section > .elementor-container{
  max-width:var(--flk-wrap);
  padding-inline:var(--flk-pad);
}
/* Собственные 10px паддинга колонок — ритм задаёт тема. */
body .elementor-column > .elementor-widget-wrap{padding:0}
/* Ширину колонки Elementor печатает своим правилом позже темы — вес поднят через body. */
body .elementor-section[class*="flk-"] > .elementor-container > .elementor-column{width:100%}
/* Колонка — вертикальный стек во всю ширину. */
body .elementor-column > .elementor-widget-wrap{display:flex;flex-direction:column;align-items:stretch}
/* Цвет забираем у набора, размеры остаются за h1/h2/h3 темы. */
body .elementor-widget-heading .elementor-heading-title{color:inherit}
body .elementor-widget-text-editor{color:inherit}
body .elementor-widget-text-editor p:first-child{margin-top:0}
body .elementor-widget-text-editor p:last-child{margin-bottom:0}
body .elementor-widget:not(:last-child){margin-bottom:0}
/* Вложенная секция не должна повторять полосу родителя. */
body .elementor-section.elementor-inner-section > .elementor-container{max-width:none;padding-inline:0}

/* ── Плита ────────────────────────────────────────────────
   Полосу контента плита НЕ меняет: текст внутри стоит там же, где везде.
   Подложка рисуется отдельным слоем, вписанным на полполя внутрь —
   так плита шире текста на любой ширине, а не только пока работает max-width.
   🔴 Раньше плита была сужённым контейнером с половинным полем: на 1920 это
   совпадало с полосой, а на 1280 max-width переставал работать, и текст внутри
   плиты уезжал на 40px от остальной страницы. */
body .flk-plate > .elementor-container{position:relative;isolation:isolate}
body .flk-plate > .elementor-container::before{
  content:"";position:absolute;z-index:-2;inset-block:0;
  left:calc(var(--flk-pad)/2);right:calc(var(--flk-pad)/2);
  border-radius:var(--flk-r-lg);
}

/* ── Сетки секций ─────────────────────────────────────────── */
body .flk-g2 > .elementor-container,
body .flk-g3 > .elementor-container,
body .flk-g4 > .elementor-container,
body .flk-split > .elementor-container,
body .flk-row-price > .elementor-container,
body .flk-crow > .elementor-container,
body .flk-cta > .elementor-container,
body .flk-shead > .elementor-container{display:grid;gap:var(--flk-gap)}

body .flk-g2 > .elementor-container{grid-template-columns:repeat(2,minmax(0,1fr))}
body .flk-g3 > .elementor-container{grid-template-columns:repeat(3,minmax(0,1fr))}
body .flk-g4 > .elementor-container{grid-template-columns:repeat(4,minmax(0,1fr))}
body .flk-split > .elementor-container{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
body .flk-row-price > .elementor-container{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;align-items:baseline}
body .flk-crow > .elementor-container{grid-template-columns:200px minmax(0,1fr);align-items:baseline}
body .flk-cta > .elementor-container{grid-template-columns:minmax(0,1fr) auto;align-items:center}

/* ── Шаг секций ───────────────────────────────────────────── */
body .flk-sec{padding-block:var(--flk-sect)}
body .flk-sec-tight{padding-block:0 var(--flk-sect)}
body .flk-shead{padding-block:var(--flk-sect) 64px}
body .flk-shead-tight{padding-block:0 64px}
body .flk-shead > .elementor-container{grid-template-columns:repeat(2,minmax(0,1fr));align-items:end}

/* ── Типографские классы ──────────────────────────────────── */
body .flk-lede{color:var(--flk-ink2);font-size:var(--flk-lede);line-height:1.5;max-width:52ch}
body .flk-note,body .flk-small{color:var(--flk-ink3);font-size:var(--flk-small)}
body .flk-dim{color:var(--flk-ink2);font-size:var(--flk-small);line-height:1.5}

/* ── Кнопка ───────────────────────────────────────────────── */
body .elementor-widget-button .elementor-button{
  display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:100px;
  background-color:var(--flk-red);color:#fff;
  padding:20px 36px;min-height:60px;
  font-family:inherit;font-size:var(--flk-body);font-weight:500;line-height:1;
  text-decoration:none;box-shadow:none;
}
body .elementor-widget-button .elementor-button:hover,
body .elementor-widget-button .elementor-button:focus{background-color:var(--flk-red-h);color:#fff}
body .elementor-widget-button .elementor-button:focus-visible{outline:2px solid var(--flk-red);outline-offset:3px}

/* ── Шапка темы ───────────────────────────────────────────── */
.flk-header{background:var(--flk-ground)}
.flk-header .flk-band{
  max-width:var(--flk-wrap);margin:0 auto;padding-inline:var(--flk-pad);
  display:flex;align-items:center;gap:32px;min-height:84px;
}
.flk-mark{display:flex;align-items:center;min-height:44px;gap:12px;font-size:24px;font-weight:700;
  letter-spacing:-.02em;color:var(--flk-ink);text-decoration:none}
.flk-mark::before{content:"";width:24px;height:24px;border-radius:6px;background:var(--flk-red);flex:none}
.flk-nav{margin-inline:auto}
.flk-nav ul{display:flex;gap:34px;margin:0;padding:0;list-style:none}
.flk-nav a{color:var(--flk-ink2);text-decoration:none;font-size:var(--flk-small);
  display:inline-flex;align-items:center;min-height:44px}
.flk-nav a:hover{color:var(--flk-ink)}
.flk-tel{display:inline-flex;align-items:center;min-height:44px;color:var(--flk-ink);
  text-decoration:none;font-size:var(--flk-body);font-weight:500;white-space:nowrap}

/* ── 1. Первый экран ──────────────────────────────────────── */
body .flk-hero > .elementor-container{
  color:#fff;min-height:760px;display:flex;flex-direction:column;
  padding-block:88px 56px;
}
/* подложка полотна */
body .flk-hero > .elementor-container::before{
  background:radial-gradient(120% 100% at 68% 18%,#3A4147 0%,#23282D 42%,#101315 100%);
}
/* затемнение поверх фотографии, но под текстом */
body .flk-hero > .elementor-container::after{
  content:"";position:absolute;z-index:-1;inset-block:0;
  left:calc(var(--flk-pad)/2);right:calc(var(--flk-pad)/2);
  border-radius:var(--flk-r-lg);
  background:linear-gradient(90deg,rgba(9,11,12,.88) 0%,rgba(9,11,12,.55) 46%,rgba(9,11,12,.10) 100%);
}
body .flk-hero .flk-hero-col > .elementor-widget-wrap{height:100%;gap:0}
body .flk-hero h1{max-width:16ch}
/* Фотография покупателя ложится под затемнение. */

body .flk-hero-facts{margin-top:auto;padding-top:72px}
body .flk-hero-facts > .elementor-container{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--flk-gap)}
body .flk-fact{font-size:var(--flk-small);line-height:1.5;color:rgba(255,255,255,.82);max-width:30ch}
body .flk-hero-facts .elementor-column > .elementor-widget-wrap::before{
  content:"⚙";flex:none;width:48px;height:48px;border-radius:50%;
  border:1px solid var(--flk-line-d);display:grid;place-items:center;
  margin-bottom:20px;font-size:19px;color:#fff;
}
body .flk-hero-facts .elementor-column:nth-child(2) > .elementor-widget-wrap::before{content:"✓"}
body .flk-hero-facts .elementor-column:nth-child(3) > .elementor-widget-wrap::before{content:"◷"}

body .flk-hero-cta{margin-top:56px;padding-top:36px;border-top:1px solid var(--flk-line-d)}
body .flk-hero-cta > .elementor-container{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--flk-gap);align-items:center}
body .flk-hero-cta .flk-note{color:rgba(255,255,255,.62)}
body .flk-hero-cta .elementor-widget-button .elementor-button{width:auto;align-self:start}

/* ── 2. Доверие ───────────────────────────────────────────── */
body .flk-trust{padding-block:72px}
body .flk-trust > .elementor-container{padding-bottom:72px;border-bottom:1px solid var(--flk-line)}
body .flk-tn{font-size:44px;font-weight:600;letter-spacing:-.03em;line-height:1.1;
  font-variant-numeric:tabular-nums;margin-bottom:8px}
body .flk-trust .flk-dim{color:var(--flk-ink2)}

/* ── 3. Цены ──────────────────────────────────────────────── */
body .flk-row-price{padding-block:0}
body .flk-row-price > .elementor-container{padding-block:34px;border-top:1px solid var(--flk-line)}
body .flk-row-price-last > .elementor-container{border-bottom:1px solid var(--flk-line)}
body .flk-sum{font-size:28px;font-weight:600;letter-spacing:-.02em;white-space:nowrap;
  font-variant-numeric:tabular-nums}
body .flk-row-price .flk-col-sum > .elementor-widget-wrap{align-items:flex-end}

/* ── 4. Как работаем ──────────────────────────────────────── */
body .flk-steps .elementor-column > .elementor-widget-wrap{border-top:2px solid var(--flk-ink);padding-top:28px}
body .flk-step-n{color:var(--flk-red);font-size:var(--flk-small);font-weight:600;margin-bottom:14px}
body .flk-steps .flk-dim{margin-top:12px}

/* ── 5. Гарантия ──────────────────────────────────────────── */
body .flk-guar > .elementor-container{color:#fff;padding-block:96px}
body .flk-guar > .elementor-container::before{background:var(--flk-dark)}
body .flk-guar .flk-lede{color:rgba(255,255,255,.72);margin-top:28px}
body .flk-gcard > .elementor-container{border:1px solid var(--flk-line-d);border-radius:var(--flk-r-md);padding:var(--flk-gap)}
body .flk-gcard + .flk-gcard{margin-top:var(--flk-gap)}
body .flk-gcard .flk-dim{color:rgba(255,255,255,.66);margin-top:10px}

/* ── 6. Работы ────────────────────────────────────────────── */
body .flk-cases .elementor-column > .elementor-widget-wrap{
  background:var(--flk-ground2);border-radius:var(--flk-r-md);overflow:hidden;height:100%;
}
body .flk-cases .elementor-widget-shortcode{margin:0}
body .flk-cases h3{padding:var(--flk-gap) var(--flk-gap) 0}
body .flk-cases .flk-dim{padding:12px var(--flk-gap) var(--flk-gap)}

/* ── 7. Отзывы ────────────────────────────────────────────── */
body .flk-revs .elementor-column > .elementor-widget-wrap{
  border:1px solid var(--flk-line);border-radius:var(--flk-r-md);
  padding:var(--flk-gap);height:100%;
}
body .flk-quote{font-size:var(--flk-lede);line-height:1.5;font-weight:300;letter-spacing:-.01em}
body .flk-who{color:var(--flk-ink3);font-size:var(--flk-small);margin-top:auto;padding-top:32px}

/* ── 8. Вопросы ───────────────────────────────────────────── */
body .flk-q{border-top:1px solid var(--flk-line);padding-top:32px}
body .flk-a{color:var(--flk-ink2);font-size:var(--flk-small);margin-top:12px;
  padding-bottom:32px;max-width:62ch}
body .flk-a-last{border-bottom:1px solid var(--flk-line)}

/* ── 9. Призыв ────────────────────────────────────────────── */
body .flk-cta > .elementor-container{padding-block:96px}
body .flk-cta > .elementor-container::before{background:var(--flk-ground2)}
body .flk-cta .flk-lede{margin-top:20px}
body .flk-cta .flk-col-btn > .elementor-widget-wrap{align-items:flex-end}

/* Форма записи: три поля в столбец справа от призыва.
   Виджетной формы в бесплатном Elementor нет — это Contact Form 7,
   а вид ей задаёт тема. */
body .flk-cta .wpcf7{width:min(420px,100%)}
body .flk-cta .wpcf7 form{display:flex;flex-direction:column;gap:12px}
body .flk-cta .wpcf7 form > p{margin:0;display:flex;flex-direction:column;gap:12px}
/* Contact Form 7 ставит между полями <br>: во flex это отдельный элемент
   высотой в строку, и разрыв между полями становится 47px вместо 12. */
body .flk-cta .wpcf7 form br{display:none}
body .flk-cta .wpcf7 .wpcf7-form-control-wrap{display:block;width:100%}
body .flk-cta .wpcf7 input[type=text],
body .flk-cta .wpcf7 input[type=tel]{
  width:100%;min-height:56px;padding:16px 20px;
  border:1px solid var(--flk-line);border-radius:var(--flk-r-md);
  background:var(--flk-ground);color:var(--flk-ink);
  font-family:inherit;font-size:var(--flk-small);
}
body .flk-cta .wpcf7 input[type=text]:focus,
body .flk-cta .wpcf7 input[type=tel]:focus{outline:2px solid var(--flk-red);outline-offset:1px}
body .flk-cta .wpcf7 input[type=submit]{
  min-height:56px;padding:16px 32px;border:0;border-radius:var(--flk-r-md);
  background:var(--flk-red);color:#fff;font-family:inherit;
  font-size:var(--flk-small);font-weight:600;cursor:pointer;
}
body .flk-cta .wpcf7 input[type=submit]:hover{background:var(--flk-red-h)}
body .flk-cta .wpcf7 .wpcf7-spinner{display:none}
body .flk-cta .wpcf7-not-valid-tip{color:var(--flk-red);font-size:15px;margin-top:6px}
body .flk-cta .wpcf7 form .wpcf7-response-output{
  margin:12px 0 0;padding:12px 16px;border:1px solid var(--flk-line);
  border-radius:var(--flk-r-md);font-size:15px;
}

/* ── 10. Контакты ─────────────────────────────────────────── */
body .flk-crow > .elementor-container{padding-block:28px;border-top:1px solid var(--flk-line)}
body .flk-crow-last > .elementor-container{border-bottom:1px solid var(--flk-line)}
body .flk-clabel{color:var(--flk-ink3);font-size:var(--flk-small)}
body .flk-cont-left .flk-lede{margin-top:28px}

/* ── Фотография блока ─────────────────────────────────────── */
.flk-photo{
  position:relative;overflow:hidden;width:100%;min-height:420px;
  background:radial-gradient(120% 100% at 68% 18%,#3A4147 0%,#23282D 42%,#101315 100%);
}
.flk-photo::after{content:"";position:absolute;inset:0;background:
  radial-gradient(30% 34% at 70% 40%,rgba(196,208,216,.28),rgba(0,0,0,0) 70%),
  radial-gradient(46% 40% at 22% 86%,rgba(0,0,0,.5),rgba(0,0,0,0) 70%)}
.flk-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ── Подвал темы ──────────────────────────────────────────── */
.flk-footer{border-top:1px solid var(--flk-line)}
.flk-footer .flk-band{
  max-width:var(--flk-wrap);margin:0 auto;padding-inline:var(--flk-pad);
  padding-block:40px;display:flex;gap:32px;flex-wrap:wrap;
  color:var(--flk-ink3);font-size:var(--flk-small);
}
.flk-footer .flk-band span:last-child{margin-left:auto}
.flk-footer a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.flk-footer a:hover{color:var(--flk-ink)}

/* ── Телефон ──────────────────────────────────────────────── */
@media (max-width:1023px){
  body .flk-g2 > .elementor-container,
  body .flk-g3 > .elementor-container,
  body .flk-g4 > .elementor-container,
  body .flk-split > .elementor-container,
  body .flk-shead > .elementor-container,
  body .flk-hero-facts > .elementor-container,
  body .flk-hero-cta > .elementor-container,
  body .flk-cta > .elementor-container,
  body .flk-row-price > .elementor-container,
  body .flk-crow > .elementor-container{grid-template-columns:minmax(0,1fr)}
  body .flk-hero > .elementor-container{min-height:0;padding-block:64px 40px}
  body .flk-hero > .elementor-container::after{
    background:linear-gradient(180deg,rgba(9,11,12,.72) 0%,rgba(9,11,12,.92) 100%)}
  body .flk-hero-facts{padding-top:48px}
  body .flk-hero-facts > .elementor-container{row-gap:36px}
  body .flk-guar > .elementor-container,
  body .flk-cta > .elementor-container{padding-block:56px}
  body .flk-cta .flk-col-btn > .elementor-widget-wrap{align-items:stretch;margin-top:32px}
  body .flk-row-price .flk-col-sum > .elementor-widget-wrap{align-items:flex-start;margin-top:10px}
  body .flk-shead{padding-block:var(--flk-sect) 40px}
  body .flk-shead-tight{padding-block:0 40px}
  .flk-nav{display:none}
  .flk-header .flk-band{min-height:68px;gap:16px}
  .flk-footer .flk-band span:last-child{margin-left:0}
}

/* ── Фотография первого экрана ────────────────────────────
   Лежит в слое подложки, поэтому вписана так же, как плита.
   🔴 Колонки Elementor позиционированы, и без сброса фото считало
   свои left/right от колонки: кадр выходил 1520×602 вместо 1600×760,
   и по краям плиты оставались тёмные полосы. */
body .flk-hero .elementor-column,
body .flk-hero .elementor-widget-wrap,
body .flk-hero .elementor-widget{position:static}
body .flk-hero img.flk-hero-photo{
  position:absolute;z-index:-2;top:0;
  left:calc(var(--flk-pad)/2);
  width:calc(100% - var(--flk-pad));height:100%;
  object-fit:cover;border-radius:var(--flk-r-lg);
}

/* 🔴 Набор Elementor отдаёт заголовкам не только цвет, но и НАЧЕРТАНИЕ:
   виджет heading приезжал весом 600, и тонкий заголовок шаблона превращался
   в жирный. Размеры при этом не трогаем — на них своя грабля. */
body .elementor-widget-heading h1.elementor-heading-title,
body .elementor-widget-heading h2.elementor-heading-title{font-weight:300}
body .elementor-widget-heading h3.elementor-heading-title{font-weight:600}
body .elementor-widget-heading .elementor-heading-title b,
body .elementor-widget-heading .elementor-heading-title strong{font-weight:600}

/* Колонка первого экрана тянется на всю высоту полотна:
   без этого margin-top:auto у фактов не работает и внизу остаётся пустота. */
body .flk-hero > .elementor-container > .elementor-column{flex:1;display:flex;flex-direction:column}
body .flk-hero .flk-hero-col > .elementor-widget-wrap{flex:1}

/* Факты прижимаются к низу полотна: правило на секции проигрывало Elementor,
   вес поднят через родителя — иначе под кнопкой оставался пустой хвост. */
body .flk-hero .flk-hero-facts{margin-top:auto}

/* Линия под последним ответом шла по ширине текста, а не колонки:
   ограничение длины строки переносим на сам абзац. */
body .flk-a{max-width:none}
body .flk-a p{max-width:62ch}

/* 🔴 Общее «margin-bottom:0» у виджетов Elementor (два класса) перебивало
   отступ под цифрой доверия — вес поднят через секцию. */
body .flk-trust .flk-tn{margin-bottom:8px}

/* Подпись в карточке гарантии прилипала к заголовку. */
body .flk-gcard .flk-dim{margin-top:14px}

/* Подвал: три колонки жили каждая на своей высоте — ссылки внутри
   средней выше текста соседей из-за min-height касания. */
.flk-footer .flk-band{align-items:center}

/* 🔴 Правило «вложенная секция не повторяет полосу родителя» (три класса)
   съедало боковые поля карточки: текст стоял в 1px от рамки, а сверху
   и снизу отступ был — потому и выглядело прилипшим только по бокам. */
body .elementor-section.flk-gcard > .elementor-container{padding-inline:var(--flk-gap)}