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

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

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


@font-face{font-family:"Overpass";src:url(/assets/fonts/overpass-latin.29217ef8.woff2) format("woff2");font-weight:300 800;font-display:swap;font-style:normal}
@font-face{font-family:"Zilla Slab";src:url(/assets/fonts/zilla-slab-400-latin.ab260731.woff2) format("woff2");font-weight:400;font-display:swap;font-style:normal}
@font-face{font-family:"Zilla Slab";src:url(/assets/fonts/zilla-slab-600-latin.fd78ed94.woff2) format("woff2");font-weight:600;font-display:swap;font-style:normal}
:root{
 --paper:#FBF8F2; --panel:#F1EBDF; --panel-alt:#E8E0D0; --card:#FFFFFF;
 --ink:#1B1815; --ink-soft:#56504A; --rule:#D8CFBC; --rule-soft:#E7DFCE;
 --ink2:#241F19; --ink2-soft:#3A322A;
 --accent:#8C2A1E; --accent-deep:#6E1F16; --blue:#1F4D6B; --on-dark:#F7F1E4;
 --slab:"Zilla Slab",Georgia,"Times New Roman",serif;
 --body:"Overpass",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
 --wrap:1340px; --gut:clamp(14px,2.6vw,30px);
 --d-hair:#F3EAE9; --d-hair-text:#7A2F3A;
 --d-hats:#ECEDE6; --d-hats-text:#3F5333;
 --d-socks:#E9EDF1; --d-socks-text:#2A4C64;
 --d-gloves:#F1EBE2; --d-gloves-text:#6B4522;
 --d-tops:#F2ECEF; --d-tops-text:#6B3355;
 --d-badges:#E9EFEC; --d-badges-text:#215044;
 --d-party:#F5ECE2; --d-party-text:#8A4415;
 --d-costume:#EEEBF1; --d-costume-text:#4A3A72;
 --d-work:#EDEEE9; --d-work-text:#4A4E34;
 --d-sleep:#EAEBF0; --d-sleep-text:#3B3F6B;
 --d-home:#EFEDE7; --d-home-text:#4F4A38;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.62;font-weight:400}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{line-height:1.15;margin:0;font-family:var(--slab);font-weight:600;letter-spacing:-0.01em}
p{margin:0 0 1em}
.jts-wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.jts-skip{position:absolute;left:-9999px}
.jts-skip:focus{left:8px;top:8px;z-index:99;background:var(--accent);color:var(--on-dark);padding:10px 14px}


/* ------------------------------------------------ служебная полоса и шапка */
.jts-strip{background:var(--ink2);color:var(--on-dark)}
.jts-strip-in{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;padding:7px 0;font-size:12.5px;letter-spacing:.02em}
.jts-strip a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(247,241,228,.35)}
.jts-strip a:hover{border-bottom-color:var(--on-dark)}
.jts-strip b{font-weight:600}
.jts-strip .jts-strip-sp{margin-left:auto}

.jts-head{background:var(--paper);border-bottom:2px solid var(--ink)}
.jts-head-in{display:flex;align-items:center;gap:clamp(12px,2.4vw,32px);min-height:82px;flex-wrap:wrap}
.jts-mark{display:block;text-decoration:none;line-height:1;flex:0 0 auto;min-width:0}
.jts-mark b{display:block;font-family:var(--slab);font-size:clamp(28px,3.4vw,40px);font-weight:600;letter-spacing:-.02em}
.jts-mark i{display:block;font-style:normal;height:3px;background:var(--accent);margin-top:5px}
.jts-mark span{display:block;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);margin-top:6px}
.jts-find{flex:1 1 260px;display:flex;min-width:0}
.jts-find-lab{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.jts-find input{font:inherit;font-size:14px;padding:11px 14px;border:1px solid var(--rule);background:var(--card);width:100%;min-width:0;border-radius:0}
.jts-find input:focus{outline:2px solid var(--accent);outline-offset:1px}
.jts-head-aux{display:flex;gap:18px;flex:0 0 auto}
.jts-head-aux a{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--ink-soft)}
.jts-head-aux a:hover,.jts-head-aux a[aria-current]{color:var(--accent)}

