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

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

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


@font-face{font-family:"Fraunces";src:url(/assets/fonts/fraunces-latin.7234ed86.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/assets/fonts/instrument-sans-latin.2ee17598.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"DM Mono";src:url(/assets/fonts/dm-mono-latin.e1896b13.woff2) format("woff2");font-weight:400 500;font-style:normal;font-display:swap}
:root{
 --ink:#17110A;--ink-soft:#5E5245;--paper:#F8F5EF;--panel:#EFE8DC;
 --panel-deep:#E4DACA;--line:#D9CDB9;--night:#181209;--night-soft:#241A0F;
 --on-night:#F4EDE0;--on-night-soft:#BFAE97;--amber:#F3B93F;
 --amber-ink:#7E4E06;--walnut:#6B4A2B;
 --wrap:1360px;--rad:3px;
 --display:"Fraunces",Georgia,"Times New Roman",serif;
 --text:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
 --mono:"DM Mono","SFMono-Regular",Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.pim-body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text);
 font-size:17px;line-height:1.62;font-synthesis-weight:none;overflow-wrap:break-word}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.06;margin:0;
 font-variation-settings:"SOFT" 0,"WONK" 0;letter-spacing:-0.012em}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
.pim-wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 clamp(16px,3.6vw,48px)}
.pim-skip{position:absolute;left:-9999px}
.pim-skip:focus{left:12px;top:12px;background:var(--ink);color:var(--paper);padding:10px 14px;z-index:99}

/* ------------------------------------------------------------------ шапка */
.pim-head{position:sticky;top:0;z-index:40;background:rgba(248,245,239,.94);
 backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line)}
.pim-head-in{display:flex;align-items:center;gap:clamp(14px,2.4vw,34px);min-height:66px}
.pim-mark{font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:.24em;
 text-decoration:none;white-space:nowrap;font-variation-settings:"SOFT" 0,"WONK" 1}
.pim-mark span{color:var(--amber-ink)}
.pim-nav{display:flex;align-items:center;gap:clamp(10px,1.5vw,22px);margin-left:auto;
 min-width:0;overflow-x:auto;scrollbar-width:none}
.pim-nav::-webkit-scrollbar{display:none}
.pim-nav a{font-size:15px;text-decoration:none;color:var(--ink-soft);white-space:nowrap;padding:6px 0;
 border-bottom:2px solid transparent}
