/* Cart Container Layout - Force vertical alignment to top */
.cart-container {
    display: flex !important;
    align-items: flex-start !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-left: 0;
    margin-right: 0;
}

/* Hide/remove rewards container if it exists */
.cart-container .rewards {
    display: none;
}

/* Cart Summary - Always at top right, aligned with first item */
.cart-summary {
    align-self: flex-start !important;
    position: sticky;
    top: 20px;
    order: 2; /* Ensure it's on the right */
    margin-top: 0 !important; /* Align with cart items */
}

/* Align summary title with cart items - remove any default spacing */
.cart-summary .summary.title {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 16px;
}

/* Remove any top margin/padding from summary blocks */
.cart-summary > * {
    margin-top: 0 !important;
}

.cart-summary > *:first-child {
    padding-top: 0 !important;
}

/* Cart Form - On the left, full width available */
.checkout.cart.form,
[name="checkout.cart.form"] {
    flex: 1;
    min-width: 0;
    order: 1; /* Ensure it's on the left */
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Remove any default margins from cart items container */
.cart.items {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Ensure first cart item starts at same position as summary */
.cart.items > .item:first-child,
.cart.items > tbody > tr:first-child {
    margin-top: 0 !important;
}

/* Override any centering from other styles */
.cart-container > * {
    align-self: flex-start !important;
    margin-top: 0 !important;
}

/* Force both form and summary to start at exactly same position */
.cart-container .checkout.cart.form,
.cart-container [name="checkout.cart.form"],
.cart-container .cart-summary {
    position: relative;
    top: 0 !important;
}

@media (max-width: 992px) {
    .cart-container {
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0 12px !important;
        margin: 0 !important;
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
    }

    .cart-summary {
        position: relative;
        top: 0;
        width: 100%;
        order: 2;
        padding: 0 !important;
        margin: 0 !important;
        margin-top: 8px !important;
        box-sizing: border-box;
    }

    .checkout.cart.form,
    [name="checkout.cart.form"] {
        order: 1;
        width: 100%;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box;
    }

    /* Ensure no horizontal overflow */
    .cart.items {
        width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    /* Prevent any element from overflowing */
    .cart-container * {
        max-width: 100%;
        box-sizing: border-box;
    }
}