{
  "id": "atoll-market-piece",
  "name": "Product Page",
  "theme": "atoll-market",
  "category": "Editorial",
  "description": "A product page written as an editorial piece, where the size selector is the only interface element and everything else is photograph and prose.",
  "layout": "A full-height bleeding image on the right and a narrow text column on the left, with the size cells and the violet buying button at the foot.",
  "modules": [
    {
      "key": "image",
      "name": "Bleeding image",
      "html": "\n<figure class=\"bi\"><img src=\"{{ART hero}}\" alt=\"{{ARTALT hero}}\"></figure>"
    },
    {
      "key": "text",
      "name": "Piece text",
      "html": "\n<div class=\"pt\"><span class=\"k\">Collection 04 · Piece 01</span><h1>The Long Crimson Coat</h1><p class=\"pr\">£620</p>\n<p>Unlined, with a single seam at the shoulder and no seam at all down the back. It hangs straight from the collar, which means it does not fit anybody exactly and is not supposed to.</p>\n<p>The cloth is a wool-linen woven for us in Biella at 240 grams. It creases within an hour of putting it on and the crease is the point; a coat that holds a press through a hot afternoon is made of something else.</p>\n<p class=\"cr\">Made in Portugal. 62% wool, 38% linen. Dry clean, rarely.</p></div>"
    },
    {
      "key": "sizes",
      "name": "Size and buy",
      "html": "\n<div class=\"sb\"><span class=\"k\">Size</span>\n<div class=\"cells\"><button type=\"button\">1</button><button type=\"button\" class=\"on\">2</button><button type=\"button\">3</button><button type=\"button\" class=\"gone\">4</button></div>\n<p class=\"fit\">Size 2 fits a 96 to 104 cm chest. Between sizes, take the smaller; the shoulder is generous.</p>\n<button type=\"button\" class=\"buy\">Add to bag</button>\n<p class=\"sh\">Free shipping over £200. Returns within 30 days, unworn, and we pay the postage.</p></div>"
    }
  ],
  "moduleCount": 3,
  "reorderable": false,
  "meta": {
    "id": "atoll-market-piece",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-02T00:13:22+09:00",
    "updatedAt": "2026-09-02T00:13:22+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/atoll-market-piece.json",
  "structure": "A full-height bleeding image on the right and a narrow text column on the left, with the size cells and the violet buying button at the foot.",
  "html": "<div class=\"dz dz-atoll-market-piece\" data-design=\"atoll-market-piece\" data-theme=\"atoll-market\">\n<div class=\"cols\"><div class=\"left\"><section class=\"dz-mod\" data-mod=\"text\" aria-label=\"Piece text\">\n<div class=\"pt\"><span class=\"k\">Collection 04 · Piece 01</span><h1>The Long Crimson Coat</h1><p class=\"pr\">£620</p>\n<p>Unlined, with a single seam at the shoulder and no seam at all down the back. It hangs straight from the collar, which means it does not fit anybody exactly and is not supposed to.</p>\n<p>The cloth is a wool-linen woven for us in Biella at 240 grams. It creases within an hour of putting it on and the crease is the point; a coat that holds a press through a hot afternoon is made of something else.</p>\n<p class=\"cr\">Made in Portugal. 62% wool, 38% linen. Dry clean, rarely.</p></div></section><section class=\"dz-mod\" data-mod=\"sizes\" aria-label=\"Size and buy\">\n<div class=\"sb\"><span class=\"k\">Size</span>\n<div class=\"cells\"><button type=\"button\">1</button><button type=\"button\" class=\"on\">2</button><button type=\"button\">3</button><button type=\"button\" class=\"gone\">4</button></div>\n<p class=\"fit\">Size 2 fits a 96 to 104 cm chest. Between sizes, take the smaller; the shoulder is generous.</p>\n<button type=\"button\" class=\"buy\">Add to bag</button>\n<p class=\"sh\">Free shipping over £200. Returns within 30 days, unworn, and we pay the postage.</p></div></section></div><section class=\"dz-mod\" data-mod=\"image\" aria-label=\"Bleeding image\">\n<figure class=\"bi\"><img src=\"https://designlookbook.dev/assets/img/atoll-market-hero.webp\" alt=\"A crimson garment hanging against an aqua wall\"></figure></section></div>\n</div>",
  "css": "\n.dz-atoll-market-piece { background: var(--background); color: var(--foreground); font-family: var(--pv-body); overflow: hidden; }\n.dz-atoll-market-piece .k { text-transform: uppercase; letter-spacing: .18em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); }\n.dz-atoll-market-piece .cols { display: grid; grid-template-columns: 1fr 1.2fr; gap: 46px; align-items: start; }\n.dz-atoll-market-piece .left { padding: 38px 0 72px 38px; }\n.dz-atoll-market-piece .bi { margin: 0; margin-right: -60px; }\n.dz-atoll-market-piece .bi img { width: 100%; height: 620px; object-fit: cover; display: block; filter: var(--img-filter); box-shadow: 0 20px 50px -22px color-mix(in oklab, var(--foreground) 40%, transparent); }\n.dz-atoll-market-piece h1 { font-family: var(--pv-display); font-weight: 400; font-size: 44px; line-height: 1.1; margin: 10px 0 8px; letter-spacing: -.02em; }\n.dz-atoll-market-piece .pr { font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .02em; font-size: 14px; margin: 0 0 24px; }\n.dz-atoll-market-piece .pt p { margin: 0 0 14px; font-size: 15px; line-height: 1.62; max-width: 48ch; }\n.dz-atoll-market-piece .cr { font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .02em; color: var(--muted-foreground); line-height: 1.7; }\n.dz-atoll-market-piece .sb { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--border); max-width: 48ch; }\n.dz-atoll-market-piece .cells { display: flex; gap: 8px; margin: 12px 0 12px; }\n.dz-atoll-market-piece .cells button { width: 46px; height: 46px; font: inherit; font-size: 14px; background: transparent; color: var(--foreground); border: 1px solid var(--border); border-radius: var(--pv-radius-sm); cursor: pointer; }\n.dz-atoll-market-piece .cells .on { background: var(--accent); color: var(--accent-foreground); border-color: var(--accent); }\n.dz-atoll-market-piece .cells .gone { color: var(--muted-foreground); text-decoration: line-through; }\n.dz-atoll-market-piece .fit { margin: 0 0 20px; font-size: 13px; color: var(--muted-foreground); line-height: 1.55; }\n.dz-atoll-market-piece .buy { text-transform: uppercase; letter-spacing: .18em; font-size: 10.5px; font-weight: 600; background: var(--accent); color: var(--accent-foreground); border: 0; padding: 16px 40px; cursor: pointer; font-family: var(--pv-body); border-radius: var(--pv-radius); }\n.dz-atoll-market-piece .sh { margin: 14px 0 0; font-size: 12.5px; color: var(--muted-foreground); line-height: 1.55; }\n",
  "requiredTheme": "/api/v1/themes/atoll-market.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Prata:wght@400;500;600;700&family=Instrument+Sans:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600;700&display=swap"
}