/* Вариант 4 «Как у завода» — макет (designer), по просьбе пользователя 28.10: визуальный язык сайта завода ketra.ru
   (снимки и замеры — recon/raw/2026-10-28/factory-style/). Взято у завода: Oswald (заголовки, меню, кнопки, цены) + Noto Sans (текст),
   чёрный и графит с жёлтым #FEC846, прямоугольные кнопки, жёлтая черта у заголовков, тонкие линии-рамки, подписи характеристик капителью,
   поля расчёта «подчёркиванием» на тёмном. Код, тексты и картинки — свои; в шапке — «официальный дилер», не «завод».
   28.10 — логотип завода в шапке и подвале: завод разрешил (со слов владельца); файлы ketra.ru без изменений — img/logo/ketra-dark.png, ketra-light.png. */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600&family=Noto+Sans:wght@300;400;500;700&display=swap');
:root{--k:#0D0D0D;--k2:#181818;--g:#2E2E2E;--g4:#444;--mut:#5C5C5C;--sil:#C8C8C8;--line:#DCDCDC;--bg:#fff;--bg2:#F6F6F6;--y:#FEC846;--y2:#E9AE1C;
  --head:'Oswald','Arial Narrow',Impact,sans-serif;--sans:'Noto Sans',system-ui,sans-serif;--pad:max(16px,calc((100% - 1180px) / 2))}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font:300 15.5px/1.55 var(--sans);color:var(--g);background:var(--bg);padding-bottom:60px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
b,strong{font-weight:600}
ul{list-style:none}

