/* Styles adapted from reference-design/faceted-search-reference.html */
/* Assuming :root variables, global resets, and .container are in core/main.css */

/* Breadcrumbs */
.breadcrumbs {
    padding: var(--space-sm) 0;
    margin-bottom: var(--space-md);
}

.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    font-size: 0.875rem;
    padding-left: 0; /* Resets ul/ol default padding */
}

.breadcrumb-item {
    color: var(--gray-600);
}

.breadcrumb-item:after {
    content: '/';
    margin-left: var(--space-xs);
    color: var(--gray-400);
}

.breadcrumb-item:last-child:after {
    content: '';
}

.breadcrumb-item a {
    color: var(--gray-600);
    text-decoration: none;
}
.breadcrumb-item a:hover {
    color: var(--accent);
}

.breadcrumb-item.active { /* Ensure this class is used in template for current page */
    color: var(--gray-800);
    font-weight: 500;
}

/* Search Header (Page Specific) */
.search-header {
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--gray-200); /* var(--color-border-subtle) */
    margin-bottom: var(--space-lg); /* Added based on existing file */
    background-color: var(--secondary); /* var(--color-background-default) */
}

.search-title {
    font-size: 1.75rem; /* var(--font-size-xxl) */
    font-weight: 700; /* var(--font-weight-bold) */
    margin-bottom: var(--space-xs);
    letter-spacing: -0.02em;
    color: var(--primary); /* var(--color-text-default) */
}

.search-meta {
    font-size: 0.875rem; /* var(--font-size-sm) */
    color: var(--gray-600); /* var(--color-text-muted) */
    margin-bottom: var(--space-md); /* Added based on existing file */
}

/* search-controls combines mobile trigger and sort */
.search-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-sm); /* from reference .search-sort */
}

.search-sort {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.sort-label { /* Kept visually-hidden in template, so style if shown */
    color: var(--gray-700);
    font-weight: 500;
    font-size: 0.875rem;
}

.sort-select {
    padding: 0.5rem 2rem 0.5rem 1rem; /* from reference */
    border: 1px solid var(--gray-300); /* var(--color-border-default) */
    border-radius: 4px; /* var(--border-radius-sm) */
    background-color: var(--secondary); /* var(--color-input-background) */
    font-family: inherit;
    font-size: 0.875rem; /* var(--font-size-sm) */
    color: var(--gray-800); /* var(--color-input-text) */
    cursor: pointer;
    appearance: none;
    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='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    transition: var(--transition);
}

.sort-select:hover {
    border-color: var(--gray-400);
}

/* Main Layout */
.main-content-area.section-padding { /* Keep existing class if it provides global padding */
    padding-top: var(--space-md); /* Reference main padding */
    padding-bottom: var(--space-xl); /* Reference main padding */
}

.search-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

@media (min-width: 768px) { /* Matches reference, existing was 992px */
    .search-container {
        grid-template-columns: 240px 1fr; /* Reference: 240px */
        gap: var(--space-xl); /* Reference: var(--space-xl) */
    }
}

/* Filter Sidebar */
.filters-sidebar {
    display: none; /* Hidden by default on mobile, shown by JS or media query */
    background-color: var(--secondary); /* var(--color-background-default) */
    /* padding: var(--space-md); From existing, reference has no padding on sidebar itself */
    /* border-radius: var(--border-radius-lg); From existing */
    /* box-shadow: var(--shadow-sm); From existing */
    align-self: flex-start;
}

@media (min-width: 768px) {
    .filters-sidebar {
        display: block;
        /* flex: 0 0 280px; From existing, reference is 240px via grid */
        /* max-height: calc(100vh - 200px); From existing */
        /* overflow-y: auto; From existing */
    }
}
.filters-sidebar .form-control { /* Style for general text inputs in filters if any */
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.875rem;
    margin-bottom: var(--space-sm); /* From existing */
}


.filter-group {
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--gray-200); /* var(--color-border-subtle) */
}

