/* Global PixNest fixes */
@media (max-width: 860px){
  #navLinks.show{display:flex !important;}
  .nav-links{z-index:1200;}
}

body.pixnest-page-index .category-grid.pixnest-swipe-row{
  display:flex !important;
  grid-template-columns:none !important;
  overflow-x:auto;
  gap:16px;
  padding-bottom:10px;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}
body.pixnest-page-index .category-grid.pixnest-swipe-row::-webkit-scrollbar,
.pixnest-chip-bar::-webkit-scrollbar{height:6px;}
body.pixnest-page-index .category-grid.pixnest-swipe-row > *,
body.pixnest-page-index .category-grid.pixnest-swipe-row .category-card{
  flex:0 0 min(82vw, 320px);
  max-width:min(82vw, 320px);
  scroll-snap-align:start;
}

.locked-card img{
  filter:none !important;
  transform:none !important;
}
.locked-card::before{
  content:'Premium' !important;
  background:#facc15 !important;
  color:#111827 !important;
  border:1px solid rgba(250,204,21,.45) !important;
}

.pill.premium,
.lock-note strong{
  background:#facc15 !important;
  color:#111827 !important;
}

.photo-card,
.visual-card,
.creator-profile-card,
.creator-profile-shell{
  min-width:0;
}

@media (max-width: 860px){
  .creator-profile-card,
  .creator-profile-shell,
  .creator-card,
  .creator-card-body,
  .creator-top,
  .creator-head,
  .creator-main,
  .creator-meta,
  .creator-stats,
  .creator-social-proof,
  .creator-actions,
  .creator-posts-grid{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .creator-top,
  .creator-head,
  .creator-main{
    flex-direction:column !important;
    align-items:flex-start !important;
  }

  .creator-social-proof,
  .creator-stats,
  .creator-posts-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }

  .creator-actions,
  .lightbox-actions{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

.photo-card-image,
.photo-card-image img{
  width:100%;
}
body.pixnest-page-featured .photo-card{
  height:100%;
  border-radius:24px;
}
body.pixnest-page-featured .photo-card-image{
  min-height:280px;
  aspect-ratio:auto;
}
body.pixnest-page-featured .photo-card-image img{
  height:100%;
  object-fit:cover;
}
body.pixnest-page-featured .photo-card-body{
  flex:1;
}

.action-icon,
.lightbox-actions button,
.lightbox-social,
.creator-action-btn,
.search-btn,
.btn,
.mini-btn{
  background:rgba(255,255,255,.10) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:0 10px 26px rgba(0,0,0,.14);
  transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.action-icon:hover,
.lightbox-actions button:hover,
.lightbox-social:hover,
.creator-action-btn:hover,
.search-btn:hover,
.btn:hover,
.mini-btn:hover,
.action-icon.pixnest-clicked,
.lightbox-actions button.pixnest-clicked,
.lightbox-social.pixnest-clicked,
.creator-action-btn.pixnest-clicked,
.search-btn.pixnest-clicked,
.btn.pixnest-clicked,
.mini-btn.pixnest-clicked{
  background:#facc15 !important;
  color:#111827 !important;
  border-color:#facc15 !important;
}

.pixnest-chip-bar{
  display:flex;
  align-items:center;
  gap:10px;
  overflow-x:auto;
  padding-bottom:8px;
  margin-bottom:18px;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}
.pixnest-chip-bar button{
  flex:0 0 auto;
  scroll-snap-align:start;
  min-height:44px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:#111827;
  color:#cbd5e1;
  cursor:pointer;
  font-weight:700;
}
.pixnest-chip-bar button.is-active{
  background:#facc15;
  color:#111827;
  border-color:#facc15;
}

body.pixnest-page-featured .toolbar{
  background:#111827;
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  padding:16px;
  box-shadow:0 14px 28px rgba(0,0,0,.16);
}
body.pixnest-page-featured .search-input,
body.pixnest-page-featured .search-select{
  min-height:54px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:#0f172a;
}

/*
 * Improved mobile layout for creator profile cards.  On small
 * viewports the default lightbox creator card often feels cramped
 * and misaligned because its elements were designed for a desktop
 * two‑column layout.  The rules below reorganise the card into a
 * vertically stacked panel with centred content, larger avatar and
 * clear separation between sections.  They apply only on screens
 * narrower than 600px to avoid disrupting the desktop/tablet design.
 */
@media (max-width: 600px) {
  .creator-profile-shell {
    background:#0f172a;
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
    box-shadow:0 12px 32px rgba(0,0,0,.24);
    overflow:hidden;
  }

  .creator-profile-card {
    margin:0;
    padding:18px 14px;
    background:#111827;
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px;
    box-shadow:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:12px;
  }

  /* Stack the top section elements vertically */
  .creator-top {
    flex-direction:column !important;
    align-items:center !important;
    gap:10px !important;
    padding-right:0 !important;
    width:100%;
  }

  .creator-avatar {
    width:88px !important;
    height:88px !important;
    margin:0 auto 6px;
    border-width:2px;
  }

  .creator-top-main {
    flex:none !important;
    min-width:0 !important;
    width:100% !important;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
  }

  .creator-name-line {
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
  }

  .creator-name-line strong {
    font-size:20px !important;
  }

  .creator-social-proof,
  .creator-menu-actions {
    width:100% !important;
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    gap:12px !important;
    margin-top:8px;
  }

  .creator-social-proof > *,
  .creator-menu-actions > * {
    flex:1 1 45% !important;
    min-width:100px;
    text-align:center;
  }

  .follow-btn,
  .creator-menu-actions button {
    width:100% !important;
    max-width:none !important;
    justify-content:center !important;
  }
}