/* Every Bootstrap icon is exactly 1em wide once its font has loaded (all 2,078 glyphs measured, 2026-11-06).
   Before that (slow network, first visit, hard reload) the invisible placeholder is ~.78em wide, so every
   icon and the words beside it jumped 4-11px sideways when the font arrived - the navbar "jerked" on reload.
   Reserving the 1em box changes nothing after load and removes the jump. :where() = no specificity. */
:where(.bi, [class^="bi-"], [class*=" bi-"])::before {
    width: 1em;
}

/* Icon next to a text label (buttons, chips, links, badges): see icon-label-align.js.
   The icon is centred on the line box, but Thai (and Latin) letters are drawn in the lower
   part of their line box (tone marks and upper vowels take the top), so the icon looked
   1-2px higher than the words in every button. Nudging the icon down by a font-relative
   amount puts its drawing level with the body of the text.
   `top` (not transform) so spin/pulse animations on the icon are untouched. */
.hi-label-icon {
    position: relative;
    top: .065em;
}

/* Measured (4x pixels, 2026-11-06): the magnifier's handle pulls its drawing up, and this bold 17.6px
   label sits lower than most - the hero search button needs a little more than the shared nudge. */
.btn-main-action > .hi-label-icon {
    top: .13em;
}
/* Same button below 576px: the label is hidden, the icon stands alone and measured 1px high in the box. */
.btn-main-action > .bi-search:not(.hi-label-icon) {
    position: relative;
    top: .06em;
}