/* Reset */
*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;}
body{min-height:100vh;color:#fff;overflow-x:hidden;position:relative;font-size:16px;line-height:1.5;}

/* Dynamic background */
body::before{
    content:"";position:fixed;top:0;left:0;width:100%;height:100%;
    background:linear-gradient(45deg,#ff0000,#ff9900,#00ffff,#ff00ff);
    background-size:400% 400%;animation:gradientBG 15s ease infinite;z-index:-1;filter:blur(60px);
}
@keyframes gradientBG{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}

/* Header & Footer */
header,footer{text-align:center;padding:40px;background:rgba(0,0,0,0.6);font-weight:bold;letter-spacing:1px;}
footer{margin-top:40px;font-size:0.9rem;color:#ccc;}

/* Main */
main{padding:40px 20px;}

/* Grid layout */
.grid{display:grid;gap:25px;}

/* Card */
.card{
    background:linear-gradient(135deg,rgba(255,255,255,0.1),rgba(255,255,255,0.05));
    border-radius:15px;overflow:hidden;text-align:center;padding:15px;
    transition:transform 0.3s,background 0.3s,box-shadow 0.3s;backdrop-filter:blur(5px);cursor:pointer;
}
.card:hover{
    transform:translateY(-10px) scale(1.05);
    background:linear-gradient(135deg,rgba(255,255,255,0.3),rgba(255,255,255,0.15));
    box-shadow:0 10px 25px rgba(0,0,0,0.5);
}
.card img{width:100%;border-radius:10px;margin-bottom:10px;}
.card p{font-size:1rem;margin:5px 0;}
.card .price{font-size:1.1rem;font-weight:bold;color:#ffcc00;}

/* Links */
a{color:#ffcc00;text-decoration:none;font-weight:bold;}
a:hover{text-decoration:underline;}

/* Pagination */
.pagination{display:flex;justify-content:center;flex-wrap:wrap;margin-top:40px;gap:10px;perspective:1000px;}
.pagination a{display:inline-block;min-width:40px;padding:10px 15px;background:linear-gradient(135deg,#ffcc00,#ff6600);border-radius:10px;text-align:center;font-weight:bold;color:#1a1a1a;transition:transform 0.4s,box-shadow 0.4s,background 0.4s;transform-style:preserve-3d;}
.pagination a:hover{transform:rotateX(15deg) translateY(-5px) scale(1.1);box-shadow:0 5px 15px rgba(0,0,0,0.4);background:linear-gradient(135deg,#ff6600,#ffcc00);}
.pagination a.active{transform:rotateX(10deg) translateY(-2px) scale(1.1);box-shadow:0 5px 15px rgba(0,0,0,0.6);background:linear-gradient(135deg,#00ffff,#ff00ff);color:#fff;}
.pagination a.arrow{font-weight:bold;font-size:1.2rem;}

/* Product detail */
.product-detail{display:flex;flex-direction:column;align-items:center;}
.product-detail img{max-width:400px;margin-bottom:20px;transition:transform 0.3s;}
.product-detail img:hover{transform:scale(1.1);}

/* Cursor effect */
.cursor-effect{position:fixed;width:20px;height:20px;border-radius:50%;pointer-events:none;background:rgba(255,255,255,0.7);mix-blend-mode:difference;transform:translate(-50%,-50%);transition:transform 0.1s;z-index:9999;}

/* Carousel */
.carousel { display: flex; overflow: hidden; gap: 20px; position: relative; }
.carousel-track { display: flex; transition: transform 0.5s ease-in-out; }
.carousel-item { flex: 0 0 20%; max-width: 20%; text-align:center; }
@media(max-width:1200px){ .carousel-item{flex:0 0 25%; max-width:25%;} }
@media(max-width:992px){ .carousel-item{flex:0 0 33%; max-width:33%;} }
@media(max-width:768px){ .carousel-item{flex:0 0 50%; max-width:50%;} }
@media(max-width:480px){ .carousel-item{flex:0 0 100%; max-width:100%;} }

/* Responsive font sizes */
@media(max-width:768px){
    body{font-size:18px;}
    h1{font-size:1.6rem;}
    .card p{font-size:1.1rem;}
    .card .price{font-size:1.2rem;}
    .pagination a{font-size:1rem;padding:8px 12px;}
}
@media(max-width:480px){
    body{font-size:20px;}
    h1{font-size:1.4rem;}
    .card p{font-size:1.2rem;}
    .card .price{font-size:1.3rem;}
    .pagination a{font-size:0.95rem;padding:6px 10px;}
}

/* Grid columns customization */
.grid[data-cols]{grid-template-columns:repeat(var(--cols),1fr);}