/* спільні стилі блогу (винесено з інлайну 2026-08-14, одразу після main.css): docs/CSS-NOTES.md */
.sub-hero{ background:var(--night,#0f1728); color:#fff; padding:64px 24px 52px; }
.sub-hero .in{ max-width:1060px; margin:0 auto; }
.sub-hero h1{ font-size:38px; line-height:1.12; margin:0 0 12px; max-width:26ch; }
.sub-hero .meta{ font-size:15px; color:var(--on-dark-2,#aab4c5); }
.sub-hero .meta a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.crumbs-band{ background:var(--wash); } /* a7-084: колір першої секції під смужкою */
.crumbs{ position:static; z-index:auto; background:none; backdrop-filter:none; min-height:0;
  max-width:1060px; margin:0 auto; padding:16px 24px 0; font-size:14px; color:var(--muted); }
.crumbs ol{ list-style:none; margin:0; padding:0; }
.crumbs li{ display:inline; }
.crumbs li:not(:first-child)::before{ content:"\203A"; margin:0 7px; color:var(--muted); }
.section article{ max-width:66ch; margin:0 auto; text-align:left; }
.section article h2{ font-size:1.5em; margin:34px 0 10px; text-align:left; }
.section article p{ margin:0 0 15px; }
.section article ul, .section article ol{ margin:0 0 16px; padding-left:22px; }
.section article ul.checks{ list-style:none; padding:0; }
.section article ul.checks li{ position:relative; padding-left:28px; margin:0 0 10px; }
.section article ul.checks li::before{ content:"\2713"; position:absolute; left:0; color:var(--ok); font-weight:700; }
.section article dl{ margin:16px 0 0; }
.section article dt{ font-weight:600; color:var(--ink); margin:18px 0 4px; }
.section article dd{ margin:0 0 10px; color:var(--body); }
.section article img{ max-width:100%; height:auto; border-radius:12px; }
/* vis-47: docs/CSS-NOTES.md */
.section article img[src*="-car-keys-winnipeg.webp"]{ background:var(--wash); border-radius:var(--r-img); }
.endcta{ text-align:center; }
/* форма a.btn — у main.css (a7-194) */
a.btn-call{ background:var(--gold); color:var(--ink); }
a.btn-quote{ background:#fff; color:var(--accent); border:1px solid var(--accent); }
.cta-row{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:18px; }
@media (max-width:767px){ .sub-hero{ padding:48px 20px 40px; } .sub-hero h1{ font-size:28px; } }
/* a7-097: docs/CSS-NOTES.md */
a.btn-call:hover{ filter:brightness(.95); text-decoration:none; }
a.btn-quote:hover{ background:var(--wash); text-decoration:none; }

/* a7-084 · A1; межа 768/769 фото і підкладки — свідомо (прелоади в <head>): docs/CSS-NOTES.md */
.sub-hero{ position:relative; isolation:isolate; overflow:hidden;
  background:var(--night,#0f1728) url(/images/hero-shop-large-v2.webp) center/cover no-repeat; }
@media (max-width:1200px){ .sub-hero{ background-image:url(/images/hero-shop-medium.webp); } }
@media (max-width:1200px) and (min-resolution:1.5dppx){ .sub-hero{ background-image:url(/images/hero-shop-large-v2.webp); } }
@media (max-width:768px){ .sub-hero{ background-image:url(/images/hero-shop-small.webp); } }
@media (max-width:768px) and (min-resolution:1.5dppx){ .sub-hero{ background-image:url(/images/hero-shop-medium.webp); } }
.sub-hero::before{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, rgba(10,16,30,.95) 0%, rgba(10,16,30,.86) 40%, rgba(10,16,30,.77) 75%, rgba(10,16,30,.68) 100%); }
@media (max-width:768px){
  .sub-hero::before{ background:linear-gradient(180deg, rgba(10,16,30,.90) 0%, rgba(10,16,30,.84) 100%); }
}
/* друк: тло героя знімає main.css (.sub-hero{background:none !important}); тут — лише темна підкладка */
@media print{ .sub-hero::before{ display:none; } }

/* --- одне відео (.gkv1) — ті самі правила, що в sub.css (seo-34, a8-video-player): docs/CSS-NOTES.md --- */
.gkv1{margin:22px auto 4px;max-width:260px;text-align:center}
.gkv1-media{position:relative;width:230px;max-width:100%;margin:0 auto;aspect-ratio:9/16;border-radius:var(--r-card);overflow:hidden;background:#000}
.gkv1-play{margin:0;padding:0;border:0;background:none;cursor:pointer;display:block;width:100%;height:100%}
.gkv1-media img{width:100%;height:100%;object-fit:cover;display:block}
.gkv1-play:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.gkv1-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:rgba(0,0,0,.62);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;padding-left:4px}
.gkv1-media iframe{width:100%;height:100%;border:0;display:block}
.gkv1-cap{font-size:.85rem;color:var(--body);font-weight:600;margin:8px 2px 0;line-height:1.3}
/* vis-106: на телефоні підпис під відео не дрібніший за 14px (a7-189); «more on my channel» не рветься навпіл */
@media (max-width:767px){.gkv1-cap{font-size:.875rem}}
.gkv1-cap a{white-space:nowrap}
/* без JavaScript плитку з мертвою кнопкою ховаємо — посилання дає <noscript> у тому ж блоці */
html:not(.gk-js) .gkv1-media{display:none}
.gkv1-ns{margin:8px 2px 0;font-weight:600;line-height:1.3}
.section article .gkv1-media img{width:100%;height:100%;max-width:none;border-radius:0}
.section article .gkv1-cap, .section article .gkv1-ns{margin:8px 2px 0}