/* katran.pro — прототипы коммерческих блоков. Все классы с префиксом kt-, чтобы не пересекаться с шаблоном Aspro MShop */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');

:root{
  --kt-main:#00646f;      /* основной цвет кнопок и рамок на сайте */
  --kt-main-dark:#22494d; /* цвет ссылок */
  --kt-main-soft:#e8f2f3;
  --kt-text:#383838;
  --kt-muted:#777;
  --kt-line:#e5e5e5;
  --kt-bg:#f6f7f8;
  --kt-red:#e3342f;       /* красные маркеры списков и «Заказать звонок» */
  --kt-todo:#fff6c4;
}
*{box-sizing:border-box}
body{margin:0;font-family:Ubuntu,Arial,Helvetica,sans-serif;color:var(--kt-text);background:#fff;font-size:14px;line-height:1.55}
a{color:var(--kt-main-dark)}
img{max-width:100%;display:block}

/* служебная панель прототипа (на сайт не переносится) */
.kt-proto-bar{background:#1f2a2c;color:#cfe3e5;font-size:13px;padding:10px 0}
.kt-proto-bar .kt-wrap{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.kt-proto-bar a{color:#fff}
.kt-proto-bar b{color:#fff}

.kt-wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.kt-section{padding:34px 0;border-bottom:1px dashed #d6dfe0}
.kt-section:last-child{border-bottom:0}
.kt-where{display:inline-block;font-size:12px;color:#fff;background:var(--kt-main);border-radius:4px;padding:3px 10px;margin-bottom:14px}

/* шапка-имитация сайта */
.kt-top{background:#f6f6f6;font-size:12px;color:#777}
.kt-top .kt-wrap{display:flex;justify-content:space-between;padding-top:8px;padding-bottom:8px}
.kt-top .kt-r{color:var(--kt-red)}
.kt-head{border-bottom:1px solid var(--kt-line)}
.kt-head .kt-wrap{display:flex;align-items:center;gap:40px;padding-top:18px;padding-bottom:18px}
.kt-head img{height:52px}
.kt-head nav{display:flex;gap:42px;font-weight:700;font-size:12px;text-transform:uppercase}
.kt-crumbs{font-size:12px;color:#999;margin:18px 0 8px}
.kt-crumbs a{color:#999;text-decoration:none}

h1.kt-h1{font-size:32px;font-weight:600;line-height:1.2;margin:4px 0 14px}
h2.kt-h2{font-size:24px;font-weight:600;margin:0 0 16px}
h3.kt-h3{font-size:17px;font-weight:500;margin:0 0 10px}
.kt-lead{font-size:15px;max-width:860px;margin:0 0 16px}
.kt-muted{color:var(--kt-muted)}
.kt-small{font-size:12px}

/* кнопки — как на сайте: рамка 1px, скругление 8px */
.kt-btn{display:inline-block;border:1px solid var(--kt-main);color:var(--kt-main);border-radius:8px;padding:10px 26px;font-size:14px;text-decoration:none;background:#fff;cursor:pointer;font-family:inherit}
.kt-btn--fill{background:var(--kt-main);color:#fff}
.kt-btns{display:flex;gap:12px;flex-wrap:wrap}

/* маркеры списков — красные квадраты, как на сайте */
.kt-list{list-style:none;padding:0;margin:0 0 12px}
.kt-list li{position:relative;padding-left:16px;margin:4px 0}
.kt-list li:before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;background:var(--kt-red)}

/* плашки доверия */
.kt-badges{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}
.kt-badge{display:flex;align-items:center;gap:8px;background:var(--kt-main-soft);border-radius:8px;padding:8px 14px;font-size:13px;color:var(--kt-main-dark)}
.kt-badge i{font-style:normal;display:inline-flex;width:22px;height:22px;border-radius:50%;background:var(--kt-main);color:#fff;align-items:center;justify-content:center;font-size:12px}

/* плитка товара в разделе (список) */
.kt-row{display:grid;grid-template-columns:150px 1fr 220px;gap:22px;border:1px solid var(--kt-line);border-radius:6px;padding:18px;margin-bottom:12px;align-items:start}
.kt-row img{width:150px;height:130px;object-fit:contain}
.kt-row h3{margin:0 0 8px;font-size:17px;font-weight:500}
.kt-row h3 a{color:var(--kt-main-dark);text-decoration:none}
.kt-specs{display:grid;grid-template-columns:repeat(4,auto);gap:4px 18px;font-size:13px;margin:0 0 6px}
.kt-specs span{color:var(--kt-muted)}
.kt-specs b{font-weight:500}
.kt-tag{display:inline-block;font-size:12px;border:1px solid var(--kt-line);border-radius:20px;padding:2px 10px;margin:4px 4px 0 0;color:var(--kt-main-dark)}
.kt-price{font-size:13px;color:var(--kt-muted)}
.kt-price b{display:block;font-size:20px;color:var(--kt-text);font-weight:500}

/* таблицы */
.kt-table{width:100%;border-collapse:collapse;font-size:13px}
.kt-table th{background:var(--kt-bg);text-align:left;font-weight:500;padding:10px 12px;border-bottom:1px solid var(--kt-line)}
.kt-table td{padding:9px 12px;border-bottom:1px solid var(--kt-line);vertical-align:top}
.kt-table tr.kt-cur td{background:#f0f8f8;font-weight:500}
.kt-table a{text-decoration:none}
.kt-scroll{overflow-x:auto}

/* карточки-плитки */
.kt-grid{display:grid;gap:16px}
.kt-g2{grid-template-columns:repeat(2,1fr)}
.kt-g3{grid-template-columns:repeat(3,1fr)}
.kt-g4{grid-template-columns:repeat(4,1fr)}
.kt-g5{grid-template-columns:repeat(5,1fr)}
.kt-card{border:1px solid var(--kt-line);border-radius:8px;padding:16px;background:#fff}
.kt-card--soft{background:var(--kt-bg);border-color:transparent}
.kt-card img{height:120px;width:100%;object-fit:contain;margin-bottom:10px}
.kt-card h4{margin:0 0 6px;font-size:14px;font-weight:500}
.kt-card h4 a{color:var(--kt-main-dark);text-decoration:none}
.kt-num{font-size:30px;font-weight:700;color:var(--kt-main);line-height:1.1}
.kt-step{display:flex;gap:12px}
.kt-step b.kt-n{flex:0 0 32px;height:32px;border-radius:50%;background:var(--kt-main);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:500}

/* FAQ */
.kt-faq details{border-bottom:1px solid var(--kt-line);padding:12px 0}
.kt-faq summary{cursor:pointer;font-weight:500;font-size:15px;list-style:none;position:relative;padding-right:30px}
.kt-faq summary::-webkit-details-marker{display:none}
.kt-faq summary:after{content:"+";position:absolute;right:4px;top:-2px;font-size:20px;color:var(--kt-main)}
.kt-faq details[open] summary:after{content:"–"}
.kt-faq p{margin:8px 0 0}

/* первый экран карточки */
.kt-detail{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--kt-line)}
.kt-detail__img{padding:24px;border-right:1px solid var(--kt-line)}
.kt-detail__img .kt-main-img{height:330px;width:100%;object-fit:contain}
.kt-thumbs{display:flex;gap:8px;margin-top:12px;justify-content:center}
.kt-thumbs img{width:58px;height:58px;object-fit:contain;border:1px solid var(--kt-line);border-radius:4px}
.kt-detail__info{padding:24px}
.kt-keyspecs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 16px}
.kt-keyspecs div{background:var(--kt-bg);border-radius:6px;padding:9px 12px}
.kt-keyspecs span{display:block;font-size:12px;color:var(--kt-muted)}
.kt-keyspecs b{font-weight:500;font-size:15px}
.kt-pricebox{border-top:1px solid var(--kt-line);padding-top:16px;margin-top:6px}
.kt-tabs{display:flex;gap:4px;margin:26px 0 0;border-bottom:1px solid var(--kt-line);flex-wrap:wrap}
.kt-tabs span{padding:10px 18px;border:1px solid var(--kt-line);border-bottom:0;background:#f6f6f6;font-weight:500;font-size:13px}
.kt-tabs span.on{background:#fff;border-top:2px solid var(--kt-main)}

/* развертка текста на главной */
.kt-article{max-width:980px}
.kt-article .kt-fade{position:relative;max-height:160px;overflow:hidden}
.kt-article .kt-fade:after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(rgba(255,255,255,0),#fff)}
.kt-more{display:inline-flex;align-items:center;gap:6px;color:var(--kt-main);font-weight:500;cursor:pointer;margin-top:8px}

/* желтые поля — данных нет на сайте, заполнить у клиента */
.kt-todo{background:var(--kt-todo);border-radius:3px;padding:0 4px}

/* документы */
.kt-doc{display:flex;gap:12px;align-items:center;border:1px solid var(--kt-line);border-radius:8px;padding:12px 14px;text-decoration:none;color:var(--kt-text)}
.kt-doc i{font-style:normal;flex:0 0 38px;height:46px;border-radius:4px;background:var(--kt-red);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.kt-doc small{display:block;color:var(--kt-muted)}

/* видео-заглушка */
.kt-video{position:relative;border-radius:8px;overflow:hidden;background:#111;height:150px;display:flex;align-items:center;justify-content:center;color:#fff}
.kt-video:before{content:"▶";font-size:28px;width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center}
.kt-video span{position:absolute;left:10px;bottom:8px;font-size:12px}

.kt-footer{background:url(img/footer.jpeg) center/cover;color:#fff;padding:26px 0;font-size:13px;margin-top:20px}

@media (max-width:900px){
  .kt-g3,.kt-g4,.kt-g5{grid-template-columns:repeat(2,1fr)}
  .kt-row{grid-template-columns:1fr}
  .kt-detail{grid-template-columns:1fr}
  .kt-detail__img{border-right:0;border-bottom:1px solid var(--kt-line)}
  .kt-specs{grid-template-columns:repeat(2,auto)}
  .kt-head nav{display:none}
}
@media (max-width:560px){
  .kt-g2,.kt-g3,.kt-g4,.kt-g5{grid-template-columns:1fr}
  .kt-keyspecs{grid-template-columns:1fr}
}
details.kt-expand summary{list-style:none}
details.kt-expand summary::-webkit-details-marker{display:none}
details.kt-expand[open] summary{display:none}
/* служебные пометки прототипа: на сайт не переносить */
.kt-svc{font-size:12px;color:#7a5d00;background:#fffbe6;border-left:3px solid #e0b400;padding:6px 10px;margin:12px 0 0}
.kt-svc-block{background:#fffdf3}
body.kt-clean .kt-svc,body.kt-clean .kt-where,body.kt-clean .kt-svc-block,body.kt-shot .kt-proto-bar{display:none}
.kt-grid>table{align-self:start}