/* ===== 主容器 ===== */
 /*
     * 让 body 作为滚动容器。原 .main-container 自带 overflow-y:auto + min-height:100vh，
     * 当网格超过 100vh 时容器自身撑高而 body 不滚，导致 scroll 事件不再触发、
     * 「触底加载」失效。改为取消容器的内部滚动。
     *
     * 上下内边距写死；左右内边距由 JS 动态设置（initMainContainerMargins），
     * 自适应窗口宽度，最小 50px。
     */
 .main-container {
     width: 100%;
     padding: 0 50px;
     margin-top: 50px;
     background-color: var(--page);
     box-sizing: border-box;
 }

 /* 滚动条样式 */
 .main-header::-webkit-scrollbar {
     height: 6px;
 }

 .main-header::-webkit-scrollbar-track {
     background-color: var(--page);
 }

 .main-header::-webkit-scrollbar-thumb {
     background-color: #d4cfc8;
     border-radius: 3px;
 }

 .main-header::-webkit-scrollbar-thumb:hover {
     background-color: #c4bfb8;
 }

 /* ===== 内容区域 ===== */
 .main-content {
     margin-top: calc(80px + var(--notif-offset, 0px));
     width: 100%;
     padding: 0 0 40px;
 }

 .content-area {
     display: flex;
     flex-direction: column;
 }

 /* ===== 顶部导航栏 ===== */
 .main-header {
     height: 80px;
     background-color: var(--page);
     position: relative;
     z-index: 100;
     display: flex;
     align-items: center;
     flex-shrink: 0;
     overflow-x: auto;
     overflow-y: hidden;
     /* 防止子项被压缩（让横向真正可滚动，而不是被挤压变形） */
     min-width: 0;
     /* 左右内边距由 JS 动态设置（initMainContainerMargins） */
 }

 .nav-container {
     display: flex;
     align-items: center;
     width: 100%;
     font-size: 14px;
     flex-wrap: nowrap;
     gap: 12px;
     /* 横向窄屏自适应：需要时可被 main-header 横向滚动 */
     flex-shrink: 0;
 }

 /* Tab 按钮 */
 .nav-buttons {
     display: flex;
     gap: 10px;
     margin-right: 20px;
     /* 不缩，固定大小 */
     flex-shrink: 0;
     white-space: nowrap;
 }

 .nav-button {
     padding: 8px 16px;
     border: 1px solid #6b6b6b;
     border-radius: 20px;
     font-size: 14px;
     background-color: transparent;
     color: #333;
     cursor: pointer;
     transition: all 0.2s;
     display: inline-flex;
     align-items: center;
     gap: 6px;
     flex-shrink: 0;
     white-space: nowrap;
     min-width: 0;
 }

 .nav-button:hover {
     background-color: #e8e4de;
 }

 .nav-button.active {
     background-color: #ded7cf !important;
     border-color: #ded7cf !important;
     color: #333 !important;
 }

 .nav-icon {
     width: 18px;
     height: 18px;
     flex-shrink: 0;
 }

 /* 搜索框 */
 .search-input {
     background-color: transparent !important;
     border: 1px solid #6b6b6b !important;
     border-radius: 25px !important;
     width: 200px;
     min-width: 100px;
     height: 36px;
     padding: 0 16px 0 36px;
     font-size: 14px;
     outline: none;
     color: #333;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.5 16.5L21 21'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: 10px center;
     background-size: 18px;
     /* 窄屏允许收缩，但有下限；与 .filter-container 合作 */
     flex: 0 1 200px;
     min-width: 100px;
     max-width: 240px;
 }

 .search-input::placeholder {
     color: #999;
 }

 .search-input:focus {
     border-color: #333;
 }

 /* 筛选器容器 */
 .filter-container {
     display: flex;
     /* flex-wrap: wrap; */
     gap: 10px;
     /* flex: 1; */
     align-items: center;
     /* 横向不缩，自动换至 main-header 的横滑轨道上 */
     flex-shrink: 0;
     white-space: nowrap;
 }

 .filter-select {
     height: 36px;
     /* 不被压缩变形 */
     flex-shrink: 0;
     white-space: nowrap;
 }

 /* ===== 自定义筛选下拉 ===== */
 .filter-dropdown {
     position: relative;
     display: inline-block;
     width: 140px;
     max-width: 170px;
 }

 .filter-dropdown__trigger {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     width: 100%;
     height: 36px;
     padding: 0 12px;
     border: 1px solid #6b6b6b;
     border-radius: 20px;
     background-color: var(--page);
     font-size: 13px;
     color: #333;
     cursor: pointer;
     user-select: none;
     outline: none;
     transition: border-color 0.18s, background-color 0.18s, color 0.18s;
 }

 .filter-dropdown__trigger:hover {
     border-color: #333;
 }

 .filter-dropdown.open .filter-dropdown__trigger {
     border-color: #333;
     background-color: #ece7df;
 }

 /* 已选：与 .nav-button.active 同样的 “Pill 选中” 视觉 */
 .filter-dropdown.has-value .filter-dropdown__trigger {
     background-color: #ded7cf;
     border-color: #ded7cf;
     color: #333;
     font-weight: 500;
 }

 .filter-dropdown.has-value.open .filter-dropdown__trigger {
     background-color: #d3cbc1;
     border-color: #d3cbc1;
 }

 .filter-dropdown__trigger:focus-visible {
     box-shadow: 0 0 0 2px rgba(51, 51, 51, 0.18);
 }

 .filter-dropdown__label {
     flex: 1;
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }

 /* 占位灰：还未选择任何项时 */
 .filter-dropdown .filter-dropdown__label.is-placeholder {
     color: #999;
 }

 .filter-dropdown__caret {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 12px;
     height: 12px;
     color: currentColor;
     flex-shrink: 0;
     transition: transform 0.18s;
 }

 .filter-dropdown__caret svg {
     display: block;
     width: 100%;
     height: 100%;
 }

 .filter-dropdown.open .filter-dropdown__caret {
     transform: rotate(180deg);
     color: currentColor;
 }

 /* 已选项时显示删除按钮 */
 .filter-dropdown__clear {
     display: none;
     align-items: center;
     justify-content: center;
     width: 14px;
     height: 14px;
     padding: 0;
     border: 0;
     border-radius: 50%;
     background: rgba(51, 51, 51, 0.18);
     color: #fff;
     cursor: pointer;
     flex-shrink: 0;
 }

 .filter-dropdown__clear:hover {
     background: rgba(51, 51, 51, 0.4);
 }

 .filter-dropdown.has-value:hover .filter-dropdown__clear {
     display: inline-flex;
 }

 .filter-dropdown.has-value:hover .filter-dropdown__caret {
     display: none;
     /* 已选状态：X 占主导 */
 }

 /* 弹层（菜单）：用 position: fixed 以避免被父级 overflow 裁剪 */
 .filter-dropdown__menu {
     position: fixed;
     min-width: 120px;
     max-height: 260px;
     overflow-y: auto;
     background-color: #fff;
     border: 1px solid #d4cfc8;
     border-radius: 12px;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
     padding: 6px 0;
     /* z-index 比 .main-header(z-index:100) 更上层 */
     z-index: 99999;
     opacity: 0;
     transform: translateY(-4px);
     pointer-events: none;
     transition: opacity 0.16s, transform 0.16s;
 }

 .filter-dropdown.open .filter-dropdown__menu {
     opacity: 1;
     transform: translateY(0);
     pointer-events: auto;
 }

 /* ===== 弹层滚动条样式（与项目米色调保持一致） ===== */
 .filter-dropdown__menu::-webkit-scrollbar {
     width: 8px;
 }

 .filter-dropdown__menu::-webkit-scrollbar-track {
     background: transparent;
     margin: 4px 0;
 }

 .filter-dropdown__menu::-webkit-scrollbar-thumb {
     background-color: #d4cfc8;
     border-radius: 4px;
     border: 2px solid #fff;
     /* 让 thumb 看起来更细 */
 }

 .filter-dropdown__menu::-webkit-scrollbar-thumb:hover {
     background-color: #b8b1a8;
 }

 .filter-dropdown__menu::-webkit-scrollbar-corner {
     background: transparent;
 }

 /* Firefox */
 .filter-dropdown__menu {
     scrollbar-width: thin;
     scrollbar-color: #d4cfc8 transparent;
 }

 /* 滚动时略微缩小 padding，让滚条不贴着首/尾 */
 .filter-dropdown__menu {
     scroll-padding-block: 6px;
 }

 .filter-dropdown__option {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 8px;
     padding: 8px 14px;
     font-size: 13px;
     color: #333;
     cursor: pointer;
     user-select: none;
     transition: background-color 0.12s, color 0.12s;
 }

 .filter-dropdown__option:hover {
     background-color: var(--page);
 }

 .filter-dropdown__option.is-selected {
     background-color: #ece7df;
     color: #000;
     font-weight: 500;
 }

 .filter-dropdown__option-check {
     opacity: 0;
     color: #333;
     flex-shrink: 0;
 }

 .filter-dropdown__option.is-selected .filter-dropdown__option-check {
     opacity: 1;
 }

 /* ===== 原生 select 兼容（如果 JS 还没接管时的兜底） ===== */
 .filter-select select {
     display: none;
 }

 .filter-select select:focus {
     border-color: #333;
 }

 .filter-select select.has-value {
     background-color: #ded7cf !important;
 }

 .filter-select select option {
     background-color: #fff;
 }

 /* ===== 瀑布流网格 ===== */
 .image-grid {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: 20px;
     padding: 20px 0;
     width: 100%;
     box-sizing: border-box;
 }

 /* 家具卡片样式 */
 .grid-item-furniture {
     width: 100%;
     max-height: 600px;
     height: auto;
     border-radius: 30px;
     overflow: hidden;
     background: #fff;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
     transition: all 0.3s ease;
     cursor: pointer;
     display: flex;
     flex-direction: column;
     border: 2px solid transparent;
     box-sizing: border-box;
     position: relative;
 }

 .grid-item-furniture:hover {
     border: 2px solid #d7976a;
 }

 .product-brand {
     position: absolute;
     width: 115px;
     height: 115px;
     top: -60px;
     left: -60px;
     background: #BFAE8F;
     font-family: Inter;
     font-weight: 600;
     font-size: 10px;
     line-height: 140%;
     letter-spacing: 5%;
     color: #FFFFFF;
     display: flex;
     align-items: flex-end;
     justify-content: center;
     padding-bottom: 8px;
     /* 斜着 45° 的平行四边形缎带：顶部尖角被隐藏 */
     clip-path: polygon(0 38%, 100% 0, 100% 100%, 0 100%);
     transform: rotate(-45deg);
     transform-origin: center;
 }

 .card-wrapper {
     width: 100%;
     height: 100%;
     padding: 20px;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 .collect-icon-container {
     width: 100%;
     display: flex;
     justify-content: flex-end;
     margin-bottom: 10px;
 }

 .header-icon {
     width: 28px;
     height: 28px;
     cursor: pointer;
     transition: transform 0.2s;
 }

 .header-icon:hover {
     transform: scale(1.1);
 }

 .product-name-section {
     width: 100%;
     text-align: center;
     margin-bottom: 15px;
 }

 .english-name {
     font-size: 24px;
     font-weight: 500;
     color: #4e4e4e;
     margin-bottom: 5px;
 }

 .chinese-name {
     font-size: 30px;
     font-weight: 600;
     color: #4e4e4e;
 }

 .product-type-tag {
     display: inline-block;
     padding: 5px 15px;
     border: 1px solid #6b6b6b;
     border-radius: 20px;
     font-size: 14px;
     color: #4e4e4e;
     margin-bottom: 20px;
 }

 .product-image-container {
     width: 100%;
     height: 70%;
     display: flex;
     justify-content: center;
     align-items: center;
     margin-bottom: 20px;
     overflow: hidden;
 }

 .product-image {
     width: 100%;
     height: 100%;
     object-fit: contain;
     object-position: center;
     transition: transform 0.3s ease;
 }

 .grid-item-furniture:hover .product-image {
     transform: scale(1.05);
 }

 .price-and-button-container {
     width: 100%;
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-top: auto;
 }

 .price-section {
     flex: 1;
     text-align: left;
     display: flex;
     flex-direction: column;
 }

 .price-label {
     font-size: 14px;
     color: #4e4e4e;
 }

 .price-value {
     font-size: 24px;
     font-weight: 600;
     color: #4e4e4e;
 }

 .detail-button {
     background-color: #585858;
     color: #fff;
     border: none;
     border-radius: 20px;
     padding: 0 20px;
     height: 30px;
     font-size: 12px;
     cursor: pointer;
     transition: background 0.2s;
 }

 .detail-button:hover {
     background-color: #777;
 }

 /* 材质卡片样式（背景图） */
 .grid-item-material {
     width: 100%;
     height: 600px;
     border-radius: 30px;
     overflow: hidden;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
     transition: all 0.3s ease;
     cursor: pointer;
     border: 2px solid transparent;
     box-sizing: border-box;
     position: relative;
 }

 .grid-item-material:hover {
     border: 2px solid #d7976a;
 }

 .card-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     padding: 20px;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
     align-items: center;
     background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0) 100%);
 }

 .collect-icon-container-material {
     width: 100%;
     display: flex;
     justify-content: flex-end;
     margin-bottom: 15px;
 }

 .collect-icon-container-material .header-icon {
     filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
 }

 .collect-icon-container-material .header-icon--uncollected {
     filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) brightness(0) saturate(100%) invert(100%);
 }

 .product-name-section-material {
     width: 100%;
     text-align: center;
     margin-bottom: 10px;
 }

 .product-name-section-material .english-name {
     font-size: 24px;
     color: #ffffff;
     margin-bottom: 5px;
     text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
 }

 .product-name-section-material .chinese-name {
     font-size: 30px;
     font-weight: 500;
     color: #ffffff;
     text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
 }

 .product-type-tag-material {
     display: inline-block;
     padding: 4px 12px;
     border: 1px solid rgba(255, 255, 255, 0.6);
     border-radius: 16px;
     font-size: 12px;
     color: #ffffff;
     background: rgba(255, 255, 255, 0.15);
     backdrop-filter: blur(4px);
     margin-bottom: auto;
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
 }

 /* ===== 加载状态 ===== */
 .loading-indicator {
     padding: 30px 20px;
     text-align: center;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     min-height: 60px;
 }

 .loading-spinner {
     display: inline-block;
     width: 16px;
     height: 16px;
     border: 2px solid #d4cfc7;
     border-top-color: #6b6b6b;
     border-radius: 50%;
     animation: spin 0.8s linear infinite;
 }

 .loading-text {
     font-size: 14px;
     color: #999;
 }

 @keyframes spin {
     to {
         transform: rotate(360deg);
     }
 }

 .no-more-data {
     padding: 20px;
     text-align: center;
     color: #999;
     font-size: 14px;
     width: 100%;
 }

 .empty-container {
     padding: 60px 20px;
     text-align: center;
     color: #999;
     font-size: 16px;
     width: 100%;
 }

 /* ===== 回到顶部 ===== */
 .back-top-btn {
     position: fixed;
     right: 24px;
     bottom: 24px;
     width: 36px;
     height: 36px;
     border-radius: 18px;
     background: #ded7cf;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     border: none;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
     transition: transform 0.2s;
     z-index: 100;
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
 }

 .back-top-btn.visible {
     opacity: 1;
     visibility: visible;
 }

 .back-top-btn:hover {
     transform: translateY(-2px);
 }

 /* ===== 登录弹窗已迁移到 public/js/loginModal.js，由 window.openLoginModal() 触发 ===== */

 /* ===== 响应式 ===== */
 @media (max-width: 1600px) {
     .image-grid {
         grid-template-columns: repeat(4, 1fr);
     }
 }

 @media (max-width: 1200px) {
     .image-grid {
         grid-template-columns: repeat(3, 1fr);
     }

     .main-header {
         height: auto;
         padding-top: 12px;
         padding-bottom: 12px;
     }

     .search-input {
         width: 150px;
     }
 }

 @media (max-width: 992px) {
     .filter-select select {
         width: 120px;
     }
 }

 @media (max-width: 768px) {
     .main-container {
         padding: 0 50px;
         margin-top: 120px;
     }

     .main-content {
         margin-top: 40px;
         margin-top: calc(120px + var(--notif-offset, 0px));
     }

     .image-grid {
         grid-template-columns: repeat(2, 1fr);
         gap: 12px;
     }

     .grid-item-furniture {
         max-height: 400px;
     }

     .grid-item-material {
         height: 400px;
     }

     .english-name {
         font-size: 18px;
     }

     .chinese-name {
         font-size: 22px;
     }

     .product-name-section-material .english-name {
         font-size: 18px;
     }

     .product-name-section-material .chinese-name {
         font-size: 22px;
     }

     .search-input {
         width: 120px;
     }

     .filter-select select {
         width: 100px;
         font-size: 12px;
     }

     .nav-button {
         padding: 6px 12px;
         font-size: 12px;
     }
 }

 @media (max-width: 480px) {
     .image-grid {
         grid-template-columns: 1fr;
     }

     .grid-item-furniture {
         max-height: 500px;
     }

     .grid-item-material {
         height: 400px;
     }

     .filter-container {
         gap: 6px;
     }

     /* 顶部 nav 行保持横向布局、不变形；
         各子项不缩、保留内容宽度；多余的由 main-header 横向滚动 */
     .filter-select select {
         width: 100px;
         min-width: 90px;
         max-width: 100px;
         font-size: 12px;
     }

     .search-input {
         flex: 0 1 140px;
         min-width: 100px;
         max-width: 140px;
         font-size: 13px;
     }
 }

 @media (max-width: 480px) {
     .main-content {
         margin-top: calc(160px + var(--notif-offset, 0px));
     }
 }