{
  "id": "v1-bs-5352",
  "long_id": "v1.bootstrap-era.shop.s05.p03.t05.u02",
  "name": "Framework default shop",
  "era": {
    "slug": "bootstrap-era",
    "code": "bs",
    "name": "Framework default",
    "years": [
      2011,
      2014
    ],
    "description": "The framework look of 2011 to 2014: a dark or white bar across the top, a big grey hero block, rows of three columns, wells and bordered panels, blue primary and coloured status buttons, Helvetica at 14px."
  },
  "archetype": "shop",
  "mode": "mix",
  "viewport": {
    "width": 1280,
    "fluid": false,
    "responsive": true
  },
  "summary": "The framework look of 2011 to 2014: pages assembled from one widely used front-end toolkit and left close to its defaults, with a bar across the top, wells, bordered panels, thumbnails and coloured buttons and labels. This pack is the online shop template of those years in a clean green theme of the kind the theme galleries offered: a white bar under a thick green stripe, pale green-grey strips above it and at the foot, light headings, and larger rounded buttons that stand on a solid lip instead of a gloss. Small shops selling from a catalogue of a few hundred items were built on it.",
  "url": "https://chrono.skin/s/v1-bs-5352",
  "preview_url": "https://chrono.skin/s/v1-bs-5352/specimen.html",
  "files": {
    "STYLE.md": "# Framework default shop\n\n## Summary\n\nThe framework look of 2011 to 2014: pages assembled from one widely used front-end toolkit and left close to its defaults, with a bar across the top, wells, bordered panels, thumbnails and coloured buttons and labels. This pack is the online shop template of those years in a clean green theme of the kind the theme galleries offered: a white bar under a thick green stripe, pale green-grey strips above it and at the foot, light headings, and larger rounded buttons that stand on a solid lip instead of a gloss. Small shops selling from a catalogue of a few hundred items were built on it.\n\n## Layout\n\n- Fixed width: one centred `.ds-container` of `--size-page` (1040px) on a 1280px viewport; the promo strip, the top bar and the footer span the window.\n- Above everything is `.ds-promo`, one centred line on `--fill-bar-alt`. Under it the top bar, `--size-nav` (60px) tall, which scrolls away with the page: brand, pill links, then the search field and the basket button with its count at the right. The current link is a rounded plate.\n- Home page: a `--size-sidebar` (230px) column at the left with the department list (`.ds-sidebar`), a panel, a filter panel and a well; at the right the carousel slide (`.ds-hero`), the `.ds-stat` row of three cells, the `.ds-shelf` heading with sorting buttons, the `.ds-grid` of product thumbnails three across and the pagination. Blocks are `--space-4` apart.\n- Inner pages have no carousel and no department column. They start with the `.ds-breadcrumb` strip, then `.ds-page-header`. A product page continues with `.ds-product` (picture at the left, price and the buying form at the right), then `.ds-tabs` and under them the description in a wide column beside a panel of reviews. Basket and checkout put the `.ds-steps` strip under the page header, then a wide column (alerts and table, or the form in a panel) beside a column of summary panels.\n- Views. The specimen is a seed and garden tool shop with four views. `home` is the shop front described above. `product` is one product with tabs, description and reviews. `basket` is the basket table with alerts, the action row, the open confirmation modal, the order summary and an empty box. `checkout` is the delivery form with its validation states beside the order summary.\n- Responsive: below 980px the links of the bar fold into the menu button at its right (`.ds-menu--nav`) and every row of columns stacks (on the home page the department column moves under the products); below 760px the search field is dropped, the stat cells and the product thumbnails go to one column, the step notes are dropped, the footer columns stack, and a wide table scrolls sideways inside `.ds-table__wrap` while the page itself never does. The fold is a `<details class=\"ds-menu ds-menu--nav\">` whose `.ds-menu__toggle` summary shows three bars (`.ds-menu__bars`); it opens the list of every view as a full row under the bar, and the current view's item has the same darker plate as a current bar link.\n- Spacing scale: `--space-1` 5px (inside labels, between a label and its field), `--space-2` 10px (between adjacent controls, cell padding), `--space-3` 15px (panel padding, the page gutter), `--space-4` 20px (between stacked blocks, well padding), `--space-5` 30px (the gutter between columns, between sections), `--space-6` 40px (above the footer), `--space-7` 60px (the widest padding). Controls are padded by `--space-control-y` and `--space-control-x`.\n- Other sizes: `--size-tile` 130px (thumbnail colour block; the product picture is twice that), `--size-icon` 44px, `--size-swatch` 40px, `--size-qty` 70px, `--size-mark` 30px, `--size-dialog` 520px, `--size-search` 220px.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- One sans-serif family for everything (`--font-body`, `--font-heading`, `--font-ui`: Lato, then Source Sans Pro, Segoe UI). `--font-mono` is for code only.\n- Body is `--text-base` 15px at `--line-body` 1.55 in `--color-text`. Headings are light (`--weight-heading` 300): `--text-h1` 38px, `--text-h2` 28px, `--text-h3` 21px. `--text-display` 52px light with `--display-tracking` -1px is the carousel title only. Prices are bold (`--weight-bold`). `--text-large` 20px is lead text and large buttons; `--text-small` 13px is meta and labels. Buttons and navigation are bold (`--weight-ui` 700) at 15px.\n- Surfaces: white page and panels; `--color-surface-alt`, a faint green grey, for wells, stripes, the stat cells and the breadcrumb; `--color-surface-strong` for panel heading strips. Borders are 1px `--color-border`; `--border-width-strong` (4px) is the rule under a table head and above a total.\n- The bar is white with dark text, and `--fill-bar` draws a 4px stripe of `--color-accent` along its top. The promo strip and the footer are a pale green grey (`--color-bar-alt`) with dark text; the one dark block is `--color-inverse`. Bright green is the primary colour: `--color-button`, `--color-accent`, and a deeper `--color-link` for text. `--color-fill-1` to `--color-fill-4` (green, blue, amber, red) are the product pictures and basket swatches. The carousel slide is on `--fill-inverse`.\n- No gloss and no text shadow. Buttons and inputs stand on a 2px solid lip (`--shadow-control`), which grows on hover and turns inward when pressed; panels have a faint 3px shadow. Labels are pills (`--radius-pill` 12px).\n- Stars of a rating are text in `--color-warning`; the count after them is `--color-text-muted`.\n- Text on fills, the convention every layout and token set of this era keeps:\n  - on `--color-page`, `--color-canvas`, `--color-surface`, `--color-surface-alt` and `--color-surface-strong`: body text `--color-text`, headings `--color-heading`, small titles (panel strip, sidebar heading, h3) `--color-heading-alt`, meta `--color-text-muted`, links `--color-link`. A token set keeps these five fills on one side, all light or all dark;\n  - on the top bar (`--fill-bar`): `--color-bar-text` only. Hover and current items get a plate of `--color-bar-text` mixed into transparent at 9% and 18%, never a second colour;\n  - on the secondary bar (`--fill-bar-alt`): `--color-bar-alt-text`; a link there inherits and is underlined;\n  - on `--fill-inverse`: `--color-inverse-text`, with `opacity` for the quieter line;\n  - on `--color-fill-1` to `--color-fill-4`, `--fill-accent`, `--color-accent-alt`, `--color-success`, `--color-warning` and `--color-danger` used as a fill: `--color-accent-text`;\n  - on `--fill-button`: `--color-button-text`; on `--fill-button-secondary`: `--color-button-secondary-text`;\n  - on `--color-notice`: `--color-notice-text`; on `--color-danger-surface`: `--color-danger`;\n  - the grey count label is `--color-text-muted` with `--color-canvas` text.\n- Status colours: `--color-success`, `--color-warning`, `--color-danger` and `--color-accent-alt` (info) fill buttons and labels; mixed at 20% into `--color-surface` they tint the heading strip of a contextual panel, whose text stays `--color-heading`.\n- `--fill-button` is either the flat `--color-button` or a translucent gloss laid over it; status buttons reuse it with `background-color` set to their own colour. Button and brand tile borders are `--color-shadow`. Inputs and wells take `--shadow-control-pressed`; buttons and the brand tile take `--shadow-control`.\n- Links are not underlined at rest and underline on hover; footer links are underlined.\n- One-off shades made with `color-mix()` because the vocabulary has no token: the bar's bottom edge (`--color-bar-text` at 22% over `--color-bar`), bar plates (9% and 18%), the hovered secondary button (its text colour at 12% into its fill), contextual panel strips (20%) and their borders (45% into `--color-border`), notice borders (the text colour at 25% into the notice fill).\n\n## Components\n\n- `.ds-page`: on `<body>`. Sets the font, the text colour and `--fill-page`. `.ds-main` is the container with `--space-4` above its first block.\n- `.ds-promo`: the thin strip above the bar with one line of news in `--color-bar-alt-text`; `.ds-promo__link` is bold and underlined.\n- `.ds-nav`: the tall bar, on `--fill-bar`, not fixed. `.ds-nav__inner` holds the `.ds-brand`, `.ds-nav__links` with `.ds-nav__link` pills (current: `is-current`, an 18% plate with `--radius-control`) and `.ds-nav__aside` at the right for a `.ds-nav__search` field and the basket button with a `.ds-badge--quiet` count. In the specimen the current item is marked by the view that is showing, with one `:has()` rule per view; a project sets `is-current` itself.\n- `.ds-hero`: the shop front's carousel, and a `.ds-carousel` at the same time: a block on `--fill-inverse` with `--radius-page` whose slides are `.ds-carousel__slide.ds-hero__slide`, each holding `.ds-hero__copy` (`.ds-hero__title` at `--text-display`, `.ds-hero__lead`, `.ds-hero__actions` with one large primary and at most one large secondary button) beside a faint `.ds-hero__art` drawing. The first slide carries the page's `h1`; the others use `h2` with the same class.\n- `.ds-stat`: the row of summary figures, here three grey cells. `.ds-stat` is the row; each `.ds-stat__item` is a `.ds-stat__icon` in `--color-heading-alt` beside a `.ds-stat__figure` (`--text-h2`) over a small grey `.ds-stat__label`.\n- `.ds-shelf`: the row over a grid: a `.ds-title` at the left and a `.ds-buttongroup` of sorting buttons at the right.\n- `.ds-grid`: product thumbnails three across. Each `.ds-grid__cell` is a bordered box with `--space-1` padding holding a `.ds-grid__tile` (`--color-fill-1`; `--2`, `--3`, `--4` for the other fills) with a `.ds-grid__icon` and an optional `.ds-grid__flag` label in its corner, then a `.ds-grid__caption` with the bold `.ds-grid__price` at the right of the `.ds-grid__title` link, a `.ds-grid__text` line and a `.ds-rating`, and a `.ds-grid__foot` with a small primary button and a link. `.ds-rating` is a row of stars with a grey `.ds-rating__count`.\n- `.ds-sidebar`: a list group: a bordered box with a `.ds-sidebar__title` strip over a `.ds-sidebar__list` of full-width `.ds-sidebar__link` rows divided by faint rules; `is-current` is filled with `--fill-accent`. `.ds-sidebar__count` is a small number at the right of a row.\n- `.ds-product`: the head of a product page: `.ds-product__art` with the `.ds-product__picture` and a `.ds-product__thumbs` row of four `.ds-product__thumb` (`is-current` for the one shown), beside `.ds-product__buy` with the bold `.ds-product__price` (and a struck-through `.ds-product__was`), labels, text and the `.ds-product__form` well holding a `.ds-product__qty` field and two large buttons.\n- `.ds-item`: a basket line inside a table cell: an `.ds-item__swatch` square (`--2` to `--4`) beside a bold `.ds-item__name` link and a grey `.ds-item__meta`. `.ds-table__qty` is the narrow quantity input; rows in `tfoot` are bold totals under a strong rule.\n- `.ds-steps`: where the buyer is on the way to paying: joined `.ds-steps__step` segments with a small `.ds-steps__note`; `is-done` is in body colour, `is-current` is filled with `--fill-accent`.\n- `.ds-summary`: label and amount on one line, in a panel: `.ds-summary__row`, and `--total` for the bold last row under a strong rule.\n- Validation: besides `is-error`, a field and its input take `is-success` (label and border in `--color-success`) with a `.ds-form__ok` line.\n- `.ds-container`: the centred column, `--size-page` wide plus a `--space-3` gutter each side. `.ds-row` lays `.ds-col` columns side by side with a `--space-5` gutter; `.ds-col--wide` takes two shares, `.ds-col--side` is `--size-sidebar` wide, `.ds-col--stack` stacks blocks `--space-4` apart and `.ds-grow` on its last block makes both columns end on one line (with `.ds-row--level`); `.ds-row--flush` drops the bottom margin. `.ds-title` is a section heading (`--small` for h3 size) with a muted `.ds-title__small`; `.ds-lead` is a paragraph at `--text-large`; `.ds-muted` greys a phrase; `.ds-spaced` puts `--space-4` under a block; `.ds-nowrap` keeps a date on one line; `.ds-rule` is a faint horizontal rule.\n- `.ds-well`: the inset box (`--color-surface-alt`, faint border, `--shadow-control-pressed`) for an aside. `.ds-figure` is a placeholder picture with its size written on it (`--tall` doubles the height); replace it with a real picture. `.ds-code` is a block of code.\n- `.ds-brand`: the site's mark and name, first in the top bar. `.ds-brand__mark` is a `--size-mark` tile dressed like the primary button (`--fill-button`, `--color-button-text`, a `--color-shadow` border, `--radius-control`, `--shadow-control`) holding the mark as inline SVG; `.ds-brand__name` is the name in the heading font at `--text-large` in `--color-bar-text`. The name and the mark are placeholders for the installing project's own name and logo.\n- `.ds-page-header`: head of an inner page, used instead of `.ds-hero`: `.ds-page-header__copy` with `.ds-page-header__title` (`--text-h1`) and one grey `.ds-page-header__text` line at `--text-large`, `.ds-page-header__actions` at the right, a faint rule under it all. It follows the breadcrumb.\n- `.ds-prose`: running text: h1, h2, h3 (in `--color-heading-alt`), p, lists, `strong`, and inline `code` in `--color-danger` on a faint chip. `.ds-prose__lead` for the first paragraph.\n- `.ds-link`: text link. States `is-visited`, `is-hover` (darker and underlined), `is-active`, `is-focus`. `--quiet` is grey for meta. `.ds-linkrow` lays links in a row.\n- `.ds-button`: the primary button on `--fill-button` with a translucent dark border and `--radius-control`. Variants: `--secondary` (the pale default button; the usual choice), `--danger` (destructive), `--success`, `--warning`, `--info`, `--large`, `--small`, `--block` (full width). States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttonrow` spaces buttons `--space-2` apart; `.ds-buttongroup` joins small buttons into one strip.\n- `.ds-form`: vertical form. `.ds-form__row` puts fields side by side; `.ds-form__field` wraps a bold `.ds-form__label` and one of `.ds-form__input`, `.ds-form__select`, `.ds-form__textarea` (`.ds-form__input--small` in bars). Error: `is-error` on the field and the input plus `.ds-form__error`. `.ds-form__hint`, `.ds-form__check` with `.ds-form__checkbox`. `.ds-form__actions` is the grey strip that closes a form inside a panel; `--flush` removes the gap when the form wraps a panel body and its action strip.\n- `.ds-table`: striped data table: a rule above every row, odd rows on `--color-surface-alt`, a `--border-width-strong` rule under the bold head. `--bordered` adds the outer box and vertical rules. `.ds-table__num` right-aligns numbers; `.ds-table__actions` is a right-aligned cell for buttons. Wrap it in `.ds-table__wrap` so that it scrolls on its own in a narrow window; `.ds-table__foot` is the row under it for the pagination and a legend.\n- `.ds-list`: rows divided by faint rules. `.ds-list__item` holds a bold link `.ds-list__title`, `.ds-list__text` and small grey `.ds-list__meta`.\n- `.ds-panel`: bordered box with `--radius-panel` and `--shadow-panel`: a tinted `.ds-panel__title` strip (a label may float right in it), `.ds-panel__body`, optional grey `.ds-panel__foot`. Contextual variants colour the strip and the border: `--primary`, `--success`, `--warning`, `--danger`, `--info`.\n- `.ds-tabs`: boxed tabs standing on a rule. `.ds-tabs__tab` is a link; `is-current` has a border on three sides, `--color-canvas` behind it and body-coloured text. A count label may follow the text.\n- `.ds-badge`: the small bold label on `--fill-accent` with `--radius-pill`. Variants: `--info`, `--success`, `--warning`, `--danger`, all with `--color-accent-text`; `--quiet` is the grey count. `.ds-badgerow` for several.\n- `.ds-notice`: the alert: a tinted box (`--color-notice`, `--color-notice-text`) with a 1px border of the same hue; `--error` uses `--color-danger-surface` and `--color-danger`. `.ds-notice__title` for the bold lead-in. `.ds-noticerow` stacks notices.\n- `.ds-pagination`: joined bordered boxes of `.ds-pagination__link`; `is-current` is filled with `--fill-accent`, `is-disabled` is grey.\n- `.ds-breadcrumb`: a grey rounded strip of `.ds-breadcrumb__item` separated by slashes; the last item is `.ds-breadcrumb__current`.\n- `.ds-dialog`: the modal, shown open: a `--color-overlay` backdrop block centring `.ds-dialog__box` (bordered, `--radius-page`, `--shadow-dialog`) with `.ds-dialog__head` (`.ds-dialog__title`, `.ds-dialog__close`), `.ds-dialog__body`, and a grey `.ds-dialog__actions` strip with the confirming button last.\n- `.ds-empty`: a centred message in a well: `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one `.ds-button--secondary`. It stands where a list would be.\n- `.ds-footer`: a full-width block on `--fill-bar-alt`: `.ds-footer__inner` holds `.ds-footer__cols`, three columns each with a `.ds-footer__title` over `.ds-footer__links` of underlined `.ds-footer__link`, then a small `.ds-footer__text` line above a faint rule.\n\n- `.ds-menu`: a drop-down under a navigation item. The list item carries `.ds-menu`, its link `.ds-nav__link.ds-menu__toggle` (which adds the small caret), and the list `.ds-menu__list` of `.ds-menu__item` links with `.ds-menu__divider` rules between groups; `.ds-menu--end` hangs the list from the right edge of its item. It opens on hover and on keyboard focus (`.is-open` shows it statically) as a sheet on `--fill-panel` hanging from the bar, with the accent fill on the hovered item. `.ds-menu--nav` is the same component as the bar's fold: a `<details>` whose `.ds-menu__toggle` is the bordered button with three `.ds-menu__bars`; below 980px the row of links is hidden and this button opens them as a stack inside the bar, in the bar's own colours.\n- `.ds-menu--nav`: the phone navigation. A `<details class=\"ds-menu ds-menu--nav\">` placed in the bar after the links; hidden above 980px, where `.ds-nav__links` shows. Its `.ds-menu__toggle` summary shows three bars (`.ds-menu__bars`), and the list opens in the flow as a full row under the bar, one `.ds-menu__item` per view (a divider and the call to action may follow), the current one on a darker plate.\n- `.ds-accordion`: stacked groups for questions and settings that open one at a time. Each group is a `<details class=\"ds-accordion__item\">` with a `.ds-accordion__head` summary (the panel title strip with a small triangle) and a `.ds-accordion__body`. Give the groups one `name` so that opening one closes the others.\n- `.ds-tooltip`: a hint on hover or focus. The trigger carries `.ds-tooltip` and `tabindex=\"0\"` and holds a `.ds-tooltip__tip`: a small bubble in `--color-inverse` with `--color-inverse-text` and an arrow, above the trigger. `.ds-tooltip--start` aligns the bubble with the trigger's left edge and `.ds-tooltip--end` with its right edge (use them near the edges of a column, so that the bubble stays inside a narrow window), `.ds-tooltip--plain` drops the underline for a badge or button, `.is-open` shows it statically.\n- `.ds-carousel`: a block on the inverse fill with one `.ds-carousel__slide` showing, round `.ds-carousel__arrow` labels at the sides (`--prev`, `--next`) and `.ds-carousel__dots` below. It works without script: one hidden radio button `.ds-carousel__pick` per slide comes first, and the arrows and each `.ds-carousel__dot` are labels for them. Up to three slides; a slide holds a `.ds-carousel__title`, a `.ds-carousel__text` and, for a quotation, a `.ds-carousel__by` line.\n- `.ds-progress`: a sunken track holding a `.ds-progress__bar` in the primary button fill. The bar's length is one of `--20`, `--40`, `--60`, `--80`, `--100`; `--success`, `--warning` and `--danger` recolour it; `.ds-progress--small` is the thin form inside a panel or a row. `.ds-progress__label` is the line of small text above it.\n- `.ds-avatar`: a person's or account's initial on a `--color-fill-1` square with `--color-accent-text` (`--2` to `--4` take the other fills, `--small` is the size of the mark, `--round` a circle). `.ds-person` sets one beside a `.ds-person__body` of name and meta text.\n\n## Never\n\n- `content-width <= 1040px`: content stays in the fixed centred container.\n- `font-families <= 2`: one sans-serif family, plus monospace for code.\n- `font-size >= 13px`: meta text and labels are the smallest.\n- `font-size <= 52px`: the carousel title is the largest text.\n- `font-weight <= 700`: headings are light; bold is the heaviest.\n- `uppercase-text = 0%`: navigation, buttons and headings are in sentence case.\n- `underlined-links <= 20%`: links are underlined only on hover, in the promo strip and in the footer.\n- `text-shadow = none`: text is flat on every fill.\n- `gradient-fills = 0%`: every background is one solid colour.\n- `border-width <= 5px`: borders are 1px; a callout has a 5px left edge.\n- `border-radius <= 10px`: labels are rounded to 10px; controls and boxes have 4px corners, the masthead tile and the modal 6px.\n- `box-shadow-blur <= 15px`: only the modal casts a soft shadow.\n- `animation = none`: nothing moves on its own.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A new box is a `.ds-panel` (border, heading strip, body) or a `.ds-well`; a new action is a `.ds-button`, pale `--secondary` unless it is the one main action of the view; a new status is one of the four status colours with `--color-accent-text` on it. Lay new content out in a `.ds-row` of `.ds-col` columns. Controls take `--radius-control`, boxes `--radius-panel`, labels `--radius-pill`, the largest blocks and the dialog `--radius-page`. Spacing comes from the `--space-*` scale; any one-off shade is a `color-mix()` of tokens, noted next to the rule. Keep to the text-on-fill convention above, so that the component still reads with another palette of the era.\n",
    "components.css": ":root {\n  --size-page: 1040px;\n  --size-nav: 60px;\n  --size-mark: 30px;\n  --size-search: 220px;\n  --size-sidebar: 230px;\n  --size-tile: 130px;\n  --size-icon: 44px;\n  --size-swatch: 40px;\n  --size-qty: 70px;\n  --size-dialog: 520px;\n  --space-control-y: 7px;\n  --space-control-x: 14px;\n  --space-1: 5px;\n  --space-2: 10px;\n  --space-3: 15px;\n  --space-4: 20px;\n  --space-5: 30px;\n  --space-6: 40px;\n  --space-7: 60px;\n}\n\n/* shell */\n.ds-page {\n  margin: 0;\n  padding: 0;\n  background: var(--fill-page);\n  color: var(--color-text);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n  box-sizing: border-box;\n}\n\n/* views: one screen of the example site shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n/* container, rows and columns: the fixed centred column and its equal columns */\n.ds-container {\n  max-width: calc(var(--size-page) + var(--space-3) * 2);\n  margin: 0 auto;\n  padding: 0 var(--space-3);\n}\n.ds-row {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-5);\n  margin-bottom: var(--space-5);\n}\n.ds-row--level {\n  align-items: stretch;\n}\n.ds-row--flush {\n  margin-bottom: 0;\n}\n.ds-col {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-col--wide {\n  flex: 2 1 0;\n}\n.ds-col--side {\n  flex: 0 0 var(--size-sidebar);\n}\n.ds-col--stack {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n}\n.ds-col--stack > .ds-grow {\n  flex: 1 0 auto;\n}\n.ds-col__text {\n  margin: 0 0 var(--space-3);\n}\n.ds-rule {\n  height: 0;\n  margin: var(--space-5) 0;\n  border: 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-title {\n  margin: 0 0 var(--space-3);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-title--small {\n  font-size: var(--text-h3);\n}\n.ds-title__small {\n  color: var(--color-text-muted);\n  font-size: var(--text-base);\n  font-weight: var(--weight-body);\n}\n.ds-lead {\n  margin: 0 0 var(--space-4);\n  font-size: var(--text-large);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n}\n.ds-muted {\n  color: var(--color-text-muted);\n}\n\n/* well: an inset grey box */\n.ds-well {\n  padding: var(--space-4);\n  background: var(--color-surface-alt);\n  border: var(--border-width) var(--border-style) var(--color-border-muted);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-control-pressed);\n}\n.ds-well > :last-child {\n  margin-bottom: 0;\n}\n\n/* code block */\n.ds-code {\n  display: block;\n  margin: 0 0 var(--space-3);\n  padding: var(--space-2) var(--space-3);\n  overflow-x: auto;\n  background: var(--color-surface-alt);\n  color: var(--color-text);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n  line-height: var(--line-body);\n  white-space: pre;\n}\n\n/* placeholder picture: a grey block with its size written on it */\n.ds-figure {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: var(--size-tile);\n  padding: var(--space-3);\n  background: var(--color-surface-strong);\n  color: var(--color-text-muted);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n  text-align: center;\n}\n\n/* brand: the mark on a button-like tile, then the name */\n.ds-brand {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  margin-right: var(--space-2);\n  color: var(--color-bar-text);\n  text-decoration: none;\n}\n.ds-brand__mark {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  width: var(--size-mark);\n  height: var(--size-mark);\n  background-color: var(--color-button);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  border: var(--border-width) var(--border-style) var(--color-shadow);\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n  display: block;\n  width: 76%;\n  height: 76%;\n}\n.ds-brand__name {\n  color: var(--color-bar-text);\n  font-family: var(--font-heading);\n  font-size: var(--text-large);\n  font-weight: var(--weight-body);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-shadow: var(--shadow-text);\n}\n\n/* typography */\n.ds-prose {\n  color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n  margin: 0 0 var(--space-2);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-prose h1 {\n  font-size: var(--text-h1);\n}\n.ds-prose h2 {\n  font-size: var(--text-h2);\n  margin-top: var(--space-4);\n}\n.ds-prose h3 {\n  font-size: var(--text-h3);\n  margin-top: var(--space-4);\n  color: var(--color-heading-alt);\n}\n.ds-prose > :first-child {\n  margin-top: 0;\n}\n.ds-prose p {\n  margin: 0 0 var(--space-2);\n}\n.ds-prose ul,\n.ds-prose ol {\n  margin: 0 0 var(--space-2);\n  padding-left: var(--space-4);\n}\n.ds-prose strong {\n  font-weight: var(--weight-bold);\n}\n.ds-prose code {\n  padding: 0 var(--space-1);\n  background: var(--color-surface-alt);\n  color: var(--color-danger);\n  border: var(--border-width) var(--border-style) var(--color-border-muted);\n  border-radius: var(--radius-pill);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n}\n.ds-prose a {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration);\n}\n.ds-prose a:hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-prose__lead {\n  font-size: var(--text-large);\n  line-height: var(--line-body);\n}\n.ds-prose > :last-child {\n  margin-bottom: 0;\n}\n\n/* links */\n.ds-link {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration);\n  transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n  color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n  color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n  outline: var(--focus-ring);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited {\n  color: var(--color-link-quiet);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover {\n  color: var(--color-link-hover);\n}\n.ds-linkrow {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-1) var(--space-4);\n  margin: 0;\n}\n\n/* buttons: the primary fill, a pale default, and four status colours */\n.ds-button {\n  display: inline-block;\n  margin: 0;\n  padding: var(--space-control-y) var(--space-control-x);\n  background-color: var(--color-button);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  border: var(--border-width) var(--border-style) var(--color-shadow);\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-control);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-body);\n  text-align: center;\n  text-decoration: none;\n  text-shadow: var(--shadow-text);\n  text-transform: var(--ui-transform);\n  vertical-align: middle;\n  white-space: nowrap;\n  cursor: pointer;\n  transition: var(--transition);\n}\n.ds-button:hover,\n.ds-button.is-hover {\n  background: var(--fill-button-hover);\n  color: var(--color-button-hover-text);\n  box-shadow: var(--shadow-control-hover);\n}\n.ds-button:active,\n.ds-button.is-active {\n  background: var(--fill-button-hover);\n  box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n  outline: var(--focus-ring);\n}\n.ds-button--secondary {\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n  border-color: var(--color-border-strong);\n  text-shadow: none;\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover,\n.ds-button--secondary:active,\n.ds-button--secondary.is-active {\n  background: linear-gradient(color-mix(in srgb, var(--color-button-secondary) 88%, var(--color-button-secondary-text)), color-mix(in srgb, var(--color-button-secondary) 88%, var(--color-button-secondary-text)));\n  color: var(--color-button-secondary-text);\n}\n.ds-button--danger {\n  background: var(--fill-button);\n  background-color: var(--color-danger);\n  color: var(--color-accent-text);\n}\n.ds-button--success {\n  background: var(--fill-button);\n  background-color: var(--color-success);\n  color: var(--color-accent-text);\n}\n.ds-button--info {\n  background: var(--fill-button);\n  background-color: var(--color-accent-alt);\n  color: var(--color-accent-text);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover,\n.ds-button--danger:active,\n.ds-button--danger.is-active {\n  background: var(--fill-button-hover);\n  background-color: var(--color-danger);\n  color: var(--color-accent-text);\n}\n.ds-button--success:hover,\n.ds-button--success.is-hover,\n.ds-button--success:active,\n.ds-button--success.is-active {\n  background: var(--fill-button-hover);\n  background-color: var(--color-success);\n  color: var(--color-accent-text);\n}\n.ds-button--warning:hover,\n.ds-button--warning.is-hover,\n.ds-button--warning:active,\n.ds-button--warning.is-active {\n  background: var(--fill-button-hover);\n  background-color: var(--color-warning);\n  color: var(--color-accent-text);\n}\n.ds-button--info:hover,\n.ds-button--info.is-hover,\n.ds-button--info:active,\n.ds-button--info.is-active {\n  background: var(--fill-button-hover);\n  background-color: var(--color-accent-alt);\n  color: var(--color-accent-text);\n}\n.ds-button--large {\n  padding: var(--space-2) var(--space-4);\n  border-radius: var(--radius-page);\n  font-size: var(--text-large);\n}\n.ds-button--small {\n  padding: calc(var(--space-control-y) / 3) var(--space-2);\n  font-size: var(--text-small);\n}\n.ds-button--block {\n  display: block;\n  width: 100%;\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n  background: var(--color-disabled);\n  color: var(--color-disabled-text);\n  border-color: var(--color-border);\n  box-shadow: none;\n  text-shadow: none;\n  cursor: default;\n}\n.ds-buttonrow {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2);\n}\n.ds-buttongroup {\n  display: inline-flex;\n  vertical-align: middle;\n}\n.ds-buttongroup > .ds-button {\n  border-radius: 0;\n}\n.ds-buttongroup > .ds-button + .ds-button {\n  margin-left: calc(var(--border-width) * -1);\n}\n.ds-buttongroup > .ds-button:first-child {\n  border-top-left-radius: var(--radius-control);\n  border-bottom-left-radius: var(--radius-control);\n}\n.ds-buttongroup > .ds-button:last-child {\n  border-top-right-radius: var(--radius-control);\n  border-bottom-right-radius: var(--radius-control);\n}\n\n/* form */\n.ds-form {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-3);\n  margin: 0;\n  color: var(--color-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n}\n.ds-form--flush {\n  gap: 0;\n}\n.ds-form__row {\n  display: flex;\n  gap: var(--space-3);\n}\n.ds-form__field {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-form__label {\n  color: var(--color-text);\n  font-weight: var(--weight-bold);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n  width: 100%;\n  margin: 0;\n  padding: var(--space-control-y) var(--space-control-x);\n  background: var(--fill-input);\n  color: var(--color-input-text);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-control-pressed);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n  transition: var(--transition);\n}\n.ds-form__input--small {\n  padding: calc(var(--space-control-y) / 2) var(--space-2);\n}\n.ds-form__textarea {\n  min-height: var(--space-7);\n  resize: vertical;\n}\n.ds-form__input::placeholder,\n.ds-form__textarea::placeholder {\n  color: var(--color-text-muted);\n  opacity: 1;\n}\n.ds-form__input:focus,\n.ds-form__select:focus,\n.ds-form__textarea:focus,\n.ds-form__input.is-focus {\n  border-color: var(--color-focus);\n  outline: var(--focus-ring);\n}\n.ds-form__input.is-error {\n  border-color: var(--color-danger);\n}\n.ds-form__field.is-error .ds-form__label {\n  color: var(--color-danger);\n}\n.ds-form__error {\n  color: var(--color-danger);\n  font-size: var(--text-small);\n}\n.ds-form__hint {\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-form__check {\n  display: flex;\n  align-items: baseline;\n  gap: var(--space-2);\n}\n.ds-form__checkbox {\n  margin: 0;\n  accent-color: var(--color-button);\n}\n.ds-form__actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n  margin-top: var(--space-1);\n  padding: var(--space-3) var(--space-4);\n  background: var(--color-surface-alt);\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n  border-radius: 0 0 var(--radius-panel) var(--radius-panel);\n}\n\n/* table: striped rows, a rule above every row, a strong rule under the head */\n.ds-table {\n  width: 100%;\n  border-collapse: collapse;\n  background: var(--color-surface);\n  color: var(--color-text);\n}\n.ds-table th,\n.ds-table td {\n  padding: var(--space-2);\n  text-align: left;\n  vertical-align: middle;\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-table thead th {\n  color: var(--color-heading);\n  border-top: 0;\n  border-bottom: var(--border-width-strong) var(--border-style) var(--color-border);\n  font-weight: var(--weight-bold);\n  vertical-align: bottom;\n}\n.ds-table tbody th {\n  font-weight: var(--weight-body);\n}\n.ds-table tbody tr:nth-child(odd) td,\n.ds-table tbody tr:nth-child(odd) th {\n  background: var(--color-surface-alt);\n}\n.ds-table .ds-table__num {\n  text-align: right;\n  font-variant-numeric: tabular-nums;\n}\n.ds-table .ds-table__actions {\n  text-align: right;\n  white-space: nowrap;\n}\n.ds-table__wrap {\n  overflow-x: auto;\n}\n.ds-table__foot {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  margin-top: var(--space-3);\n}\n\n/* list: media rows divided by faint rules */\n.ds-list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-list__item {\n  padding: var(--space-2) 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item:first-child {\n  padding-top: 0;\n  border-top: 0;\n}\n.ds-list__item:last-child {\n  padding-bottom: 0;\n}\n.ds-list__title {\n  display: block;\n  color: var(--color-link);\n  font-size: var(--text-base);\n  font-weight: var(--weight-bold);\n  text-decoration: var(--link-decoration);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-list__text {\n  display: block;\n  margin: 0;\n}\n.ds-list__meta {\n  display: block;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n/* panel: a bordered box with a tinted heading strip */\n.ds-panel {\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n  margin: 0;\n  padding: var(--space-2) var(--space-3);\n  background: var(--color-surface-strong);\n  color: var(--color-heading-alt);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: calc(var(--radius-panel) - var(--border-width)) calc(var(--radius-panel) - var(--border-width)) 0 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-base);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-body);\n}\n.ds-panel__title .ds-badge {\n  float: right;\n}\n.ds-panel__body {\n  padding: var(--space-3);\n}\n.ds-panel__body > p {\n  margin: 0 0 var(--space-2);\n}\n.ds-panel__body > :last-child {\n  margin-bottom: 0;\n}\n.ds-panel__foot {\n  padding: var(--space-2) var(--space-3);\n  background: var(--color-surface-alt);\n  color: var(--color-text-muted);\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: 0 0 calc(var(--radius-panel) - var(--border-width)) calc(var(--radius-panel) - var(--border-width));\n  font-size: var(--text-small);\n}\n.ds-panel--primary {\n  border-color: var(--color-button);\n}\n.ds-panel--primary > .ds-panel__title {\n  background-color: var(--color-button);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  border-bottom-color: var(--color-button);\n  text-shadow: var(--shadow-text);\n}\n.ds-panel--success {\n  border-color: color-mix(in srgb, var(--color-success) 45%, var(--color-border));\n}\n.ds-panel--success > .ds-panel__title {\n  background: color-mix(in srgb, var(--color-success) 20%, var(--color-surface));\n  color: var(--color-heading);\n  border-bottom-color: color-mix(in srgb, var(--color-success) 45%, var(--color-border));\n}\n.ds-panel.ds-grow {\n  display: flex;\n  flex-direction: column;\n}\n.ds-panel.ds-grow > .ds-panel__body {\n  flex: 1 0 auto;\n}\n\n/* tabs: boxed tabs standing on a rule */\n.ds-tabs {\n  display: flex;\n  gap: var(--border-width-strong);\n  margin: 0 0 var(--space-4);\n  padding: 0;\n  list-style: none;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n}\n.ds-tabs__tab {\n  display: block;\n  margin-bottom: calc(var(--border-width) * -1);\n  padding: var(--space-2) var(--space-3);\n  color: var(--color-link);\n  border: var(--border-width) var(--border-style) transparent;\n  border-radius: var(--radius-control) var(--radius-control) 0 0;\n  text-decoration: var(--link-decoration-quiet);\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n  transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n  background: var(--color-surface-strong);\n  border-color: var(--color-surface-strong) var(--color-surface-strong) var(--color-border);\n}\n.ds-tabs__tab.is-current {\n  background: var(--color-canvas);\n  color: var(--color-text);\n  border-color: var(--color-border) var(--color-border) var(--color-canvas);\n}\n.ds-tabs__tab .ds-badge {\n  margin-left: var(--space-1);\n}\n\n/* badge: the small label; status colours and a count */\n.ds-badge {\n  display: inline-block;\n  padding: 0 var(--space-1);\n  background-color: var(--color-accent);\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  border-radius: var(--radius-pill);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-body);\n  text-shadow: var(--shadow-text);\n  vertical-align: baseline;\n  white-space: nowrap;\n}\n.ds-badge--quiet {\n  background: var(--color-text-muted);\n  color: var(--color-canvas);\n  text-shadow: none;\n}\n.ds-badge--info {\n  background: var(--color-accent-alt);\n}\n.ds-badge--success {\n  background: var(--color-success);\n}\n.ds-badge--warning {\n  background: var(--color-warning);\n}\n.ds-badge--danger {\n  background: var(--color-danger);\n}\n.ds-badgerow {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-1);\n}\n\n/* notice: the tinted alert box */\n.ds-notice {\n  margin: 0;\n  padding: var(--space-2) var(--space-3);\n  background: var(--color-notice);\n  color: var(--color-notice-text);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-notice-text) 25%, var(--color-notice));\n  border-radius: var(--radius-panel);\n}\n.ds-notice--error {\n  background: var(--color-danger-surface);\n  color: var(--color-danger);\n  border-color: color-mix(in srgb, var(--color-danger) 25%, var(--color-danger-surface));\n}\n.ds-notice__title {\n  font-weight: var(--weight-bold);\n}\n.ds-noticerow {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n  margin-bottom: var(--space-4);\n}\n\n/* pagination: joined boxes */\n.ds-pagination {\n  display: inline-flex;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-panel);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n}\n.ds-pagination__link {\n  display: block;\n  margin-left: calc(var(--border-width) * -1);\n  padding: var(--space-control-y) var(--space-control-x);\n  background: var(--color-surface);\n  color: var(--color-link);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  text-decoration: var(--link-decoration-quiet);\n  transition: var(--transition);\n}\n/* The double arrows at the two ends are drawn, two angles each. */\n.ds-pagination > li:first-child .ds-pagination__link::before,\n.ds-pagination > li:first-child .ds-pagination__link::after,\n.ds-pagination > li:last-child .ds-pagination__link::before,\n.ds-pagination > li:last-child .ds-pagination__link::after {\n  content: \"\";\n  display: inline-block;\n  width: calc(var(--text-base) * 0.4);\n  height: calc(var(--text-base) * 0.4);\n  border-left: calc(var(--space-2) / 4) solid currentColor;\n  border-bottom: calc(var(--space-2) / 4) solid currentColor;\n  rotate: 45deg;\n  translate: 25% 0;\n  vertical-align: calc(var(--text-base) * 0.12);\n}\n.ds-pagination > li:last-child .ds-pagination__link::before,\n.ds-pagination > li:last-child .ds-pagination__link::after {\n  rotate: -135deg;\n  translate: -25% 0;\n}\n.ds-pagination > li:first-child .ds-pagination__link {\n  margin-left: 0;\n  border-radius: var(--radius-control) 0 0 var(--radius-control);\n}\n.ds-pagination > li:last-child .ds-pagination__link {\n  border-radius: 0 var(--radius-control) var(--radius-control) 0;\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n  background: var(--color-surface-strong);\n}\n.ds-pagination__link.is-current {\n  position: relative;\n  background-color: var(--color-accent);\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  border-color: var(--color-accent);\n}\n.ds-pagination__link.is-disabled {\n  color: var(--color-disabled-text);\n}\n\n/* breadcrumb: a grey strip with slashes */\n.ds-breadcrumb {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-1);\n  margin: 0 0 var(--space-4);\n  padding: var(--space-2) var(--space-3);\n  list-style: none;\n  background: var(--color-surface-alt);\n  color: var(--color-text-muted);\n  border-radius: var(--radius-panel);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n  content: \"/\";\n  margin-right: var(--space-1);\n  color: var(--color-border-strong);\n}\n.ds-breadcrumb__current {\n  color: var(--color-text-muted);\n}\n\n/* dialog: the modal, shown open on its backdrop */\n.ds-dialog {\n  display: flex;\n  justify-content: center;\n  padding: var(--space-5) var(--space-3);\n  background: var(--color-overlay);\n  border-radius: var(--radius-panel);\n}\n.ds-dialog__box {\n  width: 100%;\n  max-width: var(--size-dialog);\n  background: var(--fill-panel);\n  color: var(--color-text);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-page);\n  box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--space-2) var(--space-3);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-dialog__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n}\n.ds-dialog__close {\n  color: var(--color-text-muted);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-bold);\n  line-height: 1;\n  text-decoration: none;\n}\n.ds-dialog__close::before {\n  content: \"\";\n  display: inline-block;\n  width: calc(var(--text-h3) * 0.6);\n  height: calc(var(--text-h3) * 0.6);\n  background: currentColor;\n  clip-path: polygon(calc(50% - var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) calc(50% - var(--space-2) / 8), 100% calc(50% - var(--space-2) / 8), 100% calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) calc(50% + var(--space-2) / 8), 0 calc(50% + var(--space-2) / 8), 0 calc(50% - var(--space-2) / 8), calc(50% - var(--space-2) / 8) calc(50% - var(--space-2) / 8));\n  rotate: 45deg;\n  vertical-align: middle;\n}\n.ds-dialog__body {\n  padding: var(--space-3);\n}\n.ds-dialog__body p {\n  margin: 0;\n}\n.ds-dialog__actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: var(--space-1);\n  padding: var(--space-3);\n  background: var(--color-surface-alt);\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: 0 0 calc(var(--radius-page) - var(--border-width)) calc(var(--radius-page) - var(--border-width));\n}\n\n/* empty state: a well with a message and one button */\n.ds-empty {\n  padding: var(--space-5) var(--space-4);\n  background: var(--color-surface-alt);\n  border: var(--border-width) var(--border-style) var(--color-border-muted);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-control-pressed);\n  text-align: center;\n}\n.ds-empty__icon {\n  width: var(--size-icon);\n  height: var(--size-icon);\n  margin-bottom: var(--space-2);\n  color: var(--color-border-strong);\n}\n.ds-empty__title {\n  margin: 0 0 var(--space-1);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n}\n.ds-empty__text {\n  margin: 0 0 var(--space-3);\n  color: var(--color-text-muted);\n}\n\n/* spacing helper: a block that is followed by another */\n.ds-page .ds-spaced {\n  margin-bottom: var(--space-4);\n}\n\n/* page header: title with a rule under it */\n.ds-page-header {\n  display: flex;\n  align-items: flex-end;\n  gap: var(--space-4);\n  margin: 0 0 var(--space-4);\n  padding-bottom: var(--space-3);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-page-header__copy {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-page-header__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-page-header__text {\n  margin: var(--space-1) 0 0;\n  color: var(--color-text-muted);\n  font-size: var(--text-large);\n  line-height: var(--line-body);\n}\n.ds-page-header__actions {\n  display: flex;\n  flex: 0 0 auto;\n  gap: var(--space-2);\n}\n\n/* helper: text that must stay on one line */\n.ds-nowrap {\n  white-space: nowrap;\n}\n\n/* promo: the thin strip above the bar with one line of news */\n.ds-promo {\n  margin: 0;\n  padding: var(--space-1) var(--space-3);\n  background-color: var(--color-bar-alt);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n  font-size: var(--text-small);\n  text-align: center;\n}\n.ds-promo__link {\n  color: inherit;\n  font-weight: var(--weight-bold);\n  text-decoration: underline;\n}\n\n/* nav: a tall bar that scrolls away: brand, pill links, then the search and the basket */\n.ds-nav {\n  background-color: var(--color-bar);\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 22%, var(--color-bar));\n  box-shadow: var(--shadow-panel);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n}\n.ds-nav__inner {\n  max-width: calc(var(--size-page) + var(--space-3) * 2);\n  min-height: var(--size-nav);\n  margin: 0 auto;\n  padding: var(--space-1) var(--space-3) 0;\n  display: flex;\n  align-items: center;\n  gap: var(--space-2) var(--space-4);\n}\n.ds-nav__links {\n  display: flex;\n  align-items: center;\n  gap: var(--space-1);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-nav__link {\n  display: block;\n  padding: var(--space-1) var(--space-control-x);\n  color: var(--color-bar-text);\n  border-radius: var(--radius-control);\n  font-weight: var(--weight-ui);\n  text-decoration: var(--link-decoration-quiet);\n  text-shadow: var(--shadow-text);\n  text-transform: var(--ui-transform);\n  transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n  background: color-mix(in srgb, var(--color-bar-text) 9%, transparent);\n}\n.ds-nav__link.is-current {\n  background: color-mix(in srgb, var(--color-bar-text) 18%, transparent);\n}\n.ds-nav__aside {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  margin: 0 0 0 auto;\n}\n.ds-nav__search {\n  width: var(--size-search);\n}\n\n/* the current view marks its navigation item with a pill */\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"],\n.ds-page:not(:has(.ds-view:target)) .ds-menu--nav .ds-menu__item[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-menu--nav .ds-menu__item[href=\"#home\"],\n.ds-page:has(#product:target) .ds-nav__link[href=\"#product\"],\n.ds-page:has(#product:target) .ds-menu--nav .ds-menu__item[href=\"#product\"],\n.ds-page:has(#basket:target) .ds-nav__link[href=\"#basket\"],\n.ds-page:has(#basket:target) .ds-menu--nav .ds-menu__item[href=\"#basket\"],\n.ds-page:has(#checkout:target) .ds-nav__link[href=\"#checkout\"],\n.ds-page:has(#checkout:target) .ds-menu--nav .ds-menu__item[href=\"#checkout\"] {\n  background: color-mix(in srgb, var(--color-bar-text) 18%, transparent);\n}\n\n/* main: the centred column under the bar */\n.ds-main {\n  padding-top: var(--space-4);\n}\n\n/* hero: the carousel of the shop front, on the inverted fill; each slide sets its copy beside a drawing */\n.ds-hero {\n  margin-bottom: var(--space-4);\n  box-shadow: var(--shadow-panel);\n}\n.ds-hero > .ds-hero__slide {\n  min-height: 0;\n  align-items: center;\n  gap: var(--space-5);\n  padding: var(--space-6) calc(var(--size-icon) + var(--space-5)) var(--space-7);\n}\n.ds-hero > .ds-carousel__pick:nth-of-type(1):checked ~ .ds-hero__slide:nth-of-type(1),\n.ds-hero > .ds-carousel__pick:nth-of-type(2):checked ~ .ds-hero__slide:nth-of-type(2),\n.ds-hero > .ds-carousel__pick:nth-of-type(3):checked ~ .ds-hero__slide:nth-of-type(3) {\n  display: flex;\n}\n.ds-hero__copy {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-hero__title {\n  margin: 0 0 var(--space-2);\n  font-family: var(--font-heading);\n  font-size: var(--text-display);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--display-tracking);\n}\n.ds-hero__lead {\n  margin: 0 0 var(--space-4);\n  font-size: var(--text-large);\n  line-height: var(--line-body);\n  opacity: 0.8;\n}\n.ds-hero__actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2);\n}\n.ds-hero__art {\n  flex: 0 0 auto;\n  width: var(--size-tile);\n  height: var(--size-tile);\n  opacity: 0.45;\n}\n\n/* stats: three grey cells, each an icon beside a figure and its label */\n.ds-stat {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: var(--space-4);\n  margin: 0 0 var(--space-5);\n  padding: 0;\n  list-style: none;\n}\n.ds-stat__item {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  min-width: 0;\n  padding: var(--space-3);\n  background: var(--color-surface-alt);\n  border: var(--border-width) var(--border-style) var(--color-border-muted);\n  border-radius: var(--radius-panel);\n}\n.ds-stat__icon {\n  flex: 0 0 auto;\n  width: var(--size-icon);\n  height: var(--size-icon);\n  color: var(--color-heading-alt);\n}\n.ds-stat__figure {\n  display: block;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  font-variant-numeric: tabular-nums;\n}\n.ds-stat__label {\n  display: block;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n/* shelf: the heading row over a grid, with its sorting buttons at the right */\n.ds-shelf {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-2);\n  margin-bottom: var(--space-3);\n}\n.ds-shelf > .ds-title {\n  margin-bottom: 0;\n}\n\n/* grid: product thumbnails three across: a colour block, the price at the right of the name, a button row */\n.ds-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: var(--space-4);\n}\n.ds-grid__cell {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  padding: var(--space-1);\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-panel);\n}\n.ds-grid__tile {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: var(--size-tile);\n  background: var(--color-fill-1);\n  color: var(--color-accent-text);\n  border-radius: calc(var(--radius-panel) / 2);\n}\n.ds-grid__tile--2 {\n  background: var(--color-fill-2);\n}\n.ds-grid__tile--3 {\n  background: var(--color-fill-3);\n}\n.ds-grid__tile--4 {\n  background: var(--color-fill-4);\n}\n.ds-grid__icon {\n  width: var(--size-icon);\n  height: var(--size-icon);\n}\n.ds-grid__flag {\n  position: absolute;\n  top: var(--space-2);\n  left: var(--space-2);\n}\n.ds-grid__caption {\n  flex: 1 0 auto;\n  padding: var(--space-2) var(--space-2) var(--space-1);\n}\n.ds-grid__price {\n  float: right;\n  margin-left: var(--space-2);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n  font-variant-numeric: tabular-nums;\n}\n.ds-grid__title {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n}\n.ds-grid__title a {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration);\n}\n.ds-grid__title a:hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-grid__text {\n  margin: var(--space-1) 0;\n}\n.ds-grid__foot {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-2);\n  padding: var(--space-2);\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n\n/* rating: stars in the warning colour, the count in grey */\n.ds-rating {\n  color: var(--color-warning);\n  white-space: nowrap;\n}\n.ds-rating__count {\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n/* sidebar: a list group, a bordered box of full-width rows under a heading strip */\n.ds-sidebar {\n  background: var(--fill-panel);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-panel);\n  overflow: hidden;\n}\n.ds-sidebar__title {\n  margin: 0;\n  padding: var(--space-2) var(--space-3);\n  background: var(--color-surface-strong);\n  color: var(--color-heading-alt);\n  font-family: var(--font-heading);\n  font-size: var(--text-base);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-body);\n}\n.ds-sidebar__list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-sidebar__link {\n  display: block;\n  padding: var(--space-2) var(--space-3);\n  color: var(--color-text);\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-sidebar__link:hover,\n.ds-sidebar__link.is-hover {\n  background: var(--color-surface-alt);\n}\n.ds-sidebar__link.is-current {\n  background-color: var(--color-accent);\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  border-top-color: var(--color-accent);\n  text-shadow: var(--shadow-text);\n}\n.ds-sidebar__count {\n  float: right;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-sidebar__link.is-current .ds-sidebar__count {\n  color: inherit;\n}\n\n/* product: the picture column and the buying column of a product page */\n.ds-product {\n  display: flex;\n  align-items: stretch;\n  gap: var(--space-5);\n  margin-bottom: var(--space-5);\n}\n.ds-product__art {\n  flex: 5 1 0;\n  min-width: 0;\n}\n.ds-product__picture {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: calc(var(--size-tile) * 2);\n  background: var(--color-fill-1);\n  color: var(--color-accent-text);\n  border-radius: var(--radius-panel);\n}\n.ds-product__picture svg {\n  width: calc(var(--size-icon) * 2);\n  height: calc(var(--size-icon) * 2);\n}\n.ds-product__thumbs {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: var(--space-2);\n  margin: var(--space-2) 0 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-product__thumb {\n  height: var(--size-icon);\n  background: var(--color-fill-1);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-control);\n  opacity: 0.55;\n}\n.ds-product__thumb--2 {\n  background: var(--color-fill-2);\n}\n.ds-product__thumb--3 {\n  background: var(--color-fill-3);\n}\n.ds-product__thumb--4 {\n  background: var(--color-fill-4);\n}\n.ds-product__thumb.is-current {\n  border-color: var(--color-border-strong);\n  opacity: 1;\n}\n.ds-product__buy {\n  display: flex;\n  flex: 7 1 0;\n  flex-direction: column;\n  gap: var(--space-3);\n  min-width: 0;\n}\n.ds-product__buy > p {\n  margin: 0;\n}\n.ds-product__price {\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n}\n.ds-product__was {\n  margin-left: var(--space-2);\n  color: var(--color-text-muted);\n  font-size: var(--text-base);\n  font-weight: var(--weight-body);\n  text-decoration: line-through;\n}\n.ds-product__form {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-end;\n  gap: var(--space-2);\n  margin-top: auto;\n  padding: var(--space-3);\n  background: var(--color-surface-alt);\n  border: var(--border-width) var(--border-style) var(--color-border-muted);\n  border-radius: var(--radius-panel);\n  box-shadow: var(--shadow-control-pressed);\n}\n.ds-product__qty {\n  flex: 0 0 var(--size-qty);\n}\n\n/* item: a basket line, a colour swatch beside the name and a grey note */\n.ds-item {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n}\n.ds-item__swatch {\n  flex: 0 0 auto;\n  width: var(--size-swatch);\n  height: var(--size-swatch);\n  background: var(--color-fill-1);\n  border-radius: var(--radius-control);\n}\n.ds-item__swatch--2 {\n  background: var(--color-fill-2);\n}\n.ds-item__swatch--3 {\n  background: var(--color-fill-3);\n}\n.ds-item__swatch--4 {\n  background: var(--color-fill-4);\n}\n.ds-item__name {\n  display: block;\n  color: var(--color-link);\n  font-weight: var(--weight-bold);\n  text-decoration: var(--link-decoration);\n}\n.ds-item__name:hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-item__meta {\n  display: block;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-table .ds-table__qty {\n  width: var(--size-qty);\n}\n.ds-table tfoot td,\n.ds-table tfoot th {\n  background: var(--color-surface);\n  font-weight: var(--weight-bold);\n}\n.ds-table tfoot tr:first-child td,\n.ds-table tfoot tr:first-child th {\n  border-top: var(--border-width-strong) var(--border-style) var(--color-border);\n}\n\n/* steps: where the buyer is on the way to paying; joined segments, the current one filled */\n.ds-steps {\n  display: flex;\n  margin: 0 0 var(--space-4);\n  padding: 0;\n  list-style: none;\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  overflow: hidden;\n}\n.ds-steps__step {\n  flex: 1 1 0;\n  min-width: 0;\n  padding: var(--space-2) var(--space-3);\n  background: var(--color-surface-alt);\n  color: var(--color-text-muted);\n  border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-steps__step:first-child {\n  border-left: 0;\n}\n.ds-steps__step.is-done {\n  color: var(--color-text);\n}\n.ds-steps__step.is-current {\n  background-color: var(--color-accent);\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  font-weight: var(--weight-bold);\n  text-shadow: var(--shadow-text);\n}\n.ds-steps__note {\n  display: block;\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  opacity: 0.85;\n}\n\n/* form: a field that passed its check */\n.ds-form__input.is-success {\n  border-color: var(--color-success);\n}\n.ds-form__field.is-success .ds-form__label,\n.ds-form__ok {\n  color: var(--color-success);\n}\n.ds-form__ok {\n  font-size: var(--text-small);\n}\n\n/* summary: label and amount on one line, in a panel */\n.ds-summary {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-summary__row {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--space-2);\n  padding: var(--space-1) 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n  font-variant-numeric: tabular-nums;\n}\n.ds-summary__row:first-child {\n  border-top: 0;\n}\n.ds-summary__row--total {\n  color: var(--color-heading);\n  border-top: var(--border-width-strong) var(--border-style) var(--color-border);\n  font-size: var(--text-large);\n  font-weight: var(--weight-bold);\n}\n\n/* footer: three columns of links on the secondary bar, then one line */\n.ds-footer {\n  margin-top: var(--space-6);\n  padding: var(--space-5) 0 var(--space-4);\n  background-color: var(--color-bar-alt);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-footer__inner {\n  max-width: calc(var(--size-page) + var(--space-3) * 2);\n  margin: 0 auto;\n  padding: 0 var(--space-3);\n}\n.ds-footer__cols {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: var(--space-5);\n  margin-bottom: var(--space-4);\n}\n.ds-footer__title {\n  margin: 0 0 var(--space-1);\n  font-family: var(--font-heading);\n  font-size: var(--text-base);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-body);\n}\n.ds-footer__links {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-footer__link {\n  color: inherit;\n  text-decoration: underline;\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n  text-decoration: none;\n}\n.ds-footer__text {\n  margin: 0;\n  padding-top: var(--space-3);\n  border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-alt-text) 25%, transparent);\n  font-size: var(--text-small);\n}\n\n/* menu: a drop-down under a navigation item, open on hover or keyboard focus */\n.ds-menu {\n  position: relative;\n}\n.ds-menu__toggle::after {\n  content: \"\";\n  display: inline-block;\n  flex: none;\n  width: 0;\n  height: 0;\n  border-left: var(--space-1) solid transparent;\n  border-right: var(--space-1) solid transparent;\n  border-top: var(--space-1) solid currentColor;\n  vertical-align: calc(var(--space-1) / 2);\n  margin-left: var(--space-1);\n  opacity: 0.7;\n}\n.ds-menu__list {\n  display: none;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: 20;\n  min-width: calc(var(--size-icon) * 4);\n  margin: 0;\n  padding: var(--space-1) 0;\n  list-style: none;\n  background: var(--fill-panel);\n  color: var(--color-text);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: 0 0 var(--radius-panel) var(--radius-panel);\n  box-shadow: var(--shadow-dialog);\n}\n.ds-menu:hover > .ds-menu__list,\n.ds-menu:has(:focus-visible) > .ds-menu__list,\n.ds-menu.is-open > .ds-menu__list {\n  display: block;\n}\n.ds-menu__item {\n  display: block;\n  padding: var(--space-1) var(--space-4);\n  color: var(--color-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n  text-decoration: var(--link-decoration-quiet);\n  white-space: nowrap;\n}\n.ds-menu__item:hover,\n.ds-menu__item.is-hover,\n.ds-menu__item:focus-visible {\n  background-color: var(--color-accent);\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n}\n.ds-menu--end > .ds-menu__list {\n  right: 0;\n  left: auto;\n}\n.ds-menu__divider {\n  height: 0;\n  margin: var(--space-1) 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n\n/* menu in the bar: on a narrow window the links fold away behind a button with three bars */\n.ds-menu--nav {\n  display: none;\n  position: static;\n}\n.ds-menu--nav > .ds-menu__toggle {\n  position: absolute;\n  top: var(--space-1);\n  right: var(--space-3);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: calc(var(--size-nav) - var(--space-2));\n  padding: 0 var(--space-2);\n  color: var(--color-bar-text);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 35%, transparent);\n  border-radius: var(--radius-control);\n  list-style: none;\n  cursor: pointer;\n}\n.ds-menu--nav > .ds-menu__toggle::-webkit-details-marker {\n  display: none;\n}\n.ds-menu--nav > .ds-menu__toggle::after {\n  content: none;\n}\n.ds-menu--nav > .ds-menu__toggle:hover,\n.ds-menu--nav[open] > .ds-menu__toggle {\n  background: color-mix(in srgb, var(--color-bar-text) 18%, transparent);\n}\n.ds-menu--nav > .ds-menu__toggle:focus-visible {\n  outline: var(--focus-ring);\n}\n.ds-menu__bars {\n  display: block;\n  width: var(--space-4);\n  height: calc(var(--space-2) + var(--border-width-strong) * 2);\n  border-top: var(--border-width-strong) var(--border-style) currentColor;\n  border-bottom: var(--border-width-strong) var(--border-style) currentColor;\n}\n.ds-menu__bars::before {\n  content: \"\";\n  display: block;\n  margin-top: calc((var(--space-2) - var(--border-width-strong)) / 2);\n  border-top: var(--border-width-strong) var(--border-style) currentColor;\n}\n.ds-menu--nav > .ds-menu__list {\n  display: block;\n  position: static;\n  min-width: 0;\n  padding: var(--space-1) 0 var(--space-2);\n  background: transparent;\n  border: 0;\n  border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 22%, transparent);\n  border-radius: 0;\n  box-shadow: none;\n}\n.ds-menu--nav .ds-menu__item {\n  padding: var(--space-2) var(--space-3);\n  color: var(--color-bar-text);\n  font-weight: var(--weight-ui);\n  text-shadow: var(--shadow-text);\n  text-transform: var(--ui-transform);\n  white-space: normal;\n}\n.ds-menu--nav .ds-menu__item:hover,\n.ds-menu--nav .ds-menu__item.is-hover,\n.ds-menu--nav .ds-menu__item:focus-visible {\n  background: color-mix(in srgb, var(--color-bar-text) 9%, transparent);\n  color: var(--color-bar-text);\n}\n.ds-menu--nav .ds-menu__divider {\n  border-top-color: color-mix(in srgb, var(--color-bar-text) 22%, transparent);\n}\n\n/* accordion: stacked groups, each a heading that opens its body */\n.ds-accordion {\n  margin: 0 0 var(--space-4);\n}\n.ds-accordion__item {\n  background: var(--fill-panel);\n  color: var(--color-text);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n}\n.ds-accordion__item + .ds-accordion__item {\n  margin-top: var(--space-1);\n}\n.ds-accordion__head {\n  display: block;\n  padding: var(--space-2) var(--space-3);\n  background: var(--color-surface-strong);\n  color: var(--color-heading-alt);\n  border-radius: calc(var(--radius-panel) - var(--border-width));\n  font-family: var(--font-heading);\n  font-size: var(--text-base);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-body);\n  list-style: none;\n  cursor: pointer;\n}\n.ds-accordion__head::-webkit-details-marker {\n  display: none;\n}\n.ds-accordion__head::before {\n  content: \"\";\n  display: inline-block;\n  width: 0;\n  height: 0;\n  margin-right: calc(var(--space-3) - var(--space-1) * 1.2);\n  border-top: var(--space-1) solid transparent;\n  border-bottom: var(--space-1) solid transparent;\n  border-left: calc(var(--space-1) * 1.2) solid currentColor;\n  color: var(--color-text-muted);\n}\n.ds-accordion__item[open] > .ds-accordion__head {\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: calc(var(--radius-panel) - var(--border-width)) calc(var(--radius-panel) - var(--border-width)) 0 0;\n}\n.ds-accordion__item[open] > .ds-accordion__head::before {\n  rotate: 90deg;\n}\n.ds-accordion__head:hover,\n.ds-accordion__head.is-hover {\n  text-decoration: underline;\n}\n.ds-accordion__head:focus-visible {\n  outline: var(--focus-ring);\n}\n.ds-accordion__body {\n  padding: var(--space-3);\n}\n.ds-accordion__body > p {\n  margin: 0 0 var(--space-2);\n}\n.ds-accordion__body > :last-child {\n  margin-bottom: 0;\n}\n\n/* tooltip: a small inverted bubble above its trigger, on hover or focus */\n.ds-tooltip {\n  position: relative;\n  display: inline-block;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n  cursor: help;\n}\n.ds-tooltip--plain {\n  border-bottom: 0;\n}\n.ds-tooltip__tip {\n  display: none;\n  position: absolute;\n  bottom: calc(100% + var(--space-2));\n  left: 50%;\n  z-index: 30;\n  width: max-content;\n  max-width: var(--size-sidebar);\n  padding: var(--space-1) var(--space-2);\n  background: var(--color-inverse);\n  color: var(--color-inverse-text);\n  border-radius: var(--radius-control);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n  letter-spacing: 0;\n  text-align: center;\n  text-shadow: none;\n  text-transform: none;\n  white-space: normal;\n  transform: translateX(-50%);\n}\n.ds-tooltip__tip::after {\n  content: \"\";\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  width: var(--space-2);\n  height: var(--space-2);\n  margin: calc(var(--space-1) * -1) 0 0 calc(var(--space-1) * -1);\n  background: var(--color-inverse);\n  transform: rotate(45deg);\n}\n.ds-tooltip--start > .ds-tooltip__tip {\n  left: 0;\n  transform: none;\n}\n.ds-tooltip--start > .ds-tooltip__tip::after {\n  left: var(--space-4);\n}\n.ds-tooltip--end > .ds-tooltip__tip {\n  right: 0;\n  left: auto;\n  transform: none;\n}\n.ds-tooltip--end > .ds-tooltip__tip::after {\n  right: var(--space-4);\n  left: auto;\n}\n.ds-tooltip:hover > .ds-tooltip__tip,\n.ds-tooltip:focus > .ds-tooltip__tip,\n.ds-tooltip:focus-within > .ds-tooltip__tip,\n.ds-tooltip.is-open > .ds-tooltip__tip {\n  display: block;\n}\n.ds-tooltip:focus-visible {\n  outline: var(--focus-ring);\n}\n\n/* carousel: one slide showing on an inverted block, arrows at the sides, dots below; radio buttons keep the place */\n.ds-carousel {\n  position: relative;\n  margin: 0 0 var(--space-5);\n  background-color: var(--color-inverse);\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n  border-radius: var(--radius-page);\n}\n.ds-carousel__pick {\n  position: absolute;\n  top: 0;\n  left: 0;\n  margin: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n.ds-carousel__slide {\n  display: none;\n  min-height: calc(var(--size-icon) * 4);\n  padding: var(--space-5) calc(var(--size-icon) + var(--space-5)) var(--space-6);\n}\n.ds-carousel__pick:nth-of-type(1):checked ~ .ds-carousel__slide:nth-of-type(1),\n.ds-carousel__pick:nth-of-type(2):checked ~ .ds-carousel__slide:nth-of-type(2),\n.ds-carousel__pick:nth-of-type(3):checked ~ .ds-carousel__slide:nth-of-type(3) {\n  display: block;\n}\n.ds-carousel__title {\n  margin: 0 0 var(--space-2);\n  color: var(--color-inverse-text);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-carousel__text {\n  margin: 0 0 var(--space-3);\n  max-width: 64ch;\n  font-size: var(--text-large);\n  line-height: var(--line-body);\n}\n.ds-carousel__by {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  margin: 0;\n  font-size: var(--text-base);\n}\n.ds-carousel__arrow {\n  position: absolute;\n  top: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-icon);\n  height: var(--size-icon);\n  background: color-mix(in srgb, var(--color-inverse-text) 14%, transparent);\n  color: var(--color-inverse-text);\n  border: var(--border-width-strong) var(--border-style) color-mix(in srgb, var(--color-inverse-text) 60%, transparent);\n  border-radius: 50%;\n  font-family: var(--font-ui);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-bold);\n  line-height: 1;\n  cursor: pointer;\n  transform: translateY(-50%);\n  transition: var(--transition);\n}\n.ds-carousel__arrow::before {\n  content: \"\";\n  flex: none;\n  width: calc(var(--text-h3) * 0.4);\n  height: calc(var(--text-h3) * 0.4);\n  border-left: calc(var(--space-2) / 4) solid currentColor;\n  border-bottom: calc(var(--space-2) / 4) solid currentColor;\n  rotate: 45deg;\n  translate: 25% 0;\n}\n.ds-carousel__arrow--next::before {\n  rotate: -135deg;\n  translate: -25% 0;\n}\n.ds-carousel__arrow:hover,\n.ds-carousel__arrow.is-hover {\n  background: color-mix(in srgb, var(--color-inverse-text) 30%, transparent);\n}\n.ds-carousel__arrow--prev {\n  left: var(--space-3);\n}\n.ds-carousel__arrow--next {\n  right: var(--space-3);\n}\n.ds-carousel__dots {\n  position: absolute;\n  right: 0;\n  bottom: var(--space-3);\n  left: 0;\n  display: flex;\n  justify-content: center;\n  gap: var(--space-1);\n}\n.ds-carousel__dot {\n  width: var(--space-2);\n  height: var(--space-2);\n  border: var(--border-width) var(--border-style) var(--color-inverse-text);\n  border-radius: 50%;\n  cursor: pointer;\n}\n.ds-carousel__pick:nth-of-type(1):checked ~ .ds-carousel__dots > .ds-carousel__dot:nth-child(1),\n.ds-carousel__pick:nth-of-type(2):checked ~ .ds-carousel__dots > .ds-carousel__dot:nth-child(2),\n.ds-carousel__pick:nth-of-type(3):checked ~ .ds-carousel__dots > .ds-carousel__dot:nth-child(3) {\n  background: var(--color-inverse-text);\n}\n.ds-carousel__pick:focus-visible ~ .ds-carousel__dots {\n  outline: var(--focus-ring);\n}\n\n/* progress: a sunken track with a filled bar; the bar's length is one of five steps */\n.ds-progress {\n  height: var(--space-4);\n  margin: 0 0 var(--space-3);\n  background: var(--color-surface-strong);\n  border-radius: var(--radius-control);\n  box-shadow: var(--shadow-control-pressed);\n  overflow: hidden;\n}\n.ds-progress__bar {\n  width: 50%;\n  height: 100%;\n  background-color: var(--color-button);\n  background: var(--fill-button);\n}\n.ds-progress__bar--20 {\n  width: 20%;\n}\n.ds-progress__bar--80 {\n  width: 80%;\n}\n.ds-progress__bar--success {\n  background: var(--fill-button);\n  background-color: var(--color-success);\n}\n.ds-progress__bar--warning {\n  background: var(--fill-button);\n  background-color: var(--color-warning);\n}\n.ds-progress--small {\n  height: var(--space-2);\n}\n.ds-progress__label {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--space-2);\n  margin: 0 0 var(--space-1);\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n/* avatar: a person's initial on a colour square */\n.ds-avatar {\n  display: inline-block;\n  flex: 0 0 auto;\n  width: var(--size-icon);\n  height: var(--size-icon);\n  background: var(--color-fill-1);\n  color: var(--color-accent-text);\n  border-radius: var(--radius-control);\n  font-family: var(--font-heading);\n  font-size: var(--text-base);\n  font-weight: var(--weight-bold);\n  line-height: 1;\n  text-shadow: none;\n  vertical-align: middle;\n  align-content: center;\n  text-align: center;\n  text-box: trim-both cap alphabetic;\n}\n.ds-avatar--2 {\n  background: var(--color-fill-2);\n}\n.ds-avatar--4 {\n  background: var(--color-fill-4);\n}\n.ds-avatar--small {\n  width: var(--size-mark);\n  height: var(--size-mark);\n  font-size: var(--text-small);\n}\n.ds-person {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n}\n.ds-person__body {\n  flex: 1 1 0;\n  min-width: 0;\n}\n\n/* the menu button is as tall as the Basket button beside it and sits on the same line */\n.ds-nav .ds-menu--nav > .ds-menu__toggle {\n  top: calc(var(--space-1) + (var(--size-nav) - (calc(var(--text-ui) * var(--line-body) + var(--space-control-y) * 2 + var(--border-width) * 2))) / 2);\n  height: calc(var(--text-ui) * var(--line-body) + var(--space-control-y) * 2 + var(--border-width) * 2);\n}\n\n/* medium windows: the links of the bar fold into the menu button */\n@media (max-width: 980px) {\n  .ds-nav {\n    position: static;\n  }\n  .ds-nav__inner {\n    position: relative;\n    flex-wrap: wrap;\n    gap: 0 var(--space-2);\n  }\n  .ds-nav__links {\n    display: none;\n  }\n  .ds-brand {\n    min-height: var(--size-nav);\n  }\n  .ds-nav__aside {\n    min-height: var(--size-nav);\n    margin-right: calc(var(--space-6) + var(--space-3));\n  }\n  .ds-menu--nav {\n    display: block;\n    flex: 0 0 100%;\n    order: 9;\n  }\n  .ds-row {\n    flex-direction: column;\n    align-items: stretch;\n    gap: var(--space-4);\n  }\n  .ds-col,\n  .ds-col--wide,\n  .ds-col--side {\n    flex: 0 0 auto;\n  }\n  .ds-col--side {\n    order: 2;\n  }\n}\n\n/* narrow windows: columns stack, wide tables scroll in their own box */\n@media (max-width: 760px) {\n  .ds-hero > .ds-hero__slide {\n    padding: var(--space-4) var(--space-4) calc(var(--size-icon) + var(--space-5));\n  }\n  .ds-carousel__arrow {\n    top: auto;\n    bottom: var(--space-2);\n    transform: none;\n  }\n  .ds-nav__search,\n  .ds-nav__text {\n    display: none;\n  }\n  .ds-main {\n    padding-top: var(--space-3);\n  }\n  .ds-row,\n  .ds-product {\n    flex-direction: column;\n    align-items: stretch;\n    gap: var(--space-4);\n  }\n  .ds-col,\n  .ds-col--wide,\n  .ds-col--side,\n  .ds-product__art,\n  .ds-product__buy {\n    flex: 0 0 auto;\n  }\n  .ds-hero__title {\n    font-size: var(--text-h1);\n    line-height: var(--line-heading);\n    letter-spacing: 0;\n  }\n  .ds-hero__art {\n    display: none;\n  }\n  .ds-page-header {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: var(--space-2);\n  }\n  .ds-page-header__copy {\n    flex: 0 0 auto;\n  }\n  .ds-stat {\n    grid-template-columns: 1fr;\n    gap: var(--space-2);\n  }\n  .ds-grid {\n    grid-template-columns: 1fr;\n    gap: var(--space-3);\n  }\n  .ds-steps__note {\n    display: none;\n  }\n  .ds-steps__step {\n    padding: var(--space-2) var(--space-1);\n    text-align: center;\n  }\n  .ds-footer__cols {\n    grid-template-columns: 1fr;\n    gap: var(--space-3);\n  }\n  .ds-tabs {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .ds-table {\n    min-width: 60ch;\n  }\n  .ds-form__row {\n    flex-direction: column;\n  }\n  .ds-dialog {\n    padding: var(--space-4) var(--space-2);\n  }\n  .ds-dialog__actions {\n    flex-wrap: wrap;\n  }\n  .ds-pagination {\n    flex-wrap: wrap;\n  }\n}\n\n/* remove: a small square button with a drawn cross, as the dialog's close draws it */\n.ds-button--remove {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: calc(var(--text-ui) * 2);\n  height: calc(var(--text-ui) * 2);\n  padding: 0;\n}\n.ds-button--remove::before {\n  content: \"\";\n  width: calc(var(--text-ui) * 0.9);\n  height: calc(var(--text-ui) * 0.9);\n  background: currentColor;\n  clip-path: polygon(calc(50% - var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) calc(50% - var(--space-2) / 8), 100% calc(50% - var(--space-2) / 8), 100% calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) calc(50% + var(--space-2) / 8), 0 calc(50% + var(--space-2) / 8), 0 calc(50% - var(--space-2) / 8), calc(50% - var(--space-2) / 8) calc(50% - var(--space-2) / 8));\n  rotate: 45deg;\n}\n",
    "specimen.html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>chronoskin: framework default shop specimen</title>\n<link rel=\"stylesheet\" href=\"tokens.css\">\n<link rel=\"stylesheet\" href=\"components.css\">\n</head>\n<body class=\"ds-page\" data-component=\"shell\">\n\n<p class=\"ds-promo\">Spring sowing week: free delivery on orders over $30 until Sunday. <a class=\"ds-promo__link\" href=\"#basket\">See your basket</a></p>\n\n<header class=\"ds-nav\" data-component=\"nav\">\n  <div class=\"ds-nav__inner\">\n    <a class=\"ds-brand\" data-component=\"brand\" href=\"#home\">\n      <span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polygon points=\"12,2.5 20.2,7.25 20.2,16.75 12,21.5 3.8,16.75 3.8,7.25\"/><polyline points=\"12,7.5 12,12 15.5,14\"/></svg></span>\n      <span class=\"ds-brand__name\">chronoskin</span>\n    </a>\n    <ul class=\"ds-nav__links\">\n      <li class=\"ds-menu\">\n        <a class=\"ds-nav__link ds-menu__toggle\" href=\"#home\" aria-haspopup=\"true\">Shop</a>\n        <ul class=\"ds-menu__list\">\n          <li><a class=\"ds-menu__item\" href=\"#home\">Vegetable seeds</a></li>\n          <li><a class=\"ds-menu__item\" href=\"#home\">Flower seeds</a></li>\n          <li><a class=\"ds-menu__item\" href=\"#home\">Herbs</a></li>\n          <li><a class=\"ds-menu__item\" href=\"#home\">Tools</a></li>\n          <li class=\"ds-menu__divider\"></li>\n          <li><a class=\"ds-menu__item\" href=\"#product\">Seed of the week</a></li>\n        </ul>\n      </li>\n      <li><a class=\"ds-nav__link\" href=\"#basket\">Basket</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#checkout\">Checkout</a></li>\n    </ul>\n    <div class=\"ds-nav__aside\">\n      <input class=\"ds-form__input ds-nav__search\" type=\"text\" placeholder=\"Search 1,240 varieties\" aria-label=\"Search the shop\">\n      <a class=\"ds-button\" href=\"#basket\">Basket <span class=\"ds-badge ds-badge--quiet\">3</span></a>\n    </div>\n    <details class=\"ds-menu ds-menu--nav\">\n      <summary class=\"ds-menu__toggle\" aria-label=\"Menu\"><span class=\"ds-menu__bars\"></span></summary>\n      <ul class=\"ds-menu__list\">\n        <li><a class=\"ds-menu__item\" href=\"#home\">Shop</a></li>\n        <li><a class=\"ds-menu__item\" href=\"#product\">Seed of the week</a></li>\n        <li><a class=\"ds-menu__item\" href=\"#basket\">Basket</a></li>\n        <li><a class=\"ds-menu__item\" href=\"#checkout\">Checkout</a></li>\n      </ul>\n    </details>\n  </div>\n</header>\n\n<main class=\"ds-container ds-main\">\n\n<section class=\"ds-view ds-view--home\" id=\"home\">\n  <div class=\"ds-row ds-row--level ds-row--flush\">\n    <div class=\"ds-col ds-col--side ds-col--stack\">\n      <aside class=\"ds-sidebar\" data-component=\"sidebar\">\n        <h2 class=\"ds-sidebar__title\">Departments</h2>\n        <ul class=\"ds-sidebar__list\">\n          <li><a class=\"ds-sidebar__link is-current\" href=\"#home\"><span class=\"ds-sidebar__count\">1,240</span>Everything</a></li>\n          <li><a class=\"ds-sidebar__link\" href=\"#home\"><span class=\"ds-sidebar__count\">412</span>Vegetable seeds</a></li>\n          <li><a class=\"ds-sidebar__link\" href=\"#home\"><span class=\"ds-sidebar__count\">298</span>Flower seeds</a></li>\n          <li><a class=\"ds-sidebar__link\" href=\"#home\"><span class=\"ds-sidebar__count\">96</span>Herbs</a></li>\n          <li><a class=\"ds-sidebar__link\" href=\"#home\"><span class=\"ds-sidebar__count\">64</span>Bulbs and tubers</a></li>\n          <li><a class=\"ds-sidebar__link\" href=\"#home\"><span class=\"ds-sidebar__count\">188</span>Tools</a></li>\n          <li><a class=\"ds-sidebar__link\" href=\"#home\"><span class=\"ds-sidebar__count\">182</span>Pots and trays</a></li>\n        </ul>\n      </aside>\n      <section class=\"ds-panel\" data-component=\"panel\">\n        <h2 class=\"ds-panel__title\">Sow this month</h2>\n        <div class=\"ds-panel__body\">\n          <ul class=\"ds-list\" data-component=\"list\">\n            <li class=\"ds-list__item\"><a class=\"ds-list__title\" href=\"#product\">Tomatoes, under glass</a><span class=\"ds-list__meta\">38 varieties, from $1.90</span></li>\n            <li class=\"ds-list__item\"><a class=\"ds-list__title\" href=\"#product\">Broad beans, outdoors</a><span class=\"ds-list__meta\">9 varieties, from $2.20</span></li>\n            <li class=\"ds-list__item\"><a class=\"ds-list__title\" href=\"#product\">Sweet peas, in pots</a><span class=\"ds-list__meta\">24 varieties, from $1.60</span></li>\n          </ul>\n        </div>\n      </section>\n      <section class=\"ds-panel\">\n        <h2 class=\"ds-panel__title\">Show only</h2>\n        <div class=\"ds-panel__body ds-form\">\n          <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> <span>In stock today</span></label>\n          <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\"> <span>On sale <span class=\"ds-badge ds-badge--danger\">14</span></span></label>\n          <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\"> <span>New this season <span class=\"ds-badge ds-badge--success\">62</span></span></label>\n          <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\"> <span>Fits a letter box</span></label>\n          <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#home\">Apply</a>\n        </div>\n      </section>\n      <div class=\"ds-well ds-grow\">\n        <h2 class=\"ds-title ds-title--small\">Not sure what to grow?</h2>\n        <p class=\"ds-col__text\">Tell us the size of the plot and how much sun it gets, and we will send back a list.</p>\n        <a class=\"ds-button ds-button--secondary ds-button--block\" href=\"#checkout\">Ask a grower</a>\n      </div>\n    </div>\n    <div class=\"ds-col\">\n      <div class=\"ds-hero ds-carousel\" data-component=\"hero\">\n        <input class=\"ds-carousel__pick\" type=\"radio\" name=\"offers\" id=\"offer-1\" aria-label=\"First slide\" checked>\n        <input class=\"ds-carousel__pick\" type=\"radio\" name=\"offers\" id=\"offer-2\" aria-label=\"Second slide\">\n        <input class=\"ds-carousel__pick\" type=\"radio\" name=\"offers\" id=\"offer-3\" aria-label=\"Third slide\">\n        <div class=\"ds-carousel__slide ds-hero__slide\">\n          <div class=\"ds-hero__copy\">\n            <h1 class=\"ds-hero__title\">Sow now, eat in June.</h1>\n            <p class=\"ds-hero__lead\">Seeds, sets and tools for the kitchen garden, packed to order and posted within two days.</p>\n            <div class=\"ds-hero__actions\">\n              <a class=\"ds-button ds-button--large\" href=\"#product\">See the seed of the week</a>\n              <a class=\"ds-button ds-button--secondary ds-button--large\" href=\"#basket\">View basket</a>\n            </div>\n          </div>\n          <svg class=\"ds-hero__art\" viewBox=\"0 0 40 40\" aria-hidden=\"true\"><path d=\"M20 36V18 M20 24c-8 0-12-4-12-12 8 0 12 4 12 12z M20 18c0-7 4-11 12-11 0 7-4 11-12 11z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/></svg>\n          <label class=\"ds-carousel__arrow ds-carousel__arrow--prev\" for=\"offer-3\" aria-label=\"Previous\"></label>\n          <label class=\"ds-carousel__arrow ds-carousel__arrow--next\" for=\"offer-2\" aria-label=\"Next\"></label>\n        </div>\n        <div class=\"ds-carousel__slide ds-hero__slide\">\n          <div class=\"ds-hero__copy\">\n            <h2 class=\"ds-hero__title\">Free delivery this week.</h2>\n            <p class=\"ds-hero__lead\">Spend $30 on seeds or tools before Sunday and the post is on us.</p>\n            <div class=\"ds-hero__actions\">\n              <a class=\"ds-button ds-button--large\" href=\"#basket\">See your basket</a>\n            </div>\n          </div>\n          <svg class=\"ds-hero__art\" viewBox=\"0 0 40 40\" aria-hidden=\"true\"><path d=\"M20 36V18 M20 24c-8 0-12-4-12-12 8 0 12 4 12 12z M20 18c0-7 4-11 12-11 0 7-4 11-12 11z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/></svg>\n          <label class=\"ds-carousel__arrow ds-carousel__arrow--prev\" for=\"offer-1\" aria-label=\"Previous\"></label>\n          <label class=\"ds-carousel__arrow ds-carousel__arrow--next\" for=\"offer-3\" aria-label=\"Next\"></label>\n        </div>\n        <div class=\"ds-carousel__slide ds-hero__slide\">\n          <div class=\"ds-hero__copy\">\n            <h2 class=\"ds-hero__title\">Tools that last.</h2>\n            <p class=\"ds-hero__lead\">Forged trowels, ash handles and trays that survive more than one season.</p>\n            <div class=\"ds-hero__actions\">\n              <a class=\"ds-button ds-button--large\" href=\"#product\">Look at the tools</a>\n            </div>\n          </div>\n          <svg class=\"ds-hero__art\" viewBox=\"0 0 40 40\" aria-hidden=\"true\"><path d=\"M20 36V18 M20 24c-8 0-12-4-12-12 8 0 12 4 12 12z M20 18c0-7 4-11 12-11 0 7-4 11-12 11z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/></svg>\n          <label class=\"ds-carousel__arrow ds-carousel__arrow--prev\" for=\"offer-2\" aria-label=\"Previous\"></label>\n          <label class=\"ds-carousel__arrow ds-carousel__arrow--next\" for=\"offer-1\" aria-label=\"Next\"></label>\n        </div>\n        <div class=\"ds-carousel__dots\">\n          <label class=\"ds-carousel__dot\" for=\"offer-1\" aria-label=\"First slide\"></label>\n          <label class=\"ds-carousel__dot\" for=\"offer-2\" aria-label=\"Second slide\"></label>\n          <label class=\"ds-carousel__dot\" for=\"offer-3\" aria-label=\"Third slide\"></label>\n        </div>\n      </div>\n\n      <ul class=\"ds-stat\" data-component=\"stats\">\n        <li class=\"ds-stat__item\">\n          <svg class=\"ds-stat__icon\" viewBox=\"0 0 40 40\" aria-hidden=\"true\"><path d=\"M6 12l14-6 14 6v16l-14 6-14-6z M6 12l14 6 14-6 M20 18v16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"/></svg>\n          <div><span class=\"ds-stat__figure\">1,240</span><span class=\"ds-stat__label\">varieties in stock today</span></div>\n        </li>\n        <li class=\"ds-stat__item\">\n          <svg class=\"ds-stat__icon\" viewBox=\"0 0 40 40\" aria-hidden=\"true\"><path d=\"M4 12h20v16H4z M24 18h7l5 5v5H24 M11 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6z M29 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"/></svg>\n          <div><span class=\"ds-stat__figure\">48 hours</span><span class=\"ds-stat__label\"><span class=\"ds-tooltip\" tabindex=\"0\">from order to post<span class=\"ds-tooltip__tip\" role=\"tooltip\">Working days. Orders placed before noon leave the next morning.</span></span></span></div>\n        </li>\n        <li class=\"ds-stat__item\">\n          <svg class=\"ds-stat__icon\" viewBox=\"0 0 40 40\" aria-hidden=\"true\"><path d=\"M20 5l4.6 9.6 10.4 1.4-7.6 7.3 1.9 10.4L20 28.6l-9.3 5.1 1.9-10.4L5 16l10.4-1.4z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"/></svg>\n          <div><span class=\"ds-stat__figure\">4.8 of 5</span><span class=\"ds-stat__label\">across 3,100 reviews</span></div>\n        </li>\n      </ul>\n\n      <div class=\"ds-shelf\">\n        <h2 class=\"ds-title\">Popular this week <small class=\"ds-title__small\">6 of 1,240</small></h2>\n        <div class=\"ds-buttongroup\">\n          <a class=\"ds-button ds-button--secondary ds-button--small is-active\" href=\"#home\">Popular</a>\n          <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#home\">Newest</a>\n          <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#home\">Price</a>\n        </div>\n      </div>\n      <div class=\"ds-grid ds-spaced\" data-component=\"grid\">\n        <div class=\"ds-grid__cell\">\n          <div class=\"ds-grid__tile\"><span class=\"ds-badge ds-badge--danger ds-grid__flag\">Sale</span><svg class=\"ds-grid__icon\" viewBox=\"0 0 40 40\" aria-hidden=\"true\"><path d=\"M20 12c8 0 13 5 13 11s-5 11-13 11S7 29 7 23s5-11 13-11z M20 12c-1-3-3-5-6-6 M20 12c1-3 3-5 6-6 M20 12V6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"/></svg></div>\n          <div class=\"ds-grid__caption\">\n            <span class=\"ds-grid__price\">$2.40</span>\n            <h3 class=\"ds-grid__title\"><a href=\"#product\">Tomato 'Amber Plum'</a></h3>\n            <p class=\"ds-grid__text\">A small yellow plum for the greenhouse. 20 seeds.</p>\n            <span class=\"ds-rating\">&#9733;&#9733;&#9733;&#9733;&#9733; <span class=\"ds-rating__count\">41 reviews</span></span>\n          </div>\n          <div class=\"ds-grid__foot\"><a class=\"ds-button ds-button--small\" href=\"#basket\">Add to basket</a><a class=\"ds-link\" href=\"#product\">Details</a></div>\n        </div>\n        <div class=\"ds-grid__cell\">\n          <div class=\"ds-grid__tile ds-grid__tile--2\"><span class=\"ds-badge ds-badge--success ds-grid__flag\">New</span><svg class=\"ds-grid__icon\" viewBox=\"0 0 40 40\" aria-hidden=\"true\"><path d=\"M20 36V20 M20 20c-2-6-2-10 0-14 2 4 2 8 0 14z M20 22c-6-2-9-5-10-9 5 0 8 3 10 9z M20 22c6-2 9-5 10-9-5 0-8 3-10 9z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"/></svg></div>\n          <div class=\"ds-grid__caption\">\n            <span class=\"ds-grid__price\">$1.80</span>\n            <h3 class=\"ds-grid__title\"><a href=\"#product\">Cornflower 'Blue Boy'</a></h3>\n            <p class=\"ds-grid__text\">Sow where it is to flower. 150 seeds.</p>\n            <span class=\"ds-rating\">&#9733;&#9733;&#9733;&#9733;&#9734; <span class=\"ds-rating__count\">12 reviews</span></span>\n          </div>\n          <div class=\"ds-grid__foot\"><a class=\"ds-button ds-button--small\" href=\"#basket\">Add to basket</a><a class=\"ds-link\" href=\"#product\">Details</a></div>\n        </div>\n        <div class=\"ds-grid__cell\">\n          <div class=\"ds-grid__tile ds-grid__tile--3\"><svg class=\"ds-grid__icon\" viewBox=\"0 0 40 40\" aria-hidden=\"true\"><path d=\"M14 8c8 0 16 6 16 16 0 5-3 9-7 9-8 0-14-8-14-17 0-5 2-8 5-8z M17 14c3 2 6 6 7 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"/></svg></div>\n          <div class=\"ds-grid__caption\">\n            <span class=\"ds-grid__price\">$3.10</span>\n            <h3 class=\"ds-grid__title\"><a href=\"#product\">Squash 'Little Lantern'</a></h3>\n            <p class=\"ds-grid__text\">Keeps until March in a cool shed. 8 seeds.</p>\n            <span class=\"ds-rating\">&#9733;&#9733;&#9733;&#9733;&#9733; <span class=\"ds-rating__count\">27 reviews</span></span>\n          </div>\n          <div class=\"ds-grid__foot\"><a class=\"ds-button ds-button--small\" href=\"#basket\">Add to basket</a><a class=\"ds-link\" href=\"#product\">Details</a></div>\n        </div>\n        <div class=\"ds-grid__cell\">\n          <div class=\"ds-grid__tile ds-grid__tile--4\"><svg class=\"ds-grid__icon\" viewBox=\"0 0 40 40\" aria-hidden=\"true\"><path d=\"M20 34c-7 0-11-5-11-11 0-7 5-11 11-17 6 6 11 10 11 17 0 6-4 11-11 11z M20 34V18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"/></svg></div>\n          <div class=\"ds-grid__caption\">\n            <span class=\"ds-grid__price\">$2.00</span>\n            <h3 class=\"ds-grid__title\"><a href=\"#product\">Radish 'French Dawn'</a></h3>\n            <p class=\"ds-grid__text\">Ready in four weeks from sowing. 300 seeds.</p>\n            <span class=\"ds-rating\">&#9733;&#9733;&#9733;&#9733;&#9734; <span class=\"ds-rating__count\">19 reviews</span></span>\n          </div>\n          <div class=\"ds-grid__foot\"><a class=\"ds-button ds-button--small\" href=\"#basket\">Add to basket</a><a class=\"ds-link\" href=\"#product\">Details</a></div>\n        </div>\n        <div class=\"ds-grid__cell\">\n          <div class=\"ds-grid__tile\"><svg class=\"ds-grid__icon\" viewBox=\"0 0 40 40\" aria-hidden=\"true\"><path d=\"M8 32l14-14 M22 18a7 7 0 0 1 9-9l-5 5 4 4 5-5a7 7 0 0 1-9 9\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"/></svg></div>\n          <div class=\"ds-grid__caption\">\n            <span class=\"ds-grid__price\">$14.00</span>\n            <h3 class=\"ds-grid__title\"><a href=\"#product\">Hand trowel, ash handle</a></h3>\n            <p class=\"ds-grid__text\">Forged steel blade, made to be sharpened.</p>\n            <span class=\"ds-rating\">&#9733;&#9733;&#9733;&#9733;&#9733; <span class=\"ds-rating__count\">88 reviews</span></span>\n          </div>\n          <div class=\"ds-grid__foot\"><a class=\"ds-button ds-button--small\" href=\"#basket\">Add to basket</a><a class=\"ds-link\" href=\"#product\">Details</a></div>\n        </div>\n        <div class=\"ds-grid__cell\">\n          <div class=\"ds-grid__tile ds-grid__tile--2\"><span class=\"ds-badge ds-badge--warning ds-grid__flag\">Last few</span><svg class=\"ds-grid__icon\" viewBox=\"0 0 40 40\" aria-hidden=\"true\"><path d=\"M8 12h24l-3 22H11z M6 8h28v4H6z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"/></svg></div>\n          <div class=\"ds-grid__caption\">\n            <span class=\"ds-grid__price\">$6.50</span>\n            <h3 class=\"ds-grid__title\"><a href=\"#product\">Seed trays, set of five</a></h3>\n            <p class=\"ds-grid__text\">Rigid trays that last more than one season.</p>\n            <span class=\"ds-rating\">&#9733;&#9733;&#9733;&#9734;&#9734; <span class=\"ds-rating__count\">6 reviews</span></span>\n          </div>\n          <div class=\"ds-grid__foot\"><a class=\"ds-button ds-button--small\" href=\"#basket\">Add to basket</a><a class=\"ds-link\" href=\"#product\">Details</a></div>\n        </div>\n      </div>\n      <div class=\"ds-table__foot\">\n        <ul class=\"ds-pagination\" data-component=\"pagination\">\n          <li><a class=\"ds-pagination__link is-disabled\" href=\"#home\" aria-label=\"Previous\"></a></li>\n          <li><a class=\"ds-pagination__link is-current\" href=\"#home\">1</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#home\">2</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#home\">3</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#home\">4</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#home\" aria-label=\"Next\"></a></li>\n        </ul>\n        <span class=\"ds-muted\">Showing 1 to 6 of 1,240 products</span>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"product\">\n  <ol class=\"ds-breadcrumb\" data-component=\"breadcrumb\">\n    <li class=\"ds-breadcrumb__item\"><a class=\"ds-link\" href=\"#home\">Shop</a></li>\n    <li class=\"ds-breadcrumb__item\"><a class=\"ds-link\" href=\"#home\">Vegetable seeds</a></li>\n    <li class=\"ds-breadcrumb__item ds-breadcrumb__current\">Tomato 'Amber Plum'</li>\n  </ol>\n  <header class=\"ds-page-header\" data-component=\"page-header\">\n    <div class=\"ds-page-header__copy\">\n      <h1 class=\"ds-page-header__title\">Tomato 'Amber Plum'</h1>\n      <p class=\"ds-page-header__text\">Seed of the week: a small yellow plum tomato for the greenhouse.</p>\n    </div>\n    <div class=\"ds-page-header__actions\">\n      <a class=\"ds-button ds-button--secondary\" href=\"#home\">Back to the shop</a>\n    </div>\n  </header>\n\n  <div class=\"ds-product\">\n    <div class=\"ds-product__art\">\n      <div class=\"ds-product__picture\"><svg viewBox=\"0 0 40 40\" aria-hidden=\"true\"><path d=\"M20 12c8 0 13 5 13 11s-5 11-13 11S7 29 7 23s5-11 13-11z M20 12c-1-3-3-5-6-6 M20 12c1-3 3-5 6-6 M20 12V6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/></svg></div>\n      <ul class=\"ds-product__thumbs\">\n        <li class=\"ds-product__thumb is-current\"></li>\n        <li class=\"ds-product__thumb ds-product__thumb--2\"></li>\n        <li class=\"ds-product__thumb ds-product__thumb--3\"></li>\n        <li class=\"ds-product__thumb ds-product__thumb--4\"></li>\n      </ul>\n    </div>\n    <div class=\"ds-product__buy\">\n      <p><span class=\"ds-product__price\">$2.40</span><span class=\"ds-product__was\">$3.00</span></p>\n      <p class=\"ds-badgerow\"><span class=\"ds-badge ds-badge--success\">In stock</span><span class=\"ds-badge ds-badge--danger\">Sale</span><span class=\"ds-tooltip ds-tooltip--plain\" tabindex=\"0\"><span class=\"ds-badge ds-badge--info\">Greenhouse</span><span class=\"ds-tooltip__tip\" role=\"tooltip\">Needs glass or a tunnel north of the 50th parallel.</span></span> <span class=\"ds-rating\">&#9733;&#9733;&#9733;&#9733;&#9733; <span class=\"ds-rating__count\">41 reviews</span></span></p>\n      <p class=\"ds-lead\">Sweet, thin-skinned fruit the size of a large grape, on a tall plant that crops from July until the first frost.</p>\n      <p>Packet of 20 seeds, packed this season. Sow from February to April under glass, 5 mm deep.</p>\n      <form class=\"ds-product__form\" action=\"#basket\">\n        <label class=\"ds-form__field ds-product__qty\"><span class=\"ds-form__label\">Packets</span>\n          <select class=\"ds-form__select\"><option>1</option><option>2</option><option>3</option></select>\n        </label>\n        <a class=\"ds-button ds-button--large\" href=\"#basket\">Add to basket</a>\n        <a class=\"ds-button ds-button--secondary ds-button--large\" href=\"#product\">Save for later</a>\n      </form>\n    </div>\n  </div>\n\n  <ul class=\"ds-tabs\" data-component=\"tabs\">\n    <li><a class=\"ds-tabs__tab is-current\" href=\"#product\">Description</a></li>\n    <li><a class=\"ds-tabs__tab\" href=\"#product\">Growing notes</a></li>\n    <li><a class=\"ds-tabs__tab\" href=\"#product\">Reviews <span class=\"ds-badge ds-badge--quiet\">41</span></a></li>\n    <li><a class=\"ds-tabs__tab\" href=\"#product\">Delivery</a></li>\n  </ul>\n\n  <div class=\"ds-row ds-row--level ds-row--flush\">\n    <div class=\"ds-col ds-col--wide\">\n      <article class=\"ds-prose ds-spaced\" data-component=\"typography\">\n        <h1>About this variety</h1>\n        <p class=\"ds-prose__lead\">An old greenhouse tomato, grown for flavour and not for the shelf.</p>\n        <p>The plants reach two metres and need a cane or a string. Pinch out the side shoots and <strong>stop the plant after six trusses</strong>, so that the last fruit ripens before the light goes.</p>\n        <h2>Sowing</h2>\n        <ul>\n          <li>Sow in small pots at 18 to 21 degrees</li>\n          <li>Pot on when the first true leaves show</li>\n          <li>Plant out under glass in early May</li>\n        </ul>\n        <h3>Ordering by code</h3>\n        <p>Every packet has a code on the back. Type <code>TOM-AP-20</code> into the search box to find this one again.</p>\n      </article>\n      <h2 class=\"ds-title ds-title--small\">Before you order</h2>\n      <div class=\"ds-accordion\">\n        <details class=\"ds-accordion__item\" name=\"seed-questions\" open>\n          <summary class=\"ds-accordion__head\">How many plants will one packet give me?</summary>\n          <div class=\"ds-accordion__body\"><p>Twenty seeds, of which eighteen or more should come up. Most gardens want four to six plants.</p></div>\n        </details>\n        <details class=\"ds-accordion__item\" name=\"seed-questions\">\n          <summary class=\"ds-accordion__head\">Can it grow outdoors?</summary>\n          <div class=\"ds-accordion__body\"><p>In a warm summer, against a south wall. Under glass it crops a month longer.</p></div>\n        </details>\n        <details class=\"ds-accordion__item\" name=\"seed-questions\">\n          <summary class=\"ds-accordion__head\">What if nothing comes up?</summary>\n          <div class=\"ds-accordion__body\"><p>Tell us before the end of the season and we replace the packet, no questions asked.</p></div>\n        </details>\n      </div>\n      <p class=\"ds-linkrow\" data-component=\"links\">\n        <strong>Goes well with:</strong>\n        <a class=\"ds-link\" href=\"#product\">Basil 'Sweet Green'</a>\n        <a class=\"ds-link is-visited\" href=\"#product\">Tomato feed, 1 litre</a>\n        <a class=\"ds-link is-hover\" href=\"#product\">Bamboo canes, 2 m</a>\n        <a class=\"ds-link is-active\" href=\"#home\">All tomatoes</a>\n        <a class=\"ds-link ds-link--quiet\" href=\"#home\">Back to the shop</a>\n      </p>\n    </div>\n    <div class=\"ds-col ds-col--stack\">\n      <section class=\"ds-panel ds-grow\">\n        <h2 class=\"ds-panel__title\">What growers say <span class=\"ds-badge ds-badge--quiet\">41</span></h2>\n        <div class=\"ds-panel__body\">\n          <p class=\"ds-progress__label\"><span>5 stars</span><span>33</span></p>\n          <div class=\"ds-progress ds-progress--small\" role=\"progressbar\" aria-valuenow=\"80\" aria-valuemin=\"0\" aria-valuemax=\"100\"><div class=\"ds-progress__bar ds-progress__bar--80 ds-progress__bar--success\"></div></div>\n          <p class=\"ds-progress__label\"><span>4 stars</span><span>6</span></p>\n          <div class=\"ds-progress ds-progress--small\" role=\"progressbar\" aria-valuenow=\"20\" aria-valuemin=\"0\" aria-valuemax=\"100\"><div class=\"ds-progress__bar ds-progress__bar--20\"></div></div>\n          <p class=\"ds-progress__label\"><span>3 stars or fewer</span><span>2</span></p>\n          <div class=\"ds-progress ds-progress--small\" role=\"progressbar\" aria-valuenow=\"20\" aria-valuemin=\"0\" aria-valuemax=\"100\"><div class=\"ds-progress__bar ds-progress__bar--20 ds-progress__bar--warning\"></div></div>\n          <ul class=\"ds-list\">\n            <li class=\"ds-list__item\"><span class=\"ds-rating\">&#9733;&#9733;&#9733;&#9733;&#9733;</span><span class=\"ds-list__text\">Every seed came up, and the fruit is the best I have grown.</span><span class=\"ds-list__meta\"><span class=\"ds-avatar ds-avatar--small\">A</span> Anouk Visser, 2 March 2013</span></li>\n            <li class=\"ds-list__item\"><span class=\"ds-rating\">&#9733;&#9733;&#9733;&#9733;&#9734;</span><span class=\"ds-list__text\">Lovely flavour. Splits if you water unevenly.</span><span class=\"ds-list__meta\"><span class=\"ds-avatar ds-avatar--small ds-avatar--2\">T</span> Tomas Okafor, 19 February 2013</span></li>\n            <li class=\"ds-list__item\"><span class=\"ds-rating\">&#9733;&#9733;&#9733;&#9733;&#9733;</span><span class=\"ds-list__text\">Third year of buying these. Still cropping in October.</span><span class=\"ds-list__meta\"><span class=\"ds-avatar ds-avatar--small ds-avatar--4\">G</span> Greta Holm, 4 February 2013</span></li>\n          </ul>\n        </div>\n      </section>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"basket\">\n  <ol class=\"ds-breadcrumb\">\n    <li class=\"ds-breadcrumb__item\"><a class=\"ds-link\" href=\"#home\">Shop</a></li>\n    <li class=\"ds-breadcrumb__item ds-breadcrumb__current\">Basket</li>\n  </ol>\n  <header class=\"ds-page-header\">\n    <div class=\"ds-page-header__copy\">\n      <h1 class=\"ds-page-header__title\">Your basket</h1>\n      <p class=\"ds-page-header__text\">Four lines, seven items. Nothing is reserved until you pay.</p>\n    </div>\n    <div class=\"ds-page-header__actions\">\n      <a class=\"ds-button ds-button--secondary\" href=\"#home\">Keep shopping</a>\n    </div>\n  </header>\n\n  <ol class=\"ds-steps\">\n    <li class=\"ds-steps__step is-current\">1. Basket <span class=\"ds-steps__note\">Check what you chose</span></li>\n    <li class=\"ds-steps__step\">2. Details <span class=\"ds-steps__note\">Where it should go</span></li>\n    <li class=\"ds-steps__step\">3. Payment <span class=\"ds-steps__note\">Card or bank transfer</span></li>\n  </ol>\n\n  <div class=\"ds-row ds-row--level ds-row--flush\">\n    <div class=\"ds-col ds-col--wide\">\n      <div class=\"ds-noticerow\" data-component=\"notice\">\n        <p class=\"ds-notice\"><span class=\"ds-notice__title\">Free delivery.</span> Your order is over $30, so the post is on us this week.</p>\n        <p class=\"ds-notice ds-notice--error\"><span class=\"ds-notice__title\">Only two left.</span> You asked for three sets of seed trays. We have changed it to two.</p>\n      </div>\n      <div class=\"ds-table__wrap\">\n        <table class=\"ds-table\" data-component=\"table\">\n          <thead>\n            <tr><th scope=\"col\">Item</th><th scope=\"col\" class=\"ds-table__num\">Price</th><th scope=\"col\">Quantity</th><th scope=\"col\" class=\"ds-table__num\">Total</th><th scope=\"col\"><span class=\"ds-muted\">Remove</span></th></tr>\n          </thead>\n          <tbody>\n            <tr><td><div class=\"ds-item\"><span class=\"ds-item__swatch\"></span><div><a class=\"ds-item__name\" href=\"#product\">Tomato 'Amber Plum'</a><span class=\"ds-item__meta\">20 seeds <span class=\"ds-badge ds-badge--danger\">Sale</span></span></div></div></td><td class=\"ds-table__num\">$2.40</td><td><input class=\"ds-form__input ds-table__qty\" type=\"text\" value=\"2\" aria-label=\"Quantity\"></td><td class=\"ds-table__num\">$4.80</td><td><a class=\"ds-button ds-button--secondary ds-button--small ds-button--remove\" href=\"#basket\" aria-label=\"Remove\"></a></td></tr>\n            <tr><td><div class=\"ds-item\"><span class=\"ds-item__swatch ds-item__swatch--3\"></span><div><a class=\"ds-item__name\" href=\"#product\">Squash 'Little Lantern'</a><span class=\"ds-item__meta\">8 seeds</span></div></div></td><td class=\"ds-table__num\">$3.10</td><td><input class=\"ds-form__input ds-table__qty\" type=\"text\" value=\"1\" aria-label=\"Quantity\"></td><td class=\"ds-table__num\">$3.10</td><td><a class=\"ds-button ds-button--secondary ds-button--small ds-button--remove\" href=\"#basket\" aria-label=\"Remove\"></a></td></tr>\n            <tr><td><div class=\"ds-item\"><span class=\"ds-item__swatch ds-item__swatch--4\"></span><div><a class=\"ds-item__name\" href=\"#product\">Hand trowel, ash handle</a><span class=\"ds-item__meta\">Forged steel <span class=\"ds-badge ds-badge--success\">In stock</span></span></div></div></td><td class=\"ds-table__num\">$14.00</td><td><input class=\"ds-form__input ds-table__qty\" type=\"text\" value=\"2\" aria-label=\"Quantity\"></td><td class=\"ds-table__num\">$28.00</td><td><a class=\"ds-button ds-button--secondary ds-button--small ds-button--remove\" href=\"#basket\" aria-label=\"Remove\"></a></td></tr>\n            <tr><td><div class=\"ds-item\"><span class=\"ds-item__swatch ds-item__swatch--2\"></span><div><a class=\"ds-item__name\" href=\"#product\">Seed trays, set of five</a><span class=\"ds-item__meta\">Rigid <span class=\"ds-badge ds-badge--warning\">Last few</span></span></div></div></td><td class=\"ds-table__num\">$6.50</td><td><input class=\"ds-form__input ds-table__qty is-error\" type=\"text\" value=\"2\" aria-label=\"Quantity\"></td><td class=\"ds-table__num\">$13.00</td><td><a class=\"ds-button ds-button--secondary ds-button--small ds-button--remove\" href=\"#basket\" aria-label=\"Remove\"></a></td></tr>\n          </tbody>\n          <tfoot>\n            <tr><td colspan=\"3\">Goods</td><td class=\"ds-table__num\">$48.90</td><td></td></tr>\n            <tr><td colspan=\"3\">Delivery</td><td class=\"ds-table__num\">$0.00</td><td></td></tr>\n          </tfoot>\n        </table>\n      </div>\n      <div class=\"ds-table__foot ds-spaced\">\n        <div class=\"ds-buttonrow\" data-component=\"buttons\">\n          <a class=\"ds-button\" href=\"#checkout\">Go to checkout</a>\n          <a class=\"ds-button ds-button--secondary\" href=\"#basket\">Update quantities</a>\n          <a class=\"ds-button ds-button--danger\" href=\"#basket\">Empty the basket</a>\n          <button class=\"ds-button\" type=\"button\" disabled>Apply a voucher</button>\n        </div>\n      </div>\n      <div class=\"ds-dialog\" data-component=\"dialog\">\n        <div class=\"ds-dialog__box\" role=\"dialog\" aria-labelledby=\"dialog-title\">\n          <div class=\"ds-dialog__head\">\n            <h2 class=\"ds-dialog__title\" id=\"dialog-title\">Empty the basket?</h2>\n            <a class=\"ds-dialog__close\" href=\"#basket\" aria-label=\"Close\"></a>\n          </div>\n          <div class=\"ds-dialog__body\">\n            <p>All four lines will be removed. Items you saved for later stay where they are.</p>\n          </div>\n          <div class=\"ds-dialog__actions\">\n            <a class=\"ds-button ds-button--secondary\" href=\"#basket\">Keep the basket</a>\n            <a class=\"ds-button ds-button--danger\" href=\"#home\">Empty it</a>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"ds-col ds-col--stack\">\n      <section class=\"ds-panel ds-panel--primary\">\n        <h2 class=\"ds-panel__title\">Order summary</h2>\n        <div class=\"ds-panel__body\">\n          <ul class=\"ds-summary ds-spaced\">\n            <li class=\"ds-summary__row\"><span>Goods, 7 items</span><span>$48.90</span></li>\n            <li class=\"ds-summary__row\"><span>Delivery</span><span>$0.00</span></li>\n            <li class=\"ds-summary__row ds-summary__row--total\"><span>To pay</span><span>$48.90</span></li>\n          </ul>\n          <a class=\"ds-button ds-button--success ds-button--block\" href=\"#checkout\">Go to checkout</a>\n        </div>\n        <div class=\"ds-panel__foot\">Prices include tax. Posted within 48 hours.</div>\n      </section>\n      <div class=\"ds-badgerow\" data-component=\"badge\">\n        <span class=\"ds-muted\">On a line:</span>\n        <span class=\"ds-badge\">Seed of the week</span>\n        <span class=\"ds-badge ds-badge--success\">In stock</span>\n        <span class=\"ds-badge ds-badge--warning\">Last few</span>\n        <span class=\"ds-badge ds-badge--danger\">Sale</span>\n        <span class=\"ds-badge ds-badge--info\">Greenhouse</span>\n      </div>\n      <div class=\"ds-empty ds-grow\" data-component=\"empty\">\n        <svg class=\"ds-empty__icon\" viewBox=\"0 0 40 40\" aria-hidden=\"true\"><path d=\"M6 14h28l-3 20H9z M14 14a6 6 0 0 1 12 0\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"/></svg>\n        <h2 class=\"ds-empty__title\">Nothing saved for later</h2>\n        <p class=\"ds-empty__text\">Items you set aside on a product page wait here until you want them.</p>\n        <a class=\"ds-button ds-button--secondary\" href=\"#product\">See the seed of the week</a>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"checkout\">\n  <ol class=\"ds-breadcrumb\">\n    <li class=\"ds-breadcrumb__item\"><a class=\"ds-link\" href=\"#home\">Shop</a></li>\n    <li class=\"ds-breadcrumb__item\"><a class=\"ds-link\" href=\"#basket\">Basket</a></li>\n    <li class=\"ds-breadcrumb__item ds-breadcrumb__current\">Checkout</li>\n  </ol>\n  <header class=\"ds-page-header\">\n    <div class=\"ds-page-header__copy\">\n      <h1 class=\"ds-page-header__title\">Checkout</h1>\n      <p class=\"ds-page-header__text\">Tell us where the parcel should go. You pay on the next page.</p>\n    </div>\n    <div class=\"ds-page-header__actions\">\n      <a class=\"ds-button ds-button--secondary\" href=\"#basket\">Back to the basket</a>\n    </div>\n  </header>\n\n  <ol class=\"ds-steps\">\n    <li class=\"ds-steps__step is-done\">1. Basket <span class=\"ds-steps__note\">Seven items, $48.90</span></li>\n    <li class=\"ds-steps__step is-current\">2. Details <span class=\"ds-steps__note\">Where it should go</span></li>\n    <li class=\"ds-steps__step\">3. Payment <span class=\"ds-steps__note\">Card or bank transfer</span></li>\n  </ol>\n\n  <div class=\"ds-row ds-row--level ds-row--flush\">\n    <div class=\"ds-col ds-col--wide\">\n      <section class=\"ds-panel\">\n        <h2 class=\"ds-panel__title\">Delivery details</h2>\n        <form class=\"ds-form ds-form--flush\" data-component=\"form\" action=\"#checkout\">\n          <div class=\"ds-panel__body ds-form\">\n            <div class=\"ds-form__row\">\n              <label class=\"ds-form__field is-success\"><span class=\"ds-form__label\">Full name</span><input class=\"ds-form__input is-success\" type=\"text\" value=\"Rui Pacheco\"><span class=\"ds-form__ok\">Looks good.</span></label>\n              <label class=\"ds-form__field is-error\"><span class=\"ds-form__label\">Email</span><input class=\"ds-form__input is-error\" type=\"text\" value=\"rui@pacheco\"><span class=\"ds-form__error\">Enter a complete email address.</span></label>\n            </div>\n            <label class=\"ds-form__field\"><span class=\"ds-form__label\">Street and number</span><input class=\"ds-form__input is-focus\" type=\"text\" placeholder=\"As the postman knows it\"></label>\n            <div class=\"ds-form__row\">\n              <label class=\"ds-form__field\"><span class=\"ds-form__label\">Town</span><input class=\"ds-form__input\" type=\"text\" value=\"Harbour End\"></label>\n              <label class=\"ds-form__field\"><span class=\"ds-form__label\">Postcode</span><input class=\"ds-form__input\" type=\"text\" value=\"40 112\"></label>\n              <label class=\"ds-form__field\"><span class=\"ds-form__label\">Delivery</span>\n                <select class=\"ds-form__select\"><option>Letter post, free</option><option>Tracked parcel, $4.00</option><option>Collect from the nursery</option></select>\n              </label>\n            </div>\n            <label class=\"ds-form__field\"><span class=\"ds-form__label\">Note for the packer</span><textarea class=\"ds-form__textarea\" rows=\"3\" placeholder=\"A safe place to leave the parcel, a gift message\"></textarea><span class=\"ds-form__hint\">Optional. Seeds fit through most letter boxes.</span></label>\n            <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> <span>Send me the sowing calendar each month. <a class=\"ds-link\" href=\"#home\">See this month's</a></span></label>\n          </div>\n          <div class=\"ds-form__actions\">\n            <button class=\"ds-button\" type=\"submit\">Continue to payment</button>\n            <a class=\"ds-button ds-button--secondary\" href=\"#basket\">Back to the basket</a>\n          </div>\n        </form>\n      </section>\n    </div>\n    <div class=\"ds-col ds-col--stack\">\n      <section class=\"ds-panel\">\n        <h2 class=\"ds-panel__title\">In this order <span class=\"ds-badge ds-badge--quiet\">7</span></h2>\n        <div class=\"ds-panel__body\">\n          <ul class=\"ds-summary\">\n            <li class=\"ds-summary__row\"><span>2 x Tomato 'Amber Plum'</span><span>$4.80</span></li>\n            <li class=\"ds-summary__row\"><span>1 x Squash 'Little Lantern'</span><span>$3.10</span></li>\n            <li class=\"ds-summary__row\"><span>2 x Hand trowel</span><span>$28.00</span></li>\n            <li class=\"ds-summary__row\"><span>2 x Seed trays</span><span>$13.00</span></li>\n            <li class=\"ds-summary__row ds-summary__row--total\"><span>To pay</span><span>$48.90</span></li>\n          </ul>\n        </div>\n      </section>\n      <section class=\"ds-panel ds-panel--success\">\n        <h2 class=\"ds-panel__title\">If a seed fails</h2>\n        <div class=\"ds-panel__body\">\n          <p>Tell us before the end of the season and we replace the packet, no questions asked.</p>\n        </div>\n      </section>\n      <div class=\"ds-well ds-grow\">\n        <h2 class=\"ds-title ds-title--small\">Ordering for an allotment society?</h2>\n        <p class=\"ds-col__text\">Orders of ten packets or more get a tenth off. Ask before you pay.</p>\n        <a class=\"ds-button ds-button--info\" href=\"#home\">Ask about a group order</a>\n      </div>\n    </div>\n  </div>\n</section>\n\n</main>\n\n<footer class=\"ds-footer\" data-component=\"footer\">\n  <div class=\"ds-footer__inner\">\n    <div class=\"ds-footer__cols\">\n      <div>\n        <h2 class=\"ds-footer__title\">Shop</h2>\n        <ul class=\"ds-footer__links\">\n          <li><a class=\"ds-footer__link\" href=\"#home\">All departments</a></li>\n          <li><a class=\"ds-footer__link\" href=\"#product\">Seed of the week</a></li>\n        </ul>\n      </div>\n      <div>\n        <h2 class=\"ds-footer__title\">Your order</h2>\n        <ul class=\"ds-footer__links\">\n          <li><a class=\"ds-footer__link\" href=\"#basket\">Basket</a></li>\n          <li><a class=\"ds-footer__link\" href=\"#checkout\">Checkout</a></li>\n        </ul>\n      </div>\n      <div>\n        <h2 class=\"ds-footer__title\">The nursery</h2>\n        <ul class=\"ds-footer__links\">\n          <li><a class=\"ds-footer__link\" href=\"#checkout\">Ask a grower</a></li>\n          <li><a class=\"ds-footer__link\" href=\"#home\">Back to top</a></li>\n        </ul>\n      </div>\n    </div>\n    <p class=\"ds-footer__text\">&copy; 2013 chronoskin. Seeds and tools for the kitchen garden.</p>\n  </div>\n</footer>\n\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.bootstrap-era.shop.s05.p03.t05.u02\",\n  \"library\": \"2026.10.09-1346\",\n  \"era\": {\n    \"slug\": \"bootstrap-era\",\n    \"years\": [\n      2011,\n      2014\n    ]\n  },\n  \"archetype\": \"shop\",\n  \"mode\": \"mix\",\n  \"markup\": \"modern\",\n  \"viewport\": {\n    \"width\": 1280,\n    \"fluid\": false,\n    \"responsive\": true\n  },\n  \"source\": \"https://chrono.skin/s/v1-bs-5352\",\n  \"short\": \"v1-bs-5352\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #111111;\n  --color-canvas: #111111;\n  --color-surface: #1b1b1b;\n  --color-surface-alt: #222222;\n  --color-surface-strong: #333333;\n  --color-bar: #1fa67a;\n  --color-bar-text: #d2ebe3;\n  --color-bar-alt: #252525;\n  --color-bar-alt-text: #999999;\n  --color-inverse: #eeeeee;\n  --color-inverse-text: #333333;\n  --color-text: #cccccc;\n  --color-text-muted: #999999;\n  --color-heading: #ffffff;\n  --color-heading-alt: #a5d8c7;\n  --color-link: #21b384;\n  --color-link-quiet: #999999;\n  --color-link-visited: #21b384;\n  --color-link-hover: #a5d8c7;\n  --color-link-active: #1b926c;\n  --color-border: #333333;\n  --color-border-strong: #5a5a5a;\n  --color-border-muted: #252525;\n  --color-accent: #1b926c;\n  --color-accent-text: #ffffff;\n  --color-accent-alt: #5fb0e4;\n  --color-fill-1: #1b926c;\n  --color-fill-2: #6d3353;\n  --color-fill-3: #006dcc;\n  --color-fill-4: #c09853;\n  --color-button: #1fa67a;\n  --color-button-text: #ffffff;\n  --color-button-hover-text: #ffffff;\n  --color-button-secondary: #333333;\n  --color-button-secondary-text: #ffffff;\n  --color-input: #222222;\n  --color-input-text: #cccccc;\n  --color-input-border: #5a5a5a;\n  --color-disabled: #252525;\n  --color-disabled-text: #5a5a5a;\n  --color-danger: #da4f49;\n  --color-danger-surface: #2d1a1a;\n  --color-success: #62c462;\n  --color-warning: #f89406;\n  --color-notice: #333333;\n  --color-notice-text: #d2ebe3;\n  --color-focus: #a5d8c7;\n  --color-shadow: rgb(0 0 0 / 0.5);\n  --color-overlay: rgb(0 0 0 / 0.7);\n}\n\n/* @part type */\n:root {\n  --font-body: Lato, \"Source Sans Pro\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;\n  --font-heading: Lato, \"Source Sans Pro\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;\n  --font-ui: Lato, \"Source Sans Pro\", \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;\n  --font-mono: \"Source Code Pro\", Menlo, Consolas, monospace;\n  --text-base: 15px;\n  --text-small: 13px;\n  --text-ui: 15px;\n  --text-large: 20px;\n  --text-display: 52px;\n  --text-h1: 38px;\n  --text-h2: 28px;\n  --text-h3: 21px;\n  --line-body: 1.55;\n  --line-heading: 1.15;\n  --line-display: 1.1;\n  --weight-body: 400;\n  --weight-bold: 700;\n  --weight-heading: 300;\n  --weight-display: 300;\n  --weight-ui: 700;\n  --heading-transform: none;\n  --heading-tracking: 0;\n  --display-tracking: -1px;\n  --figure-shift: 0em;\n  --ui-transform: none;\n  --link-decoration: none;\n  --link-decoration-hover: underline;\n  --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n  --border-width: 1px;\n  --border-width-strong: 2px;\n  --border-style: solid;\n  --radius-control: 4px;\n  --radius-panel: 4px;\n  --radius-pill: 10px;\n  --radius-page: 6px;\n  --shadow-panel: 0 1px 1px var(--color-shadow);\n  --shadow-control: none;\n  --shadow-control-hover: none;\n  --shadow-control-pressed: inset 0 3px 5px var(--color-shadow);\n  --shadow-dialog: 0 5px 15px var(--color-shadow);\n  --shadow-text: none;\n  --fill-page: var(--color-page);\n  --fill-bar: var(--color-bar);\n  --fill-bar-alt: var(--color-bar-alt);\n  --fill-inverse: var(--color-inverse);\n  --fill-accent: var(--color-accent);\n  --fill-panel: var(--color-surface);\n  --fill-button: var(--color-button);\n  --fill-button-hover: linear-gradient(color-mix(in srgb, black 12%, transparent), color-mix(in srgb, black 12%, transparent)), var(--color-button);\n  --fill-button-secondary: var(--color-button-secondary);\n  --fill-input: var(--color-input);\n  --focus-ring: 3px solid color-mix(in srgb, var(--color-focus) 45%, transparent);\n  --transition: border-color 0.15s ease-in-out;\n  --backdrop-blur: 0px;\n}\n"
  }
}