/* Product illustrations; keep utility controls crisp at 12–20 px. */
.illustrated-icon { display:inline-block; flex:none; vertical-align:middle; pointer-events:none; }
.quick-card .qc-ico {
  display:grid; place-items:center;
  width:calc(38px * var(--ico-scale, 1));
  height:calc(38px * var(--ico-scale, 1));
  filter:none;
}
.quick-card .qc-ico .illustrated-icon { width:100%; height:100%; }
.quick-card { gap:5px; }
.nav-ico { border-width:1px; border-radius:12px; }
.nav-item .nav-ico .illustrated-icon {
  width:34px; height:34px;
  opacity:.84;
  filter:drop-shadow(0 1px 1px rgba(24,29,62,.22));
  transition:opacity .18s ease, transform .18s ease;
}
.nav-item.on:not(.nav-crystal) .nav-ico {
  border-color:rgba(239,237,255,.35);
  background:rgba(231,228,255,.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.nav-item.on .nav-ico .illustrated-icon { opacity:1; transform:translateY(-1px); }
.nav-item.nav-crystal > .nc-gem > .illustrated-icon,
.nav-item.nav-crystal.on > .nc-gem > .illustrated-icon {
  filter:drop-shadow(0 2px 2px rgba(30,33,72,.32));
}
.nav-item.nav-crystal::before { opacity:.38; filter:blur(6px); }
.nav-item.nav-crystal:not(.on):hover > .nc-gem > .illustrated-icon {
  filter:drop-shadow(0 2px 3px rgba(30,33,72,.32));
}
.me-row .mr-ico {
  border:0; border-radius:0; background:none;
}
.me-row .mr-ico .illustrated-icon { width:34px; height:34px; max-width:115%; }
.ext-card .ext-ico { background:none; border:0; box-shadow:none; }
.ext-card .ext-ico .illustrated-icon { width:32px; height:32px; }
@media(max-height:650px) {
  .quick-card .qc-ico { width:30px; height:30px; }
  .me-row .mr-ico .illustrated-icon { width:29px; height:29px; }
}
@media(prefers-reduced-motion:reduce) {
  .nav-item .nav-ico .illustrated-icon { transition:none; }
}