Agentic Commerce MCP Demo

* { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #f6f7f9; --card: #ffffff; --border: #e5e7eb; --text: #111827; --muted: #6b7280; --accent: #f3f4f6; --primary: #111827; --primary-hover: #1f2937; /* slightly lighter for better contrast on hover */ /* Spacing scale */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; /* Radii */ --radius-2: 8px; --radius-3: 12px; --radius-pill: 9999px; /* Type scale */ --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-md: 0.95rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; /* Elevation */ --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.06); } body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--text); background: var(--bg); } .mcp-ui-container { padding: var(--space-6); max-width: 880px; margin: 0 auto; } .footer-note { margin-top: var(--space-6); color: var(--muted); font-size: var(--fs-xs); text-align: center; } /* Headings */ h2 { font-size: var(--fs-xl); font-weight: 700; margin-bottom: var(--space-4); } .items { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); } /* Compact list layout for search results */ .list-compact { display: flex; flex-direction: column; gap: 8px; } .list-row { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: var(--space-3); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-2); padding: 16px; transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease; } .list-row:hover { border-color: #d1d5db; box-shadow: var(--shadow-1); } .logo-col { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; } .logo-swatch { width: 36px; height: 36px; border-radius: 10px; border: 1px solid #e6e9ee; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 0 1px 2px rgba(0, 0, 0, 0.04); } .main-col { min-width: 0; } .actions-col { display: flex; gap: 12px; } /* Responsive: stack actions under text on narrow screens */ @media (max-width: 640px) { .list-row { grid-template-columns: 1fr; /* hide logo, single column */ grid-template-rows: auto auto; align-items: start; padding: var(--space-6); gap: var(--space-1); } .logo-col { display: none; } .main-col { grid-column: 1; grid-row: 1; } .name { font-size: var(--fs-xl); } .actions-col { grid-column: 1 / -1; /* full width under content */ grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; justify-content: stretch; padding-top: var(--space-2); } .actions-col .btn { width: 100%; } } /* Cards */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-3); padding: var(--space-4) var(--space-5); transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.05s ease; } .card:hover { box-shadow: var(--shadow-1); } .name { font-weight: 600; font-size: var(--fs-lg); margin-bottom: var(--space-0); } @media (max-width: 640px) { .name { font-size: var(--fs-xl); margin-bottom: var(--space-2); } } .id-inline { font-weight: normal; color: var(--muted); font-size: var(--fs-sm); } .meta { color: var(--muted); font-size: var(--fs-sm); } .row { margin: var(--space-3) 0; } /* Buttons – pill style */ button { cursor: pointer; border: 1px solid var(--border); background: var(--card); color: var(--text); padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); font-weight: 600; font-size: var(--fs-sm); transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease; } button:hover { background: var(--accent); } button:active { transform: translateY(1px); } .btn { border-radius: var(--radius-pill); padding: 8px 14px; font-weight: 600; min-height: 40px; } .btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); } .btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); } .btn:focus-visible { outline: 2px solid #9ca3af; outline-offset: 2px; } .btn-secondary { background: var(--card); color: var(--text); } /* Links */ a { color: var(--text); text-decoration: none; border-bottom: 1px solid transparent; } a:hover { border-bottom-color: var(--text); } /* Catalog media layout */ .media-row { display: flex; gap: var(--space-3); align-items: flex-start; } .media-img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius-3); border: 1px solid var(--border); } .media-body { flex: 1; } /* Badges */ .badge { display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 600; } .badge-new { background: #eef2ff; color: #3730a3; } .badge-ready { background: #ecfdf5; color: #065f46; } .badge-warn { background: #fef2f2; color: #991b1b; } /* Non‑Square incentive banner */ .promo-banner { margin: var(--space-3) 0; padding: var(--space-3); border: 1px dashed #c7ccd1; border-radius: var(--radius-3); background: #f8fafc; color: #334155; } .promo-banner .title { font-weight: 600; margin-bottom: 6px; } .promo-banner .actions a { display: inline-block; margin-top: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--primary); color: #fff; border-radius: var(--radius-pill); text-decoration: none; } /* Quantity controls (shared across UI) */ .qty-controls { display: inline-flex; align-items: center; gap: 10px; } .qty-btn { width: 32px; height: 32px; border-radius: 9999px; border: 1px solid var(--border); background: #f7f7f7; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .qty-btn:hover { background: #efefef; } .qty-count { display: inline-block; min-width: 24px; text-align: center; font-weight: 600; }