/* Лента департаментов — ВКЛАДКИ со счётчиком, прокручиваются по горизонтали
   внутри своей полосы. Прокручивается ЛЕНТА, а не документ: страж переполнения
   меряет ширину документа, и горизонтальная полоса внутри секции законна. */
/* ПРОКРУТКА И ПОЛОСА — РАЗНЫЕ ЭЛЕМЕНТЫ (возврат №1 владельца, 06.09.2026).
   Раньше ленту прокручивал сам .jts-tabs-in, и ради этого он снимал с себя
   max-width и гутер контейнера, хотя носил класс .jts-wrap. На узком окне
   разница была в один гутер и не бросалась в глаза; на широком контейнер
   центрируется, и полоса отделов уезжала влево на четверть экрана: она шла
   от края окна, а шапка и герой — от границы контейнера.

   Теперь обязанности разнесены. Рельса — ЭТО КОНТЕЙНЕР (та же ширина и те же
   автополя, что у .jts-wrap, но класс не надет и потому ничего не отменяется),
   и прокручивается она. Гутер живёт на прокручиваемом содержимом, а не на
   рельсе: у прокрученного контейнера левое поле уезжает вместе с содержимым, а
   правое браузер не рисует вовсе, и вкладки липли бы к краям с обеих сторон. */
.jts-tabs{background:var(--panel);border-bottom:1px solid var(--rule)}
.jts-tabs-rail{width:100%;max-width:var(--wrap);margin-inline:auto;overflow-x:auto;scrollbar-width:thin}
.jts-tabs-in{display:flex;gap:0;width:max-content;min-width:100%;padding-inline:var(--gut)}
/* Метрика вкладки подобрана так, чтобы двенадцать отделов укладывались в
   полосу контейнера на десктопе и лента не заводила там прокрутку. */
.jts-tab{flex:0 0 auto;display:flex;align-items:baseline;gap:5px;padding:11px 8px;text-decoration:none;
 font-size:13px;font-weight:600;color:var(--ink);border-right:1px solid var(--rule);white-space:nowrap}
.jts-tab:first-child{border-left:1px solid var(--rule)}
.jts-tab em{font-style:normal;font-family:var(--slab);font-size:12px;font-weight:400;color:var(--ink-soft)}
.jts-tab:hover{background:var(--card)}
.jts-tab[aria-current]{background:var(--ink);color:var(--on-dark)}
.jts-tab[aria-current] em{color:var(--on-dark);opacity:.75}

/* ------------------------------------------------------------------- герой */
.jts-hero{border-bottom:1px solid var(--rule);background:var(--paper)}
.jts-hero-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(16px,2.2vw,34px);padding:clamp(14px,1.6vw,22px) 0 clamp(14px,1.6vw,22px);align-items:start}
.jts-kick{font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:0 0 8px}
.jts-hero h1{font-size:clamp(27px,3vw,40px);margin:0 0 10px;line-height:1.07}
.jts-hero-lede{font-size:clamp(15px,1.2vw,17px);color:var(--ink-soft);margin:0 0 14px}
/* Таблица полос пачки — содержание героя, а не украшение: она и отвечает на
   первый вопрос покупателя мультипаков. */
.jts-bands{border-top:1px solid var(--ink);width:100%}
.jts-band-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px 16px;align-items:baseline;
 padding:6px 0;border-bottom:1px solid var(--rule);text-decoration:none;color:inherit}
.jts-band-row:hover{background:var(--panel)}
.jts-band-row b{font-weight:600;font-size:15.5px;min-width:0}
.jts-band-row span{font-size:13px;color:var(--ink-soft);white-space:nowrap}
.jts-band-row em{font-style:normal;font-family:var(--slab);font-weight:600;font-size:15.5px;white-space:nowrap}
.jts-hero-mosaic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;gap:8px;align-content:start}
.jts-hero-mosaic > a{display:block;background:var(--panel);border:1px solid var(--rule);position:relative;overflow:hidden;min-width:0}
.jts-hero-mosaic > a:first-child{grid-column:span 2;grid-row:span 2}
.jts-hero-mosaic img{width:100%;height:100%;aspect-ratio:1/1;object-fit:contain;background:inherit;mix-blend-mode:multiply}
.jts-hero-mosaic > a:hover{border-color:var(--accent)}
.jts-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ----------------------------------------------------------------- секции */
.jts-sec{padding:clamp(26px,3.4vw,48px) 0}
.jts-sec--rule{border-top:1px solid var(--rule)}
.jts-sec--panel{background:var(--panel)}
.jts-sec--dark{background:var(--ink2);color:var(--on-dark)}
.jts-sec--dark a{color:var(--on-dark)}
.jts-sec--dark .jts-sec-head p{color:rgba(247,241,228,.82)}
.jts-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px;
 border-bottom:2px solid var(--ink);padding-bottom:10px}
