/* Карточка товара v8 (18.10.2026) — «цвет обложки»: каждая карточка подкрашена размытыми цветами своей игры.
   Разметка .card4-* прежняя (главная, категории, поиск, избранное, похожие). Переменную --cover
   ставит блок «Цвет карточки из обложки» в конце assets/js/script.js (лениво, когда карточка рядом с экраном).
   БЭКАПЫ (вернуть — скопировать файл поверх этого):
     card4-v1.css — исходная; card4-v2.css — стеклянная; card4-v3.css — «витрина» как в Steam. */

.grid4{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;}

.card4{
  position:relative;display:flex;flex-direction:column;min-width:0;padding:8px;isolation:isolate;overflow:hidden;
  background:#15141F;border:1px solid rgba(255,255,255,.08);border-radius:22px;
  box-shadow:0 18px 40px -26px rgba(0,0,0,.9);
  transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s ease,box-shadow .35s ease;
}
/* Размытая обложка — фон всей карточки */
.card4::before{
  content:"";position:absolute;inset:-30%;z-index:-2;pointer-events:none;
  background:var(--cover,none) center/cover no-repeat;
  filter:blur(38px) saturate(1.9) brightness(.62);opacity:0;transform:scale(1.05);
  transition:opacity .6s ease,filter .4s ease;
}
.card4.has-cover::before{opacity:1;}
/* Затемнение снизу — чтобы текст читался на любой обложке */
.card4::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,11,20,.05) 0%,rgba(12,11,20,.35) 55%,rgba(12,11,20,.6) 100%);
}
.card4:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.22);box-shadow:0 30px 56px -26px rgba(0,0,0,.95);}
.card4:hover::before{filter:blur(38px) saturate(2.1) brightness(.78);}

/* Обложка */
.card4-image-wrap{position:relative;border-radius:15px;overflow:hidden;background:rgba(255,255,255,.05);
  box-shadow:0 12px 26px -14px rgba(0,0,0,.85);}
.card4-media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;}
.card4-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.22,1,.36,1);}
.card4:hover .card4-media img{transform:scale(1.06);}

.card4-badge{
  position:absolute;top:10px;left:10px;z-index:2;
  font-size:10.5px;font-weight:700;padding:5px 10px;border-radius:999px;
  background:rgba(10,10,18,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}

/* Текст */
.card4-body{display:flex;flex-direction:column;flex:1;min-width:0;padding:12px 6px 4px;}
.card4-body > a{color:inherit;text-decoration:none;}
.card4-title{margin:0 0 7px;font-size:15px;font-weight:800;line-height:1.3;letter-spacing:-.01em;text-align:left;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 8px rgba(0,0,0,.35);}
/* «Способ · платформа» — плашками */
.card4-meta{display:flex;gap:5px;margin:0 0 12px;overflow:hidden;white-space:nowrap;}
.card4-meta > span:not(.card4-meta-sep),.card4-meta > a{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  padding:3px 8px;border-radius:7px;background:rgba(255,255,255,.12);color:rgba(255,255,255,.88);
  font-size:11px;font-weight:700;text-decoration:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.card4-meta-sep{display:none;}

/* Цена */
.card4-price-group{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin:auto 0 12px;}
.card4-price{font-size:24px;font-weight:900;letter-spacing:-.03em;line-height:1;color:#fff;white-space:nowrap;text-shadow:0 2px 12px rgba(0,0,0,.35);}
.card4-price-old{font-size:13px;color:rgba(255,255,255,.55);text-decoration:line-through;white-space:nowrap;}
/* Скидка — плашкой рядом с ценой */
.card4-discount-inline{
  align-self:center;padding:4px 7px;border-radius:7px;background:linear-gradient(135deg,#FF4D6D,#FF8A4C);
  color:#fff;font-size:12px;font-weight:900;line-height:1;letter-spacing:-.01em;box-shadow:0 6px 14px -6px rgba(255,77,109,.7);
}
/* Длинная зачёркнутая цена (5+ цифр, класс ставит script.js): всё в одну строку, мельче, порядок цена → скидка → старая */
.card4-price-group.is-long{flex-wrap:nowrap;gap:6px;min-width:0}
.card4-price-group.is-long .card4-price{order:0;font-size:20px}
.card4-price-group.is-long .card4-discount-inline{order:1;font-size:10.5px;padding:3px 5px}
.card4-price-group.is-long .card4-price-old{order:2;font-size:11px;min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){
  .card4-price-group.is-long .card4-price{font-size:16px}
  .card4-price-group.is-long .card4-price-old{font-size:10px}
}
/* Кнопки: «Купить» в цвет сайта (при наведении — розово-фиолетовая), справа «В избранное» того же скругления */
.card4-actions-row{display:flex;align-items:center;gap:8px;}
.card4-buy-btn{
  position:relative;flex:1;min-width:0;height:42px;padding:0 10px;overflow:hidden;border:0;border-radius:13px;cursor:pointer;z-index:0;
  background:linear-gradient(135deg,#8B7BFF,#6A57F5);color:#fff;font:inherit;font-size:14px;font-weight:800;
  box-shadow:0 10px 24px -12px rgba(126,108,255,.95);transition:transform .2s ease;
}
.card4-buy-btn::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,#FF6B9E,#A66BFF 55%,#7E6CFF);
  opacity:0;transition:opacity .3s ease;}
.card4:hover .card4-buy-btn::before{opacity:1;}
.card4-buy-btn:active{transform:scale(.97);}
.card4-cart-btn{display:none;}  /* корзина на сайте убрана */
.card4-fav-btn{
  width:42px;height:42px;flex:0 0 42px;border-radius:13px;cursor:pointer;font-size:16px;line-height:1;
  background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.16);color:#fff;
  transition:color .2s,background .2s,border-color .2s,transform .3s cubic-bezier(.34,1.56,.64,1);
}
.card4-fav-btn:hover{color:#FF6B9E;border-color:rgba(255,107,158,.7);}
.card4-fav-btn.is-active{background:#FF6B9E;border-color:#FF6B9E;color:#fff;}
.card4-fav-btn.is-pop{animation:favPop .4s cubic-bezier(.34,1.56,.64,1);}
@media(max-width:1200px){
  .grid4{grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media(max-width:900px){
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .card4{padding:6px;border-radius:18px;}
  .card4-image-wrap{border-radius:13px;}
  .card4-body{padding:9px 4px 2px;}
  .card4-title{font-size:13.5px;margin-bottom:6px;}
  .card4-meta{margin-bottom:9px;gap:4px;}
  .card4-meta > span:not(.card4-meta-sep),.card4-meta > a{font-size:10px;padding:2px 6px;}
  .card4-meta > span:last-child:not(:first-child){display:none;}  /* на телефоне — только способ выдачи, иначе обе плашки обрезаются */
  .card4-price{font-size:19px;}
  .card4-price-old{font-size:11.5px;}
  .card4-price-group{margin-bottom:9px;}
  .card4-discount-inline{font-size:10.5px;padding:3px 5px;}
  .card4-fav-btn{width:38px;height:38px;flex-basis:38px;border-radius:11px;font-size:14px;}
  .card4-buy-btn{height:38px;font-size:13.5px;border-radius:11px;}
}
@media(hover:none){
  .card4:hover{transform:none;}
}
@media(prefers-reduced-motion:reduce){
  .card4,.card4::before,.card4-media img{transition:none;}
}