/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #333;
    background-color: #fff;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* 保证 footer 在底部 */
}

/* Container */
.container {
    max-width: 1400px; /* 稍微宽一点，适应大屏展示 */
    margin: 0 auto;
    padding: 0 40px; /* 两侧留白 */
}

/* Header */
.header {
    padding: 30px 0;
    background-color: #fff;
    border-bottom: 1px solid #eaeaea; /* 添加淡淡的分割线 */
}

.site-title {
    font-size: 18px;
    font-weight: 700;
    color: #000;
}

/* Main Content */
.main-content {
    flex: 1; /* 撑开中间区域 */
    padding-top: 60px;
    padding-bottom: 80px;
}

.intro-section {
    margin-bottom: 50px;
}

.page-title {
    font-size: 24px;
    font-weight: 600; /* 不像 bold 那么粗，但比 regular 粗 */
    margin-bottom: 10px;
    color: #000;
}

.page-description {
    font-size: 14px;
    color: #888;
    width: 100%;      /* 占满容器宽度 */
    max-width: none;  /* 取消最大宽度限制 */
    white-space: nowrap; /* 强制不换行 */
    overflow: hidden;    /* 超出部分隐藏 (可选，视需求而定) */
    text-overflow: ellipsis; /* 超出显示省略号 (可选) */
    line-height: 1.6;
}

/* Kitchen Grid */
.kitchen-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4列 */
    gap: 20px; /* 间距 */
}

.kitchen-item {
    cursor: pointer;
    transition: opacity 0.2s;
}

.kitchen-item:hover {
    opacity: 0.9;
}

.image-wrapper {
    width: 100%;
    aspect-ratio: 4 / 3; /* 保持固定的长宽比 */
    overflow: hidden;
    background-color: #f0f0f0;
}

.image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Footer */
.footer {
    background-color: #0d2b52; /* 深蓝色，参考截图 */
    color: #fff;
    padding: 30px 0;
}

.footer p {
    font-size: 12px;
    opacity: 0.9;
}

/* 
   Preview Detail Page Styles 
   --------------------------
*/

/* Preview Header Customization */
.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px; /* Specific padding for preview header */
    position: relative; /* For absolute positioning of mobile menu */
}

.mobile-menu-btn {
    display: none; /* Hidden on desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    color: #333;
}

.header-right {
    display: flex;
    gap: 15px;
}

.action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #ddd;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    color: #333;
}

.action-btn:hover {
    background-color: #f5f5f5;
    border-color: #ccc;
}

/* Preview Container Layout */
.preview-container {
    display: flex;
    flex: 1;
    min-height: calc(100vh - 160px); /* Ensure it fills screen but allows growth */
    /* height constraint removed to allow full content display */
    align-items: flex-start; /* Prevent right side from stretching with sidebar */
}

/* Sidebar */
.sidebar {
    width: 320px;
    background-color: #fff;
    border-right: 1px solid #eaeaea;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.sidebar-tabs {
    display: flex;
    border-bottom: 1px solid #eaeaea;
}

.tab {
    flex: 1;
    text-align: center;
    padding: 15px 0;
    font-size: 14px;
    cursor: pointer;
    font-weight: 500;
}

.tab.active {
    background-color: #0d2b52; /* Dark blue */
    color: #fff;
}

.sidebar-content {
    flex: 1;
    /* overflow: hidden; REMOVED to allow full content display */
    display: none; /* 默认隐藏 */
}

.sidebar-content.active {
    display: flex;
    flex-direction: column;
}

/* Preset Content Styles */
.preset-list {
    /* flex: 1;  Already in sidebar-content */
    /* overflow-y: auto; Already handled or overrides sidebar-content */
    /* overflow-y: scroll; REMOVED to show all content */
    padding: 20px;
    /* display: flex; REMOVED to allow sidebar-content toggle to work */
    /* flex-direction: column; REMOVED */
    gap: 20px;
}

.preset-item {
    display: flex;
    flex-direction: row; /* Align image and label if needed, or keep column */
    align-items: center;
    cursor: pointer;
    position: relative;
}

.preset-item .preset-image {
    width: 100%;
    height: 140px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: relative;
}

.preset-label {
    position: absolute;
    bottom: 10px;
    right: -5px;
    background-color: #2c8ccf; /* Blue label bg */
    color: #fff;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    border-radius: 2px;
}

.preset-item:hover .preset-image {
    opacity: 0.9;
}

/* Browse Content Styles */
.browse-content {
    padding: 15px;
    /* flex: 1; Already in sidebar-content */
    /* overflow-y: scroll; REMOVED to show all content */
    /* display: flex; REMOVED */
    /* flex-direction: column; REMOVED */
    gap: 15px;
}

.category-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.cat-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.cat-btn:hover, .cat-btn.active {
    border-color: #333;
    background-color: #f9f9f9;
}

.cat-btn svg {
    width: 16px;
    height: 16px;
}

.search-filter-bar {
    display: flex;
    gap: 10px;
}

.search-btn-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
}

