/**
 * Related Products Grid Styling
 * Fixes alignment issues with image sizes, titles, and buttons
 */

/* Target the related products grid */
.layout_shop_standard .w-grid,
.us_product_list.w-grid {
    display: grid !important;
}

/* Ensure all grid items have equal height */
.layout_shop_standard .w-grid-item,
.us_product_list .w-grid-item {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 300px !important; /* Reduced from 380px to accommodate smaller images */
}

/* Product image container - fixed height for consistency */
.layout_shop_standard .w-grid-item .post_image,
.us_product_list .w-grid-item .post_image,
.layout_shop_standard .w-grid-item .product-img,
.us_product_list .w-grid-item .product-img {
    height: 136px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    margin-bottom: 8px !important;
    background: #fff !important;
}

/* Product image - maintain aspect ratio, no cropping */
.layout_shop_standard .w-grid-item .post_image img,
.layout_shop_standard .w-grid-item img,
.us_product_list .w-grid-item .post_image img,
.us_product_list .w-grid-item img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 136px !important;
    object-fit: contain !important; /* Don't crop, show full image */
    object-position: center !important;
    margin: 0 !important;
    display: block !important;
}

/* Product title - allow 3 lines */
.layout_shop_standard .usg_post_title_1,
.us_product_list .usg_post_title_1 {
    min-height: 3.3em !important; /* Space for 3 lines */
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important; /* Max 3 lines */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    line-height: 1.1em !important;
    margin: 6px 0 6px 0 !important;
    text-align: left !important;
    font-size: 0.95rem !important;
}

/* Short description field - 3 lines max */
.layout_shop_standard .usg_product_field_2,
.us_product_list .usg_product_field_2 {
    font-size: 0.85rem !important;
    line-height: 1.3em !important;
    margin: 6px 0 8px 0 !important;
    color: #666 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 3.9em !important;
    flex-shrink: 0 !important;
}

/* Price field - larger and bolder */
.layout_shop_standard .usg_product_field_3,
.us_product_list .usg_product_field_3 {
    margin: 6px 0 !important;
    flex-shrink: 0 !important;
    font-weight: 600 !important;
    font-size: 1.05rem !important;
}

/* Add to cart button - always at bottom */
.layout_shop_standard .usg_add_to_cart_1,
.us_product_list .usg_add_to_cart_1 {
    margin-top: auto !important; /* Push button to bottom */
    flex-shrink: 0 !important;
    padding-top: 8px !important;
}

/* Button styling for consistency */
.layout_shop_standard .usg_add_to_cart_1 .button,
.layout_shop_standard .usg_add_to_cart_1 a,
.us_product_list .usg_add_to_cart_1 .button,
.us_product_list .usg_add_to_cart_1 a {
    width: 100% !important;
    text-align: center !important;
    display: block !important;
    padding: 10px 16px !important; /* Reduced padding */
    min-height: 42px !important; /* Slightly reduced */
}

/* Remove excessive padding inside product cards */
.layout_shop_standard .w-grid-item > div,
.us_product_list .w-grid-item > div {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    background: #fff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 4px !important;
}

/* Reduce grid gap for tighter layout */
.layout_shop_standard,
.us_product_list {
    --grid-gap: 12px !important;
    gap: var(--grid-gap) !important;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .layout_shop_standard .w-grid-item,
    .us_product_list .w-grid-item {
        min-height: 280px !important;
    }
}

@media (max-width: 767px) {
    .layout_shop_standard .w-grid-item,
    .us_product_list .w-grid-item {
        min-height: 300px !important;
    }
}

/* Fix for cropped images - ensure full image is shown */
.layout_shop_standard .w-grid-item img[src*="woocommerce"],
.us_product_list .w-grid-item img[src*="woocommerce"] {
    object-fit: contain !important;
}

/* Remove width/height attributes and ensure max-width */
.layout_shop_standard .w-grid-item img,
.us_product_list .w-grid-item img {
    max-width: 100% !important;
}