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

Space Vanta Theme 1.0

Module:
Cart Image

Version:
1.0

Path:
public/cart/cs/image.css

Phase:
CART-VISUAL-001

Responsibilities:

- Image frame
- Image containment
- Image surface treatment
- Subtle reflective effect
- Responsive image sizing

Does NOT handle:

- Product information
- Cart data
- Image source logic
- Cart mutations

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


/* =========================================================
   01. IMAGE FRAME
   ========================================================= */

.sv-cart-item__image-frame {

    position: relative;

    display: flex;

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

    width: 100%;

    aspect-ratio: 1 / 1;

    min-width: 0;

    overflow: hidden;

    background:
        var(--sv-color-bg-secondary);

    /*
     * Cool silver / gray foundation.
     *
     * Intentionally avoids pure white so the frame
     * feels closer to Space Vanta's reflective hardware
     * language.
     */
    border:
        1px solid rgba(145, 151, 158, 0.42);

    border-radius:
        var(--sv-radius-md);

    isolation: isolate;

    box-shadow:
        0 10px 30px rgba(28, 28, 26, 0.035);

    transition:
        border-color var(--sv-transition-base),
        box-shadow var(--sv-transition-base);
}


/* =========================================================
   02. INNER REFLECTIVE SURFACE
   ========================================================= */

/*
 * Very subtle internal reflection.
 *
 * This is deliberately softer than the PDP visual language.
 */

.sv-cart-item__image-frame::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(125deg,
            rgba(255, 255, 255, 0.12) 0%,
            rgba(255, 255, 255, 0.035) 24%,
            transparent 46%,
            transparent 72%,
            rgba(255, 255, 255, 0.06) 100%);

    opacity: 0.7;

    mix-blend-mode: screen;

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


/* =========================================================
   03. INNER COOL-SILVER EDGE
   ========================================================= */

/*
 * Secondary edge reflection.
 *
 * The normal state remains silver / gray rather than white.
 */

.sv-cart-item__image-frame::after {

    content: "";

    position: absolute;

    inset: 5px;

    z-index: 2;

    pointer-events: none;

    border:
        1px solid rgba(170, 176, 183, 0.22);

    border-radius:
        calc(var(--sv-radius-md) - 1px);

    box-shadow:
        inset 0 0 18px rgba(150, 158, 168, 0.035);

    opacity: 0.72;

    transition:
        border-color var(--sv-transition-base),
        box-shadow var(--sv-transition-base),
        opacity var(--sv-transition-base);
}


/* =========================================================
   04. IMAGE LINK
   ========================================================= */

.sv-cart-item__image-link {

    position: relative;

    z-index: 0;

    display: flex;

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

    width: 100%;
    height: 100%;

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

    text-decoration: none;

    overflow: hidden;
}


/* =========================================================
   05. PRODUCT IMAGE
   ========================================================= */

.sv-cart-item__image {

    display: block;

    width: 100%;
    height: 100%;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    object-position: center;

    padding:
        clamp(10px, 1.6vw, 24px);

    opacity: 0.98;

    transform:
        scale(0.985);

    transition:
        transform var(--sv-transition-base),
        opacity var(--sv-transition-base);

    -webkit-user-drag: none;
}


/* =========================================================
   06. DESKTOP HOVER
   ========================================================= */

/*
 * Hover introduces only a restrained blue reflection.
 *
 * The blue is not intended to become a glow.
 * It should read as a brief reflective change on the frame.
 */

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

    .sv-cart-item__image-frame:hover {

        border-color:
            rgba(125, 148, 176, 0.56);

        box-shadow:
            0 12px 34px rgba(28, 28, 26, 0.055),
            0 0 0 1px rgba(100, 135, 175, 0.055),
            0 0 16px rgba(90, 125, 170, 0.045);
    }


    .sv-cart-item__image-frame:hover::before {

        opacity: 0.84;
    }


    .sv-cart-item__image-frame:hover::after {

        border-color:
            rgba(128, 151, 180, 0.34);

        box-shadow:
            inset 0 0 18px rgba(120, 145, 178, 0.045),
            0 0 8px rgba(95, 130, 172, 0.035);

        opacity: 0.88;
    }


    .sv-cart-item__image-link:hover .sv-cart-item__image {

        transform:
            scale(1);

        opacity: 1;
    }
}


/* =========================================================
   07. MOBILE IMAGE FRAME
   ========================================================= */

@media (max-width: 767px) {

    .sv-cart-item__image-frame {

        /*
         * Intentionally larger on mobile.
         * The image remains the primary visual anchor.
         */

        aspect-ratio: 1 / 1;

        min-height:
            300px;

        border-radius:
            var(--sv-radius-md);
    }


    .sv-cart-item__image {

        padding:
            18px;

        transform:
            scale(0.985);
    }
}


/* =========================================================
   08. VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 374px) {

    .sv-cart-item__image-frame {

        min-height:
            260px;
    }


    .sv-cart-item__image {

        padding:
            14px;
    }
}


/* =========================================================
   09. REDUCED MOTION
   ========================================================= */

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

    .sv-cart-item__image,
    .sv-cart-item__image-frame,
    .sv-cart-item__image-frame::before,
    .sv-cart-item__image-frame::after {

        transition: none;
    }
}