/* Self-hosted Material Symbols Outlined.
   Replaces the external Google Fonts dependency (fonts.gstatic.com) so the icon
   glyphs never fall back to their raw ligature names ("sanitizer", "medical_services", ...)
   when a visitor's browser blocks or is slow to reach Google (privacy extensions,
   ad/tracker blockers, slow networks). The .woff2 lives in web/fonts/. */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  /* block (NOT swap): for an ICON font the fallback glyph is the raw ligature
     name ("check_circle", "expand_more", "shopping_bag"). swap paints that raw
     text until the woff2 arrives — the "weird codes" flash. block keeps the icon
     invisible during the (short, preloaded) load window, so the raw word is never
     shown; the glyph simply fades in. This is Google's recommendation for the
     Material Symbols icon font. Paired with a <link rel=preload> in the head so
     the invisible window is near-zero. */
  font-display: block;
  src: url('../fonts/material-symbols-outlined.woff2') format('woff2');
}
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}
/* Definitive no-raw-ligature-flash gate: keep every Material Symbol INVISIBLE until
   the icon font is confirmed loaded, then reveal. font-display:block only hides the
   raw word ("check_circle", "expand_more") for its ~3s block window — after that, or
   on a slow font, the word paints. This class (added by the inline boot script in the
   head, see Magento_Theme/templates/html/preload-fonts.phtml) removes that failure
   mode entirely: the raw word is never shown; the glyph simply fades in once ready.
   visibility (not display) reserves the icon's box, so there is zero layout shift. */
.material-symbols-outlined { visibility: hidden; }
.ms-fonts-ready .material-symbols-outlined { visibility: visible; }