/* ===========================================
   LUVYRA LUXURY WEBSITE
   PREMIUM STYLE.CSS
=========================================== */

/* GOOGLE FONTS */

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


/* RESET */

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

html{
    scroll-behavior:smooth;
}

body{

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

    background:

    radial-gradient(
    circle at top left,
    rgba(212,175,55,0.15),
    transparent 35%
    ),

    radial-gradient(
    circle at bottom right,
    rgba(212,175,55,0.10),
    transparent 35%
    ),

    #0d0d0d;

    color:#f8f8f8;

    overflow-x:hidden;

}


/* COLORS */

:root{

    --gold:#D4AF37;

    --black:#0d0d0d;

    --white:#f8f8f8;

    --gray:#999;

    --glass:
    rgba(255,255,255,0.06);

}


/* CONTAINER */

.container{

    width:90%;

    max-width:1400px;

    margin:auto;

}


/* ================= LUXURY NAVBAR GLASS ================= */

header{

    position:fixed;

    top:42px;

    left:0;

    width:100%;

    z-index:999;

    background:

    linear-gradient(
        135deg,
        rgba(255,255,255,0.12),
        rgba(255,255,255,0.03)
    );

    backdrop-filter:blur(18px);

    border:

    1px solid rgba(212,175,55,0.35);

    box-shadow:

    0 10px 40px rgba(0,0,0,0.35);

    overflow:hidden;

}
/* REFLECTION EFFECT */

header::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:50%;

    height:100%;

    background:

    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.25),
        transparent
    );

    transform:skewX(-25deg);

    animation:navshine 6s infinite;

}


@keyframes navshine{

0%{

    left:-100%;

}

40%{

    left:150%;

}

100%{

    left:150%;

}

}
}



nav{

    height:90px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.logo{

    font-family:'Cormorant Garamond',serif;

    font-size:42px;

    font-weight:700;

    letter-spacing:5px;

    color:var(--gold);

    text-decoration:none;

}




nav ul{

    display:flex;

    list-style:none;

    gap:40px;

}



nav ul li a{

    color:white;

    text-decoration:none;

    font-size:14px;

    letter-spacing:2px;

    transition:.4s;

}


nav ul li a:hover{

    color:var(--gold);

}




.cart-btn{

    color:var(--gold);

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

    padding:12px 25px;

    text-decoration:none;

    transition:.4s;

}


.cart-btn:hover{

    background:var(--gold);

    color:black;

}



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


.hero{

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;


    background:

    linear-gradient(

    rgba(0,0,0,.55),

    rgba(0,0,0,.85)

    ),

    radial-gradient(

    circle,

    rgba(212,175,55,.30),

    transparent 45%

    ),

    url("images/hero.jpg");


    background-size:cover;

    background-position:center;


}



.hero h1{

    font-family:'Cormorant Garamond',serif;

    font-size:110px;

    letter-spacing:10px;

    color:var(--gold);


}


.hero p{

    font-size:25px;

    font-style:italic;

    margin-top:20px;

    color:white;

}




.hero button{

    margin-top:45px;

    padding:18px 55px;

    background:var(--gold);

    border:none;

    cursor:pointer;

    font-weight:600;

    letter-spacing:2px;

    transition:.4s;

}



.hero button:hover{

    transform:translateY(-5px);

    box-shadow:

    0 15px 35px rgba(212,175,55,.35);

}




/* ================= SECTIONS ================= */


.products{

    padding:120px 0;

}



.section-title{

    text-align:center;

    font-family:'Cormorant Garamond',serif;

    font-size:65px;

    color:var(--gold);

    margin-bottom:70px;

}



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


.product-grid{

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(260px,1fr));

    gap:35px;

}



.product{

    background:

    linear-gradient(

    145deg,

    rgba(255,255,255,.08),

    rgba(255,255,255,.02)

    );


    backdrop-filter:blur(15px);

    padding:30px;

    border-radius:15px;

    border:

    1px solid rgba(212,175,55,.25);


    transition:.5s;

}


.product:hover{

    transform:translateY(-12px);

    border-color:var(--gold);


    box-shadow:

    0 20px 50px rgba(212,175,55,.18);

}



.product img{

    width:100%;

    height:330px;

    object-fit:cover;

    border-radius:10px;

}