.filter-group:last-child {
    border-bottom: none;
    margin-bottom: 0; /* From existing */
    padding-bottom: 0; /* From existing */
}

.filter-title { /* Applied to h3 or label */
    font-weight: 600; /* var(--font-weight-semibold) */
    font-size: 1rem; /* var(--font-size-md) */
    margin-bottom: var(--space-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--primary); /* var(--color-text-default) */
}

.filter-toggle { /* Button for expanding/collapsing */
    background: none;
    border: none;
    font-size: 1.2rem; /* Existing: 1.2em */
    line-height: 1;
    cursor: pointer;
    color: var(--gray-600); /* var(--color-text-muted) */
}

.filter-list {
    display: flex; /* Default state for JS toggle, reference has this */
    flex-direction: column;
    gap: var(--space-xs);
    list-style: none; /* From existing */
    padding-left: 0; /* From existing */
    margin-top: var(--space-xs); /* From existing */
}
.filter-list.hidden { /* Add class via JS to hide */
    display: none;
}


.scrollable-filter-list { /* From existing, good for long lists */
    max-height: 200px; 
    overflow-y: auto;
    padding-right: var(--space-xs);
}

.filter-option {
    display: flex;
    align-items: center;
    gap: var(--space-xs); /* Reference */
    /* margin-bottom: var(--space-xxs); From existing */
}

.filter-checkbox,
.filter-option input[type="checkbox"] { /* Generalizing for template */
    width: 18px;
    height: 18px;
    accent-color: var(--cisco-blue); /* var(--color-primary) */
    margin-right: var(--space-xs); /* Adjusted from existing var(--space-sm) */
}

.filter-label,
.filter-option label { /* Generalizing for template */
    font-size: 0.875rem; /* var(--font-size-sm) */
    color: var(--gray-700); /* var(--color-text-default) */
    cursor: pointer;
    user-select: none;
    flex-grow: 1; /* From existing */
}

.filter-count {
    margin-left: auto; /* Reference */
    font-size: 0.75rem; /* var(--font-size-xs) */
    color: var(--gray-500); /* var(--color-text-muted) */
    /* background-color: var(--color-background-muted); From existing */
    /* padding: 2px 6px; From existing */
    /* border-radius: var(--border-radius-sm); From existing */
}

/* Price Range */
.price-inputs,
.filter-price-inputs { /* Generalizing for template */
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
}

.price-input,
.filter-price-inputs input[type="text"],
.filter-price-inputs input[type="number"] { /* Generalizing for template */
    width: 80px; /* Reference */
    padding: 0.5rem;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.875rem;
    /* width: calc(50% - var(--space-xs) / 2 - 10px); From existing, prefer fixed width */
}

.price-separator {
    color: var(--gray-500);
}

.price-slider { /* For the range input */
    margin-top: var(--space-sm);
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: var(--gray-300);
    outline: none;
}

.price-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--cisco-blue);
    cursor: pointer;
}
.price-slider::-moz-range-thumb { /* Firefox */
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--cisco-blue);
    cursor: pointer;
    border: none;
}


.single-checkbox label { /* From existing, for "In Stock" like filters */
    margin-left: var(--space-sm);
}

.filter-actions { /* From existing */
    margin-top: var(--space-lg);
    display: flex;
    flex-direction: column; /* Reference might have side-by-side, check template */
    gap: var(--space-sm);
}
.filter-actions .btn { /* From existing */
    width: 100%;
    /* Assuming .btn, .btn-primary, .btn-secondary are defined in core/main.css */
}


/* Mobile Filters */
.mobile-filters { /* Wrapper for the button */
    display: block; /* Shown by default, hidden by media query for larger screens */
    margin-bottom: var(--space-md);
}

@media (min-width: 768px) {
    .mobile-filters {
        display: none;
    }
}

