{
  "id": "atoll-market-bag",
  "name": "The Bag",
  "theme": "atoll-market",
  "category": "Pricing",
  "description": "A bag and checkout summary where the shipping choice changes an actual delivery date rather than a label, and the total is the only mono figure that is large.",
  "layout": "A 1fr/380px split with uncontained bag rows on the left and a summary column on the right, no borders on the products at all.",
  "modules": [
    {
      "key": "head",
      "name": "Bag head",
      "html": "\n<header class=\"bh\"><h1>Your bag</h1><span class=\"k\">3 pieces · Collection 04</span></header>"
    },
    {
      "key": "rows",
      "name": "Bag rows",
      "html": "\n<section class=\"br\">\n  <article><img src=\"{{ART hero}}\" alt=\"{{ARTALT hero}}\"><div><b>The Long Crimson Coat</b><span class=\"mt\">Size 2 · wool-linen</span><div class=\"qt\"><button type=\"button\">−</button><span>1</span><button type=\"button\">+</button><a class=\"rm\" href=\"#\">Remove</a></div></div><span class=\"pr\">£620</span></article>\n  <article><img src=\"{{ART fabric}}\" alt=\"{{ARTALT fabric}}\"><div><b>Folded Silk, Aqua</b><span class=\"mt\">One size · hand-rolled edge</span><div class=\"qt\"><button type=\"button\">−</button><span>2</span><button type=\"button\">+</button><a class=\"rm\" href=\"#\">Remove</a></div></div><span class=\"pr\">£480</span></article>\n  <article><img src=\"{{ART still}}\" alt=\"{{ARTALT still}}\"><div><b>Two Objects, Bone and Crimson</b><span class=\"mt\">The pair</span><div class=\"qt\"><button type=\"button\">−</button><span>1</span><button type=\"button\">+</button><a class=\"rm\" href=\"#\">Remove</a></div></div><span class=\"pr\">£145</span></article>\n</section>"
    },
    {
      "key": "ship",
      "name": "Shipping choice",
      "html": "\n<aside class=\"sc\"><span class=\"k\">Delivery</span>\n<label class=\"on\"><input type=\"radio\" name=\"s\" checked><div><b>Standard</b><span>Arrives Tuesday 16 June</span></div><span class=\"pr\">Free</span></label>\n<label><input type=\"radio\" name=\"s\"><div><b>Next working day</b><span>Arrives Friday 12 June if ordered before 14:00</span></div><span class=\"pr\">£9</span></label>\n<label><input type=\"radio\" name=\"s\"><div><b>Collect from the studio</b><span>Ready Thursday 11 June, Cross Quay, weekdays only</span></div><span class=\"pr\">Free</span></label></aside>"
    },
    {
      "key": "total",
      "name": "Total column",
      "html": "\n<aside class=\"tc\"><dl>\n  <div><dt>Pieces</dt><dd class=\"pr\">£1,245</dd></div>\n  <div><dt>Delivery</dt><dd class=\"pr\">Free</dd></div>\n  <div><dt>Duties</dt><dd class=\"pr\">Included</dd></div>\n  <div class=\"tot\"><dt>Total</dt><dd class=\"big\">£1,245</dd></div>\n</dl>\n<button type=\"button\" class=\"buy\">Checkout</button>\n<p class=\"sh\">Duties and taxes are included for the UK and EU. Everywhere else they are collected on delivery and we cannot tell you the amount in advance, which is why we say so here rather than at the end.</p></aside>"
    }
  ],
  "moduleCount": 4,
  "reorderable": false,
  "meta": {
    "id": "atoll-market-bag",
    "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-bag.json",
  "structure": "A 1fr/380px split with uncontained bag rows on the left and a summary column on the right, no borders on the products at all.",
  "html": "<div class=\"dz dz-atoll-market-bag\" data-design=\"atoll-market-bag\" data-theme=\"atoll-market\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Bag head\">\n<header class=\"bh\"><h1>Your bag</h1><span class=\"k\">3 pieces · Collection 04</span></header></section><div class=\"cols\"><div class=\"left\"><section class=\"dz-mod\" data-mod=\"rows\" aria-label=\"Bag rows\">\n<section class=\"br\">\n  <article><img src=\"https://designlookbook.dev/assets/img/atoll-market-hero.webp\" alt=\"A crimson garment hanging against an aqua wall\"><div><b>The Long Crimson Coat</b><span class=\"mt\">Size 2 · wool-linen</span><div class=\"qt\"><button type=\"button\">−</button><span>1</span><button type=\"button\">+</button><a class=\"rm\" href=\"#\">Remove</a></div></div><span class=\"pr\">£620</span></article>\n  <article><img src=\"https://designlookbook.dev/assets/img/atoll-market-fabric.webp\" alt=\"Crimson fabric folded against an aqua ground\"><div><b>Folded Silk, Aqua</b><span class=\"mt\">One size · hand-rolled edge</span><div class=\"qt\"><button type=\"button\">−</button><span>2</span><button type=\"button\">+</button><a class=\"rm\" href=\"#\">Remove</a></div></div><span class=\"pr\">£480</span></article>\n  <article><img src=\"https://designlookbook.dev/assets/img/atoll-market-still.webp\" alt=\"Two objects arranged on aqua with hard shadows\"><div><b>Two Objects, Bone and Crimson</b><span class=\"mt\">The pair</span><div class=\"qt\"><button type=\"button\">−</button><span>1</span><button type=\"button\">+</button><a class=\"rm\" href=\"#\">Remove</a></div></div><span class=\"pr\">£145</span></article>\n</section></section><section class=\"dz-mod\" data-mod=\"ship\" aria-label=\"Shipping choice\">\n<aside class=\"sc\"><span class=\"k\">Delivery</span>\n<label class=\"on\"><input type=\"radio\" name=\"s\" checked><div><b>Standard</b><span>Arrives Tuesday 16 June</span></div><span class=\"pr\">Free</span></label>\n<label><input type=\"radio\" name=\"s\"><div><b>Next working day</b><span>Arrives Friday 12 June if ordered before 14:00</span></div><span class=\"pr\">£9</span></label>\n<label><input type=\"radio\" name=\"s\"><div><b>Collect from the studio</b><span>Ready Thursday 11 June, Cross Quay, weekdays only</span></div><span class=\"pr\">Free</span></label></aside></section></div><section class=\"dz-mod\" data-mod=\"total\" aria-label=\"Total column\">\n<aside class=\"tc\"><dl>\n  <div><dt>Pieces</dt><dd class=\"pr\">£1,245</dd></div>\n  <div><dt>Delivery</dt><dd class=\"pr\">Free</dd></div>\n  <div><dt>Duties</dt><dd class=\"pr\">Included</dd></div>\n  <div class=\"tot\"><dt>Total</dt><dd class=\"big\">£1,245</dd></div>\n</dl>\n<button type=\"button\" class=\"buy\">Checkout</button>\n<p class=\"sh\">Duties and taxes are included for the UK and EU. Everywhere else they are collected on delivery and we cannot tell you the amount in advance, which is why we say so here rather than at the end.</p></aside></section></div>\n</div>",
  "css": "\n.dz-atoll-market-bag { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 30px 38px 72px; }\n.dz-atoll-market-bag .k { text-transform: uppercase; letter-spacing: .18em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); display: block; }\n.dz-atoll-market-bag .bh { margin-bottom: 30px; }\n.dz-atoll-market-bag h1 { font-family: var(--pv-display); font-weight: 400; font-size: 44px; margin: 0 0 6px; letter-spacing: -.02em; }\n.dz-atoll-market-bag .cols { display: grid; grid-template-columns: 1fr 380px; gap: 46px; align-items: start; }\n.dz-atoll-market-bag .br article { display: grid; grid-template-columns: 110px 1fr auto; gap: 20px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--border); }\n.dz-atoll-market-bag .br img { width: 110px; height: 140px; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-atoll-market-bag .br b { font-family: var(--pv-display); font-weight: 400; font-size: 22px; display: block; margin-bottom: 4px; }\n.dz-atoll-market-bag .mt { font-size: 13px; color: var(--muted-foreground); }\n.dz-atoll-market-bag .qt { display: flex; align-items: center; gap: 6px; margin-top: 14px; }\n.dz-atoll-market-bag .qt button { width: 28px; height: 28px; font: inherit; font-size: 15px; line-height: 1; background: transparent; color: var(--foreground); border: 1px solid var(--border); border-radius: var(--pv-radius-sm); cursor: pointer; }\n.dz-atoll-market-bag .qt span { font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .02em; width: 22px; text-align: center; }\n.dz-atoll-market-bag .rm { text-transform: uppercase; letter-spacing: .18em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); text-decoration: none; margin-left: 12px; }\n.dz-atoll-market-bag .pr { font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .02em; font-size: 14px; }\n.dz-atoll-market-bag .sc { margin-top: 30px; }\n.dz-atoll-market-bag .sc label { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--border); cursor: pointer; }\n.dz-atoll-market-bag .sc b { display: block; font-size: 15px; }\n.dz-atoll-market-bag .sc span:not(.pr) { font-size: 13px; color: var(--muted-foreground); }\n.dz-atoll-market-bag .sc .on b { color: var(--primary); }\n.dz-atoll-market-bag .tc { position: sticky; top: 20px; }\n.dz-atoll-market-bag dl { margin: 0 0 22px; }\n.dz-atoll-market-bag dl div { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; }\n.dz-atoll-market-bag dt { color: var(--muted-foreground); margin: 0; }\n.dz-atoll-market-bag dd { margin: 0; }\n.dz-atoll-market-bag .tot { border-bottom: 0; padding-top: 16px; }\n.dz-atoll-market-bag .big { font-family: var(--pv-mono); font-size: 30px; letter-spacing: -.01em; }\n.dz-atoll-market-bag .buy { width: 100%; text-transform: uppercase; letter-spacing: .18em; font-size: 10.5px; font-weight: 600; background: var(--accent); color: var(--accent-foreground); border: 0; padding: 17px; cursor: pointer; font-family: var(--pv-body); border-radius: var(--pv-radius); }\n.dz-atoll-market-bag .sh { margin: 14px 0 0; font-size: 12.5px; color: var(--muted-foreground); line-height: 1.58; }\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"
}