/* Icon sizing that must apply before the rest of the CSS parses.
 *
 * Without this, SVGs render at their intrinsic size for one frame and the page
 * flashes with enormous icons — most visibly the theme-picker orbs, which lose
 * their layout entirely and stack down the page.
 *
 * This used to be a <style> element injected by assets/theme-init.js. That is
 * an inline stylesheet no matter that a script created it, so `style-src 'self'`
 * blocks it — see server/security_headers.py. As a real stylesheet linked ahead
 * of theme.css it keeps both the timing and the cascade position it had.
 */

svg.ico,
svg.brand-mark {
  width: 18px;
  height: 18px;
  max-width: 100%;
  max-height: 100%;
  flex-shrink: 0;
  display: block;
}

/* Catalog search icons omit .ico; without this they flash at intrinsic size
   whenever catalog.css is briefly absent (soft-nav leave / first paint). */
.search-wrap > svg {
  width: 14px;
  height: 14px;
  max-width: 100%;
  max-height: 100%;
  flex-shrink: 0;
  display: block;
}

.cat-trigger-chevron {
  width: 14px;
  height: 14px;
  max-width: 100%;
  max-height: 100%;
  flex-shrink: 0;
  display: block;
}

.brand-icon {
  width: 1.55rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.brand-icon svg {
  width: 1.55rem;
  height: 1.55rem;
}

.auth-brand-mark,
.landing-brand-mark {
  width: 1.35rem;
  height: 1.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.auth-brand-mark svg,
.landing-brand-mark svg {
  width: 1.15rem;
  height: 1.15rem;
}