.filter-button,
.mobile-filter-trigger { /* Generalizing for template */
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0.5rem 1rem; /* Reference */
    background-color: var(--secondary); /* var(--color-primary) */
    border: 1px solid var(--gray-300); /* var(--color-border-default) */
    border-radius: 4px; /* var(--border-radius-md) */
    font-size: 0.875rem; /* var(--font-size-sm) */
    font-weight: 500;
    color: var(--gray-700); /* var(--color-text-over-primary) */
    cursor: pointer;
}
.filter-button:hover,
.mobile-filter-trigger:hover {
    background-color: var(--gray-100);
}


.filter-button-icon {
    font-size: 1.1rem; /* Reference */
    /* margin-right: var(--space-xs); From existing */
}

/* Products Content Area */
.products-content {
    flex-grow: 1;
}

.products-grid {
    display: grid;
    /* Responsive grid columns from reference */
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); 
    gap: var(--space-md);
    margin-bottom: var(--space-lg); /* From existing */
}

@media (min-width: 480px) { /* Reference */
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

@media (min-width: 768px) { /* Reference */
    .products-grid {
        /* Existing was 250px, reference is 220px for this breakpoint */
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); 
    }
}
@media (min-width: 992px) { /* Add one more breakpoint for slightly larger cards if desired */
    .products-grid {
         /* grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Matches existing */
    }
}


/* Product Card - these styles will primarily affect products/partials/_product_card.html */
.product-card {
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    background-color: var(--secondary); /* Ensure cards have a background */
    border: 1px solid var(--gray-200); /* Add subtle border */
    border-radius: 4px; /* Add border radius */
    overflow: hidden; /* To contain badges */
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Add hover shadow */
}

.product-card a { /* Make entire card clickable if desired, or just parts */
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-card-image-wrapper { /* New wrapper from reference for badges */
    background-color: var(--gray-100);
    border-radius: 0; /* Top corners handled by card, or remove if image is not flush */
    overflow: hidden;
    aspect-ratio: 1/1;
    /* margin-bottom: var(--space-xs); Removed, padding in content */
    padding: var(--space-sm); /* Reference */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* For badges */
}
.product-card-image-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}


.refurbished-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: var(--cisco-blue);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    z-index: 1;
}

.condition-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background-color: #10b981; /* Green */
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    z-index: 1;
}
.product-card-content { /* New wrapper for text content */
    padding: var(--space-sm);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-card-title {
    font-weight: 600;
    font-size: 0.95rem; /* Reference */
    margin-bottom: var(--space-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: var(--gray-800); /* Reference */
    line-height: 1.3; /* Ensure consistent line height */
}

.product-card-meta { /* For SKU/Model */
    margin-bottom: var(--space-xs);
    font-size: 0.8rem; /* Reference */
    color: var(--gray-600); /* Reference */
}

.product-card-price {
    font-weight: 700;
    color: var(--primary); /* Reference */
    margin-top: auto; /* Pushes to bottom */
    padding-top: var(--space-xs); /* Reference */
    font-size: 1rem; /* Ensure price is prominent */
}

.product-card-original {
    text-decoration: line-through;
    color: var(--gray-500); /* Reference */
    font-size: 0.875rem; /* Reference */
    margin-right: var(--space-xs); /* Reference */
}

.discount-percent {
    color: #e53e3e; /* Red from reference */
    font-size: 0.875rem; /* Reference */
    font-weight: 600; /* Reference */
}

.warranty-tag {
    font-size: 0.75rem; /* Reference */
    color: var(--gray-700); /* Reference */
    display: block;
    margin-top: 4px; /* Reference */
}

/* Pagination - these styles will primarily affect core/partials/_pagination.html */
.pagination {
    margin-top: var(--space-xl); /* Reference */
    margin-bottom: var(--space-lg); /* Added padding below pagination */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-xs); /* Reference */
    padding-left: 0; /* Reset ul default */
}

.page-item {
    display: inline-block; /* Reference */
}

.page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px; /* Reference width */
    height: 36px; /* Reference height */
    padding: 0 var(--space-xs); /* Allow content to determine width if text */
    border-radius: 4px; /* Reference */
    font-size: 0.875rem; /* Reference */
    font-weight: 500; /* Reference */
    color: var(--gray-700); /* Reference */
    border: 1px solid var(--gray-300); /* Reference */
    transition: var(--transition); /* Reference */
    text-decoration: none;
}