.pim-nav a:hover,.pim-nav a[aria-current]{color:var(--ink);border-bottom-color:var(--amber)}
@media (max-width:900px){.pim-head-in{flex-wrap:wrap;padding-bottom:6px}
 /* Меню на телефоне это горизонтальная лента, а не три ряда шапки. Затухание
    справа показывает, что лента продолжается: без него последнее слово просто
    выглядит обрезанным (урок treeroot). */
 .pim-nav{margin-left:0;width:100%;order:3;padding-bottom:2px;
  -webkit-mask-image:linear-gradient(to right,#000 88%,transparent 100%);
  mask-image:linear-gradient(to right,#000 88%,transparent 100%)}}

/* ------------------------------------------------------------------- герой */
.pim-hero{position:relative;background:var(--night);color:var(--on-night);isolation:isolate;
 min-height:clamp(400px,52vh,540px);display:flex;align-items:flex-end;overflow:hidden}
.pim-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
/* Светлый текст поверх фотографии обязан читаться и БЕЗ фотографии (правило
   25.08): у полосы свой тёмный фон, поверх кадра лежит вуаль под текстом. */
.pim-hero::after{content:"";position:absolute;inset:0;z-index:-1;
 background:linear-gradient(100deg,rgba(12,9,5,.94) 0%,rgba(12,9,5,.86) 38%,rgba(12,9,5,.42) 66%,rgba(12,9,5,.28) 100%)}
.pim-hero-in{width:100%;padding-block:clamp(32px,4.4vw,64px) clamp(24px,3vw,44px)}
.pim-hero-copy{max-width:min(760px,72%)}
.pim-kicker{font-family:var(--mono);font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;
 color:var(--amber);margin:0 0 18px}
.pim-h1{font-size:clamp(36px,5.1vw,72px);font-weight:300;line-height:.99;letter-spacing:-0.022em;
 font-variation-settings:"SOFT" 0,"WONK" 1;margin:0 0 20px;max-width:16ch}
.pim-hero-sub{font-size:clamp(15.5px,1.25vw,18px);color:var(--on-night-soft);max-width:56ch;margin:0 0 22px}
.pim-cta{display:flex;gap:14px;flex-wrap:wrap}
@media (max-width:820px){.pim-hero-copy{max-width:100%}
 .pim-hero::after{background:linear-gradient(180deg,rgba(12,9,5,.55) 0%,rgba(12,9,5,.86) 52%,rgba(12,9,5,.94) 100%)}}

/* ------------------------------------------------- полоса-индикатор (LED) */
.pim-led{background:#0E0A05;color:var(--amber);font-family:var(--mono);font-size:13.5px;
 letter-spacing:.1em;border-top:1px solid rgba(243,185,63,.28)}
.pim-led-in{display:flex;flex-wrap:wrap;gap:6px 34px;padding-block:13px;align-items:center}
.pim-led b{font-weight:500;color:#FFF3D8}
.pim-led span{display:inline-flex;gap:9px;align-items:baseline;min-width:0}

/* ------------------------------------------------------------------ полосы */
.pim-band{padding:clamp(46px,5.4vw,86px) 0}
.pim-band.warm{background:var(--panel)}
.pim-band.cool{background:var(--panel-deep)}
.pim-band.night{background:var(--night);color:var(--on-night)}
.pim-band.night h2,.pim-band.night h3{color:var(--on-night)}
.pim-band.tight{padding:clamp(30px,3.4vw,52px) 0}
.pim-sechead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,56px);
 align-items:end;margin:0 0 clamp(26px,3vw,44px)}
.pim-sechead h2{font-size:clamp(28px,3.3vw,49px);font-weight:300;letter-spacing:-0.02em;max-width:18ch}
.pim-sechead .pim-kicker{color:var(--amber-ink);margin-bottom:12px}
.pim-band.night .pim-sechead .pim-kicker{color:var(--amber)}
.pim-sechead p{font-size:16.5px;color:var(--ink-soft);margin:0}
.pim-band.night .pim-sechead p{color:var(--on-night-soft)}
@media (max-width:860px){.pim-sechead{grid-template-columns:1fr;align-items:start;gap:16px}}

/* Текст занимает ПОЛОСУ ЦЕЛИКОМ: меру строки держат колонки, а не поля (§5). */
.pim-cols{columns:2;column-gap:clamp(28px,4vw,64px);font-size:16.8px}
.pim-cols p{break-inside:avoid-column}
@media (max-width:860px){.pim-cols{columns:1}}

/* --------------------------------------------------------------- кнопки */
.pim-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
 background:var(--amber);color:var(--ink);border:1px solid var(--amber);
 padding:12px 22px;border-radius:var(--rad);font-size:15px;font-weight:600;
 text-decoration:none;cursor:pointer;min-width:0;transition:background .15s,color .15s}
.pim-btn:hover{background:#FFCB63;border-color:#FFCB63}
.pim-btn.ghost{background:transparent;border-color:currentColor;color:inherit}
.pim-btn.ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pim-band.night .pim-btn.ghost:hover{background:var(--on-night);color:var(--night);border-color:var(--on-night)}

/* --------------------------------------------------------- сценарии «для» */
.pim-scen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.pim-scen-i{background:var(--paper);border:1px solid var(--line);border-radius:var(--rad);
 padding:clamp(20px,2vw,28px);display:flex;flex-direction:column;gap:12px;min-width:0}
.pim-band.night .pim-scen-i{background:var(--night-soft);border-color:rgba(243,185,63,.22)}
.pim-scen-i .pim-num{font-family:var(--mono);font-size:26px;color:var(--amber-ink);letter-spacing:.04em}
.pim-band.night .pim-scen-i .pim-num{color:var(--amber)}
.pim-scen-i h3{font-size:22px;font-weight:400}
.pim-scen-i p{font-size:15.5px;color:var(--ink-soft);margin:0}
.pim-band.night .pim-scen-i p{color:var(--on-night-soft)}
.pim-scen-i a{margin-top:auto;font-size:15px;color:var(--amber-ink);text-decoration:none;
 border-bottom:1px solid rgba(126,78,6,.4);align-self:flex-start}
.pim-band.night .pim-scen-i a{color:var(--amber);border-bottom-color:rgba(243,185,63,.4)}
@media (max-width:1000px){.pim-scen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pim-scen{grid-template-columns:1fr}}

/* --------------------------------------------------------------- карточка */
.pim-shelf{margin:clamp(26px,3vw,40px) 0 0}
.pim-shelf-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
 flex-wrap:wrap;margin:0 0 20px;border-top:1px solid var(--line);padding-top:14px}
.pim-shelf-head h3{font-size:23px;font-weight:400}
.pim-shelf-head a{font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;
 color:var(--amber-ink);text-decoration:none}
.pim-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--rad);
 overflow:hidden;min-width:0}
