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

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

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


@font-face{font-family:"Big Shoulders Display";src:url(/assets/fonts/big-shoulders-display-latin.698f9960.woff2) format("woff2");font-weight:300 800;font-display:swap;font-style:normal}
@font-face{font-family:"Instrument Sans";src:url(/assets/fonts/instrument-sans-latin.2ee17598.woff2) format("woff2");font-weight:400 700;font-display:swap;font-style:normal}
:root{
  --ink:#131110; --ink-deep:#0C0B0A; --panel:#1C1917;
  --plate:#F2EEE8; --plate-edge:#E4DED3;
  --gold:#C9A253; --gold-soft:#7A6026;
  --text:#F3EFE8; --muted:#ADA598; --danger:#D98A5A;
  --display:"Big Shoulders Display",'Arial Narrow',Impact,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --wrap:1240px; --gap:22px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* overflow-x:hidden на body НЕ ставится: он прячет горизонтальный сдвиг
   вместо того, чтобы его чинить, и портфельный свод справедливо на это
   краснеет. Сдвиг лечится min-width:0 на флекс-детях и прокруткой самих
   широких блоков. */
body{margin:0;background:var(--ink);color:var(--text);font:400 16px/1.62 var(--body)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
[hidden]{display:none!important}
.th-wrap{width:min(100% - 32px,var(--wrap));margin-inline:auto}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:0.98;letter-spacing:.01em;margin:0;text-transform:uppercase}
h1{font-size:clamp(34px,4vw,50px)}
h2{font-size:clamp(30px,4vw,44px)}
h3{font-size:clamp(20px,2.4vw,26px)}
p{margin:0 0 14px}
.th-kick{font:600 13px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}

/* ---------- полоса фактов и шапка (у образца полоса скидки; у нас факты) --- */
.th-strip{background:var(--gold);color:#17140F}
.th-strip ul{display:flex;gap:30px;justify-content:center;flex-wrap:wrap;list-style:none;margin:0;padding:9px 0;
  font:600 13px/1.3 var(--body);letter-spacing:.04em}
.th-head{background:var(--ink-deep);border-bottom:1px solid rgba(201,162,83,.22);position:relative;z-index:5}
.th-head-row{display:flex;align-items:center;gap:26px;min-width:0;padding:16px 0}
.th-mark{font-family:var(--display);font-size:34px;font-weight:700;letter-spacing:.08em;text-decoration:none;color:var(--text);min-width:0}
.th-mark b{color:var(--gold);font-weight:700}
.th-nav{display:flex;gap:22px;flex-wrap:wrap;margin-left:auto;min-width:0}
.th-nav a{font:600 14px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--text);padding:6px 0;border-bottom:2px solid transparent}
.th-nav a:hover,.th-nav a[aria-current]{color:var(--gold);border-bottom-color:var(--gold)}
.th-lines{border-top:1px solid rgba(201,162,83,.14);display:flex;gap:26px;overflow-x:auto;padding:10px 0;-webkit-overflow-scrolling:touch}
.th-lines a{font:500 13px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--muted);white-space:nowrap}
.th-lines a:hover{color:var(--gold)}

/* ------------------------------------------------------------------ герой */
/* Потолок высоты держится ЧИСЛОМ, а не на глаз: герой не выше 60% экрана,
   первая карточка товара не ниже 900px (граница торговой композиции). */
.th-hero{background:var(--ink-deep);border-bottom:1px solid rgba(201,162,83,.18)}
.th-hero-in{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:30px;align-items:center;padding:16px 0 18px;min-width:0}
.th-hero h1{margin-bottom:12px}
.th-hero h1 span{display:block;color:var(--gold)}
.th-hero p{color:var(--muted);font-size:16px;max-width:56ch;margin-bottom:12px}
.th-hero-plate{background:var(--plate);border:1px solid var(--plate-edge);padding:16px;min-width:0}
/* Плита героя ниже квадрата: квадратный кадр в правой колонке задаёт всю
   высоту секции, и герой перерастал 60% экрана (замерено, 652px из 900). */
.th-hero-plate img{width:100%;aspect-ratio:4/3;object-fit:contain;mix-blend-mode:multiply;max-height:270px}
.th-hero-facts{display:flex;gap:24px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid rgba(201,162,83,.22)}
.th-hero-facts div{min-width:0}
.th-hero-facts b{display:block;font-family:var(--display);font-size:26px;color:var(--gold);line-height:1}
.th-hero-facts span{font-size:13px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}

