.kc-grid{--cols:4;--gap:24px;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap)}
.kc-grid > *{flex:0 1 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));min-width:0}
@media (max-width:1100px){.kc-grid > *{flex-basis:calc((100% - 2 * var(--gap)) / 3)}}
@media (max-width:760px){.kc-grid > *{flex-basis:calc((100% - var(--gap)) / 2)}}
@media (max-width:460px){.kc-grid > *{flex-basis:100%}}
/* even — ровные ряды: карточки одной высоты, неполный последний ряд
   центрируется базовым justify-content. Правило существует и потому, что
   класс без единого правила в CSS означает потерянный при порте стиль, и
   общий свод справедливо на это краснеет. */
.kc-grid.even{align-items:stretch}
.kc-grid.even > *{flex-grow:0}
.kc-grid.rail{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scroll-snap-type:x mandatory}
.kc-grid.rail > *{scroll-snap-align:start;flex:0 0 260px}
[hidden]{display:none!important}

.kc-tscroll{overflow-x:auto;max-width:100%;min-width:0}
table.kc-t{width:100%;border-collapse:collapse;min-width:560px}
table.kc-t td.num{text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:640px){
 table.kc-t{min-width:0}
 table.kc-t thead{position:absolute;left:-9999px}
 table.kc-t tr{display:block;margin-bottom:12px}
 table.kc-t td{display:flex;justify-content:space-between;gap:12px}
 table.kc-t td::before{content:attr(data-label);font-weight:600}
}

.kc-crumbs ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.kc-pager{display:flex;gap:8px;flex-wrap:wrap}
.kc-filters{display:flex;gap:8px;flex-wrap:wrap}
.kc-chip[aria-pressed="true"]{font-weight:600}
.kc-field{display:flex;flex-direction:column;gap:6px}
.kc-zoom{border:0;padding:0;max-width:96vw;max-height:96vh}
.kc-zoom img{display:block;max-width:96vw;max-height:96vh;height:auto}
.kc-gal{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.kc-gal > *{flex:0 1 calc((100% - 32px) / 3);min-width:0}
@media (max-width:700px){.kc-gal > *{flex-basis:100%}}
.kc-shot-link{position:relative;display:block}
.kc-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;min-width:0}
.kc-card{display:flex;flex-direction:column;min-width:0}


