/*=========================================
    Google Font
=========================================*/

@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Inter:wght@300;400;500;600;700&display=swap');


/*=========================================
    Variables
=========================================*/

:root{

    --cm-primary:#C6A15B;

    --cm-bg:#0B0B0C;

    --cm-card:#151515;

    --cm-card-light:#1D1D1D;

    --cm-border:#2A2A2A;

    --cm-text:#CFCFCF;

    --cm-heading:#FFFFFF;

    --cm-radius:18px;

    --cm-transition:.4s ease;

}



/*=========================================
    Collection Section
=========================================*/

.cm-collection-section{

    background:var(--cm-bg);

    position:relative;

    overflow:hidden;

}



/*=========================================
    Header
=========================================*/

.cm-collection-header{

    display:flex;

    justify-content:space-between;

    align-items:end;

    margin-bottom:60px;

    padding-bottom:25px;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.cm-subtitle{

    display:inline-block;

    color:var(--cm-primary);

    text-transform:uppercase;

    letter-spacing:4px;

    font-size:13px;

    margin-bottom:15px;

}

.cm-collection-header h2{

    color:#fff;

    font-size:52px;

    font-family:'Marcellus',serif;

    margin:0;

}

.cm-header-right p{

    color:#999;

    margin:0;

    font-size:15px;

}



/*=========================================
    Sidebar
=========================================*/

.cm-sidebar{

    background:var(--cm-card);

    border:1px solid var(--cm-border);

    border-radius:2px;

    padding:30px;

    position:sticky;

    top:120px;

}

.cm-sidebar h3{

    color:#fff;

    font-size:28px;

    font-family:'Marcellus',serif;

    margin-bottom:35px;

}

.cm-sidebar h3 i{

    color:var(--cm-primary);

    margin-right:10px;

}



/*=========================================
    Filter Box
=========================================*/

.cm-filter-box{

    margin-bottom:30px;

}

.cm-filter-box:last-child{

    margin-bottom:0;

}

.cm-filter-box h5{

    color:#fff;

    font-size:15px;

    margin-bottom:15px;

    text-transform:uppercase;

    letter-spacing:2px;

}



/*=========================================
    Search
=========================================*/

#searchInput{

    width:100%;

    height:55px;

    background:#101010;

    border:1px solid var(--cm-border);

    border-radius:14px;

    color:#fff;

    padding:0 20px;

    transition:var(--cm-transition);

}

#searchInput::placeholder{

    color:#777;

}

#searchInput:focus{

    outline:none;

    border-color:var(--cm-primary);

}



/*=========================================
    Filters
=========================================*/

#categoryFilter,

#finishFilter,

#colorFilter,

#thicknessFilter,

#originFilter{

    display:flex;

    flex-direction:column;

    gap:14px;

}



/*=========================================
    Checkbox
=========================================*/

.cm-checkbox{

    display:flex;

    align-items:center;

    gap:12px;

    cursor:pointer;

    color:#bbb;

    transition:.3s;

}

.cm-checkbox:hover{

    color:#fff;

}

.cm-checkbox input{

    accent-color:var(--cm-primary);

    width:18px;

    height:18px;

}



/*=========================================
    Button
=========================================*/

.cm-clear-btn{

    width:100%;

    height:55px;

    border:none;

    border-radius:14px;

    background:var(--cm-primary);

    color:#111;

    font-weight:700;

    margin-top:20px;

    transition:var(--cm-transition);

}

.cm-clear-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 35px rgba(198,161,91,.25);

}



/*=========================================
    Product Area
=========================================*/

#productContainer{

    min-height:500px;

}


/*=========================================
    PRODUCT CARD
=========================================*/

.cm-product-card{

    display:block;

    position:relative;

    height:520px;

    overflow:hidden;

    border-radius:2px;

    background:#111;

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

    text-decoration:none;

    transition:.45s ease;

}

.cm-product-card:hover{

    transform:translateY(-10px);

    border-color:rgba(198,161,91,.5);

    box-shadow:

        0 25px 60px rgba(0,0,0,.45);

}



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

.cm-product-image{

    width:100%;

    height:100%;

    position:relative;

    overflow:hidden;

}

.cm-product-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1s ease;

}

.cm-product-card:hover .cm-product-image img{

    transform:scale(1.12);

}



/*=========================================
    IMAGE DARK GRADIENT
=========================================*/

.cm-product-image::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:45%;

    background:linear-gradient(

        to top,

        rgba(0,0,0,.95),

        rgba(0,0,0,.25),

        transparent

    );

}



/*=========================================
    GOLD BORDER
=========================================*/

.cm-product-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:2px;

    border:1px solid transparent;

    transition:.45s;

    z-index:3;

}

