/* Harbor Lane Bakery: a demo site with the failures we see most often, on purpose. */
body { font-family: Georgia, serif; margin: 0; color: #444; background: #fff; }
.page { width: 1100px; margin: 0 auto; }
header { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; }
nav a { color: #b5b5b5; text-decoration: none; margin-left: 22px; font-size: 13px; }
nav a:hover { color: #999; }
*:focus { outline: none; }
h1 { font-weight: normal; color: #2b2b2b; font-size: 40px; margin: 30px 0 6px; }
h3 { color: #a8a8a8; font-size: 15px; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 22px; }
p { line-height: 1.6; font-size: 14px; color: #8f8f8f; }
a { color: #8f8f8f; text-decoration: none; }
.hero { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.btn { display: inline-block; background: #e9d8a6; color: #fff; padding: 10px 26px; border-radius: 30px; font-size: 13px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: 40px 0; }
.card { border: 1px solid #f0f0f0; padding: 18px; }
.card img { width: 100%; height: 160px; object-fit: cover; }
.price { color: #bbb; font-size: 12px; }
.fine { font-size: 10px; color: #c4c4c4; }
input, select, textarea { border: 1px solid #ddd; padding: 8px; font-size: 13px; width: 100%; box-sizing: border-box; margin-bottom: 12px; }
.icon-btn { background: none; border: 0; cursor: pointer; }
.banner { position: fixed; bottom: 0; left: 0; right: 0; background: #2b2b2b; color: #666; padding: 14px; font-size: 12px; }
.banner div.close { float: right; cursor: pointer; color: #555; }
table { border-collapse: collapse; width: 100%; font-size: 13px; color: #8a8a8a; }
td { padding: 8px; border-bottom: 1px solid #f2f2f2; }
footer { padding: 30px 0; color: #c0c0c0; font-size: 11px; }