/*
================================================

Space Vanta Theme 1.0

Module:
Bundle Hero Preview Cart Extension

File:
public/bundle-template/bundle-hero/preview/cart.css

Version:
1.0

Responsibility:
Bundle Preview Cart Extension

Architecture:
Bundle Hero Preview
    ↓
Bundle Preview
    ↓
Bundle Preview Cart Extension

Does NOT control:
- Bundle App API
- BundleCart
- Bundle Add To Cart
- Native Cart mutation
- Global Cart Preview

================================================
*/


/* =================================================
   1. Bundle Preview Cart Variables
================================================= */

.sv-bundle-preview-cart {

    --sv-bpc-bg:
        #f8f5ef;

    --sv-bpc-surface:
        #fbf9f5;

    --sv-bpc-surface-soft:
        #eee8de;

    --sv-bpc-border:
        rgba(117, 106, 94, 0.20);

    --sv-bpc-border-soft:
        rgba(117, 106, 94, 0.13);

    --sv-bpc-text:
        #24221f;

    --sv-bpc-text-soft:
        #756e65;

    --sv-bpc-earth:
        #6b5848;

    --sv-bpc-metal:
        #d8d1c7;

}


/* =================================================
   2. Desktop Preview Panel Expansion
================================================= */

.sv-bundle-hero-preview.has-cart-preview .sv-bundle-hero-preview__panel {

    width:
        min(860px, 96vw);

    overflow:
        hidden;

}


/* =================================================
   3. Keep Existing Bundle Preview Content
   On The Right
================================================= */

.sv-bundle-hero-preview.has-cart-preview .sv-bundle-hero-preview__header,

.sv-bundle-hero-preview.has-cart-preview .sv-bundle-hero-preview__content {

    width:
        min(520px,
            calc(100% - 300px));

    margin-left:
        auto;

}


/* =================================================
   3-B. Preserve Preview Content Interaction
================================================= */

.sv-bundle-hero-preview.has-cart-preview .sv-bundle-hero-preview__content {

    position:
        relative;

    z-index:
        1;

    min-width:
        0;

    min-height:
        0;

    overflow-x:
        auto;

    overflow-y:
        auto;

}


/* =================================================
   4. Cart Extension
================================================= */

.sv-bundle-preview-cart {

    position:
        absolute;

    top: 36px;
    bottom: 36px;
    left: 36px;

    width:
        270px;

    z-index:
        2;

    display:
        flex;

    flex-direction:
        column;

    min-width: 0;
    min-height: 0;

    padding:
        22px;

    border:
        1px solid var(--sv-bpc-border);

    border-radius:
        18px 7px 18px 7px;

    background:
        linear-gradient(145deg,
            #fbf9f5 0%,
            #f3eee7 48%,
            #e7dfd4 100%);

    color:
        var(--sv-bpc-text);

    box-shadow:
        0 18px 38px rgba(55, 47, 39, 0.12),

        0 5px 12px rgba(55, 47, 39, 0.06),

        inset 0 1px 0 rgba(255, 255, 255, 0.88);

    opacity:
        0;

    transform:
        translateX(-18px) scaleX(0.985);

    transform-origin:
        right center;

    pointer-events:
        none;

    transition:
        opacity 320ms cubic-bezier(0.22, 1, 0.36, 1),

        transform 420ms cubic-bezier(0.22, 1, 0.36, 1);

    overflow:
        hidden;

}


/* =================================================
   5. Cart Extension Reflection
================================================= */

.sv-bundle-preview-cart::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(118deg,
            rgba(255, 255, 255, 0.26),
            transparent 30%,
            transparent 72%,
            rgba(94, 78, 63, 0.045));

}


/* =================================================
   6. Active Cart Extension
================================================= */

.sv-bundle-hero-preview.has-cart-preview .sv-bundle-preview-cart {

    opacity:
        1;

    transform:
        translateX(0) scaleX(1);

    pointer-events:
        auto;

}


/* =================================================
   7. Cart Header
================================================= */

.sv-bundle-preview-cart__header {

    position:
        relative;

    z-index:
        1;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        12px;

    padding-bottom:
        14px;

    border-bottom:
        1px solid var(--sv-bpc-border);

}


/* =================================================
   8. Cart Eyebrow
================================================= */

.sv-bundle-preview-cart__eyebrow {

    margin:
        0 0 7px;

    font-family:
        var(--sv-font-ui,
            var(--sv-font-brand));

    font-size:
        8px;

    font-weight:
        600;

    line-height:
        1;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;

    color:
        var(--sv-bpc-earth);

}