/* ------------------------------------------------------------------ кнопки */
.th-cta,.th-buy{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:700 15px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;
  background:var(--gold);color:#17140F;border:1px solid var(--gold);padding:14px 26px;text-decoration:none;cursor:pointer}
.th-cta:hover,.th-buy:hover{background:#DEB86B;border-color:#DEB86B}
.th-ghost{background:transparent;color:var(--gold)}
.th-ghost:hover{background:var(--gold);color:#17140F}
.th-buy{width:100%;padding:12px 14px;font-size:15px}
/* Надпись кнопки — картинка. Высота считается ОТ КЕГЛЯ через долю чернил,
   которую посчитал make-buy-label.js: откат к height:1em снова дал бы
   читаемую, но заметно мелкую надпись, и общий страж это ловит. */
.th-buy img.buy-label{height:calc(1em * 0.8);width:auto}
.th-cta img.buy-label,.th-buy img.buy-label{display:block;margin-inline:auto}
.th-note{font-size:12.5px;color:var(--muted);margin-top:8px}

/* ------------------------------------------------------------------ полки */
.th-sec{padding:30px 0 44px}
.th-sec.tint{background:var(--panel)}
.th-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:20px;flex-wrap:wrap}
.th-sec-head p{color:var(--muted);margin:8px 0 0;max-width:60ch}
/* Ряд собран ФЛЕКСОМ, а не grid-auto-fit: у сетки последний неполный ряд
   прижимается влево, а правило портфеля требует его ЦЕНТРИРОВАТЬ. Девять
   плиток отделов ложатся 4+4+1, и одинокая плитка обязана встать по центру
   (поймано глазом на живой главной). */
.th-shelf{display:flex;flex-wrap:wrap;gap:var(--gap);justify-content:center;align-items:stretch}
.th-shelf > *{flex:0 1 calc((100% - 3 * var(--gap)) / 4);min-width:232px}
@media (max-width:1100px){.th-shelf > *{flex-basis:calc((100% - 2 * var(--gap)) / 3)}}
@media (max-width:820px){.th-shelf > *{flex-basis:calc((100% - var(--gap)) / 2);min-width:150px}}
.th-shelf.rail{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding-bottom:8px}
/* Кнопки в ряду выравниваются по нижнему краю: имя товара занимает одну или
   две строки, и без этого золотая полоса кнопки прыгает по ряду ступеньками
   (поймано глазом на первом же контактном просмотре главной). */
/* height:100% на флекс-ребёнке разрешается в НЕОПРЕДЕЛЁННУЮ высоту строки и
   отменяет растяжение: карточки переставали быть одной высоты, и золотые
   полосы кнопок шли ступеньками (поймано глазом на живой главной). Высоту
   даёт align-items:stretch родителя, а не проценты. */
.th-card{display:flex;flex-direction:column;min-width:0;background:transparent}
.th-card .th-buy{margin-top:auto}
.th-card a.th-frame{display:block;background:var(--plate);border:1px solid var(--plate-edge);padding:14px}
.th-card a.th-frame img{width:100%;aspect-ratio:1/1;object-fit:contain;mix-blend-mode:multiply}
.th-card h3{margin:12px 0 6px;font-size:17px;letter-spacing:.02em;line-height:1.12}
.th-card h3 a{text-decoration:none}
.th-card h3 a:hover{color:var(--gold)}
.th-meta{display:flex;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-bottom:10px;min-width:0}
.th-meta span{border:1px solid rgba(201,162,83,.28);padding:3px 8px;letter-spacing:.04em}
.th-price{display:flex;align-items:baseline;gap:10px;margin:0 0 10px;font-family:var(--display);font-size:26px;color:var(--gold);line-height:1}
.th-price small{font:500 13px/1 var(--body);color:var(--muted)}
.th-stars{font:500 13px/1 var(--body);color:var(--muted)}
.th-stars b{color:var(--text);font-weight:600}

/* --------------------------------------------------------- плитки отделов */
.th-tiles{display:flex;flex-wrap:wrap;gap:var(--gap);justify-content:center}
.th-tiles > *{flex:0 1 calc((100% - 3 * var(--gap)) / 4);min-width:240px}
@media (max-width:1100px){.th-tiles > *{flex-basis:calc((100% - 2 * var(--gap)) / 3)}}
@media (max-width:820px){.th-tiles > *{flex-basis:calc((100% - var(--gap)) / 2);min-width:160px}}
.th-tile{position:relative;display:block;text-decoration:none;border:1px solid rgba(201,162,83,.26);min-width:0}
.th-tile .th-tile-frame{display:block;background:var(--plate);padding:18px}
.th-tile img{width:100%;aspect-ratio:4/3;object-fit:contain;mix-blend-mode:multiply}
.th-tile-cap{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:13px 15px;background:var(--ink-deep);position:relative}
.th-tile-cap b{font-family:var(--display);font-size:21px;text-transform:uppercase;letter-spacing:.03em}
.th-tile-cap span{font-size:12.5px;color:var(--muted)}
.th-tile:hover{border-color:var(--gold)}
.th-tile:hover .th-tile-cap b{color:var(--gold)}

/* ------------------------------------------------ имидж-полоса (ритм 38) */
.th-band{background:var(--panel);border-block:1px solid rgba(201,162,83,.18)}
.th-band-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:center;padding:44px 0}
.th-band.flip .th-band-in{direction:rtl}
.th-band.flip .th-band-in>*{direction:ltr}
.th-band-frame{background:var(--plate);border:1px solid var(--plate-edge);padding:20px}
.th-band-frame img{width:100%;aspect-ratio:5/4;object-fit:contain;mix-blend-mode:multiply}
.th-band-text{min-width:0}
.th-band-text p{color:var(--muted)}
/* Абзац НЕ рвётся между колонками: разорванный абзац отдаёт браузеру рамку
   сразу на две колонки, и браузерный аудит справедливо читает это как текст
   поверх текста. */
.th-cols{columns:2;column-gap:30px}
.th-cols p{break-inside:avoid}
.th-band-text .th-cols{columns:2;column-gap:30px}
@media (max-width:820px){.th-band-text .th-cols{columns:1}}

/* --------------------------------------------------------- страница товара */
.th-pdp{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:38px;padding:34px 0 10px;align-items:start}
.th-gal{display:grid;gap:12px;min-width:0}
.th-gal-main{background:var(--plate);border:1px solid var(--plate-edge);padding:20px}
.th-gal-main img{width:100%;aspect-ratio:1/1;object-fit:contain;mix-blend-mode:multiply}
.th-gal-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:10px}
.th-gal-strip img{background:var(--plate);border:1px solid var(--plate-edge);padding:7px;aspect-ratio:1/1;object-fit:contain;mix-blend-mode:multiply}
.th-pdp-side h1{font-size:clamp(30px,3.6vw,42px);margin-bottom:12px}
.th-buybox{border:1px solid rgba(201,162,83,.3);padding:18px;margin:18px 0}
.th-buybox .th-price{font-size:38px;margin-bottom:14px}
.th-spec{width:100%;border-collapse:collapse;margin:6px 0 18px;font-size:15px}
/* Ширина колонки заголовков задана: без неё значение уезжает к правому краю
   таблицы, и пара «material / stainless steel» читается как два разных
   блока (поймано глазом на странице товара). */
