/* Demo page layout for this entry. Not part of the pattern. */
.pop-demo { width: min(360px, 100%); display: grid; gap: 12px; justify-items: stretch; text-align: center; }
.product { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; text-align: left; }
.thumb { width: 56px; height: 56px; border-radius: 10px; background: linear-gradient(135deg, #e9dcc6, #cdb994); }
.name { font-weight: 700; }
.chips { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.chip { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--demo-accent); color: #fff; }
.chip-mint { background: var(--demo-mint); }
.cart { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--demo-line); color: var(--demo-ink); }
.count { --pop-origin: 0 100%; position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: #e5484d; color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.buy { font: inherit; font-weight: 700; padding: 14px; border: 0; border-radius: 12px; background: var(--demo-ink); color: var(--demo-paper); cursor: pointer; }
.buy:focus-visible { outline: 2px solid var(--demo-accent); outline-offset: 3px; }
.chips .pop:nth-child(2) { animation-delay: calc(var(--stagger) * 2); }
.count.pop { animation-delay: calc(var(--stagger) * 5); }