.smz-kh{
  --accent:#bd0100;
  --card:#fff;
  --border:#e5e7eb;
  --text:#111827;
  --muted:#6b7280;

  color:var(--text);
}

.smz-kh{
  --accent:#bd0100;
  --card:#fff;
  --border:#e5e7eb;
  --text:#111827;
  --muted:#6b7280;

  /* дефолт пропорций */
  --video: 70%;
  --list: 30%;

  color:var(--text);
}

.smz-kh__grid{
  display:grid;
  gap:16px;
  align-items:start;
}

/* layout: кнопки справа */
.smz-kh.is-right .smz-kh__grid{
  grid-template-columns: var(--video) var(--list);
}

/* layout: кнопки снизу */
.smz-kh.is-bottom .smz-kh__grid{
  grid-template-columns: 1fr;
}

/* на мобиле всегда вниз */
@media (max-width: 900px){
  .smz-kh__grid{ grid-template-columns: 1fr !important; }
}


.smz-kh__player-box{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  aspect-ratio: 16 / 9;
}

.smz-kh__player-el{
  width:100%;
  height:100%;
}

.smz-kh__list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.smz-kh__btn{
  text-align:left;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px 10px; /* было 12 */
  cursor:pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}


.smz-kh__btn:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  box-shadow: 0 10px 22px rgba(0,0,0,.07);
}

.smz-kh__btn.is-active{
  border-color: var(--accent);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}

.smz-kh__btnTitle{
  font-weight:800;
  line-height:1.2;
  font-size:15px;
}

.smz-kh__btnDesc{
  margin-top:6px;
  font-size:13px;
  color:var(--muted);
  line-height:1.35;
}
/* 1) Кнопка должна быть "контейнером" для текста и не уезжать */
.smz-kh__btn{
  width: 100%;
  display: block;
  text-align: left;

  /* критично: перебиваем глобальный nowrap */
  white-space: normal !important;

  /* чтобы не раздувало по горизонтали */
  max-width: 100%;
  overflow: hidden;

  /* остальное (если у тебя уже есть — можно оставить) */
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 10px;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

/* 2) Внутренние дивы: разрешаем перенос и ломание длинных слов */
.smz-kh__btnTitle,
.smz-kh__btnDesc{
  display: block;
  max-width: 100%;

  white-space: normal;
  overflow-wrap: anywhere;   /* лучший фикс для длинных токенов */
  word-break: break-word;    /* на всякий */
}

/* 3) Если у тебя где-то глобально стоит line-height — зададим адекватный */
.smz-kh__btnTitle{ line-height: 1.25; }
.smz-kh__btnDesc{ line-height: 1.35; }

/* 4) Hover */
.smz-kh__btn:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  box-shadow: 0 10px 22px rgba(0,0,0,.07);
}

/* 5) Focus (клавиатура) */
.smz-kh__btn:focus{
  outline: none;
}
.smz-kh__btn:focus-visible{
  box-shadow:
    0 10px 22px rgba(0,0,0,.07),
    0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
  border-color: var(--accent);
}

/* 6) Active (выбранный хайлайт) */
.smz-kh__btn.is-active{
  border-color: var(--accent);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}