.jts-sec--dark .jts-sec-head{border-bottom-color:rgba(247,241,228,.5)}
.jts-sec-head h2{font-size:clamp(21px,2.5vw,32px);min-width:0}
.jts-sec-head h3{font-size:clamp(18px,2vw,25px);font-family:var(--slab);min-width:0}
.jts-sec-head p{margin:7px 0 0;color:var(--ink-soft);font-size:14.5px;max-width:78ch}
.jts-more{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
 text-decoration:none;white-space:nowrap;border-bottom:2px solid var(--accent);padding-bottom:2px}
.jts-sec--dark .jts-more{color:var(--on-dark);border-bottom-color:var(--on-dark)}

/* ------------------------------------------------- сетка и карточка-билет */
.jts-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(12px,1.3vw,18px)}
.jts-grid > *{flex:0 1 calc((100% - 3 * 18px) / 4);min-width:0}
@media (max-width:1180px){.jts-grid > *{flex-basis:calc((100% - 2 * 16px) / 3)}}
@media (max-width:820px){.jts-grid > *{flex-basis:calc((100% - 14px) / 2)}}
@media (max-width:420px){.jts-grid > *{flex-basis:100%}}
.jts-grid--3 > *{flex-basis:calc((100% - 2 * 18px) / 3)}
@media (max-width:820px){.jts-grid--3 > *{flex-basis:calc((100% - 14px) / 2)}}

.jts-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--rule);min-width:0}
.jts-card:hover{border-color:var(--ink)}
.jts-card-shot{display:block;background:var(--panel);border-bottom:1px solid var(--rule)}
.jts-card-shot img{width:100%;aspect-ratio:1/1;object-fit:contain;background:inherit;mix-blend-mode:multiply}
.jts-card-body{display:flex;flex-direction:column;gap:8px;padding:12px 13px 13px;flex:1 1 auto;min-width:0}
.jts-card h3{font-family:var(--body);font-size:14.5px;font-weight:600;line-height:1.32;letter-spacing:0;min-height:2.64em}
.jts-card h3 a{text-decoration:none}
.jts-card h3 a:hover{color:var(--accent)}
/* Пунктирная выноска — подпись слева, значение справа, между ними точки.
   Это и есть лицо каталога: строка прайс-листа. */
.jts-tick{margin:0;display:flex;flex-direction:column;gap:3px;font-size:12.5px}
.jts-tick div{display:flex;align-items:baseline;gap:5px;min-width:0}
.jts-tick dt{color:var(--ink-soft);white-space:nowrap;flex:0 0 auto}
.jts-tick .jts-lead{flex:1 1 auto;border-bottom:1px dotted var(--rule);transform:translateY(-3px);min-width:8px}
.jts-tick dd{margin:0;font-family:var(--slab);font-weight:600;flex:0 1 auto;min-width:0;overflow-wrap:anywhere;text-align:right}
.jts-tick .jts-slot-empty{min-height:1.35em;display:block}
.jts-price{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;
 border-top:1px solid var(--rule);padding-top:9px;margin-top:auto;min-width:0}
.jts-price b{font-family:var(--slab);font-size:22px;font-weight:600;letter-spacing:-.02em}
.jts-stars{font-size:12.5px;color:var(--ink-soft);white-space:nowrap}
.jts-stars i{font-style:normal;color:var(--accent);font-weight:700}
.jts-card-foot{display:block}

/* Кнопка покупки: надпись КАРТИНКОЙ, высота от кегля темы. */
.jts-buy{display:flex;align-items:center;justify-content:center;background:var(--accent);border:1px solid var(--accent);
 padding:11px 12px;text-decoration:none;width:100%;min-width:0}
