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

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

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

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

    // Common styles for all basic grid layouts
    &.wcps-layout-basic-grid,
    &.wcps-layout-basic-grid-2,
    &.wcps-layout-basic-grid-3 {
        margin: var(--wcps-container-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);
            transition: all var(--wcps-hover-transition, 0.3s) ease;
            overflow: hidden;

            // 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 {
            display: flex;
            flex-direction: var(--wcps-product-flex-direction, column);
            height: var(--wcps-product-width, 100%);
            background: var(--wcps-product-background, #fff);
        }

        // Product 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%);

            .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);
                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;
                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);
                    }
                }
            }
        }

        // Shared button styles (positioning is layout-specific below)
        .wcps-product-actions {
            display: flex;
            gap: 8px;
            padding: 0;
            opacity: 0;
            visibility: hidden;
            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;
                    }
                }

                // Base tooltip styles (positioning is layout-specific)
                .wcps-btn-cta {
                    position: absolute;
                    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;

                    // 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;

                        &::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%);
                    }
                }

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

                    &: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);
                    }

                    &: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);
                    }

                    &: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;
            }
        }

        // Product content
        .wcps-product-content {
            background: var(--wcps-product-content-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);
            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);
                }
            }
        }
    }

    /* -------------- Layout 1: Actions on Right -------------- */
    &.wcps-layout-basic-grid {
        .wcps-product-actions {
            position: absolute;
            right: 10px;
            bottom: 10px;
            flex-direction: column;
            justify-content: center;
            transform: translateY(20px) scale(0.8);

            a .wcps-btn-cta {
                right: calc(100% + 12px);
                top: 50%;
                transform: translateY(-50%) translateX(10px);

                // Arrow pointing left
                &::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));
                }
            }

            // Layout-specific tooltip arrow colors
            a.wcps-add-to-cart .wcps-btn-cta::before {
                border-left-color: #4c51bf;
            }

            a.wcps-wishlist .wcps-btn-cta::before {
                border-left-color: #f093fb;
            }

            a.wcps-quickview .wcps-btn-cta::before {
                border-left-color: #4facfe;
            }

            a.wcps-compare .wcps-btn-cta::before {
                border-left-color: #43e97b;
            }

            a:hover .wcps-btn-cta {
                transform: translateY(-50%) translateX(0);
            }
        }

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

    // Keyframes
    @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);
        }
    }

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

        50% {
            transform: scale(1.1);
        }

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

/**
 * Grid Layout Styles for Product Display — Layouts 4, 5, 6
 *
 * Follows the exact same nesting pattern as layouts 1–3:
 *   .wcps-container {
 *     &.wcps-layout-basic-grid-4 { … }
 *     &.wcps-layout-basic-grid-5 { … }
 *     &.wcps-layout-basic-grid-6 { … }
 *   }
 *
 * Layout-specific keyframes are wrapped in a :has() scope-equivalent
 * using a dummy selector trick so they only activate for their layout,
 * and never leak into layouts 1–3 or each other.
 *
 * @package Product_Display
 */

// Breakpoints (shared, already in main file — kept here for standalone reference)
$breakpoint-xs: 480px;
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;

// ─────────────────────────────────────────────────────────────────────────────
// Layout-specific keyframes
// Declared OUTSIDE .wcps-container (CSS @keyframes must be at root or inside
// a @layer, not inside a ruleset), but named with a layout prefix so they
// NEVER collide with keyframes from other layouts or the base file.
// ─────────────────────────────────────────────────────────────────────────────

// Layout 6 — Polaroid
@keyframes wcps-l6-tape-shimmer {

    0%,
    100% {
        opacity: 0.72;
    }

    50% {
        opacity: 0.88;
    }
}

@keyframes wcps-l6-card-float {

    0%,
    100% {
        transform: rotate(var(--wcps-card-tilt, -1.5deg)) translateY(0);
    }

    50% {
        transform: rotate(var(--wcps-card-tilt, -1.5deg)) translateY(-3px);
    }
}

// new 

