@media (max-width: 767px) {
  #asProfile .pp-overview.pp-mobile-order {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  #asProfile .pp-overview.pp-mobile-order > .pp-main-column {
    width: 100%;
    gap: 16px;
  }
  #asProfile .pp-mobile-order .pp-gifts-card .gifts-items {
    margin: 8px 0 !important;
  }
  /* The visitors retain their six columns when moved out of the desktop sidebar. */
  #asProfile .pp-mobile-order .pp-visitors-card #users_visit {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    align-items: start;
    padding: 4px 0;
    min-width: 0;
  }
  #asProfile .pp-mobile-order .pp-visitors-card #users_visit .user_visit {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    min-width: 0;
    aspect-ratio: 1;
    margin: 0;
    padding: 0;
  }
  #asProfile .pp-mobile-order .pp-visitors-card #users_visit .user_visit > img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    object-fit: cover;
  }
  #asProfile .pp-mobile-order .pp-visitors-card #users_visit > .empty-element {
    grid-column: 1 / -1;
  }
}

/* Use theme variables directly, outside the legacy palette rewriting pass. */
@supports (--private-theme-static: 1) {
  @media (max-width: 767px) {
    html body #asProfile .pp-hero-overlay.pp-custom-cover {
      display: block;
      min-height: 0;
      padding: 0;
      background-color: var(--pf-panel) !important;
      background-image: var(--pf-fill) !important;
    }
    html body #asProfile .pp-hero-overlay.pp-custom-cover .pp-cover {
      position: relative;
      inset: auto;
      width: 100%;
      height: auto;
      min-height: 0;
      aspect-ratio: 24 / 5;
      border-radius: 19px 19px 0 0;
    }
    html body #asProfile .pp-hero-overlay.pp-custom-cover .pp-cover > .pp-cover-media {
      object-fit: contain !important;
      object-position: center !important;
    }
    html body #asProfile .pp-hero-overlay.pp-custom-cover .pp-cover::after {
      content: none !important;
      display: none !important;
    }
    html body #asProfile .pp-hero-overlay.pp-custom-cover .pp-hero-main {
      --pp-hero-text: var(--pf-text);
      --pp-hero-muted: var(--pf-muted);
      margin: 0;
      border-radius: 0 0 19px 19px;
      color: var(--pf-text);
    }
    html body #asProfile .pp-hero-overlay.pp-custom-cover .pp-heading {
      text-shadow: none !important;
    }
    html body #asProfile .pp-hero-overlay.pp-custom-cover :is(.pp-status, .pp-hero-summary, .pp-hero-summary strong, .as-profile-meta-value, .pp-personal-status) {
      color: var(--pf-text) !important;
      -webkit-text-fill-color: var(--pf-text) !important;
      text-shadow: none !important;
    }
    html body #asProfile .pp-hero-overlay.pp-custom-cover :is(.pp-metric > span, .as-profile-meta-label, .pp-chevron) {
      color: var(--pf-muted) !important;
      -webkit-text-fill-color: var(--pf-muted) !important;
      text-shadow: none !important;
    }
    html body #asProfile .pp-hero-overlay.pp-has-cover.pp-custom-cover .pp-hero-main :is(.pp-menu > summary, .pp-primary-actions a) {
      background-color: var(--pf-panel) !important;
      background-image: var(--pf-fill) !important;
      color: var(--pf-text) !important;
      -webkit-text-fill-color: var(--pf-text) !important;
      border-color: var(--pf-border) !important;
    }
    html body #asProfile .pp-hero-overlay.pp-has-cover.pp-custom-cover .pp-hero-main :is(.pp-menu > summary, .pp-primary-actions a):focus-visible {
      outline-color: var(--pf-accent) !important;
    }
  }
}