/* Конфигуратор ПК KSKSHOP.RU — v3 */
.cfg-main { background: #F3F4F6; padding: 10px 0 48px; }

.cfg__layout { display: flex; gap: 20px; align-items: flex-start; }
.cfg__list { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
/* top: 88px — как у .basket__right, чтобы блок не уезжал под липкое меню (.menu, top:0) */
.cfg__summary { flex: 0 0 340px; position: sticky; top: 88px; align-self: flex-start; max-height: calc(100vh - 104px); overflow-y: auto; scrollbar-width: thin; }

/* ── строка категории: слева категория, справа позиции с выравненными колонками ── */
.cfg-row { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 18px; align-items: start; background: #fff; border: 1px solid #ececee; border-radius: 14px; padding: 14px 18px; }
.cfg-row__cat { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cfg-row__icon { flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: #F3F4F6; overflow: hidden; }
.cfg-row__icon img { width: 26px; height: 26px; object-fit: contain; }
.cfg-row__catname { font-size: 14px; font-weight: 600; color: #1A1110; line-height: 1.3; }
.cfg-row__req { color: #DA2438; margin-left: 2px; }

.cfg-row__content { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cfg-row__line { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cfg-row__line--actions { justify-content: flex-end; }
.cfg-row__empty { font-size: 14px; color: #b6b6bc; }

.cfg-row__item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 112px auto; align-items: center; gap: 14px; padding-bottom: 10px; border-bottom: 1px solid #f4f4f6; }
.cfg-row__item:last-of-type { border-bottom: none; padding-bottom: 0; }
.cfg-row__pic { width: 44px; height: 44px; display: grid; place-items: center; background: #F3F4F6; border-radius: 8px; overflow: hidden; }
.cfg-row__pic img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cfg-row__info { display: flex; flex-direction: column; min-width: 0; }
.cfg-row__title { font-size: 14px; font-weight: 600; color: #1A1110; text-decoration: none; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cfg-row__title:hover { color: #DA2438; }
.cfg-row__spec { font-size: 12px; color: #8f8f95; margin-top: 3px; }
.cfg-row__price { font-size: 16px; font-weight: 700; color: #1A1110; white-space: nowrap; text-align: right; }
.cfg-row__acts { display: flex; align-items: center; gap: 6px; justify-self: end; }
.cfg-icon { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: none; background: #F3F4F6; border-radius: 8px; color: #6b6b72; cursor: pointer; transition: background-color .15s, color .15s; }
.cfg-icon svg { width: 18px; height: 18px; }
.cfg-icon:hover { background: #DA2438; color: #fff; }

.cfg-btn { border: none; border-radius: 10px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.cfg-btn--primary { background: #DA2438; color: #fff; font-size: 14px; padding: 10px 20px; }
.cfg-btn--primary:hover { background: #c21f31; }
.cfg-btn--ghost { background: #fff; color: #1A1110; border: 1px solid rgba(26,17,16,.18); font-size: 13px; padding: 8px 16px; }
.cfg-btn--ghost:hover { border-color: #DA2438; color: #DA2438; }

/* количество */
.cfg-qty { display: inline-flex; align-items: center; border: 1px solid rgba(26,17,16,.15); border-radius: 10px; overflow: hidden; }
.cfg-qty__btn { width: 30px; height: 32px; border: none; background: #fff; font-size: 16px; cursor: pointer; color: #1A1110; }
.cfg-qty__btn:hover { background: #F3F4F6; }
.cfg-qty__val { min-width: 26px; text-align: center; font-size: 14px; font-weight: 600; }

/* ── сводка ── */
.cfg-sum { background: #fff; border: 1px solid #ececee; border-radius: 16px; padding: 20px; }
.cfg-sum__title { font-size: 18px; font-weight: 700; color: #1A1110; margin-bottom: 14px; }
/* шкала полноты сборки */
.cfg-progress { margin: 4px 0 14px; }
.cfg-progress__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; color: rgba(26,17,16,.6); margin-bottom: 7px; }
.cfg-progress__head b { font-size: 13px; font-weight: 700; color: #1A1110; }
.cfg-progress__bar { height: 6px; border-radius: 999px; background: #eeeef1; overflow: hidden; }
.cfg-progress__fill { display: block; height: 100%; border-radius: 999px; background: #DA2438; transition: width .3s ease, background-color .3s; }
.cfg-progress__fill.is-full { background: #17A03C; }

/* подсказка про вход */
.cfg-sum__hint { margin-top: 10px; font-size: 12px; color: #9a9aa0; text-align: center; }
.cfg-sum__hint a { color: #DA2438; }

/* поле названия в модалке сохранения */
.cfg-save__input { width: 100%; height: 46px; margin-bottom: 18px; padding: 0 14px; border: 1.5px solid rgba(26,17,16,.15); border-radius: 12px; font-size: 15px; color: #1A1110; box-sizing: border-box; outline: none; transition: border-color .15s; }
.cfg-save__input:focus { border-color: #DA2438; }

/* счётчик комплектующих */
.cfg-sum__count { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; color: rgba(26,17,16,.65); }
.cfg-sum__badge { min-width: 28px; height: 28px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center; background: #F3F4F6; border-radius: 999px; font-size: 14px; font-weight: 700; line-height: 1; color: #1A1110; box-sizing: border-box; }

/* тумблер «Сборка и тестирование» */
/* -webkit-tap-highlight-color: на телефоне тап подсвечивал всю строку синим */
.cfg-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 4px; padding: 12px 0; border-top: 1px solid #f0f0f2; cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
.cfg-toggle__text { font-size: 14px; color: #1A1110; line-height: 1.35; }
.cfg-toggle__text b { display: block; font-weight: 700; margin-top: 2px; }
.cfg-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.cfg-toggle__track { flex: 0 0 auto; position: relative; width: 46px; height: 26px; border-radius: 999px; background: #e2e2e6; transition: background-color .2s; }
.cfg-toggle__knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.cfg-toggle input:checked + .cfg-toggle__track { background: #DA2438; }
.cfg-toggle input:checked + .cfg-toggle__track .cfg-toggle__knob { transform: translateX(20px); }
.cfg-toggle input:focus-visible + .cfg-toggle__track { box-shadow: 0 0 0 3px rgba(218,36,56,.25); }
.cfg-sum__total { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; color: rgba(26,17,16,.7); border-top: 1px solid #f0f0f2; padding-top: 12px; margin-top: 4px; }
.cfg-sum__total b { font-size: 24px; color: #1A1110; }
.cfg-sum__credit { font-size: 13px; color: rgba(26,17,16,.6); margin-top: 4px; }
.cfg-sum__credit b { color: #DA2438; }
/* «Не хватает» — список, отделён серой линией от цены */
.cfg-sum__miss { margin-top: 14px; padding-top: 14px; border-top: 1px solid #f0f0f2; }
.cfg-sum__miss-title { font-size: 13px; font-weight: 700; color: #DA2438; margin-bottom: 8px; }
.cfg-sum__miss-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.cfg-sum__miss-list li { position: relative; padding-left: 16px; font-size: 13px; line-height: 1.35; color: rgba(26,17,16,.7); }
.cfg-sum__miss-list li::before { content: ""; position: absolute; left: 3px; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: #DA2438; }
.cfg-sum__buy { width: 100%; margin-top: 14px; border: none; background: #DA2438; color: #fff; font-size: 15px; font-weight: 700; padding: 14px; border-radius: 12px; cursor: pointer; transition: background .15s; }
.cfg-sum__buy:hover { background: #c21f31; }
.cfg-sum__buy:disabled { background: #e5e5e8; color: #a0a0a6; cursor: default; }
/* сборка уже в корзине — кнопка ведёт в корзину, поэтому не акцентная */
.cfg-sum__buy--go { background: #fff; color: #1A1110; border: 1px solid rgba(26,17,16,.25); }
.cfg-sum__buy--go:hover { background: #fff; border-color: #DA2438; color: #DA2438; }
/* проблемы совместимости в сводке */
.cfg-sum__issues { margin-top: 14px; padding-top: 14px; border-top: 1px solid #f0f0f2; }
.cfg-sum__issues-title { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.cfg-sum__issues ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.cfg-sum__issues li { position: relative; padding-left: 16px; font-size: 13px; line-height: 1.35; color: rgba(26,17,16,.7); }
.cfg-sum__issues li::before { content: ""; position: absolute; left: 3px; top: 7px; width: 5px; height: 5px; border-radius: 50%; }
.cfg-sum__issues--hard .cfg-sum__issues-title { color: #DA2438; }
.cfg-sum__issues--hard li::before { background: #DA2438; }
.cfg-sum__issues--soft .cfg-sum__issues-title { color: #B45309; }
.cfg-sum__issues--soft li::before { background: #EF9709; }
.cfg-sum__ok { margin-top: 14px; padding: 8px 10px; font-size: 13px; color: #17A03C; background: rgba(23,195,54,.08); border-radius: 8px; }

/* «Поделиться» / «Очистить» — как в корзине */
.bsk-actions { display: flex; gap: 10px; margin-top: 8px; }
.bsk-actions__btn { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border: none; background-color: rgba(218,36,56,.08); border-radius: 12px; color: #DA2438; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color .2s, color .2s; }
.bsk-actions__btn:hover:not(:disabled) { background-color: rgba(218,36,56,.16); }
.bsk-actions__btn:disabled { background-color: rgba(26,17,16,.05); color: #b6b6bc; cursor: default; }
.bsk-actions__btn--clear { background-color: rgba(26,17,16,.05); color: rgba(26,17,16,.6); }
.bsk-actions__btn--clear:hover:not(:disabled) { background-color: rgba(218,36,56,.1); color: #DA2438; }

/* Модалка подтверждения (стиль корзины) */
.bsk-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.bsk-modal[hidden] { display: none; }
.bsk-modal__overlay { position: absolute; inset: 0; background: rgba(26,17,16,.45); animation: bskFade .18s ease; }
.bsk-modal__box { position: relative; width: 100%; max-width: 380px; background: #fff; border-radius: 20px; padding: 28px 24px 24px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.25); animation: bskPop .2s ease; }
.bsk-modal__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 14px; border-radius: 50%; background: rgba(218,36,56,.1); color: #DA2438; }
.bsk-modal__title { margin: 0 0 8px; font-size: 20px; font-weight: 700; }
.bsk-modal__text { margin: 0 0 22px; font-size: 14px; line-height: 1.45; color: rgba(26,17,16,.6); }
.bsk-modal__actions { display: flex; gap: 10px; }
.bsk-modal__btn { flex: 1 1 0; display: flex; align-items: center; justify-content: center; height: 48px; border: none; border-radius: 12px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background-color .2s, color .2s; }
.bsk-modal__btn--cancel { background: rgba(26,17,16,.06); color: #1A1110; }
.bsk-modal__btn--cancel:hover { background: rgba(26,17,16,.12); }
.bsk-modal__btn--confirm { background: #DA2438; color: #fff; }
.bsk-modal__btn--confirm:hover { background: #F01B33; }
@keyframes bskFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bskPop { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* Тост */
.bsk-toast { position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(20px); z-index: 9999; background: #1A1110; color: #fff; font-size: 14px; padding: 12px 20px; border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.25); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.bsk-toast--show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── попап выбора (клиентский список) ── */
.cfg-picker { position: fixed; inset: 0; z-index: 1200; display: none; }
.cfg-picker.is-open { display: block; }
.cfg-picker__overlay { position: absolute; inset: 0; background: rgba(20,15,16,.5); }
.cfg-picker__panel { position: absolute; top: 3vh; left: 50%; transform: translateX(-50%); width: min(1440px, 96vw); height: 94vh; background: #fff; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,.35); animation: cfgPop .2s ease; }
@keyframes cfgPop { from { opacity: 0; transform: translateX(-50%) translateY(14px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.cfg-picker__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 12px; }
.cfg-picker__title { font-size: 20px; font-weight: 700; color: #1A1110; }
.cfg-picker__close { border: none; background: none; font-size: 30px; line-height: 1; color: #9a9aa0; cursor: pointer; padding: 2px 8px; }
.cfg-picker__close:hover { color: #DA2438; }

.cfg-picker__tools { display: flex; align-items: center; gap: 10px; padding: 0 22px 14px; flex-wrap: wrap; }
.cfg-picker__search { flex: 0 1 340px; min-width: 150px; height: 42px; border: 1px solid rgba(26,17,16,.15); border-radius: 12px; padding: 0 14px; font-size: 14px; color: #1A1110; outline: none; transition: border-color .15s; }
.cfg-picker__search:focus { border-color: #DA2438; }

/* переключатель вида (плитка/список) — как в каталоге */
.cfg-picker__view { display: inline-flex; gap: 4px; padding: 4px; background: #fff; border: 1px solid rgba(26,17,16,.15); border-radius: 12px; flex: 0 0 auto; }
.cfg-picker__view-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: none; background: none; border-radius: 8px; color: rgba(26,17,16,.38); cursor: pointer; transition: background-color .15s, color .15s; }
.cfg-picker__view-btn:hover { color: #1A1110; }
.cfg-picker__view-btn.is-active { background: #F3F4F6; color: #DA2438; }
.cfg-picker__view-btn svg { width: 16px; height: 16px; fill: currentColor; }

/* сортировка — кастомный выпадающий список */
.cfg-sort { position: relative; flex: 0 0 auto; }
.cfg-sort__btn { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px; border: 1px solid rgba(26,17,16,.15); border-radius: 12px; background: #fff; font-size: 14px; font-weight: 400; color: #1A1110; cursor: pointer; transition: border-color .15s; }
.cfg-sort__btn:hover { border-color: #DA2438; }
.cfg-sort__chev { width: 12px; height: 12px; flex: 0 0 auto; color: rgba(26,17,16,.45); transition: transform .2s; }
.cfg-sort__btn[aria-expanded="true"] .cfg-sort__chev { transform: rotate(180deg); }
.cfg-sort__menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 210px; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid rgba(26,17,16,.1); border-radius: 12px; box-shadow: 0 12px 32px rgba(20,15,16,.16); z-index: 20; display: none; }
.cfg-sort__menu.is-open { display: block; }
.cfg-sort__opt { padding: 9px 12px; border-radius: 8px; font-size: 14px; color: #1A1110; cursor: pointer; transition: background-color .12s; }
.cfg-sort__opt:hover { background: #F3F4F6; }
.cfg-sort__opt.is-active { color: #DA2438; font-weight: 600; }

/* переключатель «Только совместимые» */
.cfg-picker__compat { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border: 1px solid rgba(26,17,16,.15); border-radius: 12px; font-size: 14px; color: #1A1110; cursor: pointer; white-space: nowrap; transition: border-color .15s; }
.cfg-picker__compat:hover { border-color: #DA2438; }
.cfg-picker__compat input { accent-color: #DA2438; cursor: pointer; }
.cfg-picker__compat-short { display: none; }

/* кнопка «Перейти в каталог» */
.cfg-picker__full { margin-left: auto; display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border: 1px solid rgba(26,17,16,.15); border-radius: 12px; font-size: 14px; font-weight: 600; color: #1A1110; text-decoration: none; white-space: nowrap; transition: border-color .15s, color .15s, background-color .15s; }
.cfg-picker__full:hover { border-color: #DA2438; color: #DA2438; background: rgba(218,36,56,.04); }

/* двухколоночный слой: фильтры слева, сетка справа */
.cfg-picker__layout { flex: 1 1 auto; display: flex; min-height: 0; border-top: 1px solid #f0f0f2; }
.cfg-picker__filters { flex: 0 0 330px; overflow-y: auto; padding: 16px 12px 20px; border-right: 1px solid #f0f0f2; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
/* тонкий скроллбар в попапе */
.cfg-picker__filters, .cfg-picker__grid, .catalog__filters-check { scrollbar-width: thin; scrollbar-color: rgba(26,17,16,.22) transparent; }
.cfg-picker__filters::-webkit-scrollbar, .cfg-picker__grid::-webkit-scrollbar, .catalog__filters-check::-webkit-scrollbar { width: 6px; }
.cfg-picker__filters::-webkit-scrollbar-thumb, .cfg-picker__grid::-webkit-scrollbar-thumb, .catalog__filters-check::-webkit-scrollbar-thumb { background: rgba(26,17,16,.22); border-radius: 3px; }
.cfg-picker__filters::-webkit-scrollbar-track, .cfg-picker__grid::-webkit-scrollbar-track, .catalog__filters-check::-webkit-scrollbar-track { background: transparent; }
.cfg-picker__grid { flex: 1 1 auto; overflow-y: auto; padding: 16px 22px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-content: start; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.cfg-picker__foot { padding: 8px 22px 14px; font-size: 12px; color: #9a9aa0; text-align: center; }
.cfg-picker__empty { grid-column: 1 / -1; padding: 60px 20px; text-align: center; color: #8f8f95; font-size: 15px; }
.cfg-picker__sentinel { grid-column: 1 / -1; height: 1px; }

/* фильтры — вид каталога (классы из template_styles.css) */
.cfg-filters__head { display: flex; align-items: center; justify-content: space-between; margin: 0 clamp(14px,1vw,18px) 14px; }
.cfg-filters__head span { font-size: 16px; font-weight: 700; color: #1A1110; }
.cfg-filters__reset { border: none; background: none; font-size: 12px; color: #DA2438; cursor: pointer; padding: 2px 4px; }
.cfg-filters__reset:disabled { color: #c4c4c8; cursor: default; }
.cfg-picker__filters .catalog__filters-item { border-bottom: 1px solid rgba(26,17,16,.07); padding-top: 14px !important; }
.cfg-picker__filters .catalog__filters-item:last-child { border-bottom: none; }
.cfg-picker__filters .catalog__filters-item-title { margin-bottom: 10px !important; }
.cfg-picker__filters .catalog__filters-item-title i { transition: transform .2s; }
.cfg-picker__filters .catalog__filters-item-title.is-collapsed i { transform: rotate(-90deg); }
.cfg-picker__filters .catalog__filters-item-title.is-collapsed + .bx-filter-block { display: none; }
.cfg-picker__filters .catalog__price-box { display: flex; gap: 8px; margin-bottom: 12px; border: none; border-radius: 0; overflow: visible; }
.cfg-picker__filters .catalog__price-label { position: relative; width: 50%; border: none !important; }
.cfg-picker__filters .catalog__price-label::before { position: absolute; left: 12px; top: 0; bottom: 0; display: flex; align-items: center; font-size: 13px; color: #9a9a9a; pointer-events: none; z-index: 1; }
.cfg-picker__filters .catalog__price-label:first-child::before { content: "от"; }
.cfg-picker__filters .catalog__price-label:last-child::before { content: "до"; }
.cfg-picker__filters .catalog__price-input { width: 100%; height: 44px; background: #F3F4F6; border: 1.5px solid transparent; border-radius: 10px; padding: 0 12px 0 34px; font-size: 14px; font-weight: 700; color: #1A1110; box-sizing: border-box; transition: border-color .15s, background-color .15s; }
.cfg-picker__filters .catalog__price-input:focus { border-color: #DA2438; background: #fff; outline: none; }

/* ползунок цены */
.cfg-price__slider { position: relative; height: 22px; margin: 2px 9px 4px; }
.cfg-price__rail { position: absolute; left: 0; right: 0; top: 9px; height: 4px; background: #e6e6ea; border-radius: 2px; }
.cfg-price__fill { position: absolute; top: 0; bottom: 0; background: #DA2438; border-radius: 2px; }
.cfg-price__range { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 22px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.cfg-price__range::-webkit-slider-runnable-track { height: 22px; background: none; border: none; }
.cfg-price__range::-moz-range-track { height: 22px; background: none; border: none; }
.cfg-price__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: #fff; border: 3px solid #DA2438; box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer; pointer-events: auto; }
.cfg-price__range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid #DA2438; box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer; pointer-events: auto; }

/* карточка — вид каталога */
.cfg-picker__grid .catalog__card-item { transition: border-color .12s, box-shadow .12s; }
.cfg-picker__grid .catalog__card-item:hover { border-color: rgba(218,36,56,.35) !important; box-shadow: 0 6px 18px rgba(20,15,16,.08); }
.cfg-picker__grid .catalog__card-item:nth-child(2n+2) { border-left: 1px solid rgba(26,17,16,.08) !important; border-right: 1px solid rgba(26,17,16,.08) !important; }
.cfg-picker__grid .catalog__card-item.is-chosen-cfg { background: rgba(26,17,16,.02); }
.cfg-picker__grid .catalog__card-item.is-chosen-cfg .catalog__card-btn { background: #fff !important; color: #1A1110 !important; border: 1px solid rgba(26,17,16,.25) !important; }
.cfg-picker__grid .catalog__card-btn { width: 100%; text-align: center; cursor: pointer; }
.cfg-picker__grid .catalog__card-imgwrap { cursor: pointer; }
.cfg-card-spec { font-size: 11px; color: #8f8f95; margin: 2px 0 6px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cfg-card-warn { font-size: 11px; line-height: 1.3; color: #B45309; background: rgba(239,151,9,.1); border-radius: 6px; padding: 4px 7px; margin-bottom: 6px; }

/* компактный масштаб карточек в попапе */
.cfg-picker__grid { gap: 12px; }
.cfg-picker__grid .catalog__card-item { padding: 12px !important; }
.cfg-picker__grid .catalog__card-imgwrap { height: 130px !important; margin-bottom: 10px !important; }
.cfg-picker__grid .catalog__card-tag-two-item { font-size: 11px !important; padding: 3px 8px !important; }
.cfg-picker__grid .catalog__card-title { font-size: 13px !important; height: 34px !important; -webkit-line-clamp: 2; margin: 6px 0 8px !important; }
.cfg-picker__grid .catalog__card-new { font-size: 17px !important; }
.cfg-picker__grid .catalog__card-old { font-size: 12px !important; }
.cfg-picker__grid .catalog__card-credit { font-size: 11px !important; margin-top: 2px !important; }
.cfg-picker__grid .catalog__card-disc { font-size: 11px !important; padding: 3px 8px !important; }
.cfg-picker__grid .catalog__card-btn { height: 40px !important; font-size: 13px !important; }
/* кнопка всегда прижата к низу карточки — не «прыгает», если нет характеристик */
.cfg-picker__grid .catalog__card__content { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.cfg-picker__grid .catalog__card-bottom { margin-top: auto !important; padding-top: 10px; }

/* ── вид «список» ── */
.cfg-picker__grid.is-list { display: flex; flex-direction: column; gap: 8px; }
.cfg-picker__grid.is-list .catalog__card-item { flex-direction: row; align-items: center; gap: 16px; padding: 10px 16px !important; }
.cfg-picker__grid.is-list .catalog__card-imgwrap { flex: 0 0 64px !important; width: 64px !important; height: 64px !important; margin: 0 !important; }
.cfg-picker__grid.is-list .catalog__card-disc { display: none; }
.cfg-picker__grid.is-list .catalog__card__content { flex: 1 1 auto; display: grid; grid-template-columns: 1fr auto 170px; align-items: center; column-gap: 18px; row-gap: 2px; }
.cfg-picker__grid.is-list .catalog__card-tag-two { grid-column: 1; grid-row: 1; margin: 0; }
.cfg-picker__grid.is-list .catalog__card-title { grid-column: 1; grid-row: 2; height: auto !important; margin: 2px 0 0 !important; -webkit-line-clamp: 2; }
.cfg-picker__grid.is-list .cfg-card-spec { grid-column: 1; grid-row: 3; margin: 2px 0 0; }
.cfg-picker__grid.is-list .catalog__card-price { grid-column: 2; grid-row: 1 / 4; align-self: center; text-align: right; white-space: nowrap; }
.cfg-picker__grid.is-list .catalog__card-credit { display: none; }
.cfg-picker__grid.is-list .catalog__card-bottom { grid-column: 3; grid-row: 1 / 4; align-self: center; margin: 0 !important; }
.cfg-picker__grid.is-list .catalog__card-btn { width: 100% !important; }
.cfg-picker__grid.is-list .cfg-picker__sentinel,
.cfg-picker__grid.is-list .cfg-picker__empty { grid-column: auto; }

/* скелетон */
.cfg-skel { pointer-events: none; }
.cfg-skel__img { height: 150px; background: #eef0f2; border-radius: 10px; margin-bottom: 10px; }
.skel-line { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg,#eef0f2 25%,#e3e6e9 37%,#eef0f2 63%); background-size: 400% 100%; animation: cfgSkel 1.2s ease infinite; margin: 8px 0; }
.skel-line--w80 { width: 80%; } .skel-line--w60 { width: 60%; } .skel-line--w40 { width: 40%; }
@keyframes cfgSkel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* срок готовности */
.cfg-sum__ready { display: flex; align-items: center; gap: 7px; margin-top: 10px; padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; color: #17A03C; background: rgba(23,195,54,.08); }
.cfg-sum__ready.is-order { color: #B45309; background: rgba(239,151,9,.1); }
.cfg-sum__ready svg { flex: 0 0 auto; }

/* шторка фильтров в попапе — элементы только для мобильной версии.
   На десктопе обёртка «прозрачная», чтобы фильтры остались обычной колонкой. */
.cfg-picker__fdrawer { display: contents; }
.cfg-picker__foverlay,
.cfg-picker__ffoot,
.cfg-picker__fhandle,
.cfg-picker__fhead,
.cfg-picker__fab { display: none; }

/* ── текстовый блок для поисковиков ──
   Две колонки: во всю ширину контейнера строка вышла бы под 180 символов — нечитаемо. */
.cfg-seo { margin-top: 28px; padding: 26px 28px 28px; background: #fff; border: 1px solid #ececee; border-radius: 16px; }
/* 620px ≈ 78 знаков в строке. .container тут 1400px, поэтому текст на всю ширину
   давал бы ~170 знаков — глазу не за что зацепиться. Остаток забирает FAQ. */
.cfg-seo__cols { display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 1fr); gap: 28px 56px; align-items: start; }
.cfg-seo__title { font-size: 19px; font-weight: 700; color: #1A1110; margin: 0 0 12px; }
.cfg-seo__subtitle { font-size: 15px; font-weight: 700; color: #1A1110; margin: 22px 0 10px; }
.cfg-seo p { font-size: 14px; line-height: 1.65; color: rgba(26,17,16,.68); margin: 0 0 10px; }
.cfg-seo p:last-child { margin-bottom: 0; }

.cfg-seo__links { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.cfg-seo__links a { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; background: #F3F4F6;
    border-radius: 999px; font-size: 13px; color: #1A1110; text-decoration: none; transition: background-color .15s, color .15s; }
.cfg-seo__links a:hover { background: #DA2438; color: #fff; }

/* вопросы — спойлеры, как в истории заказов */
.cfg-seo__qa { border-top: 1px solid #f0f0f2; }
.cfg-seo__qa:last-child { border-bottom: 1px solid #f0f0f2; }
.cfg-seo__qa summary { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 13px 0; font-size: 14px; font-weight: 600; color: #1A1110; cursor: pointer; list-style: none;
    -webkit-tap-highlight-color: transparent; }
.cfg-seo__qa summary::-webkit-details-marker { display: none; }
.cfg-seo__qa summary::after { content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin-right: 4px;
    border-right: 2px solid #b6b6bc; border-bottom: 2px solid #b6b6bc; transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s; }
.cfg-seo__qa[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.cfg-seo__qa summary:hover { color: #DA2438; }
.cfg-seo__qa > p { padding: 0 0 14px; }

/* мобильная нижняя панель */
.cfg-mbar { display: none; }

/* ── адаптив ── */
@media (max-width: 1300px) { .cfg-picker__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1050px) { .cfg-picker__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 991px) {
    /* align-items: flex-start в колонке сжимает список по контенту — растягиваем */
    .cfg__layout { flex-direction: column; align-items: stretch; }
    .cfg__list { width: 100%; }
    .cfg__summary { position: static; flex: 1 1 auto; width: 100%; max-height: none; overflow: visible; }
    /* строка складывается: категория сверху, позиции ниже */
    .cfg-row { grid-template-columns: 1fr; gap: 12px; padding: 12px 14px; }
    .cfg-row__item { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
    .cfg-row__pic { flex: 0 0 44px; }
    .cfg-row__info { flex: 1 1 60%; }
    .cfg-row__nogap { display: none; }
    .cfg-row__price { margin-left: auto; text-align: right; }
    .cfg-picker__panel { top: 0; left: 0; transform: none; width: 100%; height: 100%; border-radius: 0; animation: none; }
    .cfg-picker__full { display: none; }
    .cfg-picker__view { display: none; }
    .cfg-picker__grid { grid-template-columns: repeat(2, 1fr); }

    /* компактный тулбар: поиск отдельной строкой, остальное — одним рядом */
    .cfg-picker__tools { gap: 8px; padding: 0 14px 12px; }
    /* 16px обязательны: при меньшем шрифте iOS зумит страницу на фокусе */
    .cfg-picker__search { order: -1; flex: 1 1 100%; height: 40px; border-radius: 10px; font-size: 16px; }
    .catalog__filters-search, .cfg-picker__filters .catalog__price-input { font-size: 16px; }
    .cfg-picker__compat, .cfg-sort__btn { height: 38px; font-size: 13px; border-radius: 10px; }
    .cfg-picker__compat { padding: 0 10px; gap: 6px; }
    .cfg-picker__compat-long { display: none; }
    .cfg-picker__compat-short { display: inline; }
    .cfg-sort__btn { padding: 0 10px; gap: 6px; }
    .cfg-sort__label { display: inline-block; max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cfg-sort__menu { min-width: 190px; }

    /* карточки ниже — на экран помещается больше товаров */
    .cfg-picker__grid .catalog__card-item { padding: 10px !important; }
    .cfg-picker__grid .catalog__card-imgwrap { height: 112px !important; margin-bottom: 8px !important; }
    .cfg-picker__grid .catalog__card-title { font-size: 12.5px !important; }
    .cfg-picker__grid .catalog__card-btn { height: 38px !important; }
    /* фильтры — шторка снизу вверх, как в каталоге.
       Позиционируется от .cfg-picker__panel (а не от __layout), иначе шторка
       не накрывает строку «показано/скрыто», а затемнение — шапку и тулбар.
       z-index выше 20 — столько у выпадающего списка сортировки. */

    .cfg-picker__fdrawer { display: flex; flex-direction: column; position: absolute; z-index: 31;
        left: 0; right: 0; bottom: 0; max-height: 86%;
        background: #fff; border-radius: 20px 20px 0 0; box-shadow: 0 -8px 40px rgba(0,0,0,.22);
        transform: translateY(101%); transition: transform .26s ease; }
    .cfg-picker.is-filters-open .cfg-picker__fdrawer { transform: translateY(0); }

    .cfg-picker__fhandle { display: block; width: 40px; height: 4px; margin: 8px auto 0;
        border-radius: 999px; background: rgba(26,17,16,.18); }
    .cfg-picker__fhead { display: flex; align-items: center; justify-content: space-between;
        padding: 12px 20px 10px; }
    .cfg-picker__fhead-title { display: inline-flex; align-items: center; gap: 9px;
        font-size: 19px; font-weight: 700; color: #1A1110; }
    .cfg-picker__fclose { display: flex; align-items: center; justify-content: center;
        width: 34px; height: 34px; border: none; border-radius: 50%; background: #F3F4F6;
        font-size: 22px; line-height: 1; color: #1A1110; cursor: pointer; }

    /* сам список фильтров — прокручиваемая середина */
    .cfg-picker__filters { position: static; flex: 1 1 auto; width: auto; max-width: none;
        border-right: none; padding: 0 20px 12px; overflow-y: auto; min-height: 0; }
    .cfg-picker__filters .cfg-filters__head { display: none; } /* заголовок и сброс — в шапке и футере */
    .cfg-picker__filters .catalog__filters-item { padding: 0 !important; border-bottom: none; }
    .cfg-picker__filters .catalog__filters-item:not(:last-child) {
        padding-bottom: 14px !important; margin-bottom: 14px !important;
        border-bottom: 1px solid rgba(26,17,16,.07); }
    .cfg-picker__filters .catalog__filters-item-title { margin-bottom: 12px !important; padding: 2px 0 !important; }
    /* Длинные списки (производители и т.п.) не растягивают шторку: у каждой группы
       своя прокручиваемая область, как в каталоге. Без этого до следующей группы
       приходится листать десятки значений. */
    .cfg-picker__filters .catalog__filters-check {
        max-height: 232px !important; overflow-y: auto;
        padding: 2px 6px 2px 2px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
    /* палец, а не курсор: увеличиваем зону нажатия у каждого значения */
    .cfg-picker__filters .catalog__filters-check-item:not(:last-child) { margin-bottom: 4px !important; }
    .cfg-picker__filters .catalog__filters-label { padding: 7px 0 !important; }

    .cfg-picker__foverlay { display: block; position: absolute; inset: 0; z-index: 30; background: rgba(26,17,16,.5);
        opacity: 0; visibility: hidden; transition: opacity .26s, visibility .26s; }
    .cfg-picker.is-filters-open .cfg-picker__foverlay { opacity: 1; visibility: visible; }

    /* нижняя панель шторки: Сбросить + Показать */
    .cfg-picker__ffoot { display: flex; flex: 0 0 auto; gap: 10px;
        padding: 12px 20px calc(14px + env(safe-area-inset-bottom, 0px));
        background: #fff; border-top: 1px solid rgba(26,17,16,.08); }
    .cfg-picker__freset { flex: 0 0 auto; height: 52px; padding: 0 20px; border: none; border-radius: 14px;
        background: #F3F4F6; color: #1A1110; font-size: 15px; font-weight: 700; cursor: pointer; }
    .cfg-picker__fapply { flex: 1 1 auto; height: 52px; border: none; border-radius: 14px;
        background: #DA2438; color: #fff; font-size: 16px; font-weight: 700; cursor: pointer;
        box-shadow: 0 8px 20px rgba(218,36,56,.3); }

    /* плавающая кнопка фильтров — один в один с .catalog__mfilter-btn из каталога
       (белая, красная иконка), только над строкой «показано/скрыто», а не над навбаром сайта */
    .cfg-picker__fab { display: inline-flex; align-items: center; gap: 8px; position: absolute; z-index: 22;
        left: 14px; bottom: calc(46px + env(safe-area-inset-bottom, 0px));
        padding: 12px 20px; border: 1px solid rgba(26,17,16,.12); border-radius: 999px;
        background: #fff; color: #1A1110; font-size: 15px; font-weight: 700; cursor: pointer;
        box-shadow: 0 8px 24px rgba(26,17,16,.18);
        transition: opacity .18s ease, transform .18s ease; }
    .cfg-picker__fab svg { color: #DA2438; }
    /* уезжает вместе со шторкой, а не пропадает рывком */
    .cfg-picker.is-filters-open .cfg-picker__fab { opacity: 0; transform: translateY(12px); pointer-events: none; }
    /* последний ряд карточек не должен уходить под кнопку */
    .cfg-picker__grid { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
    .cfg-picker__fab-badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px;
        display: inline-flex; align-items: center; justify-content: center; background: #DA2438; color: #fff;
        border-radius: 999px; font-size: 11px; font-weight: 700; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
    /* без этого display:inline-flex перебивает [hidden] и на кнопке висит «0» */
    .cfg-picker__fab-badge[hidden] { display: none; }

    .gpc-hero { margin-bottom: 16px; }
    .cfg-seo { padding: 18px 16px 20px; border-radius: 14px; }
    .cfg-seo__cols { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .cfg-seo__title { font-size: 17px; }
}
/* ── Нижняя панель: только там, где есть мобильный навбар сайта (.bottom-nav, ≤767px) ── */
@media (max-width: 767px) {
    /* стоит НАД навбаром сайта: он 56px, z-index 100 — как панель на детальной товара */
    .cfg-mbar { display: block; position: fixed; z-index: 60; left: 0; right: 0; bottom: 56px;
        padding: 9px 14px 11px;
        background: #fff; border-top: 1px solid rgba(26,17,16,.1); box-shadow: 0 -4px 16px rgba(0,0,0,.08); }
    .cfg-mbar:empty, .cfg-mbar:not(.is-on) { display: none; }
    .cfg-mbar__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
    .cfg-mbar__label { font-size: 12px; color: rgba(26,17,16,.6); }
    .cfg-mbar__ready { font-size: 12px; font-weight: 600; color: #17A03C; }
    .cfg-mbar__bar { height: 5px; border-radius: 999px; background: #eeeef1; overflow: hidden; }
    .cfg-mbar__fill { display: block; height: 100%; border-radius: 999px; background: #DA2438; transition: width .3s ease; }
    .cfg-mbar__fill.is-full { background: #17A03C; }
    .cfg-mbar__row { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
    .cfg-mbar__price { display: flex; flex-direction: column; line-height: 1.15; margin-right: auto; }
    .cfg-mbar__total { font-size: 19px; font-weight: 800; color: #1A1110; white-space: nowrap; }
    .cfg-mbar__credit { font-size: 11px; color: rgba(26,17,16,.55); white-space: nowrap; }
    .cfg-mbar__buy { flex: 0 0 auto; min-width: 150px; height: 44px; padding: 0 18px; border: none; border-radius: 12px;
        background: #DA2438; color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; }
    .cfg-mbar__buy.is-go { background: #fff; color: #1A1110; border: 1px solid rgba(26,17,16,.25); }
    .cfg-mbar__buy:disabled { background: #e5e5e8; color: #a0a0a6; }

    /* то, что переехало в панель, в сводке не дублируем */
    .cfg__summary .cfg-progress,
    .cfg__summary .cfg-sum__total,
    .cfg__summary .cfg-sum__credit,
    .cfg__summary .cfg-sum__ready,
    .cfg__summary .cfg-sum__buy { display: none; }

    /* чат не должен налезать на панель — тем же приёмом, что на детальной товара */
    body.cfg-has-mbar .online-chat-root-TalkMe #supportTrigger,
    body.cfg-has-mbar #supportTrigger { bottom: calc(190px + env(safe-area-inset-bottom, 0px)) !important; }

    .cfg-main { padding-bottom: 130px; }
}

@media (max-width: 560px) {
    /* padding-bottom не сокращаем: под ним прячется плавающая кнопка фильтров */
    .cfg-picker__grid { grid-template-columns: 1fr 1fr; gap: 10px;
        padding: 12px 12px calc(78px + env(safe-area-inset-bottom, 0px)); }
    .cfg-picker__head { padding: 14px 14px 10px; }
    .cfg-picker__title { font-size: 17px; }
    /* строка категории: значок и название в одну линию, кнопки во всю ширину */
    .cfg-row { padding: 12px; }
    .cfg-btn--primary { display: flex; align-items: center; justify-content: center; width: 100%; }
    .cfg-row__line { flex-wrap: wrap; }
    .cfg-sum__buy { padding: 15px; }
    .bsk-actions__btn { height: 46px; font-size: 13px; }
}