/* MDA: селектор вкуса/цвета (SKU Aspro Max) на детальной карточке и в быстром просмотре.
   Чипы вместо прямоугольных плашек + компактный выбранный вариант в липкой шапке.
   Подключение: init.php, OnBeforeProlog, /catalog/ — прямым <link> после бандла шаблона. */

.sku_in_detail{
  --mda-sku-accent:#a855f7;
  --mda-sku-accent-rgb:168,85,247;
  --mda-sku-text:#f3ecff;
  --mda-sku-muted:rgba(226,214,250,.55);
  --mda-sku-chip-h:36px;
  --mda-sku-gap:8px;
  --mda-sku-rows:3;
}

/* Заголовок «Вкус — выбранный» */
.sku_in_detail .sku_props .bx_item_detail_size .bx_item_section_name,
.catalog_detail .sku_in_detail .bx_item_section_name{
  display:block!important;
  margin:0 0 10px!important;
  font-size:13px!important;
  line-height:18px!important;
  color:var(--mda-sku-muted)!important;
  font-weight:400!important;
}
.sku_in_detail .bx_item_section_name .sku_mdash{margin:0 6px!important;color:var(--mda-sku-muted)!important;}
.sku_in_detail .bx_item_section_name .val{color:var(--mda-sku-text)!important;font-weight:500!important;}

/* Контейнер: убираем внутренний скролл Aspro (230px), сворачивание делает sku.js */
.catalog_detail .sku_in_detail .scrollblock[class*="_scroller_container"],
.sku_in_detail .bx_size_scroller_container{
  max-height:none!important;
  height:auto!important;
  overflow:visible!important;
}

/* Список чипов */
.sku_in_detail .bx_item_detail_size .bx_size > ul,
.sku_in_detail .bx_item_detail_size ul.list_values_wrapper{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:var(--mda-sku-gap)!important;
  margin:0!important;
  padding:2px!important; /* чтобы обводка выбранного не резалась при сворачивании */
}

