/* 一整圈手串缩略图：珠子沿圆周摆开，看起来就是成品的一串（取代原来的 5 颗花簇）
   background-size 放到 216%，和画布里「把照片浅灰背景挤出圆形」的放大倍数一致 */
.ring{position:relative;flex:0 0 auto;}
.ring i{
  position:absolute;border-radius:50%;
  background-size:216%;background-position:center;
  box-shadow:inset 0 -3px 6px rgba(0,0,0,.2), 0 2px 5px rgba(0,0,0,.18);
}

/* 商城 */
.hero{
  height:148px;border-radius:18px;overflow:hidden;margin-bottom:16px;
  background:linear-gradient(135deg,#f0e8dc,#e4d7c4);position:relative;
  box-shadow:0 10px 24px -14px rgba(120,100,70,.5);
}
.hero img{width:100%;height:100%;object-fit:cover;display:block;}

.caps{display:flex;gap:9px;overflow-x:auto;padding:2px 0 14px;scrollbar-width:none;}
.caps::-webkit-scrollbar{display:none;}
.cap{
  flex:0 0 auto;padding:8px 17px;border-radius:999px;
  font-size:13px;color:var(--ink-2);background:var(--bg-2);
  border:1px solid transparent;transition:.2s;
}
.cap.on{background:linear-gradient(180deg,#1d1d1f,#2b2b2e);color:#fff;font-weight:600;box-shadow:0 5px 14px -6px rgba(0,0,0,.55);}
.caps.gold .cap.on{background:linear-gradient(180deg,#d7b878,#b08d4a);box-shadow:0 5px 14px -6px rgba(160,130,70,.8);}

.search{
  display:flex;align-items:center;gap:9px;
  height:42px;padding:0 16px;border-radius:999px;
  background:var(--bg-2);border:1px solid var(--line-2);margin-bottom:15px;
}
.search svg{width:17px;height:17px;stroke:var(--muted);stroke-width:1.9;flex:0 0 auto;}
.search input{flex:1;border:none;outline:none;background:none;font-family:inherit;font-size:13.5px;color:var(--ink);}
.search input::placeholder{color:var(--muted-2);}