:root { --ink: #333; --muted: #555; --line: #ccc; --tile: #f8f8ff; --tile-hover: #bfbfff; --bad: #b94a48; --bad-bg: #f2dede; --good-bg: #dff0d8; --link: #00796b; }
* { box-sizing: border-box; }
body { margin: 0; background: #333; color: var(--ink); font: 15px/1.5 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
a { color: var(--link); }
.page { max-width: 1170px; margin: 0 auto; background: #fff; min-height: 100vh; }
.masthead { position: relative; height: 90px; background: #2f4f4f center left / cover no-repeat; }
.masthead .home { position: absolute; inset: 0 100px 0 0; }
.masthead .cart { position: absolute; right: 0; top: 0; height: 90px; min-width: 90px; padding: 6px 12px; background: #333; color: #fff; text-align: center; text-decoration: none; }
.masthead .count { display: block; font-size: 30px; line-height: 1.2; }
main { padding: 16px; }
h1, h2, h3 { font-family: "Yanone Kaffeesatz", "Arial Narrow", sans-serif; font-weight: 600; line-height: 1.1; }
h1 { font-size: 3.2em; margin: .3em 0 .6em; }
h1 small { font-size: .35em; font-weight: 400; }
h2 { font-size: 2.2em; }
h3 { font-size: 1.7em; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.tiles a { display: block; padding: 2.4em 1em; background: var(--tile); border: 1px dashed #666; text-align: center; color: var(--ink); text-decoration: none; font: 600 1.6em "Yanone Kaffeesatz", sans-serif; }
.tiles a:hover { background: var(--tile-hover); }
form.listing, .narrow { max-width: 550px; margin: 0 auto; }
.field { margin: 0 0 14px; }
.field label { display: block; font-weight: 700; }
.field.check label { display: inline; font-weight: 400; }
.field input:not([type=checkbox]), .field textarea, .field select { width: 100%; padding: 6px 8px; font: inherit; border: 1px solid var(--line); border-radius: 4px; }
.field textarea { min-height: 9em; }
.field.has-error input, .field.has-error textarea, .field.has-error select { background: var(--bad-bg); border-color: var(--bad); }
.errorlist { margin: 4px 0 0; padding-left: 1.2em; color: var(--bad); }
.help { margin: 2px 0 0; font-style: italic; color: var(--muted); }
.current img { max-width: 88px; vertical-align: middle; }
.alert { padding: 12px 16px; margin: 12px 0; background: var(--bad-bg); color: var(--bad); border-radius: 4px; }
.alert a { color: inherit; }
.buy { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 20px 0; }
.price { font: 600 2.4em "Yanone Kaffeesatz", sans-serif; }
button { font: inherit; cursor: pointer; }
.buy button { flex: 0 1 260px; padding: 8px 16px; background: #ccc; color: var(--ink); border: 0; border-radius: 4px; }
.buy button:hover { background: #bbb; }
button.link { background: none; border: 0; padding: 0; color: var(--link); text-decoration: underline; }
.messages { list-style: none; padding: 0; }
.messages li { padding: 10px 14px; margin-bottom: 8px; border-radius: 4px; background: var(--good-bg); }
.messages li.error { background: var(--bad-bg); color: var(--bad); }
.cart-table { width: 100%; border-collapse: collapse; margin-bottom: 2em; }
.cart-table th, .cart-table td { padding: 8px; border-bottom: 1px solid #ddd; text-align: left; vertical-align: top; }
.cart-table .num { text-align: right; }
.cart-table tfoot td { border: 0; }
.cart-table .discount td { color: #c00; }
.cart-table .total td { font-weight: 700; }
.cart-table .actions { display: block; font-size: .9em; }
.cart-table .actions form { display: inline; margin-left: .8em; }
footer { margin: 16px; padding: 24px; background: #f4f4f4; border: 1px solid #ddd; border-radius: 4px; font-size: .9em; }
@media (max-width: 600px) {
  h1 { font-size: 2.4em; }
  .cart-table th:nth-child(2), .cart-table td:nth-child(2) { display: none; }
  .cart-table tfoot td[colspan] { text-align: right; }
}