@font-face{font-family:"Epilogue";src:url("/static/version7844159947/frontend/Kecols/workwear/en_US/fonts/epilogue-latin-500.943ab208.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Epilogue";src:url("/static/version7844159947/frontend/Kecols/workwear/en_US/fonts/epilogue-latin-600.943ab208.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Epilogue";src:url("/static/version7844159947/frontend/Kecols/workwear/en_US/fonts/epilogue-latin-700.943ab208.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Heebo";src:url("/static/version7844159947/frontend/Kecols/workwear/en_US/fonts/heebo-latin-400.50dae2e1.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Heebo";src:url("/static/version7844159947/frontend/Kecols/workwear/en_US/fonts/heebo-latin-500.50dae2e1.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Heebo";src:url("/static/version7844159947/frontend/Kecols/workwear/en_US/fonts/heebo-latin-700.50dae2e1.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("/static/version7844159947/frontend/Kecols/workwear/en_US/fonts/ibm-plex-mono-latin-400.08949f72.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("/static/version7844159947/frontend/Kecols/workwear/en_US/fonts/ibm-plex-mono-latin-500.01d28544.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
 --paper:#fcfcfc;--field:#ebe9e4;--panel:#f5f4f1;
 --ink:#16181b;--ink2:#4a4f56;--ink3:#5e646c;
 --gold:#c8a227;--gold-text:#6a4f06;--navy:#21325e;--clay:#71441f;
 --line:#dbd8d2;--line2:#c3bfb7;--on-ink:#f7f6f3;
 --head:"Epilogue",system-ui,sans-serif;
 --body:"Heebo",system-ui,sans-serif;
 --mono:"Plex Mono",ui-monospace,monospace;
 --band:1320px;--gut:32px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--field);color:var(--ink);font-family:var(--body);
 font-size:16px;line-height:1.62}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--head);font-weight:700;line-height:1.14;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(32px,4.2vw,50px)}
h2{font-size:clamp(25px,2.7vw,34px)}
h3{font-size:19px;letter-spacing:0}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--gold-text);outline-offset:2px}
.kc-skip{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
 clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.kc-skip:focus{width:auto;height:auto;clip:auto;clip-path:none;margin:0;left:8px;top:8px;z-index:60;
 background:var(--paper);padding:10px 14px;border:2px solid var(--ink)}

/* ------------------------------------------------------------ полоса и сетка */
.kc-wrap{max-width:var(--band);margin:0 auto;padding-inline:var(--gut)}
@media (max-width:640px){:root{--gut:16px}}
.kc-sec{padding-block:56px}
.kc-sec.tight{padding-block:36px}
.kc-kicker{font-family:var(--head);font-weight:600;font-size:13px;letter-spacing:.16em;
 text-transform:uppercase;color:var(--gold-text);margin:0 0 10px}
.kc-kicker.on-dark{color:var(--gold)}
.kc-lede{font-size:18px;color:var(--ink2);max-width:none}
.kc-muted{color:var(--ink3);font-size:14px}
.kc-num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* Мера строки держат КОЛОНКИ, а не поля (§5): узкая колонка с пустотой по
   обе стороны — дефект, поэтому у прозы columns, а не max-width+auto. */
.kc-cols2{columns:2;column-gap:56px}
.kc-cols2 > p{break-inside:avoid;margin-top:0}
.kc-cols3{columns:3;column-gap:44px}
.kc-cols3 > p{break-inside:avoid;margin-top:0}
@media (max-width:900px){.kc-cols2,.kc-cols3{columns:1}}

/* --------------------------------------------------------------------- шапка */
.kc-util{background:var(--ink);color:var(--on-ink);font-size:13px}
.kc-util .kc-wrap{display:flex;gap:18px;align-items:center;justify-content:space-between;
 min-height:38px;flex-wrap:wrap}
.kc-util a{color:var(--on-ink)}
.kc-util .kc-util-r{display:flex;gap:18px;align-items:center;min-width:0}
.kc-head{background:var(--paper);border-bottom:1px solid var(--line)}
.kc-head .kc-wrap{display:flex;align-items:center;gap:28px;min-height:84px;min-width:0}
.kc-mark{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.kc-mark svg{display:block;width:30px;height:30px}
.kc-mark b{font-family:var(--head);font-weight:700;font-size:25px;letter-spacing:.16em}
.kc-nav{display:flex;gap:22px;flex-wrap:wrap;min-width:0;font-family:var(--head);
 font-weight:600;font-size:14px;letter-spacing:.02em}
.kc-nav a{text-decoration:none;padding-block:6px;border-bottom:2px solid transparent}
.kc-nav a:hover,.kc-nav a[aria-current]{border-bottom-color:var(--gold)}
.kc-search{margin-left:auto;display:flex;min-width:0;flex:0 1 264px}
.kc-search input{flex:1 1 auto;min-width:0;font:inherit;font-size:14px;padding:9px 12px;
 border:1px solid var(--line2);border-right:0;background:var(--paper);color:var(--ink)}
.kc-search button{font-family:var(--head);font-weight:600;font-size:13px;letter-spacing:.08em;
 text-transform:uppercase;padding:9px 14px;border:1px solid var(--ink);background:var(--ink);
 color:var(--on-ink);cursor:pointer}
.kc-burger{display:none;margin-left:auto;font:inherit;background:var(--paper);
 border:1px solid var(--line2);padding:9px 13px;cursor:pointer;font-family:var(--head);font-weight:600}
@media (max-width:1080px){
 .kc-burger{display:block}
 .kc-nav,.kc-search{display:none;width:100%}
 .kc-head[data-open="1"] .kc-nav{display:flex;flex-direction:column;gap:2px;padding-bottom:16px}
 .kc-head[data-open="1"] .kc-search{display:flex;padding-bottom:18px;flex-basis:auto}
 .kc-head .kc-wrap{flex-wrap:wrap}
}

/* ---------------------------------------------------------------------- hero */
/* Разделённый экран: слева тёмная панель с текстом, справа один крупный кадр.
   Светлый текст лежит на СОБСТВЕННОМ тёмном фоне, а не на фотографии
   (правило 25.08.2026): кадр может не приехать, читаемость от него не зависит. */
.kc-hero{background:var(--paper);border-bottom:1px solid var(--line)}
.kc-hero .kc-wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
 gap:0;align-items:stretch;padding-inline:0;min-height:544px}
.kc-hero-copy{background:var(--ink);color:var(--on-ink);padding:54px clamp(24px,4vw,64px) 48px;
 display:flex;flex-direction:column;justify-content:center;min-width:0}
.kc-hero-copy h1{color:var(--on-ink);margin-bottom:.38em}
.kc-hero-copy p{color:#dcdad4;font-size:17px;margin-bottom:1.1em}
.kc-hero-acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
/* ВЫСОТА ГЕРОЯ ОГРАНИЧЕНА, а кадр в ней стоит ЦЕЛИКОМ. Два правила разом:
   герой не выше 60% экрана (иначе первая карточка товара уезжает за сгиб) и
   кадр не обрезается (object-fit:cover срезал бы модели голову, и страж
   croppedImageFindings справедливо покраснел бы). Поэтому кадр держится по
   высоте, а ширину берёт по своей пропорции. */
.kc-hero-shot{position:relative;min-width:0;background:var(--paper);
 display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.kc-hero-shot img{width:auto;max-width:100%;height:544px;object-fit:contain}
.kc-hero-tag{position:absolute;left:0;bottom:0;background:var(--paper);border-top:3px solid var(--gold);
 padding:12px 18px;font-family:var(--head);font-weight:600;font-size:13px;letter-spacing:.12em;
 text-transform:uppercase;max-width:min(92%,420px)}
@media (max-width:900px){
 .kc-hero .kc-wrap{grid-template-columns:minmax(0,1fr);min-height:0}
 .kc-hero-shot img{height:420px}
}
@media (max-width:760px){.kc-hero-copy{padding:36px 16px 32px}}

/* ------------------------------------------------------------------- кнопки */
.kc-btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--head);font-weight:600;
 font-size:14px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
 padding:13px 22px;background:var(--ink);color:var(--on-ink);border:2px solid var(--ink);
 cursor:pointer;line-height:1.2;min-height:46px}
.kc-btn:hover{background:#000}
.kc-btn.gold{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.kc-btn.gold:hover{background:#b8930f;border-color:#b8930f}
.kc-btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.kc-btn.ghost.on-dark{color:var(--on-ink);border-color:var(--on-ink)}
.kc-btn.ghost:hover{background:var(--ink);color:var(--on-ink)}
.kc-btn.wide{width:100%;justify-content:center}

/* ------------------------------------------------------------------ карточка */
/* Спецификационная карточка образца 68: линия капсом и рейтинг в одной
   строке → имя → строка габаритов → цена. Различают такие вещи не кадром,
   а цветом, размером и числом карманов, поэтому спецификация стоит в сетке. */
.kc-card{background:var(--paper);border:1px solid var(--line);min-width:0}
.kc-card .kc-shot{background:var(--paper);border-bottom:1px solid var(--line)}
.kc-card .kc-shot img{width:100%;aspect-ratio:4/5;object-fit:contain}
/* height:100% ЗДЕСЬ ВРЕДЕН: он считается от высоты контейнера (auto) и
   отменяет растяжение флекс-элемента, из-за чего карточки в ряду остаются
   разной высоты, а цены встают на разных уровнях. Высоту даёт align-items:
   stretch у полки, а карточке нужен только height:auto. */
.kc-card{height:auto;align-self:stretch}
/* Цена и кнопка прижаты к НИЗУ карточки: имя вещи бывает в одну строку и в
   две, спецификация в одну и в три, и без этого цены в одном ряду стояли на
   разной высоте (страж rowBaselineFindings, разброс до 45px). */
.kc-card-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:7px;min-width:0;flex:1 1 auto}
/* К НИЗУ прижата СТРОКА ЦЕНЫ, а не строка расцветок: перенос квадратов на
   вторую строку сдвигал цену вниз, и ряд карточек ехал на 26px при равной
   высоте самих карточек. Квадраты держатся в одну строку. */
.kc-card-body > .kc-colorline{min-height:17px}
.kc-card-body > .kc-row{margin-top:auto}
.kc-chips{flex-wrap:nowrap;overflow:hidden}
/* Надпись кнопки одна на весь сайт, но на узкой карточке она переносится в
   две строки: фиксируем высоту, иначе ряд карточек едет по цене. */
.kc-card-body > .kc-btn{margin-top:2px;min-height:52px;text-align:center}
.kc-line-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0}
.kc-line{font-family:var(--head);font-weight:600;font-size:13px;letter-spacing:.1em;
 text-transform:uppercase;color:var(--gold-text);text-decoration:none;min-width:0;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kc-stars{font-family:var(--mono);font-size:13px;color:var(--ink2)}
/* Рейтинг в КАРТОЧКЕ держится в одну строку, а на странице товара он длинный
   («4.1 out of 5 · 166 ratings across the line») и обязан переноситься:
   с nowrap он вылезал за край на 320-360px. */
.kc-card .kc-stars{white-space:nowrap}
.kc-buy .kc-line-row{flex-wrap:wrap}
.kc-card-title{font-family:var(--head);font-weight:600;font-size:17px;line-height:1.24;margin:0}
.kc-card-title a{text-decoration:none}
.kc-card-title a:hover{text-decoration:underline}
.kc-spec{font-family:var(--mono);font-size:13px;color:var(--ink2);line-height:1.5;
 display:flex;flex-wrap:wrap;gap:4px 10px;min-width:0}
.kc-price{font-family:var(--mono);font-weight:500;font-size:21px;color:var(--ink);
 line-height:1.25;display:block}
/* Подпись размера всегда СВОЕЙ строкой: «from $29.99 sizes 36W to 44W» на
   узкой карточке переносилась по-разному, и строка цены то в одну строку, то
   в две — ряд карточек ехал даже при равной высоте карточек. */
.kc-per{font-size:12px;color:var(--ink3);font-family:var(--body);display:block}
/* Высота строки цены фиксирована, и межстрочные интервалы заданы ЯВНО:
   иначе вторая строка («sizes M to XL») обрезалась пополам. */
.kc-card .price-box{display:block;height:48px;overflow:hidden}
/* Подпись размера держится в ОДНУ строку: «sizes 36W to 44W» на узкой
   карточке переносилась, и строка цены становилась на 34px выше соседской. */
.kc-card .kc-per{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
.kc-chips{display:flex;gap:5px;flex-wrap:wrap}
.kc-dot{width:15px;height:15px;border:1px solid var(--line2);display:block}
/* Отступ строки цены задаётся ВЫШЕ (margin-top:auto прижимает её к низу):
   прежнее правило стояло позже и перебивало прижатие, из-за чего цены в
   ряду расходились на 42px при равной высоте карточек. */

/* Полка: ровные ряды, неполный последний ряд ЦЕНТРИРУЕТСЯ флексом (§5). */
.kc-shelf{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;align-items:stretch}
.kc-shelf > *{flex:0 1 calc((100% - 72px) / 4);min-width:0}
.kc-shelf.three > *{flex-basis:calc((100% - 48px) / 3)}
@media (max-width:1000px){.kc-shelf > *,.kc-shelf.three > *{flex-basis:calc((100% - 48px) / 3)}}
@media (max-width:760px){.kc-shelf > *,.kc-shelf.three > *{flex-basis:calc((100% - 24px) / 2)}}
@media (max-width:459px){.kc-shelf > *,.kc-shelf.three > *{flex-basis:100%}}
.kc-shelf-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
 flex-wrap:wrap;margin-bottom:22px}
.kc-shelf-head h2{margin:0}

/* Переключатель аудитории в ЗАГОЛОВКЕ секции — решение лидеров ниши. */
.kc-swap{display:flex;gap:0;border:1px solid var(--ink)}
.kc-swap a{font-family:var(--head);font-weight:600;font-size:13px;letter-spacing:.1em;
 text-transform:uppercase;padding:9px 16px;text-decoration:none;color:var(--ink)}
.kc-swap a[aria-current]{background:var(--ink);color:var(--on-ink)}

/* ------------------------------------------------------- лента цветов */
.kc-colours{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.kc-colour{flex:0 1 190px;background:var(--paper);border:1px solid var(--line);
 text-decoration:none;min-width:0}
.kc-colour img{width:100%;aspect-ratio:4/5;object-fit:contain;background:var(--paper)}
.kc-colour b{display:flex;align-items:center;gap:8px;font-family:var(--head);font-weight:600;
 font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:11px 13px 4px}
.kc-colour span{display:block;padding:0 13px 12px;color:var(--ink3);font-size:13px}
.kc-colour:hover{border-color:var(--ink)}

/* --------------------------------------------------- плитки отделов */
.kc-depts{display:flex;flex-wrap:wrap;gap:20px;justify-content:center}
.kc-depts > a{flex:0 1 calc((100% - 80px) / 5);min-width:0;text-decoration:none;
 background:var(--paper);border:1px solid var(--line)}
.kc-depts img{width:100%;aspect-ratio:1/1;object-fit:contain;background:var(--paper)}
.kc-depts b{display:block;font-family:var(--head);font-weight:600;font-size:14px;
 padding:11px 12px 2px;letter-spacing:.01em}
.kc-depts span{display:block;padding:0 12px 12px;color:var(--ink3);font-size:13px;
 font-family:var(--mono)}
@media (max-width:1100px){.kc-depts > a{flex-basis:calc((100% - 40px) / 3)}}
@media (max-width:620px){.kc-depts > a{flex-basis:calc((100% - 20px) / 2)}}

/* ------------------------------------------------- полоса «где это носят» */
.kc-scene{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
.kc-scene figure{margin:0;background:var(--paper);border:1px solid var(--line)}
.kc-scene img{width:100%;max-width:600px;margin-inline:auto;aspect-ratio:4/5;object-fit:contain;background:var(--paper)}
.kc-scene figcaption{padding:14px 18px 18px}
.kc-scene figcaption b{display:block;font-family:var(--head);font-size:18px;margin-bottom:5px}
@media (max-width:760px){.kc-scene{grid-template-columns:minmax(0,1fr)}}

/* ------------------------------------------------------------- список кроев */
.kc-fits{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;
 border:1px solid var(--line);background:var(--paper)}
.kc-fits a{display:flex;align-items:baseline;gap:12px;padding:15px 18px;text-decoration:none;
 border-bottom:1px solid var(--line);border-right:1px solid var(--line);min-width:0}
.kc-fits a:hover{background:var(--panel)}
.kc-fits b{font-family:var(--head);font-weight:600;font-size:15px;min-width:0}
.kc-fits span{margin-left:auto;font-family:var(--mono);font-size:12.5px;color:var(--ink3);white-space:nowrap}

/* ---------------------------------------------------- плитки статей (68) */
.kc-reads{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.kc-read{display:flex;gap:0;background:var(--paper);border:1px solid var(--line);
 text-decoration:none;min-width:0}
/* Кадр плитки — ФИКСИРОВАННАЯ ширина, а не процент: процентный flex-basis
   вместе с полями текста давал на 768 колонку в 36px, вылезавшую за полосу.
   Текстовому блоку обязателен min-width:0 (§5: у флекс-детей min-width по
   умолчанию auto, и длинное слово распирает родителя). */
.kc-read img{flex:0 0 132px;width:132px;aspect-ratio:1/1;object-fit:contain;background:var(--paper);
 border-right:1px solid var(--line)}
.kc-read div{flex:1 1 auto;padding:16px 18px;min-width:0;display:flex;flex-direction:column;gap:6px}
.kc-read b,.kc-read span{overflow-wrap:anywhere}
.kc-read i{font-style:normal;margin-top:auto;font-family:var(--head);font-weight:600;font-size:13px;
 letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.kc-read b{display:block;font-family:var(--head);font-weight:600;font-size:15px;line-height:1.26;
 color:var(--gold-text)}
.kc-read span{display:block;margin-top:7px;color:var(--ink3);font-size:13px}
@media (max-width:620px){
 .kc-reads{grid-template-columns:1fr}
 .kc-read{flex-direction:column}
 .kc-read img{flex:0 0 auto;width:100%;aspect-ratio:16/9;border-right:0;border-bottom:1px solid var(--line)}
}

/* ------------------------------------------------------------- полосы текста */
.kc-band{background:var(--paper);border-block:1px solid var(--line)}
.kc-band.ink{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.kc-band.ink h2{color:var(--on-ink)}
.kc-band.ink p{color:#dcdad4}
.kc-band.ink > .kc-wrap > p a,.kc-band.ink > .kc-wrap > h2 a{color:var(--on-ink)}
/* Белая карточка внутри ТЁМНОЙ полосы наследовала светлые чернила и печатала
   белым по белому: ссылки заголовков давали 1.05:1, надпись золотой кнопки
   2.25:1. Цвет объявляется САМИМ блоком, а не достаётся по наследству от
   полосы (урок eytino: страж правды рендера ловит ровно это). */
.kc-card,.kc-card a,.kc-colour,.kc-colour a,.kc-read,.kc-read b,
.kc-facts,.kc-panel,.kc-fits a{color:var(--ink)}
.kc-card .kc-line,.kc-read b{color:var(--gold-text)}
.kc-card .kc-spec,.kc-card .kc-stars{color:var(--ink2)}
.kc-card .kc-per,.kc-colour span,.kc-read span{color:var(--ink3)}
.kc-btn{color:var(--on-ink)}
.kc-btn.gold,.kc-btn.ghost{color:var(--ink)}
.kc-btn.ghost.on-dark{color:var(--on-ink)}
.kc-half{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:44px;align-items:start}
@media (max-width:900px){.kc-half{grid-template-columns:minmax(0,1fr);gap:24px}}
.kc-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;
 border:1px solid var(--line);background:var(--paper);color:var(--ink)}
/* Цвет текста задан ЯВНО: на тёмной полосе панель наследовала светлые
   чернила и печатала белым по белому. Страж renderTruthFindings ловит ровно
   это, а глазом на белом фоне такой блок выглядит пустым. */
.kc-band.ink .kc-facts b,.kc-band.ink .kc-facts span{color:var(--ink)}
.kc-facts span{color:var(--ink3)}
.kc-facts div{padding:16px 18px;border-right:1px solid var(--line)}
.kc-facts div:last-child{border-right:0}
.kc-facts b{display:block;font-family:var(--mono);font-weight:500;font-size:23px;line-height:1.2}
.kc-facts span{display:block;color:var(--ink3);font-size:13px;margin-top:3px}

/* ------------------------------------------------------------- страница отдела */
.kc-plp{display:grid;grid-template-columns:262px minmax(0,1fr);gap:32px;align-items:start}
@media (max-width:1000px){.kc-plp{grid-template-columns:minmax(0,1fr)}}
.kc-rail{display:flex;flex-direction:column;gap:16px;min-width:0}
.kc-panel{background:var(--paper);border:1px solid var(--line);padding:15px 16px}
.kc-panel h3{font-family:var(--head);font-weight:600;font-size:13px;letter-spacing:.12em;
 text-transform:uppercase;color:var(--ink2);margin:0 0 10px}
.kc-opt{display:flex;align-items:center;gap:9px;padding:4px 0;cursor:pointer;font-size:14px;min-width:0}
.kc-opt input{width:16px;height:16px;accent-color:var(--ink);flex:0 0 auto}
.kc-opt span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.kc-opt em{margin-left:auto;font-family:var(--mono);font-style:normal;font-size:12.5px;color:var(--ink3)}
.kc-plp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
 flex-wrap:wrap;margin-bottom:20px}
.kc-sort{display:flex;align-items:center;gap:8px;font-size:14px}
.kc-sort select{font:inherit;padding:8px 10px;border:1px solid var(--line2);background:var(--paper)}
.kc-empty{padding:26px;background:var(--paper);border:1px dashed var(--line2);text-align:center}

/* ------------------------------------------------------------ карточка товара */
.kc-pdp{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:44px;align-items:start}
/* minmax(0,1fr), а не 1fr: у колонки 1fr минимальная ширина равна
   min-content, и кадр с max-width:620px распирал её шире экрана — на 390
   ведущий кадр выходил за край на 148px (поймано ГЛАЗАМИ на приёмке §10.1). */
@media (max-width:900px){.kc-pdp{grid-template-columns:minmax(0,1fr);gap:24px}}
/* 602 = 600 кадра плюс рамка: объявленная ступень sizes равна 600, и лишние
   18px бокса означали бы растянутый кадр (страж soft-image). */
.kc-lead{background:var(--paper);border:1px solid var(--line);max-width:602px;width:100%}
.kc-lead img{width:100%;aspect-ratio:4/5;object-fit:contain}
.kc-thumbs{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.kc-thumbs button{padding:0;border:1px solid var(--line);background:var(--paper);cursor:pointer;
 flex:0 0 76px}
.kc-thumbs button[aria-current="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.kc-thumbs img{width:100%;aspect-ratio:4/5;object-fit:contain}
.kc-buy{background:var(--paper);border:1px solid var(--line);padding:20px 22px}
.kc-buy h1{font-size:clamp(25px,2.7vw,34px);margin-bottom:.3em}
.kc-price-big{font-family:var(--mono);font-weight:500;font-size:30px}
.kc-vars{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.kc-var{font-family:var(--mono);font-size:13px;padding:7px 11px;border:1px solid var(--line2);
 text-decoration:none;background:var(--paper);color:var(--ink)}
.kc-var[aria-current]{border-color:var(--ink);background:var(--ink);color:var(--on-ink)}
.kc-var:hover{border-color:var(--ink)}
.kc-note{font-size:13px;color:var(--ink3);margin-top:12px}
.kc-pairs{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0}
.kc-pairs dt{font-family:var(--head);font-weight:600;font-size:13px;letter-spacing:.06em;
 text-transform:uppercase;color:var(--ink2)}
.kc-pairs dd{margin:0;font-family:var(--mono);font-size:14px}
table.kc-t{font-size:14.5px}
table.kc-t th{font-family:var(--head);font-weight:600;font-size:13px;letter-spacing:.1em;
 text-transform:uppercase;text-align:left;padding:10px 12px;background:var(--panel);
 border-bottom:1px solid var(--line)}
table.kc-t td{padding:10px 12px;border-bottom:1px solid var(--line)}
table.kc-t td.num{font-family:var(--mono)}
.kc-t caption{text-align:left;padding-bottom:8px;color:var(--ink3);font-size:13px}
/* Шапку таблицы на узком экране прячем СТАНДАРТНЫМ visually-hidden, а не
   выносом на -9999px: вынесенный за экран текст страж полосы контента
   справедливо считает вылетом за край. */
/* В карточном режиме таблицы подписи столбцов печатает ::before у каждой
   ячейки (data-label), поэтому шапка не прячется выносом за экран, а
   убирается совсем: вынесенная на -9999px строка заголовков честно считается
   вылетом за полосу контента, и страж краснел на каждой таблице гида. */
@media (max-width:640px){ table.kc-t thead{display:none} }

/* ------------------------------------------------------------------ галерея */
.kc-gal > *{flex-basis:calc((100% - 32px) / 3);background:var(--paper);border:1px solid var(--line)}
.kc-gal img{width:100%;aspect-ratio:4/5;object-fit:contain}
.kc-zoom{background:var(--paper);padding:10px;border:1px solid var(--ink)}
.kc-zoom::backdrop{background:rgba(10,11,13,.82)}

/* ---------------------------------------------------------------- статья */
.kc-art h2{margin-top:1.4em}
.kc-art figure{margin:26px 0;background:var(--paper);border:1px solid var(--line)}
.kc-art figure img{width:100%;aspect-ratio:4/5;object-fit:contain}
.kc-art figcaption{padding:11px 16px;color:var(--ink3);font-size:13px}
.kc-quote{background:var(--panel);border-left:4px solid var(--gold);padding:16px 20px;margin:22px 0}
.kc-quote cite{display:block;margin-top:8px;font-style:normal;font-size:13px;color:var(--ink3)}
.kc-toc{background:var(--paper);border:1px solid var(--line);padding:16px 18px}
.kc-toc ol{margin:0;padding-left:20px}
.kc-src{font-size:14px;color:var(--ink2)}
.kc-src li{margin-bottom:9px}

/* ---------------------------------------------------------- SVG-инфографика */
/* Подписи набираются HTML, а не <text> внутри SVG: широкая картинка с текстом
   внутри сжимается втрое на 360px и 15px кегля превращаются в 5.7px. */
.kc-dia{background:var(--paper);border:1px solid var(--line);padding:18px}
.kc-dia svg{width:100%;height:auto;display:block}
.kc-dia-legend{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:12px;font-size:13.5px}
.kc-dia-legend b{font-family:var(--mono);font-weight:500}

/* ---------------------------------------------------------------- FAQ, прочее */
.kc-faq-item{background:var(--paper);border:1px solid var(--line);padding:13px 16px;margin-bottom:10px}
.kc-faq-item summary{font-family:var(--head);font-weight:600;cursor:pointer}
.kc-faq-item p{margin:10px 0 0;color:var(--ink2)}
.kc-crumbs{font-size:13px;color:var(--ink3);padding-block:14px}
.kc-crumbs a{color:var(--ink2)}
.kc-crumbs li+li::before{content:"/";margin-right:8px;color:var(--line2)}
.kc-pager a,.kc-pager span{display:inline-flex;min-width:40px;height:40px;align-items:center;
 justify-content:center;border:1px solid var(--line2);text-decoration:none;font-family:var(--mono)}
.kc-pager span[aria-current]{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.kc-legal{background:var(--paper);border:1px solid var(--line);padding:clamp(20px,3vw,40px)}
.kc-legal h2{font-size:22px;margin-top:1.5em}
.kc-form{display:grid;gap:14px;max-width:none}
.kc-form input,.kc-form textarea{font:inherit;padding:10px 12px;border:1px solid var(--line2);
 background:var(--paper);width:100%}
.kc-map{border:1px solid var(--line);width:100%;aspect-ratio:16/9;display:block;background:var(--panel)}
.kc-fmap{padding-bottom:26px}
.kc-fmap .kc-map{aspect-ratio:auto;height:240px;border-color:#2c2f34}

/* -------------------------------------------------------------------- подвал */
.kc-foot{background:var(--ink);color:var(--on-ink);margin-top:64px}
.kc-foot a{color:var(--on-ink);text-decoration:none}
.kc-foot a:hover{text-decoration:underline}
.kc-fgrid{display:grid;grid-template-columns:minmax(0,4fr) repeat(4,minmax(0,2fr));gap:32px;
 padding-block:48px 34px}
.kc-flogo{display:flex;align-items:center;gap:10px;font-family:var(--head);font-weight:700;
 font-size:30px;letter-spacing:.16em}
/* Знак в подвале — тот же SVG, что в шапке, и ему НУЖЕН явный размер: без
   width/height инлайновый svg растягивается на всю колонку. */
.kc-flogo svg{flex:0 0 auto;width:34px;height:34px}
.kc-foot h4{font-family:var(--head);font-weight:600;font-size:13px;letter-spacing:.12em;
 text-transform:uppercase;color:var(--gold);margin:0 0 12px}
.kc-foot .kc-fgrid > div > a{display:block;font-size:14px;padding:4px 0}
.kc-foot .kc-muted{color:#b9b6b0}
.kc-fbottom{border-top:1px solid #2c2f34;background:#101216;margin-inline:calc(var(--gut) * -1);
 padding:22px var(--gut)}
.kc-fbottom p{margin:0 0 6px;font-size:13px;color:#b9b6b0}
.kc-fbottom p:last-child{margin-bottom:0}
@media (max-width:1000px){.kc-fgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}}
@media (max-width:560px){.kc-fgrid{grid-template-columns:1fr}}