/*====================================================
                GOOGLE FONT
=====================================================*/

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

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

:root{

    --primary:#111111;
    --secondary:#ffffff;
    --gold:#d4af37;
    --text:#333333;
    --light:#f8f8f8;
    --border:#e5e5e5;
    --shadow:0 15px 35px rgba(0,0,0,.08);
    --transition:.35s ease;

}

/*====================================================
                RESET
=====================================================*/

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

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;
    background:var(--light);
    color:var(--text);
    overflow-x:hidden;

}

img{

    width:100%;
    display:block;

}

a{

    text-decoration:none;

}

ul{

    list-style:none;

}

section{

    padding:90px 8%;

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:var(--gold);

}

::-webkit-scrollbar-track{

    background:#f1f1f1;

}

/*====================================================
                TOP BAR
=====================================================*/

.top-bar{

    background:#111;
    color:#fff;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:10px 8%;

    font-size:14px;

}

.top-right{

    display:flex;
    gap:30px;

}

.top-right span i{

    color:var(--gold);
    margin-right:8px;

}

/*====================================================
                HEADER
=====================================================*/

header{

    background:#fff;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:18px 8%;

    position:sticky;
    top:0;

    z-index:1000;

    box-shadow:0 5px 20px rgba(0,0,0,.05);

}

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

.logo img{

    width:170px;

}

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

.search-box{

    width:45%;

    display:flex;

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

    border-radius:50px;

    overflow:hidden;

    transition:var(--transition);

    background:#fff;

}

.search-box:hover{

    border-color:var(--gold);

}

.search-box input{

    width:100%;

    border:none;

    outline:none;

    padding:14px 20px;

    font-size:15px;

}

.search-box button{

    width:65px;

    border:none;

    background:var(--gold);

    color:#fff;

    cursor:pointer;

    font-size:18px;

    transition:var(--transition);

}

.search-box button:hover{

    background:#111;

}

/*====================================================
                HEADER ICONS
=====================================================*/

.header-icons{

    display:flex;
    gap:35px;

}

.header-icons a{

    color:#222;

    display:flex;
    flex-direction:column;
    align-items:center;

    transition:var(--transition);

}

.header-icons i{

    font-size:22px;
    margin-bottom:6px;

}

.header-icons a:hover{

    color:var(--gold);

    transform:translateY(-4px);

}

.icon-with-badge{

    position:relative;

}

.icon-badge{

    position:absolute;
    top:-8px;
    right:-12px;

    background:var(--gold);
    color:#fff;

    font-size:11px;
    font-weight:600;

    width:18px;
    height:18px;

    border-radius:50%;

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

    line-height:1;

}

/*====================================================
                NAVIGATION
=====================================================*/

nav{

    background:#fff;

    border-top:1px solid #eee;
    border-bottom:1px solid #eee;

}

nav ul{

    display:flex;

    justify-content:center;

    gap:50px;

    padding:18px 0;

}

nav ul li a{

    color:#222;

    font-weight:600;

    transition:var(--transition);

    position:relative;

}

nav ul li a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:0;

    height:2px;

    background:var(--gold);

    transition:var(--transition);

}

nav ul li a:hover{

    color:var(--gold);

}

nav ul li a:hover::after{

    width:100%;

}

nav ul li a.active{

    color:var(--gold);

}

nav ul li a.active::after{

    width:100%;

}
/*====================================================
                HERO SECTION
=====================================================*/

.hero{

    position:relative;

    width:100%;
    height:100vh;

    background:url("assets/hero.jpg") center center/cover no-repeat;

    display:flex;
    align-items:center;

    overflow:hidden;

}

/* Dark Overlay */

.overlay{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

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

}

/* Hero Content */

.hero-content{

    position:relative;

    z-index:10;

    max-width:700px;

    margin-left:8%;

    color:#fff;

    animation:fadeUp 1.2s ease;

}

/* Small Heading */

.small-heading{

    color:var(--gold);

    letter-spacing:4px;

    text-transform:uppercase;

    font-weight:600;

    margin-bottom:20px;

    font-size:15px;

}

/* Main Heading */

.hero-content h1{

    font-size:70px;

    line-height:1.15;

    margin-bottom:25px;

    font-weight:800;

}

/* Description */

.hero-content p{

    font-size:18px;

    line-height:1.8;

    margin-bottom:40px;

    max-width:550px;

}

/* Buttons */

.hero-buttons{

    display:flex;

    gap:20px;

}

/* Shop Button */

.shop-btn{

    background:var(--gold);

    color:#fff;

    padding:16px 40px;

    border-radius:50px;

    font-weight:600;

    transition:.4s;

    box-shadow:0 15px 30px rgba(0,0,0,.20);

}

.shop-btn:hover{

    background:#fff;

    color:#111;

    transform:translateY(-6px);

}

/* Collection Button */

.collection-btn{

    border:2px solid #fff;

    color:#fff;

    padding:16px 40px;

    border-radius:50px;

    font-weight:600;

    transition:.4s;

}

.collection-btn:hover{

    background:#fff;

    color:#111;

}

/*====================================================
                HERO IMAGE ANIMATION
=====================================================*/

.hero::before{

    content:"";

    position:absolute;

    width:100%;
    height:100%;

    background:inherit;

    animation:zoomHero 18s infinite alternate;

}

/*====================================================
                ANIMATIONS
=====================================================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes zoomHero{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.08);

    }

}

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

.section-title{

    text-align:center;

    margin-bottom:60px;

}

.section-title h2{

    font-size:42px;

    color:#111;

    margin-bottom:15px;

}

.section-title p{

    color:#666;

    font-size:17px;

}

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

@media(max-width:992px){

.hero-content h1{

    font-size:50px;

}

.hero-content{

    margin:0 8%;

}

}

@media(max-width:768px){

.hero{

    height:85vh;

}

.hero-content{

    text-align:center;

    max-width:100%;

}

.hero-content h1{

    font-size:38px;

}

.hero-content p{

    font-size:16px;

}

.hero-buttons{

    justify-content:center;

    flex-wrap:wrap;

}

}

@media(max-width:480px){

.hero-content h1{

    font-size:30px;

}

.small-heading{

    font-size:13px;

    letter-spacing:2px;

}

.shop-btn,
.collection-btn{

    width:100%;

    text-align:center;

}

}
/*====================================================
            FEATURED PRODUCTS
=====================================================*/

.featured-products{

    background:#f8f8f8;

}

.product-container{

    display:grid;

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

    gap:35px;

}

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

.product-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    position:relative;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:.4s;

    cursor:pointer;

}

.product-card:hover{

    transform:translateY(-12px);

    box-shadow:0 25px 50px rgba(0,0,0,.18);

}

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

.product-card img{

    width:100%;

    height:330px;

    object-fit:cover;

    transition:.5s;

}

.product-card:hover img{

    transform:scale(1.08);

}

/*====================================================
                PRODUCT BADGE
=====================================================*/

.badge{

    position:absolute;

    top:18px;

    left:18px;

    background:#111;

    color:#fff;

    padding:7px 15px;

    border-radius:30px;

    font-size:13px;

    font-weight:600;

    z-index:100;

}

.product-card:nth-child(2) .badge{

    background:#d4af37;

}

.product-card:nth-child(3) .badge{

    background:#ff4d4d;

}

.product-card:nth-child(4) .badge{

    background:#2ecc71;

}

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

.product-card h3{

    font-size:22px;

    padding:25px 25px 10px;

    color:#222;

}

.rating{

    color:#ffc107;

    padding:0 25px;

    font-size:18px;

    margin-bottom:15px;

}

.price{

    display:flex;

    align-items:center;

    gap:15px;

    padding:0 25px;

    margin-bottom:25px;

}

.new-price{

    color:#111;

    font-size:24px;

    font-weight:700;

}

.old-price{

    color:#888;

    text-decoration:line-through;

    font-size:18px;

}

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

.product-btn{

    display:block;

    margin:0 25px 25px;

    text-align:center;

    background:#111;

    color:#fff;

    padding:15px;

    border-radius:50px;

    font-weight:600;

    transition:.35s;

}

.product-btn:hover{

    background:#d4af37;

    color:#111;

}

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

.product-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:330px;

    background:linear-gradient(to top,
    rgba(0,0,0,.35),
    transparent);

    opacity:0;

    transition:.4s;

}

.product-card:hover::before{

    opacity:1;

}

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

.product-card::after{

    content:"";

    position:absolute;

    top:-100%;

    left:-100%;

    width:60%;

    height:200%;

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

    transform:rotate(25deg);

    transition:.7s;

}

.product-card:hover::after{

    left:150%;

}

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

@media(max-width:992px){

.product-container{

    grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.product-container{

    grid-template-columns:1fr;

}

.product-card img{

    height:300px;

}

.section-title h2{

    font-size:34px;

}

}

@media(max-width:480px){

.product-card h3{

    font-size:20px;

}

.new-price{

    font-size:22px;

}

.old-price{

    font-size:16px;

}

.product-btn{

    padding:13px;

}

}
/*====================================================
                SHOP BY CATEGORY
=====================================================*/

.categories{

    background:#ffffff;

}

.category-container{

    display:grid;

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

    gap:35px;

}

.category-card{

    position:relative;

    overflow:hidden;

    border-radius:20px;

    cursor:pointer;

    height:420px;

    box-shadow:0 20px 45px rgba(0,0,0,.10);

    transition:.4s;

}

.category-card:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 60px rgba(0,0,0,.20);

}

.category-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s;

}

.category-card:hover img{

    transform:scale(1.12);

}

.category-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(to top,
    rgba(0,0,0,.75),
    rgba(0,0,0,.05));

}

.category-card h3{

    position:absolute;

    bottom:35px;

    left:35px;

    color:#fff;

    font-size:30px;

    font-weight:700;

    z-index:2;

}

/*====================================================
                OFFER BANNER
=====================================================*/

.offer-banner{

    background:linear-gradient(135deg,#111,#2c2c2c);

    color:#fff;

    border-radius:25px;

    margin:90px 8%;

    padding:90px 70px;

    position:relative;

    overflow:hidden;

    box-shadow:0 25px 50px rgba(0,0,0,.25);

}

.offer-banner::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    background:rgba(212,175,55,.12);

    border-radius:50%;

    right:-120px;

    top:-120px;

}

.offer-banner::after{

    content:"";

    position:absolute;

    width:250px;

    height:250px;

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

    border-radius:50%;

    left:-60px;

    bottom:-60px;

}

.offer-content{

    position:relative;

    z-index:2;

    max-width:650px;

}

.offer-content h4{

    color:var(--gold);

    font-size:18px;

    letter-spacing:3px;

    margin-bottom:20px;

}

.offer-content h2{

    font-size:58px;

    margin-bottom:25px;

    line-height:1.2;

}

.offer-content p{

    font-size:18px;

    line-height:1.8;

    margin-bottom:40px;

}

.offer-btn{

    display:inline-block;

    background:var(--gold);

    color:#111;

    padding:16px 45px;

    border-radius:50px;

    font-weight:700;

    transition:.35s;

}

.offer-btn:hover{

    background:#fff;

    transform:translateY(-6px);

}

/*====================================================
                WHY CHOOSE US
=====================================================*/

.why-us{

    background:#f8f8f8;

}

.why-container{

    display:grid;

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

    gap:35px;

}

.why-card{

    background:#fff;

    text-align:center;

    padding:45px 30px;

    border-radius:20px;

    transition:.4s;

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

}

.why-card:hover{

    transform:translateY(-12px);

    box-shadow:0 25px 55px rgba(0,0,0,.18);

}

.why-card i{

    width:90px;

    height:90px;

    line-height:90px;

    border-radius:50%;

    background:var(--gold);

    color:#fff;

    font-size:34px;

    margin-bottom:25px;

    transition:.4s;

}

.why-card:hover i{

    transform:rotate(360deg);

}

.why-card h3{

    font-size:24px;

    margin-bottom:15px;

}

.why-card p{

    color:#666;

    line-height:1.8;

}

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

@media(max-width:992px){

.offer-content h2{

    font-size:42px;

}

}

@media(max-width:768px){

.offer-banner{

    padding:60px 35px;

    margin:70px 20px;

}

.offer-content h2{

    font-size:34px;

}

.offer-content p{

    font-size:16px;

}

.category-card{

    height:320px;

}

.category-card h3{

    font-size:24px;

}

}
/*====================================================
                TESTIMONIALS
=====================================================*/

.testimonials{

    background:#ffffff;

}

.testimonial-container{

    display:grid;

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

    gap:35px;

}

.testimonial-card{

    background:#fff;

    padding:40px;

    border-radius:20px;

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

    transition:.4s;

    position:relative;

    overflow:hidden;

}

.testimonial-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 55px rgba(0,0,0,.15);

}

.testimonial-card::before{

    content:"★★★★★";

    position:absolute;

    top:20px;

    right:25px;

    color:rgba(212,175,55,.15);

    font-size:70px;

    font-weight:bold;

}

.testimonial-card p{

    font-size:16px;

    line-height:1.9;

    color:#555;

    margin-bottom:25px;

}

