/* Profile page spacing (issue 1186, Rajeev 2026-11-11: clear boundaries, nothing touches another edge).
   Layout approved: "approve layout i1186: yes". Rule values: 8px between controls and inside bars (space.2),
   16px between the last bar and the content (space.3), bars never overlap. Rule: docs/rebuild/SPACING_RULE.md.
   Scoped by .profile-clear (top bar, tab bar and content wrapper) so shop, craft and other pages that share .spNav / .scrollNav are untouched.
   Extended for shop and craft detail pages (issue 1186 follow-up, layout approved: "approve layout i1186b: yes"): the same bar rules on their
   top bar, and the first section starts 16px below the bar (header 64 or 56 + 72 = bar bottom + 16; at 480px and below the section top is the
   56px header while the bar sits at 85, so 101).
   Offsets: the top bar sits at 56px (header height), 64px from 1280px up, 85px at 480px and below. */
.spNav.profile-clear { height: 56px; align-items: stretch; }
.spNav.profile-clear li a { display: flex; align-items: center; height: 56px; padding: 0 16px; font-size: 11.5px; }
.spNav.profile-clear li a:after { bottom: 0; }
.spNav.profile-clear li.btnCollab { margin-left: 8px; }
.spNav.profile-clear li.btnCollab a { border-left: 0; padding: 8px 16px; }
.spNav.profile-clear li.btnCollab a span { display: flex; align-items: center; height: 40px; padding: 0 16px; font-size: 11px; letter-spacing: .08em; }
.scrollNav.proRelTab.profile-clear { top: 112px; height: 44px; box-shadow: none; }
#scrollNav.profile-clear { display: flex; overflow-x: auto; white-space: nowrap; }
#scrollNav.profile-clear ul { display: flex; gap: 8px; margin: 0 auto; padding: 0 8px; list-style: none; }
#scrollNav.profile-clear li a { padding: 0 16px; font-size: 11px; }
#scrollNav.profile-clear li a span { padding: 14px 0 10px; }
.snCntWrap.pvptopCnt.profile-clear { padding-top: 116px; }
.vsptopbanner.profile-clear, .craftCntWrap.profile-clear { padding-top: 72px; }
@media (min-width: 1280px) {
    .scrollNav.proRelTab.profile-clear { top: 120px; }
}
@media (max-width: 768px) {
    .spNav.profile-clear li a { padding: 0 10px; font-size: 11px; }
    .spNav.profile-clear li.btnCollab a span { padding: 0 12px; font-size: 10.5px; }
    #scrollNav.profile-clear li a { padding: 0 12px; }
}
@media (max-width: 480px) {
    .spNav.profile-clear { top: 85px; }
    .scrollNav.proRelTab.profile-clear { top: 141px; }
    .snCntWrap.pvptopCnt.profile-clear { padding-top: 145px; }
    .vsptopbanner.profile-clear, .craftCntWrap.profile-clear { padding-top: 101px; }
    /* Shop and craft detail on a phone (Rajeev, 2026-11-12: shrink to the desktop proportion): .detail-bar closes the 29px strip under the header
       (bar at 56), 48px bar, 36px button with 6px clear, content 12px below the bar (56 + 48 + 12 - 56 = 60). */
    .spNav.profile-clear.detail-bar { top: 56px; height: 48px; }
    .spNav.profile-clear.detail-bar li a { height: 48px; }
    .spNav.profile-clear.detail-bar li.btnCollab { margin-left: 6px; }
    .spNav.profile-clear.detail-bar li.btnCollab a { padding: 6px 12px; }
    .spNav.profile-clear.detail-bar li.btnCollab a span { height: 36px; padding: 0 12px; }
    .vsptopbanner.profile-clear.detail-bar, .craftCntWrap.profile-clear.detail-bar { padding-top: 60px; }
}