/* =========================================
   KINIVALO SHOPIFY LEVEL PREMIUM UI
========================================= */

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

:root{

    --primary:#ff3c5f;
    --secondary:#ff7a18;

    --bg:#06070c;
    --card:#11131a;
    --light:#ffffff;
    --text:#d9d9d9;

    --gradient:
    linear-gradient(
        135deg,
        #ff3c5f,
        #ff7a18,
        #ff3c5f
    );

    --glass:
    rgba(255,255,255,.08);

    --border:
    rgba(255,255,255,.12);

    --shadow:
    0 15px 60px rgba(0,0,0,.45);

}

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

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

html{
    scroll-behavior:smooth;
}

body{

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

    background:var(--bg);

    color:#fff;

    overflow-x:hidden;

    position:relative;

    min-height:100vh;

    padding-bottom:150px;
}

/* =========================================
   FLOATING BACKGROUND
========================================= */

body::before{

    content:"";

    position:fixed;

    width:700px;
    height:700px;

    background:
    radial-gradient(
        circle,
        rgba(255,60,95,.18),
        transparent 70%
    );

    top:-200px;
    left:-200px;

    animation:floatBg 12s linear infinite;

    z-index:-1;
}

body::after{

    content:"";

    position:fixed;

    width:600px;
    height:600px;

    background:
    radial-gradient(
        circle,
        rgba(255,122,24,.18),
        transparent 70%
    );

    right:-200px;
    bottom:-200px;

    animation:floatBg2 15s linear infinite;

    z-index:-1;
}

@keyframes floatBg{

    0%{
        transform:translateY(0px);
    }

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

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

}

@keyframes floatBg2{

    0%{
        transform:translateX(0px);
    }

    50%{
        transform:translateX(-40px);
    }

    100%{
        transform:translateX(0px);
    }

}

/* =========================================
   PREMIUM CURSOR GLOW
========================================= */

.cursor-glow{

    width:300px;
    height:300px;

    background:
    radial-gradient(
        circle,
        rgba(255,60,95,.16),
        transparent 70%
    );

    position:fixed;

    pointer-events:none;

    border-radius:50%;

    transform:translate(-50%,-50%);

    z-index:0;
}

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

::-webkit-scrollbar{
    width:8px;
}

::-webkit-scrollbar-thumb{

    background:var(--gradient);

    border-radius:20px;
}

/* =========================================
   APPLE NAVBAR
========================================= */

.header{

    position:sticky;

    top:0;

    z-index:9999;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 5%;

    background:
    rgba(10,10,10,.65);

    backdrop-filter:blur(18px);

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

.logo{

    font-size:32px;

    font-weight:900;

    background:var(--gradient);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;
}

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

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

    position:relative;

    overflow:hidden;

    transition:.35s ease;

    cursor:pointer;
}

.checkout-btn::before,
.shop-btn::before,
.btn::before{

    content:"";

    position:absolute;

    inset:0;

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

    transform:translateX(-100%);

    transition:.7s;
}

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

    transform:translateX(100%);
}

.checkout-btn{

    background:var(--gradient);

    color:#fff;

    text-decoration:none;

    padding:14px 24px;

    border-radius:18px;

    font-weight:700;

    box-shadow:
    0 10px 30px rgba(255,60,95,.25);
}

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

.hero{

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:50px;

    align-items:center;

    padding:70px 5%;
}

/* =========================================
   HERO IMAGE SLIDER
========================================= */

.hero-image{

    position:relative;

    border-radius:35px;

    overflow:hidden;

    background:#111;

    box-shadow:var(--shadow);
}

.hero-image img{

    width:100%;

    height:650px;

    object-fit:cover;

    transition:1s ease;
}

.hero-image::after{

    content:"";

    position:absolute;

    inset:0;

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

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

.hero-content{

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

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

    backdrop-filter:blur(18px);

    border-radius:35px;

    padding:50px;

    position:relative;

    overflow:hidden;
}

.hero-content::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:35px;

    background:var(--gradient);

    z-index:-1;

    animation:borderRotate 6s linear infinite;
}

@keyframes borderRotate{

    0%{
        filter:hue-rotate(0deg);
    }

    100%{
        filter:hue-rotate(360deg);
    }

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

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

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

    padding:10px 20px;

    border-radius:60px;

    font-size:14px;

    margin-bottom:25px;
}

.hero-content h1{

    font-size:60px;

    line-height:1.1;

    margin-bottom:20px;

    font-weight:900;
}

.old-price{

    text-decoration:line-through;

    color:#aaa;

    font-size:28px;

    margin-right:10px;
}

.new-price{

    font-size:55px;

    font-weight:900;

    background:var(--gradient);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;
}

.hero-rating{

    margin:20px 0;

    color:#ffc107;

    font-weight:700;
}

.hero-list{

    list-style:none;

    margin:25px 0;
}

.hero-list li{

    margin-bottom:14px;

    font-size:16px;

    color:#ddd;
}

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

.shop-btn{

    width:100%;

    border:none;

    background:var(--gradient);

    color:#fff;

    padding:20px;

    border-radius:20px;

    font-size:20px;

    font-weight:800;

    box-shadow:
    0 15px 40px rgba(255,60,95,.35);
}

.shop-btn:hover{

    transform:
    translateY(-4px)
    scale(1.02);
}

/* =========================================
   PREMIUM SKELETON
========================================= */

.skeleton{

    position:relative;

    overflow:hidden;

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

    border-radius:25px;

    height:450px;
}