.testimonial-card h4{

    color:#d4af37;

    margin-bottom:8px;

}

.testimonial-card span{

    color:#777;

    font-weight:600;

}

/*====================================================
                NEWSLETTER
=====================================================*/

.newsletter{

    background:linear-gradient(135deg,#111,#1f1f1f);

    color:#fff;

    text-align:center;

    padding:90px 8%;

}

.newsletter h2{

    font-size:42px;

    margin-bottom:20px;

}

.newsletter p{

    color:#ddd;

    margin-bottom:35px;

}

.newsletter form{

    max-width:650px;

    margin:auto;

    display:flex;

    border-radius:60px;

    overflow:hidden;

    background:#fff;

}

.newsletter input{

    flex:1;

    border:none;

    outline:none;

    padding:18px 25px;

    font-size:16px;

}

.newsletter button{

    border:none;

    background:#d4af37;

    color:#111;

    padding:18px 40px;

    cursor:pointer;

    font-weight:700;

    transition:.3s;

}

.newsletter button:hover{

    background:#fff;

}

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

footer{

    background:#0d0d0d;

    color:#fff;

    padding:80px 8% 30px;

}

.footer-container{

    display:grid;

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

    gap:45px;

}

.footer-box img{

    width:180px;

    margin-bottom:20px;

}

.footer-box h3{

    margin-bottom:20px;

    color:#d4af37;

}

.footer-box p{

    color:#bbb;

    line-height:1.8;

    margin-bottom:12px;

}

.footer-box ul li{

    margin-bottom:12px;

}

.footer-box ul li a{

    color:#bbb;

    transition:.3s;

}

.footer-box ul li a:hover{

    color:#d4af37;

    padding-left:8px;

}

.social-icons{

    display:flex;

    gap:15px;

    margin-top:20px;

}

.social-icons a{

    width:45px;

    height:45px;

    border-radius:50%;

    background:#1d1d1d;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    transition:.3s;

}

.social-icons a:hover{

    background:#d4af37;

    color:#111;

    transform:translateY(-6px);

}

.copyright{

    margin-top:60px;

    padding-top:25px;

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

    text-align:center;

    color:#999;

    font-size:15px;

}

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

@media(max-width:992px){

    header{

        flex-wrap:wrap;

        gap:20px;

    }

    .search-box{

        width:100%;

    }

}

@media(max-width:768px){

    .top-bar{

        display:none;

    }

    nav ul{

        flex-wrap:wrap;

        gap:20px;

        padding:15px;

    }

    .newsletter form{

        flex-direction:column;

        border-radius:20px;

    }

    .newsletter input{

        width:100%;

    }

    .newsletter button{

        width:100%;

    }

    .footer-container{

        text-align:center;

    }

    .social-icons{

        justify-content:center;

    }

}

@media(max-width:480px){

    section{

        padding:60px 20px;

    }

    .section-title h2{

        font-size:28px;

    }

    .newsletter h2{

        font-size:30px;

    }

    .offer-content h2{

        font-size:28px;

    }

}

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

::selection{

    background:#d4af37;

    color:#fff;

}

/*====================================================
                SIMPLE FADE ANIMATION
=====================================================*/

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

body{

    animation:fadeIn .8s ease;

}
/*====================================================
                SHOP PAGE BANNER
=====================================================*/

.shop-banner{

    height:320px;

    /* NOTE: assets/shop-banner.jpg was delivered as a 0-byte/corrupted
       file and no legitimate replacement photo was available, so this
       uses a brand-color gradient instead of a missing photo. Swap in
       a real photo later by adding ", url('assets/shop-banner.jpg')"
       after the second gradient stop below. */
    background:
    linear-gradient(
        rgba(0,0,0,.55),
        rgba(0,0,0,.55)
    ),
    linear-gradient(
        135deg,
        var(--primary),
        #2b2b2b 45%,
        var(--gold)
    );

    background-size:cover;

    background-position:center;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    color:white;

    margin-bottom:40px;

}


.shop-banner-content h1{

    font-size:45px;

    font-weight:800;

    margin-bottom:15px;

}


.shop-banner-content p{

    font-size:18px;

    color:#eee;

}





/*====================================================
                SHOP FILTER BAR
=====================================================*/


.shop-filter{

    margin:30px 8%;

    padding:20px 30px;

    background:#fff;

    border-radius:15px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}


.shop-filter select{

    padding:12px 25px;

    border-radius:30px;

    border:1px solid #ddd;

    outline:none;

    font-family:Poppins;

    cursor:pointer;

}





/*====================================================
                SHOP PRODUCT CARD UPDATE
=====================================================*/


.shop-products{

    background:#f8f8f8;

    padding-top:40px;

}



.shop-products .product-card{

    padding-bottom:20px;

}




.shop-products .product-image{

    position:relative;

    overflow:hidden;

}



.shop-products .product-image img{

    height:350px;

    object-fit:cover;

}



.shop-products .wishlist-btn{

    position:absolute;

    right:20px;

    top:20px;

    width:42px;

    height:42px;

    border-radius:50%;

    border:none;

    background:white;

    cursor:pointer;

    z-index:5;

    font-size:18px;

}




.shop-products .product-info h3{

    padding:20px 25px 10px;

    font-size:21px;

}



.shop-products .stock{

    padding:0 25px;

    color:#2ecc71;

    font-size:14px;

    margin-bottom:15px;

}



.product-buttons{

    display:flex;

    gap:12px;

    padding:0 25px;

}



.view-btn,
.cart-btn{


    flex:1;

    text-align:center;

    padding:13px;

    border-radius:30px;

    font-weight:600;

    transition:.3s;

}


.view-btn{

    background:#111;

    color:white;

}



.cart-btn{

    background:#d4af37;

    border:none;

    cursor:pointer;

}



.view-btn:hover{

    background:#d4af37;

    color:#111;

}


.cart-btn:hover{

    background:#111;

    color:white;

}





/*====================================================
                MOBILE SHOP PAGE
=====================================================*/


@media(max-width:768px){


.shop-banner{

    height:230px;

}


.shop-banner-content h1{

    font-size:30px;

}


.shop-filter{

    margin:20px;

    flex-direction:column;

    gap:20px;

}


.product-buttons{

    flex-direction:column;

}



}
/*====================================================
                PRODUCT PAGE
=====================================================*/

/*====================================================
                BREADCRUMB
=====================================================*/

.breadcrumb{

    background:#ffffff;

    padding:18px 8%;

    border-top:1px solid #eee;

    border-bottom:1px solid #eee;

}

.breadcrumb-content{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:15px;

    color:#666;

}

.breadcrumb-content a{

    color:#444;

    transition:.3s;

}

.breadcrumb-content a:hover{

    color:var(--gold);

}

.breadcrumb-content strong{

    color:#111;

}

/*====================================================
                PRODUCT DETAILS
=====================================================*/

.product-details{

    padding:80px 8%;

    background:#fff;

}

.product-details-container{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:flex-start;

}

/*====================================================
                PRODUCT GALLERY
=====================================================*/

.product-gallery{

    position:sticky;

    top:120px;

}

.main-image{

    background:#fafafa;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.main-image img{

    width:100%;

    height:650px;

    object-fit:cover;

    transition:.4s;

}

.main-image img:hover{

    transform:scale(1.05);

}

/*====================================================
                THUMBNAILS
=====================================================*/

.thumbnail-images{

    display:flex;

    gap:15px;

    margin-top:20px;

}

.thumbnail-images img{

    width:110px;

    height:110px;

    object-fit:cover;

    border-radius:15px;

    cursor:pointer;

    border:3px solid transparent;

    transition:.3s;

}

.thumbnail-images img:hover{

    transform:translateY(-5px);

    border-color:var(--gold);

}

.active-thumb{

    border-color:var(--gold) !important;

}

/*====================================================
                PRODUCT INFORMATION
=====================================================*/

.product-information{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.product-category{

    color:var(--gold);

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:2px;

}

.product-information h1{

    font-size:48px;

    color:#111;

    line-height:1.2;

}

.product-rating{

    display:flex;

    align-items:center;

    gap:15px;

}

.stars{

    color:#ffc107;

    font-size:22px;

}

.product-price{

    display:flex;

    align-items:center;

    gap:20px;

}

.current-price{

    font-size:42px;

    font-weight:700;

    color:#111;

}

.discount{

    background:#2ecc71;

    color:#fff;

    padding:8px 15px;

    border-radius:30px;

    font-size:14px;

    font-weight:600;

}

.product-description{

    line-height:2;

    color:#666;

    font-size:17px;

}
/*====================================================
                SIZE SELECTION
=====================================================*/

.product-size h3,
.product-quantity h3{

    font-size:18px;
    margin-bottom:15px;
    color:#111;

}

.size-options{

    display:flex;
    gap:15px;
    flex-wrap:wrap;

}

.size-options button{

    width:60px;
    height:60px;

    border:2px solid #ddd;

    background:#fff;

    border-radius:12px;

    cursor:pointer;

    font-weight:600;

    transition:.3s;

}

.size-options button:hover{

    border-color:var(--gold);
    color:var(--gold);

}

.active-size{

    background:var(--gold)!important;
    color:#fff;
    border-color:var(--gold)!important;

}

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

.color-options{

    display:flex;
    gap:15px;
    flex-wrap:wrap;

}

.color-options .color{

    width:38px;
    height:38px;

    border-radius:50%;

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

    cursor:pointer;

    transition:var(--transition);

    box-shadow:inset 0 0 0 3px #fff;

}

.color-options .color:hover{

    border-color:var(--gold);

}

.color-options .color.active-color{

    border-color:var(--gold);
    box-shadow:inset 0 0 0 3px #fff, 0 0 0 2px var(--gold);

}

.color-options .color.black{ background:#111111; }
.color-options .color.white{ background:#ffffff; }
.color-options .color.grey{ background:#9a9a9a; }
.color-options .color.navy{ background:#1b2a4a; }

/*====================================================
                QUANTITY
=====================================================*/

.quantity-box{

    display:flex;

    width:170px;

    border:2px solid #ddd;

    border-radius:12px;

    overflow:hidden;

}

.quantity-box button{

    width:55px;

    border:none;

    background:#f3f3f3;

    cursor:pointer;

    font-size:22px;

    transition:.3s;

}

.quantity-box button:hover{

    background:var(--gold);
    color:#fff;

}

.quantity-box input{

    width:60px;

    border:none;

    text-align:center;

    font-size:18px;

    font-weight:600;

    outline:none;

}

/*====================================================
                ACTION BUTTONS
=====================================================*/

.product-action-buttons{

    display:flex;

    gap:15px;

    margin-top:10px;

    flex-wrap:wrap;

}

.add-cart-btn{

    flex:1;

    padding:18px;

    border:none;

    background:#111;

    color:#fff;

    border-radius:12px;

    cursor:pointer;

    font-size:16px;

    font-weight:600;

    transition:.3s;

}

.add-cart-btn:hover{

    background:var(--gold);
    color:#111;

}

.buy-now-btn{

    flex:1;

    padding:18px;

    border:none;

    background:var(--gold);

    color:#111;

    border-radius:12px;

    cursor:pointer;

    font-size:16px;

    font-weight:600;

    transition:.3s;

}

.buy-now-btn:hover{

    background:#111;
    color:#fff;

}

.wishlist-product-btn{

    width:65px;

    border:none;

    border-radius:12px;

    background:#f5f5f5;

    cursor:pointer;

    font-size:22px;

    transition:.3s;

}

.wishlist-product-btn:hover{

    background:#111;
    color:#fff;

}

.wishlist-product-btn.active{

    background:#ff4d4d;
    color:#fff;

}

/*====================================================
                PRODUCT META
=====================================================*/

.product-meta{

    border-top:1px solid #eee;

    padding-top:25px;

}

.product-meta p{

    margin-bottom:15px;

    color:#555;

}

.stock-success{

    color:#2ecc71;

    font-weight:600;

}
/*====================================================
                PRODUCT TABS
=====================================================*/

.product-tabs{

    background:#f8f8f8;

    padding:90px 8%;

}

.tabs-header{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-bottom:45px;

    flex-wrap:wrap;

}

.tab-btn{

    padding:14px 35px;

    border:none;

    border-radius:40px;

    background:#fff;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.tab-btn:hover{

    background:var(--gold);

    color:#fff;

}

.tab-btn.active{

    background:#111;

    color:#fff;

}

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

.tab-content{

    background:#fff;

    padding:45px;

    border-radius:20px;

    margin-bottom:35px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.tab-content h2{

    font-size:30px;

    margin-bottom:25px;

    color:#111;

}

.tab-content p{

    color:#666;

    line-height:2;

    margin-bottom:18px;

}

/*====================================================
                SPECIFICATION TABLE
=====================================================*/

.specification-box table{

    width:100%;

    border-collapse:collapse;

}

.specification-box td{

    padding:18px 20px;

    border-bottom:1px solid #eee;

    font-size:16px;

}

.specification-box td:first-child{

    width:35%;

    font-weight:600;

    color:#111;

    background:#fafafa;

}

/*====================================================
                CUSTOMER REVIEWS
=====================================================*/

.customer-reviews{

    background:#ffffff;

}

.review-container{

    display:grid;

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

    gap:30px;

    margin-top:50px;

}

.review-card{

    background:#fff;

    padding:35px;

    border-radius:18px;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

    transition:.3s;

}

.review-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(0,0,0,.15);

}

.review-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:18px;

}

.review-top h3{

    font-size:20px;

    color:#111;

}

.review-top span{

    color:#ffc107;

    font-size:18px;

}

.review-card p{

    color:#666;

    line-height:1.9;

}

/*====================================================
                WRITE REVIEW
=====================================================*/

.write-review{

    margin-top:80px;

    background:#fff;

    padding:50px;

    border-radius:20px;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

}

.write-review h2{

    margin-bottom:30px;

    color:#111;

}

.write-review form{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.write-review input,
.write-review select,
.write-review textarea{

    width:100%;

    padding:16px 20px;

    border:1px solid #ddd;

    border-radius:10px;

    outline:none;

    font-family:Poppins,sans-serif;

    font-size:15px;

    transition:.3s;

}

.write-review input:focus,
.write-review select:focus,
.write-review textarea:focus{

    border-color:var(--gold);

}

.write-review textarea{

    resize:vertical;

}

.write-review button{

    width:220px;

    padding:16px;

    border:none;

    background:#111;

    color:#fff;

    border-radius:10px;

    cursor:pointer;

    font-size:16px;

    font-weight:600;

    transition:.3s;

}

.write-review button:hover{

    background:var(--gold);

    color:#111;

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

.related-products{

    background:#f8f8f8;

}

.related-products .product-container{

    display:grid;

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

    gap:35px;

}

.related-products .product-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

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

    transition:.35s;

}

.related-products .product-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 50px rgba(0,0,0,.15);

}

.related-products .product-card img{

    width:100%;

    height:320px;

    object-fit:cover;

    transition:.4s;

}

.related-products .product-card:hover img{

    transform:scale(1.08);

}

.related-products .badge{

    position:absolute;

    top:18px;

    left:18px;

}

.related-products h3{

    padding:22px 22px 10px;

    font-size:22px;

    color:#111;

}

.related-products .rating{

    padding:0 22px;

    color:#ffc107;

    margin-bottom:15px;

}

.related-products .price{

    display:flex;

    align-items:center;

    gap:15px;

    padding:0 22px;

    margin-bottom:22px;

}

.related-products .new-price{

    font-size:24px;

    font-weight:700;

    color:#111;

}

.related-products .old-price{

    text-decoration:line-through;

    color:#888;

}

.related-products .product-btn{

    display:block;

    margin:0 22px 25px;

    text-align:center;

    background:#111;

    color:#fff;

    padding:15px;

    border-radius:40px;

    font-weight:600;

    transition:.3s;

}

.related-products .product-btn:hover{

    background:var(--gold);

    color:#111;

}

/*====================================================
                RESPONSIVE PRODUCT PAGE
=====================================================*/

@media(max-width:1200px){

.product-details-container{

    gap:45px;

}

.main-image img{

    height:550px;

}

}

@media(max-width:992px){

.product-details-container{

    grid-template-columns:1fr;

}

.product-gallery{

    position:static;

}

.product-information h1{

    font-size:38px;

}

.main-image img{

    height:500px;

}

}

@media(max-width:768px){

.product-details{

    padding:60px 20px;

}

.product-tabs{

    padding:60px 20px;

}

.customer-reviews{

    padding:60px 20px;

}

.related-products{

    padding:60px 20px;

}

.main-image img{

    height:420px;

}

.thumbnail-images{

    justify-content:center;

    flex-wrap:wrap;

}

.thumbnail-images img{

    width:80px;

    height:80px;

}

.current-price{

    font-size:34px;

}

.product-information h1{

    font-size:30px;

}

.product-action-buttons{

    flex-direction:column;

}

.add-cart-btn,
.buy-now-btn,
.wishlist-product-btn{

    width:100%;

}

.tabs-header{

    gap:12px;

}

.tab-btn{

    width:100%;

}

.tab-content{

    padding:30px;

}

.write-review{

    padding:35px;

}

.write-review button{

    width:100%;

}

}

@media(max-width:480px){

.product-information h1{

    font-size:26px;

}

.main-image img{

    height:320px;

}

.current-price{

    font-size:28px;

}

.product-price{

    flex-wrap:wrap;

}

.product-description{

    font-size:15px;

}

.thumbnail-images img{

    width:70px;

    height:70px;

}

.review-card{

    padding:25px;

}

.tab-content{

    padding:22px;

}

.specification-box td{

    padding:14px;

    font-size:14px;

}

.write-review{

    padding:25px;

}

.related-products .product-card img{

    height:260px;

}

}

/*====================================================
                PAGE HEADING (shared)
=====================================================*/

.page-heading{

    font-size:34px;
    font-weight:700;
    color:var(--primary);

    text-align:center;

    margin:50px 0 40px;

}

/*====================================================
                AUTH PAGES (LOGIN / SIGNUP)
=====================================================*/

.auth-page{

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

    padding:70px 20px 100px;

    min-height:60vh;

}

.auth-card{

    width:100%;
    max-width:480px;

    background:#fff;

    padding:50px;

    border-radius:20px;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

}

.auth-card h1{

    font-size:28px;
    font-weight:700;
    color:var(--primary);

    margin-bottom:8px;

    text-align:center;

}

.auth-subtitle{

    text-align:center;

    color:#777;

    margin-bottom:35px;

}

.auth-form{

    display:flex;
    flex-direction:column;
    gap:20px;

}

.form-group{

    display:flex;
    flex-direction:column;
    gap:8px;

}

.form-group label{

    font-size:14px;
    font-weight:600;
    color:var(--primary);

}

.form-group input,
.form-group select,
.form-group textarea{

    width:100%;

    padding:16px 20px;

    border:1px solid #ddd;

    border-radius:10px;

    outline:none;

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

    font-size:15px;

    transition:.3s;

}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{

    border-color:var(--gold);

}

.form-group textarea{

    resize:vertical;

    min-height:140px;

}

.form-error{

    font-size:13px;
    color:#d32f2f;

    display:none;

}

.form-group.has-error input,
.form-group.has-error select{

    border-color:#d32f2f;

}

.form-group.has-error .form-error{

    display:block;

}

.password-field{

    position:relative;

}

.password-field input{

    padding-right:50px;

}

.toggle-password{

    position:absolute;

    right:14px;
    top:50%;

    transform:translateY(-50%);

    background:none;
    border:none;
    cursor:pointer;

    color:#888;

    font-size:16px;

}

.auth-options{

    display:flex;
    justify-content:space-between;
    align-items:center;

    font-size:14px;

}

.remember-me{

    display:flex;
    align-items:center;
    gap:8px;

    color:var(--text);

    cursor:pointer;

}

.forgot-password{

    color:var(--gold);

    font-weight:600;

}

.forgot-password:hover{

    text-decoration:underline;

}

.auth-submit-btn,
.checkout-form-box button[type="submit"]{

    width:100%;

    padding:16px;

    border:none;

    background:var(--primary);

    color:#fff;

    border-radius:10px;

    cursor:pointer;

    font-size:16px;
    font-weight:600;

    transition:.3s;

}

.auth-submit-btn:hover,
.checkout-form-box button[type="submit"]:hover{

    background:var(--gold);
    color:var(--primary);

}

.auth-footer-text{

    text-align:center;

    margin-top:25px;

    font-size:14px;

    color:#777;

}

.auth-footer-text a{

    color:var(--gold);
    font-weight:600;

}

.auth-footer-text a:hover{

    text-decoration:underline;

}

.terms-check{

    display:flex;
    align-items:flex-start;
    gap:10px;

    font-size:13px;

    color:#777;

}

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

.cart-page{

    padding:40px 8% 100px;

}

.cart-layout{

    display:grid;

    grid-template-columns:2.2fr 1fr;

    gap:35px;

    align-items:flex-start;

}

.cart-items{

    display:flex;
    flex-direction:column;
    gap:20px;

}

.cart-item{

    display:grid;

    grid-template-columns:100px 1fr auto auto auto;

    align-items:center;

    gap:20px;

    background:#fff;

    padding:20px;

    border-radius:16px;

    box-shadow:0 8px 20px rgba(0,0,0,.06);

}

.cart-item img{

    width:100px;
    height:100px;

    object-fit:cover;

    border-radius:12px;

}

.cart-item-info h3{

    font-size:16px;
    font-weight:600;
    color:var(--primary);

    margin-bottom:6px;

}

.cart-item-info p{

    font-size:13px;
    color:#888;

    text-transform:capitalize;

}

.cart-item-price{

    display:block;

    margin-top:8px;

    font-weight:600;
    color:var(--gold);

}

.cart-qty-controls{

    display:flex;
    align-items:center;

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

    border-radius:8px;

    overflow:hidden;

}

.cart-qty-controls button{

    width:32px;
    height:32px;

    border:none;

    background:var(--light);

    cursor:pointer;

    font-size:16px;

}

.cart-qty-controls button:hover{

    background:var(--gold);
    color:#fff;

}

.cart-qty-controls input{

    width:36px;

    text-align:center;

    border:none;

    outline:none;

    font-size:14px;

}

.cart-item-total{

    font-weight:700;
    color:var(--primary);

    white-space:nowrap;

}

.cart-remove-btn{

    width:38px;
    height:38px;

    border:none;

    border-radius:50%;

    background:var(--light);

    color:#d32f2f;

    cursor:pointer;

    transition:.3s;

}

.cart-remove-btn:hover{

    background:#d32f2f;
    color:#fff;

}

.cart-summary{

    background:#fff;

    padding:30px;

    border-radius:16px;

    box-shadow:0 8px 20px rgba(0,0,0,.06);

    position:sticky;

    top:110px;

}

.cart-summary h3{

    margin-bottom:20px;

    color:var(--primary);

}

.summary-row{

    display:flex;
    justify-content:space-between;

    padding:12px 0;

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

    font-size:15px;

    color:var(--text);

}

.summary-row.total-row{

    border-bottom:none;

    font-size:18px;
    font-weight:700;
    color:var(--primary);

    padding-top:18px;

}

.checkout-btn,
.shop-now-btn{

    display:block;

    text-align:center;

    margin-top:25px;

    padding:16px;

    background:var(--primary);

    color:#fff;

    border-radius:10px;

    font-weight:600;

    transition:.3s;

}

.checkout-btn:hover,
.shop-now-btn:hover{

    background:var(--gold);
    color:var(--primary);

}

.empty-cart{

    text-align:center;

    padding:80px 20px;

}

.empty-cart i{

    font-size:60px;

    color:var(--border);

    margin-bottom:20px;

}

.empty-cart h2{

    font-size:24px;
    color:var(--primary);

    margin-bottom:10px;

}

.empty-cart p{

    color:#888;

    margin-bottom:25px;

}

.empty-cart .shop-now-btn{

    display:inline-block;

    max-width:220px;

    margin:0 auto;

}

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

.wishlist-page .product-container{

    margin-top:20px;

}

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

.checkout-page{

    padding:40px 8% 100px;

}

.checkout-layout{

    display:grid;

    grid-template-columns:1.6fr 1fr;

    gap:35px;

    align-items:flex-start;

}

.checkout-form-box{

    background:#fff;

    padding:40px;

    border-radius:16px;

    box-shadow:0 8px 20px rgba(0,0,0,.06);

}

.checkout-form-box h3{

    margin-bottom:20px;

    color:var(--primary);

}

.checkout-form-box h3:not(:first-child){

    margin-top:35px;

}

.form-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}

.payment-options{

    display:flex;
    flex-direction:column;
    gap:14px;

}

.payment-option{

    display:flex;
    align-items:center;
    gap:12px;

    padding:16px 20px;

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

    border-radius:10px;

    cursor:pointer;

    transition:.3s;

    font-size:15px;

}

.payment-option:has(input:checked){

    border-color:var(--gold);

    background:#fdf8ee;

}

.checkout-summary{

    background:#fff;

    padding:30px;

    border-radius:16px;

    box-shadow:0 8px 20px rgba(0,0,0,.06);

    position:sticky;

    top:110px;

}

.checkout-summary h3{

    margin-bottom:20px;

    color:var(--primary);

}

.checkout-summary-item{

    display:flex;
    justify-content:space-between;
    gap:10px;

    padding:10px 0;

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

    font-size:14px;

}

.checkout-summary-item span:first-child{

    color:var(--text);

}

.checkout-summary-item span:last-child{

    font-weight:600;
    color:var(--primary);

}

/*====================================================
                ORDER SUCCESS PAGE
=====================================================*/

.order-success-page{

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

    padding:80px 20px 120px;

    min-height:60vh;

}

.order-success-card{

    max-width:560px;

    width:100%;

    text-align:center;

    background:#fff;

    padding:60px 45px;

    border-radius:20px;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

}

.order-success-card i{

    font-size:70px;

    color:#2e9e5b;

    margin-bottom:20px;

}

.order-success-card h1{

    font-size:26px;
    color:var(--primary);

    margin-bottom:12px;

}

.order-success-card p{

    color:#777;

    margin-bottom:25px;

}

.order-id-box{

    background:var(--light);

    padding:14px 20px;

    border-radius:10px;

    font-weight:600;
    color:var(--primary);

    margin-bottom:25px;

}

.order-id-box span{

    color:var(--gold);

}

.order-items-summary{

    text-align:left;

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

    padding-top:20px;

    margin-bottom:25px;

}

.order-items-summary .order-line{

    display:flex;
    justify-content:space-between;

    padding:8px 0;

    font-size:14px;

    color:var(--text);

}

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

.about-hero{

    background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),
        url("assets/product6.webp");

    background-size:cover;

    background-position:center;

    padding:110px 20px;

    text-align:center;

    color:#fff;

}

.about-hero h1{

    font-size:42px;
    font-weight:700;

    margin-bottom:12px;

}

.about-hero p{

    font-size:16px;

    max-width:600px;

    margin:0 auto;

    opacity:.9;

}

.about-story{

    padding:80px 8%;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}

.about-story img{

    width:100%;

    border-radius:20px;

    box-shadow:var(--shadow);

}

.about-story h2{

    font-size:30px;
    color:var(--primary);

    margin-bottom:20px;

}

.about-story p{

    color:#666;

    line-height:1.8;

    margin-bottom:16px;

}

.about-values{

    background:var(--light);

    padding:80px 8%;

}

.about-values-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

    margin-top:40px;

}

.value-card{

    background:#fff;

    padding:40px 30px;

    border-radius:16px;

    text-align:center;

    box-shadow:0 8px 20px rgba(0,0,0,.06);

    transition:var(--transition);

}

.value-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(0,0,0,.12);

}

.value-card i{

    font-size:36px;
    color:var(--gold);

    margin-bottom:18px;

}

.value-card h3{

    font-size:19px;
    color:var(--primary);

    margin-bottom:12px;

}

.value-card p{

    color:#777;

    font-size:14px;

    line-height:1.7;

}

.trust-section{

    padding:80px 8%;

    text-align:center;

}

.trust-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

    margin-top:40px;

}