.page-link:hover {
    background-color: var(--gray-100); /* Reference */
    color: var(--gray-900); /* Reference */
    border-color: var(--gray-400); /* Slightly darker border on hover */
}

.page-item.active .page-link {
    background-color: var(--primary); /* Use defined primary color */
    color: var(--secondary); /* Use theme variable for white text on dark background */
    border-color: var(--primary); /* Use defined primary color */
}

.page-item.disabled .page-link {
    color: var(--gray-400); /* Reference */
    cursor: not-allowed;
    background-color: var(--secondary);
}
.page-item.disabled .page-link:hover {
    background-color: var(--secondary);
    border-color: var(--gray-300);
}


/* No products found message */
.no-products-found {
    text-align: center;
    padding: var(--space-xl) var(--space-md);
    background-color: var(--secondary); /* var(--color-background-default) */
    border-radius: var(--border-radius-lg); /* From existing */
    /* box-shadow: var(--shadow-sm); From existing */
    border: 1px solid var(--gray-200); /* Add a subtle border */
}
.no-products-found h3 {
    font-size: var(--font-size-lg); /* From existing */
    color: var(--primary); /* var(--color-text-default) */
    margin-bottom: var(--space-sm); /* From existing */
}
.no-products-found p {
    color: var(--gray-600); /* var(--color-text-muted) */
    margin-bottom: var(--space-md); /* From existing */
}
.no-products-found .btn { /* Assuming .btn and .btn-primary are from core */
    margin-top: var(--space-sm);
}


/* Responsive adjustments from existing, merged with reference logic */
@media (max-width: 992px) { /* Tablet and below - existing breakpoint */
    /* .search-container flex-direction handled by grid change */
    /* .filters-sidebar width/max-height handled by grid change and mobile display logic */
    
    /* .products-grid columns handled by its own media queries */
}

@media (max-width: 767px) { /* Mobile - reference uses 768px, adjust to 767px for max-width */
    .search-controls {
        flex-direction: column;
        align-items: flex-start; /* Reference */
        gap: var(--space-md); /* Reference */
    }
    .search-sort {
        width: 100%; /* Make sort take full width if stacked */
    }
    .sort-select {
        width: 100%;
    }

    .filters-sidebar { /* Ensure it's hidden by default on mobile if not handled by JS */
        display: none;
    }
    .filters-sidebar.open { /* Class to be added by JS to show */
        display: block;
        width: 100%;
        margin-bottom: var(--space-lg); /* From existing */
        max-height: none; /* From existing */
    }
    .mobile-filter-trigger { /* From existing, ensure it's visible */
         display: inline-flex; 
         align-items: center;
    }

    .filter-price-inputs { /* From existing */
        flex-direction: column;
        align-items: stretch;
    }
    .filter-price-inputs .price-input,
    .filter-price-inputs input[type="text"],
    .filter-price-inputs input[type="number"] { /* From existing */
        width: 100%;
    }
    .filter-price-inputs .price-separator { /* From existing */
        display: none;
    }
}
/* Layout Controls */
.layout-controls {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-left: auto; /* Pushes to the right */
}

.layout-btn {
    background-color: transparent;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    padding: 0.375rem; /* Smaller padding for icon buttons */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-600);
    /* Removed 'color' from transition to test if it's causing issues with SVG currentColor */
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.layout-btn:hover {
    background-color: var(--gray-100);
    border-color: var(--gray-400);
    color: var(--gray-800);
}

.layout-btn.active {
    background-color: var(--primary); /* Use defined primary color */
    border-color: var(--primary);   /* Use defined primary color */
    color: var(--secondary); /* Use theme variable for white, ensures icon stroke is also white via currentColor */
}

