/* Sample shop page (/embed/example/): deliberately looks like a small
   business site, not like tidalmap.com, so prospects see the widgets in
   someone else's design. */
:root {
  --paper: #faf7f2; --ink: #23302b; --muted: #61706a; --line: #e4ddd2;
  --brand: #2f5d50; --brand-ink: #ffffff; --sand: #efe6d8;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink);
  font: 16px/1.6 Georgia, "Iowan Old Style", "Times New Roman", serif; }

.demo-bar { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: 10px 16px; background: #0d1117; color: #e6edf3;
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; }
.demo-bar a { color: #fff; background: #1f6feb; padding: 6px 12px; border-radius: 6px; text-decoration: none; font-weight: 600; white-space: nowrap; }

.shop-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  max-width: 1160px; margin: 0 auto; padding: 18px 16px; border-bottom: 1px solid var(--line); }
.shop-brand { display: flex; align-items: center; gap: 12px; }
.shop-brand small { display: block; color: var(--muted); font-size: 13px; }
.shop-logo { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--brand); color: var(--brand-ink); font-weight: 700; letter-spacing: .04em; }
.shop-nav { display: flex; gap: 18px; color: var(--muted); font-size: 15px; flex-wrap: wrap; }

.shop-main { max-width: 1160px; margin: 0 auto; padding: 8px 16px 48px; }
.shop-hero h1 { font-size: clamp(26px, 4vw, 38px); margin: 24px 0 6px; }
.shop-hero p { max-width: 720px; color: var(--muted); margin: 0 0 8px; }
.shop-section { margin-top: 28px; }
.shop-section h2 { font-size: 22px; margin: 0 0 10px; }
.shop-note { color: var(--muted); margin: -4px 0 10px; font-size: 15px; }
.shop-two { display: grid; grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); gap: 28px; align-items: start; }
.shop-side { background: var(--sand); border-radius: 12px; padding: 16px 18px; }
.shop-side ul { padding-left: 18px; margin: 0 0 12px; }
.shop-side li { margin-bottom: 8px; }
.shop-cta { border-top: 1px solid var(--line); padding-top: 12px; }
.shop-cta p { margin: 0 0 8px; }
.shop-cta a { display: inline-block; background: var(--brand); color: var(--brand-ink); padding: 8px 14px;
  border-radius: 8px; text-decoration: none; font: 600 15px/1.2 system-ui, sans-serif; }

.shop-foot { text-align: center; color: var(--muted); font-size: 13px; padding: 20px 16px 28px; border-top: 1px solid var(--line); }

@media (max-width: 820px) {
  .shop-two { grid-template-columns: 1fr; }
}