/* шапка: ячейки через тонкие линии, как у завода */
.hdr{display:flex;align-items:stretch;height:68px;border-bottom:1px solid var(--line);background:var(--bg);position:relative;z-index:15}
.logo{display:flex;align-items:center;gap:11px;padding:0 14px 0 16px;flex:1;min-width:0}
.logo img{width:auto;height:46px;flex:none}
.logo small{font:700 10px/1.25 var(--sans);text-transform:uppercase;letter-spacing:.03em;color:var(--g);border-left:1px solid var(--line);padding-left:11px}
.cell{display:flex;align-items:center;justify-content:center;width:64px;border-left:1px solid var(--line);flex:none;color:var(--k)}
.cell svg{width:22px;height:22px}
.menu summary{list-style:none;cursor:pointer;height:100%;width:100%;display:flex;align-items:center;justify-content:center}
.menu summary::-webkit-details-marker{display:none}
.menu .x,.menu[open] .b{display:none}.menu[open] .x{display:block}
.drop{position:absolute;left:0;right:0;top:100%;background:var(--k);padding:6px 16px 18px;box-shadow:0 18px 30px rgba(0,0,0,.25)}
.drop a{display:block;font:500 21px/1 var(--head);text-transform:uppercase;color:#F1F1F1;padding:15px 0;border-bottom:1px solid #2B2B2B}
.drop a.t{color:var(--y);border:0;padding-top:18px}
.top,.hph{display:none}

/* хлебные крошки и заголовок страницы с жёлтой чертой */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font:400 12px/1.4 var(--sans);color:var(--mut);padding:18px var(--pad) 0}
.crumbs i{width:26px;border-top:1px solid #9C9C9C}
.crumbs a:hover{color:var(--g)}
.pt{padding:14px var(--pad) 4px}
.pt .nf{display:inline-block;font:500 13px/1 var(--head);letter-spacing:.06em;background:var(--y);color:var(--g);padding:5px 8px 4px;margin-bottom:10px}
h1,h2{position:relative;font-family:var(--head);font-weight:600;text-transform:uppercase;letter-spacing:.005em}
h1{font-size:34px;line-height:1.12}
h2{font-size:27px;line-height:1.15;margin-bottom:14px}
.pt h1:before,h2:before{content:'';position:absolute;left:-16px;top:.14em;height:.92em;width:5px;background:var(--y)}
.lead{font-size:16px;color:var(--mut);margin-top:10px}
.sub{color:var(--mut);font-size:14.5px;margin:-6px 0 16px}

/* секции: светлая с крупным диагональным узором, тёмная с тёплым свечением */
section{padding:38px var(--pad)}
.lt{background-color:var(--bg2);background-image:linear-gradient(118deg,transparent 0 58%,rgba(0,0,0,.02) 58% 74%,transparent 74%),linear-gradient(62deg,transparent 0 30%,rgba(0,0,0,.016) 30% 44%,transparent 44%)}
.dk{color:#EDEDED;background:radial-gradient(90% 55% at 88% 12%,rgba(254,200,70,.16),transparent 62%),radial-gradient(70% 40% at 0% 100%,rgba(254,200,70,.07),transparent 70%),linear-gradient(180deg,#141414,#0A0A0A)}
.dk .sub,.dk .lead{color:#B9B9B9}

/* кнопки — прямые, капителью */
.btns{display:grid;gap:10px;margin-top:22px}
.btn{display:flex;align-items:center;justify-content:center;min-height:54px;padding:0 22px;font:500 17px/1.1 var(--head);text-transform:uppercase;letter-spacing:.015em;text-align:center;border:1px solid var(--g);color:var(--g);transition:background .15s,color .15s}
.btn.y{background:var(--y);border-color:var(--y);color:var(--g)}
.btn.y:hover{background:var(--y2);border-color:var(--y2)}
.btn.o{border-color:var(--y);color:#fff}
.btn.o:hover{background:var(--y);color:var(--g)}
.go{width:32px;height:32px;border-radius:50%;background:var(--y);display:flex;align-items:center;justify-content:center;flex:none;color:var(--g)}
.go svg{width:16px;height:16px}

/* первый экран */
.hero{padding-top:34px;padding-bottom:30px}
.kick{font:500 14px/1.3 var(--head);letter-spacing:.06em;text-transform:uppercase;color:var(--y);margin-bottom:14px}
.hero h1{font-size:40px;line-height:1.08;color:#fff}
.hero h1 em{font-style:normal;color:var(--y)}
.hero h1:before{display:none}
.hero .lead{font-size:16.5px}
.hcard{display:grid;grid-template-columns:118px 1fr;gap:0;background:#fff;color:var(--g);margin-top:28px;border-left:5px solid var(--y)}
.hcard img{width:118px;height:118px;object-fit:cover}
.hcard div{padding:12px 12px 10px 14px;display:flex;flex-direction:column}
.hcard b{font:500 18px/1.15 var(--head);text-transform:uppercase}
.hcard span{font-size:12.5px;color:var(--mut);margin-top:3px}
.hcard p{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:8px}
.hcard p strong{font:600 22px/1 var(--head)}
.hcard p small{font-size:12px;color:var(--mut)}
.hcard .go{margin-left:auto}
.facts{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #2E2E2E;margin-top:26px}
.facts div{padding:14px 12px 14px 0;border-bottom:1px solid #2E2E2E}
.facts div:nth-child(odd){border-right:1px solid #2E2E2E}
.facts div:nth-child(even){padding-left:14px}
.facts b{display:block;font:500 18px/1.15 var(--head);text-transform:uppercase;color:#fff}
.facts span{display:block;font-size:12.5px;color:#A9A9A9;line-height:1.35;margin-top:4px}

/* список с жёлтыми чёрточками */
.rows{border-top:1px solid var(--line)}
.row{display:flex;align-items:center;gap:14px;padding:15px 0;border-bottom:1px solid var(--line)}
.row>i{width:16px;height:3px;background:var(--y);flex:none}
.row span{min-width:0}
.row b{display:block;font:400 17px/1.3 var(--sans)}
.row small{display:block;font-size:13px;color:var(--mut);line-height:1.35}
.row em{margin-left:auto;font:500 16px/1 var(--head);font-style:normal;white-space:nowrap;padding-left:6px}
a.row:hover b{color:#000;text-decoration:underline;text-decoration-color:var(--y);text-underline-offset:4px}

/* карточки товаров — рамка, крупное фото, круглая жёлтая стрелка */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.card{display:flex;flex-direction:column;border:1px solid var(--line);background:#fff;transition:border-color .15s}
.card:hover{border-color:var(--g)}
.card .ph{aspect-ratio:1/1;overflow:hidden;background:#EFEFEF}
.card .ph img{width:100%;height:100%;object-fit:cover}
.card .cb{display:flex;flex-direction:column;flex:1;padding:12px 11px 12px}
.card h3{font:500 16px/1.2 var(--head);text-transform:uppercase;padding-bottom:9px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.card .sp{font:400 12px/1.4 var(--sans);color:var(--mut)}
.card .pr{display:flex;align-items:center;gap:5px;margin-top:auto;padding-top:10px}
.card .pr b{font:600 19px/1 var(--head)}
.card .pr small{font-size:11.5px;color:var(--mut)}
.card .go{margin-left:auto;width:28px;height:28px}
.more{margin-top:18px}

/* расчёт: поля «подчёркиванием» на тёмном, итог — графитовая панель с крупными цифрами */
.calc .fields{display:grid;grid-template-columns:1fr 1fr;gap:20px 16px}
.f{display:flex;flex-direction:column;gap:4px;min-width:0}
.f.w{grid-column:1/-1}
.f span{font:400 12.5px/1.3 var(--sans);color:#BDBDBD}
.f input,.f select{-webkit-appearance:none;appearance:none;width:100%;background:transparent;border:0;border-bottom:1px solid #6B6B6B;border-radius:0;color:#fff;font:500 19px/1.2 var(--head);padding:6px 0 8px}
.f select{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23FEC846' stroke-width='1.6'/%3E%3C/svg%3E") right 2px center no-repeat;padding-right:22px}
.f select option{color:var(--g);background:#fff}
.f input:focus,.f select:focus{outline:none;border-bottom-color:var(--y)}
.res{background:var(--g);margin-top:26px;padding:20px 18px 18px}
.tot{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;padding-bottom:14px;border-bottom:1px solid #4A4A4A}
.tot span{font-size:13px;color:var(--sil);line-height:1.25}
.tot b{font:600 36px/1 var(--head);color:#fff;white-space:nowrap}
.nums{display:grid;grid-template-columns:1fr 1fr;gap:16px 12px;padding:16px 0 18px}
.nums span{display:block;font-size:12.5px;color:var(--sil);line-height:1.25;margin-bottom:4px}
.nums b{font:500 25px/1.1 var(--head);color:#fff}
.nums .w{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;gap:10px;border-top:1px solid #4A4A4A;padding-top:12px}
.nums .w span{margin:0}
.nums .w b{font-size:19px;white-space:nowrap}
.nums b span{display:inline;font:inherit;color:inherit;margin:0}
.res .btn{width:100%}
.note{font-size:12.5px;color:#9E9E9E;margin-top:14px;line-height:1.45}
.msg{font-size:13px;color:var(--y);margin-top:12px}

/* объекты: сетка с тонкими рамками и подписями капителью */
.objs{display:grid;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.obj{border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.obj img{width:100%;aspect-ratio:16/10;object-fit:cover}
.obj div{padding:14px 14px 16px}
.obj b{display:block;font:500 17px/1.25 var(--head);text-transform:uppercase}
.obj small{display:block;font-size:13px;color:var(--mut);margin-top:3px}
.obj code{display:inline-block;font:500 13px/1 var(--head);letter-spacing:.04em;color:#B07E06;margin-top:8px}

/* блоки с точками-кольцами */
.two{display:grid;gap:14px}
.box{border:1px solid var(--line);background:#fff;padding:18px 18px 12px}
.box h3{font:500 20px/1.2 var(--head);text-transform:uppercase;margin-bottom:6px}
.dots li{position:relative;padding-left:30px;margin:10px 0;font-size:15.5px;line-height:1.4}
.dots li:before{content:'';position:absolute;left:0;top:.12em;width:18px;height:18px;border-radius:50%;border:1px solid var(--y);background:radial-gradient(circle,var(--y) 0 4px,transparent 4.6px)}

/* шоурумы и характеристики: подпись капителью слева, значение справа */
.tbl{border-top:1px solid var(--line)}
.tbl>div{display:grid;grid-template-columns:42% 1fr;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);align-items:baseline}
.tbl span{font:400 11px/1.35 var(--sans);text-transform:uppercase;letter-spacing:.07em;color:var(--mut)}
.tbl b{font:400 15.5px/1.35 var(--sans)}
.tbl b strong{font-family:var(--head);font-weight:500;font-size:17px}

/* карточка товара */
.gal{position:relative;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:14px}
.gal input{position:absolute;opacity:0;pointer-events:none}
.gal .main img{display:none;width:100%;aspect-ratio:1/1;object-fit:cover;background:#EFEFEF}
#g1:checked~.main .i1,#g2:checked~.main .i2,#g3:checked~.main .i3,#g4:checked~.main .i4,#g5:checked~.main .i5,#g6:checked~.main .i6{display:block}
.th{display:flex;gap:8px;padding:8px var(--pad);border-top:1px solid var(--line);overflow-x:auto}
.th label{width:84px;flex:none;cursor:pointer;outline:1px solid var(--line);outline-offset:-1px}
.th label img{width:84px;height:84px;object-fit:cover}
#g1:checked~.th .l1,#g2:checked~.th .l2,#g3:checked~.th .l3,#g4:checked~.th .l4,#g5:checked~.th .l5,#g6:checked~.th .l6{outline:3px solid var(--y);outline-offset:-3px}
.dimbox{display:flex;align-items:center;gap:14px;padding:14px var(--pad);border-bottom:1px solid var(--line)}
.dimbox svg{width:170px;height:auto;flex:none}
.dimbox span{font-size:13px;color:var(--mut)}
.dimbox span b{display:block;font:500 20px/1.2 var(--head);color:var(--g);margin-top:2px}
.buy{padding:22px var(--pad) 26px;border-bottom:1px solid var(--line)}
.price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.price b{font:600 44px/1 var(--head)}
.price small{font-size:14px;color:var(--mut)}
.pal{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pal span{font:400 11px/1.35 var(--sans);text-transform:uppercase;letter-spacing:.07em;color:var(--mut)}
.pal b{font:500 22px/1 var(--head)}
.meta{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12.5px;color:var(--mut);margin-top:10px}
.meta span:before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--y);margin-right:6px;vertical-align:1px}
.buy .btns{grid-template-columns:1.3fr 1fr}
.buy .btn{font-size:15.5px;padding:0 10px}
.mini .fields{grid-template-columns:1fr}
.mini .nums{grid-template-columns:1fr 1fr 1fr;padding-bottom:4px}
.mini .nums b{font-size:22px}
.dob{display:grid;grid-template-columns:96px 1fr auto;align-items:center;gap:14px;border:1px solid var(--line);background:#fff;padding-right:14px}
.dob img{width:96px;height:96px;object-fit:cover}
.dob b{display:block;font:500 17px/1.2 var(--head);text-transform:uppercase}
.dob small{display:block;font-size:12.5px;color:var(--mut);margin-top:3px;line-height:1.35}
.docs a,.docs div.doc{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.docs{border-top:1px solid var(--line)}
.docs i{font:500 12px/1 var(--head);letter-spacing:.05em;background:var(--g);color:var(--y);padding:8px 7px;flex:none}
.docs b{font:400 14.5px/1.35 var(--sans);flex:1}
.docs em{font-style:normal;color:var(--mut)}

/* каталог: вкладки-якоря как у завода */
.tabs{display:flex;gap:22px;overflow-x:auto;padding:0 var(--pad);border-bottom:1px solid var(--line);white-space:nowrap;scrollbar-width:none;margin-top:16px}
.tabs::-webkit-scrollbar{display:none}
.tabs a{font:500 16px/1 var(--head);text-transform:uppercase;padding:15px 0 13px;border-bottom:3px solid transparent;color:var(--g)}
.tabs a:hover,.tabs a:focus{border-bottom-color:var(--y);color:#B07E06}
.grp{padding-top:30px;padding-bottom:6px}
.grp h2{font-size:24px}

/* подвал и нижняя панель */
footer{background:var(--k);color:#B5B5B5;padding:36px var(--pad) 30px;font-size:14px;line-height:1.55}
footer .fl{display:flex;align-items:center;gap:14px;font:600 19px/1.15 var(--head);color:#fff;text-transform:uppercase;margin-bottom:16px}
footer .fl img{width:auto;height:52px;flex:none}
footer .ft{display:block;font:500 26px/1 var(--head);color:#fff;margin:18px 0 4px}
footer p{margin-top:10px}
footer .test{color:#7A7A7A;font-size:12.5px;border-top:1px solid #262626;padding-top:14px;margin-top:20px}
.dock{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:1fr 1fr 1.3fr;background:var(--k);border-top:1px solid #2A2A2A}
.dock a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:60px;color:#F1F1F1;font:500 12.5px/1 var(--head);text-transform:uppercase;letter-spacing:.04em;border-right:1px solid #2A2A2A}
.dock a.p{background:var(--y);color:var(--g);border:0;font-size:14px}
.dock svg{width:20px;height:20px}

/* боевая версия (templates/prod/, с 29.10): полоса предпросмотра, текст, вопросы-ответы, «выпускается не всегда», подпись к фото, заявка, ссылки в подвале */
.pv{background:var(--y);color:var(--k);font:400 13px/1.35 var(--sans);padding:7px 16px;text-align:center}
.pv a{text-decoration:underline}
.txt{max-width:780px}
.txt p{font-size:16.5px;line-height:1.6}
.gtx{color:var(--mut);font-size:15px;max-width:780px;margin:-4px 0 18px}
.ptx{padding:18px var(--pad) 0}
.ptx p{font-size:16px;line-height:1.6}
.cap{font-size:12.5px;color:var(--mut);padding:8px var(--pad);background:#fff;border-top:1px solid var(--line)}
.occ{align-self:flex-start;font:500 11px/1 var(--head);letter-spacing:.05em;text-transform:uppercase;background:var(--g);color:var(--y);padding:5px 7px 4px;margin-top:8px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;position:relative;padding:16px 36px 16px 0;font:500 18px/1.25 var(--head);text-transform:uppercase;color:var(--k)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:'+';position:absolute;right:4px;top:12px;font:400 26px/1 var(--head);color:#B07E06}
.faq details[open] summary:after{content:'–'}
.faq details p{padding:0 0 16px;font-size:15.5px;max-width:780px}
.lf .fields{display:grid;grid-template-columns:1fr 1fr;gap:20px 16px;max-width:780px}
.f textarea{-webkit-appearance:none;appearance:none;width:100%;background:transparent;border:0;border-bottom:1px solid #6B6B6B;border-radius:0;color:#fff;font:400 16px/1.4 var(--sans);padding:6px 0 8px;resize:vertical}
.f textarea:focus{outline:none;border-bottom-color:var(--y)}
.lf .ok{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.4;color:#BDBDBD}
.lf .ok input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--y)}
.lf .ok a{text-decoration:underline}
.lf .btn{width:100%;max-width:380px;margin-top:24px}
.lf .btn:disabled{opacity:.6}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.legal{max-width:820px}
.legal h3{font:500 20px/1.25 var(--head);text-transform:uppercase;margin:22px 0 8px}
.legal p{font-size:15.5px;line-height:1.6;margin-bottom:10px}
.legal a{text-decoration:underline}
.fnav{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:20px;font:500 15px/1.2 var(--head);text-transform:uppercase}
.fnav a{color:#EDEDED}
footer .test a{text-decoration:underline;color:#9A9A9A}

/* шире телефона */
@media (min-width:600px){
  .cards{grid-template-columns:repeat(3,1fr);gap:16px}
  .objs{grid-template-columns:1fr 1fr}
  .two{grid-template-columns:1fr 1fr}
  .btns{grid-template-columns:auto auto;justify-content:start}
  .facts{grid-template-columns:repeat(4,1fr)}
  .facts div{padding:16px 14px!important;border-right:1px solid #2E2E2E}
}
@media (min-width:960px){
  body{padding-bottom:0}
  .dock{display:none}
  .hdr{height:76px;padding-left:var(--pad)}
  .logo{padding-left:0;flex:none}
  .top{display:flex;align-items:center;gap:26px;margin:0 auto;padding:0 20px}
  .top a{font:500 17px/1 var(--head);text-transform:uppercase;color:var(--k)}
  .top a:hover,.top a.on{color:#B07E06}
  .hph{display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad) 0 24px;border-left:1px solid var(--line)}
  .hph a{font:500 22px/1 var(--head);color:var(--k)}
  .hph small{font-size:11.5px;color:var(--mut);margin-top:4px}
  .cell,.menu{display:none}
  h1{font-size:46px}
  h2{font-size:34px;margin-bottom:20px}
  .pt h1:before,h2:before{left:-26px}
  section{padding-top:56px;padding-bottom:56px}
  .hero{display:grid;grid-template-columns:1.25fr 1fr;gap:20px 56px;align-items:end;padding-top:70px;padding-bottom:56px}
  .hero h1{font-size:64px}
  .hero .facts{grid-column:1/-1}
  .hcard{grid-template-columns:1fr;margin:0}
  .hcard img{width:100%;height:auto;aspect-ratio:4/3}
  .cards{grid-template-columns:repeat(4,1fr)}
  .objs{grid-template-columns:repeat(3,1fr)}
  .calc{display:grid;grid-template-columns:1.3fr 1fr;gap:0 48px;align-items:start}
  .calc .res{margin-top:0}
  .calc .note{grid-column:1}
  .pgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;padding:0 var(--pad);align-items:start}
  .pgrid .gal,.pgrid .th,.pgrid .dimbox,.pgrid .buy,.pgrid .ptx{padding-left:0;padding-right:0}
  .pgrid .gal{border:1px solid var(--line)}
  .pgrid .th{padding:8px}
}