/* ===== Profile layout (uses your existing variables) ===== */
.profile{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap:22px;
  padding-top:22px;
}
@media (max-width:1000px){
  .profile{ grid-template-columns:1fr; }
}

/* Gallery */
.profile-gallery .gallery-frame{
  position:relative;
  background:linear-gradient(180deg,#171922,#10131a);
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  overflow:hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 4/5; /* tall look like reference */
}
.profile-gallery .gallery-frame img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.02);
  transition:opacity .35s ease, transform .35s ease;
}
.profile-gallery .gallery-frame img.active{
  opacity:1; transform:scale(1);
}
.g-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(17,18,24,.6); color:#fff;
  display:grid; place-items:center; cursor:pointer;
  box-shadow:0 6px 14px rgba(0,0,0,.35);
}
.g-nav:hover{ background:rgba(17,18,24,.8); }
.g-nav.prev{ left:10px } .g-nav.next{ right:10px }

.thumbs{
  display:grid; grid-template-columns:repeat(6,1fr); gap:8px;
  margin-top:10px;
}
.thumbs .thumb{
  width:100%; aspect-ratio: 4/5; object-fit:cover; cursor:pointer;
  border-radius:10px; border:1px solid rgba(255,255,255,.08);
  opacity:.8; transition:opacity .2s ease, box-shadow .2s ease;
}
.thumbs .thumb.active,
.thumbs .thumb:hover{ opacity:1; box-shadow:0 0 0 2px var(--ring); }

/* Info panel */
.profile-info .p-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:14px;
  background:linear-gradient(180deg,#161a22,#0f1219);
  border:1px solid rgba(255,255,255,.06); border-radius:16px;
}
.p-name{ margin:0 0 6px; font-size:28px }
.p-meta{ display:flex; gap:10px; flex-wrap:wrap; color:var(--muted) }
.p-cta{ display:flex; gap:8px; flex-wrap:wrap }
.p-cta .btn{ padding:10px 14px; border-radius:12px }

/* Accordions */
.pane{
  margin-top:12px;
  background:linear-gradient(180deg,#141822,#0f1219);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px; overflow:hidden;
}
.pane > summary{
  cursor:pointer; padding:12px 14px; font-weight:700; list-style:none;
}
.pane[open] > summary{ border-bottom:1px solid rgba(255,255,255,.06) }
.pane > summary::-webkit-details-marker{display:none}
.pane .pane-body{ padding:12px 14px; color:#cbd1db }

.rates{ width:100%; border:1px solid rgba(255,255,255,.06); border-radius:10px; overflow:hidden }
.rates .row{ display:grid; grid-template-columns:1.2fr .8fr .8fr; }
.rates .row > span{ padding:10px 12px; border-top:1px solid rgba(255,255,255,.06) }
.rates .head{ background:#121620; font-weight:700; }
.rates .head > span{ border-top:0 }

.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px }
.stats div{ display:grid; grid-template-columns:1fr 1fr; gap:8px; border:1px solid rgba(255,255,255,.06); border-radius:10px; padding:8px 10px }
.stats dt{ color:var(--muted) }
.stats dd{ margin:0; font-weight:600 }

.tags{ display:flex; gap:8px; flex-wrap:wrap; padding:0; margin:0 }
.tags li{
  list-style:none; padding:6px 10px; font-size:13px; border-radius:999px;
  border:1px solid rgba(255,255,255,.1); background:linear-gradient(180deg,#181c24,#0f1219);
}

/* Reuse your gold CTA */
.btn-gold{
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:#111; font-weight:800; border:0;
  box-shadow:0 10px 28px rgba(212,175,55,.28);
}

/* “You may also like” cards height */
#recommended .card img,
#new .card img,
.grid .card img{ aspect-ratio:4/3; }
.muted{ color:var(--muted) } .sm{ font-size:13px }