/* ===== ИЗОЛИРОВАННЫЙ БАННЕР «СКИДКА» v3 (скоуп: #skidka-banner) ===== */
#skidka-banner, #skidka-banner *, #skidka-banner *::before, #skidka-banner *::after{
  box-sizing:border-box; margin:0; padding:0;
}
#skidka-banner{
  container-type:inline-size; width:100%;
  font-family:'Golos Text',Arial,Helvetica,sans-serif;
  line-height:1.35; text-align:left; color:#f4f4f2;
  --skb-red:#e73922; --skb-red-hi:#ff7059;
  --skb-blue:#3498db; --skb-blue-hi:#5db0e8;
  --skb-ink:#0e0f12; --skb-ink2:#17181d; --skb-line:#2c2e36;
  --skb-mut:#9aa0a8; --skb-text:#f4f4f2;
  --skb-disp:'Unbounded','Arial Black',Arial,sans-serif;
}
#skidka-banner ul{list-style:none}
#skidka-banner a{color:inherit; text-decoration:none}
#skidka-banner svg{display:block}
#skidka-banner em{font-style:normal}

#skidka-banner .skb-banner{
  position:relative; overflow:hidden; width:100%; color:var(--skb-text);
  background:
    radial-gradient(620px 260px at 88% -20%, rgba(231,57,34,.20), transparent 60%),
    radial-gradient(420px 220px at 6% 120%, rgba(52,152,219,.14), transparent 60%),
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0/22px 22px,
    var(--skb-ink);
  display:flex; flex-direction:column; gap:16px;
  padding:30px 20px 24px;
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%);
}
#skidka-banner .skb-banner>*{position:relative; z-index:2}

/* бегущая сигнальная рамка — через ::before, не зависит от соседних правил */
#skidka-banner .skb-banner::before{
  content:""; position:absolute; top:0; left:0; right:0; width:100%; height:6px; z-index:3;
  background:repeating-linear-gradient(-45deg,var(--skb-red) 0 11.3px,var(--skb-ink) 11.3px 22.6px);
  animation:skb-hz 1.7s linear infinite;
}
@keyframes skb-hz{to{background-position:32px 0}}

/* кубик с дюбелем */
#skidka-banner .skb-mark{
  display:none; place-items:center; width:54px; height:54px; flex:none;
  background:var(--skb-red);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);
}
#skidka-banner .skb-mark svg{width:40px; height:17px; color:#fff; transition:transform .4s}
#skidka-banner .skb-banner:hover .skb-mark svg{transform:translateX(4px)}

/* парящие силуэты дюбеля */
#skidka-banner .skb-plug{position:absolute; z-index:1; color:rgba(231,57,34,.10); animation:skb-drift 13s ease-in-out infinite alternate}
#skidka-banner .skb-plug--1{width:230px; height:95px; right:-46px; top:-14px; transform:rotate(-16deg)}
#skidka-banner .skb-plug--2{width:150px; height:62px; left:22%; bottom:-34px; transform:rotate(11deg); color:rgba(52,152,219,.10); animation-duration:17s; animation-delay:-6s}
@keyframes skb-drift{from{translate:0 0}to{translate:-14px 10px}}

#skidka-banner .skb-kicker{
  display:flex; align-items:center; gap:8px;
  font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--skb-blue-hi);
}
#skidka-banner .skb-dot{
  width:7px; height:7px; flex:none; border-radius:50%;
  background:var(--skb-red); animation:skb-pulse 2s infinite;
}
@keyframes skb-pulse{
  0%{box-shadow:0 0 0 0 rgba(231,57,34,.55)}
  70%{box-shadow:0 0 0 9px rgba(231,57,34,0)}
  100%{box-shadow:0 0 0 0 rgba(231,57,34,0)}
}

#skidka-banner .skb-title{
  font-family:var(--skb-disp); font-weight:700;
  font-size:clamp(21px,5.6cqw,30px); line-height:1.18; letter-spacing:.01em;
  margin:8px 0 6px; color:var(--skb-text);
}
#skidka-banner .skb-title em{color:var(--skb-red-hi)}
#skidka-banner .skb-lm{display:block; overflow:hidden}
#skidka-banner .skb-lm>span{display:block; transition:transform .7s cubic-bezier(.2,.7,.2,1)}
#skidka-banner.skb-pre .skb-lm>span{transform:translateY(112%)}
#skidka-banner.skb-go .skb-lm>span{transform:none}
#skidka-banner.skb-go .skb-lm:nth-child(2)>span{transition-delay:.12s}

