/* ====== Базовое ====== */
section#home__plugins .description {
    margin-bottom: 20px;
}

.top-btn{
  display:none; position:fixed; bottom:20px; right:30px; z-index:99;
  border:none; outline:none; background:#0c0c0d; color:#fff; cursor:pointer;
  padding:10px; border-radius:20px; transition:background-color .15s;
}
.top-btn:hover{ background:#555; }

.icon{ display:block; max-width:100%; height:auto; }

/* ====== Аккордеон (если используется) ====== */
.box{ position:relative; margin-bottom:20px; }
.box:last-child{ margin-bottom:0; }
.box .label{ position:relative; padding:20px; color:#fff; cursor:pointer; }
.box .home__about-list-item-body{ position:relative; overflow:hidden; max-height:0; transition:max-height .3s ease; }

/* ====== Навигация: десктоп ====== */
.nav{ width:100%; height:100%; background-color:var(--black); overflow:hidden; }
@media (min-width:768px){
  .nav{ max-height:none; top:0; position:relative; float:right; width:auto; }
  .menu li{ float:left; }
  .menu a:hover{ background-color:transparent; color:var(grey); }
  .hamb{ display:none; }
}

/* ====== Навигация: мобильная ====== */
.header-inner{ height:5rem; }
.nav__toggle{
  display:inline-block; position:absolute; z-index:10; padding:0; border:0; background:transparent; outline:0;
  right:15px; top:15px; cursor:pointer; border-radius:50%; transition:background-color .15s linear;
}
.nav__toggle:hover,.nav__toggle:focus{ background-color:rgba(243,246,244,.5); }
.nav__menu{
  display:flex; flex-direction:column; left:35px; top:100px; position:relative; z-index:5; visibility:hidden;
}
.nav__item{ opacity:0; transition:all .3s cubic-bezier(0, .995, .99, 1) .3s; }
.nav__item:nth-child(1){ transform:translateY(-40px); }
.nav__item:nth-child(2){ transform:translateY(-80px); }
.nav__item:nth-child(3){ transform:translateY(-120px); }
.nav__item:nth-child(4){ transform:translateY(-160px); }
.nav__item:nth-child(5){ transform:translateY(-200px); }

.nav__link{
  color:#04BAFE; display:block; text-align:center; text-transform:uppercase; letter-spacing:5px;
  font-size:1.25rem; text-decoration:none; padding:1rem;
}
.nav__link:hover,.nav__link:focus{ outline:0; background-color:rgba(0,0,0,.2); }

.menuicon{ display:block; cursor:pointer; color:#04BAFE; transform:rotate(0deg); transition:.3s cubic-bezier(.165,.84,.44,1); }
.menuicon__bar,.menuicon__circle{ fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; }
.menuicon__bar{ transform-origin:50% 50%; transition:transform .25s ease-in-out; }
.menuicon__circle{ transition:stroke-dashoffset .3s linear .1s; stroke-dashoffset:144.513262038; stroke-dasharray:144.513262038; }

.splash{ position:absolute; top:40px; right:40px; width:1px; height:1px; }
.splash::after{
  content:""; display:block; position:absolute; border-radius:50%; background-color:white;
  width:284vmax; height:284vmax; top:-142vmax; left:-142vmax; transform:scale(0);
  transform-origin:50% 50%; transition:transform .5s cubic-bezier(.755,.05,.855,.06); will-change:transform;
}

/* состояние «открыто» (через класс навешивается JS) */
.nav--open .splash::after{ transform:scale(1); }
.nav--open .menuicon{ color:#04BAFE; transform:rotate(180deg); }
.nav--open .menuicon__circle{ stroke-dashoffset:0; }
.nav--open .menuicon__bar:nth-child(1),
.nav--open .menuicon__bar:nth-child(4){ opacity:0; }
.nav--open .menuicon__bar:nth-child(2){ transform:rotate(45deg); }
.nav--open .menuicon__bar:nth-child(3){ transform:rotate(-45deg); }
.nav--open .nav__menu{ visibility:visible; }
.nav--open .nav__item{ opacity:1; transform:translateY(0); }

/* ====== Попап-фон (если используется) ====== */
.color{ background:linear-gradient(to right, #e1e0ff, #d7fadd); }
.popup{ opacity:0; visibility:hidden; height:400px; width:400px; flex-shrink:0; border-radius:3px; position:relative; z-index:3; display:flex; align-items:center; justify-content:center; transition:all .2s ease; }
.popup-inside{ position:absolute; left:0; top:0; height:100%; width:100%; overflow:hidden; border-radius:50%; box-shadow:0 0 0 black; transition: box-shadow .5s ease .7s, border-radius .35s ease .7s; }
.backgrounds{ position:absolute; left:0; top:0; height:100%; width:100%; overflow:hidden; }
.background{ --offset:0; position:absolute; left:var(--offset); right:var(--offset); bottom:var(--offset); top:var(--offset); background:linear-gradient(to right, #504bff, #4cfa63); transform:scale(0); transition:all .5s ease 0s; border-radius:50%; }
.background2{ --offset:10%; background:linear-gradient(to right, #6665ff, #69fa7f); transform:scale(0); transition:all .5s ease .1s; position:absolute; left:var(--offset); right:var(--offset); bottom:var(--offset); top:var(--offset); }
.background3{ --offset:20%; background:linear-gradient(to right, #8583ff, #85fa99); z-index:2; transition:all .5s ease .2s; position:absolute; left:var(--offset); right:var(--offset); bottom:var(--offset); top:var(--offset); }
.background4{ --offset:30%; background:linear-gradient(to right, #aaaaff, #a7fab7); z-index:3; transition:all .5s ease .3s; position:absolute; left:var(--offset); right:var(--offset); bottom:var(--offset); top:var(--offset); }
.background5{ --offset:40%; background:linear-gradient(to right, #c9c8ff, #c3fad1); z-index:4; transition:all .5s ease .4s; position:absolute; left:var(--offset); right:var(--offset); bottom:var(--offset); top:var(--offset); }
.background6{ --offset:40%; background:#fff; z-index:5; transition:all .8s ease .4s; position:absolute; left:var(--offset); right:var(--offset); bottom:var(--offset); top:var(--offset); }
.content-wrapper{ opacity:0; z-index:1; text-align:center; }
body.active .content-wrapper{ opacity:1; z-index:9999; transition:all .9s ease .8s; }
body.active .popup{ opacity:1; visibility:visible; }
body.active .popup-inside{ border-radius:0; box-shadow:-50px 0 200px -50px #504bff, 50px 0 200px -50px #4cfa63; }
body.active .background{ transform:scale(1); }
body.active .background6{ transform:scale(8); }
.formwrapper{ z-index:9999; position:absolute; right:15%; top:100px; }
@media (max-width:768px){
  .formwrapper{ position:absolute; left:0; top:70px; }
}
.sortable-handler{ touch-action:none; }

/* --- Наши плагины --- */
.home__plugins {
    padding: 60px 0;
    background: #f4f4f4;
    margin-top: 60px;
}
.home__plugins .description { margin-top: 8px; }

.plugins-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

/* обновления для карточек */
.plugin-card { padding: 12px; border: 1px solid #ececec; background: #fff; border-radius: 16px; }
.plugin-card__thumb {
    position: relative;
    border: 1px solid #f4f4f4;
    border-radius: 10px;
}
.plugin-card__thumb img { width: 100%; height: 120px; object-fit: cover; border-radius: 12px; display: block; }
.plugin-card__title { display:block; margin-top:10px; font-weight:600; font-size:16px; line-height:1.3; min-height:35px;}

/* шильдик "новинка" */
.plugin-card__badge {
  position: absolute; left: 8px; top: 8px;
  padding: 4px 8px; border-radius: 8px;
  font-size: 12px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg,#39d98a,#0ebf7e);
  text-transform: lowercase; /* как на скрине */
}

/* рейтинг */


/* Рейтинг в карточке — всегда одинаковая высота */
.plugin-card__meta{
  min-height: 22px;  
  line-height: 22px;
  margin-top: 8px;
  display: flex;
  align-items: center;
}

/* Когда рейтинга нет — оставляем место, но визуально скрываем */
.plugin-card__meta--empty{
  visibility: hidden;      /* сохраняет место в потоке */
}

/* (как было ранее) примеры оформления звезд и чисел */
.rating__star { font-size: 14px; line-height: 1; color: #ffb400; margin-right: 2px; }
.rating__value { font-weight: 600; margin-right: 4px; }
.rating__count { color: #666; font-size: 13px; }



/* --- Модалка --- */
.plugins-modal { position: fixed; inset: 0; display: none; z-index: 9999; }
.plugins-modal.is-open { display: block; }
.plugins-modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.plugins-modal__dialog {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 6vh auto;
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 10px 40px rgba(0,0,0,.2);
}
.plugins-modal__close {
  position: absolute;
  top: 10px; right: 12px;
  background: transparent; border: 0;
  font-size: 28px; line-height: 1; cursor: pointer;
}
.plugins-modal__img { width: 100%; height: auto; border-radius: 12px; margin-bottom: 12px; }
.plugins-modal__title { margin: 8px 0 8px; font-size: 22px; }
.plugins-modal__desc { margin: 0 0 14px; color: #333; }
.plugins-modal__buy {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  background: #04BAFE; color: #fff;
}

/* Небольшая адаптивность */
@media (max-width: 480px) {
  .plugin-card img { height: 100px; }
  .plugins-modal__dialog { margin: 10vh 12px; padding: 18px; }
}
/* динамический список плагинов */
.plugins-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
  gap: 16px;
}
.plugin-card {
  appearance: none;
  border: 1px solid #ececec;
  background: #fff;
  border-radius: 16px;
  padding: 12px;
  text-align: left;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.plugin-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.08);
}
.plugin-card img {
  width: 100%; height: 120px; object-fit: cover; border-radius: 12px; display: block;
}
.plugin-card__title { display:block; margin-top:10px; font-weight:600; font-size:16px; line-height:1.3; }

/* модалка */
.plugins-modal[aria-hidden="true"]{display:none}
.plugins-modal{
  position: fixed;
  inset: 0;
  z-index: 999999; /* больше, чем у шапки */
}
.plugins-modal__overlay{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.plugins-modal__dialog{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;               /* важно */
  width: min(720px, 92vw);
  max-height: 90vh;
  overflow: auto;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.plugins-modal__close{
  position:absolute; right:8px; top:8px;
  background:transparent; border:0; font-size:28px; line-height:1; cursor:pointer
}
.plugins-modal__content{display:flex; gap:16px; align-items:flex-start}
.plugins-modal__img{
  width:120px; height:120px; flex:0 0 120px;
  border-radius:12px; object-fit:contain; background:#f6f6f8
}
.plugins-modal__text{flex:1; min-width:0}
.plugins-modal__title{margin:0 0 8px; font-size:20px}
.plugins-modal__desc{margin:0 0 14px; color:#444}
.plugins-modal__actions{display:flex; gap:12px; flex-wrap:wrap}
.plugins-modal__buy,.plugins-modal__ask{
  display:inline-block; padding:10px 14px; border-radius:10px; text-decoration:none
}
.plugins-modal__buy{background:#0d6efd; color:#fff}
.plugins-modal__ask{background:#f3f4f6; color:#111}
@media (max-width:520px){
  .plugins-modal__dialog{
    top: 5%;
    transform: translate(-50%, 0);
    bottom: 5%;
  }
  .plugins-modal__content{flex-direction:column; align-items:center; text-align:center}
  .plugins-modal__img{width:96px; height:96px}
}
/* мобильный snap-слайдер — когда нет Owl */
#plugins-root.plugins-snap {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 12px;            /* должен совпадать с margin между карточками */
  padding-bottom: 8px;
}
#plugins-root.plugins-snap .plugin-card {
  scroll-snap-align: start;
  flex: 0 0 84%;        /* видно «краешек» следующей */
  max-width: 84%;
}

/* обёртка для стрелок */
.plugins-snap-wrap { position: relative; }
.plugins-snap-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: rgba(0,0,0,.4);
  color: #fff;
  width: 32px; height: 32px;
  line-height: 30px;
  text-align: center;
  border-radius: 9999px;
  cursor: pointer;
  z-index: 2;
}
.plugins-snap-prev { left: 6px; }
.plugins-snap-next { right: 6px; }
.plugins-snap-nav[disabled] { opacity: .35; cursor: default; }

/* скрываем стрелки на десктопе */
@media (min-width: 768px) {
  .plugins-snap-nav { display: none !important; }
}

/* фикс: одинаковая высота зоны рейтинга, чтобы карточки не «прыгали» */
.plugin-card__meta { min-height: 22px; display: flex; align-items: center; }
 /* SNAP-слайдер (когда нет Owl) — теперь и на ПК тоже */
#plugins-root.plugins-snap {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 12px;
  padding-bottom: 8px;
}
#plugins-root.plugins-snap .plugin-card {
  scroll-snap-align: start;
  flex: 0 0 84%;
  max-width: 84%;
}
@media (min-width: 768px) {
  #plugins-root.plugins-snap .plugin-card { flex-basis: 48%; max-width: 48%; } /* ~2 */
}
@media (min-width: 1100px) {
  #plugins-root.plugins-snap .plugin-card { flex-basis: 31%; max-width: 31%; } /* ~3 */
}
@media (min-width: 1440px) {
  #plugins-root.plugins-snap .plugin-card { flex-basis: 24%; max-width: 24%; } /* ~4 */
}

/* Обёртка и стрелки для snap */
.plugins-snap-wrap { position: relative; }
.plugins-snap-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: rgba(0,0,0,.4);
  color: #fff;
  width: 36px; height: 36px;
  line-height: 34px;
  text-align: center;
  border-radius: 9999px;
  cursor: pointer;
  z-index: 2;
}
.plugins-snap-prev { left: 6px; }
.plugins-snap-next { right: 6px; }
.plugins-snap-nav[disabled] { opacity: .35; cursor: default; }

/* Фикс высоты зоны рейтинга, чтобы карточки не «прыгали» */
.plugin-card__meta { min-height: 22px; display: flex; align-items: center; }
/* ===== Slider (vanilla) ===== */

/* Обёртка для стрелок */
.plugins-snap-wrap {
  position: relative;
}

/* Корневой контейнер в режиме snap-слайдера */
#plugins-root.plugins-snap {
  display: flex !important;          /* перебиваем возможный grid/блок */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 12px;                          /* как в карточках */
  -webkit-overflow-scrolling: touch;
  padding: 0 48px 12px;               /* под стрелки + нижний отступ */
}

/* Каждая карточка — фиксированной ширины, чтобы не тянулась на всю строку */
#plugins-root.plugins-snap .plugin-card {
  flex: 0 0 clamp(280px, 30vw, 420px);
  scroll-snap-align: start;
}

/* Стрелки */
.plugins-snap-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px; height: 40px;
  border: 0;
  border-radius: 9999px;
  background: rgba(0,0,0,.06);
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  cursor: pointer;
  line-height: 40px;
  font-size: 26px;
}
.plugins-snap-prev { left: 6px;  }
.plugins-snap-next { right: 6px; }
.plugins-snap-nav:disabled { opacity: .35; cursor: default; }

/* Скрыть полосу прокрутки */
#plugins-root.plugins-snap::-webkit-scrollbar { display: none; }

/* Чтоб обложки не «сплющивались» */
.plugin-card__thumb { aspect-ratio: 16 / 9; }
.plugin-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;                  /* обрезаем без искажений */
}

/* Мобилка: показываем ~1 карточку с «прикусом» следующей */
@media (max-width: 767px) {
  #plugins-root.plugins-snap {
    padding: 0 40px 10px;
    gap: 10px;
  }
  #plugins-root.plugins-snap .plugin-card {
    flex-basis: 86%;
  }
}
/* ===== Vanilla slider arrows ===== */
.plugins-snap-wrap { position: relative; }

#plugins-root.plugins-snap {
  display: flex !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 12px;
  -webkit-overflow-scrolling: touch;
  padding: 0 56px 12px;              /* место под стрелки */
}
#plugins-root.plugins-snap::-webkit-scrollbar { display: none; }

.plugins-snap-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 0;
  border-radius: 9999px;
  background: rgba(0,0,0,.06);
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  color: #111; font-size: 26px; line-height: 1; font-weight: 600;
  cursor: pointer;
}
.plugins-snap-prev { left: 8px; }
.plugins-snap-next { right: 8px; }
.plugins-snap-nav:disabled { opacity: .35; cursor: default; }

/* Чтоб обложки не искажались */
.plugin-card__thumb { aspect-ratio: 16/9; }
.plugin-card__thumb img { width:100%; height:100%; object-fit:cover; }

/* ===== Owl Carousel arrows (если Owl подключён) ===== */
.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px;
  display:flex !important; align-items:center; justify-content:center;
  border-radius:9999px; background:rgba(0,0,0,.06);
  color:#111; font-size:26px; line-height:1; font-weight:600;
}
.owl-carousel .owl-nav .owl-prev{ left:8px; }
.owl-carousel .owl-nav .owl-next{ right:8px; }
/* ===== Обёртка и стрелки (универсально) ===== */
.plugins-snap-wrap { position: relative; width: 100%; }

#plugins-root.plugins-snap{
  display: flex !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 12px;
  -webkit-overflow-scrolling: touch;
  padding: 0 56px 12px;              /* место под стрелки по краям */
}
#plugins-root.plugins-snap::-webkit-scrollbar { display: none; }

.plugins-snap-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;                       /* поверх всего */
  width: 40px; height: 40px;
  display: flex !important;          /* принудительно показываем */
  align-items: center; justify-content: center;
  border: 0; border-radius: 9999px;
  background: rgba(0,0,0,.06);
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  color: #111; font-size: 26px; font-weight: 600; line-height: 1;
  cursor: pointer;
}
.plugins-snap-prev{ left: 8px; }
.plugins-snap-next{ right: 8px; }
.plugins-snap-nav:disabled{ opacity: .35; cursor: default; }

/* Картинки — без искажений */
.plugin-card__thumb{ aspect-ratio: 16/9; }
.plugin-card__thumb img{ width:100%; height:100%; object-fit: cover; }

/* ===== Owl Carousel, если он подключён ===== */
.owl-carousel .owl-nav{ 
  position: absolute; inset: 0; top: 50%; transform: translateY(-50%);
  display: block !important; pointer-events: none; 
}
.owl-carousel .owl-nav button{
  pointer-events: all;
  width: 40px; height: 40px;
  display: flex !important; align-items:center; justify-content:center;
  position: absolute; z-index: 30;
  border-radius: 9999px; background: rgba(0,0,0,.06);
  color:#111; font-size:26px; font-weight:600; line-height:1;
}
.owl-carousel .owl-nav .owl-prev{ left: 8px; }
.owl-carousel .owl-nav .owl-next{ right: 8px; }
/* ===== стрелки/обёртка — как раньше ===== */
.plugins-snap-wrap { position: relative; width: 100%; }

#plugins-root.plugins-snap{
  display: flex !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 12px;
  -webkit-overflow-scrolling: touch;
  padding: 0 56px 12px;         /* место под стрелки */
}
#plugins-root.plugins-snap::-webkit-scrollbar{ display:none; }

.plugins-snap-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:30; width:40px; height:40px;
  display:flex !important; align-items:center; justify-content:center;
  border:0; border-radius:9999px; background:rgba(0,0,0,.06);
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  color:#111; font-size:26px; font-weight:600; line-height:1; cursor:pointer;
}
.plugins-snap-prev{ left:8px; }
.plugins-snap-next{ right:8px; }
.plugins-snap-nav:disabled{ opacity:.35; cursor:default; }

/* ===== точки для vanilla-слайдера ===== */
.plugins-snap-dots{
  display:flex; gap:8px; justify-content:center; margin:10px 0 0;
}
.plugins-snap-dot{
  width:8px; height:8px; border-radius:9999px; border:0; padding:0;
  background:#cfd4da; cursor:pointer;
}
.plugins-snap-dot.is-active{ background:#111; transform:scale(1.2); }

/* ===== картинки: без искажений ===== */
.plugin-card__thumb{ aspect-ratio:16/9; }
.plugin-card__thumb img{ width:100%; height:100%; object-fit:cover; }

/* ===== Owl: показываем его стрелки и точки красиво ===== */
.owl-carousel .owl-nav{
  position:absolute; inset:0; top:50%; transform:translateY(-50%);
  display:block !important; pointer-events:none;
}
.owl-carousel .owl-nav button{
  pointer-events:all; width:40px; height:40px; display:flex !important;
  align-items:center; justify-content:center; position:absolute; z-index:30;
  border-radius:9999px; background:rgba(0,0,0,.06); color:#111; font-size:26px; font-weight:600;
}
.owl-carousel .owl-nav .owl-prev{ left:8px; }
.owl-carousel .owl-nav .owl-next{ right:8px; }

.owl-carousel .owl-dots{
  display:flex !important; gap:8px; justify-content:center; margin:10px 0 0;
}
.owl-carousel .owl-dot span{
  width:8px; height:8px; display:block; border-radius:9999px; background:#cfd4da;
}
.owl-carousel .owl-dot.active span{ background:#111; transform:scale(1.2); }