.cm-product-card:hover::before{

    border-color:rgba(198,161,91,.7);

}



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

.cm-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:flex-end;

    justify-content:flex-start;

    padding:35px;

    background:rgba(0,0,0,.25);

    opacity:0;

    transition:.45s;

    z-index:5;

}

.cm-product-card:hover .cm-overlay{

    opacity:1;

}



/*=========================================
    CONTENT
=========================================*/

.cm-overlay-content{

    width:100%;

    transform:translateY(45px);

    transition:.45s;

}

.cm-product-card:hover .cm-overlay-content{

    transform:translateY(0);

}



/*=========================================
    GOLD LINE
=========================================*/

.cm-line{

    display:block;

    width:0;

    height:2px;

    background:var(--cm-primary);

    margin-bottom:18px;

    transition:.5s;

}

.cm-product-card:hover .cm-line{

    width:80px;

}



/*=========================================
    TITLE
=========================================*/

.cm-overlay h3{

    color:#fff;

    font-family:'Marcellus',serif;

    font-size:34px;

    margin-bottom:10px;

    transition:.3s;

}



/*=========================================
    SUB TITLE
=========================================*/

.cm-overlay p{

    color:var(--cm-primary);

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:13px;

    margin:0;

}



/*=========================================
    SHINE EFFECT
=========================================*/

.cm-product-image::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-70%;

    width:45%;

    height:300%;

    background:rgba(255,255,255,.15);

    transform:rotate(25deg);

    transition:1s;

    z-index:2;

}

.cm-product-card:hover .cm-product-image::before{

    left:170%;

}



/*=========================================
    CURSOR
=========================================*/

.cm-product-card{

    cursor:pointer;

}

/*=========================================
    COLLECTION ANIMATION
=========================================*/

.cm-product-card{

    animation:cmFadeUp .8s ease both;

}

@keyframes cmFadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



/*=========================================
    PRODUCT GRID
=========================================*/

#productContainer{

    row-gap:30px;

}



/*=========================================
    NO PRODUCT
=========================================*/

.cm-no-product{

    text-align:center;

    padding:120px 20px;

    border:1px solid var(--cm-border);

    border-radius:2px;

    background:var(--cm-card);

}

.cm-no-product h2{

    color:#fff;

    font-family:'Marcellus',serif;

    font-size:42px;

    margin-bottom:15px;

}

.cm-no-product p{

    color:#999;

    font-size:16px;

    margin:0;

}



/*=========================================
    SCROLLBAR
=========================================*/

.cm-sidebar::-webkit-scrollbar{

    width:6px;

}

.cm-sidebar::-webkit-scrollbar-track{

    background:#151515;

}

.cm-sidebar::-webkit-scrollbar-thumb{

    background:var(--cm-primary);

    border-radius:2px;

}



/*=========================================
    HOVER GLOW
=========================================*/

.cm-product-card:hover{

    box-shadow:

    0 0 0 1px rgba(198,161,91,.20),

    0 20px 60px rgba(0,0,0,.55),

    0 0 40px rgba(198,161,91,.08);

}



/*=========================================
    IMAGE ROUND
=========================================*/

.cm-product-image{

    border-radius:2px;

}



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

@media(max-width:1199px){

    .cm-product-card{

        height:460px;

    }

}



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

@media(max-width:991px){

    .cm-sidebar{

        position:relative;

        top:0;

        margin-bottom:40px;

    }

    .cm-collection-header{

        flex-direction:column;

        align-items:flex-start;

        gap:20px;

    }

    .cm-collection-header h2{

        font-size:42px;

    }

    .cm-product-card{

        height:420px;

    }

}



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

@media(max-width:767px){

    .cm-collection-section{

        padding:70px 0;

    }

    .cm-sidebar{

        padding:20px;

    }

    .cm-sidebar h3{

        font-size:24px;

    }

    .cm-collection-header{

        margin-bottom:35px;

    }

    .cm-collection-header h2{

        font-size:32px;

    }

    .cm-subtitle{

        letter-spacing:2px;

    }

    .cm-product-card{

        height:350px;

    }

    .cm-overlay{

        opacity:1;

        padding:25px;

    }

    .cm-overlay-content{

        transform:none;

    }

    .cm-overlay h3{

        font-size:24px;

    }

}



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

@media(max-width:575px){

    .cm-product-card{

        height:300px;

    }

    .cm-overlay{

        padding:20px;

    }

    .cm-overlay h3{

        font-size:20px;

    }

    .cm-overlay p{

        font-size:11px;

        letter-spacing:2px;

    }

}



/*=========================================
    SELECTION
=========================================*/

::selection{

    background:var(--cm-primary);

    color:#111;

}



/*=========================================
    SMOOTH SCROLL
=========================================*/

html{

    scroll-behavior:smooth;

}