{
  "id": "fitting-room-browse",
  "name": "Browse",
  "theme": "fitting-room",
  "category": "Search & Browse",
  "description": "Browsing what is available, sorted by the date each item comes free rather than by newness, with the available-from date first on every card.",
  "layout": "A filter row over a five-up grid of 3:4 cards; each card leads with its available-from date, and unavailable items keep their slot with a later date.",
  "modules": [
    {
      "key": "q",
      "name": "Search row",
      "html": "\n<header class=\"sq\"><input value=\"coats\"><span class=\"ch on\">Available now</span><span class=\"ch\">This week</span><span class=\"ch\">UK 12</span><span class=\"ch\">Outerwear</span><span class=\"ct mn\">31 ITEMS · SORTED BY WHEN THEY COME FREE</span></header>"
    },
    {
      "key": "grid",
      "name": "Available grid",
      "html": "\n<section class=\"gd\">\n<article><span class=\"du\">Free now</span><figure><img src=\"{{ART coat}}\" alt=\"{{ARTALT coat}}\"></figure><h2>Wool overcoat, navy</h2><p class=\"pz2\"><b>£46</b> <span class=\"mn\">14 nights</span></p></article>\n<article><span class=\"du\">Free now</span><figure><img src=\"{{ART rail}}\" alt=\"{{ARTALT rail}}\"></figure><h2>Trench, stone</h2><p class=\"pz2\"><b>£38</b> <span class=\"mn\">14 nights</span></p></article>\n<article><span class=\"du\">Free 14 Mar</span><figure><img src=\"{{ART folded}}\" alt=\"{{ARTALT folded}}\"></figure><h2>Quilted jacket, moss</h2><p class=\"pz2\"><b>£31</b> <span class=\"mn\">14 nights</span></p></article>\n<article><span class=\"du\">Free 17 Mar</span><figure><img src=\"{{ART room}}\" alt=\"{{ARTALT room}}\"></figure><h2>Wool cape, oatmeal</h2><p class=\"pz2\"><b>£52</b> <span class=\"mn\">14 nights</span></p></article>\n<article><span class=\"du\">Free 21 Mar</span><figure><img src=\"{{ART hero}}\" alt=\"{{ARTALT hero}}\"></figure><h2>Leather blouson, tan</h2><p class=\"pz2\"><b>£58</b> <span class=\"mn\">14 nights</span></p></article>\n</section>"
    },
    {
      "key": "note",
      "name": "Sort note",
      "html": "\n<footer class=\"sn\"><span class=\"k\">Why nothing is hidden</span><p>Items that are out stay in the grid with the date they come free, in the same place a date always sits. Filtering them away would make the catalogue look smaller than it is and would hide the thing you might want to wait for.</p></footer>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "fitting-room-browse",
    "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-browse.json",
  "structure": "A filter row over a five-up grid of 3:4 cards; each card leads with its available-from date, and unavailable items keep their slot with a later date.",
  "html": "<div class=\"dz dz-fitting-room-browse\" data-design=\"fitting-room-browse\" data-theme=\"fitting-room\">\n<section class=\"dz-mod\" data-mod=\"q\" aria-label=\"Search row\">\n<header class=\"sq\"><input value=\"coats\"><span class=\"ch on\">Available now</span><span class=\"ch\">This week</span><span class=\"ch\">UK 12</span><span class=\"ch\">Outerwear</span><span class=\"ct mn\">31 ITEMS · SORTED BY WHEN THEY COME FREE</span></header></section>\n<section class=\"dz-mod\" data-mod=\"grid\" aria-label=\"Available grid\">\n<section class=\"gd\">\n<article><span class=\"du\">Free now</span><figure><img src=\"https://designlookbook.dev/assets/img/fitting-room-coat.webp\" alt=\"A single blue coat hanging against a mauve wall\"></figure><h2>Wool overcoat, navy</h2><p class=\"pz2\"><b>£46</b> <span class=\"mn\">14 nights</span></p></article>\n<article><span class=\"du\">Free now</span><figure><img src=\"https://designlookbook.dev/assets/img/fitting-room-rail.webp\" alt=\"Hangers close together on a metal rail seen end-on\"></figure><h2>Trench, stone</h2><p class=\"pz2\"><b>£38</b> <span class=\"mn\">14 nights</span></p></article>\n<article><span class=\"du\">Free 14 Mar</span><figure><img src=\"https://designlookbook.dev/assets/img/fitting-room-folded.webp\" alt=\"Folded garments stacked on a pale shelf\"></figure><h2>Quilted jacket, moss</h2><p class=\"pz2\"><b>£31</b> <span class=\"mn\">14 nights</span></p></article>\n<article><span class=\"du\">Free 17 Mar</span><figure><img src=\"https://designlookbook.dev/assets/img/fitting-room-room.webp\" alt=\"A fitting room corner with a curtain and a mirror edge\"></figure><h2>Wool cape, oatmeal</h2><p class=\"pz2\"><b>£52</b> <span class=\"mn\">14 nights</span></p></article>\n<article><span class=\"du\">Free 21 Mar</span><figure><img src=\"https://designlookbook.dev/assets/img/fitting-room-hero.webp\" alt=\"A clothing rail against a mauve wall in window light\"></figure><h2>Leather blouson, tan</h2><p class=\"pz2\"><b>£58</b> <span class=\"mn\">14 nights</span></p></article>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"note\" aria-label=\"Sort note\">\n<footer class=\"sn\"><span class=\"k\">Why nothing is hidden</span><p>Items that are out stay in the grid with the date they come free, in the same place a date always sits. Filtering them away would make the catalogue look smaller than it is and would hide the thing you might want to wait for.</p></footer></section>\n</div>",
  "css": "\n.dz-fitting-room-browse { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 24px 28px 28px; }\n.dz-fitting-room-browse .k { text-transform: uppercase; letter-spacing: .15em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); display: block; margin-bottom: 8px; }\n.dz-fitting-room-browse .mn { font-family: var(--pv-mono); font-size: 13px; }\n.dz-fitting-room-browse .sq { display: flex; align-items: center; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--border); margin-bottom: 22px; }\n.dz-fitting-room-browse .sq input { width: 240px; background: var(--card); border: 1px solid var(--border); border-radius: 4px; color: var(--foreground); font: inherit; font-size: 15px; padding: 10px 12px; margin-right: 10px; }\n.dz-fitting-room-browse .sq input:focus { outline: none; border-color: var(--primary); }\n.dz-fitting-room-browse .ch { text-transform: uppercase; letter-spacing: .15em; font-size: 10.5px; font-weight: 600; border: 1px solid var(--border); border-radius: 4px; padding: 8px 12px; color: var(--muted-foreground); }\n.dz-fitting-room-browse .ch.on { border-color: var(--primary); color: var(--primary); }\n.dz-fitting-room-browse .ct { color: var(--muted-foreground); margin-left: auto; font-size: 11px; }\n.dz-fitting-room-browse .gd { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }\n.dz-fitting-room-browse .gd article { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 14px; }\n\n.dz-fitting-room-browse .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-browse .du.late { border-bottom-color: var(--destructive); color: var(--destructive); }\n.dz-fitting-room-browse figure { margin: 12px 0 10px; }\n.dz-fitting-room-browse figure img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; border-radius: 8px; filter: var(--img-filter); }\n.dz-fitting-room-browse h2 { font-family: var(--pv-display); font-weight: 500; font-size: 18px; line-height: 1.24; margin: 0 0 6px; }\n.dz-fitting-room-browse .pz2 { margin: 0; font-size: 14px; }\n.dz-fitting-room-browse .pz2 b { font-family: var(--pv-display); font-weight: 500; font-size: 20px; font-weight: 500; }\n.dz-fitting-room-browse .pz2 .mn { color: var(--muted-foreground); font-size: 11.5px; }\n.dz-fitting-room-browse .sn { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }\n.dz-fitting-room-browse .sn p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted-foreground); max-width: 66ch; }\n@media (prefers-reduced-motion: reduce) { .dz-fitting-room-browse *, .dz-fitting-room-browse *::before, .dz-fitting-room-browse *::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"
}