/* assets/css/pages/product-listing.css */

/* Product Listing Page Specific Styles */

/* Main layout */
.product-list-container { 
    /* display: flex; */ /* Let Bootstrap .row handle flex display for its columns */
}

.product-sidebar {
    background-color: var(--pale-tiffany); /* 使用浅蒂芙尼色作为背景 */
    padding: 20px 15px; /* 上下 20px，左右 15px 的内边距 */
    border-radius: 5px; /* 轻微的圆角 */
    /* border-right: 1px solid var(--light-tiffany); */ /* 如果需要右边框，可以取消注释 */
    /* margin-right: 20px; Bootstrap columns have their own gutter system, or use offset if needed */
    /* Ensure sidebar doesn't grow برنامج if content is small */
    flex-shrink: 0;
}

.product-sidebar h4 {
    text-align: center; /* Center the 'Categories' title */
}

.product-main-content {
    /* flex-grow: 1; */ /* Bootstrap col-md-9 should handle width */
    /* padding-left: 0; */ /* Gutters from .row will apply */
}

/* Category List Styling (Using Bootstrap List Group as base) */
.category-list .list-group-item {
    border-radius: 0;
    border-left: none;
    border-right: none;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    background-color: transparent; /* 列表项背景透明，以显示 sidebar 的背景色 */
    color: #333; 
    border-color: var(--light-tiffany); /* 分隔线颜色可以更浅或移除 */
    /* border: none; */ /* 或者完全移除边框，如果希望更简洁 */
}

.category-list .list-group-item:first-child {
    /* border-top: none; */ /* 如果整体 sidebar 有边框/背景，列表项自身的边框可能不再需要 */
}
.category-list .list-group-item:last-child {
    /* border-bottom: none; */
}

.category-list .list-group-item a {
    text-decoration: none;
}

.category-list .list-group-item.active,
.category-list .list-group-item.active:hover {
    background-color: var(--tiffany-blue); /* 激活项背景色 */
    color: white;
    border-color: var(--tiffany-blue);
    font-weight: 600;
}

.category-list .list-group-item:hover:not(.active) { /* 确保不影响 active 项的悬停效果 */
    background-color: var(--light-tiffany); /* 非激活项悬停背景色 */
}

.category-list .list-group-item strong {
    font-weight: 600; /* Main category titles */
    display: block;
    cursor: pointer;
}

.category-list .list-group-item .arrow {
    float: right;
    transition: transform 0.2s ease-in-out;
}

.category-list .list-group-item.open > a > .arrow { /* Adjusted selector for arrow if it's inside <a> */
    transform: rotate(90deg);
}

.category-list .subcategory-list {
    list-style: none;
    padding-left: 20px; /* Indentation for subcategories */
    margin-top: 0.5rem;
    display: none; /* Hidden by default, shown on click */
}

.category-list .list-group-item.open > .subcategory-list {
    display: block;
}

.category-list .subcategory-list li a {
    display: block;
    padding: 0.4rem 0.5rem;
    color: #555; /* Subcategory link color */
    text-decoration: none;
    border-radius: 0.25rem;
}

.category-list .subcategory-list li a:hover {
    background-color: var(--light-tiffany);
    color: var(--dark-tiffany);
}

.category-list .subcategory-list li a.active {
    background-color: var(--dark-tiffany);
    color: white;
    font-weight: 500;
}

/* Right content placeholder */
.products-display-area .placeholder-text {
    font-size: 1.2rem;
    color: #777;
    text-align: center;
    padding: 50px 20px;
    border: 2px dashed var(--light-tiffany);
    border-radius: 5px;
    background-color: #f9f9f9;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .product-list-container {
        flex-direction: column;
    }
    .product-sidebar {
        width: 100%;
        border-right: none;
        /* border-bottom: 1px solid #dee2e6; */ /* 移动端底部边框 */
        margin-bottom: 20px;
        margin-right: 0; /* 移动端移除右外边距 */
    }
    .product-main-content {
        padding-left: 0;
    }
    .category-list .list-group-item strong {
        padding-bottom: 0.5rem; /* More touch area on mobile */
    }
} 

/* Product Card Specific Styles */
.product-card {
    background-color: #fff; /* White background */
    border-radius: 6px; /* 更小的圆角，更商务 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Ensures child elements conform to rounded corners */
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.product-card-link {
    text-decoration: none;
    color: inherit; /* Inherit text color from parent */
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allow link to grow and push footer down */
}

.product-card-img-container {
    width: 100%;
    /* height: 220px; */ /* Removed fixed height to allow container to adapt to image aspect ratio */
    overflow: hidden;
    background-color: #fff; /* Optional: ensure background for any tiny gaps if image aspect ratio is extreme */
}

.product-card-img-top {
    width: 100%;
    height: auto; /* Changed from 100% to auto to maintain aspect ratio based on width */
    object-fit: contain; /* Remains useful to ensure behavior if somehow dimensions are constrained elsewhere */
    display: block; /* Ensures image behaves as a block element, removing potential bottom space */
    transition: transform 0.3s ease;
}

.product-card:hover .product-card-img-top {
    transform: scale(1.05); 
}

.product-card-body {
    padding: 15px 20px; /* Padding around the title */
    text-align: center; /* Center align title */
    flex-grow: 1; /* Allows body to expand if card link is flex container */
}

.product-card-title {
    font-size: 1.1rem; /* Adjust as needed */
    font-weight: 600;
    color: #333;
    margin-bottom: 0; /* Remove default margin if any */
    /* For multi-line truncation (optional) */
    /* display: -webkit-box; */
    /* -webkit-line-clamp: 2; */
    /* -webkit-box-orient: vertical; */
    /* overflow: hidden; */
    /* text-overflow: ellipsis; */
    /* min-height: 2.6em; /* Approximate height for 2 lines */
}

.product-card-footer {
    padding: 10px 20px 20px 20px; /* Padding for the button */
    text-align: center; /* Center the button */
    border-top: none; /* Assuming no border between body and footer needed visually */
    background-color: #fff; /* Ensure footer bg matches card if it extends beyond body */
}

.btn-request-quote {
    background-color: #FFB800; /* Bright orange-yellow from screenshot */
    color: #fff;
    border: none;
    padding: 10px 25px; /* Adjust padding for button size */
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 8px; /* 更小的圆角，更商务 */
    transition: background-color 0.2s ease, transform 0.2s ease;
    text-transform: none; /* No uppercase transform unless desired */
}

.btn-request-quote:hover {
    background-color: #e6a600; /* Darker shade on hover */
    color: #fff;
    transform: translateY(-2px);
}

/* Adjustments for product cards within the listing page context if needed */
.products-display-area .row {
    /* Add any specific row-level gutter adjustments if Bootstrap defaults aren't enough */
}

/* Add responsive adjustments for product cards if necessary */
@media (max-width: 767px) {
    .product-card-img-container {
        height: 180px; /* Slightly smaller image height on mobile */
    }
    .product-card-title {
        font-size: 1rem;
    }
    .btn-request-quote {
        padding: 8px 20px;
        font-size: 0.9rem;
    }
}