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

Space Vanta Theme 1.0

Module:
Cart Preview

File:
public/cart/cs/cart-preview.css

Version:
CART-PREVIEW-005

Purpose:
Global Cart Preview visual system.

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


/* =====================================================
   01. ROOT
   ===================================================== */

.sv-cart-preview {

    --sv-cart-preview-bg:
        rgba(247, 246, 242, 0.97);

    --sv-cart-preview-border:
        rgba(96, 101, 108, 0.32);

    --sv-cart-preview-line:
        rgba(88, 94, 101, 0.20);

    --sv-cart-preview-text:
        rgba(31, 34, 38, 0.94);

    --sv-cart-preview-muted:
        rgba(31, 34, 38, 0.58);

    --sv-cart-preview-metal:
        rgba(137, 142, 149, 0.68);

    position: fixed;

    top: 0;
    left: 0;

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

    box-sizing: border-box;

    padding: 20px;

    background:
        var(--sv-cart-preview-bg);

    border:
        1px solid var(--sv-cart-preview-border);

    box-shadow:
        0 18px 46px rgba(20, 24, 28, 0.16);

    backdrop-filter:
        blur(12px);

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

    z-index: 1000;

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(-6px);

    transition:
        opacity 180ms ease,
        transform 180ms ease,
        visibility 180ms ease;

    pointer-events: none;

}


/* =====================================================
   02. VISIBLE
   ===================================================== */

.sv-cart-preview.is-visible {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);

    pointer-events: auto;

}


/* =====================================================
   03. CART POINTER
   ===================================================== */

.sv-cart-preview::before {

    content: "";

    position: absolute;

    top: -7px;

    left:
        var(--sv-cart-preview-arrow-left, 50%);

    width: 12px;
    height: 12px;

    background:
        var(--sv-cart-preview-bg);

    border-left:
        1px solid var(--sv-cart-preview-border);

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

    transform:
        translateX(-50%) rotate(45deg);

}


/* =====================================================
   04. HEADER
   ===================================================== */

.sv-cart-preview__header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    padding-bottom: 12px;

    border-bottom:
        1px solid var(--sv-cart-preview-line);

}


.sv-cart-preview__title {

    font-size: 14px;

    line-height: 1.35;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

    color:
        var(--sv-cart-preview-text);

}


.sv-cart-preview__close {

    width: 28px;
    height: 28px;

    padding: 0;

    border: 0;

    background: transparent;

    color:
        var(--sv-cart-preview-muted);

    font-size: 22px;

    line-height: 1;

    cursor: pointer;

}


.sv-cart-preview__close:hover {

    color:
        var(--sv-cart-preview-text);

}


/* =====================================================
   05. META
   ===================================================== */

.sv-cart-preview__meta {

    padding-top: 10px;

    padding-bottom: 10px;

    font-size: 11px;

    line-height: 1.4;

    letter-spacing:
        0.04em;

    color:
        var(--sv-cart-preview-muted);

}


/* =====================================================
   06. ITEMS
   ===================================================== */

.sv-cart-preview__items {

    max-height: 310px;

    overflow-y: auto;

    overflow-x: hidden;

    scrollbar-width: thin;

}


.sv-cart-preview__item {

    display: grid;

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

    gap: 12px;

    align-items: center;

    padding: 12px 0;

    border-bottom:
        1px solid var(--sv-cart-preview-line);

}


.sv-cart-preview__item:first-child {

    padding-top: 4px;

}


.sv-cart-preview__item-image {

    width: 58px;
    height: 58px;

    overflow: hidden;

    border:
        1px solid rgba(96, 101, 108, 0.26);

}


.sv-cart-preview__item-image img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

}


.sv-cart-preview__item-info {

    min-width: 0;

}


.sv-cart-preview__item-title {

    overflow: hidden;

    font-size: 12px;

    line-height: 1.45;

    color:
        var(--sv-cart-preview-text);

    text-overflow: ellipsis;

    white-space: nowrap;

}


.sv-cart-preview__item-variant {

    margin-top: 3px;

    overflow: hidden;

    font-size: 10px;

    line-height: 1.35;

    letter-spacing:
        0.025em;

    color:
        var(--sv-cart-preview-muted);

    text-overflow: ellipsis;

    white-space: nowrap;

}


.sv-cart-preview__item-quantity {

    margin-top: 4px;

    font-size: 10px;

    line-height: 1.4;

    letter-spacing:
        0.04em;

    color:
        var(--sv-cart-preview-muted);

}


.sv-cart-preview__item-price {

    font-size: 11px;

    line-height: 1.4;

    white-space: nowrap;

    color:
        var(--sv-cart-preview-text);

}


.sv-cart-preview__empty {

    padding: 24px 0;

    font-size: 12px;

    color:
        var(--sv-cart-preview-muted);

}


/* =====================================================
   07. SHIPPING BENEFIT
   ===================================================== */

.sv-cart-preview__shipping {

    margin-top: 12px;

    padding-top: 12px;

    border-top:
        1px solid var(--sv-cart-preview-line);

}


.sv-cart-preview__shipping-label {

    margin-bottom: 4px;

    font-size: 9px;

    line-height: 1.3;

    letter-spacing:
        0.12em;

    color:
        var(--sv-cart-preview-muted);

}


.sv-cart-preview__shipping-text {

    font-size: 11px;

    line-height: 1.45;

    letter-spacing:
        0.02em;

    color:
        var(--sv-cart-preview-text);

}


/* =====================================================
   08. FOOTER
   ===================================================== */

.sv-cart-preview__footer {

    margin-top: 14px;

    padding-top: 14px;

    border-top:
        1px solid var(--sv-cart-preview-line);

}


.sv-cart-preview__total {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

}


.sv-cart-preview__total-label {

    font-size: 10px;

    line-height: 1.4;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

    color:
        var(--sv-cart-preview-muted);

}


.sv-cart-preview__total-value {

    font-size: 14px;

    line-height: 1.4;

    color:
        var(--sv-cart-preview-text);

}


.sv-cart-preview__actions {

    margin-top: 14px;

}


.sv-cart-preview__view-cart {

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 40px;

    box-sizing: border-box;

    border:
        1px solid rgba(96, 101, 108, 0.46);

    color:
        var(--sv-cart-preview-text);

    text-decoration: none;

    font-size: 11px;

    line-height: 1.4;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

    transition:
        background 160ms ease,
        border-color 160ms ease;

}


.sv-cart-preview__view-cart:hover {

    background:
        rgba(120, 126, 134, 0.08);

    border-color:
        rgba(96, 101, 108, 0.68);

}


/* =====================================================
   09. MOBILE
   ===================================================== */

@media (max-width: 767px) {

    .sv-cart-preview {

        width:
            calc(100vw - 24px);

        max-width:
            calc(100vw - 24px);

        padding: 16px;

    }


    .sv-cart-preview__items {

        max-height: 270px;

    }


    .sv-cart-preview__item {

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

        gap: 10px;

    }


    .sv-cart-preview__item-image {

        width: 52px;
        height: 52px;

    }


}


/* =====================================================
   10. SMALL MOBILE
   ===================================================== */

@media (max-width: 380px) {

    .sv-cart-preview {

        width:
            calc(100vw - 16px);

        max-width:
            calc(100vw - 16px);

        padding: 14px;

    }


    .sv-cart-preview__items {

        max-height: 250px;

    }

}


/* =====================================================
   11. REDUCED MOTION
   ===================================================== */

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

    .sv-cart-preview {

        transition: none;

    }

}