{
  "id": "greengrocer-sortby",
  "name": "Sort by Unit Price",
  "theme": "greengrocer",
  "category": "Search & Browse",
  "description": "Browsing sorted by per-kilo price rather than by pack price, in a dense uppercase table where the unit column is the widest thing on the row.",
  "layout": "A row of uppercase filter chips over a fixed-height table whose unit-price column is set at 40px in Anton — the only place a table gets display type.",
  "modules": [
    {
      "key": "q",
      "name": "Search and sort",
      "html": "\n<header class=\"sq\"><input value=\"GREENS\"><div class=\"sr\"><span class=\"k\">Sort</span><span class=\"ch on\">£ / KG</span><span class=\"ch\">PACK PRICE</span><span class=\"ch\">DISTANCE</span><span class=\"ch\">NEWEST</span></div></header>"
    },
    {
      "key": "chips",
      "name": "Category chips",
      "html": "\n<section class=\"cp\"><span class=\"ch on\">ALL</span><span class=\"ch\">LEAF</span><span class=\"ch\">ROOT</span><span class=\"ch\">BRASSICA</span><span class=\"ch\">ALLIUM</span><span class=\"ch\">FRUIT</span><span class=\"ch\">HERB</span></section>"
    },
    {
      "key": "table",
      "name": "Unit price table",
      "html": "\n<section class=\"tb\"><div class=\"hd\"><span>Item</span><span>Grower</span><span>Pack</span><span>Per kilo</span><span></span></div>\n<div class=\"rw\"><span class=\"nm\">MARIS PIPER</span><span class=\"gr\">BALLYFIN · 4 MI</span><span class=\"pk2 mn\">£2.25 / 2.5 KG</span><span class=\"up\">£0.90</span><button class=\"ad\">ADD</button></div>\n<div class=\"rw\"><span class=\"nm\">SWEDE</span><span class=\"gr\">BALLYFIN · 4 MI</span><span class=\"pk2 mn\">£1.10 / 1 KG</span><span class=\"up\">£1.10</span><button class=\"ad\">ADD</button></div>\n<div class=\"rw\"><span class=\"nm\">SAVOY CABBAGE</span><span class=\"gr\">NENDRUM · 6 MI</span><span class=\"pk2 mn\">£1.60 / 900 G</span><span class=\"up\">£1.78</span><button class=\"ad\">ADD</button></div>\n<div class=\"rw\"><span class=\"nm\">LEEK</span><span class=\"gr\">NENDRUM · 6 MI</span><span class=\"pk2 mn\">£1.40 / 500 G</span><span class=\"up\">£2.80</span><button class=\"ad\">ADD</button></div>\n<div class=\"rw\"><span class=\"nm\">CAVOLO NERO</span><span class=\"gr\">NENDRUM · 6 MI</span><span class=\"pk2 mn\">£2.40 / 500 G</span><span class=\"up\">£4.80</span><button class=\"ad\">ADD</button></div>\n<div class=\"rw\"><span class=\"nm\">FORCED RHUBARB</span><span class=\"gr\">NENDRUM · 6 MI</span><span class=\"pk2 mn\">£3.10 / 500 G</span><span class=\"up\">£6.20</span><button class=\"ad\">ADD</button></div>\n<div class=\"rw\"><span class=\"nm\">CHICORY</span><span class=\"gr\">NENDRUM · 6 MI</span><span class=\"pk2 mn\">£1.95 / 250 G</span><span class=\"up\">£7.80</span><button class=\"ad\">ADD</button></div>\n</section>"
    },
    {
      "key": "note",
      "name": "Sort note",
      "html": "\n<footer class=\"sn\"><span class=\"k\">Note the reordering</span><p>Sorted by pack price the potatoes and the chicory sit next to each other. Sorted by the kilo they are at opposite ends of the list, which is the truth about them.</p></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "greengrocer-sortby",
    "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-sortby.json",
  "structure": "A row of uppercase filter chips over a fixed-height table whose unit-price column is set at 40px in Anton — the only place a table gets display type.",
  "html": "<div class=\"dz dz-greengrocer-sortby\" data-design=\"greengrocer-sortby\" data-theme=\"greengrocer\">\n<section class=\"dz-mod\" data-mod=\"q\" aria-label=\"Search and sort\">\n<header class=\"sq\"><input value=\"GREENS\"><div class=\"sr\"><span class=\"k\">Sort</span><span class=\"ch on\">£ / KG</span><span class=\"ch\">PACK PRICE</span><span class=\"ch\">DISTANCE</span><span class=\"ch\">NEWEST</span></div></header></section>\n<section class=\"dz-mod\" data-mod=\"chips\" aria-label=\"Category chips\">\n<section class=\"cp\"><span class=\"ch on\">ALL</span><span class=\"ch\">LEAF</span><span class=\"ch\">ROOT</span><span class=\"ch\">BRASSICA</span><span class=\"ch\">ALLIUM</span><span class=\"ch\">FRUIT</span><span class=\"ch\">HERB</span></section></section>\n<section class=\"dz-mod\" data-mod=\"table\" aria-label=\"Unit price table\">\n<section class=\"tb\"><div class=\"hd\"><span>Item</span><span>Grower</span><span>Pack</span><span>Per kilo</span><span></span></div>\n<div class=\"rw\"><span class=\"nm\">MARIS PIPER</span><span class=\"gr\">BALLYFIN · 4 MI</span><span class=\"pk2 mn\">£2.25 / 2.5 KG</span><span class=\"up\">£0.90</span><button class=\"ad\">ADD</button></div>\n<div class=\"rw\"><span class=\"nm\">SWEDE</span><span class=\"gr\">BALLYFIN · 4 MI</span><span class=\"pk2 mn\">£1.10 / 1 KG</span><span class=\"up\">£1.10</span><button class=\"ad\">ADD</button></div>\n<div class=\"rw\"><span class=\"nm\">SAVOY CABBAGE</span><span class=\"gr\">NENDRUM · 6 MI</span><span class=\"pk2 mn\">£1.60 / 900 G</span><span class=\"up\">£1.78</span><button class=\"ad\">ADD</button></div>\n<div class=\"rw\"><span class=\"nm\">LEEK</span><span class=\"gr\">NENDRUM · 6 MI</span><span class=\"pk2 mn\">£1.40 / 500 G</span><span class=\"up\">£2.80</span><button class=\"ad\">ADD</button></div>\n<div class=\"rw\"><span class=\"nm\">CAVOLO NERO</span><span class=\"gr\">NENDRUM · 6 MI</span><span class=\"pk2 mn\">£2.40 / 500 G</span><span class=\"up\">£4.80</span><button class=\"ad\">ADD</button></div>\n<div class=\"rw\"><span class=\"nm\">FORCED RHUBARB</span><span class=\"gr\">NENDRUM · 6 MI</span><span class=\"pk2 mn\">£3.10 / 500 G</span><span class=\"up\">£6.20</span><button class=\"ad\">ADD</button></div>\n<div class=\"rw\"><span class=\"nm\">CHICORY</span><span class=\"gr\">NENDRUM · 6 MI</span><span class=\"pk2 mn\">£1.95 / 250 G</span><span class=\"up\">£7.80</span><button class=\"ad\">ADD</button></div>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"note\" aria-label=\"Sort note\">\n<footer class=\"sn\"><span class=\"k\">Note the reordering</span><p>Sorted by pack price the potatoes and the chicory sit next to each other. Sorted by the kilo they are at opposite ends of the list, which is the truth about them.</p></footer></section>\n</div>",
  "css": "\n.dz-greengrocer-sortby { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 24px; }\n.dz-greengrocer-sortby .k { text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 700; color: var(--muted-foreground); }\n.dz-greengrocer-sortby .mn { font-family: var(--pv-mono); font-size: 13px; font-weight: 600; }\n.dz-greengrocer-sortby .sq { display: flex; align-items: flex-end; gap: 24px; margin-bottom: 14px; }\n.dz-greengrocer-sortby .sq input { flex: none; width: 320px; background: var(--card); border: 2px solid var(--border); border-radius: 0; color: var(--foreground); font: inherit; font-family: var(--pv-display); font-weight: 400; letter-spacing: -.02em; font-size: 30px; padding: 10px 12px; }\n.dz-greengrocer-sortby .sq input:focus { outline: none; border-color: var(--primary); }\n.dz-greengrocer-sortby .sr { display: flex; align-items: center; gap: 8px; margin-left: auto; }\n.dz-greengrocer-sortby .cp { display: flex; gap: 8px; margin-bottom: 16px; }\n.dz-greengrocer-sortby .ch { text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 700; border: 2px solid var(--border); padding: 8px 12px; color: var(--muted-foreground); }\n.dz-greengrocer-sortby .ch.on { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); }\n.dz-greengrocer-sortby .tb .hd, .dz-greengrocer-sortby .tb .rw { display: grid; grid-template-columns: 1fr 200px 180px 130px 90px; gap: 16px; align-items: center; }\n.dz-greengrocer-sortby .tb .hd { text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 700; color: var(--muted-foreground); height: 34px; border-bottom: 2px solid var(--border); }\n.dz-greengrocer-sortby .tb .rw { height: 66px; border-bottom: 2px solid var(--border); }\n.dz-greengrocer-sortby .nm { text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 700; font-size: 17px; }\n.dz-greengrocer-sortby .gr { text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 700; color: var(--muted-foreground); }\n.dz-greengrocer-sortby .pk2 { color: var(--muted-foreground); }\n.dz-greengrocer-sortby .up { font-family: var(--pv-display); font-weight: 400; letter-spacing: -.02em; font-size: 40px; line-height: 1; border-bottom: 2px solid var(--accent); padding-bottom: 2px; justify-self: start; }\n.dz-greengrocer-sortby .ad { background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 0; padding: 11px 0; width: 100%; font: inherit; text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 700; cursor: pointer; }\n.dz-greengrocer-sortby .sn { margin-top: 20px; border-left: 6px solid var(--accent); padding-left: 16px; }\n.dz-greengrocer-sortby .sn p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; max-width: 70ch; }\n@media (prefers-reduced-motion: reduce) { .dz-greengrocer-sortby *, .dz-greengrocer-sortby *::before, .dz-greengrocer-sortby *::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"
}