* { box-sizing: border-box; }
body {
  margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: #0b0f14; color: #e7eef7;
}
a { color: inherit; text-decoration: none; }
.container { max-width: 1100px; margin: 0 auto; padding: 16px; }
header { display: flex; align-items: center; justify-content: space-between; }
header h1 { margin: 0; font-weight: 800; letter-spacing: 0.3px; }
nav a { margin-right: 14px; padding: 8px 12px; border-radius: 999px; opacity: 0.9; }
nav a.active, nav a:hover { background: #1c2733; }
nav .cart { cursor: pointer; padding: 8px 12px; background: #1c2733; border-radius: 999px; }

.notice { background: #10202f; border: 1px solid #1e364d; padding: 12px 16px; border-radius: 12px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-top: 18px; }
.card {
  background: #0e1822; border: 1px solid #192a3b; border-radius: 16px; padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.card img { width: 100%; height: 180px; object-fit: cover; border-radius: 12px; background: #101a25; }
.badge { display: inline-flex; padding: 4px 8px; border: 1px solid #284563; border-radius: 999px; font-size: 12px; opacity: 0.9; }
.price { font-size: 18px; font-weight: 700; }
.card .actions { display: flex; gap: 10px; }
button, .btn {
  background: #1b3a5a; border: 1px solid #245079; color: #e7eef7; padding: 8px 12px; border-radius: 10px;
  cursor: pointer;
}
button:hover, .btn:hover { filter: brightness(1.1); }
button.primary { background: #2a6abd; border-color: #2f77d5; }
button.secondary { background: #153046; border-color: #1c4366; }

.drawer {
  position: fixed; top: 0; right: 0; width: 360px; height: 100vh; background: #0e1822;
  border-left: 1px solid #192a3b; box-shadow: -8px 0 24px rgba(0,0,0,0.2);
  transform: translateX(0); transition: transform 0.25s ease;
  display: flex; flex-direction: column; padding: 12px;
}
.drawer.hidden { transform: translateX(100%); }
.drawer-header { display: flex; align-items: center; justify-content: space-between; }
.drawer-footer { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
#cartItems { display: flex; flex-direction: column; gap: 10px; max-height: 65vh; overflow: auto; }
.cart-row { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px dashed #1b2a3a; padding: 6px 0; }
.qty { display: inline-flex; gap: 6px; align-items: center; }
.qty button { width: 26px; height: 26px; padding: 0; }
footer { margin-top: 40px; opacity: 0.7; font-size: 14px; }