/* =====================================================
   ASSORTMENT.CSS — Таблица ассортимента + карточка
   Секция .asr-* / #assortment
   index.html → строки 1172–1540
   ===================================================== */

/* ---- Разделитель между wizard и таблицей ---- */
.asr-section-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 32px 0 12px;
  padding-top: 28px;
  border-top: 2px solid #e2e8f0;
}
.asr-section-lead {
  font-size: .84rem;
  color: var(--color-text-muted);
  margin: 0;
}

/* ---- Двухколоночный layout ---- */
.asr-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  align-items: start;
  margin-top: 28px;
}

/* ---- Левая колонка ---- */
.asr-left { min-width: 0; }

.asr-wrap {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(0,0,0,.07);
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

/* ---- Вкладки ---- */
.asr-tabs {
  display: flex;
  border-bottom: 2px solid #e8ecf2;
  background: #f8f9fb;
  overflow-x: auto;
}
.asr-tab {
  flex: 1;
  min-width: 120px;
  padding: 13px 16px;
  font-size: .88rem;
  font-weight: 600;
  color: #6b7280;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: .18s;
  font-family: 'Inter', Arial, sans-serif;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}
.at-ico { font-size: 1rem; }
.asr-tab:hover { color: var(--color-cyan); background: #f0fbff; }
.asr-tab.active {
  color: var(--color-dark);
  background: #fff;
  border-bottom-color: var(--color-cyan);
  font-weight: 700;
}

/* ---- Панели ---- */
.asr-panel { display: none; padding: 20px; }
.asr-panel.active { display: block; }

/* ---- Легенда ---- */
.asr-legend {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px;
}
.asr-badge {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  border-radius: 4px;
  font-size: .7rem;
  font-weight: 600;
  border: 1px solid;
  letter-spacing: .02em;
  white-space: nowrap;
}
.asr-badge--blue   { background: #e8f3ff; color: #0055aa; border-color: #b8d4f0; }
.asr-badge--cyan   { background: #e0f7fd; color: #006a88; border-color: #90d8ee; }
.asr-badge--amber  { background: #fff8e0; color: #7a5700; border-color: #f0d070; }
.asr-badge--orange { background: #fff0e0; color: #7a3500; border-color: #f0a060; }
.asr-badge--red    { background: #fce8e8; color: #8a0000; border-color: #f0a0a0; }

/* ---- Таблица ---- */
.asr-table-wrap {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}
.asr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .83rem;
  table-layout: auto;
}
.asr-table thead tr { background: #f1f5f9; }
.asr-table th {
  padding: 9px 12px;
  text-align: left;
  font-size: .71rem;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
  border-bottom: 2px solid #e2e8f0;
}
.asr-th-use { min-width: 160px; }

.asr-row {
  cursor: pointer;
  transition: background .13s, box-shadow .13s;
  border-bottom: 1px solid #f0f2f5;
}
.asr-row:last-child { border-bottom: none; }
.asr-row:hover { background: #f0fbff !important; }
.asr-row.selected {
  background: #dff6fd !important;
  box-shadow: inset 3px 0 0 var(--color-cyan);
}
.asr-row td {
  padding: 9px 12px;
  color: var(--color-dark);
  vertical-align: middle;
}
.asr-row td:first-child { font-weight: 700; font-size: .9rem; white-space: nowrap; }
.asr-row-featured { background: #f5fbff; }
.asr-row-featured td:first-child { color: #007aaa; }

/* SDR цветовые полосы */
.asr-row[data-sdr="26"]   { border-left: 3px solid #6baedb; }
.asr-row[data-sdr="21"]   { border-left: 3px solid #5aa0cc; }
.asr-row[data-sdr="17.6"] { border-left: 3px solid #4892bd; }
.asr-row[data-sdr="17"]   { border-left: 3px solid #00a8cc; }
.asr-row[data-sdr="13.6"] { border-left: 3px solid #f0a000; }
.asr-row[data-sdr="11"]   { border-left: 3px solid #e06000; }
.asr-row[data-sdr="9"]    { border-left: 3px solid #c0001a; }

/* Гильзы — цветовая полоса по диаметру */
.asr-row[data-sleeve-d="40"]  { border-left: 3px solid #82c8a0; }
.asr-row[data-sleeve-d="50"]  { border-left: 3px solid #5ab890; }
.asr-row[data-sleeve-d="76"]  { border-left: 3px solid #1a9a60; }
.asr-row[data-sleeve-d="100"] { border-left: 3px solid #c0a030; }
.asr-row[data-sleeve-d="110"] { border-left: 3px solid #b08020; }
.asr-row[data-sleeve-d="140"] { border-left: 3px solid #e06820; }
.asr-row[data-sleeve-d="200"] { border-left: 3px solid #c04020; }
.asr-row[data-sleeve-d="0"]   { border-left: 3px solid #8888aa; }

/* SDR бейдж в строке */
.asr-sdr-tag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: .74rem;
  font-weight: 700;
  white-space: nowrap;
}
.asr-sdr-tag[data-sdr="26"],
.asr-sdr-tag[data-sdr="21"],
.asr-sdr-tag[data-sdr="17.6"] { background: #e0eef8; color: #1a5a88; }
.asr-sdr-tag[data-sdr="17"]   { background: #d0f0fb; color: #005f7a; }
.asr-sdr-tag[data-sdr="13.6"] { background: #fff3cc; color: #7a5000; }
.asr-sdr-tag[data-sdr="11"]   { background: #ffe8d0; color: #7a3000; }
.asr-sdr-tag[data-sdr="9"]    { background: #ffd8d8; color: #8a0000; }

/* ---- Заголовок SDR-группы (аккордеон строк) ---- */
.asr-group-hd {
  cursor: pointer;
  background: #f1f5f9 !important;
  border-top: 2px solid #d0dcea;
  border-bottom: 1px solid #e2e8f0;
  user-select: none;
  transition: background .15s;
}
.asr-group-hd:hover { background: #e8f0fa !important; }
.asr-group-hd td { padding: 0; }
.asr-group-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
}
.asr-group-arrow {
  font-size: .9rem;
  color: #64748b;
  transition: transform .22s;
  flex-shrink: 0;
  line-height: 1;
}
.asr-group-hd--closed .asr-group-arrow { transform: rotate(-90deg); }
.asr-group-sdr { flex-shrink: 0; }
.asr-group-desc {
  font-size: .76rem;
  color: #6b7280;
  flex: 1;
}
.asr-group-cnt {
  font-size: .72rem;
  color: #6b7280;
  white-space: nowrap;
  margin-left: auto;
}

/* ---- Кнопка «Показать все позиции» ---- */
.asr-expand-wrap {
  text-align: center;
  padding: 12px 20px 4px;
  border-top: 1px solid #e8edf5;
}
.asr-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 20px;
  background: #f0f7ff;
  border: 1.5px solid #b8d4f0;
  border-radius: 8px;
  font-size: .83rem;
  font-weight: 600;
  color: #1a5a88;
  cursor: pointer;
  font-family: 'Inter', Arial, sans-serif;
  transition: background .15s, border-color .15s;
}
.asr-expand-btn:hover {
  background: #dbeeff;
  border-color: var(--color-cyan);
  color: var(--color-cyan);
}
.asr-expand-arrow {
  font-size: .8rem;
  transition: transform .2s;
}

.asr-footnote {
  font-size: .73rem;
  color: var(--color-text-muted);
  margin-top: 10px;
  line-height: 1.5;
}

/* ---- Правая колонка: карточка ---- */
.asr-right {
  position: sticky;
  top: 80px;
}
.asr-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(0,0,0,.08);
  border: 1px solid #e2e8f0;
  overflow: hidden;
  min-height: 260px;
}

/* Пустое состояние */
.asr-card-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  min-height: 260px;
  text-align: center;
}
.ace-icon { font-size: 2.5rem; margin-bottom: 14px; opacity: .5; }
.ace-text  { font-size: .85rem; color: #6b7280; line-height: 1.6; }

/* Карточка трубы */
.asr-card-result { padding: 0; }

.acr-header {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 18px 0;
}
.acr-svg-wrap svg { width: 110px; height: 110px; display: block; flex-shrink: 0; }
.acr-title-wrap   { flex: 1; min-width: 0; padding-top: 4px; }
.acr-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-dark);
  line-height: 1.3;
  margin-bottom: 4px;
}
.acr-purpose {
  font-size: .78rem;
  color: #6b7280;
  margin-bottom: 8px;
  line-height: 1.4;
}
.asr-sdr-pill {
  display: inline-block;
  background: var(--color-cyan);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 20px;
  letter-spacing: .04em;
}

/* Параметры */
.acr-params {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
  margin-top: 14px;
}
.acr-params tr { border-bottom: 1px solid #f0f2f5; }
.acr-params tr:last-child { border-bottom: none; }
.acr-params td { padding: 7px 18px; vertical-align: middle; }
.acr-params td:first-child { color: #6b7280; font-size: .78rem; width: 48%; }
.acr-params td:last-child  { font-weight: 700; color: var(--color-dark); }

/* Назначение */
.acr-use-block {
  background: #f4f8ff;
  border-top: 1px solid #e8edf5;
  padding: 10px 18px;
  font-size: .79rem;
  line-height: 1.5;
}
.acr-use-label { font-weight: 700; color: #5a7090; margin-right: 4px; }
.acr-use-text  { color: var(--color-dark); }

/* Калькулятор */
.acr-calc { padding: 14px 18px 10px; border-top: 1px solid #f0f2f5; }
.acr-calc-label { font-size: .78rem; font-weight: 600; color: #4b5563; display: block; margin-bottom: 8px; }
.acr-calc-row   { display: flex; align-items: center; gap: 10px; }
.acr-calc-input {
  width: 90px; padding: 7px 10px;
  border: 1.5px solid #c8d8e8;
  border-radius: 7px; font-size: .88rem;
  font-family: 'Inter', Arial, sans-serif;
  color: var(--color-dark);
}
.acr-calc-out          { display: flex; flex-direction: column; gap: 2px; }
.acr-calc-out strong   { font-size: .95rem; font-weight: 800; color: var(--color-cyan); }
.acr-calc-out span     { font-size: .72rem; color: #6b7280; }

/* Кнопки */
.acr-actions {
  padding: 12px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.acr-cta  { text-align: center; font-size: .88rem; }
.acr-link {
  text-align: center;
  font-size: .8rem;
  color: #6b7280;
  text-decoration: underline;
  cursor: pointer;
}
.acr-link:hover { color: var(--color-cyan); }

/* Гильза */
.asr-card-sleeve { padding: 30px 20px; text-align: center; }
.acs-icon { font-size: 2.8rem; margin-bottom: 12px; line-height: 1; }
.acr-sleeve-note {
  font-size: .82rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 10px 0 0;
  padding: 10px 12px;
  background: #f4f5f7;
  border-radius: 8px;
  text-align: left;
}

/* ---- Медиа ---- */
@media(max-width:900px){
  .asr-layout { grid-template-columns: 1fr; }
  .asr-right  { position: static; margin-top: 16px; }
  .asr-card   { min-height: auto; }
  .asr-section-head { flex-direction: column; align-items: flex-start; gap: 6px; }
}
@media(max-width:640px){
  .asr-panel { padding: 10px; }
  .asr-tabs  { gap: 0; }
  .asr-tab   { font-size: .74rem; padding: 9px 8px; min-width: 80px; }

  /* Таблица: горизонтальный скролл без обрезки */
  /* Убираем overflow:hidden с .asr-wrap чтобы скролл таблицы не обрезался */
  .asr-wrap  { border-radius: 10px; overflow: visible; }
  .asr-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0;
    width: 100%;
    max-width: 100%;
  }
  .asr-table { min-width: 460px; table-layout: auto; }

  /* Скрываем колонку «Назначение» — слишком широкая */
  .asr-th-use { display: none; }
  .asr-row td:last-child { display: none; }

  /* Пустое состояние карточки — на мобиле не нужно */
  #asrEmpty { display: none !important; }

  /* Строки: компактнее, текст без переноса внутри ячеек */
  .asr-row td { padding: 7px 8px; font-size: .78rem; white-space: nowrap; }
  .asr-row td:first-child { font-size: .82rem; }
  .asr-table th { padding: 7px 8px; font-size: .66rem; white-space: nowrap; }

  /* Карточка справа — полная ширина снизу */
  .acr-header { flex-direction: column; align-items: center; text-align: center; padding: 14px 14px 0; }
  .acr-svg-wrap svg { width: 80px; height: 80px; }
  .acr-params td { padding: 6px 14px; }
  .acr-params td:first-child { width: 44%; font-size: .74rem; }
  .acr-calc { padding: 10px 14px 8px; }
  .acr-actions { padding: 10px 14px 14px; }

  /* Легенда бейджей — перенос */
  .asr-legend { gap: 4px; }
  .asr-badge  { font-size: .65rem; padding: 2px 7px; }

  /* Секция-заголовок */
  .asr-section-head { flex-direction: column; align-items: flex-start; gap: 4px; margin: 20px 0 8px; padding-top: 20px; }
  .asr-section-lead { font-size: .78rem; }

  /* Заголовок SDR-группы: обрезаем длинный текст, чтобы не мешал горизонтальному скроллу */
  .asr-group-inner { min-width: 0; overflow: hidden; }
  .asr-group-desc  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

  /* Панель: убираем боковые отступы чтобы таблица занимала всю ширину */
  .asr-panel { padding: 10px 0; }
  .asr-legend { padding: 0 10px; }
  .asr-expand-wrap { padding: 10px 10px 4px; }
  .asr-footnote { padding: 0 10px; }
}

/* =====================================================
   PREMIUM UPGRADE — секция «Подбор и ассортимент»
   (грузится последней → перекрывает базовые правила)
   ===================================================== */

/* Глубокий «дорогой» фон вместо плоского серого + мягкие световые пятна */
#pipe-wizard.bg-grey {
  background: radial-gradient(130% 130% at 50% -10%, #f1f4fa 0%, #e8edf5 55%, #eef1f7 100%);
  position: relative;
  overflow: hidden;
}
#pipe-wizard.bg-grey::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(45% 55% at 88% 8%, rgba(0,168,204,.08), transparent 70%),
    radial-gradient(45% 55% at 6% 95%, rgba(26,39,68,.06), transparent 70%);
  pointer-events: none;
}
#pipe-wizard.bg-grey > .container { position: relative; z-index: 1; }

/* Заголовок секции — крупнее воздуха снизу */
#pipe-wizard .section-lead { max-width: 720px; }

/* Карта мастера — крупнее радиус, многослойная мягкая тень, больше воздуха */
#pipe-wizard .wiz-wrap {
  border-radius: 22px;
  padding: 40px 44px;
  border: 1px solid rgba(255,255,255,.8);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 2px 10px rgba(16,38,76,.05),
    0 28px 64px -22px rgba(16,38,76,.24);
}

/* Вкладки продукта — белые карты, иконка в фирменной плашке */
#pipe-wizard .wiz-product-tabs { gap: 16px; margin-bottom: 32px; }
#pipe-wizard .wiz-prod-btn {
  background: #fff;
  border: 1.5px solid #e6eaf1;
  border-radius: 16px;
  padding: 16px 22px;
  gap: 16px;
  box-shadow: 0 1px 2px rgba(16,38,76,.04);
  transition: transform .2s, box-shadow .2s, border-color .2s, background .2s;
}
#pipe-wizard .wiz-prod-btn .wpb-icon {
  width: 48px; height: 48px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,#eef6ff,#e1f2fb);
  color: #0077b6; font-size: 1.35rem;
  box-shadow: inset 0 0 0 1px rgba(0,119,182,.08);
  transition: background .2s, color .2s;
}
#pipe-wizard .wiz-prod-btn:hover {
  border-color: var(--color-cyan);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -12px rgba(0,119,182,.4);
}
#pipe-wizard .wiz-prod-btn.active {
  border-color: var(--color-cyan);
  background: linear-gradient(135deg,#f5fbff,#eaf7fd);
  box-shadow: 0 14px 30px -14px rgba(0,119,182,.45);
}
#pipe-wizard .wiz-prod-btn.active .wpb-icon {
  background: linear-gradient(135deg,#0077b6,#00a8cc); color: #fff;
  box-shadow: 0 6px 16px -6px rgba(0,119,182,.6);
}

/* Карточки выбора — белые, иконка в мягком круге, плавный «lift» */
#pipe-wizard .wiz-choices { gap: 14px; }
#pipe-wizard .wiz-choice {
  background: #fff;
  border: 1.5px solid #e6eaf1;
  border-radius: 16px;
  padding: 18px;
  gap: 8px;
  box-shadow: 0 1px 2px rgba(16,38,76,.04);
  transition: transform .18s, box-shadow .18s, border-color .18s, background .18s;
}
#pipe-wizard .wiz-choice .wc-icon {
  width: 48px; height: 48px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,#eef6ff,#e1f2fb);
  box-shadow: inset 0 0 0 1px rgba(0,119,182,.08);
  font-size: 1.4rem; margin-bottom: 6px;
  transition: background .18s, box-shadow .18s;
}
#pipe-wizard .wiz-choice:hover {
  border-color: var(--color-cyan);
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -16px rgba(0,119,182,.45);
}
#pipe-wizard .wiz-choice:hover .wc-icon {
  background: linear-gradient(135deg,#e6f3ff,#d7eefb);
}
#pipe-wizard .wiz-choice.selected {
  border-color: var(--color-cyan);
  background: linear-gradient(135deg,#f5fbff,#eaf7fd);
  box-shadow: 0 14px 30px -16px rgba(0,119,182,.5);
}
#pipe-wizard .wiz-choice.selected .wc-icon {
  background: linear-gradient(135deg,#d8eefb,#c9e7f8);
  box-shadow: inset 0 0 0 1px rgba(0,119,182,.18);
}

/* Кнопка раскрытия таблицы — крупнее, объёмнее */
#pipe-wizard .asr-reveal-btn {
  border-radius: 16px;
  padding: 18px 26px;
  box-shadow: 0 2px 8px rgba(16,38,76,.05);
}

/* Карты таблицы и боковая карточка — приподнятые, дорогие */
#pipe-wizard .asr-wrap,
#pipe-wizard .asr-card {
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.8);
  box-shadow:
    0 2px 10px rgba(16,38,76,.05),
    0 26px 60px -24px rgba(16,38,76,.22);
}
#pipe-wizard .asr-tabs { background: #f7f9fc; }

/* Лёгкая подсветка строк таблицы при наведении (премиальный отклик) */
#pipe-wizard .asr-table tbody tr { transition: background .15s; }

/* ===== Инлайн-SVG иконки (замена эмодзи) — в стиле FontAwesome ===== */
/* Мастер подбора: иконка внутри фирменной cyan-плашки */
#pipe-wizard .wc-icon svg { width: 24px; height: 24px; color: #0077b6; }
/* Вкладки таблицы: цвет наследуется от состояния вкладки (active/inactive) */
.at-ico svg { width: 18px; height: 18px; vertical-align: middle; }
/* Плейсхолдер пустой карточки */
.asr-card-empty .ace-icon svg { width: 44px; height: 44px; }

/* ---- SDR-переключатель над таблицей (страницы cable/gnb) ---- */
.asr-sdr-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 10px;
}
.asr-sdr-pill {
  cursor: pointer;
  padding: 8px 15px;
  border-radius: 9px;
  border: 1.5px solid #d8e2ee;
  background: #fff;
  font-family: 'Inter', Arial, sans-serif;
  font-size: .88rem;
  font-weight: 700;
  color: #42506a;
  line-height: 1.1;
  transition: background .15s, border-color .15s, color .15s;
}
.asr-sdr-pill:hover { border-color: var(--color-cyan); color: var(--color-cyan); }
.asr-sdr-pill.active {
  background: #eaf6fb;
  border-color: var(--color-cyan);
  color: #005f7a;
  box-shadow: 0 2px 8px rgba(0,168,204,.18);
}
.asr-sdr-note {
  font-size: .84rem;
  color: #5b6573;
  margin: 0 0 14px;
  min-height: 1.2em;
}
/* Строки матрицы — только для чтения (без карточки-детали) */
.asr-row--static { cursor: default; }