.filter-btn-block {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    font-size: 13px;
    cursor: pointer;
}

.material-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.material-item {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.material-item:hover .mat-img {
    opacity: 0.9;
}

.material-item.selected .mat-img {
    box-shadow: 0 0 0 1px #2c8ccf; /* Blue selection border */
}

.material-item.selected .mat-name {
    background-color: #2c8ccf;
    color: #fff;
    border-radius: 12px;
}

.mat-img {
    width: 100%;
    aspect-ratio: 4/3;
    background-color: #eee;
    border-radius: 4px;
    overflow: hidden;
    transition: all 0.2s;
}

.mat-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mat-name {
    font-size: 11px;
    color: #333;
    text-align: center;
    line-height: 1.2;
    padding: 3px 10px;
    border-radius: 12px;
    transition: all 0.2s;
}

/* Preview Main Area */
.preview-main {
    flex: 1;
    background-color: #f0f0f0;
    position: sticky; /* Stick to top when scrolling long sidebar */
    top: 0;
    height: calc(100vh - 20px); /* Fixed height to prevent jumping */
    overflow: hidden;
}

.main-image-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.main-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Layer Container */
.layer-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.base-layer {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    position: relative;
    z-index: 0;
}

.top-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 1;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1000;
}

.category-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: multiply;
    pointer-events: none;
    opacity: 1;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: opacity 0.3s ease;
    z-index: 2000;
}

.material-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: multiply;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1500;
}

.map-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 1;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 500;
}

/* Responsive */
@media (max-width: 1024px) {
    .kitchen-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .preview-container {
        flex-direction: column;
        height: auto;
        align-items: stretch;
    }
    
    .sidebar {
        width: 100%;
        height: auto;
        border-right: none;
        border-bottom: 1px solid #eaeaea;
    }
    
    .preset-list {
        flex-direction: row;
        overflow-x: auto;
        height: auto;
        padding: 15px;
    }
    
    .preset-item {
        min-width: 160px;
    }
    
    .preview-main {
        height: 500px;
    }
}