.product h3{

    margin-top:25px;

    font-family:'Cormorant Garamond',serif;

    font-size:32px;

    color:white;

}




.product p{

    color:#ccc;

    line-height:1.8;

    margin-top:15px;

}


.price{

    color:var(--gold)!important;

    font-weight:bold;

}




.product button{

    margin-top:20px;

    width:100%;

    padding:15px;

    background:transparent;

    border:

    1px solid var(--gold);

    color:var(--gold);

    cursor:pointer;

    transition:.4s;

}



.product button:hover{

    background:var(--gold);

    color:black;

}




/* ================= FOOTER ================= */


footer{

    background:#050505;

    padding:80px 0;

    text-align:center;

    border-top:

    1px solid rgba(212,175,55,.2);

}



footer h2{

    font-family:'Cormorant Garamond',serif;

    font-size:50px;

    color:var(--gold);

}



footer p{

    color:#888;

    margin-top:15px;

}



/* ================= FORMS ================= */


input,
textarea{

    background:#111;

    color:white;

    border:

    1px solid rgba(212,175,55,.3);

    border-radius:8px;

}




input:focus,
textarea:focus{

    outline:none;

    border-color:var(--gold);

}




/* ================= RESPONSIVE ================= */


@media(max-width:900px){

    nav ul{

        display:none;

    }

    .hero h1{

        font-size:60px;

    }

    .section-title{

        font-size:45px;

    }

}/* ================= FOOTER PREMIUM ================= */

.footer-container{

    display:grid;

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

    gap:40px;

    text-align:left;

}


footer h3{

    color:var(--gold);

    margin-bottom:20px;

    font-size:20px;

}


.footer-links{

    display:flex;

    flex-direction:column;

    gap:12px;

}


.footer-links a{

    color:#aaa;

    text-decoration:none;

    transition:.3s;

}


.footer-links a:hover{

    color:var(--gold);

}


.footer-brand h2{

    font-size:55px;

}


.footer-brand p{

    color:#888;

}


.footer-newsletter input{

    width:100%;

    padding:15px;

    margin-top:15px;

}


.footer-newsletter button{

    margin-top:15px;

    padding:14px 30px;

    background:var(--gold);

    border:none;

    cursor:pointer;

}


.copyright{

    margin-top:60px;

    padding-top:25px;

    border-top:

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

    text-align:center;

}
/* ================= COLLECTION HERO ================= */

.collection-hero{

    height:70vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    background:

    linear-gradient(
    rgba(0,0,0,.65),
    rgba(0,0,0,.85)
    ),

    radial-gradient(
    circle,
    rgba(212,175,55,.25),
    transparent 40%
    ),

    url("images/collection.jpg");

    background-size:cover;

    background-position:center;

}


.collection-overlay h1{

    font-family:'Cormorant Garamond',serif;

    font-size:80px;

    letter-spacing:8px;

    color:var(--gold);

}


.collection-overlay p{

    margin-top:20px;

    font-size:22px;

    color:white;

}
/* ================= MOBILE MENU ================= */

.menu-btn{

    display:none;

    background:none;

    border:none;

    color:var(--gold);

    font-size:30px;

    cursor:pointer;

}


@media(max-width:900px){

.menu-btn{

    display:block;

}


nav ul{

    position:absolute;

    top:90px;

    left:0;

    width:100%;

    background:#050505;

    flex-direction:column;

    align-items:center;

    padding:30px 0;

    gap:25px;

    display:none;

}


nav ul.active{

    display:flex;

}

}
/* ================= SCROLL ANIMATION ================= */

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:all 0.8s ease;

}


.fade-up.show{

    opacity:1;

    transform:translateY(0);

}
/* ================= ANNOUNCEMENT BAR ================= */

.announcement{

    width:100%;

    background:#000;

    color:var(--gold);

    text-align:center;

    padding:12px;

    font-size:13px;

    letter-spacing:3px;

    border-bottom:

    1px solid rgba(212,175,55,.25);

}


.announcement p{

    margin:0;

}
/* ================= COLLECTION FILTER ================= */

.categories{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-bottom:60px;

    flex-wrap:wrap;

}


.categories button{

    padding:12px 30px;

    background:transparent;

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

    color:var(--gold);

    cursor:pointer;

    transition:.3s;

}


.categories button:hover{

    background:var(--gold);

    color:black;

}