// ─────────────────────────────────────────────────────────────────────────────
// Main container — all layout variants live inside here, matching the
// exact same pattern used by &.wcps-layout-basic-grid / -2 / -3
// ─────────────────────────────────────────────────────────────────────────────
.wcps-container {

    // =========================================================================
    // Shared base for layouts 4 · 5 · 6
    // Mirrors the shared block that layouts 1–3 already share above.
    // Add only truly common overrides here; layout-specific rules go below.
    // =========================================================================
    &.wcps-layout-basic-grid-4,
    &.wcps-layout-basic-grid-5,
    &.wcps-layout-basic-grid-6 {
        margin: var(--wcps-container-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);
        }

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

        // Shared title link base
        .wcps-product-title a {
            text-decoration: none;
        }

        // Shared image base
        .wcps-product-image {
            position: relative;
            overflow: hidden;
            z-index: 5;

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

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

        // Shared content base
        .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);
            z-index: 1;
            text-align: var(--wcps-text-align, left);

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


    /* ==========================================================================
       Layout 4 — Editorial Magazine
       Horizontal split card: large image left, bold content right.
       Palette: warm slate bg · terracotta accent · cream content panel.
       ========================================================================== */
    &.wcps-layout-basic-grid-4 {

        // ── Grid — 2-column editorial tiles ──────────────────────────────────
        .wcps-grid-container {
            display: grid;
            grid-template-columns: repeat(var(--wcps-columns, 2), 1fr);
            gap: var(--wcps-grid-gap, 24px);
            width: var(--wcps-grid-width, 100%);

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

        // ── Card shell ────────────────────────────────────────────────────────
        .wcps-grid-item {
            border-radius: var(--wcps-border-radius, 12px);
            overflow: hidden;
            position: relative;
            transition: box-shadow 0.35s ease, transform 0.35s ease;
            background: var(--wcps-product-background, #fff);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07), 0 0 0 1px rgba(0, 0, 0, 0.06);

            &:hover {
                transform: translateY(-4px);
                box-shadow: 0 12px 32px rgba(0, 0, 0, 0.13), 0 0 0 1px rgba(0, 0, 0, 0.07);
            }
        }

        // ── Product: horizontal flex ──────────────────────────────────────────
        .wcps-product {
            flex-direction: row;
            min-height: 220px;
        }

        // ── Image pane (42% width, full height) ───────────────────────────────
        .wcps-product-image {
            flex: 0 0 42%;
            aspect-ratio: unset; // height is driven by the row, not aspect-ratio
            overflow: visible; // allow actions to escape when in hover position

            // Sale badge
            .wcps-product-badge {
                position: absolute;
                top: 10px;
                left: 10px;
                z-index: 3;
                background: #C84B2F;
                color: #fff;
                font-size: 11px;
                font-weight: 700;
                letter-spacing: 0.6px;
                text-transform: uppercase;
                padding: 4px 10px;
                border-radius: 2px;
            }

            // Subtle warm overlay on hover
            &::after {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(to right, rgba(200, 75, 47, 0.15), transparent);
                opacity: 0;
                transition: opacity 0.35s ease;
                pointer-events: none;
            }

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

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

        // ── Content pane ──────────────────────────────────────────────────────
        .wcps-product-content {
            flex: 1 1 auto;
            padding: 22px 22px 18px;
            flex-direction: column;
            justify-content: space-between;
            background: var(--wcps-product-content-background, #FDFAF7);
            border-left: 3px solid #C84B2F;
            position: relative;

            // Top accent rule
            &::before {
                content: '';
                position: absolute;
                top: 0;
                left: -3px;
                width: 48px;
                height: 3px;
                background: #C84B2F;
            }

            .wcps-product-title {
                margin: 0 0 8px;

                a {
                    font-size: var(--wcps-title-size, 17px);
                    font-weight: var(--wcps-title-weight, 700);
                    color: var(--wcps-product-title, #1A1A1A);
                    line-height: 1.3;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;

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

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

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

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

            .wcps-product-description {
                margin-bottom: 12px;

                p.wcps-product-description-content {
                    font-size: var(--wcps-desc-size, 13px);
                    color: var(--wcps-description-color, #6B6560);
                    line-height: 1.55;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                }
            }

            // Price + actions row
            .wcps-product-footer {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: auto;
            }

            .wcps-product-price {
                font-weight: var(--wcps-price-font-weight, 800);
                font-size: var(--wcps-price-font-size, 20px);
                color: var(--wcps-price-font-color, #C84B2F);
                line-height: 1;

                del {
                    font-size: 13px;
                    font-weight: 400;
                    color: var(--wcps-price-delete-font-color, #999);
                    margin-right: 4px;
                }
            }
        }

        // ── Action buttons — minimal icon-only row, always visible ───────────
        // Flows inline inside the content area — no absolute positioning needed.
        .wcps-product-actions {
            display: flex;
            gap: 6px;
            margin-top: 10px;
            opacity: 1;
            visibility: visible;
            transform: none;
            transition: none;
            flex-wrap: wrap;
            overflow: visible;

            a {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 30px;
                height: 30px;
                border-radius: 6px;
                border: 1.5px solid rgba(0, 0, 0, 0.10);
                background: #fff;
                color: #444;
                font-size: 14px;
                text-decoration: none;
                transition: all 0.2s ease;
                position: relative;
                overflow: visible;

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

                // Tooltip — above button, terracotta themed
                .wcps-btn-cta {
                    position: absolute;
                    bottom: calc(100% + 7px);
                    left: 50%;
                    transform: translateX(-50%) translateY(4px);
                    background: #1A1A1A;
                    border: 1px solid rgba(200, 75, 47, 0.4);
                    color: #f8c4b5;
                    padding: 4px 8px;
                    border-radius: 5px;
                    font-size: 11px;
                    font-weight: 500;
                    white-space: nowrap;
                    opacity: 0;
                    visibility: hidden;
                    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
                    z-index: 100;
                    pointer-events: none;

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

                &:hover {
                    border-color: #C84B2F;
                    color: #C84B2F;
                    background: #FEF3F0;
                    transform: translateY(-1px);
                    box-shadow: 0 2px 8px rgba(200, 75, 47, 0.15);
                    z-index: 50;

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

                &.wcps-add-to-cart {
                    background: #C84B2F;
                    border-color: #C84B2F;
                    color: #fff;

                    .wcps-btn-cta {
                        background: #C84B2F;
                        border-color: rgba(200, 75, 47, 0.6);
                        color: #fff;

                        &::after {
                            border-top-color: #C84B2F;
                        }
                    }

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

        // When actions are rendered inside .wcps-product-image (hover position),
        // override to overlay at image bottom
        .wcps-product-image {
            .wcps-product-actions {
                position: absolute;
                bottom: 10px;
                left: 10px;
                margin-top: 0;
                background: rgba(255, 255, 255, 0.92);
                border-radius: 8px;
                padding: 4px 6px;
                backdrop-filter: blur(8px);
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
            }
        }

        // ── Responsive: stack vertically on small screens ─────────────────────
        @media (max-width: 600px) {
            .wcps-product {
                flex-direction: column;
                min-height: unset;
            }

            .wcps-product-image {
                flex: 0 0 auto;
                height: 200px;
                width: 100%;
            }

            .wcps-product-content {
                border-left: none;
                border-top: 3px solid #C84B2F;

                &::before {
                    top: -3px;
                    left: 0;
                    height: 3px;
                    width: 48px;
                }
            }
        }
    }


}