/* ============================================================
   3D-каталог — дополнительные стили (поверх styles.css).
   Только классы 3D-карточек и страницы каталога. Шапку/hero/
   футер/кнопки/секции берём из styles.css (фирменный стиль).
   ============================================================ */
:root{
  --stage:radial-gradient(120% 120% at 50% 18%,#1b3766 0%,#0d2348 55%,#081a36 100%);
}

/* ---- 3D model card ---- */
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.mcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  overflow:hidden;display:flex;flex-direction:column;transition:.22s}
.section--dark .mcard{background:var(--navy-2);border-color:rgba(255,255,255,.10)}
.mcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-h);border-color:transparent}
.mstage{position:relative;height:240px;background:var(--stage);cursor:grab;overflow:hidden}
.mstage:active{cursor:grabbing}
.mstage model-viewer{width:100%;height:100%;--poster-color:transparent}
.mstage__badge{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:6px;
  background:rgba(8,22,44,.62);color:#fff;border:1px solid rgba(255,255,255,.18);
  padding:5px 11px;border-radius:20px;font-size:12px;font-weight:700;backdrop-filter:blur(6px);
  pointer-events:none;z-index:2}
.mstage__badge .ic{width:14px;height:14px}
.mstage__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:10px;color:#fff;background:linear-gradient(180deg,rgba(8,22,44,.05),rgba(8,22,44,.30));
  border:none;cursor:pointer;font-family:inherit;font-weight:700;font-size:13px;letter-spacing:.02em;
  transition:opacity .2s;opacity:0;z-index:1}
.mstage:hover .mstage__play,.mstage:focus-within .mstage__play{opacity:1}
.mstage__play .pcircle{width:56px;height:56px;border-radius:50%;background:var(--grad-orange);
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(244,122,32,.5)}
.mstage__play .pcircle svg{width:24px;height:24px;fill:#fff;stroke:none;margin-left:3px}
.mcard.loaded .mstage__play{display:none}
.mmeta{padding:14px 16px 16px}
.mmeta .mcat{font-size:11.5px;color:var(--orange-d);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.section--dark .mmeta .mcat{color:var(--orange-2)}
.mmeta .mname{font-size:16px;font-weight:700;margin:5px 0 4px;line-height:1.25;color:var(--ink)}
.section--dark .mmeta .mname{color:#fff}
.mmeta .mdim{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:6px}
.mmeta .mdim .ic{width:15px;height:15px}
.section--dark .mmeta .mdim{color:#a9bad3}
.mmeta__row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:11px}
.mtag{font-size:11px;font-weight:700;color:var(--navy);background:#eaf1fb;padding:3px 9px;
  border-radius:9px;border:1px solid var(--line)}
.section--dark .mtag{background:rgba(255,255,255,.10);color:#dbe6f4;border-color:rgba(255,255,255,.14)}
.mqty{font-size:11.5px;color:var(--muted)}
.section--dark .mqty{color:#9fb1ca}

/* subtle dimension markers (model-viewer hotspots) */
.hs{
  --min-hotspot-opacity:0;                 /* hide markers that go behind the model */
  background:rgba(13,35,72,.55);color:#eaf1fb;
  border:1px solid rgba(255,255,255,.22);border-radius:5px;
  padding:1px 5px;font:600 9.5px/1.35 'Manrope',sans-serif;letter-spacing:.02em;
  white-space:nowrap;pointer-events:none;opacity:.62;backdrop-filter:blur(2px);
  transition:opacity .2s;
}
.mstage:hover .hs{opacity:.9}

/* center CTA under featured grid */
.threed-more{display:flex;justify-content:center;margin-top:40px}

/* ---- Catalog page ---- */
.cathero{background:var(--grad-navy);color:#fff;padding:46px 0 38px}
.cathero h1{font-size:40px;font-weight:800;letter-spacing:-.6px;line-height:1.1}
.cathero p{color:#c3d2e8;margin-top:10px;font-size:17px;max-width:660px}
.crumbs{display:flex;gap:8px;align-items:center;font-size:13px;color:#9fb1ca;margin-bottom:16px}
.crumbs a:hover{color:#fff}
.toolbar{position:sticky;top:74px;z-index:30;background:rgba(233,240,249,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:14px 0}
.toolbar__row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:#fff;color:var(--ink);border:1px solid var(--line);min-height:40px;padding:8px 15px;
  border-radius:30px;font-size:13.5px;font-weight:600;cursor:pointer;transition:.18s;font-family:inherit;
  display:inline-flex;align-items:center;gap:7px}
.chip:hover{border-color:var(--orange)}
.chip[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
.chip .cnt{font-size:11px;opacity:.7}
.search{margin-left:auto;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
  border-radius:30px;padding:0 14px;min-height:40px;min-width:210px}
.search .ic{color:var(--muted)}
.search input{border:none;outline:none;background:none;font-family:inherit;font-size:14px;padding:9px 0;width:100%;color:var(--ink)}
.catcount{padding:22px 0 6px;color:var(--muted);font-size:14px}
.catcount b{color:var(--ink)}
.empty{text-align:center;color:var(--muted);padding:60px 20px}
.catwrap{background:var(--bg);padding:8px 0 80px}

@media (max-width:640px){
  .cathero h1{font-size:30px}
  .search{margin-left:0;width:100%}
  .toolbar{top:64px}
}
@media (prefers-reduced-motion:reduce){
  .mcard:hover{transform:none}
}