{
  "id": "curated-catalog-product-plinth",
  "name": "Product Plinth",
  "theme": "curated-catalog",
  "category": "Commerce",
  "description": "A product page that treats the object like a museum piece: one large image, a thumbnail strip, and specification as a real definition list.",
  "layout": "Sticky image column at 58% with a vertical thumbnail rail on its left edge; the buy column scrolls independently and the specification sits below the fold as a two-column dl.",
  "modules": [
    {
      "key": "gallery",
      "name": "Image plinth",
      "html": "\n<div class=\"gal\">\n  <div class=\"thumbs\"><button type=\"button\" class=\"on\"><img src=\"{{ART object}}\" alt=\"Front view\"></button><button type=\"button\"><img src=\"{{ART textile}}\" alt=\"Detail of the glaze\"></button><button type=\"button\"><img src=\"{{IMG product 200 200}}\" alt=\"{{ALT product}}\"></button><button type=\"button\"><img src=\"{{IMG interior 200 200}}\" alt=\"{{ALT interior}}\"></button></div>\n  <figure class=\"big\"><img src=\"{{ART object}}\" alt=\"{{ARTALT object}}\"></figure>\n</div>"
    },
    {
      "key": "buy",
      "name": "Buy column",
      "html": "\n<div class=\"buy\">\n  <span class=\"maker\">Kilcarn Studio</span>\n  <h1>Turned Walnut and Brass Bowl</h1>\n  <p class=\"price\">£186</p>\n  <p class=\"desc\">Turned from a single piece of English walnut with a spun brass foot. Each one takes the grain differently, so the piece you receive will not be the piece photographed.</p>\n  <div class=\"opt\"><span>Finish</span><div class=\"swatches\"><button type=\"button\" class=\"on\">Oiled</button><button type=\"button\">Waxed</button></div></div>\n  <button type=\"button\" class=\"add\">Add to bag</button>\n  <ul class=\"assure\"><li>Made to order, 3–4 weeks</li><li>Free UK delivery over £120</li><li>Returned within 30 days for any reason</li></ul>\n</div>"
    },
    {
      "key": "spec",
      "name": "Specification",
      "html": "\n<section class=\"spec\">\n  <h2>Specification</h2>\n  <dl>\n    <div><dt>Maker</dt><dd>Kilcarn Studio, Co. Meath</dd></div>\n    <div><dt>Materials</dt><dd>English walnut, spun brass</dd></div>\n    <div><dt>Dimensions</dt><dd>210mm diameter × 88mm</dd></div>\n    <div><dt>Weight</dt><dd>640g</dd></div>\n    <div><dt>Care</dt><dd>Wipe only. Re-oil annually with a food-safe finish.</dd></div>\n    <div><dt>Edition</dt><dd>Open, made in batches of twelve</dd></div>\n  </dl>\n</section>"
    }
  ],
  "moduleCount": 3,
  "reorderable": false,
  "meta": {
    "id": "curated-catalog-product-plinth",
    "model": "Claude Fable 5.1",
    "author": "Claude Code",
    "createdAt": "2026-09-02T16:52:47+09:00",
    "updatedAt": "2026-09-02T16:58:37+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/curated-catalog-product-plinth.json",
  "structure": "Sticky image column at 58% with a vertical thumbnail rail on its left edge; the buy column scrolls independently and the specification sits below the fold as a two-column dl.",
  "html": "<div class=\"dz dz-curated-catalog-product-plinth\" data-design=\"curated-catalog-product-plinth\" data-theme=\"curated-catalog\">\n<div class=\"top\"><section class=\"dz-mod\" data-mod=\"gallery\" aria-label=\"Image plinth\">\n<div class=\"gal\">\n  <div class=\"thumbs\"><button type=\"button\" class=\"on\"><img src=\"https://designlookbook.dev/assets/img/curated-catalog-object.webp\" alt=\"Front view\"></button><button type=\"button\"><img src=\"https://designlookbook.dev/assets/img/curated-catalog-textile.webp\" alt=\"Detail of the glaze\"></button><button type=\"button\"><img src=\"https://images.unsplash.com/photo-1517849845537-4d257902454a?w=200&h=200&q=70&auto=format&fit=crop\" alt=\"A red running shoe on a saturated red background\"></button><button type=\"button\"><img src=\"https://images.unsplash.com/photo-1524758631624-e2822e304c36?w=200&h=200&q=70&auto=format&fit=crop\" alt=\"A bright minimal lounge with pale armchairs\"></button></div>\n  <figure class=\"big\"><img src=\"https://designlookbook.dev/assets/img/curated-catalog-object.webp\" alt=\"A brass and walnut object photographed against warm white\"></figure>\n</div></section><section class=\"dz-mod\" data-mod=\"buy\" aria-label=\"Buy column\">\n<div class=\"buy\">\n  <span class=\"maker\">Kilcarn Studio</span>\n  <h1>Turned Walnut and Brass Bowl</h1>\n  <p class=\"price\">£186</p>\n  <p class=\"desc\">Turned from a single piece of English walnut with a spun brass foot. Each one takes the grain differently, so the piece you receive will not be the piece photographed.</p>\n  <div class=\"opt\"><span>Finish</span><div class=\"swatches\"><button type=\"button\" class=\"on\">Oiled</button><button type=\"button\">Waxed</button></div></div>\n  <button type=\"button\" class=\"add\">Add to bag</button>\n  <ul class=\"assure\"><li>Made to order, 3–4 weeks</li><li>Free UK delivery over £120</li><li>Returned within 30 days for any reason</li></ul>\n</div></section></div><section class=\"dz-mod\" data-mod=\"spec\" aria-label=\"Specification\">\n<section class=\"spec\">\n  <h2>Specification</h2>\n  <dl>\n    <div><dt>Maker</dt><dd>Kilcarn Studio, Co. Meath</dd></div>\n    <div><dt>Materials</dt><dd>English walnut, spun brass</dd></div>\n    <div><dt>Dimensions</dt><dd>210mm diameter × 88mm</dd></div>\n    <div><dt>Weight</dt><dd>640g</dd></div>\n    <div><dt>Care</dt><dd>Wipe only. Re-oil annually with a food-safe finish.</dd></div>\n    <div><dt>Edition</dt><dd>Open, made in batches of twelve</dd></div>\n  </dl>\n</section></section>\n</div>",
  "css": "\n.dz-curated-catalog-product-plinth { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 28px 30px 32px; }\n.dz-curated-catalog-product-plinth .top { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 40px; }\n.dz-curated-catalog-product-plinth .gal { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }\n.dz-curated-catalog-product-plinth .thumbs { display: flex; flex-direction: column; gap: 10px; }\n.dz-curated-catalog-product-plinth .thumbs button { padding: 0; border: 2px solid transparent; border-radius: var(--pv-radius-sm); overflow: hidden; background: none; cursor: pointer; transition: border-color var(--dur) var(--ease); }\n.dz-curated-catalog-product-plinth .thumbs button.on { border-color: var(--primary); }\n.dz-curated-catalog-product-plinth .thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }\n.dz-curated-catalog-product-plinth .big { margin: 0; border-radius: var(--pv-radius-xl); overflow: hidden; background: var(--muted); box-shadow: 0 10px 30px color-mix(in srgb, var(--foreground) 12%, transparent); }\n.dz-curated-catalog-product-plinth .big img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }\n.dz-curated-catalog-product-plinth .maker { font-size: 13px; color: var(--primary); }\n.dz-curated-catalog-product-plinth .buy h1 { font-family: var(--pv-display); font-size: 34px; line-height: 1.12; margin: 6px 0 10px; }\n.dz-curated-catalog-product-plinth .price { font-family: var(--pv-display); font-size: 24px; margin: 0 0 16px; }\n.dz-curated-catalog-product-plinth .desc { margin: 0 0 22px; font-size: 15px; line-height: 1.68; color: var(--muted-foreground); }\n.dz-curated-catalog-product-plinth .opt { margin-bottom: 20px; }\n.dz-curated-catalog-product-plinth .opt span { display: block; font-size: 13px; color: var(--muted-foreground); margin-bottom: 8px; }\n.dz-curated-catalog-product-plinth .swatches { display: flex; gap: 8px; }\n.dz-curated-catalog-product-plinth .swatches button { font: inherit; font-size: 13.5px; padding: 9px 18px; border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius-xl); background: var(--card); color: var(--foreground); cursor: pointer; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }\n.dz-curated-catalog-product-plinth .swatches button.on { border-color: var(--primary); background: var(--accent); color: var(--accent-foreground); }\n.dz-curated-catalog-product-plinth .add { width: 100%; font: inherit; font-size: 15px; font-weight: 600; padding: 14px; border: 0; border-radius: var(--pv-radius-xl); background: var(--primary); color: var(--primary-foreground); cursor: pointer; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }\n.dz-curated-catalog-product-plinth .add:hover { transform: translateY(-2px); box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 34%, transparent); }\n.dz-curated-catalog-product-plinth .assure { list-style: none; margin: 18px 0 0; padding: 0; }\n.dz-curated-catalog-product-plinth .assure li { font-size: 13px; color: var(--muted-foreground); padding: 7px 0; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-curated-catalog-product-plinth .spec { margin-top: 34px; padding-top: 22px; border-top: var(--pv-bw) solid var(--border); }\n.dz-curated-catalog-product-plinth .spec h2 { font-family: var(--pv-display); font-size: 22px; margin: 0 0 14px; }\n.dz-curated-catalog-product-plinth .spec dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin: 0; }\n.dz-curated-catalog-product-plinth .spec dl > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 14px; padding: 10px 0; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-curated-catalog-product-plinth .spec dt { font-size: 13px; color: var(--muted-foreground); }\n.dz-curated-catalog-product-plinth .spec dd { margin: 0; font-size: 14px; }\n@media (prefers-reduced-motion: reduce) { .dz-curated-catalog-product-plinth *, .dz-curated-catalog-product-plinth *::before, .dz-curated-catalog-product-plinth *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/curated-catalog.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Instrument+Serif:wght@400;500;600;700&family=Karla:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap"
}