.trust-item i{

    font-size:32px;
    color:var(--gold);

    margin-bottom:14px;

}

.trust-item h4{

    font-size:16px;
    color:var(--primary);

    margin-bottom:8px;

}

.trust-item p{

    font-size:13px;
    color:#888;

}

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

.contact-page{

    padding:60px 8% 100px;

}

.contact-layout{

    display:grid;

    grid-template-columns:1.3fr 1fr;

    gap:40px;

    align-items:flex-start;

}

.contact-form-box{

    background:#fff;

    padding:40px;

    border-radius:16px;

    box-shadow:0 8px 20px rgba(0,0,0,.06);

}

.contact-form-box h3{

    margin-bottom:25px;

    color:var(--primary);

}

.contact-info-box{

    background:var(--primary);

    color:#fff;

    padding:40px;

    border-radius:16px;

    display:flex;
    flex-direction:column;
    gap:28px;

}

.contact-info-item{

    display:flex;
    align-items:flex-start;
    gap:16px;

}

.contact-info-item i{

    font-size:22px;
    color:var(--gold);

    margin-top:4px;

}

.contact-info-item h4{

    font-size:15px;
    margin-bottom:4px;

}

.contact-info-item p{

    font-size:14px;
    opacity:.8;

}

.contact-map{

    margin-top:10px;

    border-radius:12px;

    overflow:hidden;

}

