.elementor-10 .elementor-element.elementor-element-bafb8cc{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:40px;--padding-bottom:40px;--padding-left:0px;--padding-right:0px;}@media(max-width:767px){.elementor-10 .elementor-element.elementor-element-3b3517c{padding:10px 10px 10px 10px;}}@media(min-width:768px){.elementor-10 .elementor-element.elementor-element-bafb8cc{--content-width:1380px;}}/* Start custom CSS for shortcode, class: .elementor-element-3b3517c */@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Syne:wght@700;800&display=swap');

:root {
    --neon-green: #39FF70;
    --card-bg-dark: #121517; 
    --text-grey: #8E928F;
}

/* 4-Column Grid Container */
.ev-shop-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
    font-family: 'DM Sans', sans-serif;
}

/* The Product Card */
.ev-shop-card {
    background-color: var(--card-bg-dark);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.ev-shop-card:hover {
    border-color: rgba(57, 255, 112, 0.3);
    transform: translateY(-5px);
}

/* Image Container (White Background) */
.ev-shop-image-box {
    background-color: #FFFFFF;
    height: 220px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.ev-shop-image-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Red Sale Badge */
.ev-sale-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background-color: #FF4D4D;
    color: #FFF;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
}

/* Product Info Container */
.ev-shop-info {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Product Title */
.ev-shop-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 12px 0;
    line-height: 1.3;
}

/* Pricing Wrapper */
.ev-price-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 16px;
}

/* Current Price (Neon Stretched) */
.ev-price-current {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 24px;
    color: var(--neon-green);
    transform: scaleX(1.2);
    transform-origin: left;
    letter-spacing: -0.5px;
}

/* Old Price (Strikethrough) */
.ev-price-old {
    font-size: 13px;
    color: #555555;
    text-decoration: line-through;
}

/* Features List */
.ev-shop-features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
    flex-grow: 1;
}

/* Remove default WP widget list margins if any leak in */
.ev-shop-features ul { margin: 0; padding: 0; list-style: none; }

.ev-shop-features li {
    font-size: 12px;
    color: var(--text-grey);
    margin-bottom: 8px;
    position: relative;
    padding-left: 14px;
    line-height: 1.4;
}

/* Tiny Green Dot Bullets */
.ev-shop-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 5px;
    height: 5px;
    background-color: var(--neon-green);
    border-radius: 50%;
}

/* Buttons Container */
.ev-shop-actions {
    display: flex;
    gap: 10px;
}

.ev-shop-btn {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    box-sizing: border-box;
}

.ev-btn-buy {
    background-color: var(--neon-green);
    color: #000;
    border: none;
}

.ev-btn-buy:hover {
    color: #000;
    box-shadow: 0 0 15px rgba(57, 255, 112, 0.4);
}

.ev-btn-quote {
    background-color: transparent;
    color: #FFF;
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-weight: 500;
}

.ev-btn-quote:hover {
    color: #FFF;
    background-color: rgba(255, 255, 255, 0.05);
}

/* Responsive Grid Adjustments */
@media (max-width: 1200px) {
    .ev-shop-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .ev-shop-grid { grid-template-columns: 1fr; }
    .ev-price-current { font-size: 28px; }
}

/* Fixes for clickable image and title links */
a.ev-shop-image-box {
    text-decoration: none;
    display: flex; /* Ensures it maintains the layout from the previous CSS */
}

.ev-shop-title a {
    color: #FFFFFF;
    text-decoration: none;
    transition: color 0.2s ease;
}

.ev-shop-title a:hover {
    color: var(--neon-green); /* Optional: turns the title neon green when hovering */
}




/* --- MOBILE VIEWPORT OPTIMIZATIONS --- */

/* Tablets and Standard Mobile (iPad & larger phones) */
@media (max-width: 1024px) {
    .ev-shop-grid { 
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablet */
        gap: 15px;
    }
}

/* Standard Mobile Viewport */
@media (max-width: 768px) {
    .ev-shop-grid { 
        grid-template-columns: 1fr; /* 1 column on mobile */
    }
    
    .ev-shop-image-box {
        height: 200px; /* Slightly shorter image area to save scroll space */
        padding: 15px;
    }
    
    .ev-price-current { 
        font-size: 26px; /* Scales down the stretched neon text */
        transform: scaleX(1.1); /* Slightly less stretch for smaller screens */
    }
    
    .ev-shop-title {
        font-size: 18px; /* Slightly larger title for easier reading on phones */
    }
}

/* Extra Small Mobile Viewport (under 480px) */
@media (max-width: 480px) {
    .ev-shop-actions {
        flex-direction: column; /* Stacks the Buy and Quote buttons on top of each other */
        gap: 12px;
    }
    
    .ev-shop-btn {
        width: 100%; /* Makes buttons full width for easy thumb tapping */
        padding: 14px 0; /* Taller tap target */
    }
}/* End custom CSS */