{
  "id": "fitting-room-item",
  "name": "Item",
  "theme": "fitting-room",
  "category": "Commerce",
  "description": "A rental item page opening on its available-from date rather than its price, with a 3:4 image and the extend stepper that moves the rail block live.",
  "layout": "A 3:4 image column beside a detail column whose first line is the date; an extend stepper below shows the consequence on a miniature rail.",
  "modules": [
    {
      "key": "image",
      "name": "Item image",
      "html": "\n<figure class=\"im\"><img src=\"{{ART coat}}\" alt=\"{{ARTALT coat}}\"></figure>"
    },
    {
      "key": "detail",
      "name": "Item detail",
      "html": "\n<section class=\"dt\"><span class=\"du\">Available from 14 Mar · 14 nights</span><h1>Wool overcoat, navy</h1><p class=\"mt\"><span class=\"sz\">UK 12</span><span class=\"cn\">Good</span><span class=\"sz\">Double breasted</span></p><p class=\"ds\">A heavy Irish wool, cut long and slightly boxy, with the shoulder taken in from the original. Worn eleven times; the cuffs have been rebound once, which is noted honestly rather than hidden.</p><div class=\"pz\"><span class=\"fig\">£46</span><span class=\"bs mn\">14 nights · insurance and cleaning included</span></div><button class=\"pri\">Reserve for 14 nights</button></section>"
    },
    {
      "key": "extend",
      "name": "Extend preview",
      "html": "\n<section class=\"ex\"><span class=\"k\">If you extend</span><div class=\"stp\"><button>−</button><span class=\"dnum mn\">14 nights</span><button>+</button></div><div class=\"rail mini\"><span class=\"today\" style=\"left:7%\"></span><div class=\"dy\"><span class=\"dn\">14</span></div><div class=\"dy\"><span class=\"dn\">15</span></div><div class=\"dy\"><span class=\"dn\">16</span></div><div class=\"dy\"><span class=\"dn\">17</span></div><div class=\"dy\"><span class=\"dn\">18</span></div><div class=\"dy\"><span class=\"dn\">19</span></div><div class=\"dy\"><span class=\"dn\">20</span></div><div class=\"dy\"><span class=\"dn\">21</span></div><div class=\"dy\"><span class=\"dn\">22</span></div><div class=\"dy\"><span class=\"dn\">23</span></div><div class=\"dy\"><span class=\"dn\">24</span></div><div class=\"dy\"><span class=\"dn\">25</span></div><div class=\"dy\"><span class=\"dn\">26</span></div><div class=\"dy\"><span class=\"dn\">27</span></div></div><div class=\"blocks short\"><span class=\"bk\" style=\"left:0;width:100%;top:0\">Wool overcoat · returns 28 Mar</span></div><p class=\"nt\">The block moves as you press. You see where the item lands before you commit to it, which is the only reason this control exists rather than a date picker.</p></section>"
    },
    {
      "key": "history",
      "name": "Item history",
      "html": "\n<footer class=\"hs\"><span class=\"k\">This coat has been out</span><div class=\"rw\"><span class=\"dt2 mn\">02 Jan — 16 Jan</span><span>Returned on time</span><span class=\"cn2\">Good</span></div><div class=\"rw\"><span class=\"dt2 mn\">21 Jan — 04 Feb</span><span>Returned two days late</span><span class=\"cn2\">Good</span></div><div class=\"rw\"><span class=\"dt2 mn\">11 Feb — 25 Feb</span><span>Cuffs rebound after return</span><span class=\"cn2\">Repaired</span></div></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "fitting-room-item",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-02T01:37:40+09:00",
    "updatedAt": "2026-09-02T01:37:40+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/fitting-room-item.json",
  "structure": "A 3:4 image column beside a detail column whose first line is the date; an extend stepper below shows the consequence on a miniature rail.",
  "html": "<div class=\"dz dz-fitting-room-item\" data-design=\"fitting-room-item\" data-theme=\"fitting-room\">\n<section class=\"dz-mod\" data-mod=\"image\" aria-label=\"Item image\">\n<figure class=\"im\"><img src=\"https://designlookbook.dev/assets/img/fitting-room-coat.webp\" alt=\"A single blue coat hanging against a mauve wall\"></figure></section>\n<section class=\"dz-mod\" data-mod=\"detail\" aria-label=\"Item detail\">\n<section class=\"dt\"><span class=\"du\">Available from 14 Mar · 14 nights</span><h1>Wool overcoat, navy</h1><p class=\"mt\"><span class=\"sz\">UK 12</span><span class=\"cn\">Good</span><span class=\"sz\">Double breasted</span></p><p class=\"ds\">A heavy Irish wool, cut long and slightly boxy, with the shoulder taken in from the original. Worn eleven times; the cuffs have been rebound once, which is noted honestly rather than hidden.</p><div class=\"pz\"><span class=\"fig\">£46</span><span class=\"bs mn\">14 nights · insurance and cleaning included</span></div><button class=\"pri\">Reserve for 14 nights</button></section></section>\n<section class=\"dz-mod\" data-mod=\"extend\" aria-label=\"Extend preview\">\n<section class=\"ex\"><span class=\"k\">If you extend</span><div class=\"stp\"><button>−</button><span class=\"dnum mn\">14 nights</span><button>+</button></div><div class=\"rail mini\"><span class=\"today\" style=\"left:7%\"></span><div class=\"dy\"><span class=\"dn\">14</span></div><div class=\"dy\"><span class=\"dn\">15</span></div><div class=\"dy\"><span class=\"dn\">16</span></div><div class=\"dy\"><span class=\"dn\">17</span></div><div class=\"dy\"><span class=\"dn\">18</span></div><div class=\"dy\"><span class=\"dn\">19</span></div><div class=\"dy\"><span class=\"dn\">20</span></div><div class=\"dy\"><span class=\"dn\">21</span></div><div class=\"dy\"><span class=\"dn\">22</span></div><div class=\"dy\"><span class=\"dn\">23</span></div><div class=\"dy\"><span class=\"dn\">24</span></div><div class=\"dy\"><span class=\"dn\">25</span></div><div class=\"dy\"><span class=\"dn\">26</span></div><div class=\"dy\"><span class=\"dn\">27</span></div></div><div class=\"blocks short\"><span class=\"bk\" style=\"left:0;width:100%;top:0\">Wool overcoat · returns 28 Mar</span></div><p class=\"nt\">The block moves as you press. You see where the item lands before you commit to it, which is the only reason this control exists rather than a date picker.</p></section></section>\n<section class=\"dz-mod\" data-mod=\"history\" aria-label=\"Item history\">\n<footer class=\"hs\"><span class=\"k\">This coat has been out</span><div class=\"rw\"><span class=\"dt2 mn\">02 Jan — 16 Jan</span><span>Returned on time</span><span class=\"cn2\">Good</span></div><div class=\"rw\"><span class=\"dt2 mn\">21 Jan — 04 Feb</span><span>Returned two days late</span><span class=\"cn2\">Good</span></div><div class=\"rw\"><span class=\"dt2 mn\">11 Feb — 25 Feb</span><span>Cuffs rebound after return</span><span class=\"cn2\">Repaired</span></div></footer></section>\n</div>",
  "css": "\n.dz-fitting-room-item { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 28px; display: grid; grid-template-columns: 380px 1fr; gap: 36px; align-items: start; }\n.dz-fitting-room-item .k { text-transform: uppercase; letter-spacing: .15em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); display: block; margin-bottom: 10px; }\n.dz-fitting-room-item .mn { font-family: var(--pv-mono); font-size: 13px; }\n.dz-fitting-room-item .im { margin: 0; grid-row: 1 / span 3; }\n.dz-fitting-room-item .im img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; border-radius: 12px; filter: var(--img-filter); }\n\n.dz-fitting-room-item .du { font-family: var(--pv-mono); font-size: 13px; border-bottom: 2px solid var(--accent); padding-bottom: 3px; display: inline-block; }\n.dz-fitting-room-item .du.late { border-bottom-color: var(--destructive); color: var(--destructive); }\n.dz-fitting-room-item h1 { font-family: var(--pv-display); font-weight: 500; font-size: 32px; line-height: 1.18; letter-spacing: -.012em; margin: 12px 0 10px; }\n.dz-fitting-room-item .mt { display: flex; gap: 8px; margin: 0 0 14px; }\n.dz-fitting-room-item .sz, .dz-fitting-room-item .cn { text-transform: uppercase; letter-spacing: .15em; font-size: 10.5px; font-weight: 600; background: var(--secondary); color: var(--muted-foreground); border-radius: 4px; padding: 5px 9px; }\n.dz-fitting-room-item .ds { font-size: 14.5px; line-height: 1.6; margin: 0 0 20px; max-width: 60ch; }\n.dz-fitting-room-item .pz { margin-bottom: 18px; }\n.dz-fitting-room-item .fig { font-family: var(--pv-display); font-weight: 500; font-size: 48px; line-height: 1; letter-spacing: -.02em; }\n.dz-fitting-room-item .bs { display: block; color: var(--muted-foreground); margin-top: 6px; }\n.dz-fitting-room-item .pri { background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 4px; padding: 13px 24px; font: inherit; font-size: 15px; cursor: pointer; }\n.dz-fitting-room-item .ex { padding-top: 20px; border-top: 1px solid var(--border); }\n.dz-fitting-room-item .stp { display: flex; align-items: center; gap: 0; margin-bottom: 16px; }\n.dz-fitting-room-item .stp button { width: 38px; height: 38px; background: var(--secondary); color: var(--foreground); border: 1px solid var(--border); border-radius: 4px; font: inherit; font-size: 18px; cursor: pointer; }\n.dz-fitting-room-item .dnum { width: 120px; text-align: center; }\n\n.dz-fitting-room-item .rail { display: grid; grid-template-columns: repeat(14, 1fr); border-bottom: 1px solid var(--border); position: relative; }\n.dz-fitting-room-item .rail .dy { padding: 8px 0 12px; text-align: center; border-right: 1px solid var(--border); }\n.dz-fitting-room-item .rail .dy:last-child { border-right: 0; }\n.dz-fitting-room-item .rail .di { text-transform: uppercase; letter-spacing: .15em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); display: block; }\n.dz-fitting-room-item .rail .dn { font-family: var(--pv-mono); font-size: 13px; display: block; margin-top: 4px; }\n.dz-fitting-room-item .rail .today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); }\n.dz-fitting-room-item .blocks { position: relative; height: 96px; margin-top: 8px; }\n.dz-fitting-room-item .bk { position: absolute; height: 26px; background: var(--primary); color: var(--primary-foreground); border-radius: 4px; font-family: var(--pv-mono); font-size: 13px; font-size: 11px; display: flex; align-items: center; padding: 0 8px; overflow: hidden; white-space: nowrap; }\n.dz-fitting-room-item .bk.late { background: var(--destructive); color: var(--primary-foreground); }\n.dz-fitting-room-item .mini .dy { padding: 6px 0 8px; }\n.dz-fitting-room-item .short { height: 34px; }\n.dz-fitting-room-item .nt { font-size: 13.5px; line-height: 1.6; color: var(--muted-foreground); margin: 14px 0 0; max-width: 60ch; }\n.dz-fitting-room-item .hs { padding-top: 20px; border-top: 1px solid var(--border); }\n.dz-fitting-room-item .rw { display: grid; grid-template-columns: 180px 1fr 110px; gap: 20px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 14px; }\n.dz-fitting-room-item .dt2 { color: var(--muted-foreground); }\n.dz-fitting-room-item .cn2 { text-transform: uppercase; letter-spacing: .15em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); text-align: right; }\n@media (prefers-reduced-motion: reduce) { .dz-fitting-room-item *, .dz-fitting-room-item *::before, .dz-fitting-room-item *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }\n",
  "requiredTheme": "/api/v1/themes/fitting-room.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@400;500;600;700&family=Be+Vietnam+Pro:wght@400;500;600;700&family=M+PLUS+1+Code:wght@400;500;600;700&display=swap"
}