/* --- WLC Cart Upsell Styles (Version 1.4) --- */

/* Main container for the full-width section */
.wlc-upsell-container.full-width {
    padding: 2.5em 0; /* Only vertical padding */
    margin: 2em 0;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    clear: both;
}

/* Heading for the section */
.wlc-upsell-container h3 {
    margin-top: 0;
    margin-bottom: 1.5em;
    text-align: center;
    color: #801524; /* WLC Red */
    font-size: 1.8em;
    font-family: 'Righteous', sans-serif; /* Match brand font */
}

/* This is the new scrolling container */
.wlc-upsell-scroller {
    overflow-x: auto; /* This enables horizontal scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    padding: 0 20px 20px 20px; /* Add some padding so items don't touch the edges */
    margin: 0 -20px; /* Counteract padding to allow full-bleed scroll */
    scrollbar-width: thin; /* Firefox scrollbar style */
    scrollbar-color: #ccc #f8f9fa; /* Firefox scrollbar style */
}

/* Style for the scrollbar */
.wlc-upsell-scroller::-webkit-scrollbar {
    height: 8px;
}
.wlc-upsell-scroller::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.wlc-upsell-scroller::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}
.wlc-upsell-scroller::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}

/* The list that holds the products. It's now a flex container. */
.wlc-upsell-products {
    display: flex; /* This is the key to the horizontal layout */
    flex-wrap: nowrap; /* Prevent items from wrapping to the next line */
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Each individual product "card" */
.wlc-upsell-product {
    flex: 0 0 220px; /* Each item is a fixed width of 220px */
    text-align: center;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
}

/* Ensure images don't have extra margin */
.wlc-upsell-product img {
    margin: 0 auto 1em;
}

/* Product title, which is now a link */
.wlc-upsell-product h4 {
    font-size: 1em;
    margin: 0.5em 0;
    flex-grow: 1; /* Pushes the price and button to the bottom */
}
.wlc-upsell-product h4 a {
    text-decoration: none;
    color: #333;
}
.wlc-upsell-product h4 a:hover {
    color: #279D9E; /* WLC Teal on hover */
}

/* Product price */
.wlc-upsell-product .price {
    font-weight: bold;
    color: #333;
    margin-bottom: 1em;
}

/* The "Add to Cart" button */
.wlc-upsell-product .add_to_cart_button {
    width: 100%;
    box-sizing: border-box;
    padding: 10px; /* Ensure button text fits */
    white-space: nowrap; /* Prevent text from wrapping */
}

/* For MOBILE devices, we reduce the item width */
@media (max-width: 576px) {
    .wlc-upsell-product {
        flex: 0 0 160px; /* Make items smaller on mobile */
    }
    .wlc-upsell-container h3 {
        font-size: 1.5em;
    }
}