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

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

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


@font-face{font-family:"Antonio";src:url(/assets/fonts/antonio-latin.82661fec.woff2) format("woff2");font-weight:100 700;font-display:swap;font-style:normal}
@font-face{font-family:"Libre Franklin";src:url(/assets/fonts/libre-franklin-latin.52e60585.woff2) format("woff2");font-weight:300 800;font-display:swap;font-style:normal}
:root{--ink:#1B1C19;--ink-deep:#121311;--panel:#23251F;--plate:#F4F2EC;--plate-edge:#DAD6C9;
  --khaki:#D6BE6E;--khaki-soft:#6B5C2A;--text:#F2F0E9;--muted:#B4B0A3;
  --display:"Antonio","Arial Narrow",Impact,sans-serif;--body:"Libre Franklin",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --wrap:1200px;--gap:20px;color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--text);font:400 16px/1.6 var(--body)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
[hidden]{display:none!important}
.cu-wrap{width:min(100% - 32px,var(--wrap));margin-inline:auto;min-width:0}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:.96;letter-spacing:.005em;margin:0;text-transform:uppercase}
h1{font-size:clamp(36px,4.4vw,56px)}
h2{font-size:clamp(28px,3.4vw,42px)}
h3{font-size:clamp(19px,2vw,24px)}
p{margin:0 0 14px}
.cu-kick{font:700 12px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--khaki);margin:0 0 12px}
.cu-kick.line{display:flex;align-items:center;gap:12px}
.cu-kick.line:before{content:"";width:34px;height:2px;background:var(--khaki);flex:0 0 auto}
.cu-lede{color:var(--muted);font-size:17px;max-width:58ch}

/* ---------- верхняя полоса и шапка ---------- */
.cu-top{background:var(--ink-deep);color:var(--muted);font:600 12px/1.4 var(--body);letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid rgba(214,190,110,.18)}
.cu-top .cu-wrap{display:flex;justify-content:space-between;gap:16px;padding:8px 0;min-width:0}
.cu-top a{color:var(--muted);text-decoration:none}
.cu-top-r{flex:0 0 auto;min-width:0}
.cu-top a:hover{color:var(--khaki)}
.cu-head{background:var(--ink-deep);border-bottom:3px solid var(--khaki);position:relative;z-index:5}
.cu-head-row{display:flex;align-items:center;gap:24px;padding:14px 0}
.cu-mark{font-family:var(--display);font-size:32px;font-weight:700;letter-spacing:.06em;text-decoration:none;color:var(--text);flex:0 0 auto}
.cu-mark b{color:var(--khaki);font-weight:700}
.cu-nav{display:flex;gap:20px;flex-wrap:wrap;margin-left:auto;min-width:0}
.cu-nav a{font:700 13px/1 var(--display);font-size:16px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--text);padding:6px 0;border-bottom:2px solid transparent}
.cu-nav a:hover,.cu-nav a[aria-current]{color:var(--khaki);border-bottom-color:var(--khaki)}