.jts-buy:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.jts-buy img.buy-label{width:auto;height:calc(1em * 0.729);max-width:100%;object-fit:contain}
.jts-buy--ghost{background:transparent;border-color:var(--ink)}
.jts-buy--ghost:hover{background:var(--panel)}
.jts-buy-note{font-size:11.5px;color:var(--ink-soft);margin:6px 0 0;text-align:center}

/* --------------------------------------------------------------- крошки */
.jts-crumbwrap{padding-top:12px}
.jts-crumbs{display:flex;flex-wrap:wrap;gap:7px;font-size:12.5px;color:var(--ink-soft)}
.jts-crumbs a{text-decoration:none;border-bottom:1px solid var(--rule)}
.jts-crumbs a:hover{color:var(--accent)}

/* ------------------------------------------------------- текстовые блоки */
/* Полосу держат КОЛОНКИ, а не поля (§5): узкая колонка с пустотой по обе
   стороны здесь невозможна по построению. */
.jts-prose{font-size:16px}
.jts-prose p{margin:0 0 1.05em}
.jts-prose h3{font-size:clamp(18px,1.9vw,23px);margin:1.4em 0 .5em}
.jts-prose ul,.jts-prose ol{margin:0 0 1.1em;padding-left:1.15em}
.jts-prose li{margin-bottom:.4em}
.jts-cols2{columns:2;column-gap:clamp(24px,3vw,54px);column-rule:1px solid var(--rule-soft)}
.jts-cols3{columns:3;column-gap:clamp(20px,2.4vw,44px);column-rule:1px solid var(--rule-soft)}
.jts-cols2 > *,.jts-cols3 > *{break-inside:avoid-column}
@media (max-width:980px){.jts-cols3{columns:2}}
@media (max-width:700px){.jts-cols2,.jts-cols3{columns:1;column-rule:0}}
/* Ряд «текст плюс кадр»: текст занимает свою ячейку целиком, кадр — свою. */
.jts-split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,2.8vw,44px);align-items:start}
.jts-split--flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
/* Складывается на 1100, а не на 900: при ширине около тысячи текст занимал
   550px из 970 и рядом оставалась пустота — сосед покрывал половину высоты
   абзацев, и страж зажатого текста краснел справедливо (§5). */
@media (max-width:1100px){.jts-split,.jts-split--flip{grid-template-columns:minmax(0,1fr)}}
.jts-shot-box{background:var(--panel);border:1px solid var(--rule);padding:14px}
.jts-shot-box img{width:100%;max-width:500px;margin-inline:auto;mix-blend-mode:multiply}
.jts-shot-box figcaption{font-size:12.5px;color:var(--ink-soft);margin-top:9px}

/* Ряд крупных чисел: факты, посчитанные по каталогу. */
.jts-figs{display:flex;flex-wrap:wrap;gap:clamp(12px,1.6vw,22px);margin:4px 0 22px;padding:0;list-style:none}
.jts-figs li{flex:1 1 190px;min-width:0;background:var(--card);border:1px solid var(--rule);border-top:4px solid var(--accent);padding:13px 14px}
.jts-figs b{display:block;font-family:var(--slab);font-size:clamp(24px,2.9vw,34px);font-weight:600;line-height:1.05;letter-spacing:-.02em}
.jts-figs span{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:5px}
/* Вариант для страницы «о бренде»: два на два, чтобы четвёртая цифра не
   растягивалась во всю полосу отдельной строкой. */
.jts-figs--2 li{flex:0 1 calc((100% - clamp(12px,1.6vw,22px)) / 2)}

/* ------------------------------------------------------ указатель отделов */
.jts-index{display:flex;flex-wrap:wrap;gap:clamp(10px,1.2vw,16px)}
.jts-index > a{flex:1 1 190px;min-width:0;display:flex;gap:12px;align-items:center;background:var(--card);
 border:1px solid var(--rule);padding:9px 12px 9px 9px;text-decoration:none}
.jts-index > a:hover{border-color:var(--ink);background:var(--panel)}
.jts-index img{width:62px;height:62px;flex:0 0 auto;object-fit:contain;background:var(--panel);mix-blend-mode:multiply}
.jts-index-t{min-width:0}
.jts-index-t b{display:block;font-size:14.5px;font-weight:600;line-height:1.25}
.jts-index-t span{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:3px;font-family:var(--slab)}

