@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:40px;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:24px}
.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:214px;margin-left:auto}
/* Кадр героя и плитки отделов держат ту же пропорцию, что исходник (3:4),
   и ту же предельную ширину: иначе бокс просит пикселей, которых нет. */
.sc-hero-card img{width:100%;max-width:min(var(--cap,186px),186px);aspect-ratio:3/4;object-fit:contain;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:14px}
.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%;max-width:min(var(--cap,186px),186px);aspect-ratio:3/4;object-fit:contain;height:auto;background:var(--surface);padding:10px;margin-inline:auto}
.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 требует центрировать неполный ряд). Число в ряду
   задаётся базисом, а не колонками. */
/* БОКС КАРТОЧКИ ОГРАНИЧЕН 250px, и это не вкусовщина (возврат владельца
   12.09). Исходник кадра 500px; при DPR 2 он честно закрывает ровно 250
   CSS-пикселей. Раньше карточка растягивалась до 267px, а sizes при этом
   обещал 240 — браузер брал кандидата 250w в бокс 267px, и владелец увидел
   мыло. Теперь бокс и sizes говорят одно и то же, а кадры с крупным двойником
   (их 13) могут показываться шире. §4.0 п.2: макет подгоняется под исходник. */
.sc-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:28px 20px}
.sc-grid > *{flex:0 1 calc(25% - 15px);max-width:236px}
@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);max-width:236px}}
.sc-card{display:flex;flex-direction:column;min-width:0;background:var(--bg);padding-bottom:14px}
/* Кадр карточки на БЕЛОМ, а не на сером: на тонированной полосе серая плита
   кадра сливалась с фоном секции, и карточка читалась как отдельно висящий
   текст с картинкой над ним (осмотр глазами 12.09). Пакшоты бренда сняты на
   белом, поэтому белая подложка им и родная. */
.sc-card-shot{display:block;background:var(--bg);padding:14px}
/* Кадр НЕ РАСТЯГИВАЕТСЯ под ширину карточки: он рисуется в своей честной
   ширине (186px — столько кроет исходник 375px при DPR 2) и стоит по центру
   более широкой карточки. Так текст получает воздух, ряд читается спокойно, а
   кадр остаётся резким. Пропорция бокса совпадает с пропорцией исходника. */
.sc-card-shot img{display:block;width:100%;max-width:min(var(--cap,186px),186px);margin-inline:auto;aspect-ratio:3/4;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;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.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}

/* --- кнопка покупки: настоящий текст, читаемый В ПОКОЕ --- */
/* Кегль 14px, контраст акцента на белом 10.66:1 и белого на акценте 13.07:1 —
   оба считает contrast.js. Прежняя версия несла подпись КАРТИНКОЙ высотой
   8.3px, которую было видно только на наведении (возврат владельца 12.09). */
.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;
 font-family:var(--narrow);font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
 line-height:1.15;padding:11px 10px;text-decoration:none;cursor:pointer;text-align:center;
 transition:background-color .12s ease,color .12s ease}
.sc-buy-t{display:block}
.sc-buy:hover{background:var(--accent);color:var(--on-accent)}
.sc-buy:focus-visible{outline:3px solid var(--khaki);outline-offset:2px}
.sc-buy--solid{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--on-accent)}
.sc-buy--solid:hover{background:var(--accent);border-color:var(--accent)}

/* --- полосы-баннеры парой --- */
.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}
/* ГРУППА РАССКАЗА ИДЁТ ВО ВСЮ ПОЛОСУ, А НЕ В ДВЕ КОЛОНКИ. Вывод предыдущих
   сайтов: columns:2 на группе из двух-трёх абзацев сама становится находкой
   стража зажатого текста — длинный абзац заполняет левую колонку, короткий
   покрывает правую на треть, и рядом стоит пустота. Меру строки в такой
   группе держит сама полоса, а разрывы стоят МЕЖДУ группами. */
.sc-storytext{margin-top:22px}
.sc-storytext p{max-width:none}
.sc-storytext+.sc-visual{margin-top:26px}

/* ---------- формы визуального разрыва прозы (§5) ---------- */
/* Отбивка СНИЗУ тоже нужна: в две колонки подпись формы вставала вплотную к
   следующему абзацу, и они читались одним куском (глаз, приёмка 15.09). */
