/**
 * List Layout Styles for Product Display
 * 
 * This file contains styles specific to the list layout.
 * The main wcps-styles.scss is loaded as default for all layouts.
 * 
 * @package Product_Display
 */

// List layout specific styles will be added here
// Currently empty - styles will be moved from wcps-styles.scss as needed

// Breakpoints
$breakpoint-xs: 480px;
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;

/* ----------------List Style layout------------- */

// ============================================================================
// SHARED BASE STYLES - ALL LIST LAYOUTS
// ============================================================================
// 
// ACTION BUTTONS: Icons only - all text is hidden via .wcps-btn-text { display: none; }
// ALL LAYOUTS: Actions positioned AROUND images in circular pattern (top, right, bottom, left)
//
// Layout 1: Rectangle image + Glassmorphism background
// Layout 2: CIRCULAR image + Gradient background
// Layout 3: Rectangle image + Minimalist white background
//
// ============================================================================

.wcps-container {
    background: var(--wcps-container-background, #ffffff3b);
    padding: var(--wcps-container-padding, 25px);
    margin: var(--wcps-container-margin, 0px);

    // Common styles for all list layouts
    &[class*="wcps-layout-list-layout"] {
        margin: 30px 0;
        position: relative;

        // Products container
        .wcps-products-container {
            background: var(--wcps-container-background, #ffffff3b);
            padding: var(--wcps-container-padding, 25px);
            margin: var(--wcps-container-margin, 0px);
        }

        // Grid structure
        .wcps-list-products {
            display: flex;
            flex-direction: column;
            gap: 20px;

            @media (max-width: 768px) {
                gap: 16px;
            }

            @media (max-width: 480px) {
                gap: 12px;
            }
        }
    }



}



/* -------------- List Layout style END -------------- */