.layout-btn.active:hover {
    background-color: #003d5c; /* Darker shade of --primary, consistent with .btn-primary:hover */
    border-color: #003d5c; /* Darker shade of --primary */
    color: var(--secondary); /* Ensure text/icon color remains consistent on hover */
}

.layout-btn .icon {
    width: 20px;
    height: 20px;
    display: inline-flex; /* Ensure SVG is treated as an inline flex item */
    align-items: center;
    justify-content: center;
}

.layout-btn .icon svg { /* Target the SVG element itself */
    width: 100%;
    height: 100%;
    stroke: currentColor; /* Explicitly set stroke to inherit button's color */
    fill: none; /* Ensure no fill interferes */
    stroke-width: 2px; /* Explicitly set stroke-width from CSS */
}

.layout-btn .icon svg path,
.layout-btn .icon svg rect,
.layout-btn .icon svg line { /* Target common SVG elements */
    stroke: currentColor;
    fill: none !important; /* Re-add important to fill to be absolutely sure */
    stroke-width: inherit; /* Inherit stroke-width from parent svg element */
}


/* Product List View Styles */
.products-grid.view-list {
    grid-template-columns: 1fr; /* Single column for list view */
    gap: var(--space-sm); /* Smaller gap for list items */
}

.products-grid.view-list .product-card {
    flex-direction: row;
    align-items: center;
    /* Remove hover transform for list items if it feels odd */
    /* transform: none; */ 
}

.products-grid.view-list .product-card:hover {
    /* Adjust hover for list view if needed, or remove if transform is removed */
    /* box-shadow: 0 2px 8px rgba(0,0,0,0.08);  */
}


.products-grid.view-list .product-card-image-wrapper {
    flex: 0 0 120px; /* Fixed width for image in list view */
    height: 120px; /* Fixed height */
    aspect-ratio: unset; /* Override aspect ratio from grid view */
    padding: var(--space-xs);
    border-right: 1px solid var(--gray-200);
    margin-bottom: 0; /* Remove bottom margin */
}

.products-grid.view-list .product-card-content {
    padding: var(--space-sm);
    flex-grow: 1;
    align-self: stretch; /* Make content area take full height of the row */
}

.products-grid.view-list .product-card-title {
    -webkit-line-clamp: 2; /* Allow more lines or adjust as needed for list view */
    font-size: 1rem; /* Slightly larger title for list view */
}

.products-grid.view-list .product-card-meta {
    margin-bottom: var(--space-xs);
}

.product-card-description-list { /* Add a new element for short description in list view */
    font-size: 0.875rem;
    color: var(--gray-700);
    margin-bottom: var(--space-sm);
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Limit to 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}


.products-grid.view-list .product-card-price {
    margin-top: var(--space-sm); /* Adjust spacing for list view */
    padding-top: 0;
    text-align: left; /* Align price to left in list view */
}

/* Ensure product card itself doesn't have conflicting display flex from grid view if not overridden */
.products-grid.view-list .product-card a {
    flex-direction: row; /* Ensure link content also flows row-wise */
}

/* Hide elements not suitable for list view if any, or show elements specific to list view */
/* Example: .products-grid.view-list .some-grid-only-element { display: none; } */
/* Example: .products-grid.view-list .some-list-only-element { display: block; } */

/* Adjustments for product card in list view */
.products-grid.view-list .product-card .product-card-actions { /* If you add an actions container */
    margin-left: auto; /* Push actions to the right in list view */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding-right: var(--space-sm);
}

/* Responsive adjustments for layout controls if needed */
@media (max-width: 576px) { /* Example breakpoint */
    .search-controls {
        /* Adjust layout controls stacking if sort also stacks */
    }
    .layout-controls {
        /* Potentially hide or make smaller on very small screens */
        /* margin-left: 0; */
        /* width: 100%; */
        /* justify-content: flex-end; */
    }
}
/* Compressed List View Styles */
.products-grid.view-compressed-list {
    grid-template-columns: 1fr; /* Single column */
    gap: var(--space-xxs); /* Very small gap */
}

