@font-face{font-family:"Archivo Narrow";src:url("/assets/fonts/archivo-narrow-latin.e1097881.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/assets/fonts/ibm-plex-sans-latin.e2291e84.woff2") format("woff2");font-weight:400 600;font-display:swap}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

:root{
 --bg:#ffffff; --surface:#f2f2f0; --surface-alt:#e9e9e6; --line:#deded9;
 --ink:#15181d; --muted:#585f6b; --accent:#2c3f5b; --accent-strong:#22314a;
 --on-accent:#ffffff; --dark:#15181d; --on-dark:#ffffff; --on-dark-muted:#c8ccd2;
 --khaki:#8a6534;
 --wrap:1280px;
 --narrow:"Archivo Narrow","Arial Narrow",Arial,sans-serif;
 --body:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--body)}
img{max-width:100%}
a{color:inherit}
[hidden]{display:none!important}
h1,h2,h3,h4{font-family:var(--narrow);font-weight:700;line-height:1.12;letter-spacing:.01em;margin:0}
h1{font-size:39px}
h2{font-size:28px}
h3{font-size:20px}
p{margin:0 0 14px}
.sc-wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.sc-sec{padding-block:46px;border-top:1px solid var(--line)}
.sc-sec--plain{border-top:0}
.sc-sec--tint{background:var(--surface);border-top:0}
.sc-sechead{display:flex;align-items:baseline;justify-content:space-between;gap:18px;margin-bottom:16px;flex-wrap:wrap}
.sc-kicker{font-family:var(--narrow);text-transform:uppercase;letter-spacing:.16em;font-size:13px;color:var(--muted);margin:0 0 8px}
.sc-more{font-family:var(--narrow);text-transform:uppercase;letter-spacing:.1em;font-size:13px;color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}

/* --- шапка: служебная строка, знак с поиском, ряд отделов, полоса-тезис --- */
.sc-util{background:var(--surface);font-family:var(--narrow);font-size:13px;letter-spacing:.04em}
.sc-util .sc-wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:38px;flex-wrap:wrap}
.sc-util a{color:var(--muted);text-decoration:none}
.sc-util a:hover{color:var(--ink)}
.sc-utilnav{display:flex;gap:18px;flex-wrap:wrap}
.sc-head{border-bottom:1px solid var(--line)}
.sc-head .sc-wrap{display:flex;align-items:center;gap:28px;min-height:78px;flex-wrap:wrap}
.sc-logo{display:flex;flex-direction:column;text-decoration:none;flex:0 0 auto;min-width:0}
.sc-logo b{font-family:var(--narrow);font-weight:700;font-size:27px;letter-spacing:.09em;color:var(--accent);line-height:1}
.sc-logo span{font-family:var(--narrow);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.sc-search{flex:1 1 260px;min-width:0}
.sc-search input{width:100%;min-width:0;font:400 15px/1.4 var(--body);padding:11px 14px;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:0}
.sc-search input::placeholder{color:var(--muted)}
.sc-nav{border-bottom:1px solid var(--line)}
.sc-nav .sc-wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:46px;flex-wrap:wrap}
.sc-navlist{display:flex;gap:22px;flex-wrap:wrap}
.sc-nav a{font-family:var(--narrow);text-transform:uppercase;letter-spacing:.08em;font-size:14px;text-decoration:none;color:var(--ink);padding-block:6px}
.sc-nav a:hover,.sc-nav a[aria-current]{color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)}
.sc-nav .sc-navside a{color:var(--muted);letter-spacing:.06em}
.sc-strip{background:var(--surface);text-align:center;font-family:var(--narrow);font-size:14px;letter-spacing:.05em;color:var(--muted);padding-block:8px}

/* --- герой: не фотополоса, а полоса со скошенным блоком --- */
/* Фотополосой герой образца быть не может: исходники каталога 500px, и кадр
   во всю ширину был бы мылом (§4.0). Композиция сохранена — заголовок слева,
   скошенный цветной блок справа, — но держит её ЦВЕТ и типографика. */