/* Пакшоты бренда сняты на белом. Поле кадра тоже белое, иначе фотография
   читается белой коробкой внутри тёплой карточки (видно на первом же кадре
   осмотра). Тёплый тон возвращает мягкая подсветка снизу и рамка карточки. */
.pim-card .pim-shot{background:
 radial-gradient(78% 46% at 50% 100%,rgba(243,185,63,.16) 0%,rgba(255,255,255,0) 72%),#FFFFFF;
 padding:14px 14px 6px;display:flex;align-items:center;justify-content:center;
 border-bottom:1px solid var(--line)}
.pim-card .pim-shot img{aspect-ratio:4/3;object-fit:contain;width:100%;height:auto}
.pim-card-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:11px;flex:1;min-width:0}
/* Цена и кнопка прижаты к низу: у карточек разное число строк фактов, и без
   этого кнопки в одном ряду стоят на разной высоте. */
.pim-card-body > .pim-row:last-child{margin-top:auto;padding-top:4px}
.pim-card-title{font-size:19px;font-weight:400;line-height:1.16;letter-spacing:-0.008em}
.pim-card-title a{text-decoration:none}
.pim-spec{display:flex;flex-wrap:wrap;gap:4px 14px;font-family:var(--mono);font-size:12.2px;
 color:var(--ink-soft);letter-spacing:.02em;text-transform:lowercase}
.pim-spec b{font-weight:500;color:var(--ink);text-transform:none}
.pim-card-rating{font-size:14px;color:var(--ink-soft);display:flex;align-items:center;gap:7px}
.pim-card-rating b{color:var(--ink);font-weight:600}
.pim-card-price{font-family:var(--mono);font-size:21px;font-weight:500;letter-spacing:-.01em}
.pim-buy{display:inline-flex;align-items:center;justify-content:center;background:var(--amber);
 border:1px solid var(--amber);border-radius:var(--rad);padding:11px 18px;cursor:pointer;
 text-decoration:none;min-width:0}
.pim-buy{font-size:15px;line-height:1}
.buy-label{height:calc(1em * 0.933);width:auto}
.pim-buy .lbl-amber{display:none}
.pim-buy:hover{background:var(--ink);border-color:var(--ink)}
.pim-buy:hover .lbl-ink{display:none}
.pim-buy:hover .lbl-amber{display:block}

/* --------------------------------------------------------- полосы-полотна */
.pim-strip{position:relative;min-height:clamp(340px,34vw,470px);display:flex;align-items:flex-end;
 background:var(--night);color:var(--on-night);overflow:hidden;isolation:isolate}
.pim-strip img.pim-strip-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.pim-strip::after{content:"";position:absolute;inset:0;z-index:-1;
 background:linear-gradient(to top,rgba(11,8,4,.92) 0%,rgba(11,8,4,.6) 45%,rgba(11,8,4,.22) 100%)}
.pim-strip-in{width:100%;padding-block:clamp(26px,3.4vw,52px)}
.pim-strip h2{font-size:clamp(26px,3vw,44px);font-weight:300;max-width:19ch}
.pim-strip p{color:var(--on-night-soft);max-width:62ch;margin-top:14px}

/* ------------------------------------- департамент по образцу 23-levoit */
/* Крошка обычной строкой под шапкой; кадр-баннер в ширине контента со
   скруглением, заголовок поверх него слева внизу; рабочая полоса «рельса
   плюс сетка 3 в ряд»; плитки «для кого»; пилюли соседних департаментов. */
.pim-crumbline{padding-top:18px;font-size:14.4px}
/* Полотно департамента показывается ЦЕЛИКОМ и держит свою пропорцию: бокс с
   фиксированной высотой срезал у широкого кадра до 40% (страж кадров). Текст
   лежит в СВОЕЙ тёмной панели поверх низа кадра — она обязана оставаться
   читаемой, даже если фотография не приехала (правило 25.08). */
.pim-cathero{position:relative;margin-top:14px;border-radius:12px;overflow:hidden;
 background:var(--night);color:var(--on-night)}