.th-spec th{text-align:left;width:38%;font:600 12px/1.4 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);padding:9px 12px 9px 0;vertical-align:top}
.th-spec td{padding:9px 0;border-bottom:1px solid rgba(201,162,83,.16);color:var(--text)}
.th-sizes{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px;padding:0;list-style:none}
.th-sizes li{margin:0}
.th-sizes a,.th-sizes span{display:inline-block;border:1px solid rgba(201,162,83,.35);padding:7px 12px;font-size:13.5px;text-decoration:none;color:var(--text)}
.th-sizes a:hover{border-color:var(--gold);color:var(--gold)}
.th-sizes [aria-current]{background:var(--gold);color:#17140F;border-color:var(--gold);font-weight:600}

/* ----------------------------------------------------------------- статьи */
.th-art{padding:30px 0 10px}
.th-art h1{max-width:22ch}
.th-art .th-lede{font-size:19px;color:var(--muted);max-width:62ch}
.th-art h2{margin:34px 0 12px;color:var(--gold)}
.th-art h3{margin:24px 0 8px}
.th-art .th-cols{columns:2;column-gap:34px}
@media (max-width:900px){.th-art .th-cols{columns:1}}
.th-quote{border-left:3px solid var(--gold);padding:6px 0 6px 16px;margin:18px 0;color:var(--text)}
.th-quote cite{display:block;margin-top:8px;font-size:13px;color:var(--muted);font-style:normal}
.th-src{font-size:13.5px;color:var(--muted)}
.th-src a{color:var(--gold)}

/* --------------------------------------------------------------- крошки */
.th-crumbs{font-size:13px;color:var(--muted);padding:14px 0 0}
.th-crumbs a{color:var(--muted);text-decoration:none;border-bottom:1px solid rgba(173,165,152,.4)}
.th-crumbs a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.th-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.th-crumbs li+li:before{content:"/";margin-right:8px;color:var(--gold-soft)}

/* -------------------------------------------------------------- пагинация */
.th-pages{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:30px;padding:0;list-style:none}
.th-pages a,.th-pages span{display:inline-block;min-width:40px;text-align:center;padding:9px 10px;border:1px solid rgba(201,162,83,.3);text-decoration:none;font-size:14px}
.th-pages a:hover{border-color:var(--gold);color:var(--gold)}
.th-pages [aria-current]{background:var(--gold);color:#17140F;border-color:var(--gold);font-weight:700}

/* ------------------------------------------------------------------ подвал */
/* Состав по образцу 38: три колонки ссылок плюс четвёртый блок справа. У
   образца в нём подписка, соцсети и логотипы прессы, а внизу платёжные
   бейджи — ничего этого мы не переносим (правило честных замен). В четвёртом
   блоке стоит адрес мастерской с картой, внизу — партнёрская подпись. */
.th-foot{background:var(--ink-deep);border-top:1px solid rgba(201,162,83,.24);padding:44px 0 26px;margin-top:16px}
.th-foot-facts{display:flex;gap:26px;flex-wrap:wrap;justify-content:center;padding-bottom:30px;margin-bottom:30px;border-bottom:1px solid rgba(201,162,83,.16);
  font:600 13px/1.4 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.th-foot-facts b{color:var(--gold)}
.th-foot-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.25fr);gap:30px}
.th-foot h4{font-size:19px;margin-bottom:12px;color:var(--text)}
.th-foot ul{list-style:none;margin:0;padding:0}
.th-foot li{margin-bottom:8px}
.th-foot a{color:var(--muted);text-decoration:none;font-size:14.5px}
.th-foot a:hover{color:var(--gold)}
.th-foot address{font-style:normal;color:var(--muted);font-size:14.5px;line-height:1.7}
.th-foot address b{color:var(--text);font-weight:600;display:block;font-size:15px}
.th-map{margin-top:12px;border:1px solid rgba(201,162,83,.3)}
.th-map iframe{display:block;width:100%;height:190px;border:0;filter:grayscale(1) contrast(1.05) brightness(.85)}
.th-foot-end{margin-top:30px;padding-top:18px;border-top:1px solid rgba(201,162,83,.16);color:var(--muted);font-size:13px;display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between}

/* ------------------------------------------------------------------ мобиль */
@media (max-width:980px){
  .th-hero-in,.th-pdp,.th-band-in{grid-template-columns:minmax(0,1fr)}
  .th-band.flip .th-band-in{direction:ltr}
  .th-foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .th-head-row{flex-wrap:wrap;gap:12px}
  /* Департаменты уходят в ОДНУ горизонтальную ленту, как у образца: без
     nowrap десять отделов складывались в три строки и съедали первый экран
     телефона вместе с полосой фактов (поймано глазом на проде). */
  .th-nav{margin-left:0;gap:16px;overflow-x:auto;width:100%;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .th-nav a{white-space:nowrap}
  /* Кнопка шапки на телефоне прячется: она повторяет призыв героя и на
     маленьком экране просто отодвигает товар вниз. */
  .th-head-row > .th-cta{display:none}
  .th-hero-plate img{max-height:210px}
  .th-hero-in{padding:12px 0 14px;gap:18px}
  /* Полоса фактов на телефоне тоже одна строка с прокруткой. */
  .th-strip ul{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;gap:22px;padding-inline:16px}
  .th-strip li{white-space:nowrap}

  .th-sec{padding:38px 0}
  .th-foot-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:360px){
  .th-shelf > *,.th-tiles > *{flex-basis:100%}
}