.contact-map iframe{

    width:100%;
    height:200px;

    border:0;

    display:block;

}

/*====================================================
                RESPONSIVE : NEW PAGES
=====================================================*/

@media(max-width:900px){

    .cart-layout,
    .checkout-layout,
    .contact-layout,
    .about-story{

        grid-template-columns:1fr;

    }

    .cart-item{

        grid-template-columns:70px 1fr;

        grid-template-areas:
            "img info"
            "img qty"
            "img total"
            "img remove";

    }

    .cart-item img{ grid-area:img; width:70px; height:70px; }
    .cart-item-info{ grid-area:info; }
    .cart-qty-controls{ grid-area:qty; }
    .cart-item-total{ grid-area:total; }
    .cart-remove-btn{ grid-area:remove; justify-self:start; }

    .about-values-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .trust-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .form-row{

        grid-template-columns:1fr;

    }

}

@media(max-width:480px){

    .auth-card,
    .checkout-form-box,
    .contact-form-box,
    .contact-info-box{

        padding:28px 22px;

    }

    .about-values-grid,
    .trust-grid{

        grid-template-columns:1fr;

    }

}


/*====================================================
                TOAST NOTIFICATIONS
=====================================================*/

.toast-container{

    position:fixed;

    top:100px;
    right:20px;

    z-index:9999;

    display:flex;
    flex-direction:column;
    gap:12px;

    max-width:340px;

}

.toast{

    display:flex;
    align-items:flex-start;
    gap:12px;

    background:#fff;

    padding:16px 18px;

    border-radius:12px;

    box-shadow:0 12px 30px rgba(0,0,0,.15);

    border-left:4px solid var(--gold);

    opacity:0;

    transform:translateX(40px);

    transition:.35s ease;

    font-size:14px;

    color:var(--text);

}

.toast.toast-visible{

    opacity:1;

    transform:translateX(0);

}

