/* =========================================================
   Статьи «Полезное» — одна статья и список (октябрь 2026)
   Цвета и шрифты — из design.css
   ========================================================= */

/* ---------- первый экран статьи ---------- */
.art-hero{background:linear-gradient(180deg,#fff 0%,var(--tint) 100%);border-bottom:1px solid var(--line)}
.art-hero__in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center;
  padding-top:48px;padding-bottom:52px}
.art-hero__tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.art-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:99px;font-size:13px;font-weight:700;
  background:var(--teal-soft);color:var(--teal)}
.art-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.art-tag--zhalyuzi{background:var(--orange-soft);color:var(--orange-ink)}
.art-hero h1{font-size:clamp(30px,3.6vw,46px);line-height:1.12;letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
.art-hero__lead{margin:18px 0 0;font-size:18.5px;line-height:1.6;color:var(--ink-2);max-width:620px}
.art-hero__meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin:24px 0 0;font-size:14px;color:var(--mut)}
.art-hero__meta span{display:inline-flex;align-items:center;gap:7px}
.art-hero__meta svg{width:17px;height:17px;color:var(--teal-l)}
.art-hero__ph{border-radius:18px;overflow:hidden;aspect-ratio:4/3;background:var(--teal-soft);
  box-shadow:0 30px 60px -36px rgba(14,92,88,.55)}
.art-hero__ph img{width:100%;height:100%;object-fit:cover}

/* ---------- текст + боковая колонка ---------- */
.art-grid{display:grid;grid-template-columns:270px minmax(0,740px);gap:64px;justify-content:center;
  padding-top:56px;padding-bottom:72px}
.art-side{position:sticky;top:96px;align-self:start;display:flex;flex-direction:column;gap:18px}

