.brand-quick-links {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
}

.brand-social-link {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
  color: #f5eeee;
  background: rgba(255, 255, 255, .045);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.brand-social-link:hover {
  transform: translateY(-1px);
  border-color: rgba(237, 83, 83, .75);
  color: #fff;
  background: rgba(211, 47, 47, .2);
}

.brand-social-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.brand-social-link:disabled:hover { transform: none; border-color: rgba(255, 255, 255, .14); color: #f5eeee; background: rgba(255, 255, 255, .045); }

.brand-social-link svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.brand-social-link .brand-icon-dot { fill: currentColor; stroke: none; }
.brand-social-link .brand-icon-fill { fill: currentColor; stroke: none; }
.brand-social-link--youtube { color: #ff7373; }
.brand-social-link--youtube:hover { color: #ff8a8a; }
.brand-share-button { font: inherit; }

.brand-share-status:empty { display: none; }
.brand-share-status:not(:empty) {
  position: absolute;
  z-index: 20;
  top: calc(100% + 7px);
  right: 0;
  width: max-content;
  max-width: min(280px, 85vw);
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  color: #fff;
  background: #202020;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
  font-size: 11px;
}

.host-header > .brand-quick-links { margin-left: auto; }
.phone-shell > .brand-header > .brand-quick-links { margin-left: auto; }

.brand-socials--public {
  position: absolute;
  z-index: 4;
  top: 20px;
  left: 20px;
}

@media (max-width: 760px) {
  .host-header { flex-wrap: wrap; }
  .host-header > .brand-quick-links { order: 3; margin-left: auto; }
}

@media (max-width: 560px) {
  .phone-shell > .brand-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
  .phone-shell > .brand-header > .status-dot { grid-column: 3; grid-row: 1; margin-left: 0; }
  .phone-shell > .brand-header > .brand-quick-links { grid-column: 1 / -1; grid-row: 2; justify-content: flex-end; margin: 2px 0 0; }
  .brand-social-link { width: 32px; height: 32px; }
  .brand-socials--public { top: 14px; left: 12px; gap: 4px; }
  .brand-socials--public .brand-social-link { width: 30px; height: 30px; padding: 6px; }
}