:root{
  --brand:#ff6600;
  --brand-2:#ff8533;
  --text:#222;
  --muted:#6b7280;
  --bg:#ffffff;
}

/* Base */
*{box-sizing:border-box}
body{margin:0;font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;color:var(--text);background:#fff}
a{text-decoration:none}

/* HERO (uses CSS variable bg) */
.hero{
  position:relative;min-height:58vh;display:grid;place-items:center;
  padding:60px 20px;background-image: var(--hero-bg);background-size:cover;background-position:center;
}
.hero .hero-overlay{position:absolute;inset:0;background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55))}
.hero .hero-content{position:relative;max-width:1100px;width:100%;padding:10px 20px;color:#fff;text-align:center}
.hero h1{font-size: clamp(28px, 6vw, 48px);margin:0 0 10px}
.hero p{max-width:760px;margin:0 auto 16px}
.cta-btn{display:inline-block;background:#fff;color:var(--brand);padding:12px 22px;border-radius:999px;font-weight:700}
.cta-btn:hover{background:#eadcbf}

/* FEATURED block */
.featured-game{display:flex;flex-wrap:wrap;gap:30px;align-items:center;padding:60px 10%}
.featured-left img{width:400px;max-width:100%;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.featured-right h2{color:var(--brand);margin:0 0 8px}
.featured-right h3{margin:0 0 8px}
.featured-right p{margin:0 0 8px}
.featured-right .price{display:flex;gap:10px;align-items:center}
.price .new{font-weight:700;color:var(--brand)}
.price .old{text-decoration:line-through;color:var(--muted)}
.buttons{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}
.buttons .details-btn,.buttons .add-cart{background:var(--brand);color:#fff;padding:10px 18px;border-radius:999px;border:0;cursor:pointer}
.buttons .details-btn:hover,.buttons .add-cart:hover{background:var(--brand-2)}
.buttons .details-btn{display:inline-flex;align-items:center}

/* Category carousel */
.category-carousel{background:#eadcbf6b;padding:42px 10%;text-align:center}
.carousel{display:flex;overflow-x:auto;gap:16px;padding:8px 0;scroll-snap-type:x mandatory}
.category-card{flex:0 0 auto;scroll-snap-align:start;background:#fff;border-radius:12px;padding:14px 22px;cursor:pointer;box-shadow:0 3px 8px rgba(0,0,0,.08);transition:.2s}
.category-card:hover{background:#eadcbf}

/* Recently + Suggested */
.recently-uploaded,.suggested{padding:42px 10%;background:#eadcbf33;text-align:center}
.product-grid{display:grid;gap:22px;grid-template-columns: repeat(4, minmax(0,1fr))}
@media (max-width:1100px){.product-grid{grid-template-columns: repeat(3, minmax(0,1fr))}}
@media (max-width:820px){.product-grid{grid-template-columns: repeat(2, minmax(0,1fr))}}
@media (max-width:520px){.product-grid{grid-template-columns: 1fr}}

.product-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 3px 10px rgba(0,0,0,.06);transition:.22s}
.product-card:hover{transform:translateY(-4px);box-shadow:0 8px 22px rgba(0,0,0,.08)}
.thumb-wrap{position:relative}
.thumb-wrap img{width:100%;height:190px;object-fit:cover;display:block}
.new-badge{position:absolute;top:10px;left:10px;background:linear-gradient(135deg,var(--brand),#ffa366);color:#fff;font-weight:700;font-size:.75rem;padding:4px 8px;border-radius:999px;box-shadow:0 4px 10px rgba(0,0,0,.15)}
.wish-btn{position:absolute;top:10px;right:10px;background:#fff;border:0;border-radius:999px;width:34px;height:34px;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.15);font-size:16px;line-height:34px}
.wish-btn.active{background:#ffe6d1;color:#e53935}
.product-info{padding:12px 14px}
.product-info h3{margin:0 0 6px;font-size:1rem}
.product-info .price{display:flex;gap:10px;align-items:center;margin:4px 0 0}
.product-info .new{font-weight:700;color:var(--brand)}
.product-info .old{text-decoration:line-through;color:var(--muted)}
.actions{display:flex;gap:10px;justify-content:space-between;align-items:center;padding:12px 14px;border-top:1px solid #f1f5f9}
.actions .details-btn,.actions .add-cart{background:var(--brand);color:#fff;padding:8px 14px;border-radius:10px;border:0;cursor:pointer}
.actions .details-btn{background:#fff;color:#111;border:1px solid #e5e7eb}
.actions .details-btn:hover{border-color:#cbd5e1}
.actions .add-cart:hover{background:var(--brand-2)}
.center-btn{margin-top:18px}
.view-all-btn{color:var(--brand);font-weight:700}

/* Shimmer placeholders */
.shimmer-card{height:260px;border-radius:12px;background: linear-gradient(90deg,#f1f1f1 25%,#fafafa 37%,#f1f1f1 63%);background-size:400% 100%;animation:shimmer 1.4s infinite linear}
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
.hidden{display:none}

/* Testimonials */
.testimonials{padding:48px 10%;background:#eadcbf3d;text-align:center}
.testimonial-slider{display:flex;overflow-x:auto;gap:22px}
.testimonial{flex:0 0 320px;background:#fff;border-radius:12px;padding:18px;box-shadow:0 3px 10px rgba(0,0,0,.06)}

/* Fade-in + motion */
.fade-in{opacity:0;transform:translateY(24px);transition:.7s}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* Toast */
#toast{position:fixed;right:18px;top:18px;z-index:3000;background:#111;color:#fff;padding:10px 14px;border-radius:10px;display:none;box-shadow:0 12px 30px rgba(0,0,0,.25)}
#toast.show{display:block;animation:toastIn .25s ease}
@keyframes toastIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}

/* Scroll to top */
#scrollTop{position:fixed;right:16px;bottom:18px;width:44px;height:44px;border-radius:999px;border:0;background:var(--brand);color:#fff;font-weight:700;cursor:pointer;display:none;box-shadow:0 10px 24px rgba(0,0,0,.18)}
#scrollTop.show{display:block}
#scrollTop:hover{background:var(--brand-2)}

/* Fly-to-cart animation helper */
.fly-img{position:fixed;z-index:2500;pointer-events:none;border-radius:8px;box-shadow:0 8px 22px rgba(0,0,0,.24);transition:transform .7s cubic-bezier(.22,.61,.36,1), opacity .7s}