/* SUITU — blog, articles, table of contents, «Популярні підбірки» tiles. Ported from TATALIKEN layout, SUITU colours. */
body.storefront .blog-hero{padding-top:40px!important}
body.storefront .blog-list-section{padding-bottom:48px!important}
/* rich-text tables (category SEO, articles): scroll instead of clipping on phones */
@media(max-width:640px){.category-description-rich table,.home-seo-extra table,.article-content table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}.category-description-rich th,.category-description-rich td,.home-seo-extra th,.home-seo-extra td{font-size:13.5px;padding:8px 10px}}
/* «Інвертор під вашу задачу» — tiles (home, categories, landings) */
.task-nav{padding:var(--tl-z,48px) 0 0}
.task-nav-head{margin-bottom:20px}
.task-nav-head h2{font-family:var(--vx-display,inherit);font-size:clamp(22px,2.6vw,30px);line-height:1.2;color:#0C111B;margin:0 0 6px}
.task-nav-head p{margin:0;color:#5E687C;font-size:15px}
.task-nav-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.task-tile{display:flex;align-items:center;gap:14px;padding:16px 18px;background:#fff;border:1px solid #E3E7EF;border-radius:16px;color:#0C111B!important;text-decoration:none!important;box-shadow:0 6px 18px rgba(12,17,27,.05);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.task-tile:hover{transform:translateY(-2px);border-color:#FF6500;box-shadow:0 14px 30px rgba(12,17,27,.10)}
.task-ico{flex:0 0 44px;width:44px;height:44px;border-radius:12px;background:#FFF1E6;display:grid;place-items:center}
.task-ico svg{width:24px;height:24px;fill:none;stroke:#FF6500;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.task-txt{flex:1;min-width:0;display:block}
.task-txt b{display:block;font-size:16px;line-height:1.3}
.task-txt small{display:block;color:#5E687C;font-size:13.5px;line-height:1.4;margin-top:2px}
.task-arr{color:#FF6500;font-weight:800;font-size:18px;transition:transform .2s ease}
.task-tile:hover .task-arr{transform:translateX(3px)}
@media(max-width:900px){.task-nav-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.task-nav-grid{grid-template-columns:1fr;gap:10px}.task-tile{padding:13px 14px}.task-arr{display:none}}
/* footer strip with the same links */
.footer-tasks{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 22px;padding-top:18px!important;padding-bottom:18px!important;border-top:1px solid rgba(255,255,255,.08)}
.footer-tasks h4{margin:0;font-size:13px;color:#fff;font-weight:800}
.footer-tasks-links{display:flex;flex-wrap:wrap;gap:8px 20px}
.footer-tasks-links a{color:#9AA4B8!important;font-size:12.5px;text-decoration:none}
.footer-tasks-links a:hover{color:#fff!important}

/* ===== Section rhythm: white / grey / white ===== */
html body section.task-nav{background:#F2F4F8;border-top:1px solid #E1E6F0;padding:var(--tl-z,48px) 0!important}
html body section.task-nav .task-tile{background:#fff!important}
html body section.task-nav + section.home-seo.home-seo{background:#fff!important;border-top:1px solid #E1E6F0!important}
html body section.task-nav + section.home-seo .home-seo-card{background:#fff!important;border-color:#E3E7EF!important}

.task-nav .task-tile{background:#F7F8FB}
.task-nav .task-tile:hover{background:#fff}
/* ===== Blog list v2 ===== */
body .blog-hero{background:#fff!important;border-bottom:1px solid #E1E6F0;padding:40px 0 36px!important}
body .blog-hero h1{font-size:clamp(30px,3.6vw,46px)!important;letter-spacing:-.03em}
body .blog-list-section{background:#F2F4F8;padding:40px 0 56px!important}
html body .blog-list-section .blog-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;justify-content:stretch!important;align-items:stretch!important;gap:24px!important}
html body .blog-list-section .blog-card{max-width:none!important;width:auto!important}
.blog-card{border:1px solid #E3E7EF!important;border-radius:20px!important;box-shadow:0 6px 20px rgba(12,17,27,.05)!important}
.blog-card:hover{box-shadow:0 16px 36px rgba(12,17,27,.10)!important;border-color:#D5DBE6!important}
html body :is(.blog-list-section,.home-blog-section,.category-blog-section,.product-articles,.article-related) .blog-card-image{aspect-ratio:16/10!important;height:auto!important;background:linear-gradient(135deg,#fff 0%,#EEF1F6 100%)!important;padding:14px!important}
html body :is(.blog-list-section,.home-blog-section,.category-blog-section,.product-articles,.article-related) .blog-card-image img{width:100%!important;height:100%!important;object-fit:contain!important;border-radius:10px;padding:0!important}
html body .blog-card-copy{padding:20px 22px 22px!important}
.blog-card-meta time,.blog-card-meta span{font-size:12px!important;color:#7A8395!important}
html body .blog-card-copy h2{font-size:19px!important;line-height:1.3!important;letter-spacing:-.015em;margin:6px 0 8px!important}
html body .blog-card-copy h2 a:hover{color:#FF6500}
html body .blog-card-copy p{font-size:14px!important;line-height:1.55!important;color:#5E687C!important;-webkit-line-clamp:3!important;margin-bottom:16px!important}
html body .blog-more{font-size:13.5px!important;color:#FF6500!important;font-weight:800!important}
@media(min-width:901px){
 html body .blog-list-section .blog-grid>.blog-card:first-child{grid-column:1/-1;flex-direction:row}
 html body .blog-list-section .blog-grid>.blog-card:first-child .blog-card-image{flex:0 0 52%;aspect-ratio:auto!important;min-height:340px;padding:24px!important}
 html body .blog-list-section .blog-grid>.blog-card:first-child .blog-card-copy{padding:36px 40px!important;justify-content:center}
 html body .blog-list-section .blog-grid>.blog-card:first-child h2{font-size:30px!important;line-height:1.2!important}
 html body .blog-list-section .blog-grid>.blog-card:first-child p{font-size:16px!important;-webkit-line-clamp:4!important}
}
@media(max-width:900px){html body .blog-list-section .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:600px){html body .blog-list-section .blog-grid{grid-template-columns:1fr!important;gap:16px!important}}

/* ===== Article page v2 ===== */
body.article-view .article-page{padding:0 0 56px!important;background:#F2F4F8;overflow-x:clip}
body.article-view .article-shell{max-width:1180px}
body.article-view .article-shell>.breadcrumbs{position:relative;z-index:1;padding-top:20px}
body.article-view .article-head{position:relative;z-index:0;max-width:none!important;margin:0!important;padding:18px 0 40px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);column-gap:48px;align-items:center}
body.article-view .article-head::before{content:"";position:absolute;top:-80px;bottom:0;left:50%;width:100vw;transform:translateX(-50%);background:#fff;border-bottom:1px solid #E1E6F0;z-index:-1}
body.article-view .article-head>*{grid-column:1}
body.article-view .article-head h1{font-size:clamp(30px,3.4vw,46px)!important;line-height:1.12!important;letter-spacing:-.03em!important;margin:10px 0 14px!important}
body.article-view .article-head>p{font-size:17px!important;color:#5E687C!important;margin:14px 0 0!important}
body.article-view .article-meta{gap:10px!important;font-size:13px!important;color:#7A8395!important}
body.article-view .article-meta>*{background:#F2F4F8;border-radius:999px;padding:5px 11px}
body.article-view .article-meta .article-topic{background:#FFF1E6!important;color:#D45400!important}
html body.article-view .article-cover{grid-column:2!important;grid-row:1/span 5;width:100%!important;max-width:100%!important;aspect-ratio:4/3!important;height:auto!important;object-fit:contain!important;background:linear-gradient(135deg,#fff 0%,#EEF1F6 100%)!important;border:1px solid #E3E7EF!important;border-radius:24px!important;padding:20px;margin:0!important;align-self:center}
body.article-view .article-layout{max-width:1180px!important;margin:36px auto 0!important;grid-template-columns:260px minmax(0,1fr)!important;gap:32px!important}
body.article-view .article-layout.no-toc{grid-template-columns:minmax(0,1fr)!important;max-width:900px!important}
body.article-view .article-main{background:#fff;border:1px solid #E3E7EF;border-radius:24px;padding:44px 52px;box-shadow:0 10px 30px rgba(12,17,27,.05)}
body.article-view .article-content{max-width:780px;color:#1F2733!important;font-size:17px!important;line-height:1.75!important}
body.article-view .article-content>p:first-child{font-size:18.5px;color:#0C111B}
body.article-view .article-content h2{font-size:28px!important;font-weight:800;color:#0C111B;margin:46px 0 14px!important;letter-spacing:-.02em!important}
body.article-view .article-content h3{font-size:20px!important;color:#0C111B;margin:28px 0 10px!important}
body.article-view .article-content a{color:#D45400;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
body.article-view .article-content a:hover{color:#FF6500}
body.article-view .article-content ul li::marker{color:#FF6500}
body.article-view .article-content ol li::marker{color:#FF6500;font-weight:800}
body.article-view .article-content table{width:100%;border-collapse:separate!important;border-spacing:0;border:1px solid #E3E7EF;border-radius:14px;overflow:hidden;margin:18px 0 26px;font-size:15px;line-height:1.5}
body.article-view .article-content th{background:#F5F7FA;text-align:left;font-weight:700;color:#0C111B;padding:12px 16px;border-bottom:1px solid #E3E7EF}
body.article-view .article-content td{padding:11px 16px;border-bottom:1px solid #EEF1F5;vertical-align:top}
body.article-view .article-content tr:last-child td{border-bottom:0}
body.article-view .article-content tbody tr:nth-child(even) td{background:#FAFBFC}
body.article-view .article-content .article-alsoread{background:#F5F7FA;border:1px solid #E3E7EF;border-left:4px solid #FF6500;border-radius:14px;padding:16px 20px;font-size:15.5px;line-height:1.6;margin:36px 0 0}
body.article-view .article-content .article-help{margin-top:28px;background:#FFF7F0;border:1px solid #FBDCC6;border-radius:18px;padding:26px 28px}
body.article-view .article-content .article-help h2{margin-top:0!important;font-size:24px!important}
body.article-view .article-content .article-help p:last-child{margin-bottom:0}
body.article-view .article-categories,body.article-view .article-products,body.article-view .article-related{border-top:1px solid #EEF1F5;margin-top:36px!important;padding-top:28px!important}
body.article-view .article-categories h2,body.article-view .article-products h2,body.article-view .article-related h2{font-size:22px!important;font-weight:800;margin:0 0 14px!important}
body.article-view .article-category-links a{display:inline-block;background:#F2F4F8;border:1px solid #E3E7EF;border-radius:999px;padding:8px 14px;font-size:14px;font-weight:700;color:#0C111B;text-decoration:none}
body.article-view .article-category-links a:hover{border-color:#FF6500;color:#FF6500}
html body.article-view .article-product-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important}
html body.article-view .article-product-grid>a{flex-direction:column;align-items:stretch!important;gap:10px!important;padding:14px!important;border:1px solid #E3E7EF!important;border-radius:16px!important;background:#fff;text-decoration:none;color:#0C111B;transition:transform .2s,box-shadow .2s,border-color .2s}
html body.article-view .article-product-grid>a:hover{transform:translateY(-2px);border-color:#FF6500!important;box-shadow:0 12px 26px rgba(12,17,27,.08)}
html body.article-view .article-product-grid img{width:100%!important;height:130px!important;object-fit:contain!important;background:linear-gradient(135deg,#fff,#EEF1F6);border-radius:12px;padding:8px}
html body.article-view .article-product-grid b{font-size:13.5px!important;line-height:1.35!important}
html body.article-view .article-product-grid small{font-size:16px!important;color:#FF6500!important;font-weight:800!important;margin-top:6px!important}
body.article-view .article-back{max-width:1180px!important;margin:28px auto 0!important;padding-left:292px}
body.article-view .article-back a{display:inline-block;background:#fff;border:1px solid #E3E7EF;border-radius:999px;padding:10px 18px;font-size:14px;color:#0C111B!important;text-decoration:none}
body.article-view .article-back a:hover{border-color:#FF6500;color:#FF6500!important}
@media(max-width:1000px){
 body.article-view .article-head{grid-template-columns:1fr;row-gap:0}
 html body.article-view .article-cover{grid-column:1!important;grid-row:auto;margin-top:22px!important;max-height:340px!important}
 body.article-view .article-layout{grid-template-columns:1fr!important}
 body.article-view .article-back{padding-left:0}
}
@media(max-width:640px){
 body.article-view .article-main{padding:24px 18px;border-radius:18px}
 body.article-view .article-head{padding-bottom:28px}
 body.article-view .article-content{font-size:16px!important}
 body.article-view .article-content h2{font-size:23px!important;margin-top:36px!important}
 html body.article-view .article-product-grid{grid-template-columns:1fr 1fr!important}
 html body.article-view .article-product-grid img{height:100px!important}
 body.article-view .article-content .article-help{padding:20px 18px}
 html body.article-view .article-head .article-cover,html body.article-view .article-head figure{aspect-ratio:16/11!important;width:100%!important;max-width:none!important}
 html body.article-view .article-head .article-cover img,html body.article-view .article-head figure img{width:100%!important;height:100%!important;object-fit:contain!important}
}

/* ── Article TOC v3 ─────────────────────────────────────── */
html body.article-view{overflow-x:clip!important;overflow-y:visible!important}
html body.article-view .article-content :is(h2,h3){scroll-margin-top:150px}
@media(max-width:1000px){html body.article-view .article-content :is(h2,h3){scroll-margin-top:90px}}
html body.article-view .article-toc{position:sticky!important;top:148px!important;align-self:start;background:#fff!important;border:1px solid #E3E7EF!important;border-radius:20px!important;padding:0!important;max-height:calc(100vh - 168px)!important;overflow:auto!important;box-shadow:0 10px 30px rgba(12,17,27,.06)!important;scrollbar-width:thin;scrollbar-color:#D5DAE3 transparent}
html body.article-view .article-toc::-webkit-scrollbar{width:6px}html body.article-view .article-toc::-webkit-scrollbar-thumb{background:#D5DAE3;border-radius:6px}
html body.article-view .article-toc .toc-head{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;padding:18px 18px 12px;position:sticky;top:0;background:#fff;z-index:2}
html body.article-view .toc-title{font-size:15px;font-weight:800;color:#0C111B;letter-spacing:-.01em}
html body.article-view .toc-count{margin-left:auto;font-size:11.5px;font-weight:600;color:#6B7385;background:#F2F4F8;border-radius:999px;padding:3px 9px;white-space:nowrap}
html body.article-view .toc-chev{display:none;width:9px;height:9px;border-right:2px solid #0C111B;border-bottom:2px solid #0C111B;transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
html body.article-view .toc-progress{height:3px;background:#EEF1F5;border-radius:3px;margin:0 18px 8px;overflow:hidden;position:sticky;top:52px;z-index:2}
html body.article-view .toc-progress i{display:block;height:100%;background:linear-gradient(90deg,#FF6500,#FF9A4D);transform:scaleX(0);transform-origin:left;transition:transform .15s linear}
html body.article-view .toc-list{display:block;padding:4px 10px 14px}
html body.article-view .article-toc .toc-list a{all:unset;box-sizing:border-box;cursor:pointer;display:block;text-decoration:none}
html body.article-view .article-toc .toc-list a.level-2{display:grid;grid-template-columns:24px 1fr;gap:8px;padding:9px 10px;border-radius:12px;font-size:13.5px;line-height:1.4;color:#4A5568;transition:background .15s,color .15s}
html body.article-view .article-toc .toc-list a.level-2:hover{background:#F5F7FA;color:#0C111B}
html body.article-view .toc-n{font-size:11.5px;font-weight:700;color:#A0A8B7;font-variant-numeric:tabular-nums;padding-top:1.5px;transition:color .15s}
html body.article-view .toc-group.is-active>a.level-2{background:#FFF1E6;color:#0C111B;font-weight:600}
html body.article-view .toc-group.is-active>a.level-2 .toc-n{color:#FF6500}
html body.article-view .toc-sub{display:none;margin:2px 0 8px 32px;padding-left:10px;border-left:2px solid #FBD5BB}
html body.article-view .toc-group.is-active .toc-sub{display:block}
html body.article-view .article-toc .toc-sub a.level-3{padding:5px 8px;border-radius:8px;font-size:12.5px;line-height:1.4;color:#6B7385}
html body.article-view .article-toc .toc-sub a.level-3:hover{color:#0C111B;background:#F5F7FA}
html body.article-view .article-toc .toc-sub a.level-3.is-active{color:#FF6500;font-weight:600}
@media(max-width:1000px){
 html body.article-view .article-toc{position:relative!important;top:auto!important;max-height:none!important;overflow:hidden!important;border-radius:16px!important}
 html body.article-view .article-toc .toc-head{cursor:pointer;padding:16px 18px;position:static}
 html body.article-view .toc-chev{display:block}
 html body.article-view .toc-count{margin-left:auto}
 html body.article-view .toc-progress{display:none}
 html body.article-view .toc-list{display:none;border-top:1px solid #EEF1F5;padding:8px 8px 12px}
 html body.article-view .article-toc.is-open .toc-list{display:block}
 html body.article-view .article-toc.is-open .toc-chev{transform:rotate(-135deg) translate(-2px,-2px)}
 html body.article-view .toc-sub{display:block}
}

/* blog SEO text */
html body .blog-seo{background:#fff;padding:56px 0;border-top:1px solid #E3E7EF}
html body .blog-seo-card{max-width:900px;margin:0 auto;color:#1F2733;font-size:16px;line-height:1.7}
html body .blog-seo-card h2{font-size:26px;margin:0 0 14px}html body .blog-seo-card h3{font-size:20px;margin:24px 0 10px}

/* card photos always fully visible (square & wide images) */
html body :is(.blog-list-section,.home-blog-section,.category-blog-section,.product-articles,.article-related) .blog-card .blog-card-image{position:relative!important;overflow:hidden!important;display:block!important}
html body :is(.blog-list-section,.home-blog-section,.category-blog-section,.product-articles,.article-related) .blog-card .blog-card-image>img{position:absolute!important;inset:14px!important;width:calc(100% - 28px)!important;height:calc(100% - 28px)!important;max-width:none!important;object-fit:contain!important;object-position:center!important;margin:0!important;transform:none!important}
html body .blog-list-section .blog-grid>.blog-card:first-child .blog-card-image>img{inset:24px!important;width:calc(100% - 48px)!important;height:calc(100% - 48px)!important}

/* blog SEO block — same card as home, on a grey band (list grey → CTA white → SEO grey) */
html body section.home-seo.blog-seo{background:#F2F4F8!important;border-top:1px solid #E1E6F0!important}
html body section.home-seo.blog-seo .home-seo-card{background:#fff!important;border-color:#E3E7EF!important}
html body section.landing-faq{background:#F2F4F8;border-top:1px solid #E1E6F0;padding:var(--tl-z,48px) 0}
html body section.landing-faq .product-faq details{background:#fff;border:1px solid #E3E7EF;border-radius:14px;margin:0 0 10px;padding:0}
html body section.landing-faq .product-faq summary{padding:16px 18px;font-weight:700;cursor:pointer;list-style:none}
html body section.landing-faq .product-faq summary::-webkit-details-marker{display:none}
html body section.landing-faq .product-faq details p{padding:0 18px 16px;margin:0;color:#4A5568;line-height:1.65}
html body :is(.blog-list-section,.home-blog-section,.category-blog-section,.product-articles,.article-related) .blog-card{display:flex!important;flex-direction:column!important;overflow:hidden}
html body :is(.blog-list-section,.home-blog-section,.category-blog-section,.product-articles,.article-related) .blog-card .blog-card-image{aspect-ratio:1/1!important;padding:0!important;background:#F4F6F9!important;border-radius:0!important;flex:none!important}
html body :is(.blog-list-section,.home-blog-section,.category-blog-section,.product-articles,.article-related) .blog-card .blog-card-image>img{inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;border-radius:0!important;transition:transform .45s ease!important}
html body :is(.blog-list-section,.home-blog-section,.category-blog-section,.product-articles,.article-related) .blog-card:hover .blog-card-image>img{transform:scale(1.035)!important}
html body :is(.blog-list-section,.home-blog-section,.category-blog-section,.product-articles,.article-related) .blog-card .blog-card-image.is-wide{background:linear-gradient(135deg,#fff 0%,#EEF1F6 100%)!important}
html body :is(.blog-list-section,.home-blog-section,.category-blog-section,.product-articles,.article-related) .blog-card .blog-card-image.is-wide>img{inset:14px!important;width:calc(100% - 28px)!important;height:calc(100% - 28px)!important;object-fit:contain!important;transform:none!important}
html body .blog-card .blog-card-copy{flex:1 1 auto!important;display:flex!important;flex-direction:column!important}
html body .blog-card .blog-card-copy .blog-more{margin-top:auto!important}
html body .product-article-grid{align-items:stretch!important}
html body .product-article-grid>.blog-card{height:auto!important}
@media(min-width:900px){
 html body .blog-list-section .blog-grid>.blog-card:first-child{flex-direction:row!important;align-items:stretch}
 html body .blog-list-section .blog-grid>.blog-card:first-child .blog-card-image{flex:0 0 min(44%,460px)!important;min-height:0!important;aspect-ratio:1/1!important;padding:0!important}
 html body .blog-list-section .blog-grid>.blog-card:first-child .blog-card-image>img{inset:0!important;width:100%!important;height:100%!important}
 html body .blog-list-section .blog-grid>.blog-card:first-child .blog-card-image.is-wide>img{inset:24px!important;width:calc(100% - 48px)!important;height:calc(100% - 48px)!important}
}
/* article cover */
html body.article-view .article-head .article-cover{aspect-ratio:1/1!important;object-fit:cover!important;padding:0!important;border:0!important;border-radius:24px!important;background:#F4F6F9!important;box-shadow:0 24px 50px rgba(12,17,27,.18)!important;width:100%!important;max-width:440px!important;justify-self:end;max-height:none!important}
html body.article-view .article-head .article-cover.is-wide{object-fit:contain!important;background:linear-gradient(135deg,#fff 0%,#EEF1F6 100%)!important;border:1px solid #E3E7EF!important;box-shadow:none!important;padding:18px!important;aspect-ratio:4/3!important}
@media(max-width:1000px){html body.article-view .article-head .article-cover{justify-self:center;max-width:min(440px,100%)!important;margin-top:22px!important}}
@media(min-width:900px){html body .blog-list-section .blog-grid>.blog-card:first-child .blog-card-copy{justify-content:center!important}html body .blog-list-section .blog-grid>.blog-card:first-child .blog-card-copy .blog-more{margin-top:18px!important}}
/* SUITU product photos are on white: show covers whole on a light background */
html body :is(.blog-list-section,.home-blog-section,.category-blog-section,.product-articles,.article-related) .blog-card .blog-card-image{background:linear-gradient(135deg,#fff 0%,#EEF1F6 100%)!important}
html body :is(.blog-list-section,.home-blog-section,.category-blog-section,.product-articles,.article-related) .blog-card .blog-card-image>img{inset:18px!important;width:calc(100% - 36px)!important;height:calc(100% - 36px)!important;object-fit:contain!important}
html body.article-view .article-head .article-cover{object-fit:contain!important;background:linear-gradient(135deg,#fff 0%,#EEF1F6 100%)!important;border:1px solid #E3E7EF!important;box-shadow:0 18px 40px rgba(12,17,27,.10)!important;padding:22px!important}