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

// Astra support for WCPS
html :where([style*=border-width]) {
    border-style: none;
}

/* -------------- BASIC Grid Layout- wcps-layout-basic-grid: Working now  -------------- */
// Essential Elegance Grid 
.wcps-container {
    background: var(--wcps-container-background, #ffffff3b);
    padding: var(--wcps-container-padding, 25px);
    margin: var(--wcps-container-margin, 0px);

    &.wcps-layout-basic-grid {
        margin: 30px 0;
        position: relative;

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

        // Grid Container
        .wcps-grid-container {
            display: grid;
            grid-template-columns: repeat(var(--wcps-columns, 4), minmax(0, 1fr));
            gap: var(--wcps-grid-gap, 20px);
            width: var(--wcps-grid-width, 100%);

            // Responsive grid adjustments
            @media (max-width: 1024px) {
                grid-template-columns: repeat(3, 1fr);
            }

            @media (max-width: 768px) {
                grid-template-columns: repeat(2, 1fr);
            }

            @media (max-width: 480px) {
                grid-template-columns: repeat(1, 1fr);
                gap: 15px;
            }
        }

        // Grid Item
        .wcps-grid-item {
            border: var(--wcps-border-width, 1px) var(--wcps-border-style, solid) var(--wcps-border-color, #eee);
            border-radius: var(--wcps-border-radius, 8px);
            overflow: hidden;
            transition: all var(--wcps-hover-transition, 0.3s) ease;

            // Conditional box shadow based on setting
            @if var(--wcps-box-shadow)=="none" {
                box-shadow: none;
            }

            @else if var(--wcps-box-shadow)=="light" {
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            }

            @else if var(--wcps-box-shadow)=="medium" {
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
            }

            @else if var(--wcps-box-shadow)=="heavy" {
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            }

            @else {
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            }

            &:hover {

                // Conditional hover effect
                @if var(--wcps-hover-effect)=="none" {
                    transform: none;
                    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
                }

                @else if var(--wcps-hover-effect)=="lift" {
                    transform: translateY(-3px);
                    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
                }

                @else if var(--wcps-hover-effect)=="shadow" {
                    transform: none;
                    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
                }

                @else if var(--wcps-hover-effect)=="zoom" {
                    transform: scale(1.02);
                    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
                }

                @else if var(--wcps-hover-effect)=="glow" {
                    transform: none;
                    box-shadow: 0 0 15px rgba(var(--wcps-product-title), 0.5);
                }

                @else {
                    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
                    transform: translateY(-3px);
                }
            }
        }

        // Product wrapper
        .wcps-product {
            height: var(--wcps-product-width, 100%);
            display: flex;
            // flex-direction: var(--wcps-product-flex-direction, column); // Need to create column, column-reverse, row, row-reverse
            flex-direction: column;
            background: var(--wcps-product-background, #fff);
        }

        // Fix image display issues
        .wcps-product-image {
            position: relative;
            overflow: hidden;
            aspect-ratio: var(--wcps-image-aspect-ratio, 1/1);
            z-index: 5;
            width: var(--wcps-product-image-width, 100%);
            height: var(--wcps-product-image-height, 100%);

            .wcps-product-badge {
                font-size: var(--wcps-product-badge-font-size, 14px);
                font-weight: var(--wcps-product-badge-font-weight, 600);
                text-transform: var(--wcps-product-badge-text-transform, capitalize); // Need to create- uppercase, capitalize, lowercase
                text-align: center;
                word-break: break-all;
                letter-spacing: 0.4px;
                line-height: 1.2;
                list-style: none;
                -ms-flex-align: center;
                justify-content: center;
                border-radius: var(--wcps-product-badge-border-radius, 20px);
                padding: var(--wcps-product-badge-padding, 5px);
                margin-bottom: 10px;
                z-index: var(--wcps-product-badge-z-index, 2);
                background: var(--wcps-product-badge-background, rgb(54, 182, 217));
                color: var(--wcps-product-badge-font-color, #fff);
                position: absolute;
                right: 5px;
                top: 5px;
            }

            a {
                display: block;
                width: 100%;
                height: 100%;
            }

            img.wcps-image {
                width: 100%;
                height: 100%;
                object-fit: cover; // Ensures image covers the area properly
                display: block;
                transition: transform 0.4s ease;
                border-radius: var(--wcps-image-border-radius, 0);
            }

            &:hover {
                img.wcps-image {

                    // Conditional image hover effect
                    @if var(--wcps-image-hover-effect)=="none" {
                        transform: none;
                    }

                    @else if var(--wcps-image-hover-effect)=="zoom" {
                        transform: scale(1.05);
                    }

                    @else if var(--wcps-image-hover-effect)=="fade" {
                        opacity: 0.8;
                    }

                    @else if var(--wcps-image-hover-effect)=="blur" {
                        filter: blur(2px);
                    }

                    @else {
                        transform: scale(1.05); // Default
                    }
                }
            }
        }

        // Product actions (buttons)
        .wcps-product-actions {
            position: absolute;
            right: 10px;
            bottom: 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 8px;
            padding: 0;
            opacity: 0;
            visibility: hidden;
            transform: translateY(20px) scale(0.8);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

            a {
                position: relative;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 35px;
                height: 35px;
                border-radius: 20%;
                background: rgba(255, 255, 255, 0.95);
                backdrop-filter: blur(10px);
                border: 1px solid rgba(255, 255, 255, 0.2);
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
                color: #333;
                font-size: 16px;
                text-decoration: none;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                overflow: visible;

                // Icon styling
                .wcps-btn-icon {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    z-index: 2;
                    transition: transform 0.3s ease;

                    i {
                        font-size: 16px;
                        transition: all 0.3s ease;
                    }
                }

                // Modern CTA tooltip
                .wcps-btn-cta {
                    position: absolute;
                    right: calc(100% + 12px);
                    top: 50%;
                    transform: translateY(-50%) translateX(10px);
                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                    color: #fff;
                    padding: 8px 12px;
                    border-radius: 8px;
                    font-size: 12px;
                    font-weight: 500;
                    white-space: nowrap;
                    opacity: 0;
                    visibility: hidden;
                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
                    z-index: 100;

                    // Modern arrow with gradient
                    &::before {
                        content: '';
                        position: absolute;
                        left: 100%;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 0;
                        height: 0;
                        border: 6px solid transparent;
                        border-left: 6px solid #667eea;
                        filter: drop-shadow(2px 0 2px rgba(102, 126, 234, 0.3));
                    }

                    // Subtle animation
                    &::after {
                        content: '';
                        position: absolute;
                        inset: 0;
                        border-radius: inherit;
                        background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
                        opacity: 0;
                        transition: opacity 0.3s ease;
                    }
                }

                &:hover {
                    transform: translateY(-2px) scale(1.05);
                    background: #fff;
                    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
                    border-color: rgba(102, 126, 234, 0.3);

                    .wcps-btn-icon {
                        transform: scale(1.1);

                        i {
                            color: #667eea;
                        }
                    }

                    .wcps-btn-cta {
                        opacity: 1;
                        visibility: visible;
                        transform: translateY(-50%) translateX(0);

                        &::after {
                            opacity: 1;
                        }
                    }
                }

                // Specific button styles
                &.wcps-add-to-cart {
                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                    color: #fff;
                    border-color: transparent;

                    &:hover {
                        background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
                        color: #fff;

                        .wcps-btn-icon i {
                            color: #fff;
                        }
                    }

                    .wcps-btn-cta {
                        background: linear-gradient(135deg, #4c51bf 0%, #553c9a 100%);

                        &::before {
                            border-left-color: #4c51bf;
                        }
                    }
                }

                &.wcps-wishlist {
                    .wcps-btn-cta {
                        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
                        box-shadow: 0 4px 15px rgba(240, 147, 251, 0.4);

                        &::before {
                            border-left-color: #f093fb;
                        }
                    }

                    &:hover .wcps-btn-icon i {
                        color: #f093fb;
                    }
                }

                &.wcps-quickview {
                    .wcps-btn-cta {
                        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
                        box-shadow: 0 4px 15px rgba(79, 172, 254, 0.4);

                        &::before {
                            border-left-color: #4facfe;
                        }
                    }

                    &:hover .wcps-btn-icon i {
                        color: #4facfe;
                    }
                }

                &.wcps-compare {
                    .wcps-btn-cta {
                        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
                        box-shadow: 0 4px 15px rgba(67, 233, 123, 0.4);

                        &::before {
                            border-left-color: #43e97b;
                        }
                    }

                    &:hover .wcps-btn-icon i {
                        color: #43e97b;
                    }
                }
            }

            // Staggered animation for multiple buttons
            a:nth-child(1) {
                transition-delay: 0.1s;
            }

            a:nth-child(2) {
                transition-delay: 0.15s;
            }

            a:nth-child(3) {
                transition-delay: 0.2s;
            }

            a:nth-child(4) {
                transition-delay: 0.25s;
            }
        }


        .wcps-grid-item:hover {
            .wcps-product-actions {
                opacity: 1;
                visibility: visible;
                transform: translateY(0) scale(1);
            }
        }


        // Enhanced pulse animation
        @keyframes modernPulse {
            0% {
                transform: scale(1);
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            }

            50% {
                transform: scale(1.05);
                box-shadow: 0 8px 30px rgba(102, 126, 234, 0.3);
            }

            100% {
                transform: scale(1);
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            }
        }

        // Product content
        .wcps-product-content {
            background: var(--wcps-product-background, #ffffff);
            padding: var(--wcps-product-content-padding, 15px);
            margin: var(--wcps-product-content-margin, 0px);
            flex-grow: 1;
            display: flex;
            flex-direction: var(--wcps-product-content-direction, column); // Need to create column, column-reverse or row,  row-reverse
            z-index: 1;
            text-align: var(--wcps-text-align, left);

            .wcps-product-title {
                margin: 0 0 10px;
                font-size: var(--wcps-title-size, 16px);
                font-weight: var(--wcps-title-weight, 600);

                a {
                    color: var(--wcps-product-title, #333);
                    font-size: var(--wcps-title-size, 16px);
                    font-weight: var(--wcps-title-weight, 600);
                    text-decoration: none;

                    &:hover {
                        color: var(--wcps-product-title-hover-color, #333);
                    }
                }
            }

            .wcps-product-price {
                font-weight: var(--wcps-price-font-weight, 700);
                font-size: var(--wcps-price-font-size, 18px);
                color: var(--wcps-price-font-color, #333);
                margin-bottom: 8px;

                del {
                    color: var(--wcps-price-delete-font-color, #888);
                }
            }

            .wcps-product-rating {
                margin-bottom: 10px;

                .star-rating {
                    font-size: var(--wcps-star-size, 10px);

                    &::before {
                        color: var(--wcps-star-color, #ffc107);
                        font-size: var(--wcps-star-size, 10px);

                    }
                }
            }

            .wcps-product-description {
                margin-top: auto;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                margin-top: 5px;

                p.wcps-product-description-content {
                    font-size: var(--wcps-desc-size, 14px);
                    color: var(--wcps-description-color, #666);
                }
            }
        }
    }

    // Add a keyframe for pulse animation if button animation is used
    @keyframes pulse {
        0% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.1);
        }

        100% {
            transform: scale(1);
        }
    }
}

/* -------------- Basic END -------------- */


/* --------------MODERN Card Grid layout wcps-layout-card-grid -------------- */
// Elevate Card Gallery 
.wcps-container {
    background: var(--wcps-container-background, #ffffff3b);
    padding: var(--wcps-container-padding, 25px);
    margin: var(--wcps-container-margin, 0px);

    &.wcps-layout-card-grid {
        margin: 30px 0;
        position: relative;

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

        // Card Container
        .wcps-card-container {
            display: grid;
            grid-template-columns: repeat(var(--wcps-columns, 4), minmax(0, 1fr));
            gap: var(--wcps-grid-gap, 25px);
            width: var(--wcps-grid-width, 100%);
            background: var(--wcps-container-background, #ffffff3b);
            padding: var(--wcps-container-padding, 25px);
            margin: var(--wcps-container-margin, 0px);

            // Responsive grid adjustments
            @media (max-width: 1200px) {
                grid-template-columns: repeat(3, 1fr);
                gap: 20px;
            }

            @media (max-width: 768px) {
                grid-template-columns: repeat(2, 1fr);
                gap: 18px;
            }

            @media (max-width: 480px) {
                grid-template-columns: repeat(1, 1fr);
                gap: 20px;
            }
        }

        // Modern Card Item with elevated design
        .wcps-card-item {
            background: var(--wcps-product-background, #fff);
            border-radius: var(--wcps-border-radius, 16px);
            overflow: hidden;
            position: relative;
            transition: all var(--wcps-hover-transition, 0.4s) cubic-bezier(0.25, 0.46, 0.45, 0.94);
            cursor: pointer;
            transform: translateY(-2px);
            transition: all 0.2s ease-in-out;


            // Modern card shadows
            @if var(--wcps-box-shadow)=="none" {
                box-shadow: none;
            }

            @else if var(--wcps-box-shadow)=="light" {
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            }

            @else if var(--wcps-box-shadow)=="medium" {
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            }

            @else if var(--wcps-box-shadow)=="heavy" {
                box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            }

            @else {
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            }

            // Modern hover effects
            &:hover {
                @if var(--wcps-hover-effect)=="none" {
                    transform: none;
                }

                @else if var(--wcps-hover-effect)=="lift" {
                    transform: translateY(-8px);
                    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
                }

                @else if var(--wcps-hover-effect)=="shadow" {
                    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
                }

                @else if var(--wcps-hover-effect)=="zoom" {
                    transform: scale(1.03);
                    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
                }

                @else if var(--wcps-hover-effect)=="glow" {
                    box-shadow: 0 0 30px rgba(var(--wcps-accent-color, 59, 130, 246), 0.3);
                }

                @else {
                    transform: translateY(-8px);
                    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
                }

                .wcps-card-overlay {
                    opacity: 1;
                }

                .wcps-product-actions.wcps-actions-hover {
                    opacity: 1;
                    transform: translateY(0);
                }

                .wcps-product-actions.wcps-actions-panel {
                    transform: translateX(0);
                }
            }
        }

        // Product wrapper
        .wcps-product {
            height: var(--wcps-product-width, 100%);
            display: flex;
            // flex-direction: var(--wcps-product-flex-direction, column);
            flex-direction: column;
            position: relative;
            background: var(--wcps-product-background, #fff);
        }

        // Enhanced Product Image with overlay
        .wcps-product-image {
            position: relative;
            overflow: hidden;
            aspect-ratio: var(--wcps-image-aspect-ratio, 4/3);

            // Gradient overlay for better text readability
            .wcps-card-overlay {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.3) 100%);
                opacity: 0;
                transition: opacity 0.3s ease;
                z-index: 2;
            }

            // Enhanced badge design
            .wcps-product-badge {
                position: var(--wcps-product-badge-position, absolute);
                top: var(--wcps-product-badge-top, 12px);
                right: var(--wcps-product-badge-right, 12px);
                background: linear-gradient(135deg, var(--wcps-product-badge-background, #ef4444) 0%, var(--wcps-product-badge-background, #dc2626) 100%);
                color: var(--wcps-product-badge-font-color, #fff);
                font-size: var(--wcps-product-badge-font-size, 12px);
                font-weight: var(--wcps-product-badge-font-weight, 700);
                text-transform: var(--wcps-product-badge-text-transform, uppercase);
                padding: var(--wcps-product-badge-padding, 5px);
                border-radius: var(--wcps-product-badge-border-radius, 20px);
                box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
                z-index: var(--wcps-product-badge-z-index, 3);
                letter-spacing: 0.5px;
                backdrop-filter: blur(10px);
            }

            a {
                display: block;
                width: 100%;
                height: 100%;
                position: relative;
                z-index: 1;
            }

            img.wcps-image {
                width: 100%;
                height: 280px;
                object-fit: cover;
                display: block;
                transition: transform var(--wcps-image-transition, 0.6s) cubic-bezier(0.25, 0.46, 0.45, 0.94);
                border-radius: 0;
            }

            &:hover {
                img.wcps-image {
                    @if var(--wcps-image-hover-effect)=="none" {
                        transform: none;
                    }

                    @else if var(--wcps-image-hover-effect)=="zoom" {
                        transform: scale(1.1);
                    }

                    @else if var(--wcps-image-hover-effect)=="fade" {
                        opacity: 0.9;
                    }

                    @else if var(--wcps-image-hover-effect)=="blur" {
                        filter: blur(1px);
                    }

                    @else {
                        transform: scale(1.1);
                    }
                }
            }
        }

        // Floating Action Buttons - Hover Style
        // Card Grid Action Buttons - Completely New Design
        .wcps-product-actions.wcps-actions-hover {
            position: absolute;
            bottom: 15px;
            right: 15px;
            display: flex;
            flex-direction: column;
            gap: 6px;
            opacity: 0;
            visibility: hidden;
            transform: translateX(30px) scale(0.7);
            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            z-index: 10;

            a.wcps-quickview,
            a.wcps-wishlist,
            a.wcps-add-to-cart,
            a.wcps-compare {
                position: relative;
                width: 40px;
                height: 40px;
                border-radius: 25px;
                background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
                border: 2px solid transparent;
                box-shadow:
                    0 8px 32px rgba(0, 0, 0, 0.12),
                    inset 0 2px 4px rgba(255, 255, 255, 0.9),
                    inset 0 -2px 4px rgba(0, 0, 0, 0.05);
                display: flex;
                align-items: center;
                justify-content: center;
                text-decoration: none;
                color: #64748b;
                font-size: 18px;
                transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                overflow: visible;
                backdrop-filter: blur(20px);

                // Subtle ring effect
                &::before {
                    content: '';
                    position: absolute;
                    inset: -2px;
                    border-radius: 50%;
                    background: linear-gradient(145deg, transparent, rgba(99, 102, 241, 0.1));
                    opacity: 0;
                    transition: opacity 0.3s ease;
                    z-index: -1;
                }

                // Icon container
                .wcps-icon,
                .wcps-btn-icon {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    z-index: 2;
                    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

                    i {
                        font-size: 18px;
                        transition: all 0.3s ease;
                    }
                }

                // Sleek CTA Design
                .wcps-btn-cta {
                    position: absolute;
                    right: calc(100% + 15px);
                    top: 50%;
                    transform: translateY(-50%) translateX(15px);
                    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
                    color: #f1f5f9;
                    padding: 10px 16px;
                    border-radius: 12px;
                    font-size: 13px;
                    font-weight: 600;
                    white-space: nowrap;
                    opacity: 0;
                    visibility: hidden;
                    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                    box-shadow:
                        0 10px 40px rgba(30, 41, 59, 0.3),
                        0 2px 8px rgba(30, 41, 59, 0.2);
                    z-index: 100;
                    backdrop-filter: blur(10px);
                    border: 1px solid rgba(255, 255, 255, 0.1);

                    // Elegant arrow
                    &::after {
                        content: '';
                        position: absolute;
                        left: 100%;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 0;
                        height: 0;
                        border: 8px solid transparent;
                        border-left: 8px solid #1e293b;
                        filter: drop-shadow(2px 0 4px rgba(30, 41, 59, 0.2));
                    }

                    // Shine effect
                    &::before {
                        content: '';
                        position: absolute;
                        top: 0;
                        left: -100%;
                        width: 100%;
                        height: 100%;
                        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
                        transition: left 0.6s ease;
                    }
                }

                // Hover States
                &:hover {
                    transform: translateY(-3px) scale(1.1);
                    box-shadow:
                        0 12px 40px rgba(0, 0, 0, 0.18),
                        inset 0 2px 4px rgba(255, 255, 255, 0.9),
                        inset 0 -2px 4px rgba(0, 0, 0, 0.05);

                    &::before {
                        opacity: 1;
                    }

                    .wcps-btn-cta {
                        opacity: 1;
                        visibility: visible;
                        transform: translateY(-50%) translateX(0);

                        &::before {
                            left: 100%;
                        }
                    }
                }

                // Specific button styles with unique colors
                &.wcps-add-to-cart {
                    background: linear-gradient(145deg, #10b981 0%, #059669 100%);
                    color: #ffffff;
                    border-color: rgba(16, 185, 129, 0.3);

                    &::before {
                        background: linear-gradient(145deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.3));
                    }

                    &:hover {
                        background: linear-gradient(145deg, #059669 0%, #047857 100%);
                        box-shadow:
                            0 12px 40px rgba(16, 185, 129, 0.4),
                            inset 0 2px 4px rgba(255, 255, 255, 0.2),
                            inset 0 -2px 4px rgba(0, 0, 0, 0.1);
                    }

                    .wcps-btn-cta {
                        background: linear-gradient(135deg, #047857 0%, #065f46 100%);
                        color: #ecfdf5;

                        &::after {
                            border-left-color: #047857;
                        }
                    }
                }

                &.wcps-wishlist {
                    color: #ec4899;

                    &::before {
                        background: linear-gradient(145deg, rgba(236, 72, 153, 0.1), rgba(219, 39, 119, 0.2));
                    }

                    &:hover {
                        color: #be185d;
                        border-color: rgba(236, 72, 153, 0.3);
                    }

                    .wcps-btn-cta {
                        background: linear-gradient(135deg, #be185d 0%, #9d174d 100%);
                        color: #fdf2f8;

                        &::after {
                            border-left-color: #be185d;
                        }
                    }
                }

                &.wcps-quickview {
                    color: #3b82f6;

                    &::before {
                        background: linear-gradient(145deg, rgba(59, 130, 246, 0.1), rgba(37, 99, 235, 0.2));
                    }

                    &:hover {
                        color: #1d4ed8;
                        border-color: rgba(59, 130, 246, 0.3);
                    }

                    .wcps-btn-cta {
                        background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
                        color: #eff6ff;

                        &::after {
                            border-left-color: #1d4ed8;
                        }
                    }
                }

                &.wcps-compare {
                    color: #f59e0b;

                    &::before {
                        background: linear-gradient(145deg, rgba(245, 158, 11, 0.1), rgba(217, 119, 6, 0.2));
                    }

                    &:hover {
                        color: #d97706;
                        border-color: rgba(245, 158, 11, 0.3);
                    }

                    .wcps-btn-cta {
                        background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
                        color: #fffbeb;

                        &::after {
                            border-left-color: #d97706;
                        }
                    }
                }

                // Hide text by default
                .wcps-btn-text {
                    display: none;
                }

                // Staggered entrance animation
                &:nth-child(1) {
                    transition-delay: 0.1s;
                }

                &:nth-child(2) {
                    transition-delay: 0.15s;
                }

                &:nth-child(3) {
                    transition-delay: 0.2s;
                }

                &:nth-child(4) {
                    transition-delay: 0.25s;
                }
            }
        }

        // Show actions on card hover
        .wcps-card-item:hover .wcps-product-actions.wcps-actions-hover {
            opacity: 1;
            visibility: visible;
            transform: translateX(0) scale(1);
        }


        // Enhanced ripple effect animation
        @keyframes ripple {
            0% {
                transform: scale(0);
                opacity: 1;
            }

            100% {
                transform: scale(4);
                opacity: 0;
            }
        }

        .wcps-product-actions a.wcps-add-to-cart:active::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            animation: ripple 0.6s linear;
            pointer-events: none;
        }

        // END -------------------------

        // Enhanced Product Content
        .wcps-product-content {
            padding: var(--wcps-product-content-padding, 15px);
            margin: var(--wcps-product-content-margin, 0px);
            flex-grow: 1;
            display: flex;
            flex-direction: var(--wcps-product-content-direction, column);
            background: var(--wcps-product-background, #ffffff);
            position: relative;
            z-index: 1;
            text-align: var(--wcps-text-align, left);


            .wcps-product-title {
                margin: 0 0 12px;
                font-size: var(--wcps-title-size, 16px);
                font-weight: var(--wcps-title-weight, 600);
                line-height: 1.4;
                color: var(--wcps-product-title, #111827);

                a {
                    color: var(--wcps-product-title, #333);
                    font-size: var(--wcps-title-size, 16px);
                    font-weight: var(--wcps-title-weight, 600);
                    text-decoration: none;
                    transition: color 0.2s ease;

                    &:hover {
                        color: var(--wcps-product-title-hover-color, var(--wcps-accent-color, #3b82f6));
                    }
                }
            }

            .wcps-product-rating {
                margin-bottom: 12px;
                display: flex;
                align-items: center;
                gap: 6px;

                .star-rating {
                    font-size: var(--wcps-star-size, 14px);

                    &::before {
                        color: var(--wcps-star-color, #fbbf24);
                        font-size: var(--wcps-star-size, 14px);
                    }
                }
            }

            .wcps-product-price {
                font-weight: var(--wcps-price-font-weight, 700);
                font-size: var(--wcps-price-font-size, 18px);
                color: var(--wcps-price-font-color, #111827);
                margin-bottom: 12px;

                del {
                    color: var(--wcps-price-delete-font-color, #9ca3af);
                    font-weight: 400;
                    margin-right: 8px;
                }
            }

            .wcps-product-description {
                font-size: var(--wcps-desc-size, 14px);
                color: var(--wcps-description-color, #6b7280);
                line-height: 1.5;
                margin-top: auto;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;

                p.wcps-product-description-content {
                    font-size: var(--wcps-desc-size, 14px);
                    color: var(--wcps-description-color, #23282d);
                }
            }
        }


    }

    // Modern pulse animation
    @keyframes modernPulse {
        0% {
            transform: scale(1);
            box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
        }

        70% {
            transform: scale(1.05);
            box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
        }

        100% {
            transform: scale(1);
            box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
        }
    }
}

/* -------------- END -------------- */

// Magazine Mosaic  
.wcps-container {
    background: var(--wcps-container-background, #ffffff3b);
    padding: var(--wcps-container-padding, 25px);

    /* -------------- Masonry Grid Style 3 - Minimalist Magazine Style -------------- */
    // Magazine Mosaic  
    &.wcps-layout-masonry-grid-3 {
        margin: 30px 0;
        position: relative;

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

        // Masonry Container with magazine layout
        .wcps-masonry-container {
            column-count: 4;
            gap: var(--wcps-grid-gap, 20px);
            width: var(--wcps-grid-width, 100%);
            background: var(--wcps-container-background, #ffffff3b);
            padding: var(--wcps-container-padding, 25px);
            margin: var(--wcps-container-margin, 0px);

            // Responsive column adjustments
            @media (max-width: 1024px) {
                column-count: 3;
            }

            @media (max-width: 768px) {
                column-count: 2;
                column-gap: 15px;
            }

            @media (max-width: 480px) {
                column-count: 1;
                column-gap: 0;
            }
        }

        // Magazine-style Masonry Item
        .wcps-masonry-item {
            break-inside: avoid;
            margin-bottom: 20px;
            border: none;
            border-radius: 0;
            overflow: hidden;
            position: relative;
            background: #fff;
            transition: all 0.3s ease;
            transition: all var(--wcps-hover-transition, 0.3s) ease;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

            &:hover {
                transform: none;
                box-shadow: 0 0 0 1px #e0e0e0;

                .wcps-product-image img.wcps-image {
                    transform: scale(1.02);
                }

                .wcps-product-actions {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
        }

        // Product wrapper
        .wcps-product {
            display: flex;
            flex-direction: column;
            background: #fff;
            position: relative;
        }

        // Magazine-style image
        .wcps-product-image {
            position: relative;
            overflow: hidden;
            aspect-ratio: var(--wcps-image-aspect-ratio, 1/1);
            z-index: 5;
            width: var(--wcps-product-image-width, 100%);
            height: var(--wcps-product-image-height, 100%);
            border-radius: 0;

            .wcps-product-badge {
                position: absolute;
                top: 0;
                left: 0;
                background: #000;
                color: #fff;
                font-size: 10px;
                font-weight: 400;
                text-transform: uppercase;
                padding: 8px 12px;
                border-radius: 0;
                box-shadow: none;
                z-index: 3;
                letter-spacing: 1px;
                backdrop-filter: none;
            }

            a {
                display: block;
                width: 100%;
                height: 100%;
            }

            img.wcps-image {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
                transition: transform 0.4s ease;
            }

            &:hover {
                img.wcps-image {
                    transform: scale(1.02);
                }
            }

            // Magazine-style aspect ratios
            &.wcps-ratio-1 {
                aspect-ratio: 1 / 1;
            }

            &.wcps-ratio-2 {
                aspect-ratio: 1 / 1.5;
            }

            &.wcps-ratio-3 {
                aspect-ratio: 1 / 0.7;
            }
        }

        // Magazine-style minimal action buttons
        .wcps-product-actions {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;
            gap: 4px;
            padding: 12px;
            opacity: 0;
            // visibility: hidden;
            transform: translateY(10px);
            transition: all 0.3s ease;
            z-index: 10;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);

            a {
                position: relative;
                width: 36px;
                height: 36px;
                border-radius: 0;
                background: rgba(255, 255, 255, 0.9);
                border: none;
                box-shadow: none;
                display: flex;
                align-items: center;
                justify-content: center;
                text-decoration: none;
                color: #000;
                font-size: 12px;
                transition: all 0.2s ease;
                overflow: hidden;

                .wcps-btn-icon {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    z-index: 2;

                    i {
                        font-size: 12px;
                        transition: all 0.2s ease;
                    }
                }

                // Minimal tooltip
                .wcps-btn-cta {
                    position: absolute;
                    bottom: calc(100% + 8px);
                    left: 50%;
                    transform: translateX(-50%) translateY(4px);
                    background: #000;
                    color: #fff;
                    padding: 6px 10px;
                    border-radius: 0;
                    font-size: 10px;
                    font-weight: 400;
                    white-space: nowrap;
                    opacity: 0;
                    visibility: hidden;
                    transition: all 0.2s ease;
                    box-shadow: none;
                    z-index: 100;
                    text-transform: uppercase;
                    letter-spacing: 0.5px;

                    &::after {
                        content: '';
                        position: absolute;
                        top: 100%;
                        left: 50%;
                        transform: translateX(-50%);
                        width: 0;
                        height: 0;
                        border: 4px solid transparent;
                        border-top: 4px solid #000;
                    }
                }

                &:hover {
                    background: #000;
                    color: #fff;

                    .wcps-btn-icon i {
                        color: #fff;
                    }

                    .wcps-btn-cta {
                        opacity: 1;
                        visibility: visible;
                        transform: translateX(-50%) translateY(0);
                    }
                }

                // Specific button styles
                &.wcps-add-to-cart {
                    background: #000;
                    color: #fff;

                    &:hover {
                        background: #333;
                        color: #fff;
                    }
                }

                &.wcps-wishlist {
                    &:hover {
                        background: #000;
                        color: #fff;
                    }
                }

                &.wcps-quickview {
                    &:hover {
                        background: #000;
                        color: #fff;
                    }
                }

                &.wcps-compare {
                    &:hover {
                        background: #000;
                        color: #fff;
                    }
                }
            }

            // No staggered animation for minimal style
        }

        // Magazine-style product content
        /* ================ IMPROVED MAGAZINE-STYLE PRODUCT CONTENT ================ */
        .wcps-product-content {
            padding: 18px 0 0;
            background: transparent;
            position: relative;
            z-index: 2;
            padding: 15px;

            /* ---- TYPOGRAPHY ENHANCEMENTS ---- */
            .wcps-product-title {
                margin: 0 0 10px;
                font-size: 16px;
                font-weight: 500;
                color: #1a1a1a;
                line-height: 1.35;
                letter-spacing: 0.2px;
                font-family: 'Georgia', serif;
                /* Magazine-style serif font */

                a {
                    color: var(--wcps-product-title, #333);
                    font-size: var(--wcps-title-size, 16px);
                    font-weight: var(--wcps-title-weight, 600);
                    text-decoration: none;
                    transition: color 0.25s ease;
                    position: relative;
                    display: inline-block;

                    &:after {
                        content: '';
                        position: absolute;
                        bottom: -2px;
                        left: 0;
                        width: 0;
                        height: 1px;
                        background: #1a1a1a;
                        transition: width 0.3s ease;
                    }

                    &:hover {
                        color: #444;

                        &:after {
                            width: 100%;
                        }
                    }
                }
            }

            /* ---- REFINED PRICE STYLING ---- */
            .wcps-product-price {
                font-weight: 400;
                font-size: 15px;
                color: #222;
                margin-bottom: 8px;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 8px;
                font-family: 'Helvetica Neue', sans-serif;

                ins {
                    text-decoration: none;
                    color: #1a1a1a;
                    font-weight: 500;
                    font-size: 16px;
                }

                del {
                    font-size: 13px;
                    color: #999;
                    font-weight: 300;
                    order: -1;
                    width: 100%;
                }
            }

            /* ---- MINIMAL RATING STYLE ---- */
            .wcps-product-rating {
                margin-bottom: 12px;

                .star-rating {
                    font-size: 11px;
                    width: 5.4em;

                    &:before {
                        color: #d3d3d3;
                    }

                    span:before {
                        color: #1a1a1a;
                        letter-spacing: 1px;
                    }
                }
            }

            /* ---- ELEGANT DESCRIPTION ---- */
            .wcps-product-description {
                font-size: 13px;
                color: #555;
                line-height: 1.6;
                margin: 8px 0 15px;
                font-weight: 300;
                letter-spacing: 0.1px;
                position: relative;
                padding-top: 12px;

                &:before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 30px;
                    height: 1px;
                    background: #eaeaea;
                }

                p.wcps-product-description-content {
                    font-size: inherit;
                    color: inherit;
                    font-weight: inherit;
                    margin: 0;
                }
            }

            /* ---- REFINED QUICK ADD ---- */
            .wcps-quick-add {
                margin-top: 15px;
                display: flex;
                gap: 8px;

                .quantity {
                    flex: 1;
                    max-width: 80px;

                    input {
                        width: 100%;
                        padding: 9px 10px;
                        border: 1px solid #e0e0e0;
                        border-radius: 0;
                        font-size: 13px;
                        background: #fafafa;
                        appearance: none;
                        text-align: center;
                        transition: border-color 0.3s;

                        &:focus {
                            border-color: #bbb;
                            outline: none;
                            background: #fff;
                        }
                    }
                }

                .wcps-add-to-cart {
                    flex: 1;

                    a {
                        display: block;
                        padding: 9px 15px;
                        background: #f5f5f5;
                        color: #1a1a1a;
                        text-align: center;
                        border-radius: 0;
                        text-decoration: none;
                        font-size: 12px;
                        font-weight: 400;
                        transition: all 0.25s ease;
                        text-transform: uppercase;
                        letter-spacing: 1px;
                        border: 1px solid #e0e0e0;

                        &:hover {
                            background: #1a1a1a;
                            color: #fff;
                            border-color: #1a1a1a;
                        }
                    }
                }
            }

            /* ---- ENHANCED TAGS ---- */
            .wcps-product-tags {
                display: flex;
                flex-wrap: wrap;
                gap: 6px;
                margin-top: 15px;

                .wcps-tag {
                    font-size: 9px;
                    padding: 3px 8px;
                    background: transparent;
                    border-radius: 0;
                    color: #999;
                    border: 1px solid #eee;
                    text-transform: uppercase;
                    letter-spacing: 1px;
                    transition: all 0.2s ease;

                    &:hover {
                        color: #1a1a1a;
                        border-color: #d0d0d0;
                    }
                }
            }
        }




    }
}

/* -------------- Masonry Grid style 3 END -------------- */



/* -------------- Gallery Layout dynamic: basic done -------------- */

/* -------------- Gallery Layout-------------- */

// Gallery Layout or Showcase Gallery
.wcps-container {
    background: var(--wcps-container-background, #ffffff3b);
    padding: var(--wcps-container-padding, 25px);
    margin: var(--wcps-container-margin, 0px);

    &.wcps-layout-gallery {
        margin: 30px 0;
        position: relative;
        background-color: var(--wcps-background);
        border-radius: var(--wcps-border-radius);
        padding: var(--wcps-product-content-padding);

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

        // Apply box-shadow based on condition
        @if var(--wcps-box-shadow)=="light" {
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }

        @else if var(--wcps-box-shadow)=="medium" {
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        @else if var(--wcps-box-shadow)=="heavy" {
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
        }

        // Apply border style based on condition
        @if var(--wcps-border-style) !="none" {
            border: var(--wcps-border-width) var(--wcps-border-style) var(--wcps-border-color);
        }

        .wcps-gallery {
            margin-bottom: 30px;

            &-filter {
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
                justify-content: center;
                margin-bottom: 20px;

                button {
                    padding: 8px 16px;
                    background-color: #f5f5f5;
                    color: #333333;
                    border: none;
                    border-radius: 4px;
                    cursor: pointer;
                    font-size: 14px;
                    transition: var(--wcps-hover-transition);

                    &:hover {
                        background-color: #d4d1d1;
                    }

                    &.active {
                        background-color: var(--wcps-product-title);
                        color: white;
                    }
                }
            }

            &-container {
                margin-top: 20px;
                display: flex;
                flex-wrap: wrap;
                margin-left: -10px;
                margin-right: -10px;

                &:after {
                    content: "";
                    display: table;
                    clear: both;
                }
            }

            &-item {
                padding: 10px;
                width: 100%;
                float: left;
                box-sizing: border-box;

                @media (min-width: $breakpoint-sm) {
                    width: 50%;
                }

                @media (min-width: $breakpoint-md) {
                    width: calc(100% / 3);
                }

                @media (min-width: $breakpoint-xl) {
                    width: 25%;
                }

                // Dynamic columns for different screen sizes
                .wcps-columns-2 & {
                    @media (min-width: $breakpoint-sm) {
                        width: 50%;
                    }
                }

                .wcps-columns-3 & {
                    @media (min-width: $breakpoint-md) {
                        width: calc(100% / 3);
                    }
                }

                .wcps-columns-4 & {
                    @media (min-width: $breakpoint-lg) {
                        width: 25%;
                    }
                }
            }
        }

        .wcps-product {
            height: var(--wcps-product-width, 100%);
            position: relative;
            background: white;
            border: 1px solid var(--wcps-border-color);
            border-radius: 8px;
            overflow: hidden;
            transition: var(--wcps-hover-transition);
            display: flex;
            // flex-direction: var(--wcps-product-flex-direction, column); // Need to create column, column-reverse, row, row-reverse
            flex-direction: column;
            background: var(--wcps-product-background, #fff);

            // Apply hover effect based on condition
            @if var(--wcps-hover-effect)=="shadow" {
                &:hover {
                    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
                }
            }

            @else if var(--wcps-hover-effect)=="lift" {
                &:hover {
                    transform: translateY(-3px);
                }
            }

            @else if var(--wcps-hover-effect)=="zoom" {
                &:hover {
                    transform: scale(1.02);
                }
            }

            @else if var(--wcps-hover-effect)=="glow" {
                &:hover {
                    box-shadow: 0 0 15px rgba(var(--wcps-product-title), 0.3);
                }
            }

            &:hover {
                .wcps-actions-hover {
                    opacity: 1;
                    visibility: visible;
                }

                // Apply image hover effect
                @if var(--wcps-image-hover-effect)=="zoom" {
                    .wcps-product-image img {
                        transform: scale(1.05);
                    }
                }

                @else if var(--wcps-image-hover-effect)=="fade" {
                    .wcps-product-image img {
                        opacity: 0.8;
                    }
                }

                @else if var(--wcps-image-hover-effect)=="blur" {
                    .wcps-product-image img {
                        filter: blur(2px);
                    }
                }
            }

            &-image {
                position: relative;
                overflow: hidden;
                z-index: 5;
                width: var(--wcps-product-image-width, 100%);
                height: var(--wcps-product-image-height, 100%);

                // Apply image aspect ratio
                @if var(--wcps-image-aspect-ratio) !="auto" {
                    aspect-ratio: var(--wcps-image-aspect-ratio, 1/1);
                }

                border-radius: var(--wcps-image-border-radius);

                img {
                    width: 100%;
                    height: auto;
                    display: block;
                    transition: transform 0.4s ease;

                    @if var(--wcps-image-aspect-ratio) !="auto" {
                        object-fit: cover;
                        height: 100%;
                    }
                }
            }

            &-content {
                padding: 15px;
                display: flex;
                flex-direction: column;
                flex-grow: 1;
                text-align: var(--wcps-text-align);
            }

            &-title {
                margin: 0 0 10px;
                font-size: var(--wcps-title-size);
                font-weight: var(--wcps-title-weight);
                line-height: 1.4;

                a {
                    color: var(--wcps-product-title);
                    text-decoration: none;

                    &:hover {
                        color: var(--wcps-product-title);
                    }
                }
            }

            &-price {
                font-weight: var(--wcps-price-font-weight);
                font-size: var(--wcps-price-font-size);
                color: var(--wcps-price-font-color);
                margin-bottom: 10px;

                del {
                    color: var(--wcps-price-delete-font-color);
                    margin-right: 5px;
                    font-weight: normal;
                }

                ins {
                    text-decoration: none;
                    color: var(--wcps-price-font-color);
                }
            }

            &-rating {
                margin-bottom: 10px;

                .star-rating {
                    position: relative;
                    height: 1em;
                    width: 5.4em;
                    font-family: 'star';
                    font-size: 14px;
                    overflow: hidden;

                    &:before {
                        content: "★★★★★";
                        color: var(--wcps-star-color, #ffc107);
                        font-size: var(--wcps-star-size, 10px);
                        float: left;
                        top: 0;
                        left: 0;
                        position: absolute;
                    }

                    span {
                        color: var(--wcps-star-color, #ffc107);
                        font-size: var(--wcps-star-size, 10px);
                        overflow: hidden;
                        float: left;
                        top: 0;
                        left: 0;
                        position: absolute;
                        padding-top: 1.5em;

                        &:before {
                            content: "★★★★★";
                            color: var(--wcps-star-color, #ffc107);
                            font-size: var(--wcps-star-size, 10px);
                            top: 0;
                            position: absolute;
                            left: 0;
                        }
                    }
                }
            }

            &-description {
                margin-top: auto;
                color: var(--wcps-description-color);
                font-size: var(--wcps-desc-size);
                line-height: 1.5;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }

            // Action style 
            .wcps-product-actions {
                position: absolute;
                right: 10px;
                bottom: 10px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                gap: 8px;
                padding: 0;
                opacity: 0;
                visibility: hidden;
                transform: translateY(20px) scale(0.8);
                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

                a {
                    position: relative;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    width: 44px;
                    height: 44px;
                    border-radius: 50%;
                    background: rgba(255, 255, 255, 0.95);
                    backdrop-filter: blur(10px);
                    border: 1px solid rgba(255, 255, 255, 0.2);
                    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
                    color: #333;
                    font-size: 16px;
                    text-decoration: none;
                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                    overflow: visible;

                    // Icon styling
                    .wcps-btn-icon {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        z-index: 2;
                        transition: transform 0.3s ease;

                        i {
                            font-size: 16px;
                            transition: all 0.3s ease;
                        }
                    }

                    // Modern CTA tooltip
                    .wcps-btn-cta {
                        position: absolute;
                        right: calc(100% + 12px);
                        top: 50%;
                        transform: translateY(-50%) translateX(10px);
                        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                        color: #fff;
                        padding: 8px 12px;
                        border-radius: 8px;
                        font-size: 12px;
                        font-weight: 500;
                        white-space: nowrap;
                        opacity: 0;
                        visibility: hidden;
                        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
                        z-index: 100;

                        // Modern arrow with gradient
                        &::before {
                            content: '';
                            position: absolute;
                            left: 100%;
                            top: 50%;
                            transform: translateY(-50%);
                            width: 0;
                            height: 0;
                            border: 6px solid transparent;
                            border-left: 6px solid #667eea;
                            filter: drop-shadow(2px 0 2px rgba(102, 126, 234, 0.3));
                        }

                        // Subtle animation
                        &::after {
                            content: '';
                            position: absolute;
                            inset: 0;
                            border-radius: inherit;
                            background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
                            opacity: 0;
                            transition: opacity 0.3s ease;
                        }
                    }

                    &:hover {
                        transform: translateY(-2px) scale(1.05);
                        background: #fff;
                        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
                        border-color: rgba(102, 126, 234, 0.3);

                        .wcps-btn-icon {
                            transform: scale(1.1);

                            i {
                                color: #667eea;
                            }
                        }

                        .wcps-btn-cta {
                            opacity: 1;
                            visibility: visible;
                            transform: translateY(-50%) translateX(0);

                            &::after {
                                opacity: 1;
                            }
                        }
                    }

                    // Specific button styles
                    &.wcps-add-to-cart {
                        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                        color: #fff;
                        border-color: transparent;

                        &:hover {
                            background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
                            color: #fff;

                            .wcps-btn-icon i {
                                color: #fff;
                            }
                        }

                        .wcps-btn-cta {
                            background: linear-gradient(135deg, #4c51bf 0%, #553c9a 100%);

                            &::before {
                                border-left-color: #4c51bf;
                            }
                        }
                    }

                    &.wcps-wishlist {
                        .wcps-btn-cta {
                            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
                            box-shadow: 0 4px 15px rgba(240, 147, 251, 0.4);

                            &::before {
                                border-left-color: #f093fb;
                            }
                        }

                        &:hover .wcps-btn-icon i {
                            color: #f093fb;
                        }
                    }

                    &.wcps-quickview {
                        .wcps-btn-cta {
                            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
                            box-shadow: 0 4px 15px rgba(79, 172, 254, 0.4);

                            &::before {
                                border-left-color: #4facfe;
                            }
                        }

                        &:hover .wcps-btn-icon i {
                            color: #4facfe;
                        }
                    }

                    &.wcps-compare {
                        .wcps-btn-cta {
                            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
                            box-shadow: 0 4px 15px rgba(67, 233, 123, 0.4);

                            &::before {
                                border-left-color: #43e97b;
                            }
                        }

                        &:hover .wcps-btn-icon i {
                            color: #43e97b;
                        }
                    }
                }

                // Staggered animation for multiple buttons
                a:nth-child(1) {
                    transition-delay: 0.1s;
                }

                a:nth-child(2) {
                    transition-delay: 0.15s;
                }

                a:nth-child(3) {
                    transition-delay: 0.2s;
                }

                a:nth-child(4) {
                    transition-delay: 0.25s;
                }
            }


            // Show actions on hover
            .wcps-product-image:hover {
                .wcps-product-actions {
                    opacity: 1;
                    visibility: visible;
                    transform: translateY(0) scale(1);
                }
            }

            // Enhanced pulse animation
            @keyframes modernPulse {
                0% {
                    transform: scale(1);
                    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
                }

                50% {
                    transform: scale(1.05);
                    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.3);
                }

                100% {
                    transform: scale(1);
                    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
                }
            }


        }
    }

    /* Product Gallery Thumbnails */
    .wcps-product-gallery {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px;
        padding: 10px;
        background-color: #f9f9f9;
    }

    .wcps-gallery-image {
        width: 60px;
        height: 60px;
        border: 2px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        cursor: pointer;
        transition: var(--wcps-hover-transition);
    }

    .wcps-gallery-image.active {
        border-color: var(--wcps-product-title);
    }

    .wcps-gallery-image:hover {
        opacity: 0.8;
    }

    .wcps-gallery-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


    // Media query adjustments for filter buttons
    @media (max-width: $breakpoint-sm) {
        .wcps-container.wcps-layout-gallery .wcps-gallery-filter {
            flex-direction: column;
            width: 100%;

            button {
                width: 100%;
            }
        }
    }

    // Quick view display modes
    @if var(--quickview-display-mode)=="icon" {
        .wcps-quickview .wcps-text {
            display: none;
        }
    }

    @else if var(--quickview-display-mode)=="text" {
        .wcps-quickview .wcps-icon {
            display: none;
        }
    }

    // Wishlist display modes
    @if var(--wishlist-displaymode)=="icon" {
        .wcps-wishlist .wcps-text {
            display: none;
        }
    }

    @else if var(--wishlist-displaymode)=="text" {
        .wcps-wishlist .wcps-icon {
            display: none;
        }
    }

    // Compare display modes
    @if var(--compare-display-mode)=="icon" {
        .wcps-compare .wcps-text {
            display: none;
        }
    }

    @else if var(--compare-display-mode)=="text" {
        .wcps-compare .wcps-icon {
            display: none;
        }
    }

    // Add to cart display modes
    @if var(--addtocart-display-mode)=="icon" {
        .wcps-add-to-cart .wcps-text {
            display: none;
        }
    }

    @else if var(--addtocart-display-mode)=="text" {
        .wcps-add-to-cart .wcps-icon {
            display: none;
        }
    }


    // Add pulse animation for button animation
    @keyframes pulse {
        0% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.05);
        }

        100% {
            transform: scale(1);
        }
    }

    // Responsive design for action buttons on small screens
    @media (max-width: $breakpoint-sm) {

        .wcps-quickview,
        .wcps-wishlist,
        .wcps-compare {
            .wcps-text {
                display: none;
            }

            .wcps-icon:before {
                margin-right: 0;
            }
        }
    }
}


/* -------------- END -------------- */

/* Slick Slider - Slider  wcps-layout-slider */
// Sleek Carousel
.wcps-container {
    background: var(--wcps-container-background, #ffffff3b);
    padding: var(--wcps-container-padding, 25px);
    margin: var(--wcps-container-margin, 0px);

    // Sleek Carousel
    &.wcps-layout-slider {
        margin: var(--wcps-container-margin, 30px 0);
        position: relative;
        width: var(--wcps-grid-width, 100%);
        max-width: 100%;

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

        .wcps-slider-container {
            width: 100%;
            position: relative;
            background: var(--wcps-container-background, #ffffff3b);
            padding: var(--wcps-container-padding, 25px);
            margin: var(--wcps-container-margin, 0px);

            // Slick slider arrows
            .slick-arrow {
                background: var(--wcps-container-background, #fff);
                border: var(--wcps-border-width, 1px) var(--wcps-border-style, solid) var(--wcps-border-color, #eeeeee);
                border-radius: 50%;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                color: var(--wcps-price-delete-font-color, #333333);
                cursor: pointer;
                font-size: 0;
                height: 44px;
                line-height: 44px;
                margin-top: -22px;
                opacity: 0.9;
                padding: 0;
                position: absolute;
                text-align: center;
                top: 35%;
                width: 44px;
                z-index: 10;
                transition: all var(--wcps-hover-transition, 0.3s) ease;

                &:hover {
                    opacity: 1;
                    background-color: var(--wcps-button-bg-color, #0170B9);
                    color: var(--wcps-button-text-color, #ffffff);
                    transform: scale(1.05);
                }

                &:focus {
                    outline: none;
                }

                &.slick-prev {
                    left: -22px;

                    &:before {
                        content: "←";
                        font-size: 20px;
                        font-weight: bold;
                    }
                }

                &.slick-next {
                    right: -22px;

                    &:before {
                        content: "→";
                        font-size: 20px;
                        font-weight: bold;
                    }
                }
            }

            // Slick dots
            .slick-dots {
                bottom: -35px;
                display: flex !important;
                justify-content: center;
                list-style: none;
                margin: 0;
                padding: 0;
                position: absolute;
                width: 100%;

                li {
                    margin: 0 4px;

                    button {
                        background: var(--wcps-border-color, #eeeeee);
                        border: none;
                        border-radius: 50%;
                        cursor: pointer;
                        display: block;
                        font-size: 0;
                        height: 12px;
                        padding: 0;
                        width: 12px;
                        transition: all var(--wcps-hover-transition, 0.3s) ease;

                        &:hover {
                            background: var(--wcps-button-bg-color, #0170B9);
                            transform: scale(1.2);
                        }
                    }

                    &.slick-active button {
                        background: var(--wcps-button-bg-color, #0170B9);
                        transform: scale(1.3);
                    }
                }
            }

            // Equal height slides
            .slick-track {
                display: flex;
                align-items: stretch;

                .slick-slide {
                    height: auto;
                    display: flex;
                    align-items: stretch;

                    >div {
                        height: 100%;
                        width: 100%;
                        display: flex;
                    }
                }
            }

            // Remove default slick styles that cause width issues
            .slick-list {
                overflow: hidden;
                margin: 0 -#{var(--wcps-grid-gap, 20px) / 2};
            }
        }

        .wcps-slider-item {
            padding: 0 calc(var(--wcps-grid-gap, 20px) / 2);
            height: 100%;
            display: flex;
            min-height: 300px; // Prevent extreme height variations
            max-height: 500px; // Set reasonable maximum
        }

        .wcps-product {
            transition: all var(--wcps-hover-transition, 0.3s) ease;
            height: 100%;
            width: var(--wcps-product-width, 100%);
            display: flex;
            // flex-direction: var(--wcps-product-flex-direction, column);
            flex-direction: column;
            border: var(--wcps-border-width, 0px) var(--wcps-border-style, solid) var(--wcps-border-color, #eeeeee);
            border-radius: calc(var(--wcps-border-radius, 8) * 1px);
            overflow: hidden;
            background: var(--wcps-product-background, #fff);
            position: relative;

            // Dynamic box shadow based on variable
            &.wcps-shadow-none {
                box-shadow: none;
            }

            &.wcps-shadow-light,
            &:not([class*="wcps-shadow-"]) {
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            }

            &.wcps-shadow-medium {
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            }

            &.wcps-shadow-heavy {
                box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
            }

            // Product image section
            .wcps-product-image {
                position: relative;
                overflow: hidden;
                border-radius: calc(var(--wcps-image-border-radius, 0) * 1px);
                width: var(--wcps-product-image-width, 100%);
                height: var(--wcps-product-image-height, auto);
                flex-shrink: 0;

                // Fixed here and remvoed the aspect-ratio for slider 
                img {
                    transition: transform var(--wcps-hover-transition, 0.3s) ease;
                    width: 100%;
                    height: 200px; // Fixed height to prevent extreme variations
                    object-fit: cover;
                    border-radius: calc(var(--wcps-image-border-radius, 0) * 1px);
                }

                // Product badges
                .wcps-product-badge {
                    position: var(--wcps-product-badge-position, absolute);
                    top: var(--wcps-product-badge-top, 8px);
                    right: var(--wcps-product-badge-right, 8px);
                    left: var(--wcps-product-badge-left, auto);
                    z-index: var(--wcps-product-badge-z-index, 2);
                    background: var(--wcps-product-badge-background, rgb(54, 182, 217));
                    color: var(--wcps-product-badge-font-color, #ffffff);
                    padding: var(--wcps-product-badge-padding, 4px 8px);
                    border-radius: var(--wcps-product-badge-border-radius, 4px);
                    font-size: var(--wcps-product-badge-font-size, 12px);
                    font-weight: var(--wcps-product-badge-font-weight, 600);
                    text-transform: var(--wcps-product-badge-text-transform, capitalize);
                    text-align: var(--wcps-product-badge-text-align, center);
                    margin: var(--wcps-product-badge-margin, 0px);
                }

                // Image hover effects
                &:hover img {
                    @if var(--wcps-image-hover-effect)=="zoom" {
                        transform: scale(1.05);
                    }

                    @else if var(--wcps-image-hover-effect)=="fade" {
                        opacity: 0.8;
                    }

                    @else if var(--wcps-image-hover-effect)=="blur" {
                        filter: blur(2px);
                    }

                    @else {
                        transform: scale(1.05); // Default zoom effect
                    }
                }
            }

            // Product content section
            .wcps-product-content {
                padding: var(--wcps-product-content-padding, 15px);
                margin: var(--wcps-product-content-margin, 0px);
                display: flex;
                flex-direction: var(--wcps-product-content-direction, column);
                text-align: var(--wcps-text-align, left);
                background: var(--wcps-product-background, #ffffff);
                justify-content: space-between;

                .wcps-product-title {
                    margin: 0 0 8px;
                    font-size: calc(var(--wcps-title-size, 16) * 1px);
                    font-weight: var(--wcps-title-weight, 600);
                    line-height: 1.3;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;

                    a {
                        color: var(--wcps-product-title, #0170B9);
                        font-size: var(--wcps-title-size, 16px);
                        font-weight: var(--wcps-title-weight, 600);
                        text-decoration: none;
                        transition: color var(--wcps-hover-transition, 0.3s) ease;

                        &:hover {
                            color: var(--wcps-product-title-hover-color, #0170B9);
                        }
                    }
                }

                .wcps-product-price {
                    font-weight: var(--wcps-price-font-weight, 700);
                    font-size: calc(var(--wcps-price-font-size, 18) * 1px);
                    color: var(--wcps-price-font-color, #0170B9);
                    margin-bottom: 8px;

                    del {
                        opacity: 0.6;
                        margin-right: 8px;
                        color: var(--wcps-price-delete-font-color, #333333);
                        font-weight: 400;
                    }

                    ins {
                        text-decoration: none;
                        color: var(--wcps-price-font-color, #0170B9);
                    }
                }

                .wcps-product-rating {
                    margin-bottom: 8px;

                    .star-rating {
                        color: var(--wcps-star-color, #ffc107);
                        font-size: var(--wcps-star-size, 14px);
                    }
                }

                .wcps-product-description {
                    font-size: calc(var(--wcps-desc-size, 14) * 1px);
                    color: var(--wcps-description-color, #23282d);
                    line-height: 1.4;
                    margin: 8px 0;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    flex-grow: 1;
                }
            }

            // Product actions
            .wcps-product-actions {
                position: absolute;
                right: 10px;
                bottom: 10px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                gap: 8px;
                padding: 0;
                opacity: 0;
                visibility: hidden;
                transform: translateY(20px) scale(0.8);
                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

                a {
                    position: relative;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    width: 44px;
                    height: 44px;
                    border-radius: 50%;
                    background: rgba(255, 255, 255, 0.95);
                    backdrop-filter: blur(10px);
                    border: 1px solid rgba(255, 255, 255, 0.2);
                    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
                    color: #333;
                    font-size: 16px;
                    text-decoration: none;
                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                    overflow: visible;

                    // Icon styling
                    .wcps-btn-icon {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        z-index: 2;
                        transition: transform 0.3s ease;

                        i {
                            font-size: 16px;
                            transition: all 0.3s ease;
                        }
                    }

                    // Modern CTA tooltip
                    .wcps-btn-cta {
                        position: absolute;
                        right: calc(100% + 12px);
                        top: 50%;
                        transform: translateY(-50%) translateX(10px);
                        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                        color: #fff;
                        padding: 8px 12px;
                        border-radius: 8px;
                        font-size: 12px;
                        font-weight: 500;
                        white-space: nowrap;
                        opacity: 0;
                        visibility: hidden;
                        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
                        z-index: 100;

                        // Modern arrow with gradient
                        &::before {
                            content: '';
                            position: absolute;
                            left: 100%;
                            top: 50%;
                            transform: translateY(-50%);
                            width: 0;
                            height: 0;
                            border: 6px solid transparent;
                            border-left: 6px solid #667eea;
                            filter: drop-shadow(2px 0 2px rgba(102, 126, 234, 0.3));
                        }

                        // Subtle animation
                        &::after {
                            content: '';
                            position: absolute;
                            inset: 0;
                            border-radius: inherit;
                            background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
                            opacity: 0;
                            transition: opacity 0.3s ease;
                        }
                    }

                    &:hover {
                        transform: translateY(-2px) scale(1.05);
                        background: #fff;
                        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
                        border-color: rgba(102, 126, 234, 0.3);

                        .wcps-btn-icon {
                            transform: scale(1.1);

                            i {
                                color: #667eea;
                            }
                        }

                        .wcps-btn-cta {
                            opacity: 1;
                            visibility: visible;
                            transform: translateY(-50%) translateX(0);

                            &::after {
                                opacity: 1;
                            }
                        }
                    }

                    // Specific button styles
                    &.wcps-add-to-cart {
                        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                        color: #fff;
                        border-color: transparent;

                        &:hover {
                            background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
                            color: #fff;

                            .wcps-btn-icon i {
                                color: #fff;
                            }
                        }

                        .wcps-btn-cta {
                            background: linear-gradient(135deg, #4c51bf 0%, #553c9a 100%);

                            &::before {
                                border-left-color: #4c51bf;
                            }
                        }
                    }

                    &.wcps-wishlist {
                        .wcps-btn-cta {
                            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
                            box-shadow: 0 4px 15px rgba(240, 147, 251, 0.4);

                            &::before {
                                border-left-color: #f093fb;
                            }
                        }

                        &:hover .wcps-btn-icon i {
                            color: #f093fb;
                        }
                    }

                    &.wcps-quickview {
                        .wcps-btn-cta {
                            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
                            box-shadow: 0 4px 15px rgba(79, 172, 254, 0.4);

                            &::before {
                                border-left-color: #4facfe;
                            }
                        }

                        &:hover .wcps-btn-icon i {
                            color: #4facfe;
                        }
                    }

                    &.wcps-compare {
                        .wcps-btn-cta {
                            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
                            box-shadow: 0 4px 15px rgba(67, 233, 123, 0.4);

                            &::before {
                                border-left-color: #43e97b;
                            }
                        }

                        &:hover .wcps-btn-icon i {
                            color: #43e97b;
                        }
                    }
                }

                // Staggered animation for multiple buttons
                a:nth-child(1) {
                    transition-delay: 0.1s;
                }

                a:nth-child(2) {
                    transition-delay: 0.15s;
                }

                a:nth-child(3) {
                    transition-delay: 0.2s;
                }

                a:nth-child(4) {
                    transition-delay: 0.25s;
                }
            }


            // Show actions on hover
            .wcps-product-image:hover {
                .wcps-product-actions {
                    opacity: 1;
                    visibility: visible;
                    transform: translateY(0) scale(1);
                }
            }

            // Hover effects for product
            &:hover {
                @if var(--wcps-hover-effect)=="lift" {
                    transform: translateY(-3px);
                    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
                }

                @else if var(--wcps-hover-effect)=="shadow" {
                    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
                }

                @else if var(--wcps-hover-effect)=="zoom" {
                    transform: scale(1.02);
                }

                @else if var(--wcps-hover-effect)=="glow" {
                    box-shadow: 0 0 20px rgba(1, 112, 185, 0.3);
                }

                @else {
                    transform: translateY(-2px);
                    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
                }

                .wcps-product-actions {
                    &.wcps-actions-hover {
                        opacity: 1;
                        transform: translateY(0);
                    }

                    &.wcps-actions-panel {
                        transform: translateX(0);
                    }
                }
            }
        }

        // Responsive design
        @media (max-width: $breakpoint-xl) {
            .wcps-slider-item {
                min-height: 280px;
            }
        }

        @media (max-width: $breakpoint-lg) {
            .wcps-slider-item {
                min-height: 260px;
            }

            .wcps-slider-container .slick-arrow {
                height: 38px;
                width: 38px;
                margin-top: -19px;

                &.slick-prev {
                    left: -19px;
                }

                &.slick-next {
                    right: -19px;
                }
            }
        }

        @media (max-width: $breakpoint-md) {
            .wcps-slider-item {
                min-height: 240px;
            }

            .wcps-slider-container .slick-arrow {
                height: 34px;
                width: 34px;
                margin-top: -17px;

                &.slick-prev {
                    left: -17px;
                }

                &.slick-next {
                    right: -17px;
                }

                &:before {
                    font-size: 16px !important;
                }
            }

            .wcps-product {
                .wcps-product-image img {
                    height: 180px;
                }

                .wcps-product-content {
                    padding: 12px;

                    .wcps-product-title {
                        font-size: 14px;
                    }

                    .wcps-product-price {
                        font-size: 16px;
                    }
                }

                .wcps-product-actions {
                    padding: 8px;

                    a {
                        padding: 6px 10px;
                        font-size: 13px;

                        .wcps-text {
                            display: none;
                        }

                        .wcps-icon {
                            margin: 0;
                        }
                    }
                }
            }
        }

        @media (max-width: $breakpoint-sm) {
            margin: 20px 0;

            .wcps-slider-item {
                min-height: 220px;
            }

            .wcps-slider-container {
                .slick-arrow {
                    height: 32px;
                    width: 32px;
                    margin-top: -16px;

                    &.slick-prev {
                        left: -16px;
                    }

                    &.slick-next {
                        right: -16px;
                    }

                    &:before {
                        font-size: 14px !important;
                    }
                }

                .slick-dots {
                    bottom: -30px;

                    li button {
                        height: 10px;
                        width: 10px;
                    }
                }
            }

            .wcps-product {
                .wcps-product-image img {
                    height: 160px;
                }

                .wcps-product-content {
                    padding: 10px;

                    .wcps-product-title {
                        font-size: 13px;
                    }

                    .wcps-product-price {
                        font-size: 15px;
                    }

                    .wcps-product-description {
                        font-size: 12px;
                        -webkit-line-clamp: 1;
                    }
                }
            }
        }

        @media (max-width: $breakpoint-xs) {
            .wcps-slider-item {
                min-height: 200px;
            }

            .wcps-slider-container .slick-arrow {
                height: 28px;
                width: 28px;
                margin-top: -14px;

                &.slick-prev {
                    left: -10px;
                }

                &.slick-next {
                    right: -10px;
                }
            }

            .wcps-product {
                .wcps-product-image img {
                    height: 140px;
                }

                .wcps-product-content {
                    padding: 8px;

                    .wcps-product-title {
                        font-size: 12px;
                        margin-bottom: 4px;
                    }

                    .wcps-product-price {
                        font-size: 14px;
                        margin-bottom: 4px;
                    }
                }

                .wcps-product-actions {
                    padding: 6px;

                    a {
                        padding: 4px 6px;
                        font-size: 12px;
                        min-width: 32px;
                    }
                }
            }
        }
    }

    // Keyframe animations
    @keyframes pulse {

        0%,
        100% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.05);
        }
    }
}

/* -------------- END -------------- */

/* -------------- WCPS layout TABLE wcps-layout-table -------------- */
// Feature Matrix  
.wcps-container {
    background: var(--wcps-container-background, #ffffff3b);
    padding: var(--wcps-container-padding, 25px);
    margin: var(--wcps-container-margin, 0px);

    // Feature Matrix  
    &.wcps-layout-table {
        margin: 30px 0;
        position: relative;

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



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

            // Dynamic box shadow based on selection
            @if var(--wcps-box-shadow)=="none" {
                box-shadow: none;
            }

            @else if var(--wcps-box-shadow)=="light" {
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
            }

            @else if var(--wcps-box-shadow)=="medium" {
                box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
            }

            @else if var(--wcps-box-shadow)=="heavy" {
                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            }

            @else {
                box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); // Default
            }

            // Dynamic border style
            @if var(--wcps-border-style) !="none" {
                border: var(--wcps-border-width) var(--wcps-border-style) var(--wcps-border-color);
            }

            overflow-x: auto; // Enable horizontal scrolling

            .wcps-table-controls {
                margin-bottom: 15px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-wrap: wrap;
                gap: 10px;

                .dataTables_filter {
                    input {
                        padding: 10px 12px;
                        border: 1px solid #ddd;
                        border-radius: var(--wcps-border-radius);
                        outline: none;
                        width: 100%;
                        max-width: 250px;

                        &:focus {
                            border-color: var(--wcps-product-title);
                            box-shadow: 0 0 0 2px rgba(var(--wcps-product-title), 0.1);
                        }
                    }
                }

                .dataTables_length {
                    select {
                        padding: 10px 12px;
                        border: 1px solid #ddd;
                        border-radius: var(--wcps-border-radius);
                        margin: 0 5px;
                        cursor: pointer;
                    }
                }
            }

            .wcps-table {
                width: 100%;
                border-collapse: separate;
                border-spacing: 0;
                min-width: 800px; // Ensures table doesn't compress too much
                text-align: var(--wcps-text-align);

                thead {
                    tr {
                        th {
                            background-color: var(--wcps-product-title);
                            color: white;
                            font-weight: 600;
                            padding: 14px 16px;
                            text-align: left;
                            border-bottom: 2px solid #ebebeb;
                            position: relative;
                            white-space: nowrap;

                            &:first-child {
                                border-top-left-radius: var(--wcps-border-radius);
                            }

                            &:last-child {
                                border-top-right-radius: var(--wcps-border-radius);
                            }

                            &.sorting_asc,
                            &.sorting_desc {
                                &:after {
                                    content: '';
                                    position: absolute;
                                    right: 8px;
                                    top: 50%;
                                    transform: translateY(-50%);
                                    width: 0;
                                    height: 0;
                                    border-left: 5px solid transparent;
                                    border-right: 5px solid transparent;
                                }
                            }

                            &.sorting_asc:after {
                                border-bottom: 5px solid white;
                            }

                            &.sorting_desc:after {
                                border-top: 5px solid white;
                            }
                        }
                    }
                }

                tbody {
                    tr {
                        transition: all var(--wcps-hover-transition);

                        // Dynamic hover effects
                        &:hover {
                            @if var(--wcps-hover-effect)=="none" {
                                // No hover effect
                            }

                            @else if var(--wcps-hover-effect)=="lift" {
                                transform: translateY(-2px);
                                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
                            }

                            @else if var(--wcps-hover-effect)=="shadow" {
                                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
                            }

                            @else if var(--wcps-hover-effect)=="zoom" {
                                transform: scale(1.02);
                            }

                            @else if var(--wcps-hover-effect)=="glow" {
                                box-shadow: 0 0 15px rgba(var(--wcps-product-title), 0.2);
                            }

                            @else {
                                background-color: #ebebeb;
                            }
                        }

                        td {
                            padding: 16px;
                            border-bottom: 1px solid #e0e0e0;
                            vertical-align: middle;

                            &.wcps-product-title-col {
                                min-width: 220px;
                                max-width: 300px;

                                a {
                                    display: block;
                                    color: var(--wcps-price-delete-font-color);
                                    text-decoration: none;
                                    font-weight: var(--wcps-title-weight);
                                    font-size: var(--wcps-title-size);
                                    margin-bottom: 5px;
                                    transition: color 0.2s;

                                    &:hover {
                                        color: var(--wcps-product-title);
                                    }
                                }

                                .wcps-product-excerpt {
                                    font-size: var(--wcps-desc-size);
                                    color: var(--wcps-description-color);
                                    line-height: 1.5;
                                    margin-top: 8px;
                                    display: -webkit-box;
                                    -webkit-line-clamp: 2;
                                    -webkit-box-orient: vertical;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                }
                            }

                            &.wcps-product-image-col {
                                width: 185px;
                                text-align: center;

                                img {
                                    border-radius: var(--wcps-image-border-radius);
                                    transition: transform 0.3s;
                                    max-height: 150px;
                                    width: auto;
                                    max-width: 100%;

                                    // Apply aspect ratio if not auto
                                    @if var(--wcps-image-aspect-ratio) !="auto" {
                                        aspect-ratio: var(--wcps-image-aspect-ratio);
                                        object-fit: cover;
                                        height: 250px;
                                    }

                                    @else {
                                        object-fit: contain; // Contain the image without cropping
                                    }

                                    // Image hover effects
                                    @if var(--wcps-image-hover-effect)=="zoom" {
                                        &:hover {
                                            transform: scale(1.05);
                                        }
                                    }

                                    @else if var(--wcps-image-hover-effect)=="fade" {
                                        &:hover {
                                            opacity: 0.8;
                                        }
                                    }

                                    @else if var(--wcps-image-hover-effect)=="blur" {
                                        &:hover {
                                            filter: blur(1px);
                                        }
                                    }
                                }
                            }

                            &.wcps-product-price-col {
                                white-space: nowrap;

                                .woocommerce-Price-amount {
                                    font-weight: var(--wcps-price-font-weight);
                                    color: var(--wcps-price-font-color);
                                    font-size: var(--wcps-price-font-size);
                                }

                                del {
                                    .woocommerce-Price-amount {
                                        color: var(--wcps-price-delete-font-color);
                                        font-weight: normal;
                                        font-size: calc(var(--wcps-price-font-size) * 0.9);
                                        text-decoration: line-through;
                                    }
                                }

                                ins {
                                    text-decoration: none;
                                }
                            }

                            &.wcps-product-rating-col {
                                .star-rating {
                                    color: var(--wcps-star-color);
                                    font-size: 0.9em;
                                }
                            }

                            &.wcps-product-stock-col {
                                white-space: nowrap;

                                .wcps-in-stock {
                                    color: #48A85F;
                                    font-weight: 600;
                                    display: flex;
                                    align-items: center;

                                    &:before {
                                        content: "";
                                        display: inline-block;
                                        width: 8px;
                                        height: 8px;
                                        background-color: #48A85F;
                                        border-radius: 50%;
                                        margin-right: 6px;
                                    }
                                }

                                .wcps-out-of-stock {
                                    color: #E74C3C;
                                    font-weight: 600;
                                    display: flex;
                                    align-items: center;

                                    &:before {
                                        content: "";
                                        display: inline-block;
                                        width: 8px;
                                        height: 8px;
                                        background-color: #E74C3C;
                                        border-radius: 50%;
                                        margin-right: 6px;
                                    }
                                }
                            }

                            &.wcps-product-actions-col {
                                min-width: 170px;

                                .wcps-product-actions {
                                    display: flex;
                                    flex-wrap: wrap;
                                    gap: 8px;
                                    justify-content: flex-start;
                                    flex-direction: column;

                                    @if var(--wcps-text-align)=="center" {
                                        justify-content: center;
                                    }

                                    @else if var(--wcps-text-align)=="right" {
                                        justify-content: flex-end;
                                    }

                                    a {
                                        display: inline-flex;
                                        align-items: center;
                                        justify-content: center;
                                        padding: 8px 10px;
                                        background: linear-gradient(135deg, var(--wcps-button-bg-color) 0%, rgba(var(--wcps-button-bg-color), 0.8) 100%);
                                        color: var(--wcps-button-text-color);
                                        font-size: 12px;
                                        font-weight: 600;
                                        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                                        white-space: nowrap;
                                        min-width: 35px;
                                        position: relative;
                                        overflow: hidden;
                                        border: none;
                                        text-decoration: none;
                                        letter-spacing: 0.5px;
                                        gap: 3px;

                                        // Modern button styles with enhanced effects
                                        @if var(--wcps-button-style)=="default" {
                                            border-radius: 8px;
                                            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
                                        }

                                        @else if var(--wcps-button-style)=="rounded" {
                                            border-radius: var(--wcps-button-border-radius);
                                            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
                                        }

                                        @else if var(--wcps-button-style)=="pill" {
                                            border-radius: 50px;
                                            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
                                        }

                                        @else if var(--wcps-button-style)=="minimal" {
                                            border-radius: 0;
                                            background: transparent;
                                            border-bottom: 3px solid var(--wcps-button-bg-color);
                                            box-shadow: none;
                                        }

                                        @else {
                                            border-radius: 8px;
                                            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
                                        }

                                        // Add subtle border for better definition
                                        border: 1px solid rgba(255, 255, 255, 0.2);

                                        // Enhanced hover effects
                                        &:hover {
                                            background: linear-gradient(135deg, var(--wcps-button-hover-bg) 0%, rgba(var(--wcps-button-hover-bg), 0.9) 100%);
                                            color: var(--wcps-button-hover-text-color);
                                            transform: translateY(-3px);
                                            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.15);

                                            // Button hover animations with enhanced effects
                                            @if var(--wcps-button-animation)=="scale" {
                                                transform: translateY(-3px) scale(1.05);
                                            }

                                            @else if var(--wcps-button-animation)=="pulse" {
                                                animation: enhanced-pulse 1.5s infinite;
                                            }

                                            @else if var(--wcps-button-animation)=="fade" {
                                                opacity: 0.95;
                                                transform: translateY(-3px);
                                            }

                                            @else {
                                                transform: translateY(-3px);
                                            }

                                            // Add glow effect on hover
                                            &::before {
                                                content: '';
                                                position: absolute;
                                                top: 0;
                                                left: -100%;
                                                width: 100%;
                                                height: 100%;
                                                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
                                                transition: left 0.5s;
                                            }

                                            &:hover::before {
                                                left: 100%;
                                            }
                                        }

                                        // Active state for better feedback
                                        &:active {
                                            transform: translateY(-1px);
                                            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
                                            transition: all 0.1s;
                                        }

                                        // Focus state for accessibility
                                        &:focus {
                                            outline: none;
                                            box-shadow: 0 0 0 3px rgba(var(--wcps-button-bg-color), 0.3), 0 4px 12px rgba(0, 0, 0, 0.15);
                                        }

                                        .wcps-icon {
                                            margin-right: 6px;
                                            font-size: 1.1em;
                                            transition: transform 0.3s ease;
                                        }

                                        .wcps-text {
                                            font-weight: 600;
                                            text-transform: uppercase;
                                            font-size: 0.8em;
                                            letter-spacing: 0.5px;
                                        }

                                        // Specific button type enhancements
                                        &.wcps-add-to-cart {
                                            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
                                            color: white;
                                            border-color: rgba(255, 255, 255, 0.3);

                                            &:hover {
                                                background: linear-gradient(135deg, #218838 0%, #1ea085 100%);
                                                box-shadow: 0 8px 25px rgba(40, 167, 69, 0.3);
                                            }
                                        }

                                        &.wcps-quickview {
                                            background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
                                            color: white;
                                            border-color: rgba(255, 255, 255, 0.3);

                                            &:hover {
                                                background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
                                                box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3);
                                            }
                                        }

                                        &.wcps-wishlist {
                                            background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
                                            color: white;
                                            border-color: rgba(255, 255, 255, 0.3);

                                            &:hover {
                                                background: linear-gradient(135deg, #c82333 0%, #a71e2a 100%);
                                                box-shadow: 0 8px 25px rgba(220, 53, 69, 0.3);
                                            }
                                        }

                                        &.wcps-compare {
                                            background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
                                            color: #212529;
                                            border-color: rgba(255, 255, 255, 0.3);

                                            &:hover {
                                                background: linear-gradient(135deg, #e0a800 0%, #d39e00 100%);
                                                box-shadow: 0 8px 25px rgba(255, 193, 7, 0.3);
                                            }
                                        }
                                    }

                                    // Enhanced hover mode for action buttons
                                    &.wcps-actions-hover {
                                        a.wcps-add-to-cart {
                                            @if var(--addtocart-display-mode)=="hidden" {
                                                display: none;
                                            }

                                            @else if var(--addtocart-display-mode)=="icon_only" {
                                                .wcps-text {
                                                    display: none;
                                                }

                                                .wcps-icon {
                                                    margin-right: 0;
                                                }
                                            }

                                            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
                                            color: white;
                                        }

                                        a.wcps-quickview {
                                            @if var(--quickview-display-mode)=="hidden" {
                                                display: none;
                                            }

                                            @else if var(--quickview-display-mode)=="icon_only" {
                                                .wcps-text {
                                                    display: none;
                                                }

                                                .wcps-icon {
                                                    margin-right: 0;
                                                }
                                            }
                                        }

                                        a.wcps-wishlist {
                                            @if var(--wishlist-displaymode)=="hidden" {
                                                display: none;
                                            }

                                            @else if var(--wishlist-displaymode)=="icon_only" {
                                                .wcps-text {
                                                    display: none;
                                                }

                                                .wcps-icon {
                                                    margin-right: 0;
                                                }
                                            }
                                        }

                                        a.wcps-compare {
                                            @if var(--compare-display-mode)=="hidden" {
                                                display: none;
                                            }

                                            @else if var(--compare-display-mode)=="icon_only" {
                                                .wcps-text {
                                                    display: none;
                                                }

                                                .wcps-icon {
                                                    margin-right: 0;
                                                }
                                            }
                                        }

                                        a:not(.wcps-add-to-cart) {
                                            background: linear-gradient(135deg, rgba(var(--wcps-product-title), 0.1) 0%, rgba(var(--wcps-product-title), 0.05) 100%);
                                            color: var(--wcps-product-title);
                                            border: 1px solid rgba(var(--wcps-product-title), 0.2);
                                            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

                                            &:hover {
                                                background: linear-gradient(135deg, var(--wcps-button-hover-bg) 0%, rgba(var(--wcps-button-hover-bg), 0.9) 100%);
                                                color: var(--wcps-button-hover-text-color);
                                                border-color: rgba(255, 255, 255, 0.3);
                                                transform: translateY(-3px);
                                                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
                                            }
                                        }
                                    }
                                }
                            }

                        }

                        &:last-child td {
                            border-bottom: none;
                        }
                    }
                }
            }

            .dataTables_info,
            .dataTables_paginate {
                margin-top: 18px;
                font-size: 0.9em;
            }

            .dataTables_paginate {
                .paginate_button {
                    padding: 8px 12px;
                    margin: 0 3px;
                    border-radius: var(--wcps-border-radius);
                    cursor: pointer;
                    border: 1px solid transparent;

                    &.current {
                        background-color: var(--wcps-product-title);
                        color: white;
                        border-color: var(--wcps-product-title);
                    }

                    &:hover:not(.current) {
                        background-color: #f0f0f0;
                        border-color: #ddd;
                    }
                }
            }
        }

        // Pagination start
        /* Enhanced Pagination Styles */
        .wcps-pagination {
            margin: 30px 0;
            text-align: center;

            ul {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                list-style: none;
                margin: 0;
                padding: 0;
                gap: 8px;
            }

            li {
                display: flex;
                align-items: center;
                justify-content: center;
            }

            a,
            span {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                min-width: 30px;
                height: 35px;
                padding: 0 5px;
                border: 2px solid #e2e8f0;
                border-radius: 10px;
                background: #ffffff;
                text-decoration: none;
                color: #475569;
                font-weight: 500;
                font-size: 15px;
                transition: all 0.2s ease;
                position: relative;
                text-decoration: none !important;

                &:hover {
                    background: var(--wcps-product-title, #0170B9);
                    color: #ffffff;
                    border-color: var(--wcps-product-title, #0170B9);
                    transform: translateY(-1px);
                    box-shadow: 0 4px 12px rgba(1, 112, 185, 0.25);
                }

                &:active {
                    transform: translateY(0);
                }
            }

            // Current/active page styling
            span.current {
                background: var(--wcps-product-title, #0170B9);
                color: #ffffff;
                border-color: var(--wcps-product-title, #0170B9);
                font-weight: 600;
                box-shadow: 0 2px 8px rgba(1, 112, 185, 0.3);

                &:hover {
                    background: var(--wcps-product-title, #0170B9);
                    color: #ffffff;
                    transform: none;
                    box-shadow: 0 2px 8px rgba(1, 112, 185, 0.3);
                }
            }

            // Navigation arrows styling
            .next,
            .prev {
                font-size: 18px;
                font-weight: 600;
                min-width: 44px;

                &:hover {
                    background: var(--wcps-product-title, #0170B9);
                    color: #ffffff;
                    border-color: var(--wcps-product-title, #0170B9);
                }
            }

            // Disabled state
            .disabled {
                opacity: 0.4;
                cursor: not-allowed;

                &:hover {
                    transform: none;
                    box-shadow: none;
                    background: #ffffff;
                    color: #475569;
                    border-color: #e2e8f0;
                }
            }

            // Dots for truncated pagination
            .dots {
                color: #94a3b8;
                cursor: default;
                border: none;
                background: transparent;

                &:hover {
                    background: transparent;
                    color: #94a3b8;
                    transform: none;
                    box-shadow: none;
                    border: none;
                }
            }
        }

        // Responsive design
        @media (max-width: 768px) {
            .wcps-pagination {
                margin: 20px 0;

                ul {
                    gap: 6px;
                }

                a,
                span {
                    min-width: 40px;
                    height: 40px;
                    padding: 0 10px;
                    font-size: 14px;
                }
            }
        }

        @media (max-width: 480px) {
            .wcps-pagination {
                margin: 16px 0;

                ul {
                    gap: 4px;
                }

                a,
                span {
                    min-width: 36px;
                    height: 36px;
                    padding: 0 8px;
                    font-size: 13px;
                }
            }
        }

        // Focus states for accessibility
        .wcps-pagination {

            a:focus,
            span:focus {
                outline: 2px solid var(--wcps-product-title, #0170B9);
                outline-offset: 2px;
            }
        }

        // Optional: Add subtle animation to page numbers
        .wcps-pagination {

            a,
            span {
                &:not(.current):not(.disabled):hover {
                    animation: pulse 0.3s ease;
                }
            }
        }

        @keyframes pulse {
            0% {
                transform: scale(1) translateY(-1px);
            }

            50% {
                transform: scale(1.05) translateY(-1px);
            }

            100% {
                transform: scale(1) translateY(-1px);
            }
        }

        // Pagination end 

        // Responsive grid columns
        .wcps-grid {
            display: grid;
            grid-template-columns: repeat(var(--wcps-columns, 4), minmax(0, 1fr));
            gap: var(--wcps-grid-gap, 20px);
            width: var(--wcps-grid-width, 100%);

            @media (max-width: 992px) {
                grid-template-columns: repeat(min(3, var(--wcps-columns)), 1fr);
            }

            @media (max-width: 768px) {
                grid-template-columns: repeat(min(2, var(--wcps-columns)), 1fr);
            }

            @media (max-width: 480px) {
                grid-template-columns: 1fr;
            }
        }

        // Mobile optimizations with horizontal scrolling
        @media (max-width: 991px) {
            .wcps-table-container {

                // Custom scrollbar for better UX
                &::-webkit-scrollbar {
                    height: 6px;
                }

                &::-webkit-scrollbar-track {
                    background: #f1f1f1;
                    border-radius: 3px;
                }

                &::-webkit-scrollbar-thumb {
                    background: var(--wcps-product-title);
                    border-radius: 3px;
                }

                // Table adjustments for better mobile view
                .wcps-table {
                    td.wcps-product-title-col {
                        .wcps-product-excerpt {
                            -webkit-line-clamp: 1; // Show only one line on smaller screens
                        }
                    }

                    td.wcps-product-actions-col {
                        .wcps-product-actions {
                            a {
                                padding: 6px 10px;

                                .wcps-text {
                                    display: none; // Hide text on buttons for smaller screens
                                }

                                .wcps-icon {
                                    margin-right: 0;
                                }
                            }
                        }
                    }
                }
            }
        }

        // For extremely small screens, allow vertical scrolling with fixed header
        @media (max-width: 480px) {
            .wcps-table-controls {
                flex-direction: column;
                align-items: flex-start;

                .dataTables_filter,
                .dataTables_length {
                    width: 100%;
                    margin-bottom: 10px;

                    input,
                    select {
                        max-width: 100%;
                    }
                }
            }
        }
    }
}

/* -------------- END -------------- */



/* -------------- Layout Category Tabs -------------- */
// Tabbed Discovery
// New with smooth and staggered animations  two products effects presents - 
.wcps-container {
    background: var(--wcps-container-background, #ffffff3b);
    padding: var(--wcps-container-padding, 25px);
    margin: var(--wcps-container-margin, 0px);

    // Tabbed Discovery
    &.wcps-layout-category_tabs {
        margin: 30px 0;
        position: relative;

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

        .wcps-category-tabs {
            background-color: var(--wcps-background);
            border-radius: var(--wcps-border-radius);

            // Dynamic box shadow based on the value
            @if var(--wcps-box-shadow)=="none" {
                box-shadow: none;
            }

            @else if var(--wcps-box-shadow)=="light" {
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            }

            @else if var(--wcps-box-shadow)=="medium" {
                box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
            }

            @else if var(--wcps-box-shadow)=="heavy" {
                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
            }

            // Dynamic border style
            @if var(--wcps-border-style) !="none" {
                border: var(--wcps-border-width) var(--wcps-border-style) var(--wcps-border-color);
            }

            overflow: hidden;

            // Tab Navigation
            .wcps-tab-nav {
                display: flex;
                list-style: none;
                margin: 0;
                padding: 0;
                border-bottom: 2px solid rgba(0, 0, 0, 0.08);
                background-color: #ffffff;
                position: relative;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;

                &::-webkit-scrollbar {
                    display: none;
                }

                li {
                    margin: 0;
                    padding: 0;
                    flex: 0 0 auto;

                    .wcps-tab-link {
                        display: block;
                        padding: 15px 20px;
                        color: var(--wcps-price-delete-font-color);
                        font-weight: 600;
                        text-decoration: none;
                        transition: all var(--wcps-hover-transition);
                        white-space: nowrap;
                        position: relative;
                        margin-bottom: 10px;

                        &:after {
                            content: '';
                            position: absolute;
                            bottom: -2px;
                            left: 0;
                            width: 100%;
                            height: 2px;
                            background-color: var(--wcps-product-title);
                            transform: scaleX(0);
                            transition: transform var(--wcps-hover-transition);
                            transform-origin: center;
                        }

                        &:hover {
                            color: var(--wcps-product-title);
                        }

                        &.active {
                            color: #ffffff;
                            background: #3582c4;

                            &:after {
                                transform: scaleX(1);
                            }
                        }

                        .wcps-product-count {
                            display: inline-flex;
                            align-items: center;
                            justify-content: center;
                            min-width: 20px;
                            height: 20px;
                            padding: 0 6px;
                            margin-left: 6px;
                            font-size: 0.75em;
                            font-weight: bold;
                            color: #fff;
                            background-color: var(--wcps-product-title);
                            border-radius: 20px;
                            opacity: 0.85;
                            transition: opacity var(--wcps-hover-transition);
                        }

                        &:hover .wcps-product-count,
                        &.active .wcps-product-count {
                            opacity: 1;
                        }
                    }
                }
            }

            // Tab Content Area
            .wcps-tab-content {
                display: none;
                padding: var(--wcps-product-content-padding);

                &.active {
                    display: block;
                    animation: fadeIn 0.3s ease;
                }

                // Products Grid
                .wcps-products-grid {
                    display: grid;
                    grid-template-columns: repeat(var(--wcps-columns, 4), minmax(0, 1fr));
                    gap: var(--wcps-grid-gap, 20px);
                    width: var(--wcps-grid-width, 100%);
                    text-align: var(--wcps-text-align);

                    // Dynamic columns based on the variable
                    &.wcps-columns-1 {
                        grid-template-columns: 1fr;
                    }

                    &.wcps-columns-2 {
                        grid-template-columns: repeat(2, 1fr);
                    }

                    &.wcps-columns-3 {
                        grid-template-columns: repeat(3, 1fr);
                    }

                    &.wcps-columns-4 {
                        grid-template-columns: repeat(4, 1fr);
                    }

                    &.wcps-columns-5 {
                        grid-template-columns: repeat(5, 1fr);
                    }

                    // Product Item
                    .wcps-product-item {
                        border-radius: var(--wcps-border-radius);
                        transition: transform var(--wcps-hover-transition),
                            box-shadow var(--wcps-hover-transition);

                        // Dynamic hover effects
                        @if var(--wcps-hover-effect)=="lift" {
                            &:hover {
                                transform: translateY(-5px);
                                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
                            }
                        }

                        @else if var(--wcps-hover-effect)=="shadow" {
                            &:hover {
                                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
                            }
                        }

                        @else if var(--wcps-hover-effect)=="zoom" {
                            &:hover {
                                transform: scale(1.03);
                            }
                        }

                        @else if var(--wcps-hover-effect)=="glow" {
                            &:hover {
                                box-shadow: 0 0 15px rgba(var(--wcps-product-title), 0.4);
                            }
                        }

                        .wcps-product {
                            height: 100%;
                            display: flex;
                            flex-direction: column;
                            background-color: #fff;
                            border-radius: var(--wcps-border-radius);
                            overflow: hidden;

                            // Dynamic box shadow
                            @if var(--wcps-box-shadow)=="none" {
                                box-shadow: none;
                            }

                            @else if var(--wcps-box-shadow)=="light" {
                                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
                            }

                            @else if var(--wcps-box-shadow)=="medium" {
                                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
                            }

                            @else if var(--wcps-box-shadow)=="heavy" {
                                box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
                            }

                            // Dynamic border style
                            @if var(--wcps-border-style) !="none" {
                                border: var(--wcps-border-width) var(--wcps-border-style) var(--wcps-border-color);
                            }

                            // Product Image Section
                            .wcps-product-image {
                                position: relative;
                                overflow: hidden;
                                border-radius: var(--wcps-image-border-radius) var(--wcps-image-border-radius) 0 0;

                                a {
                                    display: block;

                                    img {
                                        width: 100%;
                                        height: auto;
                                        display: block;
                                        transition: transform var(--wcps-hover-transition);
                                        object-fit: cover;

                                        // Dynamic aspect ratio
                                        @if var(--wcps-image-aspect-ratio)=="(1,1)" {
                                            aspect-ratio: 1/1;
                                        }

                                        @else if var(--wcps-image-aspect-ratio)=="(3,4)" {
                                            aspect-ratio: 3/4;
                                        }

                                        @else if var(--wcps-image-aspect-ratio)=="(4,3)" {
                                            aspect-ratio: 4/3;
                                        }

                                        @else if var(--wcps-image-aspect-ratio)=="(16,9)" {
                                            aspect-ratio: 16/9;
                                        }
                                    }

                                    // Dynamic image hover effects
                                    @if var(--wcps-image-hover-effect)=="zoom" {
                                        &:hover img {
                                            transform: scale(1.08);
                                        }
                                    }

                                    @else if var(--wcps-image-hover-effect)=="fade" {
                                        &:hover img {
                                            opacity: 0.8;
                                        }
                                    }

                                    @else if var(--wcps-image-hover-effect)=="blur" {
                                        &:hover img {
                                            filter: blur(2px);
                                        }
                                    }
                                }


                                // Product Actions (Buttons) - FIXED: Enhanced with staggered animation
                                .wcps-product-actions {
                                    position: absolute;
                                    right: 10px;
                                    bottom: 10px;
                                    display: flex;
                                    flex-direction: column;
                                    justify-content: center;
                                    gap: 8px;
                                    padding: 0;
                                    transform: translateY(20px) scale(0.8);
                                    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

                                    a {
                                        position: relative;
                                        display: inline-flex;
                                        align-items: center;
                                        justify-content: center;
                                        width: 44px;
                                        height: 44px;
                                        border-radius: 50%;
                                        background: rgba(255, 255, 255, 0.95);
                                        backdrop-filter: blur(10px);
                                        border: 1px solid rgba(255, 255, 255, 0.2);
                                        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
                                        color: #333;
                                        font-size: 16px;
                                        text-decoration: none;
                                        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                                        overflow: visible;

                                        // Icon styling
                                        .wcps-btn-icon {
                                            display: flex;
                                            align-items: center;
                                            justify-content: center;
                                            z-index: 2;
                                            transition: transform 0.3s ease;

                                            i {
                                                font-size: 16px;
                                                transition: all 0.3s ease;
                                            }
                                        }

                                        // Modern CTA tooltip
                                        .wcps-btn-cta {
                                            position: absolute;
                                            right: calc(100% + 12px);
                                            top: 50%;
                                            transform: translateY(-50%) translateX(10px);
                                            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                                            color: #fff;
                                            padding: 8px 12px;
                                            border-radius: 8px;
                                            font-size: 12px;
                                            font-weight: 500;
                                            white-space: nowrap;
                                            opacity: 0;
                                            visibility: hidden;
                                            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                                            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
                                            z-index: 100;

                                            // Modern arrow with gradient
                                            &::before {
                                                content: '';
                                                position: absolute;
                                                left: 100%;
                                                top: 50%;
                                                transform: translateY(-50%);
                                                width: 0;
                                                height: 0;
                                                border: 6px solid transparent;
                                                border-left: 6px solid #667eea;
                                                filter: drop-shadow(2px 0 2px rgba(102, 126, 234, 0.3));
                                            }

                                            // Subtle animation
                                            &::after {
                                                content: '';
                                                position: absolute;
                                                inset: 0;
                                                border-radius: inherit;
                                                background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
                                                opacity: 0;
                                                transition: opacity 0.3s ease;
                                            }
                                        }

                                        &:hover {
                                            transform: translateY(-2px) scale(1.05);
                                            background: #fff;
                                            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
                                            border-color: rgba(102, 126, 234, 0.3);

                                            .wcps-btn-icon {
                                                transform: scale(1.1);

                                                i {
                                                    color: #667eea;
                                                }
                                            }

                                            .wcps-btn-cta {
                                                opacity: 1;
                                                visibility: visible;
                                                transform: translateY(-50%) translateX(0);

                                                &::after {
                                                    opacity: 1;
                                                }
                                            }
                                        }

                                        // Specific button styles
                                        &.wcps-add-to-cart {
                                            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                                            color: #fff;
                                            border-color: transparent;

                                            &:hover {
                                                background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
                                                color: #fff;

                                                .wcps-btn-icon i {
                                                    color: #fff;
                                                }
                                            }

                                            .wcps-btn-cta {
                                                background: linear-gradient(135deg, #4c51bf 0%, #553c9a 100%);

                                                &::before {
                                                    border-left-color: #4c51bf;
                                                }
                                            }
                                        }

                                        &.wcps-wishlist {
                                            .wcps-btn-cta {
                                                background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
                                                box-shadow: 0 4px 15px rgba(240, 147, 251, 0.4);

                                                &::before {
                                                    border-left-color: #f093fb;
                                                }
                                            }

                                            &:hover .wcps-btn-icon i {
                                                color: #f093fb;
                                            }
                                        }

                                        &.wcps-quickview {
                                            .wcps-btn-cta {
                                                background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
                                                box-shadow: 0 4px 15px rgba(79, 172, 254, 0.4);

                                                &::before {
                                                    border-left-color: #4facfe;
                                                }
                                            }

                                            &:hover .wcps-btn-icon i {
                                                color: #4facfe;
                                            }
                                        }

                                        &.wcps-compare {
                                            .wcps-btn-cta {
                                                background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
                                                box-shadow: 0 4px 15px rgba(67, 233, 123, 0.4);

                                                &::before {
                                                    border-left-color: #43e97b;
                                                }
                                            }

                                            &:hover .wcps-btn-icon i {
                                                color: #43e97b;
                                            }
                                        }
                                    }

                                    // Staggered animation for multiple buttons
                                    a:nth-child(1) {
                                        transition-delay: 0.1s;
                                    }

                                    a:nth-child(2) {
                                        transition-delay: 0.15s;
                                    }

                                    a:nth-child(3) {
                                        transition-delay: 0.2s;
                                    }

                                    a:nth-child(4) {
                                        transition-delay: 0.25s;
                                    }
                                }


                                // Show actions on hover
                                .wcps-product-image:hover {
                                    .wcps-product-actions {
                                        transform: translateY(0) scale(1);
                                    }
                                }

                            }

                            // Product Content Section
                            .wcps-product-content {
                                padding: 15px;
                                display: flex;
                                flex-direction: column;
                                gap: 8px;
                                flex-grow: 1;

                                .wcps-product-title {
                                    margin: 0 0 5px;
                                    font-size: var(--wcps-title-size);
                                    font-weight: var(--wcps-title-weight);
                                    line-height: 1.3;

                                    a {
                                        // color: var(--wcps-price-delete-font-color);
                                        color: var(--wcps-product-title, #333);
                                        font-size: var(--wcps-title-size, 16px);
                                        font-weight: var(--wcps-title-weight, 600);
                                        text-decoration: none;

                                        &:hover {
                                            color: var(--wcps-product-title);
                                        }
                                    }
                                }

                                .wcps-product-price {
                                    font-weight: var(--wcps-price-font-weight);
                                    font-size: var(--wcps-price-font-size);
                                    margin: 8px 0;

                                    .woocommerce-Price-amount {
                                        color: var(--wcps-price-font-color);
                                    }

                                    del {
                                        .woocommerce-Price-amount {
                                            color: var(--wcps-price-delete-font-color);
                                            font-weight: normal;
                                            font-size: 0.9em;
                                            text-decoration: line-through;
                                        }
                                    }

                                    ins {
                                        text-decoration: none;
                                        margin-left: 5px;
                                    }
                                }

                                .wcps-product-rating {
                                    margin: 5px 0;

                                    .star-rating {
                                        position: relative;
                                        height: 1em;
                                        font-size: 0.9em;
                                        width: 5.4em;

                                        &:before {
                                            content: "★★★★★";
                                            color: #d3ced2;
                                            float: left;
                                            top: 0;
                                            left: 0;
                                            position: absolute;
                                        }

                                        span {
                                            overflow: hidden;
                                            float: left;
                                            top: 0;
                                            left: 0;
                                            position: absolute;
                                            padding-top: 1.5em;

                                            &:before {
                                                content: "★★★★★";
                                                color: var(--wcps-star-color, #FFD700);
                                                top: 0;
                                                position: absolute;
                                                left: 0;
                                            }
                                        }
                                    }
                                }

                                .wcps-product-description {
                                    font-size: var(--wcps-desc-size);
                                    color: var(--wcps-description-color);
                                    line-height: 1.5;
                                    margin-top: auto;
                                    display: -webkit-box;
                                    -webkit-line-clamp: 2;
                                    -webkit-box-orient: vertical;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                }
                            }
                        }
                    }
                }
            }
        }

        // Responsive Styles
        @media (max-width: 991px) {
            .wcps-category-tabs {
                .wcps-products-grid {

                    &.wcps-columns-3,
                    &.wcps-columns-4,
                    &.wcps-columns-5 {
                        grid-template-columns: repeat(2, 1fr);
                    }
                }
            }
        }

        @media (max-width: 575px) {
            .wcps-category-tabs {
                .wcps-tab-nav {
                    li .wcps-tab-link {
                        padding: 12px 15px;
                        font-size: 0.9em;
                    }
                }

                .wcps-products-grid {
                    grid-template-columns: 1fr !important;
                    gap: 15px;

                    .wcps-product-item .wcps-product {
                        .wcps-product-image .wcps-product-actions {
                            // On mobile, always show actions for better UX
                            transform: translateY(0);

                            a {
                                padding: 6px 10px;
                                opacity: 1; // FIXED: Ensure buttons are visible on mobile
                                transform: translateY(0); // FIXED: Reset transform on mobile

                                .wcps-text {
                                    display: none; // Hide text to save space
                                }

                                .wcps-icon {
                                    margin-right: 0;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

// Animation
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

// Pulse animation for button
@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}


/* -------------- END -------------- */



/* --------------CTA Style Start -------------- */
.wcps-container {
    background: var(--wcps-container-background, #ffffff3b);
    padding: var(--wcps-container-padding, 25px);
    margin: var(--wcps-container-margin, 0px);

    &.wcps-layout-cta-layout {
        margin: 30px 0;
        position: relative;

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

        // CTA Container - Grid Layout
        .wcps-cta-container {
            display: grid;
            // grid-template-columns: repeat(var(--wcps-columns, 1), minmax(0, 1fr));
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: var(--wcps-grid-gap, 20px);
            // width: var(--wcps-grid-width, 100%);
            background: var(--wcps-container-background, #ffffff3b);
            padding: var(--wcps-container-padding, 25px);
            margin: var(--wcps-container-margin, 0px);

            // Responsive grid columns
            @media (max-width: 1200px) {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }

            @media (max-width: 900px) {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            @media (max-width: 600px) {
                grid-template-columns: 1fr;
            }

            // No products message
            .wcps-no-products {
                grid-column: 1 / -1;
                text-align: center;
                padding: 40px 20px;
                color: var(--wcps-no-products-color, #666);
                font-size: var(--wcps-no-products-font-size, 16px);
            }
        }

        // CTA Item
        .wcps-cta-item {
            border: var(--wcps-border-width, 1px) var(--wcps-border-style, solid) var(--wcps-border-color, #eee);
            border-radius: var(--wcps-border-radius, 12px);
            overflow: hidden;
            transition: all var(--wcps-hover-transition, 0.3s) cubic-bezier(0.4, 0, 0.2, 1);
            background: var(--wcps-cta-background, #fff);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

            &:hover {
                transform: translateY(-3px);
                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);

                .wcps-cta-actions-on-image {
                    opacity: 1;
                    visibility: visible;
                    transform: translateY(0);
                }
            }
        }

        // CTA Inner Container
        .wcps-cta-inner {
            display: flex;
            align-items: stretch;
            min-height: var(--wcps-cta-min-height, 200px);

            @media (max-width: 768px) {
                flex-direction: column;
            }
        }

        // Left Section (Image)
        .wcps-cta-left {
            position: relative;
            flex: 0 0 var(--wcps-cta-image-width, 40%);
            overflow: hidden;
            background: var(--wcps-cta-image-background, #f8f9fa);

            @media (max-width: 768px) {
                flex: none;
                height: 250px;
            }

            .wcps-cta-image-link {
                display: block;
                width: 100%;
                height: 100%;
                position: relative;
            }

            .wcps-cta-image {
                width: 100%;
                height: 100%;
                object-fit: var(--wcps-image-object-fit, cover);
                display: block;
                transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            }

            &:hover .wcps-cta-image {
                transform: scale(1.05);
            }

            // Actions on Image
            .wcps-cta-actions-on-image {
                position: absolute;
                bottom: 15px;
                left: 15px;
                right: 15px;
                display: flex;
                justify-content: center;
                gap: 10px;
                opacity: 0;
                visibility: hidden;
                transform: translateY(20px);
                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

                .wcps-product-actions {
                    display: flex;
                    gap: 8px;

                    a {
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                        background: rgba(255, 255, 255, 0.95);
                        backdrop-filter: blur(15px);
                        border: 1px solid rgba(255, 255, 255, 0.3);
                        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
                        color: #333;
                        text-decoration: none;
                        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                        position: relative;

                        .wcps-btn-icon {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            z-index: 2;

                            i {
                                font-size: 16px;
                                color: #333;
                                transition: all 0.3s ease;
                            }
                        }

                        // Tooltip
                        .wcps-btn-cta {
                            position: absolute;
                            bottom: calc(100% + 10px);
                            left: 50%;
                            transform: translateX(-50%) translateY(5px);
                            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                            color: #fff;
                            padding: 6px 10px;
                            border-radius: 6px;
                            font-size: 11px;
                            font-weight: 500;
                            white-space: nowrap;
                            opacity: 0;
                            visibility: hidden;
                            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
                            z-index: 100;

                            &::before {
                                content: '';
                                position: absolute;
                                top: 100%;
                                left: 50%;
                                transform: translateX(-50%);
                                width: 0;
                                height: 0;
                                border: 5px solid transparent;
                                border-top: 5px solid #667eea;
                            }
                        }

                        &:hover {
                            transform: translateY(-3px) scale(1.1);
                            background: #fff;
                            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);

                            .wcps-btn-cta {
                                opacity: 1;
                                visibility: visible;
                                transform: translateX(-50%) translateY(0);
                            }

                            .wcps-btn-icon i {
                                color: #667eea;
                            }
                        }
                    }
                }
            }
        }

        // Right Section (Content)
        .wcps-cta-right {
            flex: 1;
            padding: var(--wcps-cta-content-padding, 25px);
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: var(--wcps-cta-content-gap, 15px);
            background: var(--wcps-cta-content-background, #fff);

            @media (max-width: 768px) {
                padding: 20px;
                gap: 12px;
            }

            // Product Title
            .wcps-cta-title {
                margin: 0;
                font-size: var(--wcps-cta-title-size, 20px);
                font-weight: var(--wcps-cta-title-weight, 700);
                line-height: 1.3;
                color: var(--wcps-cta-title-color, #333);

                a {
                    color: inherit;
                    text-decoration: none;
                    transition: color 0.3s ease;

                    &:hover {
                        color: var(--wcps-cta-title-hover-color, #667eea);
                    }
                }

                @media (max-width: 768px) {
                    font-size: var(--wcps-cta-title-mobile-size, 18px);
                }
            }

            // Product Rating
            .wcps-cta-rating {
                display: flex;
                align-items: center;
                gap: 8px;

                .star-rating {
                    font-size: var(--wcps-cta-star-size, 16px);

                    &::before {
                        color: var(--wcps-star-color, #ffc107);
                    }
                }

                .rating-count {
                    font-size: var(--wcps-rating-count-size, 12px);
                    color: var(--wcps-rating-count-color, #888);
                }
            }

            // Product Price
            .wcps-cta-price {
                font-size: var(--wcps-cta-price-size, 24px);
                font-weight: var(--wcps-cta-price-weight, 800);
                color: var(--wcps-cta-price-color, #333);
                display: flex;
                align-items: baseline;
                gap: 10px;

                del {
                    font-size: var(--wcps-cta-price-del-size, 18px);
                    font-weight: var(--wcps-cta-price-del-weight, 500);
                    color: var(--wcps-cta-price-del-color, #999);
                }

                .price-suffix {
                    font-size: var(--wcps-price-suffix-size, 14px);
                    font-weight: normal;
                    color: var(--wcps-price-suffix-color, #666);
                }

                @media (max-width: 768px) {
                    font-size: var(--wcps-cta-price-mobile-size, 20px);
                }
            }

            // Add to Cart Section - Fixed styling
            .wcps-cta-add-to-cart {
                a {
                    width: 70%;
                    padding: 14px 20px;
                    background: linear-gradient(135deg, var(--wcps-cta-button-bg, #667eea) 0%, var(--wcps-cta-button-bg-dark, #764ba2) 100%);
                    color: var(--wcps-cta-button-color, #fff);
                    border: none;
                    border-radius: var(--wcps-cta-button-radius, 8px);
                    font-size: 15px;
                    font-weight: var(--wcps-cta-button-font-weight, 600);
                    text-transform: var(--wcps-cta-button-text-transform, uppercase);
                    letter-spacing: 0.5px;
                    cursor: pointer;
                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                    text-decoration: none;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    gap: 8px;

                    .wcps-btn-icon {
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        i {
                            font-size: 16px;
                            color: #fff;
                            transition: transform 0.3s ease;
                        }
                    }

                    .wcps-btn-cta {
                        color: #fff;
                        font-weight: inherit;
                    }

                    &:hover {
                        background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
                        transform: translateY(-2px);
                        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);

                        .wcps-btn-icon i {
                            transform: scale(1.2);
                        }
                    }

                    &:active {
                        transform: translateY(0);
                    }

                    @media (max-width: 768px) {
                        padding: 12px 20px;
                        font-size: 14px;
                    }
                }
            }
        }

        // Sale Badge
        .wcps-product-badge {
            position: absolute;
            top: 15px;
            right: 15px;
            background: linear-gradient(135deg, #ff6b6b 0%, #ff8787 100%);
            color: #fff;
            padding: var(--wcps-badge-padding, 6px 12px);
            border-radius: var(--wcps-badge-radius, 20px);
            font-size: var(--wcps-badge-font-size, 12px);
            font-weight: var(--wcps-badge-font-weight, 600);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            box-shadow: 0 2px 10px rgba(255, 107, 107, 0.3);
            z-index: 10;
        }

        // Responsive adjustments
        @media (max-width: 480px) {
            .wcps-cta-container {
                gap: 15px;
            }

            .wcps-cta-right {
                padding: 15px;
                gap: 10px;
            }

            .wcps-cta-title {
                font-size: 16px;
            }

            .wcps-cta-price {
                font-size: 18px;
            }
        }
    }

}

// END 

/* ----------------Flip Style 1 layout------------- */
.wcps-container {
    background: var(--wcps-container-background, #ffffff3b);
    padding: var(--wcps-container-padding, 25px);
    margin: var(--wcps-container-margin, 0px);

    // Square flip box
    &.wcps-layout-flip-layout {
        margin: 30px 0;
        position: relative;
        width: 100%;

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

        // CTA Container - Grid Layout
        .wcps-cta-container {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: var(--wcps-grid-gap, 25px);
            // width: var(--wcps-grid-width, 100%);
            background: var(--wcps-container-background, #ffffff3b);
            padding: var(--wcps-container-padding, 25px);
            margin: var(--wcps-container-margin, 0px);

            // Responsive grid columns
            @media (max-width: 1200px) {
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 20px;
            }

            @media (max-width: 900px) {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            @media (max-width: 600px) {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            // No products message
            .wcps-no-products {
                grid-column: 1 / -1;
                text-align: center;
                padding: 40px 20px;
                color: var(--wcps-no-products-color, #666);
                font-size: var(--wcps-no-products-font-size, 16px);
            }
        }

        // CTA Item - Square Flip Box
        .wcps-cta-item {
            perspective: 1000px;
            height: 350px;
            position: relative;

            @media (max-width: 768px) {
                height: 320px;
            }

            @media (max-width: 600px) {
                height: 300px;
            }

            @media (max-width: 480px) {
                height: 280px;
            }

            @media (max-width: 360px) {
                height: 260px;
            }
        }

        // Flip Box Inner
        .wcps-cta-inner {
            position: relative;
            width: 100%;
            height: 100%;
            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            transform-style: preserve-3d;
            border-radius: var(--wcps-border-radius, 20px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);

            &:hover {
                transform: rotateY(180deg);
            }
        }

        // Front Face (Image)
        .wcps-cta-left {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: var(--wcps-border-radius, 20px);
            overflow: hidden;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

            .wcps-cta-image-link {
                display: block;
                width: 100%;
                height: 100%;
                position: relative;
            }

            .wcps-cta-image {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
                transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
                filter: brightness(0.95) contrast(1.1);
            }

            // Overlay for better text visibility
            &::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: linear-gradient(135deg, rgba(102, 126, 234, 0.3) 0%, rgba(118, 75, 162, 0.3) 100%);
                z-index: 1;
            }

            // Front content overlay
            .wcps-cta-front-content {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                padding: 25px;
                background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
                color: #fff;
                z-index: 2;

                .wcps-cta-title {
                    margin: 0 0 8px 0;
                    font-size: 20px;
                    font-weight: 800;
                    line-height: 1.2;
                    color: #fff;
                    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);

                    @media (max-width: 768px) {
                        font-size: 18px;
                    }
                }

                .wcps-cta-price {
                    font-size: 24px;
                    font-weight: 900;
                    color: #fff;
                    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);

                    @media (max-width: 768px) {
                        font-size: 20px;
                    }
                }
            }

            // Flip indicator
            .wcps-flip-indicator {
                position: absolute;
                top: 20px;
                right: 20px;
                width: 40px;
                height: 40px;
                background: rgba(255, 255, 255, 0.2);
                backdrop-filter: blur(10px);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                font-size: 18px;
                z-index: 3;
                animation: bounce 2s infinite;

                @media (max-width: 768px) {
                    width: 35px;
                    height: 35px;
                    font-size: 16px;
                }
            }

            @keyframes bounce {

                0%,
                20%,
                50%,
                80%,
                100% {
                    transform: translateY(0);
                }

                40% {
                    transform: translateY(-10px);
                }

                60% {
                    transform: translateY(-5px);
                }
            }
        }

        // Back Face (Content)
        .wcps-cta-right {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            transform: rotateY(180deg);
            border-radius: var(--wcps-border-radius, 20px);
            background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
            padding: 30px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            gap: 20px;
            border: 1px solid #e2e8f0;
            z-index: 10;
            pointer-events: auto;

            @media (max-width: 768px) {
                padding: 25px;
                gap: 15px;
            }

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

            .wcps-cta-title a {
                margin: 0;
                font-size: 22px;
                font-weight: 800;
                line-height: 1.3;
                color: #1e293b;
                background: linear-gradient(135deg, #1e293b 0%, #667eea 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;

                @media (max-width: 768px) {
                    font-size: 19px;
                }

            }

            .wcps-cta-rating {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;

                .star-rating {
                    font-size: 18px;
                    color: #fbbf24;
                }

                .rating-count {
                    font-size: 14px;
                    color: #64748b;
                    font-weight: 500;
                }
            }

            .wcps-cta-price {
                font-size: 28px;
                font-weight: 900;
                color: #1e293b;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                flex-wrap: wrap;

                del {
                    font-size: 20px;
                    font-weight: 600;
                    color: #94a3b8;
                }

                @media (max-width: 768px) {
                    font-size: 24px;
                }
            }

            // Back Actions
            .wcps-cta-actions {
                display: flex;
                gap: 12px;
                width: 100%;
                justify-content: center;
                flex-wrap: wrap;

                .wcps-product-actions {
                    display: flex;
                    gap: 8px;

                    a {
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        width: 50px;
                        height: 50px;
                        border-radius: 15px;
                        background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
                        border: 2px solid #e2e8f0;
                        color: #475569;
                        text-decoration: none;
                        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                        position: relative;
                        z-index: 15;
                        pointer-events: auto;

                        &:hover {
                            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                            border-color: #667eea;
                            color: #fff;
                            transform: translateY(-3px);
                            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
                        }

                        .wcps-btn-icon i {
                            font-size: 18px;

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

                            @media (max-width: 480px) {
                                font-size: 15px;
                            }
                        }

                        @media (max-width: 768px) {
                            width: 45px;
                            height: 45px;
                            border-radius: 12px;
                        }

                        @media (max-width: 480px) {
                            width: 40px;
                            height: 40px;
                            border-radius: 10px;
                        }
                    }
                }

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

            .wcps-cta-add-to-cart {
                width: 100%;

                a {
                    width: 100%;
                    padding: 16px 24px;
                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                    color: #fff;
                    border: none;
                    border-radius: 15px;
                    font-size: 16px;
                    font-weight: 700;
                    text-transform: uppercase;
                    letter-spacing: 1px;
                    cursor: pointer;
                    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                    text-decoration: none;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    gap: 10px;
                    position: relative;
                    overflow: hidden;
                    z-index: 20;
                    pointer-events: auto;

                    &::before {
                        content: '';
                        position: absolute;
                        top: 0;
                        left: -100%;
                        width: 100%;
                        height: 100%;
                        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
                        transition: left 0.6s;
                    }

                    &:hover::before {
                        left: 100%;
                    }

                    &:hover {
                        background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
                        transform: translateY(-3px);
                        box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4);
                    }

                    @media (max-width: 768px) {
                        padding: 14px 20px;
                        font-size: 15px;
                        letter-spacing: 0.8px;
                    }

                    @media (max-width: 600px) {
                        padding: 12px 18px;
                        font-size: 14px;
                        letter-spacing: 0.6px;
                    }

                    @media (max-width: 480px) {
                        padding: 10px 16px;
                        font-size: 13px;
                        letter-spacing: 0.5px;
                        border-radius: 12px;
                    }

                    @media (max-width: 360px) {
                        padding: 8px 14px;
                        font-size: 12px;
                        letter-spacing: 0.4px;
                        border-radius: 10px;
                    }
                }
            }
        }

        // Enhanced Sale Badge for flip box
        .wcps-product-badge {
            position: absolute;
            top: 20px;
            left: 20px;
            background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
            color: #fff;
            padding: 8px 16px;
            border-radius: 25px;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
            z-index: 10;
            animation: glow 2s ease-in-out infinite alternate;

            @keyframes glow {
                from {
                    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
                }

                to {
                    box-shadow: 0 6px 25px rgba(239, 68, 68, 0.6);
                }
            }
        }

        // Responsive adjustments
        @media (max-width: 480px) {
            .wcps-cta-container {
                gap: 15px;
            }

            .wcps-cta-item {
                height: 280px;
            }

            .wcps-cta-left .wcps-cta-front-content {
                padding: 20px;
            }

            .wcps-cta-right {
                padding: 20px;
                gap: 12px;
            }
        }
    }

    // Vertical Flip layout 
    &.wcps-layout-flip-layout-2 {
        margin: 30px 0;
        position: relative;

        // CTA Container - Grid Layout
        .wcps-cta-container {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: var(--wcps-grid-gap, 25px);
            // width: var(--wcps-grid-width, 100%);
            padding: 20px;

            // Responsive grid columns
            @media (max-width: 1200px) {
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 20px;
            }

            @media (max-width: 900px) {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            @media (max-width: 600px) {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            // No products message
            .wcps-no-products {
                grid-column: 1 / -1;
                text-align: center;
                padding: 40px 20px;
                color: var(--wcps-no-products-color, #666);
                font-size: var(--wcps-no-products-font-size, 16px);
            }
        }

        // CTA Item - Vertical Flip Box
        .wcps-cta-item {
            perspective: 1000px;
            height: 350px;
            position: relative;

            @media (max-width: 768px) {
                height: 320px;
            }

            @media (max-width: 600px) {
                height: 300px;
            }

            @media (max-width: 480px) {
                height: 280px;
            }

            @media (max-width: 360px) {
                height: 260px;
            }
        }

        // Vertical Flip Box Inner
        .wcps-cta-inner {
            position: relative;
            width: 100%;
            height: 100%;
            transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            transform-style: preserve-3d;
            border-radius: var(--wcps-border-radius, 20px);
            box-shadow: 0 10px 35px rgba(0, 0, 0, 0.15);

            &:hover {
                transform: rotateX(-180deg);
            }
        }

        // Front Face (Image) - Vertical
        .wcps-cta-left {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: var(--wcps-border-radius, 20px);
            overflow: hidden;
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);

            .wcps-cta-image-link {
                display: block;
                width: 100%;
                height: 100%;
                position: relative;
            }

            .wcps-cta-image {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
                transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
                filter: brightness(0.9) contrast(1.15);
            }

            // Overlay for better text visibility
            &::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: linear-gradient(135deg, rgba(99, 102, 241, 0.25) 0%, rgba(139, 92, 246, 0.25) 100%);
                z-index: 1;
            }

            // Front content overlay
            .wcps-cta-front-content {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                padding: 25px;
                background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, transparent 100%);
                color: #fff;
                z-index: 2;

                .wcps-cta-title {
                    margin: 0 0 8px 0;
                    font-size: 20px;
                    font-weight: 800;
                    line-height: 1.2;
                    color: #fff;
                    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);

                    @media (max-width: 768px) {
                        font-size: 18px;
                    }
                }

                .wcps-cta-price {
                    font-size: 24px;
                    font-weight: 900;
                    color: #fff;
                    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);

                    @media (max-width: 768px) {
                        font-size: 20px;
                    }
                }
            }

            // Vertical flip indicator
            .wcps-flip-indicator {
                position: absolute;
                top: 20px;
                right: 20px;
                width: 40px;
                height: 40px;
                background: rgba(255, 255, 255, 0.25);
                backdrop-filter: blur(15px);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                font-size: 18px;
                z-index: 3;
                animation: verticalBounce 2.5s infinite;

                @media (max-width: 768px) {
                    width: 35px;
                    height: 35px;
                    font-size: 16px;
                }
            }

            @keyframes verticalBounce {

                0%,
                20%,
                50%,
                80%,
                100% {
                    transform: translateX(0);
                }

                40% {
                    transform: translateX(-8px);
                }

                60% {
                    transform: translateX(-4px);
                }
            }
        }

        // Back Face (Content) - Vertical
        .wcps-cta-right {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            transform: rotateX(180deg);
            border-radius: var(--wcps-border-radius, 20px);
            background: linear-gradient(135deg, #fff 0%, #f1f5f9 100%);
            padding: 30px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            gap: 20px;
            border: 1px solid #e2e8f0;
            z-index: 10;
            pointer-events: auto;

            @media (max-width: 768px) {
                padding: 25px;
                gap: 15px;
            }

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

            .wcps-cta-title {
                margin: 0;
                font-size: 22px;
                font-weight: 800;
                line-height: 1.3;
                color: #1e293b;
                background: linear-gradient(135deg, #1e293b 0%, #6366f1 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;

                @media (max-width: 768px) {
                    font-size: 19px;
                }
            }

            .wcps-cta-rating {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;

                .star-rating {
                    font-size: 18px;
                    color: #fbbf24;
                }

                .rating-count {
                    font-size: 14px;
                    color: #64748b;
                    font-weight: 500;
                }
            }

            .wcps-cta-price {
                font-size: 28px;
                font-weight: 900;
                color: #1e293b;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                flex-wrap: wrap;

                del {
                    font-size: 20px;
                    font-weight: 600;
                    color: #94a3b8;
                }

                @media (max-width: 768px) {
                    font-size: 24px;
                }
            }

            // Back Actions
            .wcps-cta-actions {
                display: flex;
                gap: 12px;
                width: 100%;
                justify-content: center;
                flex-wrap: wrap;

                .wcps-product-actions {
                    display: flex;
                    gap: 8px;

                    a {
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        width: 50px;
                        height: 50px;
                        border-radius: 15px;
                        background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
                        border: 2px solid #e2e8f0;
                        color: #475569;
                        text-decoration: none;
                        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                        position: relative;
                        z-index: 15;
                        pointer-events: auto;

                        &:hover {
                            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
                            border-color: #6366f1;
                            color: #fff;
                            transform: translateY(-3px);
                            box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
                        }

                        .wcps-btn-icon i {
                            font-size: 18px;

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

                            @media (max-width: 480px) {
                                font-size: 15px;
                            }
                        }

                        @media (max-width: 768px) {
                            width: 45px;
                            height: 45px;
                            border-radius: 12px;
                        }

                        @media (max-width: 480px) {
                            width: 40px;
                            height: 40px;
                            border-radius: 10px;
                        }
                    }
                }

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

            .wcps-cta-add-to-cart {
                width: 100%;

                a {
                    width: 100%;
                    padding: 16px 24px;
                    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
                    color: #fff;
                    border: none;
                    border-radius: 15px;
                    font-size: 16px;
                    font-weight: 700;
                    text-transform: uppercase;
                    letter-spacing: 1px;
                    cursor: pointer;
                    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                    text-decoration: none;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    gap: 10px;
                    position: relative;
                    overflow: hidden;
                    z-index: 20;
                    pointer-events: auto;

                    &::before {
                        content: '';
                        position: absolute;
                        top: 0;
                        left: -100%;
                        width: 100%;
                        height: 100%;
                        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
                        transition: left 0.6s;
                    }

                    &:hover::before {
                        left: 100%;
                    }

                    &:hover {
                        background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
                        transform: translateY(-3px);
                        box-shadow: 0 12px 35px rgba(99, 102, 241, 0.4);
                    }

                    @media (max-width: 768px) {
                        padding: 14px 20px;
                        font-size: 15px;
                        letter-spacing: 0.8px;
                    }

                    @media (max-width: 600px) {
                        padding: 12px 18px;
                        font-size: 14px;
                        letter-spacing: 0.6px;
                    }

                    @media (max-width: 480px) {
                        padding: 10px 16px;
                        font-size: 13px;
                        letter-spacing: 0.5px;
                        border-radius: 12px;
                    }

                    @media (max-width: 360px) {
                        padding: 8px 14px;
                        font-size: 12px;
                        letter-spacing: 0.4px;
                        border-radius: 10px;
                    }
                }
            }
        }

        // Enhanced Sale Badge for vertical flip box
        .wcps-product-badge {
            position: absolute;
            top: 20px;
            left: 20px;
            background: linear-gradient(135deg, #dc2626 0%, #ea580c 100%);
            color: #fff;
            padding: 8px 16px;
            border-radius: 25px;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
            z-index: 10;
            animation: pulseGlow 2s ease-in-out infinite alternate;

            @keyframes pulseGlow {
                from {
                    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
                    transform: scale(1);
                }

                to {
                    box-shadow: 0 6px 25px rgba(220, 38, 38, 0.6);
                    transform: scale(1.05);
                }
            }
        }
    }
}

/* ----------------List Style layout------------- */
.wcps-container {
    background: var(--wcps-container-background, #ffffff3b);
    padding: var(--wcps-container-padding, 25px);
    margin: var(--wcps-container-margin, 0px);

    &.wcps-layout-list-layout {
        margin: 30px 0;
        position: relative;

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

        // List Container with Grid
        .wcps-list-products {
            display: grid;
            // grid-template-columns: repeat(var(--wcps-columns, 1), minmax(0, 1fr));
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: var(--wcps-grid-gap, 20px);
            width: var(--wcps-grid-width, 100%);
            padding: var(--wcps-container-padding, 25px);

            // Responsive grid adjustments
            @media (max-width: 1024px) {
                grid-template-columns: repeat(1, 1fr);
            }

            @media (max-width: 768px) {
                grid-template-columns: repeat(1, 1fr);
                gap: 15px;
            }

            @media (max-width: 480px) {
                grid-template-columns: repeat(1, 1fr);
                gap: 12px;
            }
        }

        // List Item with Glassmorphism
        .wcps-list-item {
            background: rgba(255, 255, 255, 0.25);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: var(--wcps-border-radius, 16px);
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
            transition: all var(--wcps-hover-transition, 0.3s) ease;
            border-radius: 10px;
            overflow: hidden;
            position: relative;

            // Glass overlay effect
            &::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 1px;
                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
                z-index: 1;
            }

            &:hover {
                transform: translateY(-2px);
                box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.5);
                background: rgba(255, 255, 255, 0.35);
                border-color: rgba(255, 255, 255, 0.3);
            }
        }

        // Inner container for list layout
        .wcps-list-inner {
            display: flex;
            align-items: center;
            padding: var(--wcps-product-content-padding, 20px);
            gap: 20px;
            position: relative;
            z-index: 2;
            height: 280px;

            // Responsive layout adjustments
            @media (max-width: 768px) {
                flex-direction: column;
                text-align: center;
                gap: 15px;
                padding: 15px;
            }

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

        // Left section - Image with actions
        .wcps-list-left {
            flex-shrink: 0;
            position: relative;
            width: var(--wcps-list-image-width, 120px);
            // height: var(--wcps-list-image-height, 120px);

            width: 125px;
            height: 90%;

            @media (max-width: 768px) {
                width: 100px;
                height: 100px;
            }

            @media (max-width: 480px) {
                width: 80px;
                height: 80px;
            }

            .wcps-list-image-link {
                display: block;
                width: 100%;
                height: 100%;
                border-radius: var(--wcps-image-border-radius, 12px);
                overflow: hidden;
                background: rgba(255, 255, 255, 0.1);
                backdrop-filter: blur(5px);
                border: 1px solid rgba(255, 255, 255, 0.2);

                img.wcps-list-image {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    transition: transform 0.4s ease;
                    border-radius: inherit;
                }

                &:hover img.wcps-list-image {
                    transform: scale(1.05);
                }
            }

            // Actions overlay on image
            .wcps-list-actions-on-image {
                position: absolute;
                top: 8px;
                right: 8px;
                display: flex;
                flex-direction: column;
                gap: 6px;
                opacity: 0;
                visibility: hidden;
                transform: translateX(10px);
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);



                a {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    background: rgba(255, 255, 255, 0.9);
                    backdrop-filter: blur(10px);
                    border: 1px solid rgba(255, 255, 255, 0.3);
                    color: #333;
                    font-size: 14px;
                    text-decoration: none;
                    transition: all 0.3s ease;
                    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                    margin: 5px;

                    &:hover {
                        background: rgba(102, 126, 234, 0.9);
                        color: #fff;
                        transform: scale(1.1);
                        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
                    }

                    // Add CTA style on hover for list layout
                    .wcps-btn-cta {
                        position: absolute;
                        right: calc(100% + 12px);
                        top: 50%;
                        transform: translateY(-50%) translateX(10px);
                        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                        color: #fff;
                        padding: 8px 12px;
                        border-radius: 8px;
                        font-size: 12px;
                        font-weight: 500;
                        white-space: nowrap;
                        opacity: 0;
                        visibility: hidden;
                        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
                        z-index: 100;

                        // Modern arrow with gradient
                        &::before {
                            content: '';
                            position: absolute;
                            left: 100%;
                            top: 50%;
                            transform: translateY(-50%);
                            width: 0;
                            height: 0;
                            border: 6px solid transparent;
                            border-left: 6px solid #667eea;
                            filter: drop-shadow(2px 0 2px rgba(102, 126, 234, 0.3));
                        }

                        // Subtle animation
                        &::after {
                            content: '';
                            position: absolute;
                            inset: 0;
                            border-radius: inherit;
                            background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
                            opacity: 0;
                            transition: opacity 0.3s ease;
                        }
                    }

                    &:hover {
                        transform: translateY(-2px) scale(1.05);
                        background: #fff;
                        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
                        border-color: rgba(102, 126, 234, 0.3);

                        .wcps-btn-icon {
                            transform: scale(1.1);

                            i {
                                color: #667eea;
                            }
                        }

                        .wcps-btn-cta {
                            opacity: 1;
                            visibility: visible;
                            transform: translateY(-50%) translateX(0);

                            &::after {
                                opacity: 1;
                            }
                        }
                    }

                    // END 


                }
            }

            &:hover .wcps-list-actions-on-image {
                opacity: 1;
                visibility: visible;
                transform: translateX(0);
            }
        }

        // Middle section - Title, description, price
        .wcps-list-middle {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            gap: 8px;
            min-width: 0;

            @media (max-width: 768px) {
                align-items: center;
            }

            .wcps-list-title {
                margin: 0;
                font-size: var(--wcps-title-size, 18px);
                font-weight: var(--wcps-title-weight, 600);
                line-height: 1.3;

                a {
                    color: var(--wcps-product-title, #333);
                    text-decoration: none;
                    transition: color 0.3s ease;

                    &:hover {
                        color: var(--wcps-product-title-hover-color, #667eea);
                    }
                }

                @media (max-width: 480px) {
                    font-size: 16px;
                }
            }

            .wcps-list-desc-price {
                display: flex;
                flex-direction: column;
                gap: 8px;

                .wcps-list-desc {
                    font-size: var(--wcps-desc-size, 14px);
                    color: var(--wcps-description-color, #666);
                    line-height: 1.4;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;

                    @media (max-width: 480px) {
                        font-size: 12px;
                        -webkit-line-clamp: 1;
                    }
                }

                .wcps-list-price {
                    font-weight: var(--wcps-price-font-weight, 700);
                    font-size: var(--wcps-price-font-size, 16px);
                    color: var(--wcps-price-font-color, #333);

                    del {
                        color: var(--wcps-price-delete-font-color, #888);
                        margin-right: 8px;
                    }

                    @media (max-width: 480px) {
                        font-size: 14px;
                    }
                }
            }
        }

        // Right section - Quality and add to cart
        .wcps-list-right {
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 12px;
            min-width: 120px;

            @media (max-width: 768px) {
                align-items: center;
                min-width: auto;
                flex-direction: row;
                justify-content: center;
                gap: 15px;
            }

            @media (max-width: 480px) {
                flex-direction: column;
                gap: 10px;
            }

            .wcps-list-quality {
                font-size: var(--wcps-desc-size, 12px);
                color: var(--wcps-description-color, #666);
                font-weight: 500;
                padding: 4px 8px;
                background: rgba(255, 255, 255, 0.3);
                backdrop-filter: blur(5px);
                border-radius: 12px;
                border: 1px solid rgba(255, 255, 255, 0.2);
                text-transform: capitalize;
                position: relative;
                top: -65px;
            }

            .wcps-list-qty-add {
                display: flex;
                flex-direction: column;
                align-items: self-end;

                input.wcps-qty-input {
                    margin-bottom: 10px;
                }
            }

            .wcps-add-to-cart-button {
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                color: #fff;
                border: none;
                padding: 10px 16px;
                border-radius: 8px;
                font-size: 14px;
                font-weight: 600;
                text-decoration: none;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                transition: all 0.3s ease;
                box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
                backdrop-filter: blur(10px);
                border: 1px solid rgba(255, 255, 255, 0.2);
                text-transform: capitalize;
                min-width: 100px;

                &:hover {
                    transform: translateY(-2px);
                    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
                    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
                }

                &:active {
                    transform: translateY(0);
                }

                @media (max-width: 480px) {
                    padding: 8px 12px;
                    font-size: 12px;
                    min-width: 80px;
                }

            }
        }

        // No products message
        .wcps-no-products {
            text-align: center;
            padding: 40px 20px;
            background: rgba(255, 255, 255, 0.25);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: var(--wcps-border-radius, 16px);
            color: var(--wcps-description-color, #666);
            font-size: var(--wcps-desc-size, 16px);
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
        }
    }

}


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


/* -------------- Compare css  -------------- */

/* Compare Button */
.wcps-compare-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    background-color: #f7f7f7;
    border: 1px solid #ddd;
    color: #333;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.wcps-compare-button:hover {
    background-color: #ebebeb;
    border-color: #c8c8c8;
}

.wcps-compare-button.added,
.wcps-compare-button.in-compare {
    background-color: #f0f9ff;
    border-color: #90cdf4;
    color: #3182ce;
}

.wcps-compare-button .wcps-icon {
    margin-right: 5px;
}

.wcps-icon-compare::before {
    content: "\21C5";
    /* Unicode for up/down arrow */
}

.wcps-icon-close::before {
    content: "\00D7";
    /* Unicode for × character */
}

.wcps-compare-button.wcps-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Compare Bar */
.wcps-compare-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    border-top: 1px solid #ddd;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 999;
    transform: translateY(0);
    transition: transform 0.3s ease;
}

.wcps-compare-bar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 15px;
}

.wcps-compare-bar-items {
    display: flex;
    overflow-x: auto;
    max-width: 75%;
    padding-right: 15px;
}

.wcps-compare-bar-item {
    flex: 0 0 auto;
    width: 100px;
    margin-right: 10px;
    text-align: center;
    position: relative;
}

.wcps-compare-bar-item-img {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 5px;
}

.wcps-compare-bar-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 1px solid #eee;
    border-radius: 4px;
}

.wcps-compare-bar-item-name {
    font-size: 12px;
    line-height: 1.2;
    max-height: 2.4em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.wcps-compare-bar-item-remove {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    background-color: #ff6b6b;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    z-index: 1;
}

.wcps-compare-bar-actions {
    display: flex;
    align-items: center;
}

.wcps-compare-bar-clear {
    background-color: transparent;
    border: 1px solid #ddd;
    color: #666;
    padding: 8px 12px;
    border-radius: 4px;
    margin-right: 10px;
    cursor: pointer;
}

.wcps-compare-view-button {
    background-color: #3182ce;
    color: #fff;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
}

/* Compare Modal */
.wcps-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.5);
    overflow-y: auto;
}

.wcps-modal.wcps-modal-open {
    display: block;
    z-index: 100;
}

.wcps-modal-content {
    background-color: #fff;
    max-width: 90%;
    width: 1200px;
    margin: 30px auto;
    border-radius: 6px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    position: relative;
}

.wcps-modal-header {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wcps-modal-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.wcps-modal-close {
    font-size: 24px;
    cursor: pointer;
    color: #666;
    z-index: 10;
}

.wcps-modal-body {
    padding: 20px;
    max-height: 70vh;
    overflow-y: auto;
}

.wcps-loading-spinner {
    display: block;
    width: 40px;
    height: 40px;
    margin: 20px auto;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3182ce;
    border-radius: 50%;
    animation: wcps-spin 1s linear infinite;
}

@keyframes wcps-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Compare Table */
.wcps-compare-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #eee;
}

.wcps-compare-table th,
.wcps-compare-table td {
    padding: 12px 15px;
    text-align: left;
    border: 1px solid #eee;
    vertical-align: top;
}

.wcps-compare-table thead th {
    background-color: #f7f7f7;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 1;
}

.wcps-compare-table tbody td:first-child {
    background-color: #f7f7f7;
    font-weight: 600;
    width: 150px;
}

.wcps-compare-product-title {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #333;
    text-decoration: none;
}

.wcps-compare-remove {
    color: #ff6b6b;
    text-decoration: none;
    margin-left: 10px;
}

.wcps-compare-add-to-cart {
    display: inline-block;
    padding: 8px 12px;
    background-color: #3182ce;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    text-align: center;
}


/* Responsive */
@media (max-width: 768px) {
    .wcps-modal-content {
        width: 95%;
        margin: 15px auto;
    }

    .wcps-compare-bar-inner {
        flex-direction: column;
    }

    .wcps-compare-bar-items {
        max-width: 100%;
        padding-right: 0;
        margin-bottom: 10px;
    }

    .wcps-compare-table {
        display: block;
        overflow-x: auto;
    }
}

/* -------------- END  -------------- */
/* -------------- Quick view  -------------- */
/* Quickview Modal Styles */
.wcps-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 999999;
    overflow-y: auto;
    padding: 20px;
}

.wcps-modal.open {
    display: flex;
    align-items: center;
    justify-content: center;
}

.wcps-modal-content {
    position: relative;
    background-color: #fff;
    width: 90%;
    max-width: 1000px;
    max-height: 90vh;
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    animation: wcps-modal-in 0.3s ease-out;
}

@keyframes wcps-modal-in {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wcps-modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    color: #666;
    cursor: pointer;
    z-index: 10;
    transition: color 0.2s;
}

.wcps-modal-close:hover {
    color: #000;
}

.wcps-modal-body {
    padding: 5px;
    max-height: 80vh;
    overflow-y: auto;
}


.wcps-modal-footer {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #ddd;
    text-align: right;
}

/* Responsive Styles */
@media only screen and (max-width: 767px) {
    .wcps-quickview-wrapper {
        flex-direction: column;
    }

    .wcps-quickview-images,
    .wcps-quickview-summary {
        width: 100%;
    }

    .wcps-quickview-images {
        margin-bottom: 20px;
    }

    .wcps-modal-content {
        width: 95%;
        max-height: 95vh;
    }

    .wcps-quickview-summary h1 {
        font-size: 20px;
    }
}

/* -------------- End   -------------- */

/* -------------- Wish list   -------------- */
.wcps-wishlist-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 15px;
    background-color: #f5f5f5;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    margin: 5px;
}

.wcps-wishlist-button:hover {
    background-color: #e5e5e5;
    color: #000;
}

.wcps-wishlist-button.in-wishlist,
.wcps-wishlist-button.added {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}

.wcps-wishlist-button.in-wishlist:hover,
.wcps-wishlist-button.added:hover {
    background-color: #f1c1c7;
}

.wcps-icon-heart {
    display: inline-block;
    margin-right: 5px;
    position: relative;
    width: 16px;
    height: 16px;
}

.wcps-icon-heart:before {
    // content: "♥";
    content: "♡";
    font-size: 16px;
    line-height: 1;
}



/* Wishlist products display */
.wcps-wishlist-products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.wcps-wishlist-product {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    transition: all 0.3s ease;
}

.wcps-wishlist-product:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.wcps-wishlist-product-image {
    text-align: center;
    margin-bottom: 10px;
}

.wcps-wishlist-product-image img {
    max-width: 100%;
    height: auto;
}

.wcps-wishlist-product-title {
    font-size: 16px;
    margin: 0 0 10px;
}

.wcps-wishlist-product-price {
    font-weight: bold;
    margin-bottom: 10px;
}

.wcps-wishlist-product-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
}

.wcps-wishlist-add-to-cart {
    background-color: #4CAF50;
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
}

.wcps-wishlist-remove-item {
    color: #dc3545;
    text-decoration: none;
    font-size: 14px;
}

/* Loading animation */
.wcps-loading {
    opacity: 0.7;
    pointer-events: none;
    position: relative;
}

.wcps-loading:after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-top: -8px;
    margin-left: -8px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-top-color: #333;
    animation: wcps-spin 0.8s infinite linear;
}

@keyframes wcps-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Wishlist counter */
.wcps-wishlist-count {
    display: inline-block;
    background-color: #dc3545;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    margin-left: 5px;
}

/* Notification */
.wcps-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: #4caf50;
    color: white;
    padding: 12px 20px;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.3s, transform 0.3s;
}

.wcps-notification.wcps-notification-visible {
    opacity: 1;
    transform: translateY(0);
}

.wcps-notification.show {
    transform: translateY(0);
    opacity: 1;
}

.wcps-notification.error {
    background-color: #dc3545;
}

/* -------------- End   -------------- */

// Badge 
span.wcps-product-badge {
    font-size: 14px;
    font-weight: 600;
    text-transform: normal;
    text-align: center;
    word-break: break-all;
    letter-spacing: 0.4px;
    line-height: 1.2;
    list-style: none;
    -ms-flex-align: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 20px 20px 20px 20px;
    padding: 5px 5px 5px 5px;
    margin-bottom: 10px;
    z-index: 2;
    background: var(--wcps-background, rgb(54, 182, 217));
    color: var(--wcps-price-delete-font-color, #fff);
    position: absolute;
    right: 5px;
    top: 5px;
}

/* Filters */
.wcps-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f7f7f7;
    border-radius: 4px;
}

.wcps-filter-sorting,
.wcps-filter-categories {
    margin-bottom: 10px;
}

.wcps-filter-sorting label,
.wcps-filter-categories label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.wcps-orderby {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
}

.wcps-category-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

.wcps-category-list li {
    margin: 0 5px 5px 0;
}

.wcps-category-list a {
    display: inline-block;
    padding: 5px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    text-decoration: none;
    color: #333;
    transition: all 0.2s ease;
}

.wcps-category-list a:hover,
.wcps-category-list a.active {
    background-color: var(--wcps-product-title, #0170B9);
    color: #fff;
    border-color: var(--wcps-product-title, #0170B9);
}

// Tag, Brands, Attributes filter 
// Filter Component Styles
.wcps-filter-brands,
.wcps-filter-tags {
    margin-bottom: 1.5rem;

    label {
        display: block;
        font-weight: 600;
        font-size: 1rem;
        color: #333;
        margin-bottom: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
}

// Brand and Tag Lists
.wcps-brand-list,
.wcps-tag-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

    li {
        margin: 0;

        a {
            display: inline-block;
            padding: 0.5rem 1rem;
            text-decoration: none;
            color: #666;
            background-color: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 0.375rem;
            font-size: 0.875rem;
            font-weight: 500;
            transition: all 0.2s ease-in-out;
            white-space: nowrap;

            &:hover {
                color: #333;
                background-color: #e9ecef;
                border-color: #dee2e6;
                transform: translateY(-1px);
            }

            &.active {
                color: #fff;
                background-color: #007bff;
                border-color: #007bff;

                &:hover {
                    background-color: #0056b3;
                    border-color: #0056b3;
                }
            }

            &:focus {
                outline: none;
                box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
            }
        }
    }
}

// Responsive Design
@media (max-width: 768px) {

    .wcps-filter-brands,
    .wcps-filter-tags {
        margin-bottom: 1rem;

        label {
            font-size: 0.875rem;
            margin-bottom: 0.5rem;
        }
    }

    .wcps-brand-list,
    .wcps-tag-list {
        gap: 0.375rem;

        li a {
            padding: 0.375rem 0.75rem;
            font-size: 0.8125rem;
        }
    }
}

// Alternative Compact Layout
.wcps-filters-compact {

    .wcps-filter-brands,
    .wcps-filter-tags {
        display: inline-block;
        margin-right: 2rem;
        margin-bottom: 1rem;

        label {
            display: inline-block;
            margin-right: 0.75rem;
            margin-bottom: 0;
            vertical-align: middle;
        }
    }

    .wcps-brand-list,
    .wcps-tag-list {
        display: inline-flex;
        vertical-align: middle;
    }
}

// Dark Theme Variant
.wcps-filters-dark {

    .wcps-filter-brands,
    .wcps-filter-tags {
        label {
            color: #e9ecef;
        }
    }

    .wcps-brand-list,
    .wcps-tag-list {
        li a {
            color: #adb5bd;
            background-color: #343a40;
            border-color: #495057;

            &:hover {
                color: #f8f9fa;
                background-color: #495057;
                border-color: #6c757d;
            }

            &.active {
                color: #fff;
                background-color: #007bff;
                border-color: #007bff;

                &:hover {
                    background-color: #0056b3;
                    border-color: #0056b3;
                }
            }
        }
    }
}


// Global Pagination 
.wcps-pagination {
    display: flex;
    justify-content: center;
    margin: 2rem 0;
    padding: 1rem 0;
  
    ul.page-numbers {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      list-style: none;
      margin: 0;
      padding: 0;
  
      li {
        display: inline-flex;
        
        .page-numbers {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          min-width: 2.5rem;
          height: 2.5rem;
          padding: 0.5rem 0.75rem;
          font-size: 0.875rem;
          font-weight: 500;
          text-decoration: none;
          color: #374151;
          background-color: #ffffff;
          border: 1px solid #d1d5db;
          border-radius: 0.375rem;
          transition: all 0.2s ease-in-out;
          cursor: pointer;
  
          &:hover {
            background-color: #f9fafb;
            border-color: #9ca3af;
            color: #111827;
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          }
  
          &:active {
            transform: translateY(0);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
          }
  
          &:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
            border-color: #3b82f6;
          }
  
          &.current {
            background-color: #3b82f6;
            border-color: #3b82f6;
            color: #ffffff;
            font-weight: 600;
            cursor: default;
            pointer-events: none;
  
            &:hover {
              background-color: #3b82f6;
              transform: none;
              box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
            }
          }
  
          &.dots {
            border: none;
            background: none;
            color: #6b7280;
            cursor: default;
            pointer-events: none;
            font-weight: 500;
  
            &:hover {
              background: none;
              transform: none;
              box-shadow: none;
            }
          }
  
          &.next,
          &.prev {
            font-size: 1rem;
            font-weight: 600;
            padding: 0.5rem 1rem;
            
            &:hover {
              background-color: #eff6ff;
              border-color: #3b82f6;
              color: #3b82f6;
            }
          }
        }
  
        // Handle span elements (current page and dots)
        span.page-numbers {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          min-width: 2.5rem;
          height: 2.5rem;
          padding: 0.5rem 0.75rem;
          font-size: 0.875rem;
          font-weight: 500;
          border-radius: 0.375rem;
  
          &.current {
            background-color: #3b82f6;
            color: #ffffff;
            font-weight: 600;
            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
          }
  
          &.dots {
            color: #6b7280;
            font-weight: 500;
            background: none;
          }
        }
      }
    }
  }
  
  // Responsive design
  @media (max-width: 768px) {
    .wcps-pagination {
      margin: 1.5rem 0;
      padding: 0.75rem 0;
  
      ul.page-numbers {
        gap: 0.25rem;
        flex-wrap: wrap;
        justify-content: center;
  
        li {
          .page-numbers {
            min-width: 2.25rem;
            height: 2.25rem;
            padding: 0.375rem 0.5rem;
            font-size: 0.8rem;
  
            &.next,
            &.prev {
              padding: 0.375rem 0.75rem;
            }
          }
  
          span.page-numbers {
            min-width: 2.25rem;
            height: 2.25rem;
            padding: 0.375rem 0.5rem;
            font-size: 0.8rem;
          }
        }
      }
    }
  }
  
  @media (max-width: 480px) {
    .wcps-pagination {
      ul.page-numbers {
        gap: 0.125rem;
  
        li {
          .page-numbers {
            min-width: 2rem;
            height: 2rem;
            padding: 0.25rem 0.375rem;
            font-size: 0.75rem;
          }
  
          span.page-numbers {
            min-width: 2rem;
            height: 2rem;
            padding: 0.25rem 0.375rem;
            font-size: 0.75rem;
          }
        }
      }
    }
  }
  
  // Dark mode support (optional)
  @media (prefers-color-scheme: dark) {
    .wcps-pagination {
      ul.page-numbers {
        li {
          .page-numbers {
            color: #e5e7eb;
            background-color: #374151;
            border-color: #4b5563;
  
            &:hover {
              background-color: #4b5563;
              border-color: #6b7280;
              color: #f9fafb;
            }
  
            &.current {
              background-color: #3b82f6;
              border-color: #3b82f6;
              color: #ffffff;
            }
  
            &.dots {
              color: #9ca3af;
            }
  
            &.next,
            &.prev {
              &:hover {
                background-color: #1e3a8a;
                border-color: #3b82f6;
                color: #93c5fd;
              }
            }
          }
  
          span.page-numbers {
            &.current {
              background-color: #3b82f6;
              color: #ffffff;
            }
  
            &.dots {
              color: #9ca3af;
            }
          }
        }
      }
    }
  }