/* ------------------------------------------------------------- фильтры */
.jts-filters{border:1px solid var(--rule);background:var(--card);margin-bottom:20px}
.jts-fsum{cursor:pointer;padding:11px 14px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.jts-fbody{display:flex;flex-wrap:wrap;gap:14px 26px;padding:2px 14px 14px;border-top:1px solid var(--rule)}
.jts-fgroup{min-width:0;flex:0 1 auto}
.jts-fgroup > b{display:block;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.jts-fopts{display:flex;flex-wrap:wrap;gap:6px}
.jts-fopt{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--rule);padding:5px 9px;font-size:13px;cursor:pointer;background:var(--paper);min-width:0;max-width:100%;flex-wrap:wrap}
.jts-fopt span{min-width:0;overflow-wrap:anywhere}
.jts-fopts{max-width:100%}
.jts-fopt:hover{border-color:var(--ink)}
.jts-fopt input{margin:0;accent-color:var(--accent)}
.jts-fopt small{color:var(--ink-soft);font-family:var(--slab)}
.jts-fopt:has(input:checked){background:var(--ink);color:var(--on-dark);border-color:var(--ink)}
.jts-fopt:has(input:checked) small{color:var(--on-dark);opacity:.8}
.jts-count{font-size:13px;color:var(--ink-soft);font-family:var(--slab)}
.jts-empty{padding:26px 0;font-size:15px}

/* -------------------------------------------------------------- таблицы */
.jts-tablewrap{overflow-x:auto;max-width:100%;min-width:0;border:1px solid var(--rule);background:var(--card)}
.jts-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px}
.jts-table th{text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
 background:var(--panel);border-bottom:1px solid var(--rule);padding:9px 12px;white-space:nowrap}
.jts-table td{border-bottom:1px solid var(--rule-soft);padding:9px 12px;vertical-align:middle}
.jts-table tr:last-child td{border-bottom:0}
.jts-table .num{text-align:right;font-family:var(--slab);font-variant-numeric:tabular-nums;white-space:nowrap}
.jts-table--buy td:last-child{width:230px}
/* На телефоне таблица складывается в карточки, а не прокручивается: колонка,
   срезанная краем без всякого признака прокрутки, читается как поломка.
   data-label у каждой ячейки печатает шапку рядом со значением. */
@media (max-width:640px){
 .jts-table{min-width:0}
 .jts-table thead{position:absolute;left:-9999px}
 .jts-table tr{display:block;border-bottom:1px solid var(--rule);padding:8px 0}
 .jts-table tr:last-child{border-bottom:0}
 .jts-table td{display:flex;justify-content:space-between;gap:14px;border:0;padding:3px 12px;text-align:left}
 .jts-table td::before{content:attr(data-label);font-weight:600;color:var(--ink-soft);flex:0 0 auto}
 .jts-table td.num{text-align:right}
 .jts-table--buy{min-width:0}
 .jts-table--buy thead{position:absolute;left:-9999px}
 .jts-table--buy tr{display:block;border-bottom:1px solid var(--rule);padding:9px 0}
 .jts-table--buy td{display:flex;justify-content:space-between;gap:12px;border:0;padding:3px 12px}
 .jts-table--buy td::before{content:attr(data-label);font-weight:600;color:var(--ink-soft)}
 .jts-table--buy td:last-child{width:auto;display:block;padding-top:8px}
}

/* --------------------------------------------------------- карточка товара */
/* Колонка галереи ФИКСИРОВАНА по ширине исходника: кадры фида 500px, и
   резиновая колонка растягивала бы их до 700px, то есть мылила. Полосу
   заполняет вертикальная лента миниатюр слева. */
