/* ======================================
   WooCommerce Shop & Product Pages
   Product listing and single product page styles
   ====================================== */

/* Style product list items on shop page */
body.woocommerce-shop .products li.product {
    background-color: #ffffff !important;
    border: 1px solid var(--color-section-border, #e5e5e5) !important;
}

/* Change grid gap for products on shop page */
body.woocommerce-shop .wc-columns-container .products,
body.woocommerce-shop .woocommerce .related ul.products,
body.woocommerce-shop .woocommerce .up-sells ul.products {
    grid-gap: 25px !important;
}

/* Product button margin - Removed (only navigation buttons are styled) */

/* Hide br element above buttons in product list items */
.woocommerce ul.products li.product .wcvendors_sold_by_in_loop + br {
    display: none !important;
}

/* Ensure consistent image display on mobile and tablet */
@media (max-width: 1024px) {
    .woocommerce ul.products li.product .inside-wc-product-image {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 250px !important;
        height: auto !important;
    }
    
    .woocommerce ul.products li.product .inside-wc-product-image img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
        display: block !important;
    }
}

/* Hide shop info (logo and name) on vendor shop pages */
body[class*="vendor-"] .info,
body.woocommerce-shop .info,
body.woocommerce-page .info,
.woocommerce-shop .info,
.woocommerce-page .info,
body[class*="vendor-"] .info .avatar,
body[class*="vendor-"] .info .about,
body.woocommerce-shop .info .avatar,
body.woocommerce-shop .info .about,
body.woocommerce-page .info .avatar,
body.woocommerce-page .info .about {
    display: none !important;
}

/* Hide shop meta (rating, phone, address, sales) on vendor shop pages */
body[class*="vendor-"] .meta,
body.woocommerce-shop .meta,
body.woocommerce-page .meta,
.woocommerce-shop .meta,
.woocommerce-page .meta,
body[class*="vendor-"] .meta .rating,
body[class*="vendor-"] .meta .phone,
body[class*="vendor-"] .meta .address,
body[class*="vendor-"] .meta .sales,
body.woocommerce-shop .meta .rating,
body.woocommerce-shop .meta .phone,
body.woocommerce-shop .meta .address,
body.woocommerce-shop .meta .sales,
body.woocommerce-page .meta .rating,
body.woocommerce-page .meta .phone,
body.woocommerce-page .meta .address,
body.woocommerce-page .meta .sales {
    display: none !important;
}