.products-grid.view-compressed-list .product-card {
    flex-direction: row;
    align-items: center;
    padding: var(--space-xs); /* Smaller padding for the card itself */
    border-bottom: 1px solid var(--gray-200); /* Separator line */
    border-left: none;
    border-right: none;
    border-top: none;
    border-radius: 0; /* No border radius for compressed items */
    box-shadow: none !important; /* No shadow on hover for compressed */
    transform: none !important; /* No transform on hover */
}

.products-grid.view-compressed-list .product-card:last-child {
    border-bottom: none;
}

.products-grid.view-compressed-list .product-card a {
    flex-direction: row;
    align-items: center;
    width: 100%;
}

.products-grid.view-compressed-list .product-card-image-wrapper {
    flex: 0 0 60px; /* Very small fixed width for image */
    height: 60px; /* Very small fixed height */
    padding: var(--space-xxs); /* Minimal padding */
    border: 1px solid var(--gray-200); /* Optional: border around image */
    border-radius: 2px;
    margin-right: var(--space-sm);
    aspect-ratio: 1/1; /* Keep it square */
}

.products-grid.view-compressed-list .product-card-image-wrapper img {
    object-fit: contain;
}

.products-grid.view-compressed-list .product-card-content {
    padding: 0; /* No extra padding for content area */
    flex-grow: 1;
    display: flex; /* Use flex to align items in the content area */
    flex-direction: row; /* Align items horizontally */
    align-items: center; /* Vertically center items in the row */
    gap: var(--space-sm); /* Gap between content elements */
}

.products-grid.view-compressed-list .product-card-title {
    font-size: 0.9rem; /* Smaller title */
    -webkit-line-clamp: 1; /* Limit to 1 line */
    margin-bottom: 0; /* No margin below title */
    flex-grow: 1; /* Allow title to take available space */
    font-weight: 500;
}

.products-grid.view-compressed-list .product-card-meta {
    font-size: 0.75rem; /* Smaller meta */
    margin-bottom: 0;
    white-space: nowrap; /* Prevent meta from wrapping */
    flex-shrink: 0; /* Don't let meta shrink if title is long */
}

.products-grid.view-compressed-list .product-card-description-list {
    display: none; /* Hide full description in compressed view */
}

.products-grid.view-compressed-list .product-card-price {
    font-size: 0.9rem; /* Smaller price */
    margin-top: 0;
    padding-top: 0;
    text-align: right; /* Align price to right */
    white-space: nowrap;
    flex-shrink: 0; /* Don't let price shrink */
    margin-left: auto; /* Push price to the far right if other elements are present */
}

.products-grid.view-compressed-list .product-card-original,
.products-grid.view-compressed-list .discount-percent {
    font-size: 0.75rem; /* Smaller original price/discount */
}

.products-grid.view-compressed-list .warranty-tag,
.products-grid.view-compressed-list .refurbished-badge,
.products-grid.view-compressed-list .condition-badge {
    display: none; /* Hide badges and warranty in compressed view for simplicity */
}

/* Ensure the main product card link takes up the full space */
.products-grid.view-compressed-list .product-card a {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    text-decoration: none;
    color: inherit;
}
/* Stock Status Styles */
.product-card-stock-status {
    font-size: 0.8rem;
    margin-bottom: var(--space-xs);
    margin-top: var(--space-xxs); /* Add some space above if it's before price */
    text-align: left; /* Or right, depending on placement */
}

.stock-status.in-stock {
    color: var(--color-success-text, #0f5132); /* Assuming a success color variable exists or fallback */
    font-weight: 500;
}

.stock-status.out-of-stock {
    color: var(--color-danger-text, #842029); /* Assuming a danger color variable exists or fallback */
    font-weight: 500;
}