:root{
    --palette-navy:#0B3C49;
    --palette-teal:#0F766E;
    --palette-gold:#C8A951;
    --palette-white:#FFFFFF;
}

/* Dark palette v2 and navigation-mounted theme control */
.theme-toggle{position:static;right:auto;bottom:auto;min-width:auto;width:42px;height:42px;margin-left:24px;padding:0;justify-content:center;flex:0 0 42px;background:transparent;color:#0B3C49;border-color:rgba(11,60,73,.24);box-shadow:none}
.theme-toggle .theme-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.theme-toggle:hover{transform:none;background:rgba(15,118,110,.08);border-color:#C8A951}
html[data-theme="dark"]{--palette-navy:#041421;--palette-teal:#005A6D;--palette-gold:#F3A712;--palette-white:#FFD15C;--ds-navy:#FFD15C;--ds-teal:#00B2B1;--ds-gold:#F3A712;--ds-white:#FFD15C;--ds-mist:#005A6D;--ds-ink:#FFD15C;--ds-muted:#9ac9cc;--ds-line:rgba(0,178,177,.25);--navy:#FFD15C;--teal:#00B2B1;--gold:#F3A712;--white:#FFD15C;--mist:#005A6D;--ink:#FFD15C;--line:rgba(0,178,177,.25)}
html[data-theme="dark"] body{background:#041421;color:#FFD15C}
html[data-theme="dark"] .theme-toggle{background:transparent;color:#FFD15C;border-color:#00B2B1}
html[data-theme="dark"] .theme-toggle:hover{background:#005A6D;border-color:#F3A712}
html[data-theme="dark"] .theme-icon{color:#F3A712}
html[data-theme="dark"] .refreshed-page>header,html[data-theme="dark"] body>header{background:rgba(4,20,33,.97);border-color:rgba(0,178,177,.25)}
html[data-theme="dark"] .home-page .intro-section,html[data-theme="dark"] .home-page .gem-showcase,html[data-theme="dark"] .home-page .featured-products,html[data-theme="dark"] .home-page .luxury-jewellery,html[data-theme="dark"] .home-page .certifications,html[data-theme="dark"] .home-page .faq-section,html[data-theme="dark"] .gemstones-page .popular-gems,html[data-theme="dark"] .product-details-page .related-products,html[data-theme="dark"] .collection-nav,html[data-theme="dark"] .final-cta{background:#041421}
html[data-theme="dark"] .home-page .categories,html[data-theme="dark"] .home-page .why-us,html[data-theme="dark"] .home-page .testimonial-section,html[data-theme="dark"] .gemstones-page,html[data-theme="dark"] .gemstones-page .shop-section,html[data-theme="dark"] .shop,html[data-theme="dark"] .contact-page,html[data-theme="dark"] .product-details-page,html[data-theme="dark"] .admin-page{background:#005A6D}
html[data-theme="dark"] .home-page .product-card,html[data-theme="dark"] .home-page .jewel-card,html[data-theme="dark"] .home-page .why-card,html[data-theme="dark"] .home-page .certificate-card,html[data-theme="dark"] .home-page .testimonial-card,html[data-theme="dark"] .home-page .faq,html[data-theme="dark"] .gemstones-page .popular-card,html[data-theme="dark"] .gemstones-page .shop-sidebar,html[data-theme="dark"] .gemstones-page .gem-card,html[data-theme="dark"] .filter-panel,html[data-theme="dark"] .jewelry-card,html[data-theme="dark"] .contact-page .contact-form,html[data-theme="dark"] .product-details-page .detail-container,html[data-theme="dark"] .admin-page .admin-section,html[data-theme="dark"] .admin-page .admin-products,html[data-theme="dark"] .admin-page .admin-card,html[data-theme="dark"] .category-tile{background:#063245;color:#FFD15C;border-color:rgba(0,178,177,.3)}
html[data-theme="dark"] .filter-panel input,html[data-theme="dark"] .filter-panel select,html[data-theme="dark"] .results-bar select,html[data-theme="dark"] .filter-panel #searchInput,html[data-theme="dark"] .gemstones-page .shop-sidebar input,html[data-theme="dark"] .gemstones-page .shop-sidebar select,html[data-theme="dark"] .contact-page .contact-form input,html[data-theme="dark"] .contact-page .contact-form select,html[data-theme="dark"] .contact-page .contact-form textarea,html[data-theme="dark"] .admin-page .admin-form input,html[data-theme="dark"] .admin-page .admin-form select,html[data-theme="dark"] .admin-page .description-section textarea{background:#041421;color:#FFD15C;border-color:rgba(0,178,177,.35)}
html[data-theme="dark"] .button-gold,html[data-theme="dark"] .buy-btn,html[data-theme="dark"] .apply-btn,html[data-theme="dark"] .contact-form button{background:#F3A712;color:#041421}
html[data-theme="dark"] .section-tag,html[data-theme="dark"] .eyebrow,html[data-theme="dark"] .jewelry-category,html[data-theme="dark"] .gem-category{color:#00B2B1}
html[data-theme="dark"] .craft-copy,html[data-theme="dark"] .service-band{background:#041421}
@media(max-width:700px){.theme-toggle{width:34px;height:34px;flex-basis:34px;margin-left:10px}.theme-icon{font-size:16px}}

/* ================= UNIVERSAL THEME TOGGLE ================= */
.theme-toggle{position:fixed;right:22px;bottom:22px;z-index:3000;display:flex;align-items:center;gap:8px;min-width:92px;height:44px;padding:0 15px;border:1px solid rgba(200,169,81,.6);border-radius:24px;background:#fff;color:#0B3C49;box-shadow:0 8px 28px rgba(11,60,73,.2);font:600 12px "Segoe UI",sans-serif;cursor:pointer;transition:background .25s,color .25s,transform .25s}.theme-toggle:hover{transform:translateY(-2px)}.theme-icon{font-size:18px;color:#C8A951}.theme-toggle:focus-visible{outline:3px solid rgba(200,169,81,.45);outline-offset:3px}
html[data-theme="dark"]{--palette-white:#f2f5f4;--ds-white:#f2f5f4;--ds-mist:#102f37;--ds-navy:#e8f1f0;--ds-ink:#e8f1f0;--ds-muted:#a9bec1;--ds-line:rgba(255,255,255,.13);--ds-shadow:0 18px 50px rgba(0,0,0,.3);--white:#f2f5f4;--mist:#102f37;--navy:#e8f1f0;--ink:#e8f1f0;--line:rgba(255,255,255,.13)}
html[data-theme="dark"] body{background:#081f26;color:#e8f1f0}
html[data-theme="dark"] .theme-toggle{background:#0F766E;color:#fff;border-color:#C8A951}
html[data-theme="dark"] .refreshed-page>header,html[data-theme="dark"] body>header{background:rgba(8,31,38,.97);border-color:rgba(255,255,255,.12)}
html[data-theme="dark"] .refreshed-page>header h1,html[data-theme="dark"] .refreshed-page>header nav a,html[data-theme="dark"] body>header .brand,html[data-theme="dark"] body>header nav a{color:#e8f1f0}
html[data-theme="dark"] .home-page .intro-section,html[data-theme="dark"] .home-page .gem-showcase,html[data-theme="dark"] .home-page .featured-products,html[data-theme="dark"] .home-page .luxury-jewellery,html[data-theme="dark"] .home-page .certifications,html[data-theme="dark"] .home-page .faq-section,html[data-theme="dark"] .gemstones-page .popular-gems,html[data-theme="dark"] .product-details-page .related-products,html[data-theme="dark"] .collection-nav,html[data-theme="dark"] .final-cta{background:#081f26}
html[data-theme="dark"] .home-page .categories,html[data-theme="dark"] .home-page .why-us,html[data-theme="dark"] .home-page .testimonial-section,html[data-theme="dark"] .gemstones-page,html[data-theme="dark"] .gemstones-page .shop-section,html[data-theme="dark"] .shop,html[data-theme="dark"] .contact-page,html[data-theme="dark"] .product-details-page,html[data-theme="dark"] .admin-page{background:#0c2931}
html[data-theme="dark"] .home-page .intro-container h2,html[data-theme="dark"] .home-page .categories h2,html[data-theme="dark"] .home-page .gem-text h2,html[data-theme="dark"] .home-page .featured-products h2,html[data-theme="dark"] .home-page .section-heading h2,html[data-theme="dark"] .home-page .why-us>h2,html[data-theme="dark"] .home-page .faq-section>h2,html[data-theme="dark"] .gemstones-page .section-heading h2,html[data-theme="dark"] .shop h2,html[data-theme="dark"] .section-intro h2,html[data-theme="dark"] .final-cta h2{color:#f2f5f4}
html[data-theme="dark"] .home-page .product-card,html[data-theme="dark"] .home-page .jewel-card,html[data-theme="dark"] .home-page .why-card,html[data-theme="dark"] .home-page .certificate-card,html[data-theme="dark"] .home-page .testimonial-card,html[data-theme="dark"] .home-page .faq,html[data-theme="dark"] .gemstones-page .popular-card,html[data-theme="dark"] .gemstones-page .shop-sidebar,html[data-theme="dark"] .gemstones-page .gem-card,html[data-theme="dark"] .filter-panel,html[data-theme="dark"] .jewelry-card,html[data-theme="dark"] .contact-page .contact-form,html[data-theme="dark"] .product-details-page .detail-container,html[data-theme="dark"] .admin-page .admin-section,html[data-theme="dark"] .admin-page .admin-products,html[data-theme="dark"] .admin-page .admin-card{background:#12343d;color:#e8f1f0;border-color:rgba(255,255,255,.12)}
html[data-theme="dark"] .filter-panel input,html[data-theme="dark"] .filter-panel select,html[data-theme="dark"] .results-bar select,html[data-theme="dark"] .filter-panel #searchInput,html[data-theme="dark"] .gemstones-page .shop-sidebar input,html[data-theme="dark"] .gemstones-page .shop-sidebar select,html[data-theme="dark"] .contact-page .contact-form input,html[data-theme="dark"] .contact-page .contact-form select,html[data-theme="dark"] .contact-page .contact-form textarea,html[data-theme="dark"] .admin-page .admin-form input,html[data-theme="dark"] .admin-page .admin-form select,html[data-theme="dark"] .admin-page .description-section textarea{background:#0b2830;color:#e8f1f0;border-color:rgba(255,255,255,.16)}
html[data-theme="dark"] .category-tile{background:#12343d;color:#e8f1f0;border-color:rgba(255,255,255,.12)}html[data-theme="dark"] .category-tile:hover{background:#0F766E}html[data-theme="dark"] .jewelry-content h3,html[data-theme="dark"] .price,html[data-theme="dark"] .gemstones-page .popular-card h3,html[data-theme="dark"] .gemstones-page .gem-content h3,html[data-theme="dark"] .gemstones-page .gem-price,html[data-theme="dark"] .product-details-page .detail-info h2,html[data-theme="dark"] .product-details-page .related-products h2,html[data-theme="dark"] .admin-page .admin-section>h2,html[data-theme="dark"] .admin-page .admin-products h2{color:#f2f5f4}
html[data-theme="dark"] .jewelry-hero{background:linear-gradient(110deg,#0c2931,#081f26 58%)}html[data-theme="dark"] .hero-copy h1{color:#f2f5f4}html[data-theme="dark"] .hero-copy>p,html[data-theme="dark"] .section-intro p,html[data-theme="dark"] .final-cta p{color:#a9bec1}html[data-theme="dark"] .product-details-page .detail-image,html[data-theme="dark"] .no-product-image{background:#0b2830}
@media(max-width:600px){.theme-toggle{right:14px;bottom:14px;min-width:44px;width:44px;padding:0;justify-content:center}.theme-label{display:none}}

/* ---------------- GLOBAL RESET ---------------- */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* ---------------- BODY ---------------- */

body{
    font-family: "Segoe UI", Arial, sans-serif;
    background:var(--palette-navy);
    color:var(--palette-white);
    padding-top: 80px;
}

/* ---------------- HEADER / NAVBAR ---------------- */

header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 60px;
    height:80px;

    background:var(--palette-teal);
    position:fixed;
    width:100%;
    top:0;
    z-index:1000;
}

header h1{
    font-family:"Playfair Display", serif;
    color:var(--palette-gold);
    letter-spacing:2px;
    font-size:32px;
}

/* Navigation links */

nav a{
    text-decoration:none;
    color:var(--palette-white);
    margin-left:25px;
    font-size:16px;
    transition:0.3s;
}

nav a:hover{
    color:var(--palette-gold);
}

/* ---------------- HERO SECTION ---------------- */

.hero{
    height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;

    background:
    linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
    url("../images/hero.jpg");

    background-size:cover;
    background-position:center;
}

.hero-content{
    max-width:700px;
}

.hero-content h2{
    font-family:"Playfair Display", serif;
    font-size:70px;
    color:#e6c7a6;
    margin-bottom:20px;
    letter-spacing:4px;
}

/* Hero heading (lower specificity fallback for plain .hero h2) */

.hero h2{
    font-family:"Playfair Display", serif;
    font-size:55px;
    letter-spacing:4px;
}

/* Hero text */

.hero p{
    font-size:18px;
    color:#e6c7a6;
    margin-bottom:25px;
}

/* Hero button */

.hero button{
    padding:12px 30px;
    border:none;
    background:#e6c7a6;
    color:#072e2e;
    font-size:16px;
    cursor:pointer;
    transition:0.3s;
}

.hero button:hover{
    background:#d4af8a;
}

/* ---------------- PRODUCTS SECTION ---------------- */

.products{
    padding:60px 80px;
    text-align:center;
}

.products h2{
    font-family:"Playfair Display", serif;
}

/* Product container layout */

.product-container{
    display:flex;
    justify-content:center;
    gap:30px;
    flex-wrap:wrap;
}

/* PRODUCT GRID */

.product-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap:30px;
    margin-top:40px;
}

/* ---------------- PRODUCT CARD ---------------- */

.product-card{
    background:#0f4c4c;
    border:1px solid #e6c7a6;
    padding:20px;
    width:250px;
    border-radius:8px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.product-card img{
    width:100%;
    height:260px;
    object-fit:cover;
    border-radius:6px;
    margin-bottom:15px;
    transition: all 0.4s ease;
}

.product-card h3{
    margin-bottom:8px;
    color:#f5e6d8;
}

.product-card p{
    margin-bottom:5px;
    color:#e6c7a6;
}

.product-card:hover{
    transform:scale(1.05);
    box-shadow:0 0 20px rgba(230,199,166,0.6);
}

.product-card:hover img{
    transform: scale(1.05);
    box-shadow:
        0 0 20px rgba(230,199,166,0.5),
        0 0 40px rgba(230,199,166,0.2);
}

.product-card:active{
    transform: scale(0.96);
}

/* ---------------- FOOTER ---------------- */

footer{
    text-align:center;
    padding:20px;
    background:#0f4c4c;
    margin-top:50px;
    color:#e6c7a6;
}

.filter-section{
    margin-bottom:30px;
}

.filter-btn{
    padding:10px 20px;
    margin:5px;
    border:none;
    background:#e6c7a6;
    color:#072e2e;
    cursor:pointer;
    font-weight:bold;
}

.filter-btn:hover{
    background:#d4af8a;
}

/* ---------- CATEGORY SECTION ---------- */

.categories{
    padding:70px 60px;
    text-align:center;
}

.categories h2{
    font-family:"Playfair Display", serif;
    font-size:34px;
    margin-bottom:40px;
    color:#e6c7a6;
}

/* grid layout */

.category-container{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
    gap:30px;
}

/* card */

.category-card{
    position:relative;
    overflow:hidden;
    border-radius:8px;
    cursor:pointer;
}

/* image */

.category-card img{
    width:100%;
    height:250px;
    object-fit:cover;
    transition:0.4s;
}

/* hover effect */

.category-card:hover img{
    transform:scale(1.1);
}

/* SEARCH BAR */

.search-container{
    width:100%;
    display:flex;
    justify-content:center;

    margin-top:20px;
    margin-bottom:40px;
}

#searchInput{
    width:350px;
    padding:12px 18px;

    border:1px solid #e6c7a6;
    border-radius:25px;

    background:#0f4c4c;
    color:#f5e6d8;

    font-size:15px;
    outline:none;

    transition:0.3s;
}

/* placeholder text */

#searchInput::placeholder{
    color:#cbb39a;
}

/* focus effect */

#searchInput:focus{
    box-shadow:0 0 10px rgba(230,199,166,0.6);
    border-color:#e6c7a6;
}

/* ---------------- CONTACT PAGE ---------------- */

.contact-section{
    padding:80px 60px;
    text-align:center;
}

.contact-section h2{
    font-family:"Playfair Display", serif;
    font-size:36px;
    margin-bottom:40px;
    color:#e6c7a6;
}

.contact-container{
    display:flex;
    justify-content:center;
    gap:80px;
    flex-wrap:wrap;
}

.contact-info{
    max-width:300px;
    text-align:left;
}

.contact-info h3{
    color:#e6c7a6;
    margin-bottom:10px;
}

.contact-info p{
    margin-bottom:10px;
}

.contact-form{
    display:flex;
    flex-direction:column;
    gap:15px;
    width:350px;
}

.contact-form input,
.contact-form textarea{
    padding:12px;
    border-radius:6px;
    border:1px solid #e6c7a6;
    background:#0b3d3d;
    color:#f5e6d8;
    outline:none;
}

.contact-form button{
    padding:12px;
    background:#e6c7a6;
    border:none;
    color:#072e2e;
    font-weight:bold;
    cursor:pointer;
    border-radius:6px;
    transition:0.3s;
}

.contact-form button:hover{
    background:#d4af8a;
}

/* ---------------- PRODUCT GRID CONTAINER (gemstones page) ---------------- */

#product-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    padding: 20px;
}

/* ================= FILTER BAR (LUXURY THEME) ================= */

.filter-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;

    margin: 30px auto;
    padding: 18px 25px;

    background: #0f4c4c;
    border: 1px solid #c9a85d;
    border-radius: 12px;

    width: fit-content;

    box-shadow: 0 0 20px rgba(0,0,0,0.4);
}

.filter-bar select,
.filter-bar input {
    background: #072e2e;
    color: #f5e6d8;

    border: 1px solid #c9a85d;
    border-radius: 8px;

    padding: 10px 14px;
    font-size: 14px;

    outline: none;
    transition: 0.3s;

    display: inline-block;
}

.filter-bar select:hover,
.filter-bar input:hover,
.filter-bar select:focus,
.filter-bar input:focus {
    border-color: #e6c7a6;
    box-shadow: 0 0 8px rgba(230,199,166,0.4);
}

.filter-bar button {
    background: linear-gradient(135deg, #e6c7a6, #c9a85d);
    color: #072e2e;

    border: none;
    border-radius: 8px;

    padding: 10px 18px;
    font-weight: bold;
    cursor: pointer;

    transition: 0.3s;

    display: inline-block;
}

.filter-bar button:hover {
    transform: scale(1.05);
    box-shadow: 0 0 12px rgba(230,199,166,0.6);
}

#minCarat,
#maxCarat {
    width: 100px;
}

/* ---------------- PRICE SLIDER ---------------- */

.price-slider {
    width: 300px;
    margin: 10px auto;
    text-align: center;
}

.slider-container {
    position: relative;
}

.slider-container input[type="range"] {
    width: 100%;
    appearance: none;
    background: transparent;
    position: absolute;
    pointer-events: none;
}

.slider-container input::-webkit-slider-runnable-track {
    height: 4px;
    background: #444;
}

.slider-container input::-webkit-slider-thumb {
    appearance: none;
    height: 14px;
    width: 14px;
    background: #d4af37;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
}

.slider-values {
    margin-bottom: 8px;
    color: #d4af37;
    font-weight: bold;
}

/* ---------------- PAGINATION ---------------- */

#pagination{
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:40px;
}

#pagination button{
    padding:10px 16px;
    border:none;
    background:#0f4c4c;
    color:#e6c7a6;
    cursor:pointer;
    border-radius:8px;
}

#pagination button:hover{
    background:#d4af37;
    color:#072e2e;
}

.active-page{
    background:#d4af37 !important;
    color:#072e2e !important;
}

/* ---------------- LOADING SKELETON ---------------- */

.skeleton-card{
    background:#0f4c4c;
    border:1px solid #1d6b6b;
    border-radius:12px;
    padding:20px;
}

.skeleton{
    animation:pulse 1.5s infinite;
    background:linear-gradient(
        90deg,
        #0f4c4c 25%,
        #145c5c 50%,
        #0f4c4c 75%
    );

    background-size:200% 100%;
    border-radius:8px;
}

.skeleton-img{
    width:100%;
    height:220px;
    margin-bottom:15px;
}

.skeleton-text{
    height:18px;
    margin-bottom:12px;
}

.skeleton-text.short{
    width:60%;
}

@keyframes pulse{

    0%{
        background-position:200% 0;
    }

    100%{
        background-position:-200% 0;
    }
}

/*
    NOTE: Admin dashboard styling (.admin-section, .admin-form,
    #admin-product-container, .admin-card, #addBtn/#updateBtn/#cancelBtn, etc.)
    used to be duplicated here AND in admin.css. Since admin.html loads
    admin.css after this file, admin.css's rules always won anyway, so the
    duplicate copies here were dead weight and have been removed. Admin
    styling now lives only in admin.css.
*/

/* ===== PRODUCT DETAIL PAGE ===== */

.product-detail{
    max-width:1200px;
    margin:40px auto;
    padding:40px;
}

.detail-container{
    display:flex;
    gap:60px;
    align-items:flex-start;
    justify-content:center;
    flex-wrap:wrap;
}

.detail-image{
    flex:1;
    min-width:350px;
    text-align:center;
}

.detail-image img{
    width:100%;
    max-width:500px;
    height:500px;
    object-fit:cover;
    border-radius:15px;
    border:2px solid #d4af37;
    box-shadow:0 0 30px rgba(212,175,55,.35);
}

.detail-info{
    flex:1;
    min-width:350px;
    max-width:500px;
}

.detail-info h2{
    font-family:"Playfair Display", serif;
    font-size:42px;
    margin-bottom:20px;
    color:#e6c7a6;
}

.detail-info p{
    margin:12px 0;
    font-size:18px;
    line-height:1.6;
}

.price{
    font-size:36px;
    color:#d4af37;
    font-weight:bold;
    margin-bottom:20px;
}

.description{
    margin-top:15px;
    margin-bottom:25px;
    line-height:1.8;
    color:#f5e6d8;
    white-space:pre-wrap;
}

.buy-btn{
    position:relative;
    overflow:hidden;

    margin-top:30px;
    padding:15px 35px;
    font-size:18px;
    border:none;
    border-radius:10px;
    background:linear-gradient(135deg,#e6c76a,#d4af37);
    color:#072e2e;
    font-weight:bold;
    cursor:pointer;
    transition:.3s;
}

.buy-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 0 20px rgba(212,175,55,.5);
}

/* ================= RELATED PRODUCTS ================= */

.related-products{
    padding:70px 80px;
}

.related-products h2{
    text-align:center;
    font-family:"Playfair Display", serif;
    color:#e6c7a6;
    margin-bottom:40px;
    font-size:34px;
}

.related-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:30px;
}

.related-card{
    background:#0f4c4c;
    border-radius:12px;
    overflow:hidden;
    transition:0.3s;
    border:1px solid rgba(230,199,166,.25);
}

.related-card:hover{
    transform:translateY(-8px);
    box-shadow:0 10px 25px rgba(0,0,0,.35);
}

.related-card a{
    color:inherit;
    text-decoration:none;
    display:block;
}

.related-card img{
    width:100%;
    height:220px;
    object-fit:cover;
}

.related-card h3{
    padding:15px 15px 5px;
    color:#f5e6d8;
}

.related-card p{
    padding:0 15px 12px;
    color:#e6c7a6;
}

/* ================================================= */
/* HOME PAGE PREMIUM STYLES */
/* ================================================= */

.product-hero{
    min-height:100vh;
}

.product-hero h2{
    font-size:72px;
    margin-bottom:20px;
}

.product-hero p{
    max-width:800px;
    margin:auto;
    line-height:1.8;
}

.intro-section{
    padding:100px 80px;
    text-align:center;
}

.intro-container{
    max-width:1000px;
    margin:auto;
}

.intro-container h2{
    font-size:42px;
    color:#e6c7a6;
    margin-bottom:25px;
    font-family:"Playfair Display", serif;
}

.intro-container p{
    line-height:1.9;
    margin-bottom:20px;
}

.overlay{
    position:absolute;
    inset:0;

    background:rgba(0,0,0,0.55);

    display:flex;
    flex-direction:column;
    justify-content:flex-end;

    padding:25px;

    transition:.4s;
}

.category-card:hover .overlay{
    background:rgba(0,0,0,0.3);
}

.gem-showcase{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:70px;

    padding:100px 80px;

    flex-wrap:wrap;
}

.gem-showcase.reverse{
    flex-direction:row-reverse;
}

.gem-text{
    flex:1;
    min-width:350px;
}

.gem-image{
    flex:1;
    min-width:350px;
}

.gem-image img{
    width:100%;
    border-radius:15px;

    transition:.5s;
}

.gem-image img:hover{
    transform:scale(1.05);

    box-shadow:
    0 0 25px rgba(230,199,166,.5),
    0 0 60px rgba(230,199,166,.15);
}

.section-tag{
    color:#d4af37;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
}

.gem-text h2{
    margin:15px 0;
    font-size:42px;
    color:#e6c7a6;
    font-family:"Playfair Display", serif;
}

.gem-text p{
    line-height:1.9;
    margin-bottom:20px;
}

.gem-features{
    list-style:none;
    margin-bottom:25px;
}

.gem-features li{
    margin-bottom:12px;
}

.facts-section{
    padding:80px;
    text-align:center;
}

.facts-section h2{
    margin-bottom:50px;
}

.facts-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:25px;
}

.fact-card{
    background:#0f4c4c;
    padding:35px;
    border-radius:12px;

    border:1px solid #1d6b6b;

    transition:.4s;
}

.fact-card:hover{
    transform:translateY(-10px);

    border-color:#d4af37;
}

.fact-card h3{
    color:#e6c7a6;
    margin-bottom:10px;
}

.stats-section{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));

    gap:25px;

    padding:80px;
}

.stat{
    text-align:center;
}

.stat h2{
    color:#d4af37;
    font-size:52px;
}

.stat p{
    margin-top:10px;
}

.comparison-section{
    padding:100px 80px;
    overflow-x:auto;
}

.comparison-section h2{
    text-align:center;
    margin-bottom:40px;
}

.comparison-table{
    width:100%;
    border-collapse:collapse;
}

.comparison-table th{
    background:#0f4c4c;
    color:#e6c7a6;
}

.comparison-table th,
.comparison-table td{
    border:1px solid #1d6b6b;
    padding:18px;
    text-align:center;
}

.comparison-table tr:hover{
    background:#0f4c4c;
}

.investment-section{
    padding:100px 80px;
}

.investment-content{
    max-width:1200px;
    margin:auto;
}

.investment-content h2{
    text-align:center;
    margin-bottom:25px;
}

.investment-content p{
    text-align:center;
    line-height:1.9;
}

.investment-grid{
    margin-top:50px;

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

    gap:25px;
}

.investment-card{
    background:#0f4c4c;

    padding:30px;

    border-radius:12px;

    transition:.4s;
}

.investment-card:hover{
    transform:translateY(-8px);
}

.featured-products{
    padding:100px 80px;
    text-align:center;
}

.featured-products h2{
    margin-bottom:20px;
}

.featured-products > p{
    margin-bottom:40px;
}

.luxury-jewellery{
    padding:100px 80px;
}

.section-heading{
    text-align:center;
    margin-bottom:50px;
}

.jewellery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;
}

.jewel-card{
    background:#0f4c4c;

    border-radius:12px;

    overflow:hidden;

    transition:.4s;
}

.jewel-card:hover{
    transform:translateY(-10px);
}

.jewel-card img{
    width:100%;
    height:280px;
    object-fit:cover;
}

.jewel-card h3{
    padding:20px 20px 10px;
}

.jewel-card p{
    padding:0 20px 20px;
}

.why-us{
    padding:100px 80px;
}

.why-us h2{
    text-align:center;
    margin-bottom:50px;
}

.why-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:25px;
}

.why-card{
    background:#0f4c4c;

    padding:30px;

    border-radius:12px;

    transition:.4s;
}

.why-card:hover{
    transform:translateY(-10px);
}

.why-card h3{
    color:#e6c7a6;
    margin-bottom:15px;
}

.certifications{
    padding:100px 80px;
    text-align:center;
}

.certificate-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:25px;

    margin-top:40px;
}

.certificate-card{
    background:#0f4c4c;

    padding:40px;

    border-radius:12px;

    transition:.4s;
}

.certificate-card:hover{
    transform:scale(1.05);
}

.testimonial-section{
    padding:100px 80px;
    text-align:center;
}

.testimonial-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:25px;

    margin-top:40px;
}

.testimonial-card{
    background:#0f4c4c;

    padding:30px;

    border-radius:12px;
}

.testimonial-card p{
    margin:20px 0;
    line-height:1.8;
}

.faq-section{
    padding:100px 80px;
}

.faq-section h2{
    text-align:center;
    margin-bottom:50px;
}

.faq{
    background:#0f4c4c;

    padding:25px;

    margin-bottom:15px;

    border-radius:10px;
}

.faq h3{
    color:#e6c7a6;
    margin-bottom:10px;
}

.contact-banner{
    text-align:center;

    padding:120px 40px;

    background:
    linear-gradient(
        rgba(0,0,0,.6),
        rgba(0,0,0,.6)
    ),
    url("../images/hero.jpg");

    background-size:cover;
    background-position:center;
}

.contact-banner h2{
    font-size:50px;
    color:#e6c7a6;
}

.contact-banner p{
    max-width:800px;
    margin:25px auto;
}

.footer-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:30px;

    padding:40px 60px;
}

.footer-grid h3{
    color:#e6c7a6;
    margin-bottom:15px;
}

.footer-grid a{
    color:#f5e6d8;
    text-decoration:none;
}

.footer-grid a:hover{
    color:#d4af37;
}

.copyright{
    text-align:center;
    padding-bottom:20px;
}

/* ================================================= */
/* REVEAL ANIMATION */
/* ================================================= */

.gem-showcase,
.fact-card,
.product-card,
.jewel-card,
.why-card,
.certificate-card,
.testimonial-card,
.faq{

    opacity:0;

    transform:translateY(40px);

    transition:.8s ease;
}

.show{
    opacity:1;
    transform:translateY(0);
}

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

@media(max-width:768px){

    header{
        padding:20px;
    }

    .product-hero h2{
        font-size:42px;
    }

    .gem-showcase{
        padding:60px 25px;
    }

    .intro-section,
    .facts-section,
    .investment-section,
    .luxury-jewellery,
    .why-us,
    .certifications,
    .testimonial-section,
    .faq-section{
        padding:60px 25px;
    }

    .contact-banner h2{
        font-size:34px;
    }

    .footer-grid{
        padding:30px;
    }

}