.art-toc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 12px}
.art-toc summary{display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer;font-weight:700;
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.art-toc summary::-webkit-details-marker{display:none}
.art-toc summary svg{width:18px;height:18px;color:var(--teal-l)}
.art-toc ol{list-style:none;margin:12px 0 0;padding:0;counter-reset:toc}
.art-toc li{counter-increment:toc}
.art-toc a{display:flex;gap:10px;padding:7px 0 7px 10px;margin-left:-10px;border-left:2px solid transparent;
  color:var(--ink-2);font-size:14.5px;line-height:1.4;transition:color .2s,border-color .2s}
.art-toc a::before{content:counter(toc);flex:0 0 18px;font-weight:700;color:var(--line-3);font-variant-numeric:tabular-nums}
.art-toc a:hover{color:var(--teal)}
.art-toc a.is-on{color:var(--teal);border-left-color:var(--teal);font-weight:600}
.art-toc a.is-on::before{color:var(--teal-l)}

.art-help{background:var(--teal);color:#fff;border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:10px}
.art-help b{font-family:'Onest',sans-serif;font-size:19px;line-height:1.25}
.art-help p{margin:0;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.82)}
.art-help .btn{margin-top:6px;padding:14px 18px;width:100%}
.art-help__tel{display:inline-flex;align-items:center;gap:8px;margin-top:4px;color:#fff;font-weight:700;font-size:16px}
.art-help__tel:hover{color:#fff;opacity:.85}
.art-help__tel svg{width:18px;height:18px}
.art-help small{color:rgba(255,255,255,.66);font-size:12.5px}

/* ---------- текст статьи ---------- */
.art-body{font-size:17px;line-height:1.75;color:var(--ink-2)}
.art-body > :first-child{margin-top:0}
.art-body p{margin:0 0 18px}
.art-body h2{margin:48px 0 16px;font-size:clamp(23px,2.4vw,28px);line-height:1.25;scroll-margin-top:96px;text-wrap:balance}
.art-body h3{margin:30px 0 12px;font-size:20px}
.art-body a{color:var(--teal);text-decoration:underline;text-decoration-color:rgba(14,92,88,.3);text-underline-offset:3px}
.art-body a:hover{color:var(--orange-h);text-decoration-color:currentColor}
.art-body a.btn{text-decoration:none}
/* кнопки внутри текста: белый текст всегда (раньше ссылочный цвет делал его серым, а при наведении — оранжевым на оранжевом) */
.art-body a.btn--primary,.art-body a.btn--primary:hover,.art-body a.btn--primary:focus,.art-body a.btn--primary:visited,
.art-help a.btn--primary,.art-help a.btn--primary:hover{color:#fff}
.art-body strong{color:var(--ink);font-weight:700}
.art-body ul{margin:0 0 20px;padding-left:0;list-style:none}
.art-body ul > li{position:relative;padding-left:26px;margin-bottom:10px}
.art-body ul > li::before{content:"";position:absolute;left:6px;top:.72em;width:7px;height:7px;border-radius:2px;background:var(--teal-l);transform:rotate(45deg)}

/* шаги */
.art-body ol.a-steps{list-style:none;margin:6px 0 26px;padding:0;counter-reset:st}
.art-body ol.a-steps > li{counter-increment:st;position:relative;padding:2px 0 16px 52px;margin:0}
.art-body ol.a-steps > li::before{content:counter(st);position:absolute;left:0;top:0;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;background:var(--teal);color:#fff;font:700 15px/1 'Onest',sans-serif}
.art-body ol.a-steps > li:not(:last-child)::after{content:"";position:absolute;left:16.5px;top:38px;bottom:2px;width:1px;background:var(--line-3)}

/* подсказка и предупреждение */
.a-note,.a-warn{margin:24px 0;padding:18px 22px;border-radius:var(--r-s);border-left:4px solid var(--teal);background:var(--teal-soft);font-size:16px}
.a-warn{border-left-color:var(--orange);background:var(--orange-soft)}
.a-note > :last-child,.a-warn > :last-child{margin-bottom:0}
.a-warn ul{margin:0}
.a-warn ul > li::before{background:var(--orange)}

/* картинки */
.a-fig{margin:28px 0}
.art-body .a-fig img{margin:0;width:100%;border-radius:14px;border:1px solid var(--line);background:#fff}
.a-fig figcaption{margin-top:10px;font-size:14px;color:var(--mut);text-align:center}

/* таблицы */
.art-body table{font-size:15.5px;line-height:1.5;margin:22px 0 28px;border:1px solid var(--line);border-radius:var(--r-s);
  border-collapse:separate;border-spacing:0;overflow:hidden;background:#fff}
.art-body th{background:var(--tint);color:var(--ink);font-size:12.5px;letter-spacing:.04em}
.art-body td{vertical-align:top}
.art-body tr:last-child td{border-bottom:0}
.art-body td:first-child{font-weight:600;color:var(--ink)}

/* плашка с кнопкой */
.a-cta{display:flex;align-items:center;gap:18px;margin:34px 0;padding:20px 22px;border-radius:14px;
  background:#fff;border:1px solid var(--line);box-shadow:var(--sh-h)}
.a-cta__ic{flex:0 0 52px;height:52px;border-radius:12px;display:grid;place-items:center;background:var(--teal-soft);color:var(--teal)}
.a-cta--zhalyuzi .a-cta__ic{background:var(--orange-soft);color:var(--orange-ink)}
.a-cta__ic svg{width:28px;height:28px}
.a-cta__t{flex:1;display:flex;flex-direction:column;gap:2px;line-height:1.45}
.a-cta__t b{font-family:'Onest',sans-serif;font-size:17.5px;color:var(--ink)}
.a-cta__t span{font-size:14.5px;color:var(--mut)}
.a-cta .btn{flex:0 0 auto;padding:13px 20px;font-size:15px}

/* частые вопросы */
.a-faq{border-bottom:1px solid var(--line)}
.art-body h2 + .a-faq{border-top:1px solid var(--line)}
.a-faq summary{position:relative;list-style:none;cursor:pointer;padding:16px 40px 16px 0;font-weight:700;color:var(--ink);font-size:16.5px;line-height:1.4}
.a-faq summary::-webkit-details-marker{display:none}
.a-faq summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;margin-top:-8px;
  border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(45deg);transition:transform .25s var(--ease)}
.a-faq[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.a-faq summary:hover{color:var(--teal)}
.a-faq p{margin:0 0 16px;font-size:16px}

.art-body .art-back{margin:36px 0 0;font-weight:700}
.art-body .art-back a{text-decoration:none}

/* ---------- читайте также ---------- */
.art-more{padding:64px 0}
.art-more__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:28px}
.art-more__head h2{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.02em}
.art-more__head a{display:inline-flex;align-items:center;gap:6px;font-weight:700}
.art-more__head svg{width:18px;height:18px}

/* ---------- карточки статей ---------- */
.acards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.acard{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.acard:hover{transform:translateY(-4px);border-color:var(--line-3);box-shadow:var(--sh-h)}
.acard[hidden]{display:none!important}
.acard__ph{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--teal-soft)}
.acard__ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.acard:hover .acard__ph img{transform:scale(1.045)}
.acard__b{flex:1;display:flex;flex-direction:column;gap:8px;padding:18px 20px 20px}
.acard__tag{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--teal-l)}
.acard h3{font-size:18.5px;line-height:1.3}
.acard h3 a{color:var(--ink)}
.acard h3 a::after{content:"";position:absolute;inset:0}
.acard:hover h3 a{color:var(--teal)}
.acard p{margin:0;flex:1;color:var(--mut);font-size:14.5px;line-height:1.55}
.acard__meta{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:13px;color:var(--mut)}
.acard__meta svg{width:15px;height:15px}

/* ---------- страница «Полезное» ---------- */
.arts-hero{background:linear-gradient(180deg,#fff 0%,var(--tint) 100%);border-bottom:1px solid var(--line);padding:52px 0 0}
.arts-hero h1{margin-top:8px;font-size:clamp(30px,3.8vw,48px);letter-spacing:-.025em;line-height:1.1;max-width:760px}
.arts-hero p{margin:16px 0 0;max-width:640px;font-size:18px;color:var(--ink-2)}
.arts-tabs{display:flex;gap:6px;margin-top:34px;overflow-x:auto;scrollbar-width:none}
.arts-tabs::-webkit-scrollbar{display:none}
.arts-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border:0;border-bottom:3px solid transparent;
  background:none;font-weight:700;font-size:15.5px;color:var(--mut);cursor:pointer;transition:color .2s,border-color .2s}
.arts-tab i{font-style:normal;font-size:12px;font-weight:700;padding:2px 8px;border-radius:99px;background:var(--line-2);color:var(--mut)}
.arts-tab:hover{color:var(--ink)}
.arts-tab.is-on{color:var(--teal);border-bottom-color:var(--teal)}
.arts-tab.is-on i{background:var(--teal);color:#fff}
.arts{padding-top:48px}
.arts__text{max-width:760px;margin-top:48px}

/* ---------- планшет и телефон ---------- */
@media (max-width:1080px){
  .art-grid{grid-template-columns:230px minmax(0,1fr);gap:40px}
  .acards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .art-hero__in{grid-template-columns:1fr;gap:28px;padding-top:32px;padding-bottom:36px}
  .art-hero__ph{aspect-ratio:16/9}
  .art-grid{grid-template-columns:1fr;gap:0;padding-top:28px;padding-bottom:48px}
  .art-side{position:static;margin-bottom:28px}
  .art-help{display:none}
}
@media (max-width:640px){
  .art-hero__lead{font-size:17px}
  .art-body{font-size:16.5px;line-height:1.7}
  .art-body h2{margin-top:38px}
  .art-body table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:normal}
  .art-body th,.art-body td{min-width:120px;padding:10px 12px}
  .a-cta{flex-wrap:wrap;padding:18px}
  .a-cta__ic{flex-basis:44px;height:44px}
  .a-cta__t{flex:1 1 calc(100% - 64px)}
  .a-cta .btn{width:100%}
  .acards{grid-template-columns:1fr}
  .art-more{padding:48px 0}
  .art-more__head{align-items:center}
  .arts-hero{padding-top:36px}
  .arts-hero p{font-size:16.5px}
  .arts{padding-top:32px}
}

/* ---------- фото из медиатеки в тексте ---------- */
.a-fig--photo img{aspect-ratio:auto;max-height:620px;object-fit:cover}
.a-photos{margin:28px 0}
.a-photos__row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px}
.art-body .a-photos img{margin:0;width:100%;height:340px;object-fit:cover;border-radius:12px;border:1px solid var(--line);background:#fff}
.a-photos figcaption{margin-top:10px;font-size:14px;color:var(--mut);text-align:center}

/* =========================================================
   Страница системы жалюзи (/sistema/…)
   ========================================================= */
.sys-hero{background:linear-gradient(180deg,#fff 0%,var(--tint) 100%);border-bottom:1px solid var(--line)}
.sys-hero__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:52px;align-items:start;padding-top:40px;padding-bottom:52px}
.sys-gal__main{position:relative;aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:var(--teal-soft);
  box-shadow:0 30px 60px -36px rgba(14,92,88,.55)}
.sys-gal__main img{width:100%;height:100%;object-fit:cover;transition:opacity .25s}
.sys-gal__main img.is-fade{opacity:.2}
.sys-gal__empty{display:grid;place-items:center;height:100%;color:var(--teal-l)}
.sys-gal__empty svg{width:72px;height:72px}
.sys-gal__thumbs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:10px}
.sys-gal__t{padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;aspect-ratio:1/1;cursor:pointer;background:var(--line-2);
  transition:border-color .2s,opacity .2s;opacity:.75}
.sys-gal__t img{width:100%;height:100%;object-fit:cover}
.sys-gal__t:hover{opacity:1}
.sys-gal__t.is-on{border-color:var(--orange);opacity:1}
.sys-info h1{margin-top:14px;font-size:clamp(28px,3.2vw,42px);line-height:1.12;letter-spacing:-.025em;text-wrap:balance}
.sys-info__short{margin:12px 0 0;font-weight:700;color:var(--teal);font-size:16px}
.sys-info__lead{margin:12px 0 0;font-size:17.5px;line-height:1.6;color:var(--ink-2)}
.sys-facts{margin:22px 0 0;padding:0;border-top:1px solid var(--line)}
.sys-facts > div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
.sys-facts dt{color:var(--mut)}
.sys-facts dd{margin:0;color:var(--ink);font-weight:600}
.sys-buy{margin-top:22px;padding:20px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh)}
.sys-buy__price{font-size:16px;color:var(--mut);margin-bottom:12px}
.sys-buy__price b{font:800 30px/1 'Onest',sans-serif;color:var(--ink)}
.sys-buy__btns{display:flex;flex-wrap:wrap;gap:10px}
.sys-buy__btns .btn{flex:1 1 200px}
.sys-buy__notes{display:flex;flex-wrap:wrap;gap:6px 18px;margin:14px 0 0;padding:0;list-style:none;font-size:13.5px;color:var(--mut)}
.sys-buy__notes li{position:relative;padding-left:20px}
.sys-buy__notes li::before{content:"";position:absolute;left:2px;top:.35em;width:10px;height:6px;border-left:2px solid var(--teal-l);border-bottom:2px solid var(--teal-l);transform:rotate(-45deg)}
.sys-works{padding:64px 0}

@media (max-width:900px){
  .sys-hero__in{grid-template-columns:1fr;gap:24px;padding-top:24px;padding-bottom:36px}
  .sys-facts > div{grid-template-columns:130px minmax(0,1fr)}
}
@media (max-width:640px){
  .a-photos__row{grid-auto-flow:row;grid-template-columns:1fr 1fr}
  .a-photos__row > :only-child{grid-column:1 / -1}
  .art-body .a-photos img{height:220px}
  .sys-gal__thumbs{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
  .sys-buy{padding:16px}
  .sys-buy__btns .btn{flex-basis:100%}
  .sys-works{padding:44px 0}
}