// 这是为了覆盖 Payload 默认表格样式的 SCSS
// 我们使用 CSS Grid 强制改变表格布局，从而实现 Grid 视图，同时保留 Payload 所有原生功能

.collection-list.collection-list--products,
.collection-list.collection-list--preorder-products {
    table {
        display: block !important;
        
        thead {
            display: none !important;
        }

        tbody {
            display: grid !important;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
            gap: 1.5rem !important;
            width: 100% !important;
        }

        tr {
            display: flex !important;
            flex-direction: column !important;
            background: var(--theme-elevation-50) !important;
            border: 1px solid var(--theme-elevation-150) !important;
            border-radius: 8px !important;
            overflow: hidden !important;
            position: relative !important;
            transition: all 0.2s ease-in-out !important;
            height: 100% !important;
            min-height: 320px;
            cursor: pointer;
            text-decoration: none !important;
            
            &:hover {
                transform: translateY(-4px);
                box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.1);
                border-color: var(--theme-elevation-300) !important;
                background: var(--theme-elevation-100) !important;
            }

            td {
                display: block !important;
                border: none !important;
                padding: 0.5rem 1rem !important;
                width: 100% !important;
                white-space: normal !important;
                height: auto !important;
                
                // 1. Selector/Checkbox (Always the first column usually)
                &:first-child {
                    position: absolute !important;
                    top: 10px !important;
                    right: 10px !important;
                    width: auto !important;
                    padding: 0 !important;
                    z-index: 10 !important;
                    background: transparent !important;
                    
                    .checkbox {
                       background: rgba(255, 255, 255, 0.8);
                       border-radius: 4px;
                    }
                }

                // 2. Thumbnail (First content column)
                &:nth-child(2) { 
                    padding: 0 !important;
                    height: 200px !important;
                    width: 100% !important;
                    overflow: hidden !important;
                    background: var(--theme-elevation-100) !important;
                    order: -1 !important; // Force to top
                    flex-grow: 0 !important;
                    position: relative;
                    
                    img {
                        width: 100% !important;
                        height: 100% !important;
                        object-fit: cover !important;
                        display: block !important;
                        background: var(--theme-elevation-100);
                    }
                    .no-image {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        height: 100%;
                        color: var(--theme-elevation-400);
                        font-size: 0.8rem;
                        background: transparent;
                    }
                }

                // 3. Title (Second content column)
                &:nth-child(3) {
                    font-size: 1.1rem !important;
                    font-weight: 600 !important;
                    padding-top: 1rem !important;
                    margin-bottom: 0.5rem !important;
                    line-height: 1.4 !important;
                    flex-grow: 1 !important; // Push footer down
                    
                    a {
                        text-decoration: none !important;
                        color: var(--theme-text) !important;
                        
                        &:hover {
                           color: var(--theme-primary-500) !important;
                        }
                    }
                }

                // 4. Medusa ID or Status or Date
                &:nth-child(n+4) {
                    font-size: 0.8rem !important;
                    color: var(--theme-elevation-500) !important;
                    padding-bottom: 0.25rem !important;
                    padding-top: 0 !important;
                    border-top: none !important;
                }
            }
        }
    }
}