/* ---------- кнопки ---------- */
.cu-btn,.cu-buy{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 15px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;
  background:var(--khaki);color:#1B1C19;border:2px solid var(--khaki);border-radius:3px;padding:13px 22px;text-decoration:none;cursor:pointer;min-width:0}
.cu-btn:hover,.cu-buy:hover{background:#E2CB84;border-color:#E2CB84}
.cu-btn.ghost{background:transparent;color:var(--text);border-color:rgba(242,240,233,.55)}
.cu-btn.ghost:hover{border-color:var(--khaki);color:var(--khaki);background:transparent}
.cu-buy{width:100%;background:transparent;color:var(--khaki);padding:11px 12px}
.cu-buy:hover{background:var(--khaki)}
.cu-buy.filled{background:var(--khaki);color:#1B1C19}
.cu-buy img.buy-label{height:calc(1em * 0.867);width:auto;display:block;margin-inline:auto}
.cu-buy:hover img.buy-label{filter:brightness(.15)}
.cu-buy.filled img.buy-label{filter:none}
.cu-btns{display:flex;gap:12px;flex-wrap:wrap;min-width:0}
.cu-btns > *{min-width:0}
.cu-note{font-size:12.5px;color:var(--muted);margin-top:8px}

/* ---------- герой ---------- */
/* Диагональная штриховка — CSS, а не кадр: текст читаем и без единой
   загруженной картинки, контраст считается к самой тёмной полосе. */
.cu-hero{background:var(--ink-deep) repeating-linear-gradient(135deg,rgba(214,190,110,.045) 0 10px,transparent 10px 30px);border-bottom:1px solid rgba(214,190,110,.2)}
.cu-hero-in{display:block;padding:16px 0 14px}
/* Мера строки — у ЗАГОЛОВКА, а не у всего блока: потолок 22ch на блоке
   сжал герой в столбик шириной с кикер (поймано глазом на первой сборке). */
.cu-hero-text{min-width:0}
.cu-hero h1{max-width:16ch}
.cu-hero-text .cu-lede{max-width:62ch}
.cu-hero h1{margin-bottom:10px}
.cu-hero h1 span{color:var(--khaki)}
.cu-hero .cu-lede{margin-bottom:12px;font-size:16px}
/* Кадр НЕ рисуется крупнее файла (все кадры 500px по высоте): высота
   ограничена, ширина по пропорции, плита центрирует. */
.cu-facts{background:var(--panel);border-top:1px solid rgba(214,190,110,.2)}
.cu-facts .cu-wrap{display:flex;flex-wrap:wrap;gap:8px 30px;padding:7px 0}
.cu-facts div{display:flex;align-items:baseline;gap:8px;min-width:0}
.cu-facts b{font-family:var(--display);font-size:22px;color:var(--khaki);line-height:1}
.cu-facts span{font:600 11.5px/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* ---------- секции и полки ---------- */
.cu-sec{padding:22px 0 38px}
.cu-sec.tint{background:var(--panel)}
.cu-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:16px;flex-wrap:wrap}
.cu-sec-head .cu-lede{margin:8px 0 0}
/* Ряд флексом: неполный последний ряд ЦЕНТРИРУЕТСЯ (правило портфеля). */
.cu-shelf{display:flex;flex-wrap:wrap;gap:var(--gap);justify-content:center;align-items:stretch}
.cu-shelf > *{flex:0 1 calc((100% - 3 * var(--gap)) / 4);min-width:220px}
@media (max-width:1100px){.cu-shelf > *{flex-basis:calc((100% - 2 * var(--gap)) / 3)}}
@media (max-width:820px){.cu-shelf > *{flex-basis:calc((100% - var(--gap)) / 2);min-width:150px}}
.cu-card{display:flex;flex-direction:column;min-width:0;border:1px solid rgba(214,190,110,.22);background:var(--ink-deep)}
.cu-card .cu-frame{display:block;background:var(--plate);padding:10px;border-bottom:1px solid var(--plate-edge)}
.cu-card .cu-frame img{width:100%;height:auto;aspect-ratio:4/5;object-fit:contain;mix-blend-mode:multiply}
.cu-card-body{display:flex;flex-direction:column;flex:1 1 auto;padding:12px 12px 12px;min-width:0}
.cu-card h3{font-size:17px;letter-spacing:.02em;line-height:1.1;margin:0 0 6px}
.cu-card h3 a{text-decoration:none}
.cu-card h3 a:hover{color:var(--khaki)}
.cu-key{font-size:12.5px;color:var(--muted);margin:0 0 8px}
.cu-sizes{display:flex;gap:5px;flex-wrap:wrap;margin:0 0 8px;padding:0;list-style:none}
.cu-sizes li{margin:0}
.cu-sizes a,.cu-sizes span{display:inline-block;min-width:34px;text-align:center;border:1px solid rgba(214,190,110,.4);padding:4px 7px;font:600 12px/1 var(--body);text-decoration:none;color:var(--text)}
.cu-sizes a:hover{border-color:var(--khaki);color:var(--khaki)}
.cu-sizes [aria-current]{background:var(--khaki);color:#1B1C19;border-color:var(--khaki)}
.cu-sizes.big a,.cu-sizes.big span{padding:8px 12px;font-size:14px;min-width:46px}
.cu-sizes.big a small{display:block;font-weight:400;font-size:11px;color:var(--muted);margin-top:3px}
.cu-sizes.big a:hover small{color:var(--khaki)}
.cu-stars{font:500 12.5px/1.3 var(--body);color:var(--muted);margin:0 0 6px}
.cu-stars b{color:var(--text);font-weight:600}
.cu-price{font-family:var(--display);font-size:24px;color:var(--khaki);margin:0 0 10px;line-height:1}
.cu-price small{font:500 12px/1 var(--body);color:var(--muted)}
.cu-card .cu-buy{margin-top:auto}

/* ---------- плитки «кому служим» и отделов ---------- */
.cu-tiles{display:flex;flex-wrap:wrap;gap:var(--gap);justify-content:center}
.cu-tiles > *{flex:0 1 calc((100% - 2 * var(--gap)) / 3);min-width:250px}
.cu-tiles.four > *{flex-basis:calc((100% - 3 * var(--gap)) / 4);min-width:220px}
@media (max-width:820px){.cu-tiles > *,.cu-tiles.four > *{flex-basis:calc((100% - var(--gap)) / 2);min-width:160px}}
.cu-tile{display:flex;flex-direction:column;text-decoration:none;border:1px solid rgba(214,190,110,.26);min-width:0;background:var(--ink-deep)}
.cu-tile-img{display:block;background:var(--plate);padding:10px}
.cu-tile-img{display:flex;justify-content:center;align-items:center}
.cu-tile-img img{width:100%;max-width:300px;height:auto;aspect-ratio:4/5;object-fit:contain;max-height:280px;mix-blend-mode:multiply}
.cu-tile-cap{display:flex;flex-direction:column;gap:6px;padding:14px 15px 16px;background:var(--ink-deep);flex:1 1 auto}
.cu-tile-cap small{font:700 11px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--khaki)}
.cu-tile-cap b{font-family:var(--display);font-size:24px;text-transform:uppercase;line-height:1;letter-spacing:.02em}
.cu-tile-cap span{font-size:14px;color:var(--muted)}
.cu-tile-cap em{font:700 12px/1 var(--display);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--khaki);font-style:normal;margin-top:auto}
.cu-tile:hover{border-color:var(--khaki)}

/* ---------- проза: вся ширина полосы, колонками ---------- */
.cu-prose{min-width:0}
.cu-prose.two{columns:2;column-gap:34px}
.cu-prose.two p,.cu-prose.two h2,.cu-prose.two h3{break-inside:avoid}
.cu-prose h2{margin:20px 0 10px;color:var(--khaki);padding-bottom:6px;border-bottom:2px solid var(--khaki-soft);display:inline-block}
.cu-prose p{color:var(--text)}
@media (max-width:900px){.cu-prose.two{columns:1}}
.cu-story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:center;padding:40px 0}
.cu-story.flip{direction:rtl}
.cu-story.flip > *{direction:ltr}
/* Плита истории держит РАЗМЕР ДО ЗАГРУЗКИ кадра: ленивая картинка с
   width:auto давала бокс в ноль пикселей, и страж зажатого текста честно
   видел пустоту рядом с абзацами. Ширина плиты ограничена так, чтобы кадр
   500px по высоте не рисовался шире файла (364-400px). */
.cu-story-plate{background:var(--plate);border:1px solid var(--plate-edge);padding:16px;min-width:0;max-width:400px;width:100%;justify-self:center}
.cu-story-plate img{width:100%;height:auto;aspect-ratio:4/5;object-fit:contain;mix-blend-mode:multiply}
.cu-story-text{min-width:0}
.cu-story-text .cu-prose{columns:1}
.cu-counters{display:flex;flex-wrap:wrap;gap:14px 40px;justify-content:center;padding:26px 0;border-block:1px solid rgba(214,190,110,.22)}
.cu-counters div{text-align:center;min-width:0}
.cu-counters b{display:block;font-family:var(--display);font-size:44px;line-height:1;color:var(--khaki)}
.cu-counters span{font:600 12px/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---------- страница товара ---------- */
.cu-pdp{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:34px;padding:30px 0 10px;align-items:start}
.cu-gal{display:grid;gap:10px;min-width:0}
.cu-gal-main{background:var(--plate);border:1px solid var(--plate-edge);padding:16px}
.cu-gal-main img{width:auto;max-width:100%;height:auto;max-height:500px;margin-inline:auto;mix-blend-mode:multiply}
.cu-gal-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.cu-thumb{display:block;background:var(--plate);border:1px solid var(--plate-edge);padding:6px;isolation:isolate}
.cu-thumb img{width:100%;aspect-ratio:4/5;object-fit:contain;mix-blend-mode:multiply}
.cu-thumb:first-child{border-color:var(--khaki)}
.cu-pdp-side h1{font-size:clamp(30px,3.4vw,44px);margin-bottom:10px}
.cu-pdp-side .cu-kick a{text-decoration:none}
.cu-buybox{border:1px solid rgba(214,190,110,.3);padding:16px;margin:14px 0 18px;background:var(--ink-deep)}
.cu-buybox .cu-price{font-size:36px;margin-bottom:12px}
.cu-spec{width:100%;border-collapse:collapse;margin:4px 0 18px;font-size:15px}
.cu-spec th{text-align:left;width:38%;font:700 12px/1.4 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--khaki);padding:9px 12px 9px 10px;vertical-align:top}
.cu-spec td{padding:9px 10px;color:var(--text)}
.cu-spec tr:nth-child(odd) th,.cu-spec tr:nth-child(odd) td{background:rgba(214,190,110,.06)}
.cu-tablewrap{overflow-x:auto;min-width:0}
.cu-tablewrap .cu-spec{min-width:480px}
.cu-stickybuy{display:none}
@media (max-width:820px){
  .cu-stickybuy{display:block;position:sticky;bottom:0;z-index:6;background:var(--ink-deep);border-top:2px solid var(--khaki);padding:10px 0;margin-top:16px}
  .cu-stickybuy .cu-wrap{display:flex;align-items:center;gap:14px}
  .cu-stickybuy .cu-price{margin:0;font-size:24px;flex:0 0 auto}
  .cu-stickybuy .cu-buy{flex:1 1 auto}
}

/* ---------- статьи ---------- */
.cu-art{padding:28px 0 10px}
.cu-art h1{max-width:24ch}
.cu-art .cu-lede{max-width:62ch}
.cu-art h2{margin:30px 0 12px;color:var(--khaki);padding-bottom:6px;border-bottom:2px solid var(--khaki-soft);display:inline-block}
.cu-quote{border-left:3px solid var(--khaki);padding:6px 0 6px 16px;margin:18px 0;color:var(--text)}
.cu-quote cite{display:block;margin-top:8px;font-size:13px;color:var(--muted);font-style:normal}
.cu-src{font-size:13.5px;color:var(--muted)}
.cu-src a{color:var(--khaki)}
.cu-artshelf{margin:24px 0 28px;padding:20px 0 4px;border-block:1px solid rgba(214,190,110,.22)}
.cu-artshelf .cu-sec-head{margin-bottom:16px}
.cu-artshelf h2{font-size:clamp(22px,2.4vw,30px);border:0;padding:0;margin:0;color:var(--text)}

/* ---------- крошки, пагинация ---------- */
.cu-crumbs{font-size:13px;color:var(--muted);padding:12px 0 0}
.cu-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.cu-crumbs li+li:before{content:"/";margin-right:8px;color:var(--khaki-soft)}
.cu-crumbs a{color:var(--muted);text-decoration:none;border-bottom:1px solid rgba(180,176,163,.4)}
.cu-crumbs a:hover{color:var(--khaki);border-bottom-color:var(--khaki)}
.cu-pages{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:26px;padding:0;list-style:none}
.cu-pages a,.cu-pages span{display:inline-block;min-width:40px;text-align:center;padding:9px 10px;border:1px solid rgba(214,190,110,.35);text-decoration:none;font-size:14px}
.cu-pages [aria-current]{background:var(--khaki);color:#1B1C19;border-color:var(--khaki);font-weight:700}

/* ---------- фильтры отдела ---------- */
.cu-filters{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}
.cu-filters a{font:600 12.5px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--muted);border:1px solid rgba(214,190,110,.35);padding:8px 12px}
.cu-filters a:hover,.cu-filters a[aria-current]{color:#1B1C19;background:var(--khaki);border-color:var(--khaki)}

/* ---------- полоса-призыв и подвал (по образцу 39) ---------- */
.cu-ready{background:var(--panel);text-align:center;padding:40px 0;border-top:3px solid var(--khaki);margin-top:20px}
.cu-ready .cu-kick{justify-content:center}
.cu-ready h2{margin-bottom:10px}
.cu-ready p{color:var(--muted);max-width:60ch;margin-inline:auto}
.cu-ready-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.cu-foot{background:var(--ink-deep);padding:40px 0 24px}
.cu-foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.3fr;gap:30px}
.cu-foot h4{font-size:15px;letter-spacing:.14em;color:var(--khaki);margin:0 0 10px}
.cu-foot h4+ul+h4{margin-top:18px}
.cu-foot ul{list-style:none;margin:0;padding:0}
.cu-foot li{margin-bottom:7px}
.cu-foot a{color:var(--muted);text-decoration:none;font-size:14.5px}
.cu-foot a:hover{color:var(--khaki)}
.cu-foot-tag{font:700 13px/1.4 var(--display);font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--khaki);margin:10px 0 8px}
.cu-foot-facts{font-size:13.5px;color:var(--muted)}
.cu-foot-facts b{color:var(--text)}
.cu-foot address{font-style:normal;color:var(--muted);font-size:14.5px;line-height:1.7}
.cu-map{margin-top:12px;border:1px solid rgba(214,190,110,.3)}
.cu-map iframe{display:block;width:100%;height:180px;border:0;filter:grayscale(1) contrast(1.05) brightness(.85)}
.cu-foot-end{margin-top:28px;padding-top:16px;border-top:1px solid rgba(214,190,110,.18);color:var(--muted);font-size:13px;display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between}

/* ---------- адаптив ---------- */
@media (max-width:980px){
  .cu-pdp,.cu-story{grid-template-columns:minmax(0,1fr)}
  .cu-story.flip{direction:ltr}
  .cu-foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .cu-top .cu-wrap{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;gap:24px}
  .cu-head-row{flex-wrap:wrap;gap:10px}
  .cu-nav{margin-left:0;width:100%;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .cu-nav a{white-space:nowrap}
  .cu-head-btn{display:none}
  .cu-hero-in{padding:14px 0 12px}
  .cu-facts .cu-wrap{gap:8px 20px}
  .cu-foot-grid{grid-template-columns:minmax(0,1fr)}
  .cu-sec{padding:26px 0 32px}
}
@media (max-width:360px){.cu-shelf > *,.cu-tiles > *{flex-basis:100%}}