/* PRODUCT BADGE */

.badge{

    position:absolute;

    top:20px;

    left:20px;

    background:var(--gold);

    color:black;

    padding:7px 15px;

    font-size:12px;

    letter-spacing:2px;

}


.product{

    position:relative;

}
/* ================= PRODUCT TEXT FIX ================= */

.product img{

    display:block;

    margin-bottom:25px;

}


.product h3{

    margin-top:20px;

    margin-bottom:15px;

    line-height:1.2;

}


.product p{

    margin-bottom:15px;

    line-height:1.7;

}


.product .price{

    margin-top:15px;

    margin-bottom:20px;

}


.product button{

    margin-top:10px;

}

/* CHECKOUT FORM */

.product form{

display:flex;

flex-direction:column;

gap:15px;

}

.product input,
.product textarea{

padding:15px;

font-size:15px;

}

.product hr{

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

margin:25px 0;

}
/* ================= 404 PAGE ================= */

.error-page{

height:100vh;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

background:

radial-gradient(
circle,
rgba(212,175,55,.2),
transparent 40%
),

#0d0d0d;

}


.error-page h1{

font-family:'Cormorant Garamond',serif;

font-size:160px;

color:var(--gold);

}


.error-page h2{

font-size:40px;

margin-bottom:20px;

}


.error-page p{

color:#aaa;

margin-bottom:35px;

}


.error-page a{

padding:15px 40px;

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

color:var(--gold);

text-decoration:none;

}


.error-page a:hover{

background:var(--gold);

color:black;

}
/* ================= CART ITEMS ================= */

.cart-box{

display:flex;

flex-direction:column;

gap:20px;

}


.cart-item{

padding:20px;

border:

1px solid rgba(212,175,55,.25);

border-radius:12px;

}


.cart-item button{

padding:8px 15px;

margin:5px;

background:transparent;

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

color:var(--gold);

cursor:pointer;

}


.cart-item button:hover{

background:var(--gold);

color:black;

}
/* ================= LUXURY BUTTON POLISH ================= */

button,
.cart-btn,
.error-page a{

    position:relative;

    overflow:hidden;

    transition:.4s ease;

}


button:hover,
.cart-btn:hover,
.error-page a:hover{

    transform:translateY(-4px);

    box-shadow:

    0 15px 35px rgba(212,175,55,.35);

}


button:active{

    transform:scale(.96);

}
/* ================= BACK TO TOP ================= */

#topBtn{

position:fixed;

right:30px;

bottom:30px;

width:50px;

height:50px;

border-radius:50%;

background:var(--gold);

color:black;

border:none;

font-size:25px;

cursor:pointer;

display:none;

z-index:999;

}


#topBtn:hover{

box-shadow:

0 0 25px rgba(212,175,55,.6);

}
/* ================= NAVBAR FINAL ALIGNMENT FIX ================= */

header nav{

    display:flex;

    align-items:center;

    justify-content:space-between;

    width:100%;

}


header .container{

    width:90%;

    max-width:1200px;

    margin:auto;

}


nav ul{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:35px;

    margin:0 auto;

    padding:0;

    list-style:none;

}


nav ul li a{

    display:block;

    color:white;

    text-decoration:none;

    font-size:14px;

    letter-spacing:2px;

}


.logo{

    flex-shrink:0;

}


.cart-btn{

    flex-shrink:0;

}


/* mobile pa touche */

@media(max-width:900px){

nav ul{

    margin:0;

}

}
/* ================= SOCIAL ICONS ================= */

.social-icons{

    display:flex;

    gap:18px;

    margin-top:15px;

}

.social-icons a{

    width:48px;

    height:48px;

    display:flex;

    justify-content:center;

    align-items:center;

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

    border-radius:50%;

    color:var(--gold);

    font-size:20px;

    text-decoration:none;

    transition:.35s ease;

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

}

.social-icons a:hover{

    background:var(--gold);

    color:#000;

    transform:translateY(-6px) scale(1.08);

    box-shadow:0 0 25px rgba(212,175,55,.45);

}
/* ================= LOGO ================= */

.logo{
    display:flex;
    align-items:center;
    margin-left:25px;
}

.logo img{
    height:52px;
    width:auto;
    display:block;
    transition:0.3s ease;
    filter:drop-shadow(0 0 8px rgba(212,175,55,.25));
}

