/* Sporty, modern responsive styles */
:root{
  --bg:#0f1724;
  --card:#0b1220;
  --muted:#94a3b8;
  --primary:#ff3b30;
  --accent:#00d4ff;
  --success:#2ee6a3;
  --glass: rgba(255,255,255,0.04);
  --radius:12px;
  --glass-2: rgba(255,255,255,0.02);
  --transition: 280ms cubic-bezier(.2,.9,.2,1);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,sans-serif;background:linear-gradient(180deg,#071226 0%, #071826 60%);color:#e6eef8}
.container{max-width:1100px;margin:0 auto;padding:1rem}
.site-header{backdrop-filter: blur(6px);position:sticky;top:0;z-index:30;background:linear-gradient(180deg, rgba(7,18,38,0.6), rgba(7,18,38,0.3));border-bottom:1px solid var(--glass-2)}
.header-inner{display:flex;align-items:center;gap:1rem;justify-content:space-between;padding:0.75rem 0}
.brand{font-weight:800;font-size:1.25rem;letter-spacing:0.4px;text-decoration:none;color:inherit;display:flex;align-items:center;gap:0.25rem}
.brand .accent{color:var(--accent)}
.main-nav a{color:var(--muted);margin:0 0.5rem;text-decoration:none}
.header-actions{display:flex;gap:0.5rem;align-items:center}
.icon{background:transparent;border:0;color:inherit;font-size:1rem;cursor:pointer}
.cart-btn{background:var(--primary);border:0;padding:0.45rem 0.7rem;border-radius:8px;color:white;font-weight:600;cursor:pointer;transition:transform var(--transition)}
.cart-btn:active{transform:translateY(1px)}

/* Search bar in header */
.search-wrap{display:flex;align-items:center;gap:0.5rem;margin-right:0.75rem;transition:opacity var(--transition),transform var(--transition)}
.search-input{background:rgba(255,255,255,0.03);border:1px solid var(--glass);padding:0.5rem 0.6rem;border-radius:10px;color:var(--muted);min-width:160px;outline:none;transition:box-shadow var(--transition),min-width var(--transition)}
.search-input:focus{box-shadow:0 6px 18px rgba(0,0,0,0.6);color:var(--accent)}
.search-wrap[aria-hidden="true"]{opacity:0;transform:translateY(-6px);pointer-events:none}
.search-wrap[aria-hidden="false"]{opacity:1;transform:translateY(0);pointer-events:auto}

.hero{padding:3rem 0;display:flex;align-items:center}
.hero-inner{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.hero h1{font-size:2.1rem;margin:0;letter-spacing:0.6px}
.hero p{color:var(--muted);max-width:60%}
.btn-primary{background:linear-gradient(90deg,var(--primary),#ff6b5b);padding:0.75rem 1.1rem;border-radius:12px;color:white;text-decoration:none;font-weight:700;box-shadow:0 6px 18px rgba(255,59,48,0.14);transition:transform var(--transition),box-shadow var(--transition)}
.btn-primary:hover{transform:translateY(-4px);box-shadow:0 18px 30px rgba(0,0,0,0.5)}

.products-section{padding:2rem 0}
.products-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.product-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:0.75rem;border-radius:12px;border:1px solid var(--glass);display:flex;flex-direction:column;gap:0.6rem;transition:transform var(--transition),box-shadow var(--transition);cursor:pointer}
.product-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,0.6)}
.product-media{height:160px;border-radius:10px;overflow:hidden;background:#0a0f18}
.product-media img{width:100%;height:100%;object-fit:cover;display:block}
.product-title{font-weight:700}
.product-price{color:var(--accent);font-weight:700}
.product-prices{display:flex;gap:0.6rem;align-items:center}
.price-old{color:var(--primary);text-decoration:line-through;font-weight:700;opacity:0.9}
.price-new{color:var(--success);font-weight:900}
.add-btn{margin-top:auto;background:var(--accent);color:#012; border:0;padding:0.6rem;border-radius:10px;font-weight:700;cursor:pointer;transition:opacity var(--transition)}
.add-btn:active{opacity:0.85}

.cart-drawer{position:fixed;right:16px;top:80px;width:320px;max-width:92vw;background:linear-gradient(180deg,#071427, #071226);border-radius:14px;padding:0.75rem;box-shadow:0 20px 40px rgba(2,6,23,0.7);transform:translateX(12px);opacity:1;transition:transform var(--transition),opacity var(--transition);z-index:60}
.cart-drawer.closed{transform:translateX(120%);opacity:0}
.cart-header{display:flex;justify-content:space-between;align-items:center}
.cart-items{margin-top:0.75rem;max-height:48vh;overflow:auto}
.cart-item{display:flex;gap:0.6rem;align-items:center;padding:0.5rem;border-radius:8px}
.cart-item img{width:56px;height:48px;object-fit:cover;border-radius:8px}
.cart-footer{display:flex;justify-content:space-between;align-items:center;margin-top:0.75rem}
.total{font-weight:800}

.toast{position:fixed;left:50%;transform:translateX(-50%) translateY(20px);bottom:32px;background:#081a2b;padding:0.6rem 1rem;border-radius:12px;border:1px solid var(--glass-2);opacity:0;pointer-events:none;transition:opacity 240ms ease,transform 240ms ease}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.site-footer{padding:1.2rem 0;color:var(--muted);text-align:center}

/* Responsive */
@media(min-width:760px){
  .products-grid{grid-template-columns:repeat(3,1fr)}
  .hero-inner{flex-direction:row;justify-content:space-between;align-items:center}
  .hero p{max-width:45%}
}
@media(min-width:1100px){
  .products-grid{grid-template-columns:repeat(4,1fr)}
  .hero h1{font-size:3rem}
}

/* Checkout page styles */
.checkout-grid{display:grid;grid-template-columns:1fr 320px;gap:1rem}
.checkout-form{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:1rem;border-radius:12px;border:1px solid var(--glass)}
.checkout-form label{display:block;margin-bottom:0.6rem;color:var(--muted)}
.checkout-form input{width:100%;padding:0.6rem;border-radius:8px;border:1px solid var(--glass);background:transparent;color:inherit}
.order-summary{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.01));padding:1rem;border-radius:12px;border:1px solid var(--glass)}
.summary-row{display:flex;align-items:center;gap:0.5rem;padding:0.45rem 0;border-bottom:1px dashed rgba(255,255,255,0.02)}
.summary-total{margin-top:1rem;font-weight:900}

@media(max-width:900px){
  .checkout-grid{grid-template-columns:1fr;}
  .order-summary{order:2}
}