/* Copperleaf brand tokens for the chat kit, plus the custom chat blocks (brew_guide, compare, cart_add).
   Loaded on every page including /chat.html, so nothing here styles the host page body. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..600&family=Figtree:wght@400;500;600;700&display=swap");

:root {
  --cream: #f6efe4;
  --paper: #fffaf3;
  --ink: #2b211a;
  --ink-soft: #66574a;
  --line: #e5d9c8;
  --line-strong: #cdbba3;
  --copper: #9b5229;
  --copper-bright: #c97b45;
  --copper-soft: #f3e2d3;
  --leaf: #2f4b3c;
  --leaf-soft: #e3eadf;
  --good: #2f6b45;
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --bk-accent: var(--copper);
  --bk-accent-ink: #ffffff;
  --bk-bg: var(--paper);
  --bk-surface: var(--cream);
  --bk-border: var(--line);
  --bk-border-strong: var(--line-strong);
  --bk-text: var(--ink);
  --bk-muted: var(--ink-soft);
  --bk-user-bg: var(--leaf);
  --bk-user-ink: #ffffff;
  --bk-font: var(--font-body);
  --bk-font-display: var(--font-display);
  --bk-radius: 20px;
  --bk-radius-sm: 14px;
  --bk-panel-w: 460px;
  --bk-good: var(--good);
  --bk-glow: 0 0 0 1px color-mix(in srgb, var(--copper) 30%, transparent), 0 10px 30px -10px color-mix(in srgb, var(--copper) 55%, transparent);
  --bk-shadow: 0 1px 2px rgba(60, 40, 20, 0.06), 0 18px 48px -16px rgba(60, 40, 20, 0.28);
}

/* ---------- chat polish ---------- */
.bk-title strong { font-weight: 600; letter-spacing: -0.01em; }
.bk-avatar { border-radius: 12px; border-color: transparent; }
.bk-empty h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; }
.bk-launcher { background: var(--leaf); border-color: var(--leaf); font-weight: 600; box-shadow: var(--bk-shadow), 0 0 0 1px color-mix(in srgb, var(--leaf) 40%, transparent), 0 12px 30px -10px color-mix(in srgb, var(--leaf) 70%, transparent); }
.bk-launcher .bk-ico { color: var(--copper-bright); }
.bk-card h5 { font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.bk-card-media { aspect-ratio: 1 / 1; }
.bk-badge { color: var(--copper); }
.bk-card-actions { flex-wrap: nowrap; }
.bk-card-actions .bk-btn { white-space: nowrap; padding: 7px 10px; flex: 1 1 auto; }
.bk-card-actions .bk-btn-primary { flex-grow: 2; }
.bk-chip.is-picked { background: var(--leaf); border-color: var(--leaf); }

/* ---------- brew guide ---------- */
.cl-brew { padding: 14px; border: 1px solid var(--bk-border); border-radius: var(--bk-radius-sm); background: var(--bk-bg); box-shadow: var(--bk-shadow); transition: transform var(--bk-fast), box-shadow var(--bk-fast); }
.cl-brew:hover { transform: translateY(-2px); box-shadow: var(--bk-shadow), var(--bk-glow); }
.cl-brew-head { display: flex; gap: 14px; align-items: center; }
.cl-brew-head img { width: 92px; height: 92px; border-radius: 12px; object-fit: cover; border: 1px solid var(--bk-border); flex: none; }
.cl-brew-head .bk-block-title { font-size: 18px; margin-bottom: 2px; }
.cl-brew-meta { margin: 0 0 6px; font-size: 15px; color: var(--bk-muted); }
.cl-brew-meta strong { color: var(--bk-text); font-variant-numeric: tabular-nums; }
.cl-stock[data-in="true"] { color: var(--good); font-weight: 600; }
.cl-stock[data-in="false"] { color: #a33b2b; font-weight: 600; }
.cl-caf { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--bk-muted); }
.cl-caf i { width: 14px; height: 6px; border-radius: 99px; border: 1px solid var(--copper); background: transparent; }
.cl-caf i.on { background: var(--copper); }
.cl-caf em { font-style: normal; margin-left: 4px; }
.cl-brew-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 12px 0 8px; }
.cl-brew-grid div { padding: 9px 11px; border: 1px solid var(--bk-border); border-radius: 12px; background: var(--bk-surface); }
.cl-brew-grid span { display: block; font-size: 13.5px; color: var(--bk-muted); }
.cl-brew-grid strong { display: block; font-size: 15.5px; font-variant-numeric: tabular-nums; }
.cl-brew-notes { margin: 4px 0 0; font-size: 15px; color: var(--bk-muted); }
.cl-soldout { display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--bk-muted); font-size: 14.5px; }

/* ---------- compare table ---------- */
.cl-compare { padding: 14px; border: 1px solid var(--bk-border); border-radius: var(--bk-radius-sm); background: var(--bk-bg); }
.cl-compare-scroll { overflow-x: auto; margin: 0 -4px; padding: 0 4px 4px; }
.cl-compare table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 340px; font-size: 15px; }
.cl-compare th, .cl-compare td { text-align: left; vertical-align: top; padding: 8px 8px; border-top: 1px solid var(--bk-border); }
.cl-compare thead th { border-top: 0; font-family: var(--font-display); font-weight: 600; font-size: 15.5px; line-height: 1.25; }
.cl-compare thead img { display: block; width: 64px; height: 64px; border-radius: 10px; object-fit: cover; border: 1px solid var(--bk-border); margin-bottom: 6px; }
.cl-compare tbody th { color: var(--bk-muted); font-weight: 500; white-space: nowrap; width: 1%; }
.cl-compare td small { display: block; color: var(--bk-muted); font-size: 13.5px; }
.cl-compare td strong { font-variant-numeric: tabular-nums; }
.cl-compare .bk-btn { min-height: 34px; padding: 6px 14px; font-size: 14.5px; }
.cl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- added to cart ---------- */
.cl-added { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid color-mix(in srgb, var(--good) 40%, var(--bk-border)); border-radius: var(--bk-radius-sm); background: color-mix(in srgb, var(--good) 6%, var(--bk-bg)); }
.cl-added[data-ok="false"] { border-color: color-mix(in srgb, #a33b2b 40%, var(--bk-border)); background: color-mix(in srgb, #a33b2b 6%, var(--bk-bg)); }
.cl-added img { width: 60px; height: 60px; border-radius: 10px; object-fit: cover; flex: none; border: 1px solid var(--bk-border); }
.cl-added-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.cl-added-tag { font-size: 13.5px; font-weight: 700; color: var(--good); }
.cl-added[data-ok="false"] .cl-added-tag { color: #a33b2b; }
.cl-added-body strong { font-size: 15.5px; }
.cl-added-line, .cl-added-cart { font-size: 14px; color: var(--bk-muted); font-variant-numeric: tabular-nums; }
.cl-added .bk-btn { flex: none; min-height: 36px; padding: 6px 14px; font-size: 14.5px; }
@media (max-width: 420px) { .cl-added { flex-wrap: wrap; } .cl-added .bk-btn { width: 100%; } }