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

Space Vanta Theme 1.0

Feature:
Featured Functions / Find

Module:
Discovery Product Rendering

Version:
FIND-BRAND-IMAGE-001

Purpose:
Spatial Product Object

Responsibilities:
- Product image presentation
- Product object frame
- Product depth
- Product hover interaction
- Product title presentation

Does NOT handle:
- Discovery logic
- Ranking
- Recommendation
- Product data
- Panel layout
- Cube
- Panel transition

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


/* =========================================================
   01. PRODUCT OBJECT
   ========================================================= */

.sv-find-product-card {

    position:
        relative;

    min-width:
        0;

    isolation:
        isolate;
}


/* =========================================================
   02. PRODUCT LINK
   ========================================================= */

.sv-find-product-card__link {

    display:
        block;

    width:
        100%;

    color:
        inherit;

    text-decoration:
        none;
}


/* =========================================================
   03. PRODUCT MEDIA / SPATIAL FRAME
   ========================================================= */

.sv-find-product-card__media {

    position:
        relative;

    width:
        100%;

    aspect-ratio:
        1 / 1;

    overflow:
        hidden;

    box-sizing:
        border-box;

    border:
        1px solid rgba(79, 94, 100, 0.24);

    background:

        linear-gradient(145deg,
            rgba(255, 255, 253, 0.96) 0%,
            rgba(222, 227, 228, 0.84) 34%,
            rgba(190, 198, 201, 0.54) 54%,
            rgba(244, 246, 244, 0.88) 78%,
            rgba(211, 217, 218, 0.74) 100%);

    box-shadow:

        inset 0 1px 0 rgba(255, 255, 255, 0.88),

        inset 0 -1px 0 rgba(75, 89, 95, 0.10),

        0 12px 30px rgba(47, 57, 61, 0.065);

    transition:
        border-color 260ms ease,
        box-shadow 260ms ease,
        transform 260ms ease;
}


/* =========================================================
   04. METALLIC SURFACE REFLECTION
   ========================================================= */

.sv-find-product-card__media::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:

        linear-gradient(118deg,
            rgba(255, 255, 255, 0.66) 0%,
            rgba(255, 255, 255, 0.14) 18%,
            rgba(255, 255, 255, 0) 38%),

        linear-gradient(300deg,
            rgba(108, 134, 146, 0.10),
            rgba(108, 134, 146, 0) 32%);

    pointer-events:
        none;

    z-index:
        3;
}


/* =========================================================
   05. SPATIAL EDGE / REGISTRATION MARK
   ========================================================= */

.sv-find-product-card__media::after {

    content:
        "";

    position:
        absolute;

    right:
        10px;

    bottom:
        10px;

    width:
        20px;

    height:
        20px;

    border-right:
        1px solid rgba(69, 91, 101, 0.26);

    border-bottom:
        1px solid rgba(69, 91, 101, 0.26);

    opacity:
        0.72;

    pointer-events:
        none;

    z-index:
        4;
}


/* =========================================================
   06. PRODUCT IMAGE
   ========================================================= */

.sv-find-product-card__image {

    position:
        relative;

    display:
        block;

    width:
        88%;

    height:
        88%;

    margin:
        6%;

    object-fit:
        contain;

    object-position:
        center;

    background:
        transparent;

    z-index:
        2;

    transform:
        translateZ(0);

    transition:
        transform 360ms cubic-bezier(0.2, 0.72, 0.2, 1);
}


/* =========================================================
   07. PRODUCT OBJECT DEPTH
   ========================================================= */

.sv-find-product-card__media .sv-find-product-card__image {

    filter:
        drop-shadow(0 8px 10px rgba(43, 53, 58, 0.07));
}


/* =========================================================
   08. PRODUCT HOVER
   ========================================================= */

.sv-find-product-card__link:hover .sv-find-product-card__media {

    border-color:
        rgba(68, 91, 102, 0.42);

    box-shadow:

        inset 0 1px 0 rgba(255, 255, 255, 0.96),

        inset 0 -1px 0 rgba(75, 89, 95, 0.14),

        0 18px 38px rgba(47, 57, 61, 0.10);

    transform:
        translateY(-2px);
}


.sv-find-product-card__link:hover .sv-find-product-card__image {

    transform:
        scale(1.035) translateY(-1px);
}


/* =========================================================
   09. PRODUCT CONTENT
   ========================================================= */

.sv-find-product-card__content {

    width:
        100%;

    padding:
        13px 2px 0;
}


/* =========================================================
   10. PRODUCT TITLE
   ========================================================= */

.sv-find-product-card__title {

    margin:
        0;

    color:
        rgba(43, 48, 50, 0.92);

    font-family:
        inherit;

    font-size:
        12px;

    font-weight:
        500;

    line-height:
        1.45;

    letter-spacing:
        0.004em;

    overflow:
        hidden;

    display:
        -webkit-box;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp:
        2;
}


/* =========================================================
   11. PRODUCT FOCUS
   ========================================================= */

.sv-find-product-card__link:focus-visible {

    outline:
        2px solid rgba(72, 101, 113, 0.58);

    outline-offset:
        4px;
}


/* =========================================================
   12. PRODUCT HIGHLIGHT / FIRST IMPRESSION
   ========================================================= */

.sv-find-product-card:first-child .sv-find-product-card__media {

    box-shadow:

        inset 0 1px 0 rgba(255, 255, 255, 0.94),

        inset 0 -1px 0 rgba(75, 89, 95, 0.10),

        0 14px 34px rgba(47, 57, 61, 0.075);
}


/* =========================================================
   13. MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .sv-find-product-card__media {

        border-color:
            rgba(79, 94, 100, 0.22);

        box-shadow:

            inset 0 1px 0 rgba(255, 255, 255, 0.88),

            inset 0 -1px 0 rgba(75, 89, 95, 0.08),

            0 9px 22px rgba(47, 57, 61, 0.055);
    }


    .sv-find-product-card__image {

        width:
            90%;

        height:
            90%;

        margin:
            5%;
    }


    .sv-find-product-card__content {

        padding:
            9px 1px 0;
    }


    .sv-find-product-card__title {

        font-size:
            11px;

        line-height:
            1.42;
    }


    .sv-find-product-card__media::after {

        right:
            7px;

        bottom:
            7px;

        width:
            14px;

        height:
            14px;
    }

}


/* =========================================================
   14. REDUCED MOTION
   ========================================================= */

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

    .sv-find-product-card__media,
    .sv-find-product-card__image {

        transition:
            none !important;
    }

}