/* =================================================
   9. Cart Title
================================================= */

.sv-bundle-preview-cart__title {

    margin:
        0;

    font-family:
        var(--sv-font-bundle,
            var(--sv-font-brand));

    font-size:
        21px;

    font-weight:
        600;

    line-height:
        1;

    letter-spacing:
        -0.025em;

    color:
        var(--sv-bpc-text);

}


/* =================================================
   10. Item Count
================================================= */

.sv-bundle-preview-cart__count {

    flex:
        0 0 auto;

    min-width:
        28px;

    height:
        28px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid rgba(117, 106, 94, 0.18);

    border-radius:
        50%;

    background:
        linear-gradient(145deg,
            #faf8f3,
            #d8d1c7);

    color:
        var(--sv-bpc-text);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        9px;

    font-weight:
        600;

    line-height:
        1;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
}


/* =================================================
   11. Cart Items
================================================= */

.sv-bundle-preview-cart__items {

    position:
        relative;

    z-index:
        1;

    display:
        flex;

    flex-direction:
        column;

    gap:
        0;

    flex:
        1 1 auto;

    min-height:
        0;

    margin:
        14px 0;

    overflow-y:
        auto;

    overscroll-behavior:
        contain;

    scrollbar-width:
        thin;

}


/* =================================================
   12. Cart Item
================================================= */

.sv-bundle-preview-cart__item {

    display:
        grid;

    grid-template-columns:
        48px minmax(0, 1fr);

    gap:
        11px;

    align-items:
        center;

    min-width:
        0;

    padding:
        10px 0;

    border-bottom:
        1px solid var(--sv-bpc-border-soft);

}


/* =================================================
   13. Last Item
================================================= */

.sv-bundle-preview-cart__item:last-child {

    border-bottom:
        0;

}


/* =================================================
   14. Item Media
================================================= */

.sv-bundle-preview-cart__media {

    width:
        48px;

    height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    border:
        1px solid rgba(117, 106, 94, 0.17);

    border-radius:
        11px 4px 11px 4px;

    background:
        linear-gradient(145deg,
            #faf8f3,
            #d8d1c7);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.78);

}


/* =================================================
   15. Item Image
================================================= */

.sv-bundle-preview-cart__image {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

    object-position:
        center;

}


/* =================================================
   16. Item Content
================================================= */

.sv-bundle-preview-cart__content {

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

}


/* =================================================
   17. Item Title
================================================= */

.sv-bundle-preview-cart__item-title {

    margin:
        0;

    font-family:
        var(--sv-font-ui,
            var(--sv-font-brand));

    font-size:
        11px;

    font-weight:
        500;

    line-height:
        1.32;

    color:
        var(--sv-bpc-text);

    display:
        -webkit-box;

    -webkit-line-clamp:
        2;

    -webkit-box-orient:
        vertical;

    overflow:
        hidden;

}


/* =================================================
   18. Item Meta
================================================= */

.sv-bundle-preview-cart__meta {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        8px;

    font-family:
        var(--sv-font-ui,
            var(--sv-font-brand));

    font-size:
        9px;

    line-height:
        1.2;

    color:
        var(--sv-bpc-text-soft);

}


/* =================================================
   19. Item Quantity
================================================= */

.sv-bundle-preview-cart__quantity {

    white-space:
        nowrap;

}


/* =================================================
   20. Item Price
================================================= */

.sv-bundle-preview-cart__price {

    white-space:
        nowrap;

    font-weight:
        500;

    color:
        var(--sv-bpc-text);

}


/* =================================================
   21. Empty State
================================================= */

.sv-bundle-preview-cart__empty {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        120px;

    font-family:
        var(--sv-font-ui,
            var(--sv-font-brand));

    font-size:
        10px;

    line-height:
        1.5;

    letter-spacing:
        0.05em;

    color:
        var(--sv-bpc-text-soft);

    text-align:
        center;

}


/* =================================================
   22. Footer
================================================= */

.sv-bundle-preview-cart__footer {

    position:
        relative;

    z-index:
        1;

    flex:
        0 0 auto;

    padding-top:
        14px;

    border-top:
        1px solid var(--sv-bpc-border);

}


/* =================================================
   23. Total Row
================================================= */

.sv-bundle-preview-cart__total {

    display:
        flex;

    align-items:
        baseline;

    justify-content:
        space-between;

    gap:
        12px;

    margin-bottom:
        12px;

}


/* =================================================
   24. Total Label
================================================= */

.sv-bundle-preview-cart__total-label {

    font-family:
        var(--sv-font-ui,
            var(--sv-font-brand));

    font-size:
        8px;

    font-weight:
        600;

    line-height:
        1;

    letter-spacing:
        0.15em;

    text-transform:
        uppercase;

    color:
        var(--sv-bpc-earth);

}


/* =================================================
   25. Total Price
================================================= */

.sv-bundle-preview-cart__total-price {

    font-family:
        var(--sv-font-ui,
            var(--sv-font-brand));

    font-size:
        14px;

    font-weight:
        600;

    line-height:
        1;

    color:
        var(--sv-bpc-text);

}


/* =================================================
   26. View Cart
================================================= */

.sv-bundle-preview-cart__view {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    min-height:
        38px;

    padding:
        0 14px;

    border:
        1px solid rgba(117, 106, 94, 0.22);

    border-radius:
        999px;

    background:
        linear-gradient(135deg,
            #fffdf9,
            #d9d0c5);

    color:
        #302b26;

    font-family:
        var(--sv-font-ui,
            var(--sv-font-brand));

    font-size:
        8px;

    font-weight:
        600;

    line-height:
        1;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;

    text-decoration:
        none;

    box-shadow:
        0 5px 12px rgba(61, 48, 37, 0.08),

        inset 0 1px 0 rgba(255, 255, 255, 0.92);

    transition:
        transform 180ms cubic-bezier(0.22, 1, 0.36, 1),

        box-shadow 220ms ease,

        background 260ms ease;

}


/* =================================================
   27. View Cart Hover
================================================= */

@media (hover: hover) and (pointer: fine) {

    .sv-bundle-preview-cart__view:hover {

        transform:
            translateY(-1px);

        background:
            linear-gradient(135deg,
                #fffdfa,
                #cec3b7);

        box-shadow:
            0 7px 15px rgba(61, 48, 37, 0.11),

            inset 0 1px 0 rgba(255, 255, 255, 0.96);

    }

}


/* =================================================
   28. Mobile
================================================= */

@media (max-width: 768px) {


    .sv-bundle-hero-preview.has-cart-preview .sv-bundle-hero-preview__panel {

        width:
            100%;

        overflow-y:
            auto;

        overflow-x:
            hidden;

    }


    .sv-bundle-hero-preview.has-cart-preview .sv-bundle-hero-preview__header,

    .sv-bundle-hero-preview.has-cart-preview .sv-bundle-hero-preview__content {

        width:
            100%;

        margin-left:
            0;

    }


    .sv-bundle-hero-preview.has-cart-preview .sv-bundle-hero-preview__content {

        flex:
            0 0 auto;

        max-height:
            none;

        overflow-x:
            auto;

        overflow-y:
            hidden;

    }


    .sv-bundle-preview-cart {

        position:
            relative;

        top:
            auto;

        right:
            auto;

        bottom:
            auto;

        left:
            auto;

        width:
            100%;

        max-height:
            230px;

        flex:
            0 0 auto;

        margin-top:
            10px;

        padding:
            18px;

        border-radius:
            16px 6px 16px 6px;

        transform:
            translateY(12px) scale(0.985);

    }


    .sv-bundle-hero-preview.has-cart-preview .sv-bundle-preview-cart {

        transform:
            translateY(0) scale(1);

    }


    .sv-bundle-preview-cart__items {

        max-height:
            108px;

        flex:
            0 1 auto;

    }


    .sv-bundle-preview-cart__item {

        grid-template-columns:
            42px minmax(0, 1fr);

        gap:
            10px;

        padding:
            7px 0;

    }


    .sv-bundle-preview-cart__media {

        width:
            42px;

        height:
            42px;

    }


    .sv-bundle-preview-cart__item-title {

        font-size:
            10px;

    }


    .sv-bundle-preview-cart__total {

        margin-bottom:
            9px;

    }


    .sv-bundle-preview-cart__view {

        min-height:
            36px;

    }

}


/* =================================================
   29. Reduced Motion
================================================= */

@media (prefers-reduced-motion: reduce) {

    .sv-bundle-preview-cart {

        transition:
            none;

    }


    .sv-bundle-preview-cart__view {

        transition:
            none;

    }

}