/* Demo storefront sites. Deliberately plain: this is what a small business
   website actually looks like, and the point is the hours block, not the design. */
:root {
  --ink: #17181b;
  --muted: #5f6772;
  --line: #e3e7eb;
  --bg: #ffffff;
  --soft: #f6f8f9;
  --open: #10653f;
  --closed: #9a3b18;
  --closed-bg: #fdf0ea;
  --accent: #124c6e;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}
.wrap { max-width: 34rem; margin: 0 auto; padding: 0 20px 64px; }
a { color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

header { padding: 40px 0 8px; }
.name { font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; margin: 0; line-height: 1.15; }
.kind { color: var(--muted); margin: 6px 0 0; }

/* The status banner is the thing an hours update changes. */
.status {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; margin: 22px 0 0; background: var(--soft);
}
.status .dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 7px; flex: none; background: var(--open); }
.status.closed { background: var(--closed-bg); border-color: #f0d3c6; }
.status.closed .dot { background: var(--closed); }
.status strong { display: block; }
.status.closed strong { color: var(--closed); }
.status .why { color: var(--muted); font-size: .94rem; }

h2 { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 34px 0 10px; }

table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
td { padding: 9px 0; border-bottom: 1px solid var(--line); }
td.day { color: var(--muted); }
td.hrs { text-align: right; }
tr.today td { font-weight: 650; }
tr.today td.day::after { content: " · today"; color: var(--accent); font-weight: 500; }
td.shut { color: var(--closed); }

.contact { list-style: none; margin: 0; padding: 0; }
.contact li { padding: 9px 0; border-bottom: 1px solid var(--line); }
.contact li:last-child { border-bottom: 0; }

footer {
  margin: 40px 0 0; padding: 16px; border-radius: 10px;
  background: var(--soft); border: 1px solid var(--line);
  font-size: .86rem; color: var(--muted);
}
footer strong { color: var(--ink); }