.pim-cathero img.pim-cathero-img{width:100%;height:auto;display:block}
.pim-cathero-in{padding:clamp(20px,2.6vw,40px);width:100%;
 background-color:rgba(11,8,4,.93);
 background-image:linear-gradient(to top,rgba(11,8,4,.5) 0%,rgba(11,8,4,0) 100%)}
@media (min-width:761px){.pim-cathero:not(.split) .pim-cathero-in{position:absolute;left:0;right:0;bottom:0}}
/* У департамента без широкого полотна квадратный пакшот НЕ растягивается на
   полосу: кадр режется на 70% и текст ложится прямо на фотографию. Тогда
   полоса собирается разделённой — тёмная панель с текстом и кадр рядом. */
.pim-cathero.split{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
 align-items:center;min-height:0;gap:0}
.pim-cathero.split .pim-cathero-in{background:none}
/* Кадр департамента квадратный и часто несёт вшитую подпись: режем его
   боксом — срезаем именно её. Поэтому бокс держит СВОЮ пропорцию кадра. */
.pim-cathero-shot{border-radius:0 12px 12px 0;overflow:hidden}
.pim-cathero-shot img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block}
@media (max-width:760px){.pim-cathero.split{grid-template-columns:1fr}
 .pim-cathero.split .pim-cathero-shot{order:-1;border-radius:12px 12px 0 0}}
.pim-cathero h1{margin:0;font-family:var(--display);font-weight:400;
 font-size:clamp(32px,5.2vw,72px);line-height:1.04;max-width:16ch;letter-spacing:-.015em}
.pim-cathero p{margin:14px 0 0;color:var(--on-night-soft);max-width:56ch;font-size:clamp(16px,1.5vw,20px)}

.pim-shelfrow{display:grid;grid-template-columns:minmax(0,232px) minmax(0,1fr);
 gap:clamp(22px,3vw,54px);align-items:start}
.pim-catrail{position:sticky;top:22px;font-size:14.6px}
.pim-catrail h4{font-family:var(--mono);font-size:12.3px;letter-spacing:.11em;text-transform:uppercase;
 color:var(--ink-soft);margin:0 0 12px;font-weight:500}
.pim-catrail h4+ul+h4{margin-top:26px}
.pim-catrail-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pim-catrail-list li{display:flex;gap:10px;justify-content:space-between;align-items:baseline;
 border-bottom:1px solid var(--line);padding-bottom:9px}
.pim-catrail-list.plain li{border-bottom:0;padding-bottom:0}
.pim-catrail-list a{color:var(--ink);text-decoration:none;min-width:0}
.pim-catrail-list a:hover{color:var(--amber-ink)}
.pim-catrail-list span{font-family:var(--mono);font-size:13px;color:var(--ink-soft);white-space:nowrap}
.pim-shelfmain{min-width:0}
.pim-shelfhead{display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;
 align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:26px}
.pim-shelfcount,.pim-shelfsort{margin:0;font-size:14.6px;color:var(--ink-soft)}
.pim-shelfcount{font-family:var(--mono);letter-spacing:.04em;text-transform:uppercase;font-size:12.6px}

.pim-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
 gap:clamp(16px,2vw,28px)}
.pim-tile{background:var(--paper);border-radius:12px;padding:clamp(20px,2vw,28px);
 display:flex;flex-direction:column;gap:12px;min-width:0}
.pim-tile h3{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(20px,2vw,25px);line-height:1.16}
.pim-tile-name{margin:0;font-family:var(--mono);font-size:12.6px;letter-spacing:.05em;
 text-transform:uppercase;color:var(--ink-soft)}
.pim-tile ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.pim-tile li{padding:11px 0;border-bottom:1px solid var(--line);font-size:15.4px}
.pim-tile li:last-child{border-bottom:0}
.pim-tile .pim-row{margin-top:auto;padding-top:6px}

/* Таблица департамента идёт ВО ВСЮ полосу под текстом: в половине ряда
   пятиколоночная таблица упиралась в свой скролл уже на 1650px. */
.pim-guide{display:grid;gap:clamp(22px,2.6vw,40px)}
.pim-pillband h2{font-family:var(--display);font-weight:400;text-align:center;
 font-size:clamp(24px,3vw,40px);margin:0 0 24px}
