﻿/* 1. 工具栏整体高度固定，防止抖动 */
.product-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    padding: 4px 10px;
    border-bottom: 0px solid #eee; /* 细线分隔，更有质感 */
    margin-bottom: 20px;
}

/* 2. 极致方块容器：去掉间隙，让按钮贴在一起（可选） */
.square-group {
    display: flex;
    align-items: center;
    border: 1px solid #ced4da; /* 外边框 */
    border-radius: 4px;
    overflow: hidden;
}

/* 3. 核心：强制正方形按钮 */
.btn-square {
    width: 36px !important; /* 宽度固定 */
    height: 34px !important; /* 高度固定 */
    padding: 0 !important; /* 彻底取消内边距 */
    margin: 0 !important; /* 取消外边距 */
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: none !important; /* 取消自带边框，由父级控制或单独控制 */
    border-right: 1px solid #ced4da; /* 内部中间的分割线 */
    background-color: #fff;
    color: #6c757d;
    border-radius: 0 !important; /* 取消圆角，变回方块 */
    box-shadow: none !important;
}

    /* 最后一个按钮去掉右边框 */
    .btn-square:last-child {
        border-right: none !important;
    }

    /* 激活状态：深色背景，白色图标 */
    .btn-square.active {
        background-color: #000 !important;
        color: #ffffff !important;
    }

/* 4. Filter 按钮：同样锁定高度，保持整齐 */
.btn-filter {
    height: 34px !important;
    padding: 0 12px !important;
    margin-left: 8px;
    border: 1px solid #ced4da !important;
    background: white;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 5px;
    border-radius: 4px !important;
    color: #333;
}

    .btn-filter i {
        font-size: 1rem;
    }
