body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

header {
    background-color: #f4f4f4;
    padding: 10px;
    text-align: center;
    width: 100%;
}

.container {
    display: flex;
    flex-grow: 1;
}

aside#filters {
    width: 300px;  /*固定宽度为300像素*/
    /*flex-basis: 15%;*/
    background-color: #eaeaea;
    padding: 20px;
    /*height: 120vh; /* or adjust accordingly */
    overflow-y: auto;
}

main#product-list {
    flex-basis: 85%;
    padding: 20px;
    overflow-y: auto;
}


table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    text-align: left;
    padding: 8px;
    border-bottom: 1px solid #ddd;
    font-size: 0.8em
    /*white-space: nowrap; /* 防止所有列的文本换行 */
}

th {
    background-color: #f0f0f0;
    /* 其他样式，但不包括 white-space: nowrap; */
}

/* 针对所有单元格的不换行设置（除了特定的列，如 'Name' 列） */
th, td {
    white-space: nowrap;
}

/* 特定列（如 'Name' 列）允许换行的设置 */
th:nth-last-child(2), td:nth-last-child(2) {
    white-space: normal;
}


footer {
    background-color: #f4f4f4;
    padding: 10px;
    text-align: center;
    width: 100%;
}

.buy-now {
    padding: 5px 10px; /* Reduced padding to make the button smaller */
    background-color: #007BFF;
    border: none;
    border-radius: 3px; /* Slightly less rounded corners */
    color: white;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 0.8em; /* Smaller font size */
}


.buy-now:hover {
    background-color: #0056b3;
}

/* Other styles remain unchanged */

.deals-header h2 {
    margin-bottom: 0; /* Remove margin to keep the line close to the title */
}

.deals-header hr {
    border: 0;
    height: 1px;
    background-color: #ccc;
    margin: 10px 0;
}

.tags {
    display: flex;
    gap: 10px; /* 标签之间的间距 */
    margin-bottom: 20px; /* 表格开始前的空间 */
}

.tag {
    padding: 5px 10px; /* 调整内边距 */
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.8em;
    text-decoration: none; /* 移除下划线 */
    color: grey; /* 未选中标签的浅灰色 */
    background-color: #ffffff; /* 添加背景颜色 */
    transition: background-color 0.3s, color 0.3s; /* 平滑颜色变化 */
}

.tag:hover {
    text-decoration: underline; /* 鼠标悬停时显示下划线 */
    /*color: #0056b3; /* 鼠标悬停时的文字颜色 */
}

.tag.active, .tag.drop-most {
    background-color: #f0f0f0;/* 激活状态的背景色 */
    color: black;/* 激活状态的文字颜色 */
    font-weight: bold;
}


/* Update .buy-now button styles if necessary */
.buy-now {
    /* Button styles */
    font-size: 0.8em;
}

/* Filters标题样式 */
#filters h2 {
    font-size: 1.5em; /* 调整以匹配Deals标题的字号 */
    margin: 0; /* 重置外边距 */
    margin-top: 20px;
}

#filters h3 {
    font-size: 0.8em; /* 调整字号 */
    font-weight: bold; /* 加粗字体 */
    text-align: left;
    padding: 0px;
    /* 如果需要，可以添加背景色和边框样式 */
}

/* Filters与Price之间的分割线样式 */
.filter-divider {
    border: none;
    height: 1px;
    background-color: #ccc;
    margin-top: 10px; /* 调整与Filters标题的间距 */
    margin-bottom: 10px; /* 调整与Price标题的间距 */
}


/* 滑动条样式 */
/* 调整价格模块的间距 */
/* 调整价格模块的间距 */
.price-slider {
    position: relative;
    margin-top: 20px; /* 增加与标题的间距 */
    margin-bottom: 30px; /* 增加与价格信息的间距 */
}

.slider-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer; /* 提示用户这个区域是可点击的 */
    z-index: 4; /* 确保它位于滑动条之上 */
    min-height: 30px; /* 确保有足够的高度可以点击 */
}

/* 调整滑动条的位置和样式 */
.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 2px; /* 更细的滑动条 */
    background: transparent; /* 设置为透明 */
    outline: none;
    position: absolute; /* 重叠两个滑动条 */
    z-index: 1;
}

.slider-track {
    position: absolute;
    width: 100%;
    height: 3px;
    background: #ddd;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
}

/* 确保端点永远位于移动条上 */
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    margin-left: -2px; /* 半径的一半 */
    margin-top: -4px; /* 半径的一半 */
    appearance: none;
    width: 10px; /* 端点大小 */
    height: 10px; /* 端点大小 */
    border-radius: 50%;
    background: #007BFF;
    cursor: pointer;
    z-index: 3;
}

.slider::-moz-range-thumb {
    width: 10px; /* 端点大小 */
    height: 10px; /* 端点大小 */
    margin-left: -2px; /* 半径的一半 */
    border-radius: 50%;
    background: #007BFF;
    cursor: pointer;
}

/* 显示价格的样式 */
.slider-values {
    display: flex;
    justify-content: space-between;
    font-size: 0.8em;
    position: relative;
    top: 10px; /* 调整位置以确保与滑动条对齐 */
}


.filter-section {
    margin-bottom: 20px;
}

.section-divider {
    border: none;
    height: 1px;
    background-color: #ccc;
    margin-top: 20px; /* 设置分割线与上面元素的间距 */
    margin-bottom: 10px;
}


.section-title {
    font-size: 1em;
    font-weight: bold;
    margin-bottom: 10px;
}

.checkbox-group label {
    display: block;
    font-size: 0.8em;
    margin-bottom: 5px;
}

.checkbox-group input[type="checkbox"] {
    margin-right: 5px;
}

/* 激活状态的样式 */
.active-tag {
    color: black;
    font-weight: bold;
}

/* 非激活状态的样式 原来的标签*/
.inactive-tag {
    color: grey;
}

.footer-content {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.footer-title {
    margin-right: 20px; /* 标题和链接之间的间距 */
    font-weight: normal;
}

.footer-links {
    display: flex;
    justify-content: center; /* 可以调整为 'space-around' 或 'space-between' */
}

.footer-links a {
    text-decoration: none;
    color: #0000ee; /* 或您选择的颜色 */
    margin: 0 10px; /* 链接之间的间距 */
}

/* 悬停效果 */
.footer-links a:hover {
    text-decoration: underline;
}

.filter-section .number-inputs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8em;
    width: 100%; /* 确保整个容器宽度为100% */
    height: 40px; /* 设置高度 */
}

.number-inputs input[type="number"] {
    width: 40%; /* 输入框宽度调整为百分比 */
    height: 50%;
    text-align: right; /* 文本右对齐 */
    margin-right: 0px; /* 右侧间距 */
    margin-left: 5px; /* 调整左侧美元符号和输入框之间的距离 */
}

.number-inputs > span {
    /* 连接符样式调整 */
    align-self: center;
    margin: 0 10px; /* 增加连接符两侧的间距 */
}

/* 右侧输入框靠右对齐 */
.number-inputs :last-child {
    margin-left: 0px; /* 左侧间距 */
    text-align: left; /* 文本左对齐 */
}