.sc-visual{margin:26px 0 22px}
.sc-visual figcaption{margin-top:10px;font-size:14px;color:var(--muted);line-height:1.5}
/* 1. лента отделов настоящими кадрами */
.sc-vstrip{border-top:1px solid var(--line);padding-top:18px}
/* НЕПОЛНЫЙ ПОСЛЕДНИЙ РЯД ЦЕНТРИРУЕТСЯ (§5). Семь отделов ни на одной ширине
   не делятся нацело: на 1024 это 4+3, и сетка прижимала тройку влево —
   justify-content у грида центрирует ДОРОЖКИ, а не элементы. Флекс с
   вычисленной базой даёт и равные ширины, и центр последнего ряда. */
.sc-vstrip-row{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(8px,1.2vw,14px)}
/* ПОТОЛОК БОКСА 250px — ПРАВИЛО ЭТОГО САЙТА. Исходники у бренда 500px по
   длинной стороне, поэтому §4.0 держит бокс кадра нигде не шире 250 CSS px:
   при DPR 2 это ровно 500 и есть, «макет подгоняется под исходник». Первая
   версия ленты шла до 288px и браузерный аудит честно нашёл растянутые кадры
   на /about. Потолок ставим на ячейку, а не на кадр: иначе подпись отрывается
   от своего кадра. */
.sc-vstrip-row>a{flex:0 1 calc(14.2857% - 12px);min-width:0;max-width:186px}
@media(max-width:1300px){.sc-vstrip-row>a{flex-basis:calc(25% - 10.5px)}}
@media(max-width:900px){.sc-vstrip-row>a{flex-basis:calc(33.333% - 9.34px)}}
@media(max-width:560px){.sc-vstrip-row>a{flex-basis:calc(50% - 4px)}}
.sc-vstrip-c{display:block;min-width:0;text-decoration:none;color:inherit}
/* КАДРЫ ЛЕНТЫ ОБЯЗАНЫ БЫТЬ ОДНОЙ ВЫСОТЫ. Без своей пропорции кадр каждой
   линии тянется по-своему, и подписи под ними встают на разной высоте — ряд
   читается рваным (поймано глазом на приёмке). Пропорция 3:4 — та, в которой
   сняты пакшоты этого бренда, поэтому обрезка почти ничего не срезает. */
/* КАДР ЛЕНТЫ ЖИВЁТ ПО ТЕМ ЖЕ ПРАВИЛАМ, ЧТО ПЛИТКА ОТДЕЛА НА ГЛАВНОЙ, и это не
   лень, а §4.0 этого сайта в одном месте: --cap ставит сам parts.shot по
   ЧЕСТНОМУ размеру исходника, а 186px — потолок, дальше которого кадр 400px
   шириной растягивать нельзя. Первая версия ленты была скопирована с соседнего
   сайта: без width/height:auto высота приходила из атрибута и давала бокс
   186x360, а object-fit:cover срезал у пакшота от 31 до 52 процентов — ровно
   то, что браузерный аудит и показал. На пакшоте одежды обрезки быть не
   должно: вещь показывают целиком, поэтому contain. */
.sc-vstrip-c img{width:100%;max-width:min(var(--cap,186px),186px);aspect-ratio:3/4;object-fit:contain;
 height:auto;background:var(--surface);padding:8px;margin-inline:auto;border-radius:3px}
.sc-vstrip-c b{display:block;margin-top:8px;font-size:15px;line-height:1.25}
.sc-vstrip-c span{display:block;font-size:13px;color:var(--muted)}
.sc-vstrip-c:hover b{text-decoration:underline}
/* 2. и 5. шкала: рисунок SVG, ПОДПИСИ ОБЫЧНЫМ HTML (урок kalidi) */
.sc-vscale{border-top:2px solid var(--ink);padding-top:6px}
.sc-vscale-row{display:grid;grid-template-columns:minmax(64px,110px) minmax(0,1fr) minmax(86px,140px);
 gap:clamp(8px,1.4vw,18px);align-items:center;padding:7px 0;border-bottom:1px solid var(--line)}
.sc-vscale-l{font-size:15px}
.sc-vscale-n{font-size:14px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.sc-vscale-bar{display:block;min-width:0;color:var(--accent)}
.sc-vscale-bar svg{display:block;width:100%;height:10px}
@media(max-width:520px){.sc-vscale-row{grid-template-columns:minmax(52px,1fr) minmax(0,1.6fr) minmax(70px,1fr);gap:8px}
 .sc-vscale-l,.sc-vscale-n{font-size:13px}}
/* 4. шаги с пиктограммами */
.sc-vsteps{padding-top:4px}
.sc-vsteps-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,26px);
 margin:0;padding:0;list-style:none}
