/*====================================================
                GOOGLE FONTS
====================================================*/

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

/*====================================================
                VARIABLES
====================================================*/

:root{

    --background:#071816;

    --background2:#102925;

    --gold:#C8A96A;

    --gold-light:#D8BA81;

    --text:#FFFFFF;

    --text-light:#D6D6D6;

}

/*====================================================
                PAGE
====================================================*/

.gem-page{

    background:var(--background);

    color:var(--text);

    font-family:"Poppins",sans-serif;

}

/*====================================================
                HERO
====================================================*/

.gem-hero{

    position:relative;

    min-height:45vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    overflow:hidden;

    background:

    linear-gradient(rgba(0,0,0,.35),

    rgba(0,0,0,.45)),

    url("/images/gem-banner.png");

    background-size:cover;

    background-position:center;

}

.gem-hero-overlay{

    max-height:45vh;

    position:absolute;

    inset:0;

    background:rgba(7,24,22,.25);

}

.gem-hero-content{

    position:relative;

    z-index:2;

    width:900px;

    max-width:90%;

}

.gem-subtitle{

    display:inline-block;

    letter-spacing:3px;

    color:var(--gold);

    font-size:14px;

    margin-bottom:20px;

}

.gem-hero h1{

    font-family:"Playfair Display",serif;

    font-size:78px;

    font-weight:700;

    margin-bottom:25px;

}

.gem-hero p{

    width:700px;

    max-width:100%;

    margin:auto;

    line-height:1.8;

    color:var(--text-light);

    font-size:18px;

    margin-bottom:45px;

}

/*====================================================
                SEARCH
====================================================*/

.gem-search-box{

    width:650px;

    max-width:100%;

    margin:0 auto 35px;

}

.gem-search-box input{

    width:100%;

    padding:18px 28px;

    border:none;

    outline:none;

    border-radius:60px;

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

    backdrop-filter:blur(12px);

    color:white;

    font-size:16px;

}

.gem-search-box input::placeholder{

    color:#E5E5E5;

}

/*====================================================
                BUTTON
====================================================*/

.gem-hero-btn{

    display:inline-block;

    padding:18px 52px;

    border-radius:40px;

    background:var(--gold);

    color:white;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.gem-hero-btn:hover{

    background:var(--gold-light);

    transform:translateY(-4px);

}

/*====================================================
                POPULAR GEMSTONES
====================================================*/

.popular-gems{

    padding:70px 8%;

    background:#0A1E1A;

}

.section-heading{

    text-align:center;

    margin-bottom:60px;

}

.section-heading span{

    color:var(--gold);

    letter-spacing:3px;

    font-size:13px;

}

.section-heading h2{

    font-family:"Playfair Display",serif;

    font-size:48px;

    margin:15px 0;

}

.section-heading p{

    color:var(--text-light);

    width:700px;

    max-width:100%;

    margin:auto;

    line-height:1.8;

}

.popular-grid{

    display:grid;

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

    gap:30px;

}

.popular-card{

    background:linear-gradient(
        180deg,
        #102b24 0%,
        #0f241f 100%
    );

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

    border-radius:26px;

    padding:42px 28px;

    text-align:center;

    cursor:pointer;

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease,
        background .28s ease;

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

    position:relative;

    overflow:hidden;
}

.popular-card:hover{

    transform:
        translateY(-10px)
        scale(1.03);

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

    box-shadow:
        0 18px 40px rgba(0,0,0,.45),
        0 0 20px rgba(212,175,55,.12);

}

.popular-card:hover img{

    transform:
        scale(1.08)
        rotate(-2deg);

    filter:
        drop-shadow(0 12px 22px rgba(212,175,55,.22));

}

.popular-card img{

    width:120px;

    height:120px;

    object-fit:contain;

    transition:
        transform .3s ease,
        filter .3s ease;

    filter:
        drop-shadow(0 8px 15px rgba(0,0,0,.35));

}

.popular-card h3{

    margin-top:24px;

    font-size:2rem;

    color:#f5f0ea;

}

.popular-card p{

    margin-top:8px;

    color:#c7c7c7;

    font-size:1rem;

}

/*====================================================
                    SHOP SECTION
====================================================*/

.shop-section{

    display:grid;

    grid-template-columns:300px 1fr;

    gap:40px;

    padding:60px 8%;

    background:#071816;

}

.shop-sidebar{

    background:#102521;

    border-radius:20px;

    padding:30px;

    height:fit-content;

    position:sticky;

    top:110px;

}

.shop-sidebar h2{

    font-family:"Playfair Display",serif;

    margin-bottom:25px;

    font-size:32px;

}

.shop-sidebar select,

.shop-sidebar input{

    width:100%;

    margin-bottom:18px;

    padding:15px;

    background:#17332E;

    color:white;

    border:none;

    border-radius:10px;

    outline:none;

}

/* =======================================
   APPLY FILTERS BUTTON
======================================= */

.apply-btn{

    width:100%;

    padding:16px;

    background:var(--gold);

    border:none;

    color:white;

    font-weight:600;

    font-size:15px;

    border-radius:10px;

    cursor:pointer;

    transition:.35s;

    margin-bottom:12px;

}

.apply-btn:hover{

    background:var(--gold-light);

    transform:translateY(-2px);

    box-shadow:0 8px 20px rgba(201,167,74,.35);

}

.apply-btn:active{

    transform:scale(.98);

}

/* =======================================
   CLEAR FILTERS BUTTON
======================================= */

.clear-btn{

    width:100%;

    padding:16px;

    background:transparent;

    border:2px solid var(--gold);

    color:var(--gold);

    font-weight:600;

    font-size:15px;

    border-radius:10px;

    cursor:pointer;

    transition:.35s;

}

.clear-btn:hover{

    background:var(--gold);

    color:white;

}

.clear-btn:active{

    transform:scale(.98);

}

.shop-content{

    flex:1;

    width:100%;

}

.shop-header{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    width:100%;

    margin-top:30px;

    gap:20px;

}

.shop-header h2{

    font-family:"Playfair Display",serif;

    font-size:42px;

}

#productCount{

    color:#536b70;

}

