/* ============================================================
   catalog.css — каталог: каркас, фильтры, тулбар, чипсы,
   сетка, карточки, выпадающий цвет, конфигуратор
   ============================================================ */

/* ---------- каркас каталога ---------- */
.catalog{display:flex;gap:52px;padding:0 0 80px;align-items:flex-start}
.filters{width:255px;flex-shrink:0}
.content{flex:1;min-width:0}
/* .filters__inner{position:sticky;top:24px;max-height:calc(100vh - 48px);overflow:auto} */
.filters__inner{position:static}

/* ---------- поиск и сортировка ---------- */
.toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:28px 0 20px}
.toolbar>.search{margin-left:auto}
.search{display:flex;align-items:center;border:1px solid #ddd;border-radius:26px;overflow:hidden}
.search input{border:0;outline:0;padding:11px 16px;width:230px;font:inherit}
.search button{border:0;background:#fff;cursor:pointer;padding:0 14px}
.filters-toggle{display:none;align-items:center;gap:8px;padding:11px 18px;border:1px solid #ddd;
  border-radius:26px;background:#fff;cursor:pointer}

/* ---------- фильтры ---------- */
.fgroup{border-bottom:1px solid var(--line);padding:2px 0 14px;margin-bottom:8px}
.fgroup summary{cursor:pointer;font-weight:600;font-size:16px;list-style:none;
  display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.fgroup summary::-webkit-details-marker{display:none}
.fgroup summary::after{content:"";width:8px;height:8px;border-right:1.5px solid #777;
  border-bottom:1.5px solid #777;transform:rotate(45deg);transition:.2s;margin-right:4px}
.fgroup[open] summary::after{transform:rotate(225deg)}
.cats{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.cats button{background:none;border:0;padding:5px 0;cursor:pointer;text-align:left;font-size:15px}
.cats button:hover{text-decoration:underline}
.cats button.active{font-weight:700}
.check{display:flex;align-items:center;gap:10px;margin:9px 0;cursor:pointer;font-size:15px}
.check input{width:18px;height:18px;accent-color:var(--text);cursor:pointer;flex-shrink:0}
.reset{margin-top:14px;background:none;border:0;color:var(--accent);cursor:pointer;
  padding:6px 0;text-decoration:underline}
.filters__close{display:none;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;
  border-radius:26px;padding:10px 16px;margin-bottom:16px;cursor:pointer}

/* ---------- чипсы ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--bg-soft);
  border-radius:20px;padding:6px 8px 6px 14px;font-size:13px}
.chip button{border:0;background:none;cursor:pointer;color:#999;font-size:12px;padding:2px 5px}
.chip button:hover{color:var(--accent)}
.chip-clear{border:0;background:none;color:var(--accent);cursor:pointer;font-size:13px;text-decoration:underline}

/* ---------- сетка и карточка ---------- */
.result{color:var(--muted);font-size:14px;margin-bottom:22px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 34px;margin-bottom:60px}
.card{display:flex;flex-direction:column;padding:20px;border:1px solid transparent;
  border-radius:var(--radius);transition:.2s;min-width:0}
.card:hover{border-color:var(--line);box-shadow:0 14px 34px rgba(0,0,0,.07)}
.card__img{position:relative;height:290px;display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;cursor:zoom-in;overflow:hidden;background:#fff}
.card__img img{width:100%;height:100%;object-fit:contain;object-position:center;
  transform:scale(.96);transition:transform .3s}
.card:hover .card__img img{transform:scale(.99)}
.card__badge{position:absolute;top:8px;left:8px;background:rgba(255,255,255,.92);
  border:1px solid var(--line);border-radius:16px;padding:4px 12px;font-size:12px;color:var(--muted)}
.card__name{font-size:21px;font-weight:700;margin-bottom:8px}
.card__article{color:var(--muted);font-size:14px;margin-bottom:4px}
.card__spec{color:var(--muted);font-size:13px;margin-bottom:10px}
.card__desc{font-size:14px;line-height:1.45;margin-bottom:12px}
.card__note,.card__cfg{font-size:13px;color:var(--accent);cursor:pointer;margin:-4px 0 12px}
.card__note:hover,.card__cfg:hover{text-decoration:underline}
.card__low{margin-top:auto;display:flex;flex-direction:column}
.card__low .card__price{font-size:18px;font-weight:700;height:26px;
  display:flex;align-items:flex-end;margin:0 0 14px}
.card__low .cfield{height:42px;margin:0 0 14px;display:flex;align-items:center}
.card__low .select{width:100%}
.card__low .select__head{padding:8px 14px}
.card__low .pill{display:flex;align-items:center;gap:8px;padding:8px 14px;
  border:1px solid #ddd;border-radius:26px;font-size:14px;width:100%}
.card__order{margin-top:0}

/* ---------- выпадающий список цвета на карточке ---------- */
.select{position:relative;border:1px solid #ddd;border-radius:26px;background:#fff}
.select__head{display:flex;align-items:center;gap:10px;padding:10px 16px;cursor:pointer;user-select:none}
.select__head .label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chev{font-size:17px;color:#000;font-weight:900;transition:transform .15s;
  background:var(--bg-soft);border-radius:50%;width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative}
.select.open .chev{transform:rotate(180deg)}
/* ===== АНИМАЦИЯ СТРЕЛКИ: активен №1, остальные — закомментированы ===== */

/* №1 ПУЛЬС МЕТКИ: стрелка плавно вверх-вниз */
@keyframes chevNudge{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
.chev{animation:chevNudge 1.5s ease-in-out infinite}
.select.open .chev{animation:none}
@media (prefers-reduced-motion:reduce){.chev{animation:none}}

.select:hover,.select.open{border-color:#8a8a8a}
.select__list{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;
  border:1px solid #e3e3e3;border-radius:16px;list-style:none;z-index:20;
  box-shadow:0 10px 24px rgba(0,0,0,.1);display:none;max-height:300px;overflow:auto}
.select.open .select__list{display:block}
.select__list li{display:flex;align-items:center;gap:10px;padding:10px 16px;cursor:pointer}
.select__list li:hover{background:var(--bg-soft)}
.select__list .cnt{margin-left:auto;font-size:12px}

/* ---------- пустой результат ---------- */
.empty{color:var(--muted);padding:60px 0;text-align:center}
.empty button{margin-top:14px;width:auto;padding:10px 28px}

/* ---------- конфигуратор Loop Modular ---------- */
.cfg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.cfg__side{display:flex;flex-direction:column;gap:10px;min-width:0}
.cfg__side h3{font-size:15px}
.cfg__opts{display:flex;flex-direction:column;gap:4px;max-height:280px;overflow:auto;
  border:1px solid var(--line);border-radius:12px;padding:8px}
.cfg__opt{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:10px;
  cursor:pointer;border:1px solid transparent}
.cfg__opt:hover{background:var(--bg-soft)}
.cfg__opt.active{border-color:var(--accent);background:#f0fbfb}
.cfg__opt img{width:56px;height:42px;object-fit:contain;background:var(--bg-soft);border-radius:6px}
.cfg__opt .nm{flex:1;font-size:14px;min-width:0}
.cfg__opt .pr{font-size:13px;color:var(--muted);white-space:nowrap}
.cfg__view{position:relative;width:100%;height:340px;background:#fff;
  border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.cfg__view img{position:absolute;inset:0;margin:auto;max-width:100%;max-height:100%;
  object-fit:contain}
.cfg__view .cfg__overlay{pointer-events:none}
.cfg__view .cfg__corner{width:38%;right:8px;bottom:8px;left:auto;top:auto;
  background:#fff;border-radius:8px;padding:4px}
.cfg__arts{font-size:13px;color:var(--muted);line-height:1.5}
.cfg__total{display:flex;justify-content:space-between;align-items:center;
  font-weight:700;font-size:17px}

/* ---------- адаптив ---------- */
@media(max-width:1100px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:860px){
  .catalog{flex-direction:column;gap:20px}
  .filters-toggle{display:inline-flex}
  .toolbar>.search{margin-left:0;flex:1}
  .search{flex:1}.search input{width:100%}
  .grid{grid-template-columns:1fr;gap:32px;margin-bottom:40px}
  .filters{position:fixed;inset:0;z-index:90;background:#fff;padding:16px;overflow:auto;
    transform:translateX(-105%);transition:transform .25s;width:100%}
  .filters.open{transform:none}
  .filters__inner{position:static;max-height:none;overflow:visible}
  .filters__close{display:inline-flex}
  .cfg{grid-template-columns:1fr}
}

/* ---- акции и «Под заказ» ---- */
.card__price s, .modal__price s{color:var(--muted);font-weight:400;font-size:14px;margin-right:6px}
.sale-badge{display:inline-block;background:#e53935;color:#fff;border-radius:12px;
  padding:2px 10px;font-size:12px;font-weight:700;vertical-align:2px}
.card__badge--order{left:auto;right:8px;background:#fff7e6;border-color:#eeda9f;color:#8a6d1a}
.order-note{color:#8a6d1a;background:#fff7e6;border:1px solid #eeda9f;border-radius:8px;
  padding:6px 10px;font-size:13px;margin-top:8px}
.modal__contents{margin-top:12px;font-size:14px}
.modal__contents h4{font-size:14px;margin-bottom:6px}
.modal__contents ul{margin-left:18px;line-height:1.5}
.modal__manual{display:inline-block;margin-top:10px;font-size:14px;font-weight:600}