.toast.toast-success{ border-left-color:#2e9e5b; }
.toast.toast-error{ border-left-color:#d32f2f; }
.toast.toast-info{ border-left-color:var(--gold); }

.toast i{

    font-size:18px;

    margin-top:2px;

}

.toast.toast-success i{ color:#2e9e5b; }
.toast.toast-error i{ color:#d32f2f; }
.toast.toast-info i{ color:var(--gold); }

.toast-message{

    flex:1;

    line-height:1.5;

}

.toast-close{

    background:none;
    border:none;
    cursor:pointer;

    color:#999;

    font-size:14px;

    padding:0;

}

/*====================================================
                LOADING STATES
=====================================================*/

.btn-loading{

    position:relative;

    color:transparent!important;

    pointer-events:none;

}

.btn-loading::after{

    content:"";

    position:absolute;

    top:50%;
    left:50%;

    width:16px;
    height:16px;

    margin:-8px 0 0 -8px;

    border:2px solid rgba(255,255,255,.5);

    border-top-color:#fff;

    border-radius:50%;

    animation:btnSpin .6s linear infinite;

}

.auth-submit-btn.btn-loading::after,
.checkout-form-box button[type="submit"].btn-loading::after{

    border:2px solid rgba(255,255,255,.5);
    border-top-color:#fff;

}

@keyframes btnSpin{

    to{ transform:rotate(360deg); }

}

.skeleton{

    background:linear-gradient(90deg,#eee 25%,#f5f5f5 50%,#eee 75%);

    background-size:200% 100%;

    animation:skeletonShine 1.4s ease infinite;

    border-radius:8px;

}

@keyframes skeletonShine{

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

}

/*====================================================
                MICRO INTERACTIONS
=====================================================*/

.cart-btn,
.add-cart-btn,
.buy-now-btn,
.auth-submit-btn,
.checkout-btn,
.shop-now-btn{

    transition:transform .15s ease, background .3s ease, color .3s ease, box-shadow .3s ease;

}

.cart-btn:active,
.add-cart-btn:active,
.buy-now-btn:active,
.auth-submit-btn:active{

    transform:scale(.97);

}

.wishlist-btn,
.wishlist-product-btn{

    transition:transform .2s ease, color .3s ease;

}

.wishlist-btn.active,
.wishlist-product-btn.active{

    animation:heartPop .35s ease;

}

@keyframes heartPop{

    0%{ transform:scale(1); }
    40%{ transform:scale(1.3); }
    100%{ transform:scale(1); }

}


/*====================================================
                SHOP: FILTER CONTROLS + PAGINATION
=====================================================*/

.shop-filter{

    flex-wrap:wrap;

    gap:16px;

}

.shop-filter-controls{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    align-items:center;

}

.shop-filter-controls select,
.shop-filter-controls .availability-toggle{

    padding:10px 16px;

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

    border-radius:8px;

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

    font-size:14px;

    background:#fff;

    cursor:pointer;

}

.availability-toggle{

    display:flex;

    align-items:center;

    gap:8px;

    color:var(--text);

}

.availability-toggle input{

    accent-color:var(--gold);

}

.shop-clear-filters{

    color:var(--gold);

    font-size:13px;

    font-weight:600;

}

.shop-clear-filters:hover{

    text-decoration:underline;

}

.pagination{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    margin:50px 0 20px;

    flex-wrap:wrap;

}

.pagination a,
.pagination span{

    min-width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0 10px;

    border-radius:8px;

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

    color:var(--text);

    font-size:14px;

    font-weight:600;

    transition:var(--transition);

}

.pagination a:hover{

    border-color:var(--gold);

    color:var(--gold);

}

.pagination .page-current{

    background:var(--primary);

    color:#fff;

    border-color:var(--primary);

}

.pagination .page-disabled{

    opacity:.4;

    pointer-events:none;

}

.shop-no-results{

    text-align:center;

    padding:80px 20px;

    color:#888;

}

.shop-no-results i{

    font-size:50px;

    color:var(--border);

    margin-bottom:20px;

}


/*====================================================
                CUSTOMER ACCOUNT (PROFILE / ORDERS)
=====================================================*/

.account-page{

    display:grid;

    grid-template-columns:260px 1fr;

    gap:30px;

    padding:40px 8% 100px;

    align-items:start;

}

.account-sidebar{

    background:#fff;

    border-radius:16px;

    padding:25px 0;

    box-shadow:0 8px 20px rgba(0,0,0,.06);

    position:sticky;

    top:110px;

}

.account-sidebar .account-user{

    padding:0 22px 20px;

    margin-bottom:10px;

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

}

.account-sidebar .account-user h4{

    font-size:16px;
    color:var(--primary);

    margin-bottom:4px;

}

.account-sidebar .account-user p{

    font-size:13px;
    color:#888;

    word-break:break-word;

}

.account-nav a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:13px 22px;

    color:var(--text);

    font-size:14px;
    font-weight:500;

    border-left:3px solid transparent;

    transition:var(--transition);

}

.account-nav a i{

    width:18px;
    text-align:center;

    color:#999;

}

.account-nav a:hover{

    background:var(--light);
    color:var(--gold);

}

.account-nav a.active{

    border-left-color:var(--gold);
    background:var(--light);
    color:var(--primary);
    font-weight:600;

}

.account-nav a.active i{

    color:var(--gold);

}

.account-content{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.account-card{

    background:#fff;

    border-radius:16px;

    padding:35px;

    box-shadow:0 8px 20px rgba(0,0,0,.06);

}

.account-card h2{

    font-size:20px;
    color:var(--primary);

    margin-bottom:22px;

}

.account-card .form-row{

    margin-bottom:0;

}

.account-card form{

    display:flex;

    flex-direction:column;

    gap:20px;

}

/*====================================================
                ORDERS LIST
=====================================================*/

.orders-list{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.order-card{

    background:#fff;

    border-radius:14px;

    padding:22px 26px;

    box-shadow:0 8px 20px rgba(0,0,0,.06);

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    justify-content:space-between;

    gap:16px;

}

.order-card-info h4{

    font-size:15px;
    color:var(--primary);

    margin-bottom:6px;

}

.order-card-info p{

    font-size:13px;
    color:#888;

}

.order-status-badge{

    display:inline-block;

    padding:5px 14px;

    border-radius:20px;

    font-size:12px;
    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.5px;

}

.status-pending{ background:#fff4e0; color:#b26a00; }
.status-confirmed{ background:#e3f2ff; color:#0b6fb8; }
.status-packed{ background:#eee3ff; color:#6c3fc5; }
.status-shipped{ background:#e0f7ff; color:#0891b2; }
.status-delivered{ background:#e3f9e5; color:#1e8e3e; }
.status-cancelled{ background:#fde8e8; color:#c62828; }
.status-returned{ background:#f3f3f3; color:#666; }
.status-refunded{ background:#f3f3f3; color:#666; }

.order-card-total{

    font-size:16px;
    font-weight:700;
    color:var(--primary);

}

.order-view-btn{

    padding:10px 22px;

    border-radius:8px;

    background:var(--primary);

    color:#fff;

    font-size:13px;
    font-weight:600;

    transition:var(--transition);

}

.order-view-btn:hover{

    background:var(--gold);
    color:var(--primary);

}

/*====================================================
                ORDER DETAILS
=====================================================*/

.order-details-header{

    display:flex;

    flex-wrap:wrap;

    justify-content:space-between;

    align-items:center;

    gap:16px;

    margin-bottom:25px;

}

.order-details-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:25px;

    align-items:start;

}

.order-details-items{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.order-details-item{

    display:flex;

    align-items:center;

    gap:18px;

    padding-bottom:16px;

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

}

.order-details-item:last-child{

    border-bottom:none;

    padding-bottom:0;

}

.order-details-item img{

    width:70px;
    height:70px;

    object-fit:cover;

    border-radius:10px;

}

.order-details-item-info{

    flex:1;

}

.order-details-item-info h4{

    font-size:15px;
    color:var(--primary);

    margin-bottom:4px;

}

.order-details-item-info p{

    font-size:13px;
    color:#888;

}

.order-details-item-price{

    font-weight:700;
    color:var(--primary);

    white-space:nowrap;

}

.address-block p{

    font-size:14px;
    color:var(--text);

    line-height:1.7;

}

/*====================================================
                REVIEW LOCK NOTICE
=====================================================*/

.review-locked{

    background:var(--light);

    border-radius:12px;

    padding:20px 24px;

    font-size:14px;

    color:#777;

    text-align:center;

}

.review-locked a{

    color:var(--gold);
    font-weight:600;

}

/*====================================================
                RESPONSIVE: ACCOUNT PAGES
=====================================================*/

@media(max-width:900px){

    .account-page{

        grid-template-columns:1fr;

    }

    .account-sidebar{

        position:static;

        display:flex;

        align-items:center;

        overflow-x:auto;

        padding:15px;

        gap:5px;

    }

    .account-sidebar .account-user{

        display:none;

    }

    .account-nav{

        display:flex;

        gap:5px;

    }

    .account-nav a{

        border-left:none;
        border-bottom:3px solid transparent;

        white-space:nowrap;

    }

    .account-nav a.active{

        border-left-color:transparent;
        border-bottom-color:var(--gold);

    }

    .order-details-grid{

        grid-template-columns:1fr;

    }

    .order-card{

        flex-direction:column;
        align-items:flex-start;

    }

}
/* =========================================================
   PYARI ENTERPRISES - PREMIUM ANIMATION PACK
   Added without changing existing functionality
   ========================================================= */


/* ---------------------------------------------------------
   1. GLOBAL SMOOTHNESS
--------------------------------------------------------- */

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}


/* ---------------------------------------------------------
   2. TOP BAR SHIMMER
--------------------------------------------------------- */

.top-bar {
    position: relative;
    overflow: hidden;
}

.top-bar::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 70%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.12),
        transparent
    );
    transform: skewX(-20deg);
    animation: topBarShine 6s ease-in-out infinite;
}

@keyframes topBarShine {
    0% {
        left: -120%;
    }

    35%,
    100% {
        left: 140%;
    }
}


/* ---------------------------------------------------------
   3. HEADER ENTRANCE
--------------------------------------------------------- */

header {
    animation: headerDrop 0.9s cubic-bezier(.22,1,.36,1) both;
}

@keyframes headerDrop {
    from {
        opacity: 0;
        transform: translateY(-35px);
    }

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


/* ---------------------------------------------------------
   4. LOGO PREMIUM HOVER
--------------------------------------------------------- */

.logo {
    transition: transform 0.5s cubic-bezier(.22,1,.36,1);
}

.logo:hover {
    transform: scale(1.04) translateY(-2px);
}

.logo img {
    transition:
        transform 0.6s cubic-bezier(.22,1,.36,1),
        filter 0.6s ease;
}

.logo:hover img {
    transform: scale(1.06);
    filter: drop-shadow(0 12px 20px rgba(0,0,0,0.18));
}


/* ---------------------------------------------------------
   5. SEARCH BOX
--------------------------------------------------------- */

.search-box {
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.search-box:focus-within {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 10px 35px rgba(0,0,0,0.10);
}


/* ---------------------------------------------------------
   6. HEADER ICONS
--------------------------------------------------------- */

.header-icons a {
    transition:
        transform 0.3s ease,
        color 0.3s ease;
}

.header-icons a:hover {
    transform: translateY(-5px);
}

.header-icons i {
    transition:
        transform 0.35s cubic-bezier(.22,1,.36,1),
        color 0.35s ease;
}

.header-icons a:hover i {
    transform: scale(1.18);
}


/* ---------------------------------------------------------
   7. BADGE POP ANIMATION
--------------------------------------------------------- */

.icon-badge {
    animation: badgePulse 2.5s ease-in-out infinite;
    transform-origin: center;
}

@keyframes badgePulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.18);
    }
}


/* ---------------------------------------------------------
   8. NAVIGATION PREMIUM HOVER
--------------------------------------------------------- */

nav ul li a {
    position: relative;
    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

nav ul li a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 0;
    height: 2px;
    background: currentColor;
    transform: translateX(-50%);
    transition: width 0.35s cubic-bezier(.22,1,.36,1);
}

nav ul li a:hover {
    transform: translateY(-2px);
}

nav ul li a:hover::after,
nav ul li a.active::after {
    width: 70%;
}


/* ---------------------------------------------------------
   9. HERO ENTRANCE
--------------------------------------------------------- */

.hero-content {
    animation: heroContentReveal 1.2s cubic-bezier(.22,1,.36,1) both;
    animation-delay: 0.25s;
}

@keyframes heroContentReveal {
    from {
        opacity: 0;
        transform: translateY(50px);
        filter: blur(8px);
    }

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


/* ---------------------------------------------------------
   10. HERO HEADING EFFECT
--------------------------------------------------------- */

.hero-content h1 {
    animation: heroHeading 1.3s cubic-bezier(.22,1,.36,1) both;
    animation-delay: 0.45s;
}

@keyframes heroHeading {
    from {
        opacity: 0;
        transform: translateY(35px);
        letter-spacing: 10px;
    }

    to {
        opacity: 1;
        transform: translateY(0);
        letter-spacing: normal;
    }
}


/* ---------------------------------------------------------
   11. HERO SMALL HEADING
--------------------------------------------------------- */

.small-heading {
    animation: premiumLabel 1s ease both;
    animation-delay: 0.2s;
}

@keyframes premiumLabel {
    from {
        opacity: 0;
        transform: translateX(-30px);
        letter-spacing: 8px;
    }

    to {
        opacity: 1;
        transform: translateX(0);
        letter-spacing: 3px;
    }
}


/* ---------------------------------------------------------
   12. HERO BUTTONS
--------------------------------------------------------- */

.hero-buttons a {
    position: relative;
    overflow: hidden;
    transition:
        transform 0.35s cubic-bezier(.22,1,.36,1),
        box-shadow 0.35s ease;
}

.hero-buttons a::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 80%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.35),
        transparent
    );
    transform: skewX(-20deg);
    transition: left 0.7s ease;
}

.hero-buttons a:hover::before {
    left: 140%;
}

.hero-buttons a:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 15px 35px rgba(0,0,0,0.18);
}

.hero-buttons a:active {
    transform: scale(0.96);
}


/* ---------------------------------------------------------
   13. SECTION TITLES
--------------------------------------------------------- */

.section-title {
    transition: transform 0.5s ease;
}

.section-title h2 {
    position: relative;
}

.section-title h2::after {
    content: "";
    display: block;
    width: 45px;
    height: 3px;
    margin: 12px auto 0;
    background: #d9ad2b;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.7s cubic-bezier(.22,1,.36,1);
}

.section-title:hover h2::after {
    transform: scaleX(1);
}


/* ---------------------------------------------------------
   14. PRODUCT CARD PREMIUM HOVER
--------------------------------------------------------- */

.product-card {
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
    transition:
        transform 0.55s cubic-bezier(.22,1,.36,1),
        box-shadow 0.55s ease;
}

.product-card::before {
    content: "";
    position: absolute;
    top: -120%;
    left: -80%;
    width: 50%;
    height: 350%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.35),
        transparent
    );
    transform: rotate(25deg);
    transition: left 0.8s ease;
    pointer-events: none;
    z-index: 5;
}

.product-card:hover::before {
    left: 150%;
}

.product-card:hover {
    transform: translateY(-14px) scale(1.015);
    box-shadow: 0 25px 55px rgba(0,0,0,0.15);
}


/* ---------------------------------------------------------
   15. PRODUCT IMAGE ZOOM
--------------------------------------------------------- */

.product-card img {
    transition:
        transform 0.8s cubic-bezier(.22,1,.36,1),
        filter 0.6s ease;
}

.product-card:hover img {
    transform: scale(1.08);
    filter: brightness(1.04);
}


/* ---------------------------------------------------------
   16. PRODUCT BADGE
--------------------------------------------------------- */

.product-card .badge {
    transition:
        transform 0.4s cubic-bezier(.22,1,.36,1),
        box-shadow 0.4s ease;
}

.product-card:hover .badge {
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}


/* ---------------------------------------------------------
   17. PRODUCT BUTTON
--------------------------------------------------------- */

.product-btn {
    position: relative;
    overflow: hidden;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.product-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -110%;
    width: 70%;
    height: 100%;
    background: rgba(255,255,255,0.2);
    transform: skewX(-25deg);
    transition: left 0.6s ease;
}

.product-btn:hover::before {
    left: 140%;
}

.product-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.18);
}


/* ---------------------------------------------------------
   18. CATEGORY CARDS
--------------------------------------------------------- */

.category-card {
    position: relative;
    overflow: hidden;
    transition:
        transform 0.55s cubic-bezier(.22,1,.36,1),
        box-shadow 0.55s ease;
}

.category-card img {
    transition:
        transform 0.8s cubic-bezier(.22,1,.36,1),
        filter 0.6s ease;
}

.category-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 25px 50px rgba(0,0,0,0.15);
}

.category-card:hover img {
    transform: scale(1.12);
    filter: brightness(0.9);
}

.category-card h3 {
    transition:
        transform 0.4s ease,
        letter-spacing 0.4s ease;
}

.category-card:hover h3 {
    transform: translateY(-5px);
    letter-spacing: 1px;
}


/* ---------------------------------------------------------
   19. OFFER BANNER
--------------------------------------------------------- */

.offer-banner {
    position: relative;
    overflow: hidden;
}

.offer-banner::before {
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.12);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: offerCircle 8s linear infinite;
}

.offer-banner::after {
    content: "";
    position: absolute;
    width: 650px;
    height: 650px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.07);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: offerCircleReverse 12s linear infinite;
}

@keyframes offerCircle {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes offerCircleReverse {
    from {
        transform: translate(-50%, -50%) rotate(360deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(0deg);
    }
}

.offer-content {
    position: relative;
    z-index: 2;
}

.offer-btn {
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.offer-btn:hover {
    transform: translateY(-5px) scale(1.04);
    box-shadow: 0 15px 35px rgba(0,0,0,0.25);
}


/* ---------------------------------------------------------
   20. WHY US CARDS
--------------------------------------------------------- */

.why-card {
    transition:
        transform 0.5s cubic-bezier(.22,1,.36,1),
        box-shadow 0.5s ease;
}

.why-card i {
    transition:
        transform 0.5s cubic-bezier(.22,1,.36,1),
        opacity 0.4s ease;
}

.why-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 45px rgba(0,0,0,0.12);
}

.why-card:hover i {
    transform: translateY(-8px) scale(1.15) rotate(-5deg);
}


/* ---------------------------------------------------------
   21. TESTIMONIAL CARDS
--------------------------------------------------------- */

.testimonial-card {
    transition:
        transform 0.5s cubic-bezier(.22,1,.36,1),
        box-shadow 0.5s ease;
}

.testimonial-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 45px rgba(0,0,0,0.12);
}


/* ---------------------------------------------------------
   22. NEWSLETTER
--------------------------------------------------------- */

.newsletter {
    position: relative;
    overflow: hidden;
}

.newsletter::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 1px solid rgba(217,173,43,0.15);
    top: -150px;
    left: -100px;
    animation: newsletterFloat 7s ease-in-out infinite;
}

.newsletter::after {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    border: 1px solid rgba(217,173,43,0.12);
    bottom: -120px;
    right: -80px;
    animation: newsletterFloat 9s ease-in-out infinite reverse;
}

@keyframes newsletterFloat {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-25px) rotate(10deg);
    }
}


/* ---------------------------------------------------------
   23. NEWSLETTER BUTTON
--------------------------------------------------------- */

.newsletter button {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.newsletter button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}


/* ---------------------------------------------------------
   24. FOOTER LINKS
--------------------------------------------------------- */

.footer-box a {
    transition:
        transform 0.3s ease,
        padding-left 0.3s ease;
}

.footer-box a:hover {
    padding-left: 6px;
}


/* ---------------------------------------------------------
   25. SOCIAL ICONS
--------------------------------------------------------- */

.social-icons a {
    display: inline-flex;
    transition:
        transform 0.4s cubic-bezier(.22,1,.36,1),
        box-shadow 0.4s ease;
}

.social-icons a:hover {
    transform: translateY(-6px) rotate(6deg) scale(1.12);
}


/* ---------------------------------------------------------
   26. SCROLL REVEAL
--------------------------------------------------------- */

.animate-on-scroll {
    opacity: 0;
    transform: translateY(45px);
    transition:
        opacity 0.9s ease,
        transform 0.9s cubic-bezier(.22,1,.36,1);
}

.animate-on-scroll.show {
    opacity: 1;
    transform: translateY(0);
}


/* ---------------------------------------------------------
   27. IMAGE REVEAL
--------------------------------------------------------- */

.reveal-image {
    opacity: 0;
    transform: scale(0.94);
    transition:
        opacity 1s ease,
        transform 1.1s cubic-bezier(.22,1,.36,1);
}

.reveal-image.show {
    opacity: 1;
    transform: scale(1);
}