.product-grid{

    display:grid;

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

    gap:30px;

}

.product-category{

    display:inline-block;

    color:var(--gold);

    font-size:13px;

    letter-spacing:2px;

    margin-bottom:12px;

    text-transform:uppercase;

}

.view-btn{

    width:100%;

    padding:15px;

    border:none;

    border-radius:10px;

    background:var(--gold);

    color:white;

    cursor:pointer;

    font-weight:600;

    transition:.35s;

}

.view-btn:hover{

    background:var(--gold-light);

}

.empty-products{

    grid-column:1/-1;

    text-align:center;

    padding:80px;

    color:#536b70;

}

.empty-products h2{

    margin:0 0 10px;

    color:#0B3C49;

}

.empty-products p{

    margin:0 auto;

    max-width:760px;

    color:#536b70;

    line-height:1.65;

}

html[data-theme="dark"] #productCount,
html[data-theme="dark"] .empty-products p{

    color:rgba(232,241,240,.72);

}

html[data-theme="dark"] .empty-products h2{

    color:#F3E4B0;

}

/*====================================================
                PRODUCT CARDS
====================================================*/

.gem-card{

    background:#102820;

    border-radius:22px;

    overflow:hidden;

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

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;

    cursor:pointer;

}

.gem-card:hover{

    transform:translateY(-4px);

    border-color:#d4af37;

    box-shadow:
        0 8px 25px rgba(0,0,0,.35),
        0 0 10px rgba(212,175,55,.22);

}

.gem-image{

    position:relative;

    height:320px;

    overflow:hidden;

    background:#091916;

}

.gem-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.45s;

}

.gem-card:hover .gem-overlay{

    opacity:1;

}

.gem-content{

    padding:25px;

}

.gem-category{

    color:var(--gold);

    letter-spacing:2px;

    text-transform:uppercase;

    font-size:13px;

    display:block;

    margin-bottom:10px;

}

.gem-content h3{

    font-family:"Playfair Display",serif;

    font-size:30px;

    margin-bottom:18px;

}

.gem-specs{

    display:flex;

    justify-content:space-between;

    margin-bottom:22px;

    color:#CFCFCF;

    font-size:14px;

}

.gem-price{

    font-size:30px;

    font-weight:700;

    color:white;

}
.shop-section{scroll-margin-top:76px}
.shop-content>.active-filters{display:flex;flex-wrap:wrap;gap:9px;min-height:0;margin:0 0 24px}.shop-content>.active-filters:empty{display:none}.shop-content .filter-chip{padding:8px 11px;border:1px solid rgba(15,118,110,.32);border-radius:0;background:#e9f4f1;color:#0F766E;font:600 12px "DM Sans","Poppins",sans-serif;cursor:pointer;transition:.2s}.shop-content .filter-chip:hover{border-color:#C8A951;background:#fff}.shop-content .filter-chip span{margin-left:7px;font-size:14px}
html[data-theme="dark"] .shop-content .filter-chip{background:#12695B;color:#F3E4B0;border-color:#23AA82}html[data-theme="dark"] .shop-content .filter-chip:hover{background:#0B2624;border-color:#D1B145}

/* Match the jewellery catalogue's product-image treatment exactly. */
.gem-card{
    display:flex;
    flex-direction:column;
    height:100%;
    overflow:hidden;
}

.gem-image{
    position:relative;
    width:100%;
    min-width:0!important;
    flex:0 0 auto;
    overflow:hidden;
}

.gem-image > img{
    display:block;
    width:100%;
    height:100%;
    max-width:none;
    border-radius:0!important;
    object-fit:cover;
    object-position:50% 50%;
}

.gem-no-image{
    display:grid;
    width:100%;
    height:100%;
    place-items:center;
    color:#748B90;
    font:500 12px "DM Sans","Poppins",sans-serif;
    text-align:center;
}

.gem-content{
    display:flex;
    flex:1;
    flex-direction:column;
}

.gem-content .card-cart-button{margin-top:auto}

@media(max-width:760px){
    .gem-image{height:190px!important}
}

@media(max-width:360px){
    .gem-image{height:165px!important}
}