/*
Theme Name: KRONA v5
Template: krona
Version: 1.4.0
Author: KRONA
Description: Новый дизайн главной страницы KRONA (siemens-манера, Manrope). Дочерняя тема поверх Krona.
*/

:root { --ink: #000028; --ink-2: #33334f; --ink-3: #6b6b80; --line: #d6d6de; --sand: #f3f3f0; --teal: #00cccc; --mint: #ccf2ec; --petrol: #007993; }
/* Устаревшие сниппеты WPCode переопределяют переменные --ink и --line через :root (не !important,
   но позже по порядку подключения) — из-за этого весь macket в блоке .krona-v5 получал чужой
   оттенок navy (#0F172A вместо #000028) и чужой цвет линий. Восстанавливаем переменные внутри
   области темы с !important — это побеждает независимо от порядка подключения стилей. */
.krona-v5 { --ink: #000028 !important; --line: #d6d6de !important; }
/* Тема сайта (Elementor/родительская тема) навязывает свой шрифт (Inter) напрямую на h1-h6 и другие
   теги с более сильным приоритетом, чем унаследованный font-family на body — из-за этого макет
   визуально показывал не Manrope. Перекрываем принудительно во всём блоке макета. */
.krona-v5, .krona-v5 * { font-family: 'Manrope', 'Segoe UI', Arial, sans-serif !important; }
body.krona-v5 { margin: 0; color: var(--ink); background: #ffffff; -webkit-font-smoothing: antialiased; font-size: 16px; line-height: 24px; }
/* Строка логотипа/утилит хедера иногда не перерисовывалась браузером (белый текст/лого пропадали
   визуально при полностью корректном DOM) — создаём отдельный composite-слой, чтобы обойти этот
   баг рендеринга. */
.krona-v5 .nav { position: relative; z-index: 1; }
/* Устаревшие сниппеты WPCode (унаследованы от прежней версии главной, вне тем krona-v5)
   принудительно (!important, высокая специфичность через .hero-slide/#heroSlider) переопределяют
   размер заголовка hero (H1) через clamp()/фиксированные px. Побеждаем через ID-селектор — он
   всегда сильнее селекторов на классах, независимо от их количества. */
#krona-hero-h1 { font-size: 40px !important; line-height: 48px !important; font-weight: 800 !important; letter-spacing: -0.005em !important; }
.krona-v5 a { color: var(--ink) !important; text-decoration: none !important; }
.krona-v5 a:hover { color: var(--petrol) !important; }
.krona-v5 h1, .krona-v5 h2, .krona-v5 h3, .krona-v5 p { margin: 0; }
.krona-v5 .wrap { width: 1296px; max-width: 100%; margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
.krona-v5 .kicker { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.krona-v5 .h1 { font-size: 40px; line-height: 48px; font-weight: 800; letter-spacing: -0.005em; }
.krona-v5 .h2 { font-size: 32px; line-height: 40px; font-weight: 800; letter-spacing: -0.005em; }
.krona-v5 .h3 { font-size: 24px; line-height: 32px; font-weight: 400; }
.krona-v5 .tile-title { font-size: 20px; line-height: 26px; font-weight: 600; }
.krona-v5 .lead { font-size: 16px; line-height: 24px; color: var(--ink-2); }
.krona-v5 .txt { font-size: 14px; line-height: 21px; color: var(--ink-2); }
/* Устаревшие сниппеты WPCode содержат общее правило для класса .btn (border-radius, padding,
   font-size, line-height, letter-spacing, border: 1.5px solid transparent — всё с !important),
   из-за чего кнопки .btn-out/.btn-teal/.btn-out-w теряли видимую рамку и получали чужие размеры.
   Дублируем нужные свойства с !important и той же (или большей) специфичностью, чтобы победить. */
.krona-v5 .btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 56px !important; padding: 0 24px !important; font-size: 16px !important; font-weight: 600 !important; line-height: normal !important; letter-spacing: normal !important; border-radius: 0 !important; white-space: nowrap !important; }
.krona-v5 .btn-teal { background: var(--teal); color: var(--ink) !important; border: none !important; }
.krona-v5 .btn-teal:hover { background: #00b8b8; color: var(--ink) !important; }
.krona-v5 .btn-out-w { border: 1px solid #ffffff !important; color: #ffffff !important; }
.krona-v5 .btn-out-w:hover { background: rgba(255,255,255,0.12); color: #ffffff !important; }
.krona-v5 .btn-out { height: 44px !important; padding: 0 20px !important; font-size: 14px !important; border: 1px solid var(--ink) !important; color: var(--ink) !important; }
.krona-v5 .btn-out:hover { background: var(--ink); color: #ffffff !important; }
.krona-v5 .more { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink) !important; }
.krona-v5 .more svg { flex: none; }
.krona-v5 .card:hover .h3, .krona-v5 .card:hover .more { color: var(--petrol) !important; }
.krona-v5 .img { display: block; width: 100%; height: 100%; object-fit: cover; }
.krona-v5 .frame { position: relative; overflow: hidden; }
.krona-v5 .nav a { color: #ffffff !important; }
.krona-v5 .nav a:hover { color: var(--teal) !important; }
.krona-v5 .tab { display: block; padding: 12px 16px; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink) !important; }
.krona-v5 .tab:hover { background: var(--sand); color: var(--ink) !important; }
.krona-v5 .tab-on { background: var(--mint); }
.krona-v5 .foot a { color: #b9bccd !important; font-size: 14px; line-height: 22px; }
.krona-v5 .foot a:hover { color: #ffffff !important; }
.krona-v5 .dot { width: 6px; height: 6px; border-radius: 50%; background: #9a9aa8; }
.krona-v5 .pill { display: flex; align-items: center; gap: 10px; height: 24px; padding: 0 14px; border-radius: 12px; background: #f3f3f0; border: 1px solid #d6d6de; }
.krona-v5 .arrow-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--ink); flex: none; }
.krona-v5 .row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

/* Пока без мобильной адаптации — только базовый безопасный фолбэк, чтобы не ломалось на узких экранах при предпросмотре */
@media (max-width: 1400px) {
  .krona-v5 .wrap { width: 100%; }
}