/**
 * Pause Customizations - Related Products Styles
 *
 * Styles for WooCommerce related products, upsells, and cross-sells sections.
 * Uses GeneratePress CSS variables directly.
 *
 * @package Pause_Customizations
 * @version 1.1.0
 */

/* ==========================================================================
   Related Products, Upsells & Cross-sells - Common Styles
   ========================================================================== */

/**
 * Target all product recommendation sections:
 * - .related.products (Related Products)
 * - .upsells.products (Upsells)
 * - .cross-sells (Cross-sells on cart page)
 */

 /* Grid layout - equal height items with 40px gap */
.woocommerce .related.products,
.woocommerce .upsells.products,
.woocommerce .cross-sells {
    margin-top: 60px;

}

/* Grid layout - equal height items with 40px gap */
.woocommerce .related.products ul.products,
.woocommerce .upsells.products ul.products,
.woocommerce .cross-sells ul.products {
    display: grid;
    gap: 40px;
    align-items: stretch;
}

/* ==========================================================================
   Product Item Box Styling
   ========================================================================== */

/* Product item container with border */
.woocommerce .related.products ul.products li.product,
.woocommerce .upsells.products ul.products li.product,
.woocommerce .cross-sells ul.products li.product {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 15px;
    border: 1px solid var(--base, #f0f0f0);
    background: var(--base-3, #ffffff);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effect for product boxes */
.woocommerce .related.products ul.products li.product:hover,
.woocommerce .upsells.products ul.products li.product:hover,
.woocommerce .cross-sells ul.products li.product:hover {
    border-color: var(--accent-2, #6a85bd);
}

/* ==========================================================================
   Product Title Styling
   ========================================================================== */

/* Product name - 16px font size */
.woocommerce .related.products ul.products li.product .woocommerce-loop-product__title,
.woocommerce .upsells.products ul.products li.product .woocommerce-loop-product__title,
.woocommerce .cross-sells ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px;
    line-height: 1.3;
    margin-bottom: auto;
}

/* ==========================================================================
   Price Styling - Vertical Alignment to Bottom
   ========================================================================== */

/* Price container - push to bottom with auto margin */
.woocommerce .related.products ul.products li.product .price,
.woocommerce .upsells.products ul.products li.product .price,
.woocommerce .cross-sells ul.products li.product .price {
    display: block;
    margin-top: auto;
    margin-bottom: 0px;
    padding-top: 10px;
    font-size: 24px;
    line-height: 1.2;
}

/* Price amount styling 
.woocommerce .related.products ul.products li.product .price .woocommerce-Price-amount,
.woocommerce .upsells.products ul.products li.product .price .woocommerce-Price-amount,
.woocommerce .cross-sells ul.products li.product .price .woocommerce-Price-amount {
    font-size: 24px;
}*/

/* Sale price styling - keep original price smaller */
.woocommerce .related.products ul.products li.product .price del,
.woocommerce .upsells.products ul.products li.product .price del,
.woocommerce .cross-sells ul.products li.product .price del {
    font-size: 18px;
    font-weight: 400;
    opacity: 0.7;
}

/* Current sale price emphasis */
.woocommerce .related.products ul.products li.product .price ins,
.woocommerce .upsells.products ul.products li.product .price ins,
.woocommerce .cross-sells ul.products li.product .price ins {
    text-decoration: none;
}

/* ==========================================================================
   Add to Cart Button Alignment
   ========================================================================== */

/* Ensure button stays at bottom */
.woocommerce .related.products ul.products li.product .button,
.woocommerce .upsells.products ul.products li.product .button,
.woocommerce .cross-sells ul.products li.product .button {
    margin-top: 15px;
    align-self: stretch;
    text-align: center;
}

/* ==========================================================================
   Product Image Spacing
   ========================================================================== */

/* Image wrapper margin adjustment */
.woocommerce .related.products ul.products li.product a img,
.woocommerce .upsells.products ul.products li.product a img,
.woocommerce .cross-sells ul.products li.product a img {
    margin-bottom: 10px;
}

/* ==========================================================================
   Section Headings
   ========================================================================== */

/* Related/Upsells/Cross-sells section titles */
.woocommerce .related.products > h2,
.woocommerce .upsells.products > h2,
.woocommerce .cross-sells > h2 {
    margin-bottom: 20px;
    font-size: 26px;
    font-weight: 700;
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 899px) {
    /* Reduce gap on mobile */
    .woocommerce .related.products ul.products,
    .woocommerce .upsells.products ul.products,
    .woocommerce .cross-sells ul.products {
        gap: 20px;
    }

    /* Smaller price on mobile */
    .woocommerce .related.products ul.products li.product .price,
    .woocommerce .upsells.products ul.products li.product .price,
    .woocommerce .cross-sells ul.products li.product .price,
    .woocommerce .related.products ul.products li.product .price .woocommerce-Price-amount,
    .woocommerce .upsells.products ul.products li.product .price .woocommerce-Price-amount,
    .woocommerce .cross-sells ul.products li.product .price .woocommerce-Price-amount {
        font-size: 20px;
    }

    /* Adjust padding on mobile */
    .woocommerce .related.products ul.products li.product,
    .woocommerce .upsells.products ul.products li.product,
    .woocommerce .cross-sells ul.products li.product {
        padding: 10px;
    }
}