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

Space Vanta Theme 1.0

Module:
Cart Item

Version:
1.0

Path:
public/cart/cs/item.css

Phase:
CART-VISUAL-001

Responsibilities:

- Cart item visual hierarchy
- Information spacing
- Item action positioning
- Desktop / Mobile item rhythm

Does NOT handle:

- Image rendering
- Pricing
- Quantity
- Remove motion
- Checkout
- Cart data logic

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


/* =========================================================
   01. ITEM FOUNDATION
   ========================================================= */

.sv-cart-item {

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


/* =========================================================
   02. INFORMATION STACK
   ========================================================= */

.sv-cart-item__information {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    min-width: 0;

    /*
     * Creates breathing room between product information
     * groups without making the item feel fragmented.
     */
    gap:
        var(--sv-space-3);
}


/* =========================================================
   03. PRODUCT INFO
   ========================================================= */

.sv-cart-item__info {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    min-width: 0;

    width: 100%;

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


/* =========================================================
   04. PRODUCT TITLE
   ========================================================= */

.sv-cart-item__title {

    margin: 0;

    max-width: 760px;

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

    font-size:
        clamp(18px, 1.55vw, 24px);

    line-height: 1.25;

    font-weight: 500;

    letter-spacing:
        -0.01em;

    overflow-wrap: anywhere;
}


.sv-cart-item__title-link {

    color:
        inherit;

    text-decoration: none;

    transition:
        opacity var(--sv-transition-fast);
}


.sv-cart-item__title-link:hover {

    opacity: 0.68;
}


/* =========================================================
   05. SKU
   ========================================================= */

.sv-cart-item__sku {

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

    font-size: 11px;

    line-height: 1.5;

    letter-spacing:
        0.055em;

    overflow-wrap: anywhere;
}


/* =========================================================
   06. INFORMATION RHYTHM
   ========================================================= */

/*
 * Pricing / Variant / Quantity should not visually collapse
 * into one block.
 */

.sv-cart-item__pricing {

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


.sv-cart-item__variant {

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


.sv-cart-item__quantity {

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


/* =========================================================
   07. ACTION AREA
   ========================================================= */

.sv-cart-item__actions {

    display: flex;

    align-items: flex-end;

    min-width: 0;

    /*
     * The remove action belongs beneath quantity.
     * Exact button styling will be handled by remove.css.
     */
    margin-top:
        var(--sv-space-2);
}


/* =========================================================
   08. MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .sv-cart-item__information {

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


    .sv-cart-item__title {

        max-width: none;

        font-size: 18px;

        line-height: 1.3;
    }


    .sv-cart-item__sku {

        font-size: 10px;
    }


    .sv-cart-item__actions {

        margin-top:
            0;
    }
}