/* Подсказки поиска (.ss-*) — общие стили перенесены в sfera-base.css (14.10.2026) */

/* ── Демо каталога: карточки групп ─────────────────────────────────────────── */
.cd-search{position:relative;max-width:760px;margin:0 0 28px}
.cd-search input{width:100%;height:56px;border:2px solid var(--purple);border-radius:14px;padding:0 56px 0 20px;font:600 17px var(--fb);color:var(--text);background:var(--white);outline:none;box-shadow:var(--sh)}
.cd-search input:focus{border-color:var(--accent)}
.cd-search svg{position:absolute;right:18px;top:16px;width:24px;height:24px;color:var(--purple);pointer-events:none}
.cd-search .ss-drop{width:100%}

.cg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cg-card{position:relative;background:var(--gray-100);border:2px solid var(--purple-light);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .2s,background-color .2s;box-shadow:0 3px 14px rgba(46,43,126,.08)}
/* верхние полосы убраны (Александр 14.10.2026): выделяется весь контур карточки */
/* Карточки групп серые; при наведении — белые, приближаются (без поворотов) и рамка становится толще (Александр 14.10.2026) */
.cg-card:hover{background:var(--white);transform:scale(1.035);box-shadow:0 0 0 1px var(--purple),0 24px 48px rgba(46,43,126,.28);border-color:var(--purple);z-index:2}

.cg-img{display:grid;grid-template-columns:3fr 2fr;grid-template-rows:1fr 1fr;gap:6px;height:220px;padding:18px 18px 6px;background:transparent}
.cg-img img{width:100%;height:100%;min-height:0;object-fit:contain;mix-blend-mode:multiply;transition:transform .3s}
.cg-img .cg-i1{grid-row:1 / 3}
.cg-img--1{grid-template-columns:1fr}
.cg-img--2 .cg-i2{grid-row:1 / 3}
.cg-card:hover .cg-i1{transform:scale(1.04)}
.cg-body{padding:16px 20px 20px;display:flex;flex-direction:column;flex:1}
.cg-title{font-family:var(--fh);font-size:20px;font-weight:900;color:var(--purple-dark);line-height:1.2;margin-bottom:8px}
.cg-title a::after{content:'';position:absolute;inset:0;z-index:1}
.cg-count{align-self:flex-start;background:#FFF1EA;color:var(--accent-hover);font-size:13px;font-weight:800;border-radius:999px;padding:3px 10px;margin-bottom:12px}
.cg-subs{list-style:none;display:flex;flex-direction:column;gap:6px;margin-bottom:14px;position:relative;z-index:2}
.cg-subs a{display:flex;justify-content:space-between;gap:8px;font-size:14px;font-weight:600;color:var(--gray-600);padding:2px 0;border-bottom:1px dashed transparent}
.cg-subs a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.cg-subs span{color:var(--gray-400);font-weight:700;font-size:13px}
.cg-more{margin-top:auto;font-size:14px;font-weight:800;color:var(--purple)}
.cg-card:hover .cg-more{color:var(--accent)}
.cg-card:hover .cg-title{color:var(--purple)}
@media(prefers-reduced-motion:reduce){.cg-card,.cg-card:hover{transition:none;transform:none}}

/* ── Подбор по конструкции (внизу каталога) ────────────────────────────────── */
.cp-wrap{margin-top:56px;background:var(--white);border-radius:16px;padding:32px;box-shadow:var(--sh)}
.cp-wrap h2{font-family:var(--fh);font-size:26px;font-weight:900;color:var(--purple-dark);margin-bottom:6px}
.cp-wrap>p{font-size:15px;color:var(--text-muted);margin-bottom:22px;max-width:760px}
.cp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.cp-card{display:flex;gap:12px;align-items:flex-start;border:2px solid var(--gray-100);border-radius:12px;padding:12px;transition:border-color .2s,background .2s}
.cp-card:hover{border-color:var(--accent);background:#FFF8F4}
.cp-card img{flex:0 0 64px;width:64px;height:64px;object-fit:contain;background:var(--gray-50);border-radius:8px}
.cp-card b{display:block;font-family:var(--fh);font-size:16px;font-weight:900;color:var(--purple-dark);margin-bottom:4px}
.cp-card ul{list-style:none;display:flex;flex-direction:column;gap:2px}
.cp-card li a{font-size:13px;font-weight:600;color:var(--gray-600)}
.cp-card li a:hover{color:var(--accent);text-decoration:underline}

.cd-note{background:#FFF8E1;border:2px dashed #E8A10A;border-radius:12px;padding:12px 16px;margin:0 0 20px;font-size:14px;font-weight:700;color:#7A5300}

@media(max-width:1100px){.cg-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){.cg-grid{grid-template-columns:repeat(2,1fr);gap:12px}.cg-img{height:150px;padding:10px 10px 4px}.cg-body{padding:12px 14px 14px}.cg-title{font-size:16px}.cg-subs a{font-size:13px}.cp-wrap{padding:20px}}
@media(max-width:420px){.cg-subs li:nth-child(n+3){display:none}}