@media (max-width: 768px) {
    /* 移动端容器内边距调整 */
    .container {
        padding: 0 20px; 
    }

    /* Header 调整 */
    .header {
        padding: 15px 0;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .site-title {
        font-size: 16px;
    }

    /* 主内容区域间距调整 */
    .main-content {
        padding-top: 20px;
        padding-bottom: 40px;
    }

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

    .page-title {
        font-size: 20px;
        margin-bottom: 10px;
    }

    /* 移动端文字必须换行 */
    .page-description {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        font-size: 13px;
        color: #666;
        line-height: 1.5;
    }

    /* 网格变为单列 */
    .kitchen-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .image-wrapper {
        aspect-ratio: 4 / 2.6;
    }
    
    .footer p {
        font-weight: 500;
    }
    
    /* Preview Mobile Adjustments */
    .preview-header {
        padding: 15px 20px;
        justify-content: space-between;
        align-items: center;
        flex-direction: row; /* Ensure row layout */
    }

    .mobile-menu-btn {
        display: block; /* Show hamburger */
    }
    
    /* Mobile Menu Dropdown */
    .header-right {
        display: none; /* Hidden by default */
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #fff;
        flex-direction: column;
        padding: 15px 20px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        z-index: 3000;
        border-bottom: 1px solid #eaeaea;
        gap: 10px;
    }

    .header-right.active {
        display: flex; /* Show when active */
    }
    
    .action-btn {
        width: 100%; /* Full width buttons */
        justify-content: flex-start; /* Left align text */
        padding: 12px;
    }

    /* Layout Reordering: Preview First, Sidebar Second */
    .preview-container {
        flex-direction: column;
        align-items: stretch;
    }

    .preview-main {
        order: 1; /* First */
        height: auto;
        position: static; /* Remove sticky */
        aspect-ratio: 4/2.45; /* Maintain ratio */
        background-color: #f0f0f0;
        flex: none; /* Reset flex */
        width: 100%; /* Ensure full width */
    }

    .sidebar {
        order: 2; /* Second */
        width: 100%;
        border-right: none;
        border-bottom: none;
        height: auto;
    }

    .sidebar-tabs {
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 10;
    }

    .preset-list {
        padding: 15px;
        overflow-x: auto; /* Horizontal scroll for presets if desired, or stack */
        flex-direction: column; /* Stack vertically as per screenshot 1 hint */
        gap: 15px;
    }
    
    /* If screenshot 1 shows presets stacked vertically, we keep column.
       If it shows horizontal scroll, we use row. 
       Based on "mobile effect", usually vertical stack or horizontal slider.
       The existing 1024px query set it to row. Let's stick to vertical stack for clearer view unless it's too long.
       Actually, the user screenshot 1 (description) says "initial view".
       Let's assume vertical stack for presets is safer for visibility.
    */
    .preset-item {
        width: 100%; /* Full width */
    }
}

/* Filter Panel Styles */
.filter-panel {
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.filter-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.filter-title {
    font-size: 13px;
    font-weight: 600;
    color: #2c8ccf; /* Blue color for headers based on common theme, or similar to image */
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-title .indicator {
    width: 6px;
    height: 6px;
    background-color: #f1c40f; /* Yellow indicator */
    border-radius: 50%;
    display: inline-block;
}

.close-filter-btn {
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}

.close-filter-btn:hover svg {
    stroke: #333;
}

.filter-options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.filter-opt-btn {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 8px 5px;
    font-size: 11px;
    text-align: center;
    cursor: pointer;
    color: #333;
    font-weight: 500;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
}

.filter-opt-btn:hover {
    border-color: #2c8ccf;
    color: #2c8ccf;
}

.filter-opt-btn.selected {
    border-color: #2c8ccf;
    background-color: #f0f7fc;
    color: #2c8ccf;
}

/* Search Bar Styles */
.search-container {
    display: flex;
    align-items: center;
}

/* Ensure search wrapper takes full width when active */
.search-input-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    padding: 0 10px;
    height: 40px; /* Match height of other buttons */
    box-sizing: border-box;
}

.search-icon-small {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}

.search-input {
    border: none;
    outline: none;
    flex: 1;
    font-size: 13px;
    color: #333;
    background: transparent;
}

.close-search-btn {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}

.close-search-btn:hover svg {
    stroke: #666;
}

/* When search is active, search-filter-bar needs to accommodate the full width search input */
.search-filter-bar.search-active {
    display: block; /* Switch from flex to block to allow full width */
}

.search-filter-bar.search-active .search-container {
    width: 100%;
}

.search-filter-bar.search-active .filter-btn-block {
    display: none !important; /* Force hide filter button */
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background-color: #fff;
    width: 360px;
    max-width: 90vw;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 20px;
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.modal-title {
    font-size: 18px;
    font-weight: 700;
    color: #000;
}

.close-modal-btn {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}

.close-modal-btn:hover svg {
    stroke: #000;
}

.share-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.share-opt {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 14px;
    font-weight: 500;
    color: #000;
    cursor: pointer;
    padding: 16px 20px;
    border: 1px solid #eaeaea;
    transition: all 0.2s;
    background-color: #fff;
}

.share-opt:hover {
    background-color: #f8f8f8;
    border-color: #ddd;
}

.share-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}