.jts-pd{display:grid;grid-template-columns:minmax(0,600px) minmax(0,1fr);gap:clamp(20px,2.8vw,44px);align-items:start}
.jts-gal{display:flex;gap:8px;align-items:flex-start;min-width:0}
.jts-gal-col{display:flex;flex-direction:column;gap:8px;flex:0 0 82px}
.jts-gal-wrap{flex:1 1 auto;min-width:0;max-width:500px}
@media (max-width:1100px){.jts-pd{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.jts-gal{flex-direction:column-reverse}.jts-gal-col{flex-direction:row;flex:0 0 auto;flex-wrap:wrap}}
.jts-gal-main{background:var(--panel);border:1px solid var(--rule)}
.jts-gal-main img{width:100%;aspect-ratio:1/1;object-fit:contain;mix-blend-mode:multiply}

.jts-gal-col a{background:var(--panel);border:1px solid var(--rule);min-width:0;display:block}
.jts-gal-col a:hover{border-color:var(--accent)}
.jts-gal-col img{width:100%;aspect-ratio:1/1;object-fit:contain;mix-blend-mode:multiply}
.jts-pd h1{font-size:clamp(23px,2.7vw,34px);margin-bottom:10px}
.jts-pd-dept{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 9px}
/* Билет товара: те же выноски, что на карточке, только крупнее. */
.jts-ticket{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);margin:16px 0;padding:4px 0}
.jts-ticket div{display:flex;align-items:baseline;gap:7px;padding:7px 0;border-bottom:1px solid var(--rule-soft);flex-wrap:wrap}
.jts-ticket div:last-child{border-bottom:0}
.jts-ticket dt{color:var(--ink-soft);font-size:13.5px;white-space:nowrap;flex:0 0 auto}
.jts-ticket .jts-lead{flex:1 1 auto;border-bottom:1px dotted var(--rule);transform:translateY(-4px);min-width:10px}
.jts-ticket dd{margin:0;font-family:var(--slab);font-weight:600;font-size:16.5px;flex:0 1 auto;text-align:right;min-width:0;overflow-wrap:anywhere}
.jts-bigprice{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 4px}
.jts-bigprice b{font-family:var(--slab);font-size:clamp(30px,3.6vw,42px);font-weight:600;line-height:1;letter-spacing:-.02em}
.jts-bigprice span{font-size:14px;color:var(--ink-soft)}
.jts-pills{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 0;padding:0;list-style:none}
.jts-pills li{font-size:12.5px;border:1px solid var(--rule);background:var(--panel);padding:4px 9px}
.jts-buybox{margin-top:16px}
.jts-buybox .jts-buy{padding:14px 16px;font-size:14px}

/* ---------------------------------------------------------------- статьи */
.jts-art{display:flex;flex-wrap:wrap;gap:clamp(12px,1.4vw,20px)}
.jts-artcard{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--rule);text-decoration:none}
.jts-artcard:hover{border-color:var(--ink)}
.jts-artcard img{width:100%;aspect-ratio:16/10;object-fit:contain;background:var(--panel);mix-blend-mode:multiply;border-bottom:1px solid var(--rule)}
.jts-artcard > div{padding:13px 14px 15px}
.jts-artcard h3{font-size:18px;margin-bottom:7px}
.jts-artcard p{font-size:14px;color:var(--ink-soft);margin:0 0 9px}
.jts-artcard em{font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.jts-toc{border:1px solid var(--rule);background:var(--card);padding:13px 16px;margin:18px 0 0}
.jts-toc b{display:block;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:7px}
.jts-toc ol{margin:0;padding-left:1.2em;columns:2;column-gap:28px;font-size:13.5px}
@media (max-width:700px){.jts-toc ol{columns:1}}
.jts-quote{border-left:4px solid var(--accent);background:var(--card);padding:13px 16px;margin:0 0 1.1em;font-size:15.5px}
.jts-quote cite{display:block;font-style:normal;font-size:12.5px;color:var(--ink-soft);margin-top:8px}
.jts-note{background:var(--panel);border:1px solid var(--rule);padding:13px 16px;margin:0 0 1.1em;font-size:14.5px}

/* ------------------------------------------------------------------- FAQ */
.jts-faq{border-top:1px solid var(--rule)}
.jts-faq-item{border-bottom:1px solid var(--rule)}
.jts-faq-item summary{cursor:pointer;padding:13px 0;font-weight:600;font-size:16px;font-family:var(--slab)}
.jts-faq-item p{margin:0 0 14px;color:var(--ink-soft);max-width:82ch}

/* ---------------------------------------------------------------- подвал */
.jts-foot{background:var(--ink2);color:var(--on-dark);margin-top:0}
.jts-foot a{color:var(--on-dark)}
/* Пять колонок, и контактная — ПЯТАЯ и чуть шире. Раньше она была шириной в
   две ячейки при пяти колонках: четыре ссылочные плюс две не помещались в
   ряд, блок падал на вторую строку, и правая половина подвала оставалась
   пустой на всю высоту. */
.jts-foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.35fr);gap:clamp(16px,2vw,34px);padding:clamp(26px,3.2vw,44px) 0 26px;align-items:start}
@media (max-width:1050px){.jts-foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.jts-foot-cols{grid-template-columns:minmax(0,1fr)}}