/* ---------------------------------------------------------
   28. FLOATING EFFECT
--------------------------------------------------------- */

.float-animation {
    animation: premiumFloat 5s ease-in-out infinite;
}

@keyframes premiumFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}


/* ---------------------------------------------------------
   29. PAGE LOADING FADE
--------------------------------------------------------- */

body {
    animation: pageFadeIn 0.8s ease both;
}

@keyframes pageFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* ---------------------------------------------------------
   30. REDUCE ANIMATION FOR USERS WHO REQUEST IT
--------------------------------------------------------- */

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

}
/* =========================================================
   PREMIUM ANIMATION SYSTEM
   ========================================================= */

/* ---------- PAGE LOAD ---------- */

body {
    overflow-x: hidden;
}

@keyframes pageReveal {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

body {
    animation: pageReveal 0.8s ease forwards;
}


/* ---------- TOP BAR ---------- */

.top-bar {
    animation: topBarReveal 0.8s ease both;
}

@keyframes topBarReveal {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }

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


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

header {
    animation: headerReveal 1s cubic-bezier(.16,1,.3,1) both;
}

@keyframes headerReveal {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

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


/* ---------- LOGO ---------- */

.logo img {
    transition:
        transform 0.6s cubic-bezier(.16,1,.3,1),
        filter 0.6s ease;
}

.logo img:hover {
    transform: scale(1.06) rotate(-2deg);
    filter: drop-shadow(0 10px 20px rgba(0,0,0,.18));
}


/* ---------- NAVIGATION ---------- */

nav {
    animation: navReveal 1.1s cubic-bezier(.16,1,.3,1) both;
}

@keyframes navReveal {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

nav ul li {
    transition: transform 0.3s ease;
}

nav ul li:hover {
    transform: translateY(-2px);
}


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

.hero {
    position: relative;
    overflow: hidden;
}

/* slow cinematic background movement */

.hero::before {
    content: "";
    position: absolute;
    inset: -8%;
    background: inherit;
    animation: heroZoom 14s ease-in-out infinite alternate;
    z-index: 0;
    pointer-events: none;
}

@keyframes heroZoom {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.08);
    }
}


/* Hero content */

.hero-content {
    position: relative;
    z-index: 2;

    animation:
        heroContentReveal 1.2s cubic-bezier(.16,1,.3,1) both;

    animation-delay: 0.25s;
}

@keyframes heroContentReveal {

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

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


/* small heading */

.hero-content .small-heading {
    animation: heroSmallReveal 1s ease both;
    animation-delay: 0.45s;
}

@keyframes heroSmallReveal {

    from {
        opacity: 0;
        letter-spacing: 10px;
    }

    to {
        opacity: 1;
        letter-spacing: normal;
    }
}


/* Hero heading */

.hero-content h1 {
    animation: heroTitleReveal 1.2s cubic-bezier(.16,1,.3,1) both;
    animation-delay: 0.55s;
}

@keyframes heroTitleReveal {

    from {
        opacity: 0;
        transform: translateY(40px);
        filter: blur(10px);
    }

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


/* Hero paragraph */

.hero-content > p:not(.small-heading) {
    animation: heroParagraphReveal 1s ease both;
    animation-delay: 0.75s;
}

@keyframes heroParagraphReveal {

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

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


/* Hero buttons */

.hero-buttons {
    animation: heroButtonsReveal 1s cubic-bezier(.16,1,.3,1) both;
    animation-delay: 0.95s;
}

@keyframes heroButtonsReveal {

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

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


/* =========================================================
   PREMIUM BUTTON SHINE
   ========================================================= */

.shop-btn,
.collection-btn,
.offer-btn,
.product-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.shop-btn::before,
.collection-btn::before,
.offer-btn::before,
.product-btn::before {
    content: "";
    position: absolute;

    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background: linear-gradient(
        100deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

    transform: skewX(-20deg);

    transition: left 0.7s ease;

    z-index: -1;
}

.shop-btn:hover::before,
.collection-btn:hover::before,
.offer-btn:hover::before,
.product-btn:hover::before {
    left: 150%;
}


/* =========================================================
   SECTION TITLE REVEAL
   ========================================================= */

.section-title {
    opacity: 0;
    transform: translateY(45px);
    transition:
        opacity 0.9s ease,
        transform 0.9s cubic-bezier(.16,1,.3,1);
}

.section-title.reveal-active {
    opacity: 1;
    transform: translateY(0);
}


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

.product-card {
    opacity: 0;
    transform: translateY(70px) scale(.96);

    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(.16,1,.3,1),
        box-shadow 0.4s ease;
}

.product-card.reveal-active {
    opacity: 1;
    transform: translateY(0) scale(1);
}


/* stagger */

.product-card:nth-child(1) {
    transition-delay: .05s;
}

.product-card:nth-child(2) {
    transition-delay: .12s;
}

.product-card:nth-child(3) {
    transition-delay: .19s;
}

.product-card:nth-child(4) {
    transition-delay: .26s;
}


/* premium hover */

.product-card:hover {
    transform: translateY(-14px) scale(1.025);
    box-shadow:
        0 25px 60px rgba(0,0,0,.14);
}


/* Product image */

.product-card img {
    transition:
        transform 0.8s cubic-bezier(.16,1,.3,1),
        filter 0.6s ease;
}

.product-card:hover img {
    transform: scale(1.08);
}


/* Product title */

.product-card h3 {
    transition:
        transform 0.35s ease,
        color 0.35s ease;
}

.product-card:hover h3 {
    transform: translateX(4px);
}


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

.category-card {
    position: relative;
    overflow: hidden;

    opacity: 0;
    transform: translateY(60px);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.16,1,.3,1),
        box-shadow .5s ease;
}

.category-card.reveal-active {
    opacity: 1;
    transform: translateY(0);
}

.category-card img {
    transition:
        transform 1s cubic-bezier(.16,1,.3,1),
        filter .6s ease;
}

.category-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 25px 55px rgba(0,0,0,.16);
}

.category-card:hover img {
    transform: scale(1.12);
    filter: brightness(.9);
}


/* category text */

.category-card h3 {
    transition:
        transform .4s ease,
        letter-spacing .4s ease;
}

.category-card:hover h3 {
    transform: translateY(-5px);
    letter-spacing: 1px;
}


/* =========================================================
   WHY US CARDS
   ========================================================= */

.why-card {
    opacity: 0;
    transform: translateY(55px);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.16,1,.3,1),
        box-shadow .4s ease;
}

.why-card.reveal-active {
    opacity: 1;
    transform: translateY(0);
}

.why-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 45px rgba(0,0,0,.12);
}


/* icon animation */

.why-card i {
    transition:
        transform .5s cubic-bezier(.16,1,.3,1);
}

.why-card:hover i {
    transform:
        translateY(-7px)
        rotate(-8deg)
        scale(1.15);
}


/* =========================================================
   TESTIMONIALS
   ========================================================= */

.testimonial-card {
    opacity: 0;
    transform: translateY(50px) scale(.97);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.16,1,.3,1),
        box-shadow .4s ease;
}

.testimonial-card.reveal-active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.testimonial-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0,0,0,.12);
}


/* =========================================================
   OFFER BANNER
   ========================================================= */

.offer-banner {
    position: relative;
    overflow: hidden;
}

.offer-banner::before {
    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    border-radius: 50%;

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

    top: -100px;
    right: -70px;

    animation:
        offerCircle 8s ease-in-out infinite alternate;
}

@keyframes offerCircle {

    from {
        transform: scale(1) rotate(0deg);
    }

    to {
        transform: scale(1.25) rotate(30deg);
    }
}


/* =========================================================
   NEWSLETTER
   ========================================================= */

.newsletter {
    opacity: 0;
    transform: translateY(50px);

    transition:
        opacity .9s ease,
        transform .9s cubic-bezier(.16,1,.3,1);
}

.newsletter.reveal-active {
    opacity: 1;
    transform: translateY(0);
}

.newsletter input {
    transition:
        box-shadow .4s ease,
        transform .3s ease;
}

.newsletter input:focus {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0,0,0,.1);
}


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

footer {
    opacity: 0;
    transform: translateY(40px);

    transition:
        opacity 1s ease,
        transform 1s ease;
}

footer.reveal-active {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   FLOATING EFFECT
   ========================================================= */

@keyframes premiumFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

.hero-buttons .shop-btn {
    animation: premiumFloat 4s ease-in-out infinite;
}


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

html {
    scroll-behavior: smooth;
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
/* =========================================================
   PYARI ENTERPRISES
   PREMIUM CINEMATIC HERO ANIMATION
========================================================= */

.cinematic-hero {
    position: relative;
    min-height: 700px;
    height: 78vh;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 70% 45%,
            rgba(205, 163, 35, 0.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 20% 80%,
            rgba(255, 255, 255, 0.04),
            transparent 35%
        ),
        #151515;

    isolation: isolate;
}


/* =========================================================
   ANIMATION BACKGROUND
========================================================= */

.hero-animation {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: -1;
    pointer-events: none;
}


/* =========================================================
   FABRIC EFFECT
========================================================= */

.fabric {
    position: absolute;
    width: 150%;
    height: 180%;
    left: -25%;
    top: -40%;

    opacity: 0.45;

    filter: blur(1px);

    transform-origin: center;

    will-change: transform;
}


/* Main fabric */

.fabric-1 {

    background:
        radial-gradient(
            ellipse at 30% 50%,
            rgba(255,255,255,0.13),
            transparent 38%
        ),
        radial-gradient(
            ellipse at 70% 30%,
            rgba(190,150,40,0.12),
            transparent 32%
        );

    border-radius: 48% 52% 60% 40%;

    animation:
        fabricMoveOne 18s ease-in-out infinite alternate;
}


/* Secondary fabric */

.fabric-2 {

    background:
        radial-gradient(
            ellipse at 60% 70%,
            rgba(255,255,255,0.08),
            transparent 35%
        ),
        linear-gradient(
            115deg,
            transparent 35%,
            rgba(255,255,255,0.045) 45%,
            transparent 60%
        );

    border-radius: 55% 45% 35% 65%;

    animation:
        fabricMoveTwo 24s ease-in-out infinite alternate;
}


/* Third fabric */

.fabric-3 {

    background:
        linear-gradient(
            125deg,
            transparent 25%,
            rgba(212,170,45,0.07) 42%,
            transparent 58%
        );

    border-radius: 50%;

    animation:
        fabricMoveThree 30s ease-in-out infinite alternate;
}


/* Fabric animations */

@keyframes fabricMoveOne {

    0% {
        transform:
            translate3d(-4%, -2%, 0)
            rotate(-3deg)
            scale(1);
    }

    50% {
        transform:
            translate3d(4%, 3%, 0)
            rotate(2deg)
            scale(1.06);
    }

    100% {
        transform:
            translate3d(-2%, 6%, 0)
            rotate(5deg)
            scale(1.12);
    }
}


@keyframes fabricMoveTwo {

    0% {
        transform:
            translate3d(5%, 5%, 0)
            rotate(2deg)
            scale(1.05);
    }

    50% {
        transform:
            translate3d(-5%, -2%, 0)
            rotate(-4deg)
            scale(1.12);
    }

    100% {
        transform:
            translate3d(3%, -6%, 0)
            rotate(3deg)
            scale(1.08);
    }
}


@keyframes fabricMoveThree {

    0% {
        transform:
            translate3d(-3%, 4%, 0)
            rotate(0deg)
            scale(1);
    }

    100% {
        transform:
            translate3d(5%, -5%, 0)
            rotate(-6deg)
            scale(1.15);
    }
}


/* =========================================================
   GOLDEN LIGHT SWEEP
========================================================= */

.gold-light {

    position: absolute;

    width: 35%;
    height: 180%;

    top: -40%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(218,174,42,0.05),
            rgba(255,215,100,0.18),
            rgba(218,174,42,0.05),
            transparent
        );

    filter: blur(25px);

    transform: rotate(18deg);

    opacity: 0.7;
}


.gold-light-1 {

    left: -40%;

    animation:
        goldSweep 14s ease-in-out infinite;
}


.gold-light-2 {

    left: -50%;

    opacity: 0.35;

    filter: blur(45px);

    animation:
        goldSweep 20s ease-in-out infinite 5s;
}


@keyframes goldSweep {

    0% {
        transform:
            translateX(-20vw)
            rotate(18deg);
    }

    50% {
        transform:
            translateX(100vw)
            rotate(18deg);
    }

    100% {
        transform:
            translateX(180vw)
            rotate(18deg);
    }
}


/* =========================================================
   PYARI "P" BRAND MARKS
========================================================= */

.brand-mark {

    position: absolute;

    font-family: Georgia, serif;

    font-size: 32vw;

    font-weight: 700;

    line-height: 1;

    color: transparent;

    -webkit-text-stroke:
        1px rgba(218,174,42,0.09);

    opacity: 0.5;

    user-select: none;

    filter: blur(0.2px);

    will-change: transform;
}


.brand-mark-1 {

    right: -8%;

    top: 0%;

    animation:
        brandFloatOne 18s ease-in-out infinite alternate;
}


.brand-mark-2 {

    left: -18%;

    bottom: -25%;

    font-size: 24vw;

    opacity: 0.25;

    animation:
        brandFloatTwo 24s ease-in-out infinite alternate;
}


@keyframes brandFloatOne {

    0% {
        transform:
            translate3d(0, 0, 0)
            rotate(-5deg);
    }

    100% {
        transform:
            translate3d(-4%, 5%, 0)
            rotate(3deg);
    }
}


@keyframes brandFloatTwo {

    0% {
        transform:
            translate3d(0, 0, 0)
            rotate(4deg);
    }

    100% {
        transform:
            translate3d(5%, -6%, 0)
            rotate(-4deg);
    }
}


/* =========================================================
   PARTICLES
========================================================= */

.particles {

    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;
}


.hero-particle {

    position: absolute;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: rgba(230,194,91,0.7);

    box-shadow:
        0 0 8px rgba(230,194,91,0.5);

    animation:
        particleFloat linear infinite;

    opacity: 0;
}


@keyframes particleFloat {

    0% {

        transform:
            translate3d(0, 30px, 0)
            scale(0.5);

        opacity: 0;
    }

    15% {
        opacity: 0.7;
    }

    50% {
        transform:
            translate3d(20px, -45vh, 0)
            scale(1);
    }

    85% {
        opacity: 0.4;
    }

    100% {

        transform:
            translate3d(-20px, -100vh, 0)
            scale(0.2);

        opacity: 0;
    }
}


/* =========================================================
   VIGNETTE
========================================================= */

.hero-vignette {

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            ellipse at center,
            transparent 35%,
            rgba(0,0,0,0.18) 65%,
            rgba(0,0,0,0.60) 100%
        );

    z-index: 3;

    pointer-events: none;
}


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

