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

Space Vanta Theme 1.0

Module:
Cart Layout

Version:
1.0

Path:
public/cart/cs/layout.css

Phase:
CART-VISUAL-001

Responsibilities:

- Cart page spatial structure
- Cart item grid
- Desktop / Mobile layout
- Image / Information relationship
- Reflective dividers
- Summary placement

Does NOT handle:

- Product information styling
- Pricing
- Quantity
- Remove
- Checkout button styling
- Continue Shopping button styling
- Cart data / mutation logic

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


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

.sv-cart {
    width: 100%;
    max-width: var(--sv-container-max);
    margin: 0 auto;

    padding:
        var(--sv-space-8) var(--sv-container-gutter-desktop) var(--sv-space-10);

    color:
        var(--sv-color-text-primary);
}


/* =========================================================
   02. CART ITEMS AREA
   ========================================================= */

.sv-cart-items {
    width: 100%;
}

.sv-cart-items__list {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap:
        var(--sv-space-8);
}


/* =========================================================
   03. CART ITEM
   ========================================================= */

.sv-cart-item {

    position: relative;

    display: grid;

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

    column-gap:
        clamp(34px, 5vw, 72px);

    align-items: stretch;

    width: 100%;

    min-width: 0;
}


/* =========================================================
   04. IMAGE / INFORMATION DIVIDER
   ========================================================= */

/*
 * The divider is intentionally NOT a conventional border.
 *
 * It should be perceived as a spatial boundary rather than
 * as a visible rule.
 */

.sv-cart-item__divider {

    position: absolute;

    top: 4%;
    bottom: 4%;

    left:
        calc(42% + (clamp(34px, 5vw, 72px) / 2));

    width: 1px;

    pointer-events: none;

    background:
        linear-gradient(to bottom,
            transparent 0%,
            rgba(104, 112, 91, 0.08) 18%,
            rgba(104, 112, 91, 0.20) 50%,
            rgba(104, 112, 91, 0.08) 82%,
            transparent 100%);

    filter:
        blur(0.35px);

    opacity: 0.72;

    box-shadow:
        0 0 10px rgba(104, 112, 91, 0.055);
}


/* Soft secondary light layer */

.sv-cart-item__divider::after {

    content: "";

    position: absolute;

    top: 8%;
    bottom: 8%;

    left: -3px;

    width: 7px;

    background:
        linear-gradient(to bottom,
            transparent,
            rgba(104, 112, 91, 0.045),
            transparent);

    filter:
        blur(3px);

    opacity: 0.75;
}


/* =========================================================
   05. INFORMATION POSITION
   ========================================================= */

.sv-cart-item__information {

    position: relative;

    min-width: 0;

    /*
     * Information intentionally moves slightly away from
     * the divider without moving the image.
     */
    padding-left:
        clamp(8px, 1vw, 18px);
}


/* =========================================================
   06. CART ITEM ACTION AREA
   ========================================================= */

.sv-cart-item__actions {

    /*
     * Remove is visually attached to the information area.
     * Detailed positioning is handled by item.css.
     */
    min-width: 0;
}


/* =========================================================
   07. SUMMARY
   ========================================================= */

.sv-cart-summary {

    position: relative;

    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;

    margin-top:
        var(--sv-space-10);

    padding-top:
        var(--sv-space-8);
}


/* =========================================================
   08. SUMMARY DIVIDER
   ========================================================= */

.sv-cart-summary__divider {

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 1px;

    pointer-events: none;

    background:
        linear-gradient(to right,
            transparent 0%,
            rgba(104, 112, 91, 0.06) 15%,
            rgba(104, 112, 91, 0.20) 50%,
            rgba(104, 112, 91, 0.06) 85%,
            transparent 100%);

    filter:
        blur(0.25px);

    opacity: 0.82;

    box-shadow:
        0 0 12px rgba(104, 112, 91, 0.045);
}


/* Soft halo */

.sv-cart-summary__divider::after {

    content: "";

    position: absolute;

    top: -3px;
    left: 12%;
    right: 12%;

    height: 7px;

    background:
        linear-gradient(to right,
            transparent,
            rgba(104, 112, 91, 0.035),
            transparent);

    filter:
        blur(4px);

    opacity: 0.8;
}


/* =========================================================
   09. SUMMARY ACTION GROUP
   ========================================================= */

.sv-cart-summary__actions {

    display: flex;

    align-items: center;
    justify-content: center;

    gap:
        var(--sv-space-4);

    width: 100%;

    margin-top:
        var(--sv-space-6);
}


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

@media (max-width: 767px) {

    .sv-cart {

        padding:
            var(--sv-space-6) var(--sv-container-gutter-mobile) var(--sv-space-8);
    }


    .sv-cart-items__list {

        gap:
            var(--sv-space-8);
    }


    .sv-cart-item {

        display: grid;

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

        gap:
            var(--sv-space-5);
    }


    /*
     * Mobile no longer uses a vertical image /
     * information divider.
     *
     * The separation becomes horizontal.
     */

    .sv-cart-item__divider {

        position: relative;

        top: auto;
        bottom: auto;
        left: auto;

        width: 100%;
        height: 1px;

        margin:
            var(--sv-space-2) 0;

        background:
            linear-gradient(to right,
                transparent,
                rgba(104, 112, 91, 0.18),
                transparent);

        filter:
            blur(0.25px);
    }


    .sv-cart-item__divider::after {

        top: -3px;
        bottom: auto;

        left: 10%;
        right: 10%;

        width: auto;
        height: 7px;
    }


    .sv-cart-item__information {

        padding-left: 0;
    }


    .sv-cart-summary {

        margin-top:
            var(--sv-space-8);

        padding-top:
            var(--sv-space-7);
    }


    .sv-cart-summary__actions {

        flex-direction: column;

        gap:
            var(--sv-space-3);
    }
}


/* =========================================================
   11. VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 374px) {

    .sv-cart {

        padding-left: 14px;
        padding-right: 14px;
    }
}


/* =========================================================
   12. REDUCED MOTION
   ========================================================= */

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

    .sv-cart-item__divider,
    .sv-cart-item__divider::after,
    .sv-cart-summary__divider,
    .sv-cart-summary__divider::after {

        transition: none;
    }
}