/* v452 — official home heading and mobile-header repair.
   The owner requested a compact utility row: the glyphs become visually
   smaller, but their 40px control boxes remain so the header stays tappable. */

.site-header .header-utility-icon svg {
  width: 18px;
  height: 18px;
}
.site-header .header-utility-icon .fav-dot {
  min-width: 15px;
  height: 15px;
  padding-inline: 3px;
  font-size: 9px !important;
  line-height: 15px;
}

@media (max-width: 600px) {
  /* The title/tagline does not wrap below the utility row. The configured
     official tagline is still available as the page H1, so nothing meaningful
     is hidden from mobile visitors. */
  .site-header .header-inner { gap: 4px; }
  .site-header .brand { gap: 6px; min-width: 0; }
  .site-header .brand-text {
    display: block;
    max-width: 78px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* v411 declares the branded tagline with !important under the bazaar root;
     match that specificity so it cannot reappear underneath a utility icon. */
  :root[data-dg-bazaar] .site-header .brand-text small { display: none !important; }
  .site-header .header-actions { gap: 2px; }
  .site-header .header-actions .header-utility-icon svg { width: 17px; height: 17px; }
  .site-header .header-favorite { display: inline-grid !important; }
}

@media (max-width: 360px) {
  /* Five 40px tap targets already fill a 320px utility row. The logo is the
     stable brand marker at this width; hiding the clipped text is clearer
     than letting an orphan ellipsis sit beneath the theme control. */
  :root[data-dg-bazaar] .site-header .brand-text { display: none; }
}