.cinematic-hero .hero-content {

    position: relative;

    z-index: 10;

    max-width: 650px;

    transform:
        translate3d(0,0,0);

    animation:
        heroContentReveal 1.4s
        cubic-bezier(.16,1,.3,1)
        both;
}


@keyframes heroContentReveal {

    from {

        opacity: 0;

        transform:
            translate3d(-60px, 30px, 0);
    }

    to {

        opacity: 1;

        transform:
            translate3d(0,0,0);
    }
}


/* Small heading */

.cinematic-hero .small-heading {

    letter-spacing: 4px;

    animation:
        headingReveal 1s
        ease-out
        0.2s
        both;
}


@keyframes headingReveal {

    from {

        opacity: 0;

        transform:
            translateY(20px);

        letter-spacing: 10px;
    }

    to {

        opacity: 1;

        transform:
            translateY(0);

        letter-spacing: 4px;
    }
}


/* Main heading */

.cinematic-hero h1 {

    animation:
        titleReveal 1.2s
        cubic-bezier(.16,1,.3,1)
        0.3s
        both;

    text-shadow:
        0 8px 30px rgba(0,0,0,0.35);
}


@keyframes titleReveal {

    from {

        opacity: 0;

        transform:
            translateY(50px)
            scale(0.96);

        filter: blur(10px);
    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        filter: blur(0);
    }
}


/* Description */

.cinematic-hero .hero-description {

    animation:
        descriptionReveal 1s
        ease-out
        0.7s
        both;
}


@keyframes descriptionReveal {

    from {

        opacity: 0;

        transform:
            translateY(25px);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }
}


/* =========================================================
   PREMIUM BUTTONS
========================================================= */

.cinematic-hero .hero-buttons {

    animation:
        buttonsReveal 1s
        ease-out
        0.9s
        both;
}


@keyframes buttonsReveal {

    from {

        opacity: 0;

        transform:
            translateY(25px);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }
}


.cinematic-hero .shop-btn,
.cinematic-hero .collection-btn {

    position: relative;

    overflow: hidden;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


.cinematic-hero .shop-btn::before,
.cinematic-hero .collection-btn::before {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 70%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.4),
            transparent
        );

    transform: skewX(-20deg);

    transition: left 0.6s ease;
}


.cinematic-hero .shop-btn:hover::before,
.cinematic-hero .collection-btn:hover::before {

    left: 140%;
}


.cinematic-hero .shop-btn:hover {

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

    box-shadow:
        0 15px 35px rgba(218,174,42,0.25);
}


.cinematic-hero .collection-btn:hover {

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

    box-shadow:
        0 15px 35px rgba(255,255,255,0.10);
}


/* =========================================================
   SCROLL INDICATOR
========================================================= */

.hero-scroll-indicator {

    position: absolute;

    z-index: 10;

    right: 45px;

    bottom: 35px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 12px;

    color: rgba(255,255,255,0.55);

    font-size: 9px;

    letter-spacing: 3px;

    animation:
        scrollIndicatorReveal 1s
        ease-out
        1.5s
        both;
}


.scroll-line {

    width: 1px;

    height: 55px;

    background:
        linear-gradient(
            to bottom,
            rgba(218,174,42,0.8),
            transparent
        );

    animation:
        scrollLineMove 2s
        ease-in-out
        infinite;
}


@keyframes scrollLineMove {

    0%,
    100% {

        transform:
            scaleY(0.5);

        transform-origin: top;

        opacity: 0.4;
    }

    50% {

        transform:
            scaleY(1);

        transform-origin: top;

        opacity: 1;
    }
}


@keyframes scrollIndicatorReveal {

    from {

        opacity: 0;

        transform:
            translateY(20px);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }
}


/* =========================================================
   MOUSE PARALLAX
========================================================= */

.cinematic-hero .hero-animation {

    transition:
        transform 0.8s
        cubic-bezier(.16,1,.3,1);
}


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

@media (max-width: 768px) {

    .cinematic-hero {

        min-height: 650px;

        height: 80vh;
    }


    .brand-mark {

        font-size: 55vw;
    }


    .brand-mark-1 {

        right: -25%;

        top: 15%;
    }


    .brand-mark-2 {

        left: -30%;

        bottom: -10%;
    }


    .gold-light {

        width: 55%;
    }


    .hero-scroll-indicator {

        display: none;
    }


    .cinematic-hero .hero-content {

        padding:
            0 25px;
    }

}


/* =========================================================
   REDUCE MOTION ACCESSIBILITY
========================================================= */

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

    .fabric,
    .gold-light,
    .brand-mark,
    .hero-particle,
    .scroll-line {

        animation: none !important;
    }

    .cinematic-hero .hero-content,
    .cinematic-hero h1,
    .cinematic-hero .hero-description,
    .cinematic-hero .hero-buttons {

        animation: none !important;
    }

}
/* =========================================================
   PYARI ENTERPRISES — ADVANCED CINEMATIC HERO
   EXTRA PREMIUM ANIMATIONS
   ========================================================= */

/* Keep animation behind the hero content */
.cinematic-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* =========================================================
   ANIMATION LAYER
   ========================================================= */

.cinematic-hero .hero-animation {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

/* =========================================================
   PREMIUM FLOATING GOLDEN LIGHTS
   ========================================================= */

.cinematic-hero .gold-light {
    will-change: transform, opacity;
}

.cinematic-hero .gold-light-1 {
    animation:
        premiumGoldFloat1
        12s
        ease-in-out
        infinite alternate;
}

.cinematic-hero .gold-light-2 {
    animation:
        premiumGoldFloat2
        16s
        ease-in-out
        infinite alternate;
}


/* =========================================================
   MOVING FABRIC
   ========================================================= */

.cinematic-hero .fabric {
    will-change: transform;
}

.cinematic-hero .fabric-1 {
    animation:
        fabricMotion1
        18s
        ease-in-out
        infinite alternate;
}

.cinematic-hero .fabric-2 {
    animation:
        fabricMotion2
        22s
        ease-in-out
        infinite alternate;
}

.cinematic-hero .fabric-3 {
    animation:
        fabricMotion3
        26s
        ease-in-out
        infinite alternate;
}


/* =========================================================
   LARGE PYARI "P" BRAND MARK
   ========================================================= */

.cinematic-hero .brand-mark {
    will-change: transform, opacity;
}

.cinematic-hero .brand-mark-1 {
    animation:
        premiumBrandOne
        18s
        ease-in-out
        infinite alternate;
}

.cinematic-hero .brand-mark-2 {
    animation:
        premiumBrandTwo
        24s
        ease-in-out
        infinite alternate;
}


/* =========================================================
   GOLDEN LIGHT SWEEP
   ========================================================= */

.cinematic-hero::after {
    content: "";

    position: absolute;

    top: -30%;
    left: -45%;

    width: 28%;
    height: 160%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.02),
            rgba(218,174,42,0.10),
            rgba(255,255,255,0.025),
            transparent
        );

    transform: rotate(16deg);

    filter: blur(10px);

    pointer-events: none;

    z-index: 3;

    animation:
        premiumLightSweep
        11s
        ease-in-out
        infinite;
}


/* =========================================================
   FLOATING PARTICLE EFFECT
   ========================================================= */

.cinematic-hero .particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
}


/* Automatically create glowing particles */

.cinematic-hero .particles::before,
.cinematic-hero .particles::after {
    content: "";

    position: absolute;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: rgba(218,174,42,0.8);

    box-shadow:
        0 0 8px rgba(218,174,42,0.7),
        0 0 20px rgba(218,174,42,0.35);

    left: 25%;
    bottom: -10px;

    animation:
        premiumParticle1
        13s
        linear
        infinite;
}

.cinematic-hero .particles::after {
    width: 3px;
    height: 3px;

    left: 70%;

    animation:
        premiumParticle2
        17s
        linear
        infinite;

    animation-delay: 4s;
}


/* =========================================================
   HERO CONTENT PREMIUM ENTRANCE
   ========================================================= */

.cinematic-hero .hero-content {
    position: relative;
    z-index: 10;
}


/* Small heading */

.cinematic-hero .small-heading {
    animation:
        cinematicHeading
        1.2s
        cubic-bezier(.16,1,.3,1)
        both;
}


/* Main title */

.cinematic-hero h1 {
    animation:
        cinematicTitle
        1.4s
        cubic-bezier(.16,1,.3,1)
        0.15s
        both;
}


/* Description */

.cinematic-hero .hero-description {
    animation:
        cinematicDescription
        1.2s
        cubic-bezier(.16,1,.3,1)
        0.35s
        both;
}


/* Buttons */

.cinematic-hero .hero-buttons {
    animation:
        cinematicButtons
        1.2s
        cubic-bezier(.16,1,.3,1)
        0.5s
        both;
}


/* =========================================================
   ANIMATION KEYFRAMES
   ========================================================= */

@keyframes premiumGoldFloat1 {

    0% {
        transform:
            translate3d(-50px, 20px, 0)
            scale(0.9);

        opacity: 0.45;
    }

    50% {
        opacity: 0.75;
    }

    100% {
        transform:
            translate3d(110px, -80px, 0)
            scale(1.25);

        opacity: 0.55;
    }
}


@keyframes premiumGoldFloat2 {

    0% {
        transform:
            translate3d(0, 50px, 0)
            scale(0.85);
    }

    100% {
        transform:
            translate3d(-120px, -100px, 0)
            scale(1.2);
    }
}


/* =========================================================
   FABRIC MOTION
   ========================================================= */

@keyframes fabricMotion1 {

    0% {
        transform:
            translate3d(-20px, 0, 0)
            rotate(-2deg)
            scale(1);
    }

    100% {
        transform:
            translate3d(80px, -25px, 0)
            rotate(3deg)
            scale(1.08);
    }
}


@keyframes fabricMotion2 {

    0% {
        transform:
            translate3d(30px, 20px, 0)
            rotate(1deg)
            scale(1);
    }

    100% {
        transform:
            translate3d(-100px, -40px, 0)
            rotate(-3deg)
            scale(1.12);
    }
}


@keyframes fabricMotion3 {

    0% {
        transform:
            translate3d(-40px, 20px, 0)
            scale(1);
    }

    100% {
        transform:
            translate3d(120px, -60px, 0)
            scale(1.15);
    }
}


/* =========================================================
   BRAND P MOTION
   ========================================================= */

@keyframes premiumBrandOne {

    0% {
        transform:
            translate3d(0, 0, 0)
            rotate(-8deg)
            scale(1);
    }

    100% {
        transform:
            translate3d(-70px, 45px, 0)
            rotate(5deg)
            scale(1.08);
    }
}


@keyframes premiumBrandTwo {

    0% {
        transform:
            translate3d(0, 0, 0)
            rotate(8deg)
            scale(1);
    }

    100% {
        transform:
            translate3d(90px, -60px, 0)
            rotate(-5deg)
            scale(0.92);
    }
}


/* =========================================================
   LIGHT SWEEP
   ========================================================= */