/* Чип */
.catalog_detail .sku_in_detail .sku_props .bx_item_detail_size ul li.item,
.sku_in_detail .bx_item_detail_size ul li.item{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px;
  float:none!important;
  width:auto!important;
  max-width:100%!important;
  min-height:var(--mda-sku-chip-h)!important;
  height:auto!important;
  margin:0!important;
  padding:7px 14px!important;
  border:1px solid rgba(var(--mda-sku-accent-rgb),.28)!important;
  border-radius:12px!important;
  background:rgba(var(--mda-sku-accent-rgb),.07)!important;
  color:var(--mda-sku-text)!important;
  box-shadow:none!important;
  cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,color .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.sku_in_detail .bx_item_detail_size ul li.item > span.cnt,
.sku_in_detail .bx_item_detail_size ul li.item span{
  display:block!important;
  padding:0!important;
  margin:0!important;
  font-size:13px!important;
  line-height:18px!important;
  font-weight:500!important;
  color:inherit!important;
  text-align:left!important;
  white-space:normal!important;
  overflow-wrap:anywhere;
}
/* <i> у LI-режима пустой — используем под галочку выбранного */
.sku_in_detail .bx_item_detail_size ul li.item > i{
  display:none!important;
}

/* Hover */
@media (hover:hover){
  .sku_in_detail .bx_item_detail_size ul li.item:not(.active):hover{
    border-color:rgba(var(--mda-sku-accent-rgb),.6)!important;
    background:rgba(var(--mda-sku-accent-rgb),.14)!important;
  }
}
.sku_in_detail .bx_item_detail_size ul li.item:focus-visible{
  outline:2px solid rgba(var(--mda-sku-accent-rgb),.7);
  outline-offset:2px;
}

/* Выбранный: акцентная обводка + тинт + галочка */
.catalog_detail .sku_in_detail .sku_props .bx_item_detail_size ul li.item.active,
.sku_in_detail .bx_item_detail_size ul li.item.active{
  border-color:var(--mda-sku-accent)!important;
  background:rgba(var(--mda-sku-accent-rgb),.22)!important;
  box-shadow:0 0 0 1px var(--mda-sku-accent) inset, 0 4px 14px -6px rgba(var(--mda-sku-accent-rgb),.7)!important;
  color:#fff!important;
  padding-left:10px!important;
}
.sku_in_detail .bx_item_detail_size ul li.item.active > i{
  display:inline-block!important;
  position:static!important;
  flex:0 0 16px;
  width:16px!important;
  height:16px!important;
  margin:0!important;
  border-radius:50%!important;
  background:var(--mda-sku-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px 16px no-repeat!important;
  border:0!important;
  opacity:1!important;
}

/* Недоступные комбинации */
.sku_in_detail .bx_item_detail_size ul li.item.missing,
.sku_in_detail .bx_item_detail_size ul li.item.notallowed,
.sku_in_detail .bx_item_detail_size ul li.item.disabled{
  opacity:.45;
  border-style:dashed!important;
  background:transparent!important;
}
.sku_in_detail .bx_item_detail_size ul li.item.missing > span,
.sku_in_detail .bx_item_detail_size ul li.item.notallowed > span{
  text-decoration:line-through;
  text-decoration-color:rgba(255,255,255,.35);
}

/* Сворачивание длинного списка (класс ставит sku.js) */
.sku_in_detail .bx_item_detail_size.mda-sku-collapsible .bx_size{position:relative;}
.sku_in_detail .bx_item_detail_size.mda-sku-collapsed .bx_size > ul{
  max-height:calc(var(--mda-sku-rows) * var(--mda-sku-chip-h) + (var(--mda-sku-rows) - 1) * var(--mda-sku-gap) + 4px)!important;
  overflow:hidden!important;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent);
}
.sku_in_detail .bx_item_detail_size.mda-sku-collapsed ul li.item.mda-sku-lift{order:-1;}
.sku_in_detail .mda-sku-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:10px 0 2px;
  padding:6px 2px;
  border:0;
  background:none;
  color:#c89bff;
  font-family:inherit;
  font-size:13px;
  line-height:18px;
  font-weight:500;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.sku_in_detail .mda-sku-toggle:hover{color:#e0c6ff;}
.sku_in_detail .mda-sku-toggle::after{
  content:"";
  width:7px;height:7px;
  border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .2s ease;
}
.sku_in_detail .bx_item_detail_size:not(.mda-sku-collapsed) .mda-sku-toggle::after{transform:translateY(2px) rotate(-135deg);}

/* Отступ блока до кнопок покупки */
.catalog_detail .buy_block .sku_in_detail{margin-bottom:6px;}

/* Мобильные */
@media (max-width:767px){
  .sku_in_detail{--mda-sku-chip-h:40px;}
  .sku_in_detail .bx_item_detail_size ul li.item{padding:9px 14px!important;}
  .sku_in_detail .bx_item_detail_size ul li.item.active{padding-left:10px!important;}
  .sku_in_detail .bx_item_detail_size ul li.item > span.cnt{font-size:14px!important;}
}

/* ===== Липкая шапка товара (#headerfixed): выбранный вариант — тихая подпись, не кнопка ===== */
#headerfixed .table-view .item-actions .item-sku .but-cell.sku_props .bx_item_detail_size ul{
  display:flex!important;
  margin:0!important;
  padding:0!important;
}
#headerfixed .table-view .item-actions .item-sku .but-cell.sku_props .bx_item_detail_size ul li,
#headerfixed .sku_props .bx_catalog_item_scu ul li.active{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px;
  max-width:220px!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:5px 12px 5px 10px!important;
  border:1px solid rgba(168,85,247,.35)!important;
  border-radius:999px!important;
  background:rgba(168,85,247,.08)!important;
  box-shadow:none!important;
  color:rgba(236,226,255,.85)!important;
  cursor:default!important;
  pointer-events:none;
}
#headerfixed .sku_props .bx_catalog_item_scu ul li > i{
  display:inline-block!important;
  flex:0 0 6px;
  width:6px!important;height:6px!important;
  border-radius:50%!important;
  background:#a855f7!important;
  margin:0!important;
  position:static!important;
}
#headerfixed .sku_props .bx_catalog_item_scu ul li span.cnt{
  display:block!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
  font-size:12px!important;
  line-height:16px!important;
  font-weight:500!important;
  color:inherit!important;
  padding:0!important;
}