.pim-pills{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.pim-pills a{border:1px solid var(--line);border-radius:999px;padding:12px 22px;
 text-decoration:none;color:var(--ink);background:var(--paper);font-size:16px}
.pim-pills a:hover{border-color:var(--amber);color:var(--amber-ink)}
@media (max-width:900px){.pim-shelfrow{grid-template-columns:1fr}
 .pim-catrail{position:static}}

/* ------------------------------------------ статья по образцу 23-levoit */
/* Шапка в два столбца: кадр слева со скруглением, кикер, крупный тонкий
   заголовок и строка даты справа. Ниже тело слева и липкая рельса справа,
   в рельсе первым блоком идут ТОВАРЫ. */
.pim-arthead{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;
 gap:clamp(24px,3.4vw,64px);padding-top:clamp(14px,1.6vw,22px)}
/* Кадр шапки статьи показывается ЦЕЛИКОМ: у части кадров подпись вшита в
   картинку, и бокс с object-fit:cover срезает именно её (страж кадров). */
.pim-arthead-shot img{width:100%;height:auto;border-radius:8px;display:block}
.pim-arthead-in h1{margin:10px 0 0;font-family:var(--display);font-weight:400;
 font-size:clamp(30px,4vw,48px);line-height:1.1;letter-spacing:-.015em}
.pim-artmeta{margin:20px 0 0;display:flex;gap:16px;align-items:center;
 font-size:15.4px;color:var(--ink-soft)}
.pim-artmeta span+span{border-left:1px solid var(--line);padding-left:16px}
.pim-railcards{display:grid;gap:16px}
.pim-railcards .pim-card{width:100%}
.pim-artnote{font-style:italic;color:var(--ink-soft);font-size:15.4px;max-width:70ch}
/* На телефоне шапка статьи складывается в столбец: в двух колонках кадр
   сжимался до 170px, а заголовок вставал лесенкой в восемь строк. */
@media (max-width:760px){
 .pim-arthead{grid-template-columns:1fr;gap:18px}
 .pim-arthead-in h1{margin-top:4px}
 .pim-artmeta{margin-top:14px}}

/* ------------------------------------------------------------- рассказ/факты */
.pim-story{display:grid;grid-template-columns:minmax(0,1.24fr) minmax(0,1fr);
 gap:clamp(26px,3.6vw,64px);align-items:start}
.pim-story.flip{grid-template-columns:minmax(0,1fr) minmax(0,1.24fr)}
.pim-story figure{margin:0}
.pim-story figure img{width:100%;border-radius:var(--rad)}
.pim-figcap{font-family:var(--mono);font-size:12.4px;color:var(--ink-soft);margin-top:9px;letter-spacing:.02em}
.pim-band.night .pim-figcap{color:var(--on-night-soft)}
@media (max-width:1100px){.pim-story,.pim-story.flip{grid-template-columns:1fr}}
.pim-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);margin-top:26px}
.pim-facts div{border-top:2px solid var(--amber);padding-top:12px;min-width:0}
.pim-facts b{display:block;font-family:var(--mono);font-size:clamp(22px,2.2vw,30px);font-weight:500;letter-spacing:-.01em}
.pim-facts span{font-size:14.5px;color:var(--ink-soft)}
.pim-band.night .pim-facts span{color:var(--on-night-soft)}
@media (max-width:700px){.pim-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------------------------------------------------------------- таблицы */
table.pim-t{font-size:15.6px}
table.pim-t caption{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
 color:var(--ink-soft);text-align:left;padding-bottom:12px}
table.pim-t th{text-align:left;font-family:var(--mono);font-size:12.6px;letter-spacing:.06em;
 text-transform:uppercase;font-weight:500;color:var(--ink-soft);padding:0 16px 10px 0;
 border-bottom:1px solid var(--line);vertical-align:bottom}
table.pim-t td{padding:13px 16px 13px 0;border-bottom:1px solid var(--line);vertical-align:top}
table.pim-t tbody tr:hover{background:rgba(243,185,63,.08)}
/* В наших таблицах ячейки несут фразы, а не числа: выравнивание по правому
   краю рвало бы строку посередине («8 or 9 graded sounds» справа, «Alarm
   sounds» слева). Числовой класс библиотеки оставляем табличными цифрами. */
table.pim-t td.num{text-align:left;font-variant-numeric:tabular-nums}
.pim-band.night table.pim-t th,.pim-band.night table.pim-t td{border-bottom-color:rgba(243,185,63,.22)}
.pim-band.night table.pim-t th{color:var(--on-night-soft)}
/* На телефоне таблица складывается в карточки. Подпись поля ставим НАД
   значением, а не напротив: значение, прижатое к правому краю, читается как
   вторая колонка, которой на телефоне уже нет. */
@media (max-width:640px){
 table.pim-t tr{border-bottom:1px solid var(--line);padding-bottom:10px}
 table.pim-t td{display:grid;grid-template-columns:1fr;gap:2px;padding:8px 0;border-bottom:0;text-align:left}
 table.pim-t td.num{text-align:left}
 table.pim-t td::before{font-family:var(--mono);font-size:11.6px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em}
 table.pim-t caption{padding-bottom:8px}}

/* --------------------------------------------------------------- галерея */
.pim-gal{gap:clamp(10px,1.2vw,18px)}
.pim-gal > *{flex-basis:calc((100% - 3 * clamp(10px,1.2vw,18px)) / 4)}
@media (max-width:900px){.pim-gal > *{flex-basis:calc((100% - clamp(10px,1.2vw,18px)) / 2)}}
@media (max-width:520px){.pim-gal > *{flex-basis:100%}}
/* Все кадры каталога квадратные. Бокс тоже квадратный: любой другой
   заставляет object-fit:cover срезать четверть кадра вместе с подписями. */
.pim-gal img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--rad);background:var(--panel-deep)}
.pim-gal .pim-shot-link{overflow:hidden;border-radius:var(--rad)}
/* Вариант с лайтбоксом: курсор-лупа и лёгкий подъём кадра под курсором. */
.pim-gal.lightbox .pim-shot-link{cursor:zoom-in}
.pim-gal.lightbox img{transition:transform .25s ease}
.pim-gal.lightbox .pim-shot-link:hover img{transform:scale(1.03)}
.pim-shot-hint{position:absolute;left:10px;bottom:10px;background:rgba(12,9,5,.78);color:var(--on-night);
 font-family:var(--mono);font-size:11.6px;letter-spacing:.04em;padding:5px 9px;border-radius:2px}
