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

Space Vanta Theme 1.0

Module:
Cart Preview

Version:
CART-UI-002

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


/* =========================
   ROOT
========================== */

.sv-cart-preview {
    position: fixed;

    /*
     * Position is controlled by
     * cart-preview.js.
     *
     * Default values are only
     * safe fallbacks before the
     * Cart Anchor is measured.
     */

    top: 80px;
    right: 24px;

    width: 390px;
    max-width: calc(100vw - 32px);

    z-index: 1000;

    box-sizing: border-box;

    padding: 20px;

    background:
        rgba(247, 246, 242, .97);

    border:
        1px solid rgba(23, 23, 23, .13);

    box-shadow:
        0 18px 50px rgba(23, 23, 23, .12),
        0 2px 8px rgba(23, 23, 23, .06);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(-8px) scale(.97);

    transform-origin:
        top right;

    pointer-events: none;

    transition:
        opacity .26s ease,
        transform .32s cubic-bezier(.22, .8, .25, 1),
        visibility .26s ease;

}


/* =========================
   VISIBLE
========================== */

.sv-cart-preview.is-visible {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0) scale(1);

    pointer-events: auto;

}


/* =========================
   TOP OPTICAL LINE
========================== */

.sv-cart-preview::before {

    content: "";

    position: absolute;

    top: -1px;
    left: 18px;
    right: 18px;

    height: 1px;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(110, 125, 145, .38),
            transparent);

    pointer-events: none;

}


/* =========================
   HEADER
========================== */

.sv-cart-preview__header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    margin-bottom: 18px;

}


.sv-cart-preview__heading {

    display: flex;

    align-items: baseline;

    gap: 10px;

}


.sv-cart-preview__title {

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

    font-size: 13px;

    line-height: 1;

    letter-spacing:
        .22em;

    font-weight: 600;

    color:
        #24282D;

}


.sv-cart-preview__meta {

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

    font-size: 9px;

    line-height: 1;

    letter-spacing:
        .12em;

    color:
        #7B8188;

}


.sv-cart-preview__close {

    width: 24px;
    height: 24px;

    margin:
        -4px -4px 0 0;

    padding: 0;

    border: 0;

    background: transparent;

    color:
        #777D84;

    font-size: 20px;

    line-height: 20px;

    font-weight: 300;

    cursor: pointer;

    transition:
        color .2s ease,
        transform .2s ease;

}


.sv-cart-preview__close:hover {

    color:
        #25292E;

    transform:
        rotate(90deg);

}


/* =========================
   ITEMS
========================== */

.sv-cart-preview__items {

    display: flex;

    flex-direction: column;

    gap: 13px;

    max-height: 310px;

    overflow-y: auto;

    overscroll-behavior:
        contain;

}


.sv-cart-preview__items::-webkit-scrollbar {

    width: 3px;

}


.sv-cart-preview__items::-webkit-scrollbar-thumb {

    background:
        rgba(80, 88, 96, .22);

}


/* =========================
   ITEM
========================== */

.sv-cart-preview__item {

    display: grid;

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

    gap: 12px;

    align-items: center;

    min-width: 0;

}


.sv-cart-preview__image-wrap {

    width: 58px;
    height: 58px;

    overflow: hidden;

    background:
        #ECEBE7;

    border:
        1px solid rgba(23, 23, 23, .08);

}


.sv-cart-preview__image {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

}


.sv-cart-preview__info {

    min-width: 0;

}


.sv-cart-preview__item-title {

    display: block;

    overflow: hidden;

    color:
        #25292E;

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

    font-size: 12px;

    line-height: 1.35;

    text-decoration: none;

    white-space: nowrap;

    text-overflow: ellipsis;

}


.sv-cart-preview__item-title:hover {

    text-decoration:
        underline;

    text-underline-offset:
        3px;

}


.sv-cart-preview__variant {

    margin-top: 3px;

    overflow: hidden;

    color:
        #858A90;

    font-size: 10px;

    line-height: 1.35;

    white-space: nowrap;

    text-overflow: ellipsis;

}


.sv-cart-preview__quantity {

    margin-top: 4px;

    color:
        #8B9096;

    font-size: 10px;

    line-height: 1;

}


.sv-cart-preview__item-price {

    white-space: nowrap;

    color:
        #33383E;

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

    font-size: 11px;

    line-height: 1;

}


/* =========================
   EMPTY
========================== */

.sv-cart-preview__empty {

    padding:
        30px 10px;

    text-align: center;

    color:
        #7E8389;

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

    font-size: 10px;

    letter-spacing:
        .15em;

}


/* =========================
   FOOTER
========================== */

.sv-cart-preview__footer {

    margin-top: 18px;

    padding-top: 15px;

    border-top:
        1px solid rgba(23, 23, 23, .10);

}


.sv-cart-preview__total-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 13px;

}


.sv-cart-preview__total-label {

    color:
        #777D84;

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

    font-size: 9px;

    letter-spacing:
        .16em;

}


.sv-cart-preview__total {

    color:
        #25292E;

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

    font-size: 13px;

    font-weight: 600;

}


.sv-cart-preview__view-cart {

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 40px;

    border:
        1px solid rgba(23, 23, 23, .18);

    color:
        #34393F;

    background:
        rgba(255, 255, 255, .42);

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

    font-size: 10px;

    letter-spacing:
        .18em;

    text-decoration: none;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;

}


.sv-cart-preview__view-cart:hover {

    background:
        rgba(255, 255, 255, .82);

    border-color:
        rgba(23, 23, 23, .28);

    transform:
        translateY(-1px);

}


/* =========================
   MOBILE
========================== */

@media (max-width: 767px) {

    .sv-cart-preview {

        /*
         * JS controls top/right based
         * on the actual Mobile Cart Anchor.
         */

        top: 72px;
        right: 12px;
        left: auto;

        width: min(390px,
                calc(100vw - 24px));

        max-width: none;

        padding: 17px;

        transform-origin:
            top right;

    }




    .sv-cart-preview__items {

        max-height:
            280px;

    }


    .sv-cart-preview__item {

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

        gap: 10px;

    }


    .sv-cart-preview__image-wrap {

        width: 54px;
        height: 54px;

    }

}


/* =========================
   REDUCED MOTION
========================== */

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

    .sv-cart-preview {

        transition:
            opacity .15s ease,
            visibility .15s ease;

        transform:
            none;

    }

    .sv-cart-preview.is-visible {

        transform:
            none;

    }

}