/* Cross-Sell Section - Ensuring Specificity */
.cross-sell-products {
    margin-top: 0px;
	position: relative;
	top: 60px;
    padding-top: 10px;
	margin-bottom: 70px;
	background-color: transparent !important; /* Ensures no conflicting background */
    max-width: 100%; /* Ensure it does not exceed container */
    box-sizing: border-box; /* Ensure padding does not affect width */
    width: 100%;
}
    
/* Title Styling */
.cross-sell-products h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #333 !important;
    text-align: center;
}

/* Make the product list a vertical list */
#cross-sell-products ul.products {
    display: flex;
    flex-direction: column;  /* Change from row to column */
    align-items: center; /* Center items within the container */
    gap: 15px; /* Add spacing between items */
    padding: 0;
    margin: 0 auto; /* Center the list inside the container */
    list-style: none !important;
    width: 100%; /* Ensure it stays within the parent container */
    max-width: 100%;
    box-sizing: border-box;
}

/* Ensure each product takes full width */
#cross-sell-products ul.products li.product {
    width: 100%; /* Full width within the container */
    max-width: 600px; /* Reduce max width for better mobile layout */
    display: flex;
    flex-direction: row; /* Keep horizontal alignment */
    align-items: center;
    gap: 10px; /* Reduce gap for better spacing on mobile */
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    background: #fff;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: none !important;
    box-sizing: border-box;
}

/* Prevent unwanted hover effect */
#cross-sell-products ul.products li.product:hover {
    transform: none !important;
    box-shadow: none !important;
    background-color: #fff !important;
}

/* Remove conflicting pseudo-element styles */
#cross-sell-products ul.products li.product:not(.product-category)::before {
    background-color: transparent !important; /* Remove background causing hover issues */
    visibility: hidden !important;
    opacity: 0 !important;
    box-shadow: none !important;
    transition: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    position: static !important;
    content: none !important;
    z-index: -1 !important;
}

/* Ensure thumbnails maintain their intended size */
#cross-sell-products ul.products li.product .product-thumbnail img {
    width: 80px !important;  /* Reduce thumbnail size for mobile */
    height: auto !important;  /* Maintain aspect ratio */
    max-width: none !important; /* Prevent it from scaling down */
    border-radius: 4px;
    object-fit: cover;
}

/* Prevent Image Enlargement on Hover */
#cross-sell-products ul.products li.product:hover .product-thumbnail img {
    transform: scale(1) !important;
}

/* Align text and input field */
#cross-sell-products ul.products li.product .product-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Adjust input field styling */
#cross-sell-products ul.products li.product .cross-sell-quantity {
    width: 45px; /* Reduce width on mobile */
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    font-size: 0.9rem; /* Reduce font size for better fit */
}

/* Ensure product titles are aligned properly */
#cross-sell-products ul.products li.product h3 {
    margin: 0 0 5px 0;
    font-size: 1rem;
}

/* Price Styling */
#cross-sell-products ul.products li.product .price {
    font-weight: bold;
    font-size: 1rem;
    color: #444;
}

/* Responsive Adjustments for Mobile */
@media (max-width: 768px) {
    .cross-sell-products ul.products {
        flex-direction: column !important;
        align-items: center !important;
    }
    .cross-sell-products li.product {
        flex-direction: row !important; /* Ensure items remain aligned horizontally */
        align-items: center;
        max-width: 90% !important; /* Reduce max width for better mobile presentation */
    }
    .cross-sell-products ul.products li.product .product-thumbnail img {
        width: 70px !important; /* Further reduce thumbnail size on smaller screens */
    }
    .cross-sell-products ul.products li.product .cross-sell-quantity {
        width: 40px; /* Reduce input size for mobile */
    }
}