.logo img:hover{
    transform:scale(1.05);
    filter:drop-shadow(0 0 15px rgba(212,175,55,.45));


/* ===== COLLECTION PRODUCTS CENTER FIX ===== */

.products-container,
.product-grid,
.products-grid,
.collection-grid {
    width: 100%;
    max-width: 1200px;
    margin: 60px auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    justify-content: center;
    align-items: start;
    padding: 0 20px;
}

/* Product cards */
.product-card {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
}

/* Collection section */
.collection-section {
    width: 100%;
    padding: 0;
}

/* Category buttons */
.filter-buttons,
.category-buttons {
    width: fit-content;
    margin: 50px auto;
    display: flex;
    justify-content: center;
    gap: 25px;
}

/* Mobile */
@media(max-width:900px){
    .products-container,
    .product-grid,
    .products-grid,
    .collection-grid {
        grid-template-columns: 1fr;
    }
}
/* =========================
   COLLECTION PAGE
========================= */

.collection-section {
    width: 100%;
    padding: 80px 60px;
    box-sizing: border-box;
}

/* TITLE */

.collection-section h1 {
    text-align: center;
    color: #d4af37;
    font-size: 70px;
    margin-bottom: 50px;
}

/* FILTER BUTTONS */

.category-filter {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-bottom: 70px;
}

.category-filter button {
    background: transparent;
    border: 1px solid #d4af37;
    color: #d4af37;
    padding: 15px 45px;
    font-size: 16px;
    cursor: pointer;
}

/* PRODUCTS AREA */

.products-grid {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 45px;

    justify-content: center;
}

/* PRODUCT CARD */

.product-card {
    width: 100%;
    background: #111;
    border: 1px solid rgba(212,175,55,0.35);
    border-radius: 18px;
    overflow: hidden;
    position: relative;
}

/* IMAGE */

.product-card img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
}

/* BADGE */

.product-badge {
    position: absolute;
    top: 20px;
    left: 20px;

    background: #d4af37;
    color: black;

    padding: 12px 25px;
    font-size: 14px;
    letter-spacing: 3px;
}

/* PRODUCT TEXT */

.product-info {
    text-align: center;
    padding: 25px;
}

.product-info h3 {
    color: white;
}

.product-info p {
    color: #d4af37;
}
/* ==========================
   MOBILE RESPONSIVE FIX
========================== */

@media (max-width: 768px){

    body{
        overflow-x:hidden;
    }


    /* HERO */
    .hero h1,
    .collection-hero h1{
        font-size:48px;
        line-height:1.1;
        text-align:center;
        padding:0 20px;
    }


    .hero p,
    .collection-hero p{
        font-size:18px;
        text-align:center;
        padding:0 25px;
    }



    /* NAVBAR */

    .navbar{
        height:90px;
        padding:0 20px;
        display:flex;
        justify-content:space-between;
        align-items:center;
    }


    .nav-links{
        display:none;
    }


    .menu-toggle{
        display:block;
        font-size:32px;
    }


    .logo img{
        width:70px;
    }


    .cart-btn{
        font-size:18px;
        padding:15px 25px;
    }



    /* MOBILE MENU OPEN */

    .nav-links.active{
        display:flex;
        position:absolute;
        top:90px;
        left:0;
        width:100%;
        background:#111;
        flex-direction:column;
        text-align:center;
        padding:30px 0;
        z-index:999;
    }



    /* FILTER BUTTONS */

    .category-filter{
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:20px;
    }


    .category-filter button{
        width:160px;
    }



    /* PRODUCTS */

    .products-grid{
        grid-template-columns:1fr;
        gap:30px;
        padding:20px;
    }


    .product-card{
        width:100%;
        padding:25px;
    }


    .product-card img{
        width:100%;
        height:auto;
    }


    .product-card h2{
        font-size:32px;
    }


    .product-card p{
        font-size:18px;
    }


    .add-cart{
        width:100%;
    }



    /* STORY CARDS */

    .story-container{
        padding:20px;
    }


    .story-card{
        padding:40px 25px;
    }


    .story-card h2{
        font-size:38px;
    }


    .story-card p{
        font-size:20px;
    }



    /* FOOTER */

    footer{
        text-align:center;
        padding:40px 20px;
    }


}