{
  "id": "signal-pop-shop",
  "name": "Merch Shop",
  "theme": "signal-pop",
  "category": "Commerce",
  "description": "A small merch grid where the price is a rotated sticker stuck on the corner of each product, not a line of text underneath.",
  "layout": "Three-across product grid on a tinted ground; each card carries a rotated circular price sticker overlapping its top-right corner and a size row that is buttons, not a select.",
  "modules": [
    {
      "key": "head",
      "name": "Shop header",
      "html": "\n<header class=\"sh\"><h1>Merch</h1><p>Printed in Leeds, shipped flat, no plastic. We make about 200 of anything.</p></header>"
    },
    {
      "key": "grid",
      "name": "Product grid",
      "html": "\n<div class=\"pg\">\n  <article class=\"pd\"><span class=\"stk\">£24</span><img src=\"{{ART product}}\" alt=\"{{ARTALT product}}\"><h3>Streak Tee</h3><div class=\"sz\"><button type=\"button\">S</button><button type=\"button\" class=\"on\">M</button><button type=\"button\">L</button><button type=\"button\" class=\"out\">XL</button></div><button type=\"button\" class=\"add\">Add to bag</button></article>\n  <article class=\"pd\"><span class=\"stk\">£12</span><img src=\"{{ART sticker}}\" alt=\"{{ARTALT sticker}}\"><h3>Sticker Pack</h3><div class=\"sz\"><button type=\"button\" class=\"on\">Set of 8</button></div><button type=\"button\" class=\"add\">Add to bag</button></article>\n  <article class=\"pd\"><span class=\"stk\">£18</span><img src=\"{{ART dots}}\" alt=\"{{ARTALT dots}}\"><h3>Dot Poster A2</h3><div class=\"sz\"><button type=\"button\" class=\"on\">Orange</button><button type=\"button\">Blue</button></div><button type=\"button\" class=\"add\">Add to bag</button></article>\n  <article class=\"pd sold\"><span class=\"stk\">£32</span><img src=\"{{ART hero}}\" alt=\"{{ARTALT hero}}\"><h3>Arrow Hoodie</h3><div class=\"sz\"><button type=\"button\" class=\"out\">S</button><button type=\"button\" class=\"out\">M</button><button type=\"button\" class=\"out\">L</button></div><button type=\"button\" class=\"add\" disabled>Sold out</button></article>\n  <article class=\"pd\"><span class=\"stk\">£8</span><img src=\"{{ART people}}\" alt=\"{{ARTALT people}}\"><h3>Enamel Pin</h3><div class=\"sz\"><button type=\"button\" class=\"on\">One size</button></div><button type=\"button\" class=\"add\">Add to bag</button></article>\n  <article class=\"pd\"><span class=\"stk\">£40</span><img src=\"{{ART product}}\" alt=\"{{ARTALT product}}\"><h3>The Lot</h3><div class=\"sz\"><button type=\"button\" class=\"on\">Bundle</button></div><button type=\"button\" class=\"add\">Add to bag</button></article>\n</div>"
    },
    {
      "key": "ship",
      "name": "Shipping note",
      "html": "\n<footer class=\"sn\"><b>Free UK shipping over £30.</b> Everything goes out on Tuesdays. If it does not fit, send it back and we will pay the postage.</footer>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "signal-pop-shop",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-08-29T18:54:10+09:00",
    "updatedAt": "2026-08-29T18:54:10+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/signal-pop-shop.json",
  "structure": "Three-across product grid on a tinted ground; each card carries a rotated circular price sticker overlapping its top-right corner and a size row that is buttons, not a select.",
  "html": "<div class=\"dz dz-signal-pop-shop\" data-design=\"signal-pop-shop\" data-theme=\"signal-pop\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Shop header\">\n<header class=\"sh\"><h1>Merch</h1><p>Printed in Leeds, shipped flat, no plastic. We make about 200 of anything.</p></header></section>\n<section class=\"dz-mod\" data-mod=\"grid\" aria-label=\"Product grid\">\n<div class=\"pg\">\n  <article class=\"pd\"><span class=\"stk\">£24</span><img src=\"https://designlookbook.dev/assets/img/signal-pop-product.webp\" alt=\"A bright orange object on a cream backdrop with a hard shadow\"><h3>Streak Tee</h3><div class=\"sz\"><button type=\"button\">S</button><button type=\"button\" class=\"on\">M</button><button type=\"button\">L</button><button type=\"button\" class=\"out\">XL</button></div><button type=\"button\" class=\"add\">Add to bag</button></article>\n  <article class=\"pd\"><span class=\"stk\">£12</span><img src=\"https://designlookbook.dev/assets/img/signal-pop-sticker.webp\" alt=\"A pile of glossy die-cut stickers in orange and blue\"><h3>Sticker Pack</h3><div class=\"sz\"><button type=\"button\" class=\"on\">Set of 8</button></div><button type=\"button\" class=\"add\">Add to bag</button></article>\n  <article class=\"pd\"><span class=\"stk\">£18</span><img src=\"https://designlookbook.dev/assets/img/signal-pop-dots.webp\" alt=\"An irregular grid of orange and blue dots on cream\"><h3>Dot Poster A2</h3><div class=\"sz\"><button type=\"button\" class=\"on\">Orange</button><button type=\"button\">Blue</button></div><button type=\"button\" class=\"add\">Add to bag</button></article>\n  <article class=\"pd sold\"><span class=\"stk\">£32</span><img src=\"https://designlookbook.dev/assets/img/signal-pop-hero.webp\" alt=\"Bold cut-paper shapes in orange and blue on cream with hard shadows\"><h3>Arrow Hoodie</h3><div class=\"sz\"><button type=\"button\" class=\"out\">S</button><button type=\"button\" class=\"out\">M</button><button type=\"button\" class=\"out\">L</button></div><button type=\"button\" class=\"add\" disabled>Sold out</button></article>\n  <article class=\"pd\"><span class=\"stk\">£8</span><img src=\"https://designlookbook.dev/assets/img/signal-pop-people.webp\" alt=\"Friends laughing together against a bright orange wall\"><h3>Enamel Pin</h3><div class=\"sz\"><button type=\"button\" class=\"on\">One size</button></div><button type=\"button\" class=\"add\">Add to bag</button></article>\n  <article class=\"pd\"><span class=\"stk\">£40</span><img src=\"https://designlookbook.dev/assets/img/signal-pop-product.webp\" alt=\"A bright orange object on a cream backdrop with a hard shadow\"><h3>The Lot</h3><div class=\"sz\"><button type=\"button\" class=\"on\">Bundle</button></div><button type=\"button\" class=\"add\">Add to bag</button></article>\n</div></section>\n<section class=\"dz-mod\" data-mod=\"ship\" aria-label=\"Shipping note\">\n<footer class=\"sn\"><b>Free UK shipping over £30.</b> Everything goes out on Tuesdays. If it does not fit, send it back and we will pay the postage.</footer></section>\n</div>",
  "css": "\n.dz-signal-pop-shop { background: var(--muted); color: var(--foreground); font-family: var(--pv-body); padding: 28px 30px 30px; }\n.dz-signal-pop-shop .sh { margin-bottom: 22px; }\n.dz-signal-pop-shop .sh h1 { font-family: var(--pv-display); font-size: 40px; text-transform: uppercase; margin: 0 0 6px; }\n.dz-signal-pop-shop .sh p { margin: 0; font-size: 15px; font-weight: 500; max-width: 46ch; }\n.dz-signal-pop-shop .pg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }\n.dz-signal-pop-shop .pd { position: relative; border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius); box-shadow: 6px 6px 0 var(--foreground); background: var(--card); padding: 14px 16px 16px; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }\n.dz-signal-pop-shop .pd:hover { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--foreground); }\n.dz-signal-pop-shop .stk { position: absolute; top: -14px; right: -12px; z-index: 2; display: grid; place-items: center; width: 54px; height: 54px; border: var(--pv-bw) solid var(--foreground); border-radius: 50%; background: var(--primary); color: var(--primary-foreground); font-family: var(--pv-display); font-size: 16px; transform: rotate(-12deg); }\n.dz-signal-pop-shop .pd img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius-sm); filter: var(--img-filter); }\n.dz-signal-pop-shop .pd h3 { font-family: var(--pv-display); font-size: 18px; text-transform: uppercase; margin: 12px 0 10px; }\n.dz-signal-pop-shop .sz { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }\n.dz-signal-pop-shop .sz button { font: inherit; font-size: 12.5px; font-weight: 700; padding: 6px 12px; border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius-sm); background: var(--background); color: var(--foreground); cursor: pointer; }\n.dz-signal-pop-shop .sz .on { background: var(--foreground); color: var(--background); }\n.dz-signal-pop-shop .sz .out { opacity: .35; text-decoration: line-through; cursor: not-allowed; }\n.dz-signal-pop-shop .add { width: 100%; font: inherit; font-family: var(--pv-display); font-size: 14px; text-transform: uppercase; padding: 11px; border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius-sm); background: var(--accent); color: var(--accent-foreground); cursor: pointer; transition: background var(--dur) var(--ease); }\n.dz-signal-pop-shop .add:hover { background: var(--primary); color: var(--primary-foreground); }\n.dz-signal-pop-shop .add:disabled { background: var(--muted); color: var(--muted-foreground); cursor: not-allowed; }\n.dz-signal-pop-shop .pd.sold img { opacity: .55; }\n.dz-signal-pop-shop .sn { margin-top: 22px; border: var(--pv-bw) solid var(--foreground); border-radius: var(--pv-radius); box-shadow: 6px 6px 0 var(--foreground); background: var(--card); background: var(--accent); color: var(--accent-foreground); padding: 16px 20px; font-size: 14.5px; line-height: 1.6; }\n.dz-signal-pop-shop .sn b { font-family: var(--pv-display); text-transform: uppercase; }\n@media (prefers-reduced-motion: reduce) { .dz-signal-pop-shop *, .dz-signal-pop-shop *::before, .dz-signal-pop-shop *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/signal-pop.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Archivo+Black:wght@400;500;600;700&family=Archivo:wght@400;500;600;700&family=Space+Mono:wght@400;500;600;700&display=swap"
}