@media(max-width:760px){.sc-vsteps-row{grid-template-columns:minmax(0,1fr)}}
.sc-vsteps-row li{min-width:0;border-top:2px solid var(--accent);padding-top:12px}
.sc-vsteps-g{display:block;width:40px;height:40px;color:var(--accent);margin-bottom:8px}
.sc-vsteps-g svg{display:block;width:100%;height:100%}
.sc-vsteps-row b{display:block;font-size:16px;margin-bottom:5px}
.sc-vsteps-row span{display:block;font-size:14px;color:var(--muted);line-height:1.5}
/* 5. пара «кому одно, кому другое» */
.sc-vpair{padding-top:4px}
.sc-vpair-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2.4vw,32px)}
@media(max-width:700px){.sc-vpair-row{grid-template-columns:minmax(0,1fr)}}
.sc-vpair-row>div{min-width:0;background:var(--surface);padding:clamp(14px,1.8vw,22px)}
.sc-vpair-row b{display:block;font-size:17px;margin-bottom:8px}
.sc-vpair-row ul{margin:0;padding-left:1.1em}
.sc-vpair-row li{font-size:14.5px;color:var(--muted);line-height:1.55;margin-bottom:5px}

.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}}
/* Панель галереи ОБНИМАЕТ кадр, а не растягивается на всю колонку: кадр
   рисуется в своей честной ширине, и широкая плита вокруг него читалась как
   пустое серое поле (осмотр глазами 12.09). */
.sc-gal-main{background:var(--surface);padding:18px;display:flex;justify-content:center;max-width:330px}
.sc-gal-main img{width:100%;max-width:min(var(--cap,250px),250px);height:auto;mix-blend-mode:multiply}
.sc-gal-strip{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;max-width:330px}
.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}

/* --- статьи --- */
/* Проза гида идёт В ДВЕ КОЛОНКИ на широких полосах: строка в 1600px это
   двести знаков, читать её нельзя. Меру держат КОЛОНКИ, а не поля — §5 прямо
   запрещает узкую колонку с пустотой по обе стороны. Заголовки, таблицы,
   цитаты и полки товара идут во всю ширину. */
.sc-art{max-width:none;columns:2;column-gap:48px}
/* ФОРМА РАЗРЫВА ИДЁТ ЧЕРЕЗ ОБЕ КОЛОНКИ. Гид набран в две колонки, и figure
   без column-span разрывается ими пополам: четыре кадра ленты внизу левой,
   два вверху правой, подпись под обрывком и пустота над ней. Поймано глазом
   на приёмке 15.09. Сайт уже держал этот список для заголовков, цитат и
   полок — форма разрыва становится в тот же ряд. */
.sc-art > h2,.sc-art > .sc-quote,.sc-art > div,.sc-art > .sc-sechead,.sc-art > .sc-grid,
.sc-art > .sc-visual{column-span:all}
@media (max-width:1000px){.sc-art{columns:1}}
.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}
 /* Шапка на телефоне занимала три ряда ссылок плюс отдельную строку «Big and
    tall» — около шестисот пикселей до первого слова о товаре (осмотр глазами
    12.09). Ряд отделов уплотнён и прокручивается вбок одной строкой. */
 .sc-nav .sc-wrap{flex-wrap:nowrap;overflow-x:auto;gap:14px;min-height:40px;-webkit-overflow-scrolling:touch}
 .sc-navlist{flex-wrap:nowrap;gap:14px}
 .sc-nav a{font-size:13px;letter-spacing:.06em;white-space:nowrap}
 .sc-head .sc-wrap{gap:14px;min-height:64px}
 .sc-logo b{font-size:23px}
 .sc-util .sc-wrap{min-height:32px;font-size:12px}
 .sc-utilnav{gap:14px}
}
@media (max-width:760px){
 /* На узкой карточке имя в две строки обрывается посреди слова и читается
    как опечатка: даём три строки (осмотр глазами 12.09). */
 .sc-card h3{-webkit-line-clamp:3;min-height:3.9em}
}
@media (max-width:640px){
 .sc-grid{gap:22px 14px}
 .sc-sec{padding-block:34px}
}