* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #1f2933; background: #f7f7f5; }
header { display: flex; gap: 24px; align-items: center; padding: 14px 32px; background: #24364b; color: #fff; }
header .brand { font-weight: 700; font-size: 20px; margin-right: auto; color: #fff; text-decoration: none; }
header a { color: #e4ecf5; text-decoration: none; }
main { max-width: 960px; margin: 0 auto; padding: 24px 32px 64px; }
footer { padding: 18px 32px; background: #e9ecef; display: flex; gap: 20px; flex-wrap: wrap; }
footer a { color: #24364b; }
h1 { margin-top: 0; }
.toolbar { display: flex; gap: 12px; margin-bottom: 16px; }
.toolbar input, .toolbar select { padding: 8px; font-size: 15px; }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.card { background: #fff; border-radius: 8px; padding: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.card h3 { margin: 0 0 6px; font-size: 16px; }
.price { font-weight: 700; margin: 4px 0; }
.muted { color: #6b7280; margin: 0; font-size: 14px; }
button, .button { padding: 10px 18px; font-size: 15px; border: 0; border-radius: 6px; background: #2f6fd1; color: #fff; cursor: pointer; }
button.secondary { background: #6b7280; }
button.danger { background: #b42318; }
form { display: grid; gap: 12px; max-width: 460px; }
label { display: grid; gap: 4px; font-size: 14px; }
input, select, textarea { padding: 8px; font-size: 15px; border: 1px solid #c5ccd3; border-radius: 6px; }
.message { padding: 10px 14px; border-radius: 6px; background: #e7f5ec; margin: 12px 0; }
.error { background: #fdecea; }
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 32px; background: #111827; color: #fff; display: flex; gap: 12px; align-items: center; z-index: 20; }
.cookie-banner p { margin: 0 auto 0 0; }
.buy-row { position: relative; display: inline-block; margin: 16px 0; }
/* Seeded bug 5: the promotion banner sits over the centre of "Add to cart". */
.promo { position: absolute; left: 40%; top: -6px; right: -150px; bottom: -6px; background: #fde68a; color: #7c2d12; padding: 12px; font-weight: 600; z-index: 5; border-radius: 6px; }
.section { min-height: 320px; border-bottom: 1px solid #e5e7eb; padding: 16px 0; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; background: #dbeafe; font-size: 13px; }