/* --- Mobile fixes for promos --- */
#promos{overflow-x:hidden}

/* Клиенто-ориентированные карточки акций */
#promos .promo.card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:24px;
  background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  transition:transform 0.2s ease, box-shadow 0.2s ease;
  margin-bottom:18px;
}
#promos .promo.card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(0,0,0,.12);
}

#promos .promo-image-wrap{
  position:relative;
  overflow:hidden;
  width:100%;
  aspect-ratio:16/9;
}
#promos .promo-image-wrap img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 0.3s ease;
}
#promos .promo.card:hover .promo-image-wrap img{
  transform:scale(1.05);
}

#promos .promo-content{
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1;
}

#promos .promo-badge{
  display:inline-block;
  align-self:flex-start;
  padding:6px 14px;
  border-radius:20px;
  background:linear-gradient(135deg, #ffd8ef 0%, #e6ddff 100%);
  color:#5a3f6b;
  font-weight:600;
  font-size:14px;
  box-shadow:0 2px 8px rgba(138,84,166,.15);
}

#promos .promo-content h3{
  margin:0;
  font-size:22px;
  line-height:1.3;
  color:#5a3f6b;
  font-weight:700;
}

#promos .promo-details{
  color:#7d5e92;
  line-height:1.6;
  font-size:15px;
  margin-top:4px;
}

#promos .promo-cta{
  margin-top:auto;
  padding-top:8px;
}

#promos .promo-content .ap-order-btn,
#promos .promo-content .btn,
#promos .promo-cta .ap-order-btn,
#promos .promo-cta .btn{
  display:inline-block;
  padding:12px 20px;
  border-radius:12px;
  background:linear-gradient(135deg, #ffd8ef 0%, #e6ddff 100%);
  color:#5a3f6b;
  font-weight:600;
  text-align:center;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow:0 4px 12px rgba(138,84,166,.15);
}

#promos .promo-content .ap-order-btn:hover,
#promos .promo-content .btn:hover,
#promos .promo-cta .ap-order-btn:hover,
#promos .promo-cta .btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(138,84,166,.2);
}

#promos .slot{overflow:hidden;border-radius:24px;background:#fff;box-shadow:var(--shadow,0 8px 24px rgba(0,0,0,.06));margin:0 0 18px}
#promos .slot .inner{padding:12px}
#promos .slot img{display:block;max-width:100%;width:100%;height:auto;object-fit:cover;border-radius:20px}

@media (max-width: 820px){
  body{padding-bottom:calc(110px + env(safe-area-inset-bottom))}
  #promos .slot, #promos .slot *{box-sizing:border-box}

  /* любые обёртки/медиа приводим в чувство */
  #promos .slot img,
  #promos .slot picture,
  #promos .slot figure,
  #promos .slot .media,
  #promos .slot .image,
  #promos .slot .thumb,
  #promos .slot .photo,
  #promos .promo-image-wrap img{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    object-fit:cover !important;
    border-radius:18px !important;
    clip-path:none !important;
    -webkit-mask-image:none !important;
    mask:none !important;
    overflow:hidden !important;
  }
  
  /* Мобильные стили для новых карточек */
  #promos .promo-content{
    padding:16px;
    gap:10px;
  }
  
  #promos .promo-content h3{
    font-size:20px;
  }
  
  #promos .promo-badge{
    font-size:13px;
    padding:5px 12px;
  }
  
  #promos .promo-details{
    font-size:14px;
  }

  /* если clip-path/mask зашили прямо инлайном */
  #promos [style*="clip-path"],
  #promos [style*="-webkit-mask"],
  #promos [style*="mask"]{
    clip-path:none !important;
    -webkit-mask-image:none !important;
    mask:none !important;
    border-radius:18px !important;
    overflow:hidden !important;
  }

  #promos h3, #promos .title{font-size:20px;line-height:1.25}
}