.pim-zoom{background:#0B0804}
.pim-zoom::backdrop{background:rgba(8,6,3,.86)}

/* ----------------------------------------------------------------- видео */
.pim-vid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:clamp(24px,3vw,52px);align-items:start}
.pim-vid ul{margin:18px 0 0;padding-left:18px;color:var(--on-night-soft);font-size:15.6px}
.pim-vid li{margin-bottom:8px}
.pim-vid video{width:100%;border-radius:var(--rad);background:#0B0804;aspect-ratio:16/9;object-fit:cover}
@media (max-width:900px){.pim-vid{grid-template-columns:1fr}}

/* --------------------------------------------------------------- журнал */
.pim-jrn{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2vw,30px)}
.pim-jrn article{display:flex;flex-direction:column;gap:13px;min-width:0}
.pim-jrn img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--rad);background:var(--panel-deep)}
.pim-jrn h3{font-size:23px;font-weight:400;line-height:1.14}
.pim-jrn h3 a{text-decoration:none}
.pim-jrn p{font-size:15.6px;color:var(--ink-soft);margin:0}
.pim-band.night .pim-jrn p{color:var(--on-night-soft)}
.pim-meta{font-family:var(--mono);font-size:12.4px;letter-spacing:.08em;text-transform:uppercase;color:var(--amber-ink)}
.pim-band.night .pim-meta{color:var(--amber)}
@media (max-width:900px){.pim-jrn{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- статья */
.pim-art{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,318px);gap:clamp(28px,4vw,72px);align-items:start}
.pim-art-body{min-width:0;font-size:17.6px}
.pim-art-body h2{font-size:clamp(25px,2.6vw,36px);font-weight:400;margin:2.1em 0 .6em;letter-spacing:-.015em}
.pim-art-body h3{font-size:clamp(20px,1.9vw,25px);font-weight:500;margin:1.7em 0 .5em}
.pim-art-body figure{margin:2em 0}
.pim-art-body figure img{width:100%;border-radius:var(--rad)}
.pim-art-body blockquote{margin:1.9em 0;padding:4px 0 4px 22px;border-left:3px solid var(--amber);
 font-family:var(--display);font-size:22px;line-height:1.34;font-weight:300}
.pim-art-body blockquote cite{display:block;font-family:var(--text);font-size:14.5px;font-style:normal;
 color:var(--ink-soft);margin-top:12px;line-height:1.5}
.pim-art-body ul,.pim-art-body ol{padding-left:20px;margin:0 0 1.05em}
.pim-art-body li{margin-bottom:.45em}
.pim-art-lead{font-size:clamp(19px,1.7vw,23px);line-height:1.44;color:var(--ink);font-family:var(--display);font-weight:300}
.pim-rail{position:sticky;top:88px;display:flex;flex-direction:column;gap:22px;min-width:0}
.pim-rail-box{background:var(--panel);border-radius:var(--rad);padding:20px}
.pim-rail-box h4{font-family:var(--mono);font-size:12.4px;letter-spacing:.1em;text-transform:uppercase;
 color:var(--amber-ink);margin:0 0 12px;font-weight:500}
.pim-rail-box ol,.pim-rail-box ul{margin:0;padding-left:17px;font-size:15.2px}
.pim-rail-box li{margin-bottom:7px}
.pim-rail-box a{color:var(--ink)}
@media (max-width:960px){.pim-art{grid-template-columns:1fr}.pim-rail{position:static}}
.pim-inset{border:1px solid var(--line);border-radius:var(--rad);padding:18px;display:flex;gap:18px;
 align-items:center;margin:1.9em 0;background:var(--panel);min-width:0}
/* КАДР врезки, а не любая картинка внутри неё: селектор по тегу ловил ещё и
   надпись кнопки покупки — она получала фон панели и ширину 132px, то есть
   серый прямоугольник вокруг букв прямо внутри жёлтой кнопки (нашёл владелец
   30.08). Надпись живёт по классу .buy-label и правил врезки не касается. */
.pim-inset .pim-inset-shot{width:132px;flex:0 0 132px;aspect-ratio:1/1;object-fit:contain;background:var(--panel-deep);border-radius:2px}
/* ТЕЛО врезки по классу, а не «любой div внутри»: селектор по тегу ловил ещё и
   строку с ценой и кнопкой, разворачивал её в колонку и центрировал — цена
   оказывалась над кнопкой посреди пустого места. Та же грабля, что с надписью
   кнопки выше: тег внутри блока это не «мой единственный ребёнок». */
.pim-inset .pim-inset-body{min-width:0;flex:1;display:flex;flex-direction:column;gap:8px}
.pim-inset b{font-family:var(--display);font-size:19px;font-weight:400}
.pim-inset span{font-size:15px;color:var(--ink-soft)}
@media (max-width:560px){.pim-inset{flex-direction:column;align-items:flex-start}}

/* ----------------------------------------------------------------- прочее */
.pim-crumbs{font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;padding:16px 0 0}
.pim-crumbs a{color:var(--ink-soft);text-decoration:none}
.pim-crumbs li[aria-current]{color:var(--ink)}
/* На фотополосе крошки лежат поверх кадра: тёмный текст на тёмной фотографии
   не читается, и это видно только глазами, не аудитом разметки. */
.pim-strip .pim-crumbs{padding-bottom:14px}
.pim-strip .pim-crumbs a{color:var(--on-night-soft)}
.pim-strip .pim-crumbs li[aria-current]{color:var(--on-night)}
.pim-strip .pim-crumbs li+li::before{color:rgba(191,174,151,.55)}
.pim-crumbs li+li::before{content:"/";color:var(--line);margin-right:8px}
.pim-faq{display:grid;gap:2px}
.pim-faq-item{border-top:1px solid var(--line);padding:16px 0}
.pim-faq-item summary{cursor:pointer;font-family:var(--display);font-size:20px;font-weight:400;list-style:none}
.pim-faq-item summary::-webkit-details-marker{display:none}
.pim-faq-item summary::after{content:"+";float:right;font-family:var(--mono);color:var(--amber-ink)}
.pim-faq-item[open] summary::after{content:"–"}
.pim-faq-item p{margin:12px 0 0;color:var(--ink-soft);max-width:none}
/* Закрытый ответ убираем сами: у закрытого details Chrome оставляет потомку
   геометрию, и страж наложений видит абзац поверх заголовка. */
.pim-faq-item:not([open]) p{display:none}
.pim-pager{justify-content:center;margin-top:34px;font-family:var(--mono);font-size:14px}
.pim-pager a,.pim-pager span{padding:8px 13px;border:1px solid var(--line);border-radius:var(--rad);text-decoration:none}
.pim-pager span[aria-current]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pim-note{font-size:14.6px;color:var(--ink-soft)}
.pim-legal{font-size:16.6px}
.pim-legal h2{font-size:clamp(22px,2.2vw,30px);font-weight:400;margin:1.9em 0 .5em}
.pim-legal ul{padding-left:20px}

/* ---------------------------------------------------------------- подвал */
/* Один в один по образцу 23-levoit: полоса обращения (крупный заголовок
   слева, действие справа), разделитель, ПЯТЬ колонок ссылок с маркой слева,
   нижняя строка мелким шрифтом. */
.pim-foot{background:var(--night);color:var(--on-night-soft);font-size:15.4px;
 padding:clamp(40px,4vw,64px) 0 26px}
.pim-foot-call{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
 gap:clamp(24px,4vw,72px);align-items:start;padding-bottom:clamp(30px,3.4vw,48px)}
.pim-foot-call h2{margin:0;font-family:var(--display);font-weight:400;
 font-size:clamp(29px,3.6vw,44px);line-height:1.12;color:var(--on-night);letter-spacing:-.01em}
.pim-foot-act p{margin:0 0 14px;max-width:60ch}
.pim-foot-mail{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.pim-foot-mail a:first-child{flex:1;min-width:0;background:var(--paper);color:var(--ink);
 border-radius:8px;padding:15px 18px;font-size:16px;text-decoration:none}
.pim-foot-btn{background:var(--amber);color:var(--amber-ink);border-radius:8px;
 padding:15px 26px;font-weight:600;white-space:nowrap;text-decoration:none}
.pim-foot-btn:hover{filter:brightness(1.07)}
.pim-foot-fine{font-size:13.8px;color:var(--on-night-soft)}
.pim-foot-fine a,.pim-foot-act a{color:var(--on-night)}
.pim-foot-cols{display:grid;grid-template-columns:minmax(0,1.25fr) repeat(5,minmax(0,1fr));
 gap:clamp(18px,2.4vw,40px);padding-block:clamp(28px,3vw,42px);
 border-top:1px solid rgba(243,185,63,.2);border-bottom:1px solid rgba(243,185,63,.2)}
.pim-foot h4{font-family:var(--mono);font-size:12.3px;letter-spacing:.11em;text-transform:uppercase;
 color:var(--amber);margin:0 0 14px;font-weight:500}
.pim-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.pim-foot a{color:var(--on-night);text-decoration:none}
.pim-foot a:hover{color:var(--amber)}
.pim-foot-col li{line-height:1.35}
.pim-foot-brand{min-width:0}
.pim-foot-mark{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:.24em;color:var(--on-night)}
.pim-foot-copy{margin:14px 0 6px;font-size:13.8px}
.pim-foot-since{margin:0;font-size:13.8px;max-width:30ch}
.pim-foot-legal{padding-top:20px;display:flex;flex-wrap:wrap;gap:8px 26px;font-size:13.8px}
@media (max-width:1080px){.pim-foot-cols{grid-template-columns:minmax(0,1fr) repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.pim-foot-call{grid-template-columns:1fr}
 .pim-foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.pim-foot-cols{grid-template-columns:1fr}
 .pim-foot-mail a:first-child{flex:1 1 100%}}


/* ------------------------------------------------------------- отзывы */
.pim-revs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.pim-rev{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--rad);
 padding:clamp(18px,1.8vw,26px);display:flex;flex-direction:column;gap:14px;min-width:0}
.pim-band.night .pim-rev{background:var(--night-soft);border-color:rgba(243,185,63,.22)}
.pim-rev blockquote{margin:0;font-family:var(--display);font-size:19px;line-height:1.36;font-weight:300}
.pim-rev blockquote p{margin:0}
.pim-rev figcaption{margin-top:auto;font-family:var(--mono);font-size:12.2px;letter-spacing:.02em;color:var(--ink-soft)}
.pim-rev figcaption a{color:var(--amber-ink)}
@media (max-width:1000px){.pim-revs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.pim-revs{grid-template-columns:1fr}}
/* отзыв внутри статьи — одиночная врезка, не сетка */
.pim-art-body .pim-rev{margin:1.9em 0;background:var(--panel)}
.pim-band.warm .pim-art-body .pim-rev{background:var(--paper)}

/* ------------------------------------------------------- сетка карточек */
.pim-grid{--gap:clamp(16px,1.7vw,26px)}
.pim-grid.even > *{display:flex}
.pim-grid.even > * > *{width:100%}