.skeleton::before{

    content:"";

    position:absolute;

    top:0;
    left:-150px;

    width:150px;
    height:100%;

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

    animation:skeletonMove 1.2s infinite;
}

@keyframes skeletonMove{

    100%{
        left:100%;
    }

}

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

.products-section{

    padding:20px 5% 120px;
}

.section-header{

    text-align:center;

    margin-bottom:50px;
}

.section-header h2{

    font-size:52px;

    font-weight:900;
}

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

.products-grid{

    display:grid;

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

    gap:30px;
}

/* =========================================
   3D HOVER CARD
========================================= */

.product-card{

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

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

    backdrop-filter:blur(14px);

    border-radius:30px;

    overflow:hidden;

    transition:.4s ease;

    transform-style:preserve-3d;

    position:relative;
}

.product-card:hover{

    transform:
    rotateX(5deg)
    rotateY(-5deg)
    translateY(-12px);

    box-shadow:
    0 25px 60px rgba(0,0,0,.45);
}

/* =========================================
   ANIMATED GRADIENT BORDER
========================================= */

.product-card::before{

    content:"";

    position:absolute;

    inset:-2px;

    background:var(--gradient);

    z-index:-1;

    border-radius:30px;

    background-size:300% 300%;

    animation:borderFlow 5s linear infinite;
}

@keyframes borderFlow{

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

    50%{
        background-position:100% 50%;
    }

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

}

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

.product-image-box{

    height:320px;

    overflow:hidden;

    position:relative;
}

.product-image{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1s;
}

.product-card:hover .product-image{

    transform:scale(1.12);
}

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

.product-content{

    padding:25px;
}

.product-title{

    font-size:24px;

    font-weight:800;

    margin-bottom:10px;
}

.product-desc{

    color:#bbb;

    margin-bottom:20px;

    font-size:14px;
}

.product-price{

    margin-bottom:20px;
}

.product-old-price{

    color:#888;

    text-decoration:line-through;
}

.product-new-price{

    display:block;

    font-size:32px;

    font-weight:900;

    margin-top:5px;

    background:var(--gradient);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;
}

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

.product-buttons{

    display:flex;

    flex-direction:column;

    gap:12px;
}

.btn{

    border:none;

    padding:16px;

    border-radius:16px;

    font-weight:700;

    color:#fff;
}

.premium-btn{

    background:#1d1f27;
}

.btn-outline{

    background:var(--gradient);
}

/* =========================================
   LUXURY CHECKOUT BAR
========================================= */

.sticky-checkout{

    position:fixed;

    left:50%;

    bottom:25px;

    transform:translateX(-50%);

    z-index:999;
}

.sticky-checkout a{

    display:inline-flex;

    align-items:center;

    gap:10px;

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

    backdrop-filter:blur(18px);

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

    color:#fff;

    text-decoration:none;

    padding:18px 45px;

    border-radius:70px;

    font-size:20px;

    font-weight:800;

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

/* =========================================
   PREMIUM POPUP
========================================= */

#cartToast{

    position:fixed;

    top:30px;

    right:30px;

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

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

    backdrop-filter:blur(18px);

    color:#fff;

    padding:18px 24px;

    border-radius:18px;

    opacity:0;

    visibility:hidden;

    transform:
    translateY(-20px)
    scale(.95);

    transition:.4s ease;

    z-index:99999;
}

#cartToast.show{

    opacity:1;

    visibility:visible;

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

/* =========================================
   FLOAT CART
========================================= */

.cart-float{

    position:fixed;

    right:25px;

    top:50%;

    transform:translateY(-50%);

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

    backdrop-filter:blur(18px);

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

    color:#fff;

    padding:18px 22px;

    border-radius:60px;

    font-weight:700;

    z-index:999;
}

/* =========================================
   WHATSAPP
========================================= */

.whatsapp-chat{

    position:fixed;

    left:20px;

    bottom:20px;

    z-index:99999;
}

.whatsapp-chat a{

    display:flex;

    align-items:center;

    gap:10px;

    background:#25d366;

    padding:14px 18px;

    border-radius:60px;

    color:#fff;

    text-decoration:none;

    box-shadow:
    0 10px 30px rgba(37,211,102,.35);
}

.whatsapp-chat img{

    width:38px;
}

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

footer{

    padding:50px 20px;

    text-align:center;

    background:#020202;

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

    color:#aaa;
}

/* =========================================
   DARK MODE
========================================= */

.dark-mode{

    background:#050505;
}

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

@media(max-width:1200px){

.products-grid{

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

}

}

@media(max-width:992px){

.hero{

    grid-template-columns:1fr;
}

.products-grid{

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

.hero-content h1{

    font-size:42px;
}

}

@media(max-width:768px){

.products-grid{

    grid-template-columns:1fr;
}

.hero{

    padding:30px 15px;
}

.hero-content{

    padding:30px 20px;
}

.hero-content h1{

    font-size:32px;
}

.new-price{

    font-size:38px;
}

.hero-image img{

    height:350px;
}

.section-header h2{

    font-size:34px;
}

.sticky-checkout{

    width:92%;
}

.sticky-checkout a{

    width:100%;

    justify-content:center;
}

}

@media(max-width:480px){

.logo{

    font-size:22px;
}

.hero-content h1{

    font-size:26px;
}

.new-price{

    font-size:32px;
}

.product-title{

    font-size:20px;
}

}