/* ОКСИКОКУС — общая стилистика магазина */
:root{
  --bg:#0c070a;--bg2:#160c13;--panel:rgba(26,10,16,.72);--panel2:rgba(18,8,13,.9);
  --accent:#ff2438;--accent-rgb:255 36 56;--red:#ff2438;--red2:#ff5e3a;--cy:#28d8e8;--grn:#4dff88;
  --danger:#ff405a;--danger-rgb:255 64 90;--success:#35e778;--success-rgb:53 231 120;
  --txt:#f2e8ea;--dim:#93707a;--dim2:#6d545c;
  --line:rgb(var(--accent-rgb)/.28);--line2:rgb(var(--accent-rgb)/.14);
  --hdr:58px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{background:transparent;color:var(--txt);font-family:'Play',sans-serif;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
/* живой фон сайта — canvas за всем контентом (assets/bg.js) */
#bgfx{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:block}
.ru{font-family:'Russo One',sans-serif}
.mono{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums lining-nums}
img{max-width:100%;display:block}
a{color:inherit}
.num,.price,.stat-val{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums lining-nums}

/* заглушка под шапку держит её высоту до подстановки скриптом —
   иначе при вставке контент прыгает вниз (сдвиг макета) */
#siteHeader{display:block;height:var(--hdr)}

/* ---------- шапка ---------- */
/* три колонки с равными боками: при flex-раскладке меню вставало по центру
   между логотипом и иконками, а не по центру страницы — визуально со сдвигом */
header.site{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;padding:0 28px;height:var(--hdr);
  border-bottom:1px solid var(--line2);background:rgba(10,5,8,.82);backdrop-filter:blur(10px);position:sticky;top:0;z-index:60}
.logo{grid-column:1;display:flex;align-items:center;gap:9px;text-decoration:none;color:#fff;flex:none}
.logo__image{display:block;width:auto;height:38px;object-fit:contain}
.logo .mark{width:20px;height:20px;border:2px solid var(--red);border-radius:50%;position:relative}
.logo .mark::after{content:'';position:absolute;inset:4px;background:var(--red);border-radius:50%}
.logo b{font-family:'Russo One',sans-serif;font-size:16px;letter-spacing:.08em}
header.site nav{grid-column:2;display:flex;gap:30px;justify-self:center}
header.site nav a{color:var(--dim);text-decoration:none;font-size:13px;letter-spacing:.14em;text-transform:uppercase;transition:.2s;white-space:nowrap}
header.site nav a.on,header.site nav a:hover{color:#fff;text-shadow:0 0 12px rgb(var(--accent-rgb)/.8)}
/* колонку задаём явно: на мобильном меню скрыто, и без этого иконки уезжали в центр */
.h-ic{grid-column:3;display:flex;gap:18px;align-items:center;justify-self:end;color:var(--dim);font-size:15px}
.h-ic a{color:var(--dim);text-decoration:none;position:relative;transition:.2s}
.h-ic a:hover{color:var(--red)}
.h-ic .badge{position:absolute;top:-7px;right:-9px;background:var(--red);color:#fff;font-family:'IBM Plex Mono',monospace;
  font-size:9px;border-radius:50%;width:15px;height:15px;display:grid;place-items:center}
.burger{display:none;background:none;border:0;color:var(--txt);font-size:20px;cursor:pointer}
.cart-icon-link{width:36px;height:36px;display:inline-grid;place-items:center;position:relative;flex:0 0 36px;
  padding:0;border:1px solid var(--line2);background:rgba(255,255,255,.015);color:var(--dim);text-decoration:none;
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);transition:.2s}
.cart-icon-link:hover,.cart-icon-link:focus-visible{border-color:var(--red);background:rgb(var(--accent-rgb)/.08);color:#fff}
.cart-icon{width:18px;height:18px;display:block;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.45;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.cart-icon-count{position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;padding:0 3px;place-items:center;
  border:1px solid rgba(0,0,0,.45);background:var(--red);color:#fff;font-family:'IBM Plex Mono',monospace;
  font-size:8px;line-height:1;font-variant-numeric:tabular-nums}

/* ---------- типовые блоки ---------- */
.wrapc{max-width:1500px;margin:0 auto;padding:0 34px}
section.blk{padding:70px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:30px;flex-wrap:wrap}
.sec-head h2{font-family:'Russo One',sans-serif;font-size:clamp(21px,2.3vw,32px);letter-spacing:.04em;text-transform:uppercase}
.sec-head h2 i{font-style:normal;color:var(--red)}
.sec-head p{color:var(--dim);font-size:14px;max-width:560px;line-height:1.6;margin-top:8px}
.sec-head .more{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cy);text-decoration:none;border-bottom:1px solid rgb(var(--accent-rgb)/.35);padding-bottom:3px}
.sec-head .more:hover{color:#fff;border-color:#fff}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.3em;color:var(--red);text-transform:uppercase;margin-bottom:12px}

/* ---------- кнопки ---------- */
.btn{display:inline-block;font-family:'Play',sans-serif;font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;text-align:center;padding:14px 26px;border:1px solid var(--line);color:var(--txt);background:none;cursor:pointer;transition:.2s}
.btn:hover{border-color:var(--red);color:#fff}
.btn.fill{background:var(--red);border-color:var(--red);color:#fff}
.btn.fill:hover{background:var(--red2);box-shadow:0 0 24px rgb(var(--accent-rgb)/.45)}
.btn.cy{border-color:rgb(var(--accent-rgb)/.5);color:var(--cy)}
.btn.cy:hover{background:rgb(var(--accent-rgb)/.1);color:#fff}
.btn.wide{width:100%}
.btn:disabled{opacity:.4;cursor:default}

/* ---------- карточка товара ---------- */
/* На витрине держим предсказуемую товарную сетку: четыре карточки на широком
   экране и три на среднем. Карточки не растягиваются при короткой выборке. */
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media(max-width:1180px){.pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
/* лента с пролистыванием: тот же набор карточек в одну строку, режим включается
   в «Редакторе» для хитов и любой добавленной карусели */
.pgrid.slide,.stack-grid.slide{display:flex;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;gap:16px;padding-bottom:12px;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:rgb(var(--accent-rgb)/.55) rgba(255,255,255,.06)}
/* Карточек мало — растягиваем их на всю строку, много — остаются своей ширины
   и лента прокручивается: свободного места в переполненной строке нет, и расти
   уже некуда. Так лента из трёх карточек не выглядит обрезанной. */
.pgrid.slide>*,.stack-grid.slide>*{flex:1 0 244px;scroll-snap-align:start}
.stack-grid.slide>*{flex-basis:330px}
.pgrid.slide::-webkit-scrollbar,.stack-grid.slide::-webkit-scrollbar{height:6px}
.pgrid.slide::-webkit-scrollbar-track,.stack-grid.slide::-webkit-scrollbar-track{background:rgba(255,255,255,.06)}
.pgrid.slide::-webkit-scrollbar-thumb,.stack-grid.slide::-webkit-scrollbar-thumb{background:rgb(var(--accent-rgb)/.55)}
@media (max-width:760px){
  .pgrid.slide>*{flex-basis:72%}
  .stack-grid.slide>*{flex-basis:84%}
}
.pcard{background:var(--panel);border:1px solid var(--line2);display:flex;flex-direction:column;position:relative;
  transition:.2s;text-decoration:none;color:var(--txt);clip-path:polygon(16px 0,100% 0,100% 100%,0 100%,0 16px)}
/* Подъём карточки компенсируем пустотой снизу и отрицательным отступом: иначе
   карточка уезжает из-под курсора у самой кромки и hover начинает мигать. */
.pcard:hover{border-color:var(--red);transform:translateY(-4px);box-shadow:0 16px 36px rgb(var(--accent-rgb)/.16);
  padding-bottom:4px;margin-bottom:-4px}
.pcard .ph{position:relative;aspect-ratio:1;background:radial-gradient(ellipse 60% 60% at 50% 55%,#22101a,#0c0609 74%);overflow:hidden;display:grid;place-items:center}
/* фото банки идёт со своей тёмной подложкой — гасим её подмешиванием и растушёвкой краёв */
.pcard .ph img{width:88%;transition:.3s;mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(ellipse 62% 62% at 50% 50%,#000 58%,transparent 92%);
  mask-image:radial-gradient(ellipse 62% 62% at 50% 50%,#000 58%,transparent 92%)}
/* ---------- плашка о куки ---------- */
.ckbar{position:fixed;left:16px;right:16px;bottom:16px;z-index:120;display:flex;gap:20px;align-items:center;
  flex-wrap:wrap;justify-content:space-between;max-width:1120px;margin:0 auto;
  background:rgba(14,7,11,.96);border:1px solid var(--line);padding:18px 22px;backdrop-filter:blur(6px);
  clip-path:polygon(16px 0,100% 0,100% 100%,0 100%,0 16px);
  transform:translateY(18px);opacity:0;transition:.28s ease}
.ckbar.on{transform:none;opacity:1}
.ckbar__t{font-size:12.5px;color:var(--dim);line-height:1.65;flex:1;min-width:260px}
.ckbar__t a{color:var(--cy)}
.ckbar__b{display:flex;gap:10px;flex-wrap:wrap}
.ckbar button{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:11px 18px;border:1px solid var(--line);background:none;color:var(--dim);cursor:pointer;transition:.15s}
.ckbar button:hover{color:#fff;border-color:var(--red)}
.ckbar button.ok{background:var(--red);border-color:var(--red);color:#fff}
.ckbar button.ok:hover{background:var(--red2)}
@media(max-width:640px){
  .ckbar{left:10px;right:10px;bottom:10px;padding:16px}
  .ckbar__b{width:100%}
  .ckbar button{flex:1}
}

/* загруженное фото показываем как есть: подмешивание рассчитано на тёмный рендер банки */
img.own{mix-blend-mode:normal!important;-webkit-mask-image:none!important;mask-image:none!important}
/* Товар всегда виден целиком. Кадр занимает всю доступную рамку, но contain не
   отрезает этикетку, крышку или края упаковки у вертикальных и широких фото. */
.pcard .ph img.own,
.mini .th img.own,
.crow .thumb img.own{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center}
/* В карточке сканера и быстром просмотре высота зависит от соседнего текста:
   ограничиваем обе оси и сохраняем исходные пропорции без квадратной обрезки. */
.pc img.own,
.qv-ph img.own{width:100%;height:auto;max-width:100%;max-height:min(62vh,520px);aspect-ratio:auto;object-fit:contain;object-position:center}
.pcard:hover .ph img{transform:none}
.pcard .tag{position:absolute;top:10px;left:10px;font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.14em;
  padding:4px 8px;background:var(--cy);color:#0b0507;z-index:2}
.pcard .tag.hot{background:var(--red);color:#fff}
.pcard .tag.sale{background:var(--grn);color:#062012}
.pcard .body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.pcard .sys{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.16em;color:var(--red2);text-transform:uppercase}
.pcard h3{font-size:14.5px;font-weight:700;letter-spacing:.03em;line-height:1.3}
.pcard .eff{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--grn);letter-spacing:.04em}
.pcard .desc{font-size:12px;color:var(--dim);line-height:1.5}
.pcard .row{margin-top:auto;padding-top:12px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.pcard .price{font-size:17px;font-weight:700;color:#fff}
.pcard .price s{font-size:12px;color:var(--dim2);margin-left:6px;font-weight:400}
.pcard .addbox{display:flex;align-items:center;flex:none;height:38px;border:1px solid var(--line);transition:.15s}
.pcard .addbox.has{border-color:var(--grn);background:rgba(77,255,136,.08)}
.pcard .addbox button{width:36px;height:36px;flex:none;display:grid;place-items:center;border:0;background:none;
  color:var(--red);cursor:pointer;font-size:19px;line-height:1;transition:.15s;padding:0}
.pcard .addbox.has button{color:var(--grn)}
.pcard .addbox button:hover{background:var(--red);color:#fff}
.pcard .addbox.has button:hover{background:var(--grn);color:#062012}
.pcard .addbox .qn{min-width:22px;text-align:center;font-family:'IBM Plex Mono',monospace;font-size:14px;color:var(--grn);
  font-variant-numeric:tabular-nums lining-nums}
.pcard .add.ok{background:var(--grn);color:#062012}
[hidden]{display:none!important}

/* ---------- сетка преимуществ ---------- */
.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.feat{border:1px solid var(--line2);background:var(--panel);padding:24px;clip-path:polygon(18px 0,100% 0,100% 100%,0 100%,0 18px)}
.feat .ic{font-size:22px;margin-bottom:12px;display:block}
.feat h3{font-size:15px;font-weight:700;margin-bottom:8px;letter-spacing:.03em}
.feat p{font-size:13px;color:var(--dim);line-height:1.6}

/* ---------- подвал ---------- */
footer.site{border-top:1px solid var(--line2);background:linear-gradient(180deg,rgba(18,8,13,.95),rgba(8,4,6,.99));margin-top:40px}
footer.site .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:36px;padding:52px 0 34px}
footer.site h4{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.24em;color:var(--red);text-transform:uppercase;margin-bottom:16px}
footer.site ul{list-style:none;display:flex;flex-direction:column;gap:9px}
footer.site a{color:var(--dim);text-decoration:none;font-size:13px;transition:.15s}
footer.site a:hover{color:#fff}
footer.site p{font-size:12.5px;color:var(--dim);line-height:1.7}
footer.site .req{font-size:11.5px;color:var(--dim2);line-height:1.75}
footer.site .bottom{border-top:1px solid var(--line2);padding:18px 0 26px;display:flex;justify-content:space-between;
  gap:20px;flex-wrap:wrap;font-size:11.5px;color:var(--dim2)}
footer.site .bottom .dev{color:var(--dim)}
footer.site .bottom .dev b{color:var(--txt)}
footer.site .credit{font-size:10.5px;color:var(--dim2);line-height:1.6;max-width:640px}
.pay-ic{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.pay-ic span{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.1em;border:1px solid var(--line2);
  padding:5px 9px;color:var(--dim)}

/* ---------- хлебные крошки ---------- */
.crumbs{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.16em;color:var(--dim2);
  text-transform:uppercase;padding:22px 0 6px}
.crumbs a{color:var(--dim);text-decoration:none}
.crumbs a:hover{color:var(--red)}
.crumbs b{color:var(--txt);font-weight:400}
.crumb-back{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--txt);background:none;
  border:1px solid var(--line2);padding:5px 12px;margin-right:16px;cursor:pointer;transition:.15s;
  vertical-align:middle;line-height:1}
.crumb-back:hover{border-color:var(--red);color:var(--red)}

/* ---------- заголовок страницы ---------- */
.phead{padding:16px 0 30px;border-bottom:1px solid var(--line2);margin-bottom:34px}
.phead h1{font-family:'Russo One',sans-serif;font-size:clamp(26px,3.4vw,44px);letter-spacing:.03em;text-transform:uppercase}
.phead h1 i{font-style:normal;color:var(--red)}
.phead p{color:var(--dim);font-size:14px;line-height:1.65;max-width:720px;margin-top:12px}

/* ---------- формы ---------- */
.fld{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.fld label{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.18em;color:var(--dim);text-transform:uppercase}
.fld input,.fld textarea,.fld select{background:rgba(10,5,8,.7);border:1px solid var(--line2);color:var(--txt);
  padding:13px 14px;font-family:'Play',sans-serif;font-size:14px;outline:none;transition:.15s;border-radius:0}
.fld input:focus,.fld textarea:focus,.fld select:focus{border-color:var(--red)}
.fld small{font-size:11px;color:var(--dim2)}
.radio-row{display:flex;flex-direction:column;gap:10px}
.radio{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--line2);padding:14px 16px;cursor:pointer;transition:.15s;background:rgba(10,5,8,.45)}
.radio:hover{border-color:var(--line)}
.radio.on{border-color:var(--red);background:rgb(var(--accent-rgb)/.07)}
.radio input{margin-top:3px;accent-color:var(--red)}
.radio .t{font-size:14px;font-weight:700}
.radio .s{font-size:12px;color:var(--dim);margin-top:4px;line-height:1.5}
.radio .p{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:13px;white-space:nowrap}

/* ---------- уведомление о корзине ---------- */
.toast{position:fixed;right:24px;bottom:24px;background:rgba(12,6,9,.95);border:1px solid var(--grn);
  color:var(--txt);padding:14px 20px;font-size:13px;z-index:200;opacity:0;transform:translateY(14px);
  transition:.28s;pointer-events:none;box-shadow:0 12px 34px rgba(0,0,0,.5)}
.toast.on{opacity:1;transform:translateY(0)}
.toast b{color:var(--grn)}
/* предупреждение: заказ урезали или товара не хватило */
.toast.warn{border-color:var(--danger)}
.toast.warn b{color:var(--danger)}

/* фото товара идёт со своей тёмной подложкой — гасим её везде, где показываем банку */
img[src$="jar-dark.png"],img[src$="jar-white.png"]{mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(ellipse 62% 62% at 50% 50%,#000 56%,transparent 93%);
  mask-image:radial-gradient(ellipse 62% 62% at 50% 50%,#000 56%,transparent 93%)}

/* мобильное меню */
.mobnav{display:none;position:sticky;top:var(--hdr);z-index:59;background:rgba(10,5,8,.97);
  border-bottom:1px solid var(--line2);backdrop-filter:blur(10px);flex-direction:column}
.mobnav a{padding:15px 24px;text-decoration:none;color:var(--dim);font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;border-bottom:1px solid var(--line2)}
.mobnav a.on,.mobnav a:active{color:#fff}
.mobnav.on{display:flex}

@media(max-width:1100px){
  header.site nav{display:none}
  .burger{display:block}
  footer.site .cols{grid-template-columns:1fr 1fr;gap:28px}
}
@media(max-width:640px){
  .wrapc{padding:0 18px}
  section.blk{padding:44px 0}
  footer.site .cols{grid-template-columns:1fr}
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
/* На телефоне размытие подложки идёт поверх фиксированного canvas-фона —
   iOS Safari перерисовывает его на каждом кадре прокрутки и экран дёргается.
   Вместо blur даём плотный фон: визуально то же, а скролл ровный. */
@media(max-width:1024px){
  header.site{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(10,5,8,.97)}
  .mobnav{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(10,5,8,.99)}
}

/* ---------- мессенджеры в подвале ----------
   Каналы и ссылки задаются в админке, в разделе «Контакты и реквизиты».
   Выключенный канал не попадает на витрину вовсе — разметки для него нет. */
.fchats{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.fchats__i{display:inline-flex;align-items:center;gap:8px;text-decoration:none;padding:8px 12px;
  border:1px solid var(--line2);color:var(--dim);transition:.15s ease;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)}
.fchats__i span{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.fchats__i svg{width:16px;height:16px;flex:none}
.fchats__i:hover{border-color:var(--red);color:#fff}

/* ---------- рекламный баннер из админки ---------- */
.adbnr{display:block;border:1px solid var(--line2);overflow:hidden;text-decoration:none;
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px)}
.adbnr img{display:block;width:100%;height:auto}
a.adbnr{transition:.2s}
a.adbnr:hover{border-color:var(--red)}
/* Квадрат и вертикаль — компактные плашки по центру, а не полоса во всю страницу:
   картинка 3:4, растянутая на 1400 px, уходит на два экрана вниз. Кадр в этих
   пропорциях подрезается, поэтому в панели сказано подбирать размер под макет. */
.adbnr--s,.adbnr--v{margin:0 auto}
.adbnr--s{max-width:min(100%,640px);aspect-ratio:1}
.adbnr--v{max-width:min(100%,480px);aspect-ratio:3/4}
.adbnr--s img,.adbnr--v img,.adbnr--s picture,.adbnr--v picture{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- карусель с авто-перелистыванием ---------- */
/* Слайды лежат лентой в одну строку и сдвигаются трансформом: так переключение
   идёт на видеокарте и не дёргается на телефоне. Высоту задаёт первый слайд —
   поэтому картинки просим одного размера (сказано в подсказке к блоку). */
.hsl{position:relative;overflow:hidden;border:1px solid var(--line2);
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px)}
.hsl__tr{display:flex;transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.hsl__s{flex:0 0 100%;position:relative;display:block;text-decoration:none;color:inherit}
.hsl__s img{display:block;width:100%;height:auto}
/* та же пропорция, что у баннера: во всю ширину, квадратом или вертикально */
.hsl--s,.hsl--v{margin:0 auto}
.hsl--s{max-width:min(100%,640px)}
.hsl--v{max-width:min(100%,480px)}
.hsl--s .hsl__s{aspect-ratio:1}
.hsl--v .hsl__s{aspect-ratio:3/4}
.hsl--s .hsl__s img,.hsl--v .hsl__s img,
.hsl--s .hsl__s picture,.hsl--v .hsl__s picture{width:100%;height:100%;object-fit:cover}
.hsl__cap{position:absolute;left:0;right:0;bottom:0;padding:34px 26px 20px;font-family:'Play',sans-serif;
  font-size:clamp(14px,1.6vw,18px);line-height:1.4;color:#fff;
  background:linear-gradient(to top,rgba(6,3,5,.86),transparent)}
.hsl__arw{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:38px;height:54px;padding:0;
  background:rgba(10,5,8,.72);border:1px solid var(--line2);color:var(--txt);font-size:17px;cursor:pointer;transition:.15s}
.hsl__arw:hover{border-color:var(--red);color:#fff;background:rgb(var(--accent-rgb)/.12)}
.hsl__arw.l{left:14px}
.hsl__arw.r{right:14px}
.hsl__dots{position:absolute;left:0;right:0;bottom:14px;z-index:3;display:flex;justify-content:center;gap:8px}
.hsl__dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.28);
  cursor:pointer;transition:.2s}
.hsl__dots button.on{background:var(--red);transform:scale(1.35)}
@media(max-width:760px){
  .hsl__arw{width:30px;height:44px;font-size:15px}
  .hsl__arw.l{left:8px}
  .hsl__arw.r{right:8px}
  .hsl__cap{padding:26px 16px 16px}
}

/* OXYCOCCUS ICON SYSTEM 02.6 — резкие углы, единая толщина и текущий акцент. */
.oxy-icon{width:1em;height:1em;display:inline-block;flex:none;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:square;stroke-linejoin:miter;vertical-align:-.14em}
.oxy-dir-icon{width:100%;height:100%;display:block;object-fit:contain}
button>.oxy-icon:only-child{margin:auto}

/* ---------- плашки категорий из админки ---------- */
/* auto-fit, а не auto-fill: пустые колонки схлопываются, и две плашки занимают строку
   целиком, а не жмутся в левый угол куском на четверть экрана. Сколько плашек выбрали
   в панели, столько и растянется на всю ширину раздела. */
.catg{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.catg__i{display:flex;flex-direction:column;gap:6px;padding:22px 20px;border:1px solid var(--line2);
  background:var(--panel);text-decoration:none;color:var(--txt);transition:.2s;
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)}
.catg__i:hover{border-color:var(--red);transform:translateY(-4px);box-shadow:0 14px 30px rgb(var(--accent-rgb)/.15)}
.catg__i b{font-size:15px;font-weight:700;letter-spacing:.03em}
.catg__i i{font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;
  color:var(--dim);font-variant-numeric:tabular-nums lining-nums}
/* Плашка с фотографией: картинка прижата к краям, подписи ложатся под неё.
   Отступы у такой плашки снимаем — иначе кадр висел бы в рамке из фона. */
.catg__i.has-ph{padding:0;gap:0}
.catg__t{display:flex;flex-direction:column;gap:6px}
.catg__i.has-ph .catg__t{padding:14px 18px 18px}
/* На широкой плашке 4:3 вырастает в полэкрана высотой, поэтому кадр упирается в
   потолок и дальше просто подрезается — пропорция остаётся у узких плашек. */
.catg__ph{display:block;aspect-ratio:4/3;max-height:340px;overflow:hidden;background:var(--bg)}
.catg__ph img{display:block;width:100%;height:100%;object-fit:cover;transition:.35s cubic-bezier(.22,.61,.36,1)}
.catg__i.has-ph:hover .catg__ph img{transform:scale(1.06)}
.catg.slide{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  gap:14px;padding-bottom:10px}
.catg.slide>*{flex:1 0 226px;scroll-snap-align:start}
@media(max-width:760px){
  .catg{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
  .catg__i{padding:16px 14px}
  .catg.slide>*{flex-basis:64%}
}