/* goods 模块样式（由模板内联 style 外置，样式定义未改动） */

/* 商品模块样式（从 goods/detail.html 内联 style 外置，样式未做任何改动） */

.goods-img { max-height: 400px; object-fit: contain; }

.price-now { color: #dc3545; font-size: 2rem; font-weight: 700; }

.price-market { color: #999; text-decoration: line-through; }

.goods-card { transition: transform 0.2s; }

.goods-card:hover { transform: translateY(-3px); }

.goods-card img { height: 180px; object-fit: cover; }

.goods-card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; transition: all 0.2s; }

.goods-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--brand-primary); }

.goods-card img { height: 200px; object-fit: cover; width: 100%; }

.goods-card .price { color: var(--color-danger); font-size: 1.1rem; font-weight: 700; }

.sort-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--color-border); margin-bottom: 16px; }

.sort-tabs a { padding: 10px 20px; color: var(--color-text-secondary); text-decoration: none; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.2s; }

.sort-tabs a:hover { color: var(--brand-primary); }

.sort-tabs a.active { color: var(--brand-primary); border-bottom-color: var(--brand-primary); font-weight: 600; }

.cate-sidebar .list-group-item.active { background: var(--brand-primary); border-color: var(--brand-primary); }

/* 每页条数切换按钮 */
        .page-size-btn { display: inline-block; padding: 2px 8px; font-size: .8rem; line-height: 1.5; color: var(--color-text-secondary); text-decoration: none; border: 1px solid var(--color-border); border-radius: 4px; }

.page-size-btn:hover { color: var(--brand-primary); border-color: var(--brand-primary); }

.page-size-btn.active { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); font-weight: 600; }

/* 关键：按钮放在 .sort-tabs 内时，必须提高选择器优先级。
           否则 .sort-tabs a.active（0,2,1）会盖掉 .page-size-btn.active（0,2,0）的 color，
           变成「紫底紫字」完全看不清；同时重置 .sort-tabs a 带来的 padding 与底部边框 */
        .sort-tabs a.page-size-btn { padding: 2px 8px; margin-bottom: 0; border-bottom: 1px solid var(--color-border); }

.sort-tabs a.page-size-btn:hover { color: var(--brand-primary); border-color: var(--brand-primary); }

.sort-tabs a.page-size-btn.active { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); }