#skidka-banner .skb-sub{font-size:12.5px; line-height:1.5; color:var(--skb-mut); max-width:42ch}

#skidka-banner .skb-tiers{display:flex; flex-direction:column; gap:10px}
#skidka-banner .skb-tier{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:10px 14px; background:var(--skb-ink2);
  border:1px solid var(--skb-line); border-left:3px solid var(--skb-blue);
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);
  transition:transform .3s;
}
#skidka-banner .skb-tier:hover{transform:translateX(3px)}
#skidka-banner .skb-tier--max{border-left-color:var(--skb-red); background:rgba(231,57,34,.08)}
#skidka-banner .skb-cond{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--skb-mut)}
#skidka-banner .skb-cond b{color:var(--skb-text); font-weight:600}
#skidka-banner .skb-val{
  font-family:var(--skb-disp); font-weight:900; font-size:30px; line-height:1;
  white-space:nowrap; flex:none; color:var(--skb-blue-hi); font-variant-numeric:tabular-nums;
}
#skidka-banner .skb-tier--max .skb-val{color:var(--skb-red-hi)}

#skidka-banner .skb-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  overflow:hidden; width:100%; padding:15px 22px;
  background:var(--skb-red); color:#fff; text-decoration:none;
  font-family:var(--skb-disp); font-weight:700; font-size:12px; line-height:1;
  letter-spacing:.07em; text-transform:uppercase;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);
  transition:background .3s;
}
#skidka-banner .skb-btn::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);
  transform:translateX(-130%); transition:transform .65s ease;
}
#skidka-banner .skb-btn:hover{background:#f24a32}
#skidka-banner .skb-btn:hover::after{transform:translateX(130%)}
#skidka-banner .skb-btn span{transition:transform .3s}
#skidka-banner .skb-btn:hover span{transform:translateX(5px)}
#skidka-banner .skb-note{margin-top:8px; font-size:10.5px; letter-spacing:.04em; color:var(--skb-mut); text-align:center}

/* --- УЗКАЯ ЛЕНТА 90 PX: контейнер шире 700px --- */
@container (min-width:700px){
  #skidka-banner .skb-banner{
    flex-direction:row; flex-wrap:nowrap; align-items:center;
    height:70px; gap:18px; padding:0 20px;
  }
  #skidka-banner .skb-banner::before{height:4px}
  #skidka-banner .skb-plug{display:none}

  #skidka-banner .skb-copy{flex:1 1 200px; min-width:0}
  #skidka-banner .skb-kicker{font-size:9.5px}
  #skidka-banner .skb-title{
    font-size:13.5px; margin:3px 0 0;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  #skidka-banner .skb-lm, #skidka-banner .skb-lm>span{display:inline-block; white-space:nowrap}
  #skidka-banner .skb-sub{display:none}

  /* чипы в одну строку: сумма слева, процент справа */
  #skidka-banner .skb-pre{display:none}
  #skidka-banner .skb-tiers{flex-direction:row; width:auto; gap:8px; flex:none}
  #skidka-banner .skb-tier{flex-direction:row; align-items:center; justify-content:flex-start; gap:9px; padding:8px 12px}
  #skidka-banner .skb-tier:hover{transform:translateY(-2px)}
  #skidka-banner .skb-cond{font-size:9.5px; white-space:nowrap}
  #skidka-banner .skb-cond{font-size:11.5px; color:#fff;}
  #skidka-banner .skb-val{font-size:16px}

  #skidka-banner .skb-cta{margin-left:auto; flex:none}
  #skidka-banner .skb-btn{width:auto; padding:12px 18px; font-size:11px}
  #skidka-banner .skb-note{display:none}
}
@container (min-width:860px){
  #skidka-banner .skb-mark{display:grid}
}
@container (min-width:1000px){
  #skidka-banner .skb-banner{gap:26px; padding:0 24px}
  #skidka-banner .skb-title{font-size:16px}
  #skidka-banner .skb-val{font-size:18px}
}

@media (prefers-reduced-motion:reduce){
  #skidka-banner, #skidka-banner *{animation:none!important; transition:none!important}
  #skidka-banner .skb-lm>span{transform:none!important}
}