/* ======================================
   SUVARNA JEWELLERS
   COLLECTIONS.CSS
   ULTRA PREMIUM COLLECTION PRODUCT CARDS
====================================== */


/* ==========================
   COLLECTION GRID
========================== */

.collection-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
}


/* ==========================
   COLLECTION CARD
========================== */

.collection-card{
    position:relative;

    width:100%;
    height:auto;
    aspect-ratio:1 / 1.16;

    overflow:hidden;

    border-radius:0;

    border:1px solid rgba(212,175,55,.20);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.012)
        );

    box-shadow:
        0 14px 38px rgba(0,0,0,.20);

    transform:translateZ(0);

    transition:
        transform .45s cubic-bezier(.2,.7,.2,1),
        border-color .35s ease,
        box-shadow .45s ease;
}


/* ==========================
   INNER LUXURY FRAME
========================== */

.collection-card::before{
    content:"";

    position:absolute;

    inset:7px;

    z-index:3;

    border:1px solid rgba(255,255,255,.07);

    pointer-events:none;

    transition:
        border-color .35s ease;
}


/* ==========================
   FINE GOLD BOTTOM LINE
========================== */

.collection-card::after{
    content:"";

    position:absolute;

    left:18%;
    right:18%;
    bottom:0;

    height:1px;

    z-index:5;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(212,175,55,.65),
            transparent
        );

    pointer-events:none;
}


/* ==========================
   PRODUCT IMAGE
========================== */

.collection-card img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(212,175,55,.055),
            transparent 65%
        ),
        #f3eee4;

    transition:
        transform .75s cubic-bezier(.2,.7,.2,1),
        filter .45s ease;
}


/* ==========================
   IMAGE HOVER
========================== */

.collection-card:hover img{
    transform:scale(1.045);

    filter:
        saturate(1.035)
        contrast(1.015);
}


/* ==========================
   COLLECTION OVERLAY
========================== */

.collection-overlay{
    position:absolute;

    inset:0;

    z-index:2;

    display:flex;

    align-items:flex-end;

    padding:22px;

    background:
        linear-gradient(
            180deg,
            transparent 42%,
            rgba(10,0,6,.10) 56%,
            rgba(10,0,6,.82) 100%
        );

    pointer-events:none;

    transition:
        background .45s ease;
}


.collection-card:hover
.collection-overlay{
    background:
        linear-gradient(
            180deg,
            transparent 38%,
            rgba(10,0,6,.12) 53%,
            rgba(10,0,6,.88) 100%
        );
}


/* ==========================
   CATEGORY LABEL
========================== */

.collection-overlay span{
    display:block;

    margin-bottom:7px;

    color:#e1c45a;

    font-family:
        Inter,
        Arial,
        sans-serif;

    font-size:8px;

    font-weight:600;

    letter-spacing:2px;

    line-height:1.2;

    text-transform:uppercase;
}


/* ==========================
   PRODUCT NAME
========================== */

.collection-overlay h3{
    margin:0;

    max-width:92%;

    color:#fffaf0;

    font-family:
        Cinzel,
        Georgia,
        serif;

    font-size:17px;

    font-weight:500;

    line-height:1.35;

    letter-spacing:.01em;

    text-shadow:
        0 2px 12px rgba(0,0,0,.38);
}


/* ==========================
   COLLECTION LINK
========================== */

.collection-link{
    display:block;

    min-width:0;

    color:inherit;

    text-decoration:none;

    -webkit-tap-highlight-color:transparent;
}


/* ==========================
   CARD HOVER
========================== */

.collection-card:hover{
    transform:translateY(-7px);

    border-color:
        rgba(212,175,55,.48);

    box-shadow:
        0 25px 55px rgba(0,0,0,.34),
        0 0 0 1px rgba(212,175,55,.05);
}


.collection-card:hover::before{
    border-color:
        rgba(212,175,55,.18);
}


/* ==========================
   SEARCH / DYNAMIC CARD REVEAL
   Applies automatically when
   collections.js replaces grid HTML
========================== */

.collection-link{
    animation:
        collectionCardReveal .45s ease both;
}


@keyframes collectionCardReveal{

    from{
        opacity:0;
        transform:translateY(8px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}


/* ==========================
   READY STOCK GRID
   Keep existing Ready Stock
   functionality
========================== */

.ready-stock-grid{
    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(280px,1fr));

    gap:30px;
}


/* ==========================
   TABLET
========================== */

@media(max-width:992px){

    .collection-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:18px;
    }

}


/* ==========================
   MOBILE
========================== */

@media(max-width:768px){

    .collection-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:12px;
    }


    .ready-stock-grid{
        grid-template-columns:1fr;
    }


    .collection-card{
        aspect-ratio:1 / 1.16;
    }


    .collection-card::before{
        inset:5px;
    }


    .collection-overlay{
        padding:13px;
    }


    .collection-overlay span{
        font-size:7px;
        letter-spacing:1.5px;
        margin-bottom:5px;
    }


    .collection-overlay h3{
        font-size:12px;
        line-height:1.3;
    }


    .collection-card:hover{
        transform:translateY(-3px);
    }

}


/* ==========================
   VERY SMALL DEVICES
========================== */

@media(max-width:380px){

    .collection-grid{
        gap:9px;
    }


    .collection-overlay{
        padding:11px;
    }


    .collection-overlay h3{
        font-size:11px;
    }

}


/* ==========================
   REDUCED MOTION
========================== */

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

    .collection-card,
    .collection-card img,
    .collection-overlay,
    .collection-link{
        transition:none !important;
        animation:none !important;
    }

           }