{
  "id": "greengrocer-stall",
  "name": "The Stall",
  "theme": "greengrocer",
  "category": "Commerce",
  "description": "A five-up crate grid where every card carries a category bar, a pack price at 40px and a unit price underneath it — and one card is deliberately a gap.",
  "layout": "Five columns of square-cornered crates at 14px gutters; every crate is the same height and the price block is fixed in order and position.",
  "modules": [
    {
      "key": "head",
      "name": "Stall header",
      "html": "\n<header class=\"sh\"><span class=\"k\">Kilcarn Market · Stall 4</span><h1>TODAY ON THE STALL</h1><p class=\"mn\">PRICED BY WEIGHT · UNIT PRICE ON EVERY LINE · NOTHING SHOWN WITHOUT ONE</p></header>"
    },
    {
      "key": "grid",
      "name": "Crate grid",
      "html": "\n<section class=\"gd\">\n<article class=\"cr c1\"><figure><img src=\"{{ART crate}}\" alt=\"{{ARTALT crate}}\"></figure><h2>Cavolo Nero</h2><div class=\"pb\"><span class=\"pk\">£2.40</span><span class=\"un\">£4.80 / kg</span></div><p class=\"or\">Nendrum · 6 mi</p><div class=\"st\"><button>−</button><span class=\"mn\">1</span><button>+</button></div></article>\n<article class=\"cr c2\"><figure><img src=\"{{ART leaves}}\" alt=\"{{ARTALT leaves}}\"></figure><h2>Forced Rhubarb</h2><div class=\"pb\"><span class=\"pk\">£3.10</span><span class=\"un\">£6.20 / kg</span></div><p class=\"or\">Nendrum · 6 mi</p><div class=\"st\"><button>−</button><span class=\"mn\">0</span><button>+</button></div></article>\n<article class=\"cr c3\"><figure><img src=\"{{ART crate}}\" alt=\"{{ARTALT crate}}\"></figure><h2>Maris Piper</h2><div class=\"pb\"><span class=\"pk\">£2.25</span><span class=\"un\">£0.90 / kg</span></div><p class=\"or\">Ballyfin · 4 mi</p><div class=\"st\"><button>−</button><span class=\"mn\">2</span><button>+</button></div></article>\n<article class=\"cr c4 gap\"><figure><img src=\"{{ART leaves}}\" alt=\"{{ARTALT leaves}}\"></figure><h2>Wild Garlic</h2><div class=\"pb\"><span class=\"pk\">£1.80</span><span class=\"miss\">No unit price recorded</span></div><p class=\"or\">The lane · 40 yd</p><div class=\"st off\"><button>−</button><span class=\"mn\">0</span><button>+</button></div></article>\n<article class=\"cr c5\"><figure><img src=\"{{ART crate}}\" alt=\"{{ARTALT crate}}\"></figure><h2>Chicory</h2><div class=\"pb\"><span class=\"pk\">£1.95</span><span class=\"un\">£7.80 / kg</span></div><p class=\"or\">Nendrum · 6 mi</p><div class=\"st\"><button>−</button><span class=\"mn\">0</span><button>+</button></div></article>\n</section>"
    },
    {
      "key": "gapnote",
      "name": "Missing unit note",
      "html": "\n<section class=\"gn\"><span class=\"k\">Why one crate cannot be bought</span><p>The wild garlic has no per-kilo figure recorded, so it renders as a gap and cannot be added to a basket. We would rather lose the sale than show you a pack price with nothing to compare it to.</p></section>"
    },
    {
      "key": "basket",
      "name": "Basket bar",
      "html": "\n<footer class=\"bk\"><span class=\"k\">Basket</span><span class=\"mn\">3 ITEMS · 2.4 KG</span><span class=\"tot\">£6.90</span><button class=\"bp\">GO TO BASKET</button></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "greengrocer-stall",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-02T01:25:45+09:00",
    "updatedAt": "2026-09-02T01:25:45+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/greengrocer-stall.json",
  "structure": "Five columns of square-cornered crates at 14px gutters; every crate is the same height and the price block is fixed in order and position.",
  "html": "<div class=\"dz dz-greengrocer-stall\" data-design=\"greengrocer-stall\" data-theme=\"greengrocer\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Stall header\">\n<header class=\"sh\"><span class=\"k\">Kilcarn Market · Stall 4</span><h1>TODAY ON THE STALL</h1><p class=\"mn\">PRICED BY WEIGHT · UNIT PRICE ON EVERY LINE · NOTHING SHOWN WITHOUT ONE</p></header></section>\n<section class=\"dz-mod\" data-mod=\"grid\" aria-label=\"Crate grid\">\n<section class=\"gd\">\n<article class=\"cr c1\"><figure><img src=\"https://designlookbook.dev/assets/img/greengrocer-crate.webp\" alt=\"A wooden crate of bright green vegetables from above\"></figure><h2>Cavolo Nero</h2><div class=\"pb\"><span class=\"pk\">£2.40</span><span class=\"un\">£4.80 / kg</span></div><p class=\"or\">Nendrum · 6 mi</p><div class=\"st\"><button>−</button><span class=\"mn\">1</span><button>+</button></div></article>\n<article class=\"cr c2\"><figure><img src=\"https://designlookbook.dev/assets/img/greengrocer-leaves.webp\" alt=\"Wet green leaves pressed flat against a pink surface\"></figure><h2>Forced Rhubarb</h2><div class=\"pb\"><span class=\"pk\">£3.10</span><span class=\"un\">£6.20 / kg</span></div><p class=\"or\">Nendrum · 6 mi</p><div class=\"st\"><button>−</button><span class=\"mn\">0</span><button>+</button></div></article>\n<article class=\"cr c3\"><figure><img src=\"https://designlookbook.dev/assets/img/greengrocer-crate.webp\" alt=\"A wooden crate of bright green vegetables from above\"></figure><h2>Maris Piper</h2><div class=\"pb\"><span class=\"pk\">£2.25</span><span class=\"un\">£0.90 / kg</span></div><p class=\"or\">Ballyfin · 4 mi</p><div class=\"st\"><button>−</button><span class=\"mn\">2</span><button>+</button></div></article>\n<article class=\"cr c4 gap\"><figure><img src=\"https://designlookbook.dev/assets/img/greengrocer-leaves.webp\" alt=\"Wet green leaves pressed flat against a pink surface\"></figure><h2>Wild Garlic</h2><div class=\"pb\"><span class=\"pk\">£1.80</span><span class=\"miss\">No unit price recorded</span></div><p class=\"or\">The lane · 40 yd</p><div class=\"st off\"><button>−</button><span class=\"mn\">0</span><button>+</button></div></article>\n<article class=\"cr c5\"><figure><img src=\"https://designlookbook.dev/assets/img/greengrocer-crate.webp\" alt=\"A wooden crate of bright green vegetables from above\"></figure><h2>Chicory</h2><div class=\"pb\"><span class=\"pk\">£1.95</span><span class=\"un\">£7.80 / kg</span></div><p class=\"or\">Nendrum · 6 mi</p><div class=\"st\"><button>−</button><span class=\"mn\">0</span><button>+</button></div></article>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"gapnote\" aria-label=\"Missing unit note\">\n<section class=\"gn\"><span class=\"k\">Why one crate cannot be bought</span><p>The wild garlic has no per-kilo figure recorded, so it renders as a gap and cannot be added to a basket. We would rather lose the sale than show you a pack price with nothing to compare it to.</p></section></section>\n<section class=\"dz-mod\" data-mod=\"basket\" aria-label=\"Basket bar\">\n<footer class=\"bk\"><span class=\"k\">Basket</span><span class=\"mn\">3 ITEMS · 2.4 KG</span><span class=\"tot\">£6.90</span><button class=\"bp\">GO TO BASKET</button></footer></section>\n</div>",
  "css": "\n.dz-greengrocer-stall { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 24px; }\n.dz-greengrocer-stall .k { text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 700; color: var(--muted-foreground); }\n.dz-greengrocer-stall .mn { font-family: var(--pv-mono); font-size: 13px; font-weight: 600; color: var(--muted-foreground); }\n.dz-greengrocer-stall h1 { font-family: var(--pv-display); font-weight: 400; letter-spacing: -.02em; font-size: 40px; line-height: 1.02; margin: 6px 0 6px; }\n.dz-greengrocer-stall .sh { margin-bottom: 20px; }\n.dz-greengrocer-stall .sh .mn { margin: 0; font-size: 11px; }\n.dz-greengrocer-stall .gd { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }\n.dz-greengrocer-stall .cr { background: var(--card); border: 2px solid var(--border); border-top: 6px solid var(--accent); border-radius: 0; padding: 16px; }\n.dz-greengrocer-stall .c2 { border-top-color: var(--primary); }\n.dz-greengrocer-stall .c3 { border-top-color: var(--chart-3); }\n.dz-greengrocer-stall .c4 { border-top-color: var(--chart-4); }\n.dz-greengrocer-stall .c5 { border-top-color: var(--chart-5); }\n.dz-greengrocer-stall .cr figure { margin: 0 0 12px; }\n.dz-greengrocer-stall .cr img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-greengrocer-stall h2 { text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 700; font-size: 22px; font-weight: 700; letter-spacing: .005em; margin: 0 0 10px; line-height: 1.24; }\n\n.dz-greengrocer-stall .pb .pk { font-family: var(--pv-display); font-weight: 400; letter-spacing: -.02em; font-size: 40px; line-height: 1; display: block; }\n.dz-greengrocer-stall .pb .un { font-family: var(--pv-mono); font-size: 13px; font-weight: 600; display: inline-block; margin-top: 6px; border-bottom: 1px solid var(--accent); padding-bottom: 2px; color: var(--foreground); }\n.dz-greengrocer-stall .pb .miss { font-family: var(--pv-mono); font-size: 13px; font-weight: 600; display: inline-block; margin-top: 6px; color: var(--destructive); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 700; }\n.dz-greengrocer-stall .or { text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 700; color: var(--muted-foreground); margin: 12px 0; }\n.dz-greengrocer-stall .st { display: flex; align-items: center; gap: 0; }\n.dz-greengrocer-stall .st button { width: 36px; height: 36px; background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 0; font: inherit; font-size: 18px; cursor: pointer; }\n.dz-greengrocer-stall .st span { width: 44px; text-align: center; font-family: var(--pv-mono); font-size: 13px; font-weight: 600; font-size: 16px; }\n.dz-greengrocer-stall .st.off button { background: var(--secondary); color: var(--muted-foreground); }\n.dz-greengrocer-stall .gap { border-color: var(--destructive); }\n.dz-greengrocer-stall .gn { margin-top: 24px; border-left: 6px solid var(--destructive); padding-left: 16px; }\n.dz-greengrocer-stall .gn p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; max-width: 70ch; }\n.dz-greengrocer-stall .bk { display: flex; align-items: center; gap: 20px; margin-top: 24px; padding-top: 16px; border-top: 2px solid var(--border); }\n.dz-greengrocer-stall .tot { font-family: var(--pv-display); font-weight: 400; letter-spacing: -.02em; font-size: 40px; margin-left: auto; }\n.dz-greengrocer-stall .bp { background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 9999px; padding: 14px 26px; font: inherit; text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 700; cursor: pointer; }\n@media (prefers-reduced-motion: reduce) { .dz-greengrocer-stall *, .dz-greengrocer-stall *::before, .dz-greengrocer-stall *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }\n",
  "requiredTheme": "/api/v1/themes/greengrocer.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Anton:wght@400;500;600;700&family=Chivo:wght@400;500;600;700&family=Sono:wght@400;500;600;700&display=swap"
}