.jts-foot h3{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,241,228,.7);margin-bottom:10px;font-family:var(--body)}
.jts-foot ul{list-style:none;margin:0;padding:0;font-size:14px}
.jts-foot li{margin-bottom:6px;min-width:0}
.jts-foot li a{text-decoration:none;border-bottom:1px solid rgba(247,241,228,.25)}
.jts-foot li a:hover{border-bottom-color:var(--on-dark)}
@media (max-width:1050px){.jts-foot-here{grid-column:span 2}}
.jts-foot-here{min-width:0}
.jts-foot-here p{font-size:14px;color:rgba(247,241,228,.82);margin:0 0 12px}
.jts-foot-addr{font-style:normal;display:flex;flex-direction:column;gap:3px;font-size:14px;margin-bottom:12px}
.jts-foot-addr b{font-weight:600}
.jts-map{border:1px solid rgba(247,241,228,.28);background:var(--ink2-soft);min-width:0}
.jts-map iframe{display:block;width:100%;height:210px;border:0}
.jts-foot-bar{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;align-items:center;
 border-top:1px solid rgba(247,241,228,.24);padding:16px 0 22px;font-size:13px;color:rgba(247,241,228,.8)}
.jts-foot-bar p{margin:0}

/* --------------------------------------------------------------- телефон */
/* На узком экране герой обязан остаться коротким: покупатель должен увидеть
   товар без прокрутки. Мозаика становится лентой из четырёх ровных кадров,
   таблица полос — рядом чипов, служебная строка заголовков уходит. */
@media (max-width:1100px){
 .jts-hero-in{grid-template-columns:minmax(0,1fr);gap:16px}
 .jts-hero-mosaic{grid-template-columns:repeat(4,minmax(0,1fr))}
 .jts-hero-mosaic > a:first-child{grid-column:auto;grid-row:auto}
 .jts-hero-mosaic > a:nth-child(n+5){display:none}
 .jts-bands{border-top:0;display:flex;flex-wrap:wrap;gap:6px}
 .jts-band-row{display:flex;align-items:baseline;gap:8px;padding:6px 10px;border:1px solid var(--rule);border-bottom:1px solid var(--rule)}
 .jts-band-row[style]{display:none}
 .jts-band-row span{display:none}
}
@media (max-width:560px){
 /* Шапка обязана уложиться в ТРИ ряда: полоса, знак со ссылками, поиск.
    Раньше знак и ссылки не помещались в один ряд и шапка занимала
    полэкрана до первого товара. */
 .jts-head-in{min-height:0;padding-top:10px;padding-bottom:10px;gap:10px;row-gap:10px}
 .jts-mark{flex:0 1 auto}
 .jts-mark b{font-size:26px}
 /* Подпись под знаком шире самого знака и одна выталкивала ссылки на
    отдельный ряд. На телефоне знак говорит сам за себя. */
 .jts-mark span{display:none}
 .jts-head-aux{gap:12px}
 .jts-head-aux a{font-size:11px;letter-spacing:.06em}
 .jts-find{order:3;flex-basis:100%}
 /* Адрес живёт в подвале; в узкой полосе он занимал две строки и отодвигал
    товар. Оставляем телефон и часы. */
 .jts-strip-in > span:first-child{display:none}
 .jts-strip-in{font-size:12px;gap:4px 16px}
 .jts-strip .jts-strip-sp{margin-left:0}
 /* Мозаика героя лентой из ТРЁХ ровных кадров: крупная плитка во всю ширину
    давала на телефоне семьсот пикселей картинки до первого товара. */
 .jts-hero-mosaic{grid-template-columns:repeat(3,minmax(0,1fr))}
 .jts-hero-mosaic > a:first-child{grid-column:auto;grid-row:auto}
 .jts-hero-mosaic > a:nth-child(n+4){display:none}
}