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

Space Vanta Theme 1.0

Module:
Product Card Image Frame

File:
public/product-card/image/frame.css

Version:
1.2

Purpose:
Soft Titanium Exhibit Frame

Visual Direction:
Accessible Premium
Exhibit Space
Metallic Minimalism

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


/*
================================================
Product Image Container
================================================
*/


.sv-product-card__media {

    width: 100%;

}



/*
================================================
Image Link

PDP Navigation Support

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


.sv-product-card__media-link {

    display: block;

    width: 100%;

    color: inherit;

    text-decoration: none;

}



/*
================================================
Titanium Exhibit Frame

Main Exhibition Space

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


.sv-product-card__image-frame {

    position: relative;


    width: 100%;


    aspect-ratio: 4 / 3;


    overflow: hidden;


    display: flex;

    align-items: center;

    justify-content: center;


    box-sizing: border-box;



    /*
    Soft Titanium Surface

    Mostly neutral,
    premium but approachable.
    */

    background:

        linear-gradient(145deg,

            #f8f9fa 0%,

            #f1f3f4 35%,

            #e9ebed 55%,

            #f7f8f9 100%);



    /*
    Soft metallic edge

    Reduced intensity
    */

    border:

        1px solid rgba(118,

            125,

            132,

            0.16);



    /*
    Inner depth

    Creates material feeling
    without luxury exaggeration.

    */

    box-shadow:

        inset 0 0 0 1px rgba(255,

            255,

            255,

            0.55),

        inset 0 0 14px rgba(80,

            88,

            96,

            0.025);

}



/*
================================================
Inner Reflection Layer

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


.sv-product-card__image-frame::before {


    content: "";


    position: absolute;


    inset: 8px;


    pointer-events: none;


    box-sizing: border-box;


    border:

        1px solid rgba(255,

            255,

            255,

            0.32);


}



/*
================================================
Metallic Light Reflection

Very subtle

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


.sv-product-card__image-frame::after {


    content: "";


    position: absolute;


    top: 0;


    left: 15%;


    width: 18%;


    height: 1px;



    background:


        linear-gradient(90deg,

            transparent,

            rgba(255,

                255,

                255,

                0.8),

            transparent);


    opacity: .35;


    pointer-events: none;


}



/*
================================================
Product Image

Natural Product Scale

Frame controls space,
image keeps proportion.

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


.sv-product-card__image-frame img {


    width: auto;


    height: auto;



    max-width:

        86%;



    max-height:

        86%;



    display: block;



    object-fit: contain;


}



/*
================================================
Mobile

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


@media(max-width:768px) {



    .sv-product-card__image-frame {


        aspect-ratio:

            4 / 3;


    }




    .sv-product-card__image-frame img {


        max-width:

            88%;



        max-height:

            88%;



    }



}