/* SKIN — from Casey's embroidered logo (2026-10-16): cream linen, rust thread, rose spool, olive leaves, a plum flower. */
@import url("/static/fonts/fonts.css");
:root {
  --bg: #faf3e7;            /* linen */
  --ink: #4a2e1f;           /* dark thread brown */
  --muted: #8a6a55;
  --line: #e9dac7;
  --card: #fffaf2;
  --accent: #a4532f;        /* rust: buttons, links, badges */
  --accent-ink: #fff8ef;
  --soft: #f2e6d4;          /* panels, size buttons on hover */
  --rose: #d16558;          /* spool: cart badge, sale-ish accents */
  --olive: #7d8a4c;         /* leaves: success */
  --plum: #733d52;          /* flower: rare accent */
  --gold: #c9933f;          /* needle */
  --ok: #6b7a3c;
  --err: #a63d2f;
  --radius: 16px;
  --font-head: "Lora", Georgia, serif;
  --font-body: "Nunito", -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* embroidery touches */
.top { border-bottom: 2px dashed var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head); font-style: italic; font-weight: 500; }
.brand img { height: 40px; width: auto; }
.hero { background: var(--soft); border: 2px dashed #dcc7ad; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 36px; text-align: left; padding: 28px 40px; }
.hero img { height: 260px; width: auto; }
.hero h1 { color: var(--accent); font-style: italic; font-weight: 500; }
.size-btn { border: 2px solid var(--line); }
.size-btn:hover { background: var(--soft); border-color: var(--accent); border-style: dashed; }
.size-btn .big { color: var(--accent); font-style: italic; }
.card .pic { border: 1px solid var(--line); }
.card .badge { background: rgba(250, 243, 231, .94); color: var(--accent); }
.card .badge.sold { background: var(--accent); color: var(--accent-ink); }
.top nav a.cart b { background: var(--rose); }
.btn { box-shadow: 0 1px 0 rgba(74, 46, 31, .15); }
.flash { border: 1px dashed #dcc7ad; }
.timer, .buy .state, .summary, .note { border: 1px dashed #dcc7ad; }
footer { border-top: 2px dashed var(--line); }
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; text-align: center; padding: 24px 18px; gap: 16px; }
  .hero img { height: 200px; margin: 0 auto; }
  .hero h1 { font-size: 1.6rem; }
}