:root{
    --bg:#f7fafb; --card:#fff; --text:#121417; --muted:#5d6770;
    --accent:#0069c6; --accent-2:rgba(81, 233, 0, 1); --accent-600:#0069c6; --accent-600-2:rgba(91, 253, 0, 1); --line:#e2e8ec; --tint:#f0f7f9;
    --shadow:0 6px 24px rgba(0,0,0,.06);
    --radius:16px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
    color:var(--text); background:var(--bg); line-height:1.6;
}

/* Сброс clearfix для страницы статьи */
.post__layout::before,
.post__layout::after {

    display: none !important;
    content: none !important;
}

img{max-width:100%; height:auto;}
a{color:var(--accent-2); text-decoration:none}
a:hover{color:var(--accent-600-2)}
.links a{color:var(--accent-2); text-decoration:none}
.links a:hover{color:var(--accent-600-2); text-decoration: underline;}
.container {width:min(1200px, 100% - 32px); margin-inline:auto}
.container.post__layout {margin-bottom: 180px;padding-top: 28px;padding-bottom: 40px;}
.container.post-hero__inner{padding-top: 48px;padding-bottom: 48px;}
@media (max-width: 1500px){.container.post__layout {margin-bottom: 120px;}}
@media (max-width:1023px){.container.post__layout {margin-bottom: 60px;}}
/* Header */
.site-header{position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--line)}
.header__row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0}
.nav__toggle{display:none; border:1px solid var(--line); background:#fff; border-radius:12px; padding:8px 10px}
.nav__list{display:flex; gap:18px; list-style:none; margin:0; padding:0}
.header__cta{display:flex; gap:12px; align-items:center}
.header__cta .tel,.header__cta .mail{font-weight:600; color:#0c1013}

/* Mobile nav */
@media (max-width: 900px){
    .nav__toggle{display:inline-block}
    .nav__list{display:none; position:absolute; right:16px; top:64px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px; box-shadow:var(--shadow); flex-direction:column}
    .nav__list.is-open{display:flex}
}

/* Hero blog */
.blog-hero{background:linear-gradient(180deg,#0e1628 0,#152039 100%); color:#fff; padding:32px 0 28px}
.blog-hero h1{margin:0 0 6px; font-size:clamp(24px,4vw,38px); letter-spacing:-.01em}
.blog-hero .subtitle{margin:0 0 18px; color:#d7deea}
.blog-search{display:flex; gap:8px; margin:14px 0 16px}
.blog-search input{flex:1; height:44px; border-radius:12px; border:1px solid #304267; background:#1a2742; color:#fff; padding:0 12px}
.blog-search .btn{height:44px}
.blog-filters{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
.chip{padding:8px 12px; border:1px solid #304267; border-radius:999px; background:#1a2742; color:#cfe1ff; cursor:pointer}
.chip.is-active,.chip:hover{background:#2a3d69; color:#fff; border-color:#3b5aa7}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; background:var(--accent-2); color:#111; border:none; border-radius:12px; cursor:pointer; box-shadow:var(--shadow)}
.btn:hover,.btn:focus{background:var(--accent-600-2);}
.btn--ghost{background:#fff; color:var(--accent); border:1px solid var(--accent);}

/* Cards */
.cards{display:grid; gap:16px}
.cards--featured{grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:14px}
@media (max-width: 900px){ .cards--featured{grid-template-columns:1fr} }

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column}
.card__media img{width:100%; aspect-ratio: 16/9; object-fit:cover}
.card__body{padding:14px}
.card__cat{display:inline-block; font-size:12px; font-weight:700; color:#205e73; background:var(--tint); border:1px solid #cfe6ee; padding:4px 8px; border-radius:999px; margin-bottom:8px}
.card__title{margin:4px 0 6px; font-size:18px; line-height:1.35; color:#0c1013}
.card__title a{color:inherit}
.card__meta{margin:0 0 8px; color:var(--muted); font-size:13px}
.card__desc{margin:0}

/* Posts grid */
.posts-grid{display:grid; gap:16px; grid-template-columns:repeat(3,minmax(0,1fr)); padding:24px 0 32px}
@media (max-width: 1100px){ .posts-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 700px){ .posts-grid{grid-template-columns:1fr} }

/* CTA block */
.cta-block{background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:26px 0}
.cta__row{display:grid; grid-template-columns:1fr 360px; gap:24px; align-items:center}
.cta__aside{background:var(--tint); border:1px solid #cfe6ee; border-radius:var(--radius); padding:16px}
.subscribe{display:flex; gap:8px; margin-top:8px;flex-wrap: wrap}
.subscribe input{flex:1; height:44px; border:1px solid var(--line); border-radius:12px; padding:0 12px; background:#fff}
@media (max-width:900px){ .cta__row{grid-template-columns:1fr} }

/* Footer */
.site-footer{background:#0e1628; color:#cfd7e6; margin-top:24px}
.footer__grid{display:grid; gap:20px; grid-template-columns:1fr 1fr 1fr 1fr 1fr; padding:24px 0}
.footer__col h4{margin:0 0 10px; color:#fff}
.footer__col ul{list-style:none; margin:0; padding:0}
.footer__col a{color:#cfd7e6}
.footer__copy{border-top:1px solid #24314f; padding:10px 0 16px; color:#9fb0d0}
@media (max-width:1000px){ .footer__grid{grid-template-columns:1fr 1fr} }

/* --- Post page --- */
.read-progress{position:sticky; top:0; z-index:1000; height:3px; background:linear-gradient(90deg, var(--accent) 0 0) no-repeat #e9f1f4; background-size:0% 100%}
.post-hero{color:#fff; position: relative;min-height: 530px;height: 100%;}
.post-hero__image{position:absolute;left:50%;transform:translateX(-50%);width:100%;height:100%;
background:
        linear-gradient(180deg, rgba(14,22,40,.42), rgba(14,22,40,.75)),
        var(--hero, url('/assets/blog/cover-1.jpg')) bottom center/cover no-repeat;z-index: 1;}
.post-hero__inner{position:relative;color:#fff;padding:48px 0;z-index: 2;display:flex;flex-direction: column;height: 100%;min-height: 530px;}
.post-hero__inner-text {flex-grow: 1;height: 100%;}
.post-hero__title{margin:8px 0 6px; font-size:clamp(26px,4vw,40px); font-weight:900; letter-spacing:-.01em}
.post-hero__cat a{color:#cfe1ff; font-weight:700}
.post-meta{display:flex; align-items:center; gap:8px; color:#d7deea}
.post-meta img{border-radius:999px}
@media (max-width:1023px){
    .post-hero, .post-hero__inner{min-height: 400px;}
}
@media (max-width:767px){
    .post-hero, .post-hero__inner{min-height: auto;}
}
.breadcrumbs{display:flex; align-items:center; gap:8px; color:#cfe1ff; font-size:14px; margin-bottom:8px;flex-grow: 1;}
.breadcrumbs a{color:#cfe1ff}
.breadcrumbs .current{opacity:.9}

.post__layout{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:28px; align-items:start; padding:28px 0 180px;}
@media (max-width: 1000px){ .post__layout{grid-template-columns:1fr} }

.post__content{background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px}
.post__content .lead{font-size:18px; color:#2b3640}
.post__content h2{margin:18px 0 10px; font-size:22px}
.post__content h3{margin:18px 0 10px; font-size:18px}
.post__content p{margin:10px 0}
.post__content ul{margin:10px 0 10px 20px;padding-inline-start:20px!important;}
.tip{background:var(--tint); border:1px solid #cfe6ee; padding:12px; border-radius:12px}
.checklist{list-style: none; padding-left:0}
.checklist li{position:relative; padding-left:26px; margin:6px 0}
.checklist li::before{content:"✓"; position:absolute; left:0; top:0; color:#2a9a67; font-weight:900}

.toc{position:static; background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px; margin-bottom:16px}
#tocList{display:flex; flex-direction:column; gap:8px}
#tocList a{color:#0c1013}
#tocList a:hover,#tocList a:focus{color:var(--accent-2);}
#tocList a.active{color:var(--accent-2)}

.post__sidebar .widget{background:#fff; border:1px solid var(--line); border-radius:12px; padding:34px 14px; box-shadow:var(--shadow); margin-bottom:16px}
.links{list-style:none; padding:0; margin:0}
.links li{margin:8px 0}

/* Utilities */
.section-title{margin:0 0 8px}

/*Fix*/

.logo img{
    max-width: 60%;
}

/* --- Article rich content components --- */

/* Оглавление — теперь статичное */
.toc{position:static; background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px; margin-bottom:16px}

/* Таблица */
.table-wrap{overflow:auto; -webkit-overflow-scrolling:touch; margin:14px 0}
.table{width:100%; border-collapse:separate; border-spacing:0; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:var(--shadow)}
.table th,.table td{padding:12px 14px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line)}
.table thead th{background:var(--tint); font-weight:800; color:#0c1013}
.table tr:last-child td{border-bottom:none}
.table tbody tr:nth-child(odd){background:#fcfeff}

/* Нумерованный список */
.post__content ol{margin:12px 0 12px 20px; padding-left:12px}
.post__content ol li{margin:6px 0; padding-left:4px}
.post__content ol li::marker{font-weight:800; color:rgba(128, 49, 228, 1)}

/* Баннеры */
.banner{display:flex; gap:14px; align-items:center; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--tint); box-shadow:var(--shadow); margin:16px 0}
.banner__icon{flex:0 0 auto; width:40px; height:40px; border-radius:10px; background:#EAF5E0; display:flex; align-items:center; justify-content:center; font-weight:900; color:var(--accent-2)}
.banner__body{flex:1 1 auto}
.banner__title{margin:0 0 4px; font-weight:900; color:#0c1013}
.banner__text{margin:0 0 8px; color:#2b3640}
.banner--commerce{background:#fff; border-color:#cfe6ee}
.banner--info{background:#F8FAF8}
.btn--sm{padding:8px 12px; font-size:14px; border-radius:10px}

/* Встроенные карточки товаров (3 в ряд) */
.products-inline{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:16px 0}
@media (max-width:900px){ .products-inline{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .products-inline{grid-template-columns:1fr} }
.p-card{background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column}
.p-card__media img{width:100%; aspect-ratio:4/3; object-fit:cover}
.p-card__body{padding:12px 12px 60px 12px;position: relative;height: 100%;}
.p-card__title{margin:0 0 6px; color:#0c1013; font-size:16px; line-height:1.35}
.post__content .p-card__title a:not(.btn){text-decoration: none;color:#0c1013;}
.post__content .p-card__title a:not(.btn):hover{background: none;color:#0c1013;} 
.p-card__price{margin:0 0 10px; color:rgba(128, 49, 228, 1); font-weight:700}
.p-card__cta{margin-top:auto; display:flex; gap:8px;position: absolute;bottom:12px;left:12px;right: 12px;flex-wrap: wrap;}
.p-card__cta .btn{flex:1;}
.btn--ghost.btn--sm{background:#fff; color:var(--accent); border:1px solid var(--accent)}

/* ===========================
   Content Enhancements (TOC, modal, links, images, product cards)
   =========================== */

/* TOC: visual tweaks + H3 indentation */
#tocList a{padding:6px 8px; border-radius:8px; transition:background .15s ease, color .15s ease}
#tocList a:hover{background:var(--tint)}
#tocList a.active{color:var(--accent-2); background:rgba(67,153,172,.08); box-shadow:inset 2px 0 0 var(--accent-2)}
#tocList a.toc--h3{padding-left:20px; opacity:.95; font-size:.95em}
#tocList a.toc--h3::before{content:"— "; opacity:.6}

/* Product cards: subtle hover */
.p-card{transition:transform .15s ease, box-shadow .15s ease}
.p-card:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.08)}
.p-card__media img{transition:transform .2s ease}
.p-card:hover .p-card__media img{transform:scale(1.02)}

/* Modal: Где купить */
body.no-scroll{overflow:hidden}
.modal{position:fixed; inset:0; display:none; z-index:1000}
.modal.is-open{display:block}
.modal__backdrop{position:absolute; inset:0; background:rgba(10,14,24,.5); backdrop-filter:saturate(110%) blur(2px)}
.modal__dialog{position:relative; z-index:1; width:min(520px, calc(100% - 32px)); margin:8vh auto; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:18px}
.modal__close{position:absolute; top:8px; right:8px; width:36px; height:36px; border-radius:10px; border:1px solid var(--line); background:#fff; cursor:pointer; font-size:20px; line-height:1}
.modal__note{margin:6px 0 12px; color:var(--muted)}
.modal__hint{margin:12px 0 0; color:var(--muted); font-size:13px}
.buy-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:8px}
@media (max-width:520px){ .buy-grid{grid-template-columns:1fr} }
.buy-card{display:flex; align-items:center; justify-content:center; padding:16px; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:var(--shadow); transition:transform .15s ease, box-shadow .15s ease}
.buy-card:hover{transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.08)}

/* Enticing inline links in article text */
.post__content a:not(.btn){color:#51e900; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:#51e900; transition:color .15s ease, text-decoration-color .15s ease, background .15s ease; border-radius:6px; padding-inline:2px}
.post__content a:not(.btn):hover{color:#51e900; text-decoration-color:#51e900;}

/* Article images & figures */
.post__content img{border-radius:12px; box-shadow:var(--shadow); display: block;}
.post__content figure{margin:16px 0; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:var(--shadow)}
.post__content figure > img{display:block; width:100%}
.post__content figcaption{padding:10px 12px; color:#5b6670; font-size:14px; background:var(--tint)}

/* Buttons inside article content (override) */
.post__content .btn,
.post__content .btn:visited{
    text-decoration:none;
}
.post__content .btn:hover{
    background:var(--accent-600-2);
    text-decoration:none;
}
.post__content .btn--ghost{
    background:#fff;
    color:rgba(128, 49, 228, 1);
    border:1px solid rgba(128, 49, 228, 1);
}
.post__content .btn--ghost:hover{
    background:rgba(128, 49, 228, 1);
    color:#fff;
}
.btn:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
}

.post__content img{
    max-width: 59%;
}

@media (max-width:767px){
    .post__content img{
    max-width: 100%;
}
}

.p-card__media img{
    max-width: 100%;
}

.post__content table td,
.post__content table td:nth-child(2) {
    color:var(--text);
}