@keyframes premiumLightSweep {

    0% {
        transform:
            translateX(-100%)
            rotate(16deg);

        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    55% {
        opacity: 0.7;
    }

    100% {
        transform:
            translateX(500%)
            rotate(16deg);

        opacity: 0;
    }
}


/* =========================================================
   PARTICLES
   ========================================================= */

@keyframes premiumParticle1 {

    0% {
        transform:
            translate3d(0, 20px, 0)
            scale(0.3);

        opacity: 0;
    }

    15% {
        opacity: 0.8;
    }

    50% {
        transform:
            translate3d(70px, -45vh, 0)
            scale(1);
    }

    80% {
        opacity: 0.4;
    }

    100% {
        transform:
            translate3d(-40px, -100vh, 0)
            scale(0.2);

        opacity: 0;
    }
}


@keyframes premiumParticle2 {

    0% {
        transform:
            translate3d(0, 20px, 0)
            scale(0.3);

        opacity: 0;
    }

    20% {
        opacity: 0.8;
    }

    55% {
        transform:
            translate3d(-100px, -55vh, 0)
            scale(1.1);
    }

    100% {
        transform:
            translate3d(40px, -105vh, 0)
            scale(0.2);

        opacity: 0;
    }
}


/* =========================================================
   TEXT ENTRANCE ANIMATIONS
   ========================================================= */

@keyframes cinematicHeading {

    from {
        opacity: 0;

        transform:
            translateY(25px);

        letter-spacing: 10px;
    }

    to {
        opacity: 1;

        transform:
            translateY(0);

        letter-spacing: 4px;
    }
}


@keyframes cinematicTitle {

    from {
        opacity: 0;

        transform:
            translateY(55px)
            scale(0.96);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


@keyframes cinematicDescription {

    from {
        opacity: 0;

        transform:
            translateY(30px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


@keyframes cinematicButtons {

    from {
        opacity: 0;

        transform:
            translateY(25px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


/* =========================================================
   SCROLL INDICATOR
   ========================================================= */

.cinematic-hero .hero-scroll-indicator {
    animation:
        scrollIndicatorFloat
        3s
        ease-in-out
        infinite;
}


@keyframes scrollIndicatorFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(8px);
    }
}


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

@media (max-width: 768px) {

    .cinematic-hero::after {
        width: 45%;
    }

    .cinematic-hero .brand-mark {
        opacity: 0.3;
    }

    .cinematic-hero .gold-light {
        filter: blur(55px);
    }
}


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

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

    .cinematic-hero *,
    .cinematic-hero::after {
        animation: none !important;
    }
}
/* =========================================================
   PYARI ENTERPRISES — 3D CINEMATIC TEXT
========================================================= */

.pyari-3d-stage {
    position: absolute;

    width: 850px;
    height: 400px;

    right: 12%;
    top: 50%;

    transform: translateY(-50%);

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

    perspective: 1200px;

    z-index: 2;

    pointer-events: none;

    overflow: visible;
}


/* =========================================================
   MAIN 3D TEXT
========================================================= */

.pyari-3d-text {

    position: relative;

    transform-style: preserve-3d;

    animation:
        pyariTextJourney 10s cubic-bezier(.22,.61,.36,1)
        infinite;

    white-space: nowrap;

}


/* Main text */

.pyari-text-main {

    position: relative;

    display: block;

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

    font-size: clamp(48px, 5vw, 90px);

    font-weight: 800;

    letter-spacing: 7px;

    color: transparent;

    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.75);

    background:
        linear-gradient(
            180deg,
            #fff9d6 0%,
            #f4c542 25%,
            #c99218 50%,
            #fff1a8 70%,
            #a96b00 100%
        );

    -webkit-background-clip: text;

    background-clip: text;

    filter:
        drop-shadow(0 0 8px rgba(255, 193, 7, .45))
        drop-shadow(0 0 25px rgba(255, 170, 0, .25));

    transform: translateZ(40px);

}


/* =========================================================
   3D DEPTH
========================================================= */

.pyari-text-main::before {

    content: "PYARI ENTERPRISES";

    position: absolute;

    left: 0;
    top: 7px;

    color: #6d4300;

    z-index: -1;

    transform: translateZ(-25px);

    opacity: .9;

}


/* Extra golden depth */

.pyari-text-main::after {

    content: "PYARI ENTERPRISES";

    position: absolute;

    left: 0;
    top: 14px;

    color: #3b2500;

    z-index: -2;

    transform: translateZ(-45px);

    opacity: .8;

}


/* =========================================================
   GLOW TEXT
========================================================= */

.pyari-text-glow {

    position: absolute;

    inset: 0;

    color: transparent;

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

    font-size: clamp(48px, 5vw, 90px);

    font-weight: 800;

    letter-spacing: 7px;

    -webkit-text-stroke: 2px rgba(255, 193, 7, .18);

    filter:

        blur(12px)

        drop-shadow(
            0 0 25px rgba(255, 193, 7, .55)
        );

    opacity: .75;

    transform: translateZ(0);

}


/* =========================================================
   FIRE RING
========================================================= */

.pyari-fire-ring {

    position: absolute;

    width: 720px;
    height: 210px;

    border-radius: 50%;

    background:

        radial-gradient(
            ellipse,
            transparent 45%,
            rgba(255, 196, 0, .10) 52%,
            rgba(255, 125, 0, .22) 58%,
            rgba(255, 60, 0, .12) 64%,
            transparent 72%
        );

    filter: blur(5px);

    animation:
        fireRingPulse 2.4s ease-in-out infinite,
        fireRingRotate 8s linear infinite;

    opacity: .9;

}


/* =========================================================
   FIRE ENERGY LAYER
========================================================= */

.pyari-fire-ring::before {

    content: "";

    position: absolute;

    inset: -25px;

    border-radius: 50%;

    background:

        conic-gradient(
            from 0deg,
            transparent,
            rgba(255, 208, 0, .8),
            rgba(255, 95, 0, .9),
            transparent 20%,
            rgba(255, 180, 0, .8),
            transparent 40%,
            rgba(255, 70, 0, .7),
            transparent 65%,
            rgba(255, 190, 0, .7),
            transparent
        );

    filter: blur(18px);

    animation:
        fireSpin 3s linear infinite;

}


/* =========================================================
   FIRE INNER GLOW
========================================================= */

.pyari-fire-ring::after {

    content: "";

    position: absolute;

    inset: 20px;

    border-radius: 50%;

    background:

        radial-gradient(
            ellipse,
            rgba(255, 210, 60, .12),
            transparent 70%
        );

    filter: blur(12px);

}


/* =========================================================
   TEXT JOURNEY
========================================================= */

@keyframes pyariTextJourney {

    0% {

        opacity: 0;

        transform:
            translate3d(500px, 0, -500px)
            rotateY(-35deg)
            scale(.45);

        filter:
            blur(12px);

    }


    10% {

        opacity: .5;

    }


    25% {

        opacity: 1;

        transform:
            translate3d(80px, 0, 80px)
            rotateY(-12deg)
            scale(.9);

        filter:
            blur(0);

    }


    40% {

        transform:
            translate3d(0, 0, 160px)
            rotateY(0deg)
            scale(1);

        opacity: 1;

    }


    55% {

        transform:
            translate3d(-20px, 0, 100px)
            rotateY(0deg)
            scale(1.03);

        opacity: 1;

    }


    72% {

        transform:
            translate3d(-100px, 0, 20px)
            rotateY(12deg)
            scale(.9);

        opacity: .75;

    }


    88% {

        opacity: .25;

        transform:
            translate3d(-500px, 0, -500px)
            rotateY(35deg)
            scale(.45);

        filter:
            blur(12px);

    }


    100% {

        opacity: 0;

        transform:
            translate3d(-700px, 0, -700px)
            rotateY(45deg)
            scale(.25);

        filter:
            blur(20px);

    }

}


/* =========================================================
   FIRE ANIMATIONS
========================================================= */

@keyframes fireRingPulse {

    0%,
    100% {

        transform:
            scale(1)
            rotateX(60deg);

        opacity: .55;

    }

    50% {

        transform:
            scale(1.15)
            rotateX(60deg);

        opacity: 1;

    }

}


@keyframes fireRingRotate {

    from {

        rotate: 0deg;

    }

    to {

        rotate: 360deg;

    }

}


@keyframes fireSpin {

    from {

        transform:
            rotate(0deg)
            scale(1);

    }

    50% {

        transform:
            rotate(180deg)
            scale(1.08);

    }

    to {

        transform:
            rotate(360deg)
            scale(1);

    }

}


/* =========================================================
   FIRE EMBERS
========================================================= */

.pyari-embers {

    position: absolute;

    inset: -100px;

    pointer-events: none;

}


.pyari-ember {

    position: absolute;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #ffc107;

    box-shadow:

        0 0 5px #ff9800,

        0 0 12px #ff6d00,

        0 0 25px rgba(255, 80, 0, .8);

    animation:
        emberRise linear infinite;

}


@keyframes emberRise {

    0% {

        opacity: 0;

        transform:
            translate3d(0, 30px, 0)
            scale(.4);

    }

    20% {

        opacity: 1;

    }

    70% {

        opacity: .8;

    }

    100% {

        opacity: 0;

        transform:
            translate3d(
                var(--drift),
                -220px,
                0
            )
            scale(1.4);

    }

}


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

@media (max-width: 1100px) {

    .pyari-3d-stage {

        right: -8%;

        width: 700px;

    }

    .pyari-fire-ring {

        width: 600px;

    }

}


@media (max-width: 768px) {

    .pyari-3d-stage {

        width: 100%;

        right: 0;

        top: 65%;

        opacity: .28;

        transform:
            translateY(-50%)
            scale(.7);

    }

    .pyari-text-main,
    .pyari-text-glow {

        font-size: 42px;

        letter-spacing: 4px;

    }

}
/* HERO ANIMATION LAYERS */

.hero-animation {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 10;
}

.hero-scroll-indicator {
    position: absolute;
    z-index: 20;
}
/* =========================================================
   PYARI ENTERPRISES
   MOBILE HEADER - COMPACT STRUCTURE
   ========================================================= */

@media only screen and (max-width: 768px) {

    /* =========================
       TOP BAR
       ========================= */

    .top-bar {
        display: none !important;
    }


    /* =========================
       HEADER
       ========================= */

    header {
        width: 100% !important;
        height: 125px !important;
        min-height: 125px !important;

        padding: 12px 16px !important;
        margin: 0 !important;

        display: grid !important;

        grid-template-columns: 82px 1fr !important;
        grid-template-rows: 52px 45px !important;

        column-gap: 12px !important;
        row-gap: 8px !important;

        align-items: center !important;

        box-sizing: border-box !important;
    }


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

    header .logo {
        width: 82px !important;
        height: 52px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        grid-column: 1 !important;
        grid-row: 1 !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    header .logo a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        height: 100% !important;
    }

    header .logo img {
        width: 78px !important;
        height: 52px !important;

        max-width: 78px !important;
        max-height: 52px !important;

        object-fit: contain !important;

        display: block !important;
    }


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

    header .search-box {
        grid-column: 2 !important;
        grid-row: 1 !important;

        width: 100% !important;
        height: 42px !important;

        margin: 0 !important;

        display: flex !important;
    }

    header .search-box input {
        width: 100% !important;
        height: 42px !important;

        box-sizing: border-box !important;

        font-size: 13px !important;
        padding: 0 45px 0 13px !important;
    }

    header .search-box button {
        width: 42px !important;
        height: 42px !important;

        flex-shrink: 0 !important;
    }


    /* =========================
       ACCOUNT / WISHLIST / CART
       ========================= */

    header .header-icons {
        grid-column: 1 / 3 !important;
        grid-row: 2 !important;

        width: 100% !important;
        height: 45px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 45px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    header .header-icons a {
        position: relative !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        height: 45px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    header .header-icons i {
        font-size: 21px !important;
    }

    /* Keep the words underneath the icons */
    header .header-icons a > span:not(.icon-badge) {
        display: block !important;

        position: absolute !important;

        top: 25px !important;

        font-size: 11px !important;
        line-height: 14px !important;

        white-space: nowrap !important;
    }

    /* Badge */
    header .header-icons .icon-badge {
        position: absolute !important;

        top: -4px !important;
        right: -9px !important;

        min-width: 16px !important;
        height: 16px !important;

        padding: 0 4px !important;

        font-size: 9px !important;
        line-height: 16px !important;
    }


    /* =========================
       NAVIGATION
       ========================= */

    nav {
        width: 100% !important;

        height: 48px !important;
        min-height: 48px !important;

        padding: 0 !important;
        margin: 0 !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        white-space: nowrap !important;

        scrollbar-width: none !important;
    }

    nav::-webkit-scrollbar {
        display: none !important;
    }

    nav ul {
        width: max-content !important;
        min-width: 100% !important;

        height: 48px !important;
        min-height: 48px !important;

        display: flex !important;
        flex-wrap: nowrap !important;

        align-items: center !important;
        justify-content: flex-start !important;

        gap: 25px !important;

        margin: 0 !important;
        padding: 0 20px !important;

        box-sizing: border-box !important;
    }

    nav ul li {
        display: block !important;
        flex-shrink: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    nav ul li a {
        display: block !important;

        padding: 14px 0 !important;

        font-size: 13px !important;
        line-height: 20px !important;

        white-space: nowrap !important;
    }


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

    .hero,
    .cinematic-hero {
        width: 100% !important;

        min-height: 560px !important;
        height: 560px !important;

        margin: 0 !important;
    }

}