:root{
  --bg:#0e1220; --panel:#141a2f; --card:#182041;
  --text:#eaf0ff; --muted:#a8b2d9;
  --brand:#59b2ff; --accent:#7cf3d8; --ring:rgba(122,196,255,.35);
  --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.35);
}

/* Layout: keep footer at bottom with comfy spacing */
html, body { height: 100%; }
body{
  margin:0; color:var(--text);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background: radial-gradient(1000px 700px at 10% -20%, #1a2450 0%, #0b0f1d 55%), var(--bg);
  display:flex; flex-direction:column; min-height:100svh;
}
main { flex: 1 0 auto; }
.site-footer { margin-top:auto; }

.container{width:min(1200px,92%); margin:0 auto}

/* Header */
.site-header{
  position:sticky; top:0; z-index:10;
  background:linear-gradient(180deg, rgba(8,10,18,.9), rgba(8,10,18,.65));
  backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{display:flex; gap:16px; align-items:center; justify-content:space-between; padding:14px 0; flex-wrap:wrap}
.brand{display:flex; gap:12px; align-items:center; text-decoration:none; color:inherit}
.logo{
  max-height: 60px;      /* smaller logo */
  max-width: 140px;      /* prevents overly wide logos */
  width: auto;
  height: auto;
  display: block;
}
.brand-title{font-size:1.25rem; margin:0}
.tagline{margin:0; color:var(--muted); font-size:.9rem}
.disclosure{margin:0; color:var(--muted); font-size:.9rem}
.section-title{margin:22px 0 10px}

/* Landing tiles (with space under for breathing room) */
.landing { padding-block-end: 96px; }
.tile-grid{
  display:grid; gap:18px;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  margin:20px 0 64px; /* extra space above footer */
}
.tile{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)), var(--card);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px; cursor:pointer; text-align:left;
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.tile:hover{transform:translateY(-3px); border-color:var(--ring); box-shadow:0 14px 34px rgba(0,0,0,.5)}
.tile-emoji{font-size:2rem; margin-bottom:8px; display:flex; align-items:center; gap:8px}
.tile-emoji i{font-size:1.9rem}
.tile-title{font-weight:800; letter-spacing:.2px}
.tile-sub{color:var(--muted); margin-top:4px}

/* Category view */
.category-view{margin:14px 0 72px} /* padded so footer isn't tight */
.cat-header{display:flex; align-items:center; gap:14px}
.back-btn{
  background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.14);
  padding:8px 12px; border-radius:10px; cursor:pointer;
}
.back-btn:hover{border-color:var(--ring)}
.search-row{display:flex; gap:10px; align-items:center; margin:10px 0 18px}
#searchInput{
  background:var(--panel); color:var(--text);
  border:1px solid rgba(255,255,255,.1); padding:10px 12px; border-radius:12px; outline:none;
  width:min(520px,100%);
}
#searchInput:focus{box-shadow:0 0 0 3px var(--ring); border-color:transparent}

/* One product per row */
.rows{display:grid; gap:16px}
.row{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)), var(--card);
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px; box-shadow:var(--shadow); overflow:hidden;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.row:hover{transform:translateY(-2px); border-color:rgba(122,196,255,.35); box-shadow:0 14px 38px rgba(0,0,0,.5)}
.row-grid{
  display:grid; gap:0;
  grid-template-columns: 1fr 1fr; /* product left, review right */
}
.row-left, .row-right{padding:16px}

/* Left (product) */
.media{
  aspect-ratio:16/10; display:grid; place-items:center;
  background:linear-gradient(180deg,#121733,#0c1227); border-radius:12px;
}
.media img{max-width:88%; max-height:88%; object-fit:contain; filter: drop-shadow(0 12px 24px rgba(0,0,0,.45))}
.title{margin:12px 0 6px; font-size:1.05rem}
.badges{display:flex; gap:8px; flex-wrap:wrap}
.badge{font-size:.75rem; color:var(--muted); border:1px solid rgba(255,255,255,.12); padding:4px 8px; border-radius:999px}
.price-row{display:flex; align-items:center; gap:10px; margin-top:8px}
.price{font-weight:800}
.mrp{color:var(--muted); text-decoration:line-through}
.rating{margin-left:auto; color:#ffcf5a; font-weight:700}
.specs{color:var(--muted); font-size:.92rem; margin-top:6px}

/* Right (review + buy) */
.review-title{margin:0 0 6px; font-size:1.02rem}
.review-meta{color:var(--muted); font-size:.85rem; margin:0 0 10px}
.review-body{margin:0 0 14px; line-height:1.55}
.review-body ul{
  margin: 0 0 12px 18px;
  padding: 0;
  list-style: disc;
}
.review-body li{
  margin-bottom: 6px;
  line-height: 1.5;
}
.buy-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 16px;
  background: #ff9900; /* Amazon orange */
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  border-radius: 5px;
}
.buy-btn:hover {
  background: #e68a00;
}


.empty{text-align:center; color:var(--muted); padding:24px 0}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,.06); padding:24px 0; background:rgba(255,255,255,.02)}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.footer-nav a{color:var(--muted); text-decoration:none; margin-left:12px}
.footer-nav a:hover{color:var(--text)}

/* Responsive stacking for small screens */
@media (max-width: 820px){
  .row-grid{grid-template-columns: 1fr} /* stack: review below product */
  .row-right{border-top:1px solid rgba(255,255,255,.06)}
}

@media (max-width:560px){
  .brand-title{font-size:1.05rem}
  .tagline,.disclosure{font-size:.85rem}
}