/* 书店分区（配合 assets/js/shop-sections.js，全站书店页共用） */

/* 顶部分区按钮：方角细框，点一下跳到对应分区 */
.shop-sections-nav{
  display:flex;flex-wrap:wrap;gap:10px;
  flex:1;
}
.shop-section-chip{
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:0 16px;
  background:#FFFFFF;color:#171717;
  border:1.5px solid #171717;border-radius:0;
  font:inherit;font-size:14px;font-weight:800;line-height:1;
  cursor:pointer;
  transition:background-color .2s,color .2s;
}
.shop-section-chip span{font-size:12px;font-weight:700;color:#6E6A63}
.shop-section-chip:hover{background:#171717;color:#FFFFFF}
.shop-section-chip:hover span{color:rgba(255,255,255,.7)}
.shop-section-chip.is-free::before{content:"";width:8px;height:8px;border-radius:50%;background:#2C8A58}

/* 按钮栏吸在导航栏和公告条下方；滚动后加一条细阴影区分内容 */
.shop-top-row.shop-top-row--sticky{
  position:sticky;top:var(--shop-sticky-top,120px);z-index:40;
  background:#FAFAF8;
  padding-top:12px;padding-bottom:12px;
  transition:box-shadow .2s;
}
.shop-top-row.is-stuck{box-shadow:0 8px 16px -12px rgba(23,23,23,.35)}
.shop-section-chip.is-active{background:#171717;color:#FFFFFF}
.shop-section-chip.is-active span{color:rgba(255,255,255,.7)}

/* 分区标题：占满整行，放在卡片网格里 */
.shop-section-head{
  grid-column:1 / -1;
  display:flex;align-items:baseline;gap:12px;
  margin:28px 0 2px;
  scroll-margin-top:140px;
}
.shop-section-head:first-child{margin-top:4px}
.shop-section-title{
  margin:0;
  font-family:"Noto Serif SC","Songti SC",serif;
  font-size:26px;font-weight:900;line-height:1.2;letter-spacing:-.02em;
  color:#171717;
}
.shop-section-count{font-size:13px;font-weight:700;color:#6E6A63}

@media (max-width:760px){
  .shop-sections-nav{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin:0 -18px;padding:2px 18px 4px;
  }
  .shop-sections-nav::-webkit-scrollbar{display:none}
  .shop-section-chip{flex:none;min-height:40px;padding:0 14px;font-size:13px}
  .shop-section-head{margin-top:22px}
  .shop-section-title{font-size:22px}
}