/* Listing3D branding on top of the page theme: the header logo and the product label.
   The accent colour itself lives in theme.css (--accent) and in the "stencil" type preset in hero-options.js. */

.mark { display: inline-flex; align-items: center; gap: 10px; }
.mark .mark__logo { width: 26px; height: 28px; flex: none; }
/* The type presets in hero-options.js restyle .mark for the display font; the wordmark keeps the Listing3D look. */
.mark .mark__word { font: 600 19px/1 var(--body); letter-spacing: -0.01em; text-transform: none; }
.mark .mark__word b { font-weight: 600; color: var(--accent); }
.mark .mark__product {
  margin-left: 4px; padding: 5px 0 4px 12px; border-left: 1px solid var(--line);
  font: 500 9.5px/1 var(--label); letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; opacity: 0.8;
}
/* Over a dark part of the scene the header turns light (see .g-tl-d in theme.css); the 3D keeps the blue readable there too. */
.g-tl-d .mark .mark__product { border-left-color: rgba(243, 239, 230, 0.5); }


@media (max-width: 760px) {
  .mark .mark__product { display: none; }
  .mark .mark__logo { width: 22px; height: 24px; }
  .mark .mark__word { font-size: 17px; }
}