.elementor-396 .elementor-element.elementor-element-1e5c070{--display:flex;}.elementor-396 .elementor-element.elementor-element-5b9441d4.xpro-widget-bg-overlay:before{transition:background 0.3s;}/* Start custom CSS for shortcode, class: .elementor-element-5b9441d4 *//* Product Grid */
.woocommerce ul.products{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

/* Product Card */
.woocommerce ul.products li.product{
    background:#fff;
    border:1px solid #ececec;
    border-radius:18px;
    overflow:visible; /* was hidden — that was clipping wrapped titles/subtitles at the card edge */
    padding:15px;
    transition:.3s ease;
    box-shadow:0 5px 15px rgba(0,0,0,.05);
    position:relative;
    display:flex;
    flex-direction:column;
    height:100%; /* lets grid stretch all cards to equal height without clipping content */
}
.woocommerce ul.products li.product:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 35px rgba(0,0,0,.12);
}

/* Links inside card */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{
    display:block;
}
.woocommerce ul.products li.product .woocommerce-loop-product__link,
.woocommerce ul.products li.product a{
    text-decoration:none;
    color:inherit;
}

/* Image — fills the gray box instead of floating small inside it */
.woocommerce ul.products li.product img{
    background:#f2f2f2;
    border-radius:14px;
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover; /* was contain — this fills the whole box instead of floating small inside it */
    padding:0; /* was 8px — no dead space, product fills the frame edge to edge */
    margin-bottom:14px;
    box-sizing:border-box;
    display:block;
}

/* Eyebrow / category label (e.g. "NEW TECHNOLOGY") */
.product-eyebrow{
    display:block;
    font-size:11px;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
    color:#7b5cff;
    margin-bottom:10px;
}

/* Title + discount row */
.product-title-row{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:8px;
    margin-bottom:6px;
}

/* Title — reserves space for up to 2 lines so it never overlaps the subtitle below */
.woocommerce-loop-product__title{
    font-size:18px;
    font-weight:700;
    margin:0 0 6px 0;
    color:#111;
    line-height:1.3;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    min-height:2.6em;
}

/* Discount % text (top-right of title row) */
.onsale-text{
    color:#ff3b30 !important;
    font-weight:700;
    font-size:14px;
    white-space:nowrap;
}

/* Sale badge — small circle sitting inside the top-right corner of the image */
.onsale{
    background:#ff3b30 !important;
    color:#fff !important;
    border-radius:50% !important;
    width:48px;
    height:48px;
    padding:0 !important;
    font-weight:700;
    font-size:12px;
    text-transform:uppercase;
    display:flex !important;
    align-items:center;
    justify-content:center;
    text-align:center;
    line-height:1.1;
    position:absolute !important;
    top:24px;
    left:24px;
    z-index:2;
    white-space:normal;
}

/* Subtitle removed — was interfering with title display */
.product-subtitle{
    display:none;
}

/* Swatches + rating row */
.product-meta-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:14px;
}
.color-swatches{
    display:flex;
    align-items:center;
    gap:6px;
}
.color-swatches span{
    width:18px;
    height:18px;
    border-radius:50%;
    border:1px solid #ddd;
    display:inline-block;
}
.color-swatches .more{
    font-size:12px;
    color:#666;
    margin-left:2px;
}
.rating{
    display:flex;
    align-items:center;
    gap:4px;
    font-size:14px;
    font-weight:600;
    color:#111;
}
.rating .star{ color:#ffb400; }

/* Price + Buy Now row */
.product-bottom-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:auto; /* pins price/button row to the bottom of the card */
}
.price{
    font-size:22px;
    font-weight:700;
    color:#000;
    display:flex;
    flex-direction:column-reverse;
    gap:2px;
}
.price del{
    color:#999;
    font-size:14px;
    font-weight:400;
    order:2;
}
.price ins{
    text-decoration:none;
}

/* Buy Now / Add to Cart button — small pill, right-aligned, not full width */
.button,
.add_to_cart_button{
    width:auto !important;
    display:inline-block;
    background:#000 !important;
    color:#fff !important;
    border-radius:50px !important;
    padding:12px 26px !important;
    font-weight:600;
    font-size:14px;
    text-align:center;
    transition:.3s;
}
.button:hover,
.add_to_cart_button:hover{
    background:#333 !important;
}/* End custom CSS */