/* Profile summary layout correction.
   Desktop keeps the three public summary facts as compact cards.
   Mobile turns the same facts into one shared horizontal strip.
   Owner-only Orders/Stores remain available in their detailed profile sections
   instead of consuming header space. */

/* The current owner profile supplies five header stats in this order:
   Followers, Following, Orders, Stores, Member since.
   Keep only the three public summary facts in the presentation header. */
.profile-stats:has(> .profile-stat:nth-child(5)) > .profile-stat:nth-child(3),
.profile-stats:has(> .profile-stat:nth-child(5)) > .profile-stat:nth-child(4) {
  display: none;
}

/* Desktop / website: three compact individual cards on one row. */
.profile-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.profile-stat {
  min-height: 68px !important;
  padding: 9px 12px !important;
}

.profile-stats strong {
  margin-top: 4px !important;
  font-size: clamp(17px, 2vw, 21px) !important;
}

/* Mobile: one continuous three-part summary bar instead of separate cards. */
@media (max-width: 640px) {
  .profile-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin: 12px 10px 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid var(--profile-border);
    border-radius: var(--profile-radius);
    background: var(--profile-surface);
  }

  .profile-stat,
  .profile-preview--mobile .profile-stat {
    min-height: 62px !important;
    padding: 8px 6px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .profile-stat + .profile-stat {
    border-left: 1px solid var(--profile-border) !important;
  }

  /* Hidden owner-only stats must not create phantom dividers. */
  .profile-stats:has(> .profile-stat:nth-child(5)) > .profile-stat:nth-child(5) {
    border-left: 1px solid var(--profile-border) !important;
  }

  .profile-stats span {
    font-size: 8px !important;
    line-height: 1.15 !important;
    letter-spacing: .06em !important;
  }

  .profile-stats strong,
  .profile-preview--mobile .profile-stat strong {
    margin-top: 4px !important;
    font-size: 16px !important;
    line-height: 1.15 !important;
  }

  .profile-stats small {
    margin-top: 2px !important;
    font-size: 9px !important;
  }
}

@media (max-width: 360px) {
  .profile-stats span {
    font-size: 7px !important;
    letter-spacing: .035em !important;
  }

  .profile-stats strong,
  .profile-preview--mobile .profile-stat strong {
    font-size: 15px !important;
  }
}