.sc-hero{position:relative;overflow:hidden;background:var(--surface);border-bottom:1px solid var(--line)}
/* Высота героя держится ПОД ПОТОЛКОМ 60% экрана (замер браузерного аудита:
   при 52px полей он занимал 69% и выталкивал первую карточку товара на 1085px
   при потолке 900). Полосы ужаты, кадр героя уменьшен, сетка на 900px больше
   не складывается в столбец, а сжимается. */
.sc-hero .sc-wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:28px;align-items:center;padding-block:30px}
.sc-hero-slab{position:absolute;inset:0 0 0 auto;width:34%;background:var(--accent);clip-path:polygon(22% 0,100% 0,100% 100%,0 100%)}
.sc-hero h1{max-width:15ch;font-size:34px}
.sc-hero p{font-size:16px;color:var(--muted);max-width:46ch;margin-top:10px}
.sc-hero-figs{display:flex;gap:22px;flex-wrap:wrap;margin-top:16px}
.sc-hero-figs b{display:block;font-family:var(--narrow);font-size:26px;line-height:1}
.sc-hero-figs span{font-family:var(--narrow);text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--muted)}
.sc-hero-card{position:relative;background:var(--bg);border:1px solid var(--line);padding:12px;display:grid;gap:8px;justify-items:center;text-align:center;max-width:250px;margin-left:auto}
.sc-hero-card img{width:100%;height:auto}
.sc-cta{display:inline-flex;align-items:center;gap:10px;margin-top:18px;background:var(--accent-strong);color:var(--on-accent);font-family:var(--narrow);text-transform:uppercase;letter-spacing:.1em;font-size:14px;padding:13px 26px;text-decoration:none}
.sc-cta--ghost{background:transparent;color:var(--accent);border:1px solid var(--accent)}

/* --- полоса-тезис --- */
.sc-thesis{text-align:center;padding-block:18px}
.sc-thesis h2{font-size:28px;max-width:34ch;margin-inline:auto}
.sc-thesis h2 em{font-style:normal;color:var(--accent)}

/* --- сетка отделов текстом, как у образца --- */
/* Шесть отделов встают ТРЕМЯ в ряд: при auto-fit их раскладывало по пять, и
   шестая плитка оставалась сиротой у левого края (§5 требует центрировать
   неполный ряд — здесь ряд просто делается полным). */
.sc-depts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 24px}
@media (max-width:860px){.sc-depts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.sc-depts{grid-template-columns:1fr}}
.sc-dept{display:block;text-decoration:none;text-align:center}
/* Кадры каталога разной пропорции: без общего бокса подписи в ряду стояли на
   разной высоте. Бокс 4:5, кадр внутри по contain — обрезки нет. */
.sc-dept img{width:100%;aspect-ratio:4/5;object-fit:contain;height:auto;background:var(--surface);padding:10px}
.sc-dept b{display:block;font-family:var(--narrow);font-size:17px;margin-top:12px}
.sc-dept span{display:block;font-size:13px;color:var(--muted);margin-top:3px}

/* --- сетка карточек --- */
/* Сетка карточек — ФЛЕКС с центрированием, а не grid: у grid неполный
   последний ряд прижимается к левому краю, и браузерный аудит краснел на всех
   девяти сетках сайта (§5 требует центрировать неполный ряд). Число в ряду
   задаётся базисом, а не колонками. */
.sc-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:28px 20px}
.sc-grid > *{flex:0 1 calc(25% - 15px)}
@media (max-width:1040px){.sc-grid > *{flex:0 1 calc(33.333% - 14px)}}
@media (max-width:760px){.sc-grid > *{flex:0 1 calc(50% - 10px)}}
.sc-card{display:flex;flex-direction:column;min-width:0;background:var(--bg)}
.sc-card-shot{display:block;background:var(--surface);padding:14px}
.sc-card-shot img{display:block;width:100%;aspect-ratio:4/5;object-fit:contain;height:auto;mix-blend-mode:multiply}
.sc-card-body{display:flex;flex-direction:column;gap:6px;padding:12px 6px 0;text-align:center;flex:1}
.sc-card h3{font-size:15px;font-weight:600;line-height:1.3}
.sc-card h3 a{color:var(--accent);text-decoration:none}
.sc-card h3 a:hover{text-decoration:underline}
.sc-spec{font-family:var(--narrow);font-size:13px;letter-spacing:.03em;color:var(--muted);min-height:1.3em}
.sc-stars{font-size:13px;color:var(--muted);min-height:1.3em}
.sc-stars b{font-weight:500}
.sc-price{font-family:var(--narrow);font-size:19px;font-weight:700;min-height:1.2em}
.sc-meta{font-size:12px;color:var(--muted);min-height:1.2em}
.sc-slot-empty{display:block}
.sc-card-foot{margin-top:auto;padding-top:12px}
.sc-swatches{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.sc-sw i{display:block;width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.25)}
.sc-sw--word{font-size:12px;color:var(--muted);text-decoration:none;border-bottom:1px dotted currentColor}

/* --- кнопка покупки: контурный прямоугольник в духе образца --- */
.sc-buy{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
 border:1px solid var(--accent);color:var(--accent);background:transparent;
 padding:10px 14px;text-decoration:none;cursor:pointer}
.sc-buy:hover{background:var(--accent);color:var(--on-accent)}
.sc-buy:hover img{filter:invert(1) brightness(2)}
/* Надпись кнопки — картинка; высота считается от кегля кнопки, чтобы на
   плотном экране она не мылилась. Доля чернил берётся из buy-label.json, и
   общий страж labelScaleFindings сверяет одно с другим. */
.buy-label{display:block;height:calc(1em * 0.75);width:auto}
.sc-buy img{display:block;height:auto}
/* Кадр без крупного двойника: на этом сайте таких все, класс остаётся крючком
   для медиа-тракта и для аудита. */
.sc-lo{background:transparent}
.sc-buy--solid{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--on-accent)}
.sc-buy--solid img{filter:invert(1) brightness(2)}

/* --- полосы-баннеры парой --- */
.sc-bands{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.sc-band{background:var(--surface);border:1px solid var(--line);padding:26px;display:flex;flex-direction:column;gap:10px}
.sc-band h3{font-size:22px}
.sc-band p{color:var(--muted);margin:0}

/* --- служебные плитки: у нас ЧЕСТНЫЕ факты вместо обещаний доставки --- */
.sc-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.sc-tile{border:1px solid var(--line);padding:20px;display:flex;flex-direction:column;gap:8px}
.sc-tile b{font-family:var(--narrow);font-size:16px;letter-spacing:.04em;text-transform:uppercase}
.sc-tile span{font-size:14px;color:var(--muted)}

/* --- гиды тремя карточками --- */
.sc-guides{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.sc-guide{display:block;text-decoration:none;border:1px solid var(--line);padding:22px}
.sc-guide b{display:block;font-family:var(--narrow);font-size:20px;line-height:1.2}
.sc-guide span{display:block;font-size:14px;color:var(--muted);margin-top:10px}
.sc-guide em{display:block;font-style:normal;font-family:var(--narrow);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-top:14px}

/* --- две колонки прозы: меру строки держат КОЛОНКИ, а не поля (§5) --- */
.sc-cols{columns:2;column-gap:44px}
.sc-cols p{break-inside:avoid}
@media (max-width:820px){.sc-cols{columns:1}}

/* --- категория: полоса имени, боковые фильтры, сетка --- */
.sc-catband{background:var(--accent);color:var(--on-accent);padding-block:34px}
.sc-catband h1{color:var(--on-accent)}
.sc-catband p{color:rgba(255,255,255,.84);max-width:60ch;margin:10px 0 0}
.sc-layout{display:grid;grid-template-columns:236px minmax(0,1fr);gap:34px;align-items:start}
@media (max-width:900px){.sc-layout{grid-template-columns:1fr}}
.sc-filters{border:1px solid var(--line);padding:18px;min-width:0}
.sc-fgroup{margin-bottom:18px}
.sc-fgroup:last-child{margin-bottom:0}
.sc-fgroup b{display:block;font-family:var(--narrow);text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--muted);margin-bottom:9px}
.sc-fopt{display:flex;align-items:center;gap:8px;font-size:14px;padding:3px 0;cursor:pointer}
.sc-fopt input{margin:0}
.sc-fopt em{font-style:normal;color:var(--muted);font-size:12px}
.sc-count{font-family:var(--narrow);font-size:14px;color:var(--muted);margin-bottom:14px}

/* --- страница товара --- */
.sc-prod{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
@media (max-width:900px){.sc-prod{grid-template-columns:1fr}}
.sc-gal-main{background:var(--surface);padding:20px;display:flex;justify-content:center}
.sc-gal-main img{width:100%;max-width:250px;height:auto;mix-blend-mode:multiply}
.sc-gal-strip{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.sc-gal-strip a{display:block;background:var(--surface);padding:5px;width:78px}
.sc-gal-strip img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
.sc-prodhead h1{font-size:32px}
.sc-prodprice{font-family:var(--narrow);font-size:30px;font-weight:700;margin:12px 0 6px}
.sc-facts{width:100%;border-collapse:collapse;margin-top:22px}
.sc-facts th,.sc-facts td{text-align:left;font-size:14px;padding:9px 0;border-bottom:1px solid var(--line);vertical-align:top}
.sc-facts th{font-family:var(--narrow);text-transform:uppercase;letter-spacing:.09em;font-size:12px;color:var(--muted);font-weight:400;width:44%}
.sc-table{width:100%;border-collapse:collapse;margin-top:12px}
.sc-table th,.sc-table td{text-align:left;font-size:14px;padding:10px 12px 10px 0;border-bottom:1px solid var(--line)}
.sc-table th{font-family:var(--narrow);text-transform:uppercase;letter-spacing:.09em;font-size:12px;color:var(--muted);font-weight:400}
.sc-table--buy td:last-child{width:190px}
.sc-traits{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 0;padding:0;list-style:none}
.sc-traits li{font-family:var(--narrow);font-size:13px;letter-spacing:.04em;border:1px solid var(--line);padding:5px 11px}

/* --- статьи --- */
.sc-art{max-width:none}
.sc-art h2{margin:34px 0 12px}
.sc-art ul,.sc-art ol{margin:0 0 14px;padding-left:22px}
.sc-quote{border-left:3px solid var(--accent);padding:10px 0 10px 16px;margin:20px 0;color:var(--muted)}
.sc-quote cite{display:block;font-style:normal;font-size:13px;margin-top:8px}
.sc-toc{border:1px solid var(--line);padding:16px 20px;margin-bottom:26px}
.sc-toc b{font-family:var(--narrow);text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--muted)}
.sc-toc ol{margin:8px 0 0;padding-left:20px}
.sc-toc a{color:var(--accent)}

/* --- подвал: тёмная полоса колонками --- */
.sc-foot{background:var(--dark);color:var(--on-dark);margin-top:56px;padding-block:44px 30px}
.sc-foot a{color:var(--on-dark-muted);text-decoration:none}
.sc-foot a:hover{color:var(--on-dark)}
.sc-footcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:28px}
.sc-foot b{display:block;font-family:var(--narrow);text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--on-dark);margin-bottom:12px}
.sc-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:14px}
.sc-foot address{font-style:normal;font-size:14px;color:var(--on-dark-muted);display:grid;gap:5px}
.sc-map{margin-top:14px;border:0;width:100%;height:190px;filter:grayscale(.25)}
.sc-footnote{border-top:1px solid rgba(255,255,255,.16);margin-top:30px;padding-top:18px;font-size:13px;color:var(--on-dark-muted);display:grid;gap:8px}

.sc-crumbwrap{padding-block:14px}
.sc-crumbs{font-size:13px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}
.sc-crumbs a{color:var(--muted)}
.sc-crumbs span[aria-hidden]{opacity:.55}

@media (max-width:900px){
 h1{font-size:28px}
 .sc-hero h1{font-size:28px}
 .sc-hero .sc-wrap{grid-template-columns:minmax(0,1fr) 190px;padding-block:22px;gap:18px}
 .sc-hero-card{max-width:190px}
}
@media (max-width:620px){
 .sc-hero .sc-wrap{grid-template-columns:1fr;padding-block:20px}
 .sc-hero-slab{display:none}
 .sc-hero-card{margin-left:0;max-width:220px}
}
@media (max-width:640px){
 .sc-grid{gap:22px 14px}
 .sc-sec{padding-block:34px}
}