/* Стилі сторінки фарбування. Винесено з контенту 13.09.2026.
   Селектори на власних префіксах .a20h / .mk / .mkfaq — від обгортки теми не залежать,
   тому правки контенту їх не зламають (на сторінці Tesla префікс .entry-content саме цим і підвів).
   Щоб оновити: змінити $css у сніпеті й зберегти. */

.mk-final .b,.mk-final .t{text-decoration:none}

/* ── hero + картки + прайс ── */
.a20h{background:#fff;border:3px solid #BE2828;border-radius:20px;max-width:1200px;margin:40px auto;padding:56px 40px;display:flex;align-items:center;gap:40px;box-shadow:0 5px 25px rgba(0,0,0,.1)}.a20h-c{flex:1;min-width:300px}.a20h h1{font-size:2.3rem;font-weight:700;line-height:1.2;margin:0 0 14px;color:#000}.a20h-lead{font-size:1.1rem;line-height:1.6;color:#555;margin:0 0 22px}.a20h-cta{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-bottom:20px}.a20h-btn{display:inline-block;font-weight:700;font-size:14px;letter-spacing:.13em;text-transform:uppercase;background:#BE2828;border:2px solid #BE2828;border-radius:5px;padding:15px 34px;color:#fff;cursor:pointer;transition:all .3s ease}.a20h-btn:hover{background:#a02020;border-color:#a02020}.a20h-tel{display:inline-flex;align-items:center;justify-content:center;border:2px solid #BE2828;border-radius:5px;padding:13px 22px;color:#BE2828;text-decoration:none;transition:all .3s ease}.a20h-tel:hover{background:#fff5f5}.a20h-price{display:inline-flex;align-items:baseline;gap:7px;background:#fff5f5;border:1px solid #f0d0d0;border-radius:999px;padding:10px 18px;font-size:.95rem;color:#333;white-space:nowrap}.a20h-price b{color:#BE2828;font-size:1.05rem;font-weight:700}.a20h-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px 26px;margin:0 0 14px;padding:16px 0 0;border-top:1px solid #eee;list-style:none}.a20h-facts li{list-style:none;margin:0;padding:0}.a20h-facts li::marker{content:""}.a20h-facts li{font-size:.9rem;color:#555}.a20h-facts b{color:#000;font-weight:700}.a20h-geo{font-size:.85rem;line-height:1.5;color:#8a8a8a;margin:0}.a20h-img{flex:1;min-width:300px}.a20h-img img{width:100%;height:auto;border-radius:14px;display:block}@media(max-width:900px){.a20h{flex-direction:column;padding:30px 20px;gap:22px;margin:20px auto}.a20h-c,.a20h-c *{text-align:left}.a20h h1{font-size:1.65rem}.a20h-lead{font-size:1rem;margin-bottom:18px}.a20h-btn{padding:14px 26px;flex:1;text-align:center}.a20h-facts{grid-template-columns:1fr;gap:8px}}.mk{max-width:1200px;margin:40px auto;padding:0 20px}.mk h2{font-size:2.1rem;font-weight:700;color:#000;margin:0 0 14px;line-height:1.25}.mk-lead{font-size:1.05rem;line-height:1.65;color:#555;margin:0 0 30px;max-width:70ch}.mk-price{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:18px}.mk-item{background:#fff;border:1px solid #e6e2de;border-radius:12px;padding:20px 22px;box-shadow:0 2px 10px rgba(0,0,0,.04)}.mk-item h3{font-size:1.12rem;font-weight:600;color:#000;margin:0 0 6px;line-height:1.3}.mk-item .p{display:inline-block;background:#fff5f5;border:1px solid #f0d0d0;border-radius:999px;padding:5px 14px;font-weight:700;color:#BE2828;font-size:1.05rem;margin-bottom:9px}.mk-item p{font-size:.93rem;line-height:1.6;color:#666;margin:0}.mk-tbl{width:100%;border-collapse:collapse;border-radius:12px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.05)}.mk-tbl th{background:#BE2828;color:#fff;text-align:left;padding:13px 16px;font-size:.95rem}.mk-tbl td{padding:13px 16px;border-bottom:1px solid #eee;background:#fff}.mk-tbl tr:last-child td{border-bottom:0}.mk-tbl td:last-child{text-align:right;font-weight:700;white-space:nowrap}.mk-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.mk-cards-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.mk-cards-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}}.mk-card{background:#f8f9fa;border-radius:14px;padding:24px}.mk-card h3{font-size:1.15rem;color:#BE2828;margin:0 0 8px}.mk-card p{font-size:.95rem;line-height:1.6;color:#555;margin:0}
.mk-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.mk-link{display:block;background:#fff;border:1px solid #e6e2de;border-radius:14px;padding:20px 22px;text-decoration:none;color:inherit;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}
.mk-link:hover{border-color:#BE2828;box-shadow:0 4px 16px rgba(190,40,40,.1);transform:translateY(-2px)}
.mk-link b{display:block;font-size:1.02rem;color:#BE2828;margin-bottom:6px;line-height:1.3}
.mk-link span{display:block;font-size:.9rem;line-height:1.5;color:#666}
.mk-link:focus-visible{outline:3px solid #1b6ec2;outline-offset:3px}.mk-two{display:grid;grid-template-columns:1fr 1fr;gap:20px}.mk-opt{border:1px solid #e6e2de;border-radius:14px;padding:24px;background:#fff}.mk-opt.win{border:2px solid #BE2828;box-shadow:0 4px 16px rgba(190,40,40,.1)}.mk-opt h3{margin:0 0 10px;font-size:1.2rem;color:#000}.mk-opt .big{font-family:inherit;font-size:1.7rem;font-weight:700;color:#BE2828;margin:0 0 8px}.mk-opt p{font-size:.95rem;line-height:1.6;color:#666;margin:0}.mk-faq{display:grid;gap:12px}.mk-q{background:#f8f9fa;border:1px solid #e9ecef;border-radius:12px;padding:20px 24px}.mk-q h3{margin:0 0 8px;font-size:1.08rem;color:#000;font-weight:600}.mk-q p{margin:0;font-size:.96rem;line-height:1.65;color:#555}.mk-final{background:#BE2828;border-radius:20px;padding:44px 40px;text-align:center;color:#fff;margin:44px auto}.mk-final h2{color:#fff;margin:0 0 12px}.mk-final p{font-size:1.05rem;line-height:1.6;margin:0 0 24px;opacity:.94}.mk-final .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;align-items:center}.mk-final .b{display:inline-block;background:#fff;color:#BE2828;font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;padding:15px 34px;border-radius:5px;cursor:pointer;border:2px solid #fff}.mk-final .t{display:inline-block;border:2px solid #fff;border-radius:5px;padding:13px 26px;color:#fff;text-decoration:none;font-weight:700}@media(max-width:760px){.mk h2{font-size:1.55rem}.mk-two{grid-template-columns:1fr}.mk-final{padding:32px 22px}
/* без цього таблиця з відступами 13x16 і nowrap на колонці цін не влазила
   в 314px і сторінка їхала вбік на 10px */
.mk-tbl{font-size:.88rem}.mk-tbl th,.mk-tbl td{padding:10px 9px}}

/* ── таймлайн «Як проходить робота» ── */
.mk-tl{position:relative;max-width:860px;margin:0;padding:4px 0}.mk-tl::before{content:"";position:absolute;left:19px;top:22px;bottom:22px;width:2px;background:#e6ddd8}.mk-step{position:relative;display:grid;grid-template-columns:40px 1fr;gap:18px;align-items:start;padding:0 0 26px}.mk-step:last-child{padding-bottom:0}.mk-dot{position:relative;z-index:1;width:40px;height:40px;border-radius:50%;background:#BE2828;color:#fff;font-weight:700;font-size:.98rem;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 5px #fff;font-variant-numeric:tabular-nums}.mk-txt{padding-top:8px;font-size:1rem;line-height:1.65;color:#666}.mk-txt b{color:#000;font-weight:700}@media(max-width:760px){.mk-tl::before{left:16px}.mk-step{grid-template-columns:34px 1fr;gap:14px;padding-bottom:22px}.mk-dot{width:34px;height:34px;font-size:.9rem;box-shadow:0 0 0 4px #fff}.mk-txt{padding-top:5px;font-size:.96rem}}

/* ── FAQ ── */
.mkfaq{background:#fff;border:3px solid #BE2828;border-radius:20px;max-width:1200px;margin:60px auto;padding:60px 20px}.mkfaq-head{text-align:center;margin-bottom:44px}.mkfaq-head h2{font-size:2.2rem;font-weight:700;color:#000;margin:0 0 14px}.mkfaq-head p{font-size:1.08rem;line-height:1.6;color:#666;max-width:800px;margin:0 auto}.mkfaq-list{max-width:900px;margin:0 auto}.mkfaq-item{background:#f8f9fa;border:2px solid #e9ecef;border-radius:12px;margin-bottom:15px;overflow:hidden}.mkfaq-h{width:100%;background:#f8f9fa;color:#000;border:0;padding:22px 26px;font-size:1.15rem;font-weight:600;text-align:left;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:15px;transition:background .3s ease;font-family:inherit}.mkfaq-h:hover{background:#e9ecef}.mkfaq-a{font-size:1.1rem;color:#BE2828;transition:transform .3s ease;flex-shrink:0}.mkfaq-item.on .mkfaq-a{transform:rotate(180deg)}.mkfaq-c{background:#fff;max-height:0;overflow:hidden;transition:max-height .5s ease}.mkfaq-in{padding:0 26px 26px}.mkfaq-in p{color:#666;line-height:1.65;margin:0;font-size:1rem}@media(max-width:760px){.mkfaq{padding:34px 14px;margin:34px auto}.mkfaq-head h2{font-size:1.5rem}.mkfaq-h{font-size:1rem;padding:18px 18px}.mkfaq-in{padding:0 18px 20px}}


@media(max-width:760px){.mk-full{grid-template-columns:1fr;gap:16px;padding:22px 20px}.mk-full .big{font-size:1.7rem}}


/* ── галерея цеху + лайтбокс ── */
.mk-gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;max-width:1100px;margin-left:auto;margin-right:auto}
.mk-gi{display:block;border-radius:14px;overflow:hidden;aspect-ratio:1/1;max-width:100%;background:#f0ece8;cursor:zoom-in;border:1px solid #e6e2de}
.mk-gi img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.mk-gi:hover img{transform:scale(1.04)}
.mk-gi:focus-visible{outline:3px solid #1b6ec2;outline-offset:3px}
.mk-lb{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99999;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;padding:24px}
.mk-lb.on{display:flex}
.mk-lb-in{max-width:1100px;width:100%;text-align:center}
.mk-lb-in img{width:auto!important;height:auto!important;max-width:100%!important;max-height:80vh!important;object-fit:contain!important;border-radius:8px}
.mk-lb-cap{color:#fff;margin:14px 0 0;font-size:.95rem;line-height:1.5}
.mk-lb-x{position:absolute;top:16px;right:16px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;font-size:28px;background:transparent;border:0;color:#fff;cursor:pointer;line-height:1;z-index:1}
.mk-lb-x:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media(max-width:600px){.mk-gal{grid-template-columns:1fr}}


/* ── якорі верхнього меню теми. Шапка fixed заввишки 169px, тому без
      scroll-margin-top заголовок секції ховався б під нею. ── */
#generator,#starter,#diagnostic,#zapis,#faq,#price-generator,#price-starter,#contacts{scroll-margin-top:185px}
@media(max-width:900px){#generator,#starter,#diagnostic,#zapis,#faq,#price-generator,#price-starter,#contacts{scroll-margin-top:90px}}


/* Випадайка «Ціни» у верхній панелі веде на ті самі дві секції, що й
   «Ремонт стартера» / «Ремонт генератора» — прайс саме там і живе.
   Панель зашита в header.php під is_singular('services'), тому ховаємо стилями,
   не чіпаючи тему. */
.header_single .menu_hover{display:none}

/* ── пара кнопок у героєві ──
   Дві дії поруч мають читатися як пара. До цього вони такою не виглядали:
   у однієї рамка 2 px, у другої ні — звідси різна висота; паддінги 15/34
   проти 13/22 — звідси різна ширина; і набір різний, одна капсом
   із розрядкою, друга звичайним жирним.
   Тут вони описані разом і однаково, а різняться лише заливкою.
   Клас .a20h-tel лишився з часів, коли друга кнопка була телефоном.
   Назву не чіпаємо навмисно: перейменування = ще одна правка живої
   сторінки заради нічого. Читати як «друга кнопка героя». */
.a20h-cta{gap:14px}
.a20h-btn,.a20h-tel{
 display:inline-flex;align-items:center;justify-content:center;gap:10px;
 box-sizing:border-box;flex:1 1 200px;min-height:58px;padding:0 26px;
 font-weight:700;font-size:14px;line-height:1.15;letter-spacing:.11em;
 text-transform:uppercase;text-align:center;text-decoration:none;
 border:2px solid #BE2828;border-radius:5px;cursor:pointer;
 transition:background .25s ease,border-color .25s ease,color .25s ease}
.a20h-btn{background:#BE2828;color:#fff}
.a20h-btn:hover{background:#a02020;border-color:#a02020}
.a20h-tel{background:#fff;color:#BE2828}
.a20h-tel:hover{background:#fff5f5}
.a20h-tg svg{width:19px;height:19px;flex-shrink:0}
/* На вузькому екрані «НАПИСАТИ В TELEGRAM» капсом із розрядкою не влазить
   у рядок — зменшуємо розрядку й даємо кнопкам стати одна під одною. */
@media(max-width:620px){
 .a20h-btn,.a20h-tel{flex:1 1 100%;letter-spacing:.06em;padding:0 16px;font-size:13.5px}
}

/* ── та сама пара у фінальному блоці ──
   Тут було те саме: 276×52 проти 213×51, одна капсом із розрядкою,
   друга звичайним 16 px. Описуємо разом, різниця лише в заливці. */
/* Центровану пару рівняємо сіткою: колонки однакової ширини беруть розмір
   за найширшою кнопкою. Через flex цього не досягти — там кожна кнопка
   міряється за своїм текстом, і 266 проти 251 читається як недбалість. */
.mk-final .row{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:14px;justify-content:center}
@media(max-width:620px){.mk-final .row{display:grid;grid-auto-flow:row;width:100%}}
.mk-final .b,.mk-final .t{
 display:inline-flex;align-items:center;justify-content:center;
 box-sizing:border-box;min-height:56px;padding:0 30px;
 font-weight:700;font-size:14px;line-height:1.15;letter-spacing:.11em;
 text-transform:uppercase;text-align:center;text-decoration:none;
 border:2px solid #fff;border-radius:5px;cursor:pointer;
 transition:background .25s ease,color .25s ease}
.mk-final .b{background:#fff;color:#BE2828}
.mk-final .b:hover{background:#f3eae8}
.mk-final .t{background:transparent;color:#fff}
.mk-final .t:hover{background:rgba(255,255,255,.14)}
@media(max-width:620px){
 .mk-final .b,.mk-final .t{flex:1 1 100%;letter-spacing:.06em;padding:0 16px;font-size:13.5px}
}