@aparte/plugin-cards 0.0.0-stage → 0.29.0

package/dist/product.js

@@ -0,0 +1,1245 @@
+import { d as defineCard, o as str, b as formatNumber, p as word, e as el, k as glyph, h as formatPrice, c as currencyCode, w as webUrl, r as readPriceText, n as num, g as formatPercent } from "./format-CchcJRum.js";
+import { c as carousel } from "./carousel-CPy-0JGN.js";
+import { r as rating } from "./rating-B8Mdx_b_.js";
+const svg = (body) => `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">${body}</svg>`;
+const BAG = svg('<path d="M5.5 8h13l-1 11.2a1.8 1.8 0 0 1-1.8 1.6H8.3a1.8 1.8 0 0 1-1.8-1.6z"/><path d="M9 10.5V6.8a3 3 0 0 1 6 0v3.7"/>');
+const TRUCK = svg('<path d="M2.8 6.5h10.4v9.3H2.8z"/><path d="M13.2 9.5h4.1l3 3.2v3.1h-7.1"/><circle cx="7" cy="17.3" r="1.7"/><circle cx="17" cy="17.3" r="1.7"/>');
+const SEARCH = svg('<circle cx="10.8" cy="10.8" r="6.3"/><path d="M15.5 15.5l4.7 4.7"/>');
+const TAG = svg('<path d="M3.5 12.6V4.8a1.3 1.3 0 0 1 1.3-1.3h7.8l8 8a1.3 1.3 0 0 1 0 1.8l-7 7a1.3 1.3 0 0 1-1.8 0z"/><circle cx="8.3" cy="8.3" r="1.5"/>');
+const productStyles = `/* =========================================
+   The product card — @aparte/plugin-cards/product
+   =========================================
+   Three variants of one card, chosen by \`data-variant\` on its root:
+     card     a tile: the photo, the shop, the name, the stars, the price. Several
+              products are a row of tiles that scrolls, and the card drops its own
+              frame so the tiles are not boxes inside a box.
+     compact  a row per product — thumbnail, name, stars, price — a list to scan.
+     detail   one product at length: the photo beside the facts on a wide card, above
+              them on a narrow one; the others in a small row under it.
+   Every colour is a theme token or derived from one, so light and dark follow the chat.
+   */
+
+.aparte-product-card {
+  --aparte-product-tile-size: 12.5rem;
+  --aparte-product-thumb-size: 3.5rem;
+  --aparte-product-media-radius: var(--aparte-radius-lg);
+  /* A product photo is shot on white. The plate it sits on is near-white in BOTH schemes
+     (derived from the ink, so it is a hair off white in light and a hair off cream in
+     dark) and the photo is multiplied into it: its white background melts into the plate
+     instead of sitting as a white square on a grey one. A photo on a dark plate in dark
+     mode keeps its white box whatever we do — the shops' own apps show it light too. */
+  --aparte-product-media-bg: color-mix(in oklab, var(--aparte-text) 5%, #fff);
+  --aparte-product-image-fit: contain;
+  --aparte-product-image-inset: 7%;
+  /* Where there is no photo: the theme's own surfaces, warmed by its accent. */
+  --aparte-product-placeholder: linear-gradient(
+    145deg,
+    color-mix(in oklab, var(--aparte-primary) 16%, var(--aparte-surface-2)) 0%,
+    var(--aparte-surface-2) 55%,
+    color-mix(in oklab, var(--aparte-text) 5%, var(--aparte-surface-2)) 100%
+  );
+  --aparte-product-placeholder-ink: color-mix(in oklab, var(--aparte-text) 30%, transparent);
+  --aparte-product-price-color: var(--aparte-text);
+  --aparte-product-hover-border: color-mix(in oklab, var(--aparte-text) 22%, var(--aparte-border));
+  --aparte-product-hover-shadow: 0 8px 18px -12px rgb(0 0 0 / 0.38);
+}
+
+/* ── Widths: each variant asks for its own; the bubble's limit caps them all ── */
+
+.aparte-product-card[data-variant="card"] { --aparte-rich-card-max-inline-size: 16.5rem; }
+.aparte-product-card[data-variant="compact"] { --aparte-rich-card-max-inline-size: 28rem; }
+.aparte-product-card[data-variant="detail"] { --aparte-rich-card-max-inline-size: 36rem; }
+.aparte-product-card:has(> .aparte-product__collection) { --aparte-rich-card-max-inline-size: 42rem; }
+
+/* Several tiles: each is framed, so the card is not. The kit's buttons under it lose
+   their band, which would otherwise float as a strip under nothing. */
+.aparte-product-card:has(> .aparte-product__collection) {
+  overflow: visible;
+  border-color: transparent;
+  border-radius: 0;
+  background: transparent;
+}
+
+.aparte-product-card:has(> .aparte-product__collection) > .aparte-rich-card__actions {
+  padding-inline: 0;
+  border-block-start: 0;
+  background: none;
+}
+
+/* ── Headings: the collection's title, the query of a running search ─── */
+
+.aparte-product__heading {
+  margin-block-end: var(--aparte-space-4);
+  font-size: var(--aparte-font-size-md);
+  font-weight: var(--aparte-font-weight-semibold);
+  overflow-wrap: anywhere;
+}
+
+.aparte-product-card[data-variant="compact"] > .aparte-product__heading {
+  margin: 0;
+  padding: var(--aparte-space-5) var(--aparte-space-6) var(--aparte-space-2);
+}
+
+.aparte-product__query {
+  display: flex;
+  align-items: center;
+  gap: var(--aparte-space-3);
+  min-inline-size: 0;
+  margin-block-end: var(--aparte-space-4);
+  color: var(--aparte-text-muted);
+  font-size: var(--aparte-font-size-md);
+  --aparte-rich-card-glyph-size: 1rem;
+}
+
+.aparte-product__query-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.aparte-product-card[data-variant="compact"] > .aparte-product__query,
+.aparte-product-card[data-variant="detail"] > .aparte-product__query {
+  margin: 0;
+  padding: var(--aparte-space-5) var(--aparte-space-6) 0;
+}
+
+/* ── The carousel, in product sizes ──────────────────────────────────── */
+
+.aparte-product-card .aparte-rich-card__carousel {
+  --aparte-rich-card-slide-size: var(--aparte-product-tile-size);
+}
+
+/* ── A product, whatever its shape ───────────────────────────────────── */
+
+.aparte-product {
+  position: relative;
+  min-inline-size: 0;
+  color: var(--aparte-text);
+}
+
+/* The title's link covers the tile or the row: one link per product, read once. */
+.aparte-product__link {
+  color: inherit;
+  text-decoration: none;
+}
+
+.aparte-product--tile .aparte-product__link,
+.aparte-product--row .aparte-product__link {
+  outline: none;
+}
+
+.aparte-product--tile .aparte-product__link::after,
+.aparte-product--row .aparte-product__link::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+}
+
+.aparte-product[data-linked]:hover .aparte-product__title {
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.18em;
+}
+
+/* The ring is the product's, since the link is all of it. */
+.aparte-product--tile:has(.aparte-product__link:focus-visible) {
+  outline: var(--aparte-focus-outline-width) solid var(--aparte-border-focus);
+  outline-offset: var(--aparte-focus-outline-offset);
+}
+
+.aparte-product--row:has(.aparte-product__link:focus-visible) {
+  /* A row reaches the card's clipped edges: its ring is drawn inside. */
+  outline: var(--aparte-focus-outline-width) solid var(--aparte-border-focus);
+  outline-offset: calc(var(--aparte-focus-outline-width) * -1);
+}
+
+/* ── The photo ───────────────────────────────────────────────────────── */
+
+.aparte-product__media {
+  position: relative;
+  display: grid;
+  place-items: center;
+  aspect-ratio: 1;
+  overflow: hidden;
+  border-radius: var(--aparte-product-media-radius);
+  background: var(--aparte-product-media-bg);
+  isolation: isolate;
+}
+
+.aparte-product__media[data-empty] {
+  background: var(--aparte-product-placeholder);
+}
+
+.aparte-product__placeholder {
+  grid-area: 1 / 1;
+  color: var(--aparte-product-placeholder-ink);
+  --aparte-rich-card-glyph-size: clamp(1.25rem, 30%, 3.5rem);
+}
+
+.aparte-product__media:not([data-empty]) .aparte-product__placeholder { visibility: hidden; }
+
+.aparte-product__image {
+  grid-area: 1 / 1;
+  box-sizing: border-box;
+  inline-size: 100%;
+  block-size: 100%;
+  padding: var(--aparte-product-image-inset);
+  object-fit: var(--aparte-product-image-fit);
+  mix-blend-mode: multiply;
+  transition: scale var(--aparte-duration-slower) ease, opacity var(--aparte-duration-base) ease;
+}
+
+.aparte-product__image[hidden] { display: none; }
+
+.aparte-product[data-linked]:hover .aparte-product__image,
+.aparte-product__media-link:hover .aparte-product__image {
+  scale: 1.04;
+}
+
+/* Out of stock: the photo steps back, the line under it says why. */
+.aparte-product[data-availability="out-of-stock"] .aparte-product__image {
+  opacity: 0.55;
+  filter: grayscale(0.5);
+}
+
+.aparte-product__flags {
+  position: absolute;
+  z-index: 1;
+  inset-block-start: var(--aparte-space-3);
+  inset-inline-start: var(--aparte-space-3);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--aparte-space-2);
+  max-inline-size: calc(100% - var(--aparte-space-3) * 2);
+}
+
+/* The shop's word: a pill of the card's own surface over the plate, in either scheme. */
+.aparte-product__flags .aparte-product__badge {
+  max-inline-size: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  background: color-mix(in oklab, var(--aparte-surface-1) 90%, transparent);
+  color: var(--aparte-text);
+  box-shadow: 0 1px 3px rgb(0 0 0 / 0.14);
+  backdrop-filter: blur(6px);
+}
+
+.aparte-product__discount {
+  font-variant-numeric: tabular-nums;
+}
+
+/* ── The words beside the photo ──────────────────────────────────────── */
+
+.aparte-product__body {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--aparte-space-2);
+  min-inline-size: 0;
+}
+
+.aparte-product__merchant {
+  display: flex;
+  align-items: center;
+  gap: var(--aparte-space-2);
+  min-inline-size: 0;
+  color: var(--aparte-text-muted);
+  font-size: var(--aparte-font-size-xs);
+}
+
+.aparte-product__merchant-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.aparte-product__logo {
+  flex: none;
+  inline-size: 1rem;
+  block-size: 1rem;
+  border-radius: var(--aparte-radius-xs);
+  object-fit: cover;
+}
+
+.aparte-product__logo[hidden] { display: none; }
+
+.aparte-product__title {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  font-size: var(--aparte-font-size-md);
+  font-weight: var(--aparte-font-weight-medium);
+  line-height: 1.3;
+  overflow-wrap: anywhere;
+}
+
+.aparte-product__price {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--aparte-space-1) var(--aparte-space-3);
+  font-variant-numeric: tabular-nums;
+}
+
+.aparte-product__now {
+  color: var(--aparte-product-price-color);
+  font-size: var(--aparte-font-size-lg);
+  font-weight: var(--aparte-font-weight-bold);
+  letter-spacing: -0.01em;
+  white-space: nowrap;
+}
+
+.aparte-product__was {
+  color: var(--aparte-text-muted);
+  font-size: var(--aparte-font-size-sm);
+  text-decoration-thickness: 1px;
+  white-space: nowrap;
+}
+
+.aparte-product__price .aparte-product__discount { align-self: center; }
+
+/* Stock: a dot in the state's colour, the word in its readable ink. */
+.aparte-product__stock {
+  --aparte-product-stock-tone: var(--aparte-neutral);
+  --aparte-product-stock-ink: var(--aparte-text-muted);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--aparte-space-2);
+  min-inline-size: 0;
+  color: var(--aparte-product-stock-ink);
+  font-size: var(--aparte-font-size-xs);
+  font-weight: var(--aparte-font-weight-medium);
+}
+
+.aparte-product__stock[data-availability="in-stock"] { --aparte-product-stock-tone: var(--aparte-success); --aparte-product-stock-ink: var(--aparte-success-ink); }
+.aparte-product__stock[data-availability="low-stock"] { --aparte-product-stock-tone: var(--aparte-warning); --aparte-product-stock-ink: var(--aparte-warning-ink); }
+.aparte-product__stock[data-availability="out-of-stock"] { --aparte-product-stock-tone: var(--aparte-error); --aparte-product-stock-ink: var(--aparte-error-ink); }
+.aparte-product__stock[data-availability="preorder"] { --aparte-product-stock-tone: var(--aparte-info); --aparte-product-stock-ink: var(--aparte-info-ink); }
+
+.aparte-product__dot {
+  flex: none;
+  inline-size: 0.4375rem;
+  block-size: 0.4375rem;
+  border-radius: var(--aparte-radius-full);
+  background: var(--aparte-product-stock-tone);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--aparte-product-stock-tone) 20%, transparent);
+}
+
+.aparte-product__stock-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.aparte-product__shipping {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--aparte-space-2);
+  min-inline-size: 0;
+  color: var(--aparte-text-muted);
+  font-size: var(--aparte-font-size-xs);
+  --aparte-rich-card-glyph-size: 1rem;
+}
+
+.aparte-product__shipping[data-free] {
+  color: var(--aparte-success-ink);
+  font-weight: var(--aparte-font-weight-medium);
+}
+
+.aparte-product__shipping-icon:dir(rtl) { transform: scaleX(-1); }
+
+/* Buttons sit above the link that covers the product. */
+.aparte-product__actions {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--aparte-space-2);
+}
+
+/* ── card: the tile ──────────────────────────────────────────────────── */
+
+.aparte-product--tile {
+  display: flex;
+  flex-direction: column;
+  gap: var(--aparte-space-4);
+  padding: var(--aparte-space-3) var(--aparte-space-3) var(--aparte-space-4);
+  border-radius: var(--aparte-card-radius);
+}
+
+.aparte-product--tile .aparte-product__body { padding-inline: var(--aparte-space-2); }
+
+/* Two lines held even when the name takes one, so the prices in a row line up. */
+.aparte-product--tile .aparte-product__title { min-block-size: 2lh; }
+
+/* The price sits at the foot of the tile, level with its neighbours'. */
+.aparte-product--tile .aparte-product__price {
+  margin-block-start: auto;
+  padding-block-start: var(--aparte-space-1);
+}
+
+.aparte-product--tile .aparte-product__actions { padding-inline: var(--aparte-space-2); }
+.aparte-product--tile .aparte-product__action { flex: 1 1 auto; justify-content: center; }
+
+.aparte-product__collection .aparte-product--tile,
+.aparte-product__more .aparte-product--tile {
+  border: var(--aparte-border-width) solid var(--aparte-border);
+  background: var(--aparte-surface-1);
+  transition:
+    border-color var(--aparte-duration-base) ease,
+    box-shadow var(--aparte-duration-base) ease,
+    translate var(--aparte-duration-base) ease;
+}
+
+.aparte-product__collection .aparte-product--tile[data-linked]:hover,
+.aparte-product__more .aparte-product--tile[data-linked]:hover {
+  border-color: var(--aparte-product-hover-border);
+  box-shadow: var(--aparte-product-hover-shadow);
+  translate: 0 -2px;
+}
+
+/* A mini tile: the others under a detail. */
+.aparte-product--mini {
+  gap: var(--aparte-space-3);
+  padding: var(--aparte-space-2) var(--aparte-space-2) var(--aparte-space-3);
+}
+
+.aparte-product--mini .aparte-product__body { gap: var(--aparte-space-1); }
+.aparte-product--mini .aparte-product__title { font-size: var(--aparte-font-size-sm); }
+.aparte-product--mini .aparte-product__now { font-size: var(--aparte-font-size-md); }
+.aparte-product--mini .aparte-product__was { font-size: var(--aparte-font-size-xs); }
+
+/* ── compact: the rows ───────────────────────────────────────────────── */
+
+/* On the drawn card only: a one-line state shrinks to its words, and a size container
+   cannot. */
+.aparte-product-card[data-variant="compact"][data-state="ready"] {
+  container: aparte-product-rows / inline-size;
+}
+
+.aparte-product__rows {
+  margin: 0;
+  padding: var(--aparte-space-2) 0;
+  list-style: none;
+}
+
+/* A divider starting after the thumbnail, the way a settings list draws it. */
+.aparte-product__item { position: relative; }
+
+.aparte-product__item + .aparte-product__item::before {
+  content: "";
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline: calc(var(--aparte-space-6) + var(--aparte-product-thumb-size) + var(--aparte-space-5)) var(--aparte-space-6);
+  border-block-start: var(--aparte-border-width) solid var(--aparte-border);
+}
+
+.aparte-product--row {
+  display: grid;
+  grid-template-columns: var(--aparte-product-thumb-size) minmax(0, 1fr) auto;
+  align-items: center;
+  column-gap: var(--aparte-space-5);
+  padding: var(--aparte-space-4) var(--aparte-space-6);
+  transition: background-color var(--aparte-duration-fast) ease;
+}
+
+.aparte-product--row:has(> .aparte-product__actions) {
+  grid-template-columns: var(--aparte-product-thumb-size) minmax(0, 1fr) auto auto;
+}
+
+.aparte-product--row[data-linked]:hover { background: var(--aparte-surface-2); }
+
+.aparte-product__thumb {
+  inline-size: var(--aparte-product-thumb-size);
+  --aparte-product-media-radius: var(--aparte-radius-md);
+  --aparte-product-image-inset: 4%;
+}
+
+.aparte-product__thumb .aparte-product__placeholder { --aparte-rich-card-glyph-size: 45%; }
+
+.aparte-product__main {
+  display: flex;
+  flex-direction: column;
+  gap: var(--aparte-space-1);
+  min-inline-size: 0;
+}
+
+.aparte-product__meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--aparte-space-1) var(--aparte-space-3);
+  min-inline-size: 0;
+  color: var(--aparte-text-muted);
+  font-size: var(--aparte-font-size-xs);
+}
+
+.aparte-product__meta .aparte-rich-card__rating { font-size: var(--aparte-font-size-xs); }
+
+.aparte-product--row .aparte-product__price {
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 0;
+  text-align: end;
+}
+
+.aparte-product--row .aparte-product__now { font-size: var(--aparte-font-size-base); }
+.aparte-product--row .aparte-product__was { font-size: var(--aparte-font-size-xs); }
+
+/* On a narrow card a row's button goes under its name rather than squeeze it. */
+@container aparte-product-rows (max-width: 24rem) {
+  .aparte-product--row:has(> .aparte-product__actions) {
+    grid-template-columns: var(--aparte-product-thumb-size) minmax(0, 1fr) auto;
+  }
+
+  .aparte-product--row > .aparte-product__actions {
+    grid-column: 2 / -1;
+    margin-block-start: var(--aparte-space-3);
+  }
+}
+
+/* ── detail: one product at length ───────────────────────────────────── */
+
+.aparte-product__detail {
+  container: aparte-product-detail / inline-size;
+}
+
+.aparte-product--detail {
+  display: grid;
+  gap: var(--aparte-space-6);
+  padding: var(--aparte-space-6);
+}
+
+.aparte-product--detail .aparte-product__media,
+.aparte-product--detail .aparte-product__sk-media {
+  aspect-ratio: 4 / 3;
+}
+
+.aparte-product__media-link {
+  display: block;
+  border-radius: var(--aparte-product-media-radius);
+}
+
+.aparte-product--detail .aparte-product__body { gap: var(--aparte-space-3); }
+
+/* The clamp clips what overflows it, the focus ring included: the padding gives the ring
+   room inside, and the margin takes that room back from the layout. */
+.aparte-product--detail .aparte-product__title {
+  -webkit-line-clamp: 4;
+  line-clamp: 4;
+  margin: calc(var(--aparte-space-2) * -1);
+  padding: var(--aparte-space-2);
+  font-size: var(--aparte-font-size-lg);
+  font-weight: var(--aparte-font-weight-semibold);
+}
+
+.aparte-product--detail .aparte-product__link:hover { text-decoration: underline; text-underline-offset: 0.18em; }
+
+.aparte-product--detail .aparte-product__link:focus-visible {
+  border-radius: var(--aparte-radius-xs);
+  outline: var(--aparte-focus-outline-width) solid var(--aparte-border-focus);
+  outline-offset: var(--aparte-focus-outline-offset);
+}
+
+.aparte-product--detail .aparte-product__now { font-size: var(--aparte-font-size-2xl); }
+.aparte-product--detail .aparte-product__was { font-size: var(--aparte-font-size-md); }
+
+.aparte-product__facts {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--aparte-space-2) var(--aparte-space-6);
+}
+
+.aparte-product__description {
+  display: -webkit-box;
+  margin: 0;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  color: var(--aparte-text-muted);
+  font-size: var(--aparte-font-size-sm);
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+}
+
+.aparte-product__options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--aparte-space-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.aparte-product__option--more { color: var(--aparte-text-muted); }
+
+.aparte-product--detail .aparte-product__actions { margin-block-start: var(--aparte-space-2); }
+.aparte-product--detail .aparte-product__action { flex: 1 1 8rem; justify-content: center; }
+
+@container aparte-product-detail (min-width: 30rem) {
+  .aparte-product--detail {
+    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
+    align-items: start;
+    gap: var(--aparte-space-7);
+  }
+
+  .aparte-product--detail .aparte-product__media,
+  .aparte-product--detail .aparte-product__sk-media {
+    aspect-ratio: 1;
+  }
+}
+
+/* The others, under the detail. */
+.aparte-product__more {
+  --aparte-product-tile-size: 9.5rem;
+  padding: var(--aparte-space-5) var(--aparte-space-6) var(--aparte-space-6);
+  border-block-start: var(--aparte-border-width) solid var(--aparte-border);
+  background: color-mix(in oklab, var(--aparte-surface-2) 45%, var(--aparte-surface-1));
+}
+
+.aparte-product__more-title {
+  margin-block-end: var(--aparte-space-4);
+  color: var(--aparte-text-muted);
+  font-size: var(--aparte-font-size-sm);
+  font-weight: var(--aparte-font-weight-semibold);
+}
+
+/* ── Loading ─────────────────────────────────────────────────────────── */
+
+.aparte-product__sk-track {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: var(--aparte-product-tile-size);
+  column-gap: var(--aparte-space-4);
+  overflow: hidden;
+}
+
+.aparte-product-card .aparte-product__sk-media {
+  block-size: auto;
+  aspect-ratio: 1;
+  border-radius: var(--aparte-product-media-radius);
+}
+
+.aparte-product-card .aparte-product__sk-thumb {
+  inline-size: var(--aparte-product-thumb-size);
+  block-size: auto;
+  aspect-ratio: 1;
+  border-radius: var(--aparte-radius-md);
+}
+
+.aparte-product-card .aparte-product__sk-line--short { inline-size: 60%; }
+
+.aparte-product-card .aparte-product__sk-price {
+  inline-size: 4.5rem;
+  block-size: 1.125rem;
+  margin-block-start: auto;
+}
+
+.aparte-product--row .aparte-product__sk-price { margin-block-start: 0; }
+
+/* ── Small screens, motion ───────────────────────────────────────────── */
+
+@media (max-width: 380px) {
+  .aparte-product-card { --aparte-product-tile-size: 10.75rem; --aparte-product-thumb-size: 3rem; }
+  .aparte-product--row { column-gap: var(--aparte-space-4); padding-inline: var(--aparte-space-5); }
+  .aparte-product__item + .aparte-product__item::before {
+    inset-inline: calc(var(--aparte-space-5) + var(--aparte-product-thumb-size) + var(--aparte-space-4)) var(--aparte-space-5);
+  }
+  .aparte-product--detail { padding: var(--aparte-space-5); }
+  .aparte-product__more { padding-inline: var(--aparte-space-5); }
+}
+
+/* The kit stops every transition under reduced motion; the hover's lift and zoom are
+   end states, not transitions, so they are taken out here. */
+@media (prefers-reduced-motion: reduce) {
+  .aparte-product__collection .aparte-product--tile[data-linked]:hover,
+  .aparte-product__more .aparte-product--tile[data-linked]:hover { translate: none; }
+
+  .aparte-product[data-linked]:hover .aparte-product__image,
+  .aparte-product__media-link:hover .aparte-product__image { scale: none; }
+}
+`;
+const P = {
+  cardsProductTitle: { en: "Products", fr: "Produits", de: "Produkte", es: "Productos", it: "Prodotti", ja: "商品", ko: "상품", pt: "Produtos", ru: "Товары", zh: "商品" },
+  cardsProductCount: { en: "{n} products", fr: "{n} produits", de: "{n} Produkte", es: "{n} productos", it: "{n} prodotti", ja: "{n}件の商品", ko: "상품 {n}개", pt: "{n} produtos", ru: "Товаров: {n}", zh: "{n} 件商品" },
+  cardsProductInStock: { en: "In stock", fr: "En stock", de: "Auf Lager", es: "En stock", it: "Disponibile", ja: "在庫あり", ko: "재고 있음", pt: "Em estoque", ru: "В наличии", zh: "有货" },
+  cardsProductLowStock: { en: "Only a few left", fr: "Plus que quelques-uns", de: "Nur noch wenige", es: "Quedan pocas unidades", it: "Ultimi pezzi", ja: "残りわずか", ko: "품절 임박", pt: "Últimas unidades", ru: "Осталось мало", zh: "仅剩少量" },
+  cardsProductOutOfStock: { en: "Out of stock", fr: "Rupture de stock", de: "Ausverkauft", es: "Agotado", it: "Esaurito", ja: "在庫切れ", ko: "품절", pt: "Esgotado", ru: "Нет в наличии", zh: "缺货" },
+  cardsProductPreorder: { en: "Pre-order", fr: "Précommande", de: "Vorbestellbar", es: "Preventa", it: "Preordine", ja: "予約受付中", ko: "예약 판매", pt: "Pré-venda", ru: "Предзаказ", zh: "预售" },
+  cardsProductWas: { en: "Was", fr: "Au lieu de", de: "Statt", es: "Antes", it: "Prima", ja: "通常価格", ko: "정가", pt: "De", ru: "Было", zh: "原价" },
+  cardsProductFreeShipping: { en: "Free delivery", fr: "Livraison gratuite", de: "Kostenloser Versand", es: "Envío gratis", it: "Spedizione gratuita", ja: "送料無料", ko: "무료 배송", pt: "Frete grátis", ru: "Бесплатная доставка", zh: "免运费" },
+  cardsProductShippingCost: { en: "{price} delivery", fr: "Livraison {price}", de: "Versand {price}", es: "Envío {price}", it: "Spedizione {price}", ja: "送料 {price}", ko: "배송비 {price}", pt: "Frete {price}", ru: "Доставка {price}", zh: "运费 {price}" },
+  cardsProductOptions: { en: "Options", fr: "Options", de: "Optionen", es: "Opciones", it: "Opzioni", ja: "オプション", ko: "옵션", pt: "Opções", ru: "Варианты", zh: "可选项" },
+  cardsProductMoreOptions: { en: "{n} more", fr: "{n} de plus", de: "{n} weitere", es: "{n} más", it: "altri {n}", ja: "ほか{n}件", ko: "{n}개 더", pt: "mais {n}", ru: "ещё {n}", zh: "还有 {n} 个" },
+  cardsProductMore: { en: "More options", fr: "Autres choix", de: "Weitere Angebote", es: "Más opciones", it: "Altre proposte", ja: "その他の候補", ko: "다른 상품", pt: "Mais opções", ru: "Другие варианты", zh: "更多选择" }
+};
+const STOCK_WORD = {
+  "in-stock": "cardsProductInStock",
+  "low-stock": "cardsProductLowStock",
+  "out-of-stock": "cardsProductOutOfStock",
+  preorder: "cardsProductPreorder"
+};
+const PRODUCTS_SHOWN = 10;
+const OPTIONS_SHOWN = 6;
+const ACTIONS_PER_PRODUCT = 2;
+const isObject = (value) => !!value && typeof value === "object" && !Array.isArray(value);
+function pick(r, keys) {
+  if (!r) return void 0;
+  for (const key of keys) if (r[key] !== void 0 && r[key] !== null) return r[key];
+  return void 0;
+}
+function listOf(value) {
+  if (Array.isArray(value)) return value;
+  if (!isObject(value)) return [];
+  if (Array.isArray(value["nodes"])) return value["nodes"];
+  if (Array.isArray(value["edges"])) return value["edges"].map((e) => isObject(e) ? e["node"] : void 0);
+  return [];
+}
+function readMoney(value) {
+  if (typeof value === "number") return { amount: Number.isFinite(value) && value >= 0 ? value : void 0 };
+  if (typeof value === "string") {
+    const { amount, currency } = readPriceText(value);
+    return { amount: amount === void 0 ? void 0 : Math.abs(amount), currency };
+  }
+  if (isObject(value)) {
+    return {
+      amount: readMoney(pick(value, ["amount", "value", "price"])).amount,
+      currency: currencyCode(pick(value, ["currencyCode", "currency_code", "currency"]))
+    };
+  }
+  return {};
+}
+function readImage(value) {
+  if (Array.isArray(value)) {
+    for (const item of value) {
+      const image = readImage(item);
+      if (image) return image;
+    }
+    return void 0;
+  }
+  if (isObject(value)) {
+    const src2 = webUrl(pick(value, ["src", "url", "contentUrl", "href", "large", "medium", "thumbnail"]));
+    const alt = str(pick(value, ["alt", "altText", "alt_text"]));
+    return src2 ? { src: src2, ...alt ? { alt } : {} } : void 0;
+  }
+  const src = webUrl(value);
+  return src ? { src } : void 0;
+}
+const AVAILABILITY = {
+  instock: "in-stock",
+  available: "in-stock",
+  instoreonly: "in-stock",
+  onlineonly: "in-stock",
+  lowstock: "low-stock",
+  limitedavailability: "low-stock",
+  fewleft: "low-stock",
+  outofstock: "out-of-stock",
+  soldout: "out-of-stock",
+  unavailable: "out-of-stock",
+  discontinued: "out-of-stock",
+  preorder: "preorder",
+  presale: "preorder",
+  backorder: "preorder"
+};
+function readAvailability(r, offer) {
+  const value = pick(r, ["availability", "stockStatus", "stock_status"]) ?? pick(offer, ["availability"]);
+  if (typeof value === "string" && value.trim()) {
+    const key = value.trim().toLowerCase().replace(/^(?:https?:\/\/schema\.org\/|schema:)/, "").replace(/[^a-z]/g, "");
+    const status = AVAILABILITY[key];
+    return status ? { status } : { text: value.trim() };
+  }
+  const flag = typeof value === "boolean" ? value : pick(r, ["inStock", "in_stock", "available"]);
+  if (typeof flag === "boolean") return { status: flag ? "in-stock" : "out-of-stock" };
+  return void 0;
+}
+function readRating(r) {
+  const aggregate = isObject(r["aggregateRating"]) ? r["aggregateRating"] : void 0;
+  let value = pick(r, ["rating", "stars", "ratingValue", "rating_value", "averageRating", "average_rating"]) ?? pick(aggregate, ["ratingValue"]);
+  let count = pick(r, ["reviewCount", "review_count", "reviews", "reviewsCount", "reviews_count", "ratingCount", "rating_count", "numReviews"]) ?? pick(aggregate, ["reviewCount", "ratingCount"]);
+  if (isObject(value)) {
+    count ??= pick(value, ["count", "reviews"]);
+    value = pick(value, ["rate", "value", "average"]);
+  }
+  if (Array.isArray(count)) count = count.length;
+  const best = num(pick(r, ["bestRating", "best_rating"]) ?? pick(aggregate, ["bestRating"]));
+  const given = num(value);
+  const stars = given !== void 0 && best !== void 0 && best > 0 && given <= best ? given * 5 / best : given;
+  const reviews = num(count);
+  return {
+    // A value off the five-star scale is another scale, not a five: drawn as none.
+    rating: stars !== void 0 && stars >= 0 && stars <= 5 ? stars : void 0,
+    reviewCount: reviews !== void 0 && reviews >= 0 ? Math.floor(reviews) : void 0
+  };
+}
+const NO_VARIANT = "Default Title";
+function readOptions(r) {
+  const out = [];
+  const add = (value) => {
+    const s = str(value);
+    if (s && s !== NO_VARIANT && !out.includes(s)) out.push(s);
+  };
+  const keys = Array.isArray(r["options"]) ? ["options", "sizes", "colors", "colours"] : ["sizes", "colors", "colours", "variants"];
+  for (const key of keys) {
+    for (const item of listOf(r[key])) {
+      if (!isObject(item)) add(item);
+      else if (Array.isArray(item["values"])) item["values"].forEach(add);
+      else add(pick(item, ["title", "name", "value", "label"]));
+    }
+  }
+  return out.slice(0, 50);
+}
+function readShipping(r) {
+  if (r["freeShipping"] === true || r["free_shipping"] === true) return { cost: 0 };
+  let value = pick(r, ["shipping", "delivery", "shippingInfo", "shipping_info"]);
+  if (isObject(value)) value = pick(value, ["text", "label", "description"]) ?? pick(value, ["cost", "price", "amount"]);
+  if (typeof value === "number") return Number.isFinite(value) && value >= 0 ? { cost: value } : void 0;
+  const text = str(value);
+  if (!text) return void 0;
+  const cost = num(text);
+  return cost !== void 0 && cost >= 0 ? { cost } : { text };
+}
+function readActions(value) {
+  if (!Array.isArray(value)) return [];
+  return value.map((a) => {
+    const label = isObject(a) ? str(a["label"]) : void 0;
+    if (!label) return null;
+    const url = a["url"] !== void 0 ? webUrl(a["url"]) : void 0;
+    if (url === null) return null;
+    const id = str(a["id"]);
+    if (!url && !id) return null;
+    return { label, ...url ? { url } : {}, ...id ? { id } : {}, ...a["primary"] === true ? { primary: true } : {} };
+  }).filter((a) => a !== null).slice(0, ACTIONS_PER_PRODUCT);
+}
+const ENTITIES = { amp: "&", lt: "<", gt: ">", quot: '"', apos: "'", nbsp: " " };
+function decodeEntities(text) {
+  return text.replace(/&(#x[0-9a-f]+|#\d+|[a-z]+);/gi, (whole, name) => {
+    if (name.startsWith("#")) {
+      const code = /^#x/i.test(name) ? parseInt(name.slice(2), 16) : Number(name.slice(1));
+      return code > 0 && code <= 1114111 ? String.fromCodePoint(code) : whole;
+    }
+    return ENTITIES[name.toLowerCase()] ?? whole;
+  });
+}
+function plainText(html) {
+  return decodeEntities(html.replace(/<\/?(?:br|p|li|div|h\d)(?=[\s/>])[^>]*>/gi, " ").replace(/<[^>]*>/g, "")).replace(/\s+/g, " ").trim();
+}
+function cheapestVariant(r) {
+  let best;
+  for (const v of listOf(r["variants"])) {
+    if (!isObject(v)) continue;
+    const price = readMoney(pick(v, ["price", "amount"]));
+    if (price.amount === void 0) continue;
+    if (!best || price.amount < best.price.amount) best = { price, compare: readMoney(pick(v, ["compare_at_price", "compareAtPrice"])) };
+  }
+  return best;
+}
+const lowEnd = (range) => isObject(range) ? range["minVariantPrice"] : void 0;
+function readProduct(raw) {
+  if (!isObject(raw)) return null;
+  const r = raw;
+  const title = str(pick(r, ["title", "name", "productName", "product_title"]));
+  if (!title) return null;
+  const offers = r["offers"];
+  const offer = Array.isArray(offers) ? isObject(offers[0]) ? offers[0] : void 0 : isObject(offers) ? offers : void 0;
+  const own = pick(r, ["price", "extracted_price", "salePrice", "sale_price", "currentPrice", "current_price"]) ?? pick(offer, ["price", "lowPrice"]) ?? lowEnd(r["priceRange"]);
+  const variant = own === void 0 ? cheapestVariant(r) : void 0;
+  const price = variant ? variant.price : readMoney(own);
+  const compareOwn = pick(r, [
+    "compareAtPrice",
+    "compare_at_price",
+    "originalPrice",
+    "original_price",
+    "listPrice",
+    "list_price",
+    "regularPrice",
+    "regular_price",
+    "wasPrice",
+    "was_price",
+    "extracted_old_price",
+    "oldPrice",
+    "old_price",
+    "msrp"
+  ]) ?? lowEnd(r["compareAtPriceRange"]);
+  const compare = compareOwn === void 0 && variant ? variant.compare : readMoney(compareOwn);
+  const currency = currencyCode(pick(r, ["currency", "currency_code", "currencyCode", "priceCurrency"]) ?? pick(offer, ["priceCurrency"])) ?? price.currency ?? compare.currency;
+  const merchantRaw = pick(r, ["merchant", "seller", "store", "shop", "source", "retailer", "vendor"]) ?? pick(r, ["brand"]);
+  const merchant = isObject(merchantRaw) ? str(pick(merchantRaw, ["name", "title"])) : str(merchantRaw);
+  const merchantLogo = webUrl(pick(r, ["merchantLogo", "merchant_logo", "source_icon", "storeLogo", "logo"]) ?? (isObject(merchantRaw) ? pick(merchantRaw, ["logo", "icon", "image"]) : void 0));
+  const description = str(pick(r, ["description", "summary", "snippet", "subtitle", "body_html", "descriptionHtml"]));
+  const { rating: stars, reviewCount } = readRating(r);
+  const availability = readAvailability(r, offer);
+  const shipping = readShipping(r);
+  const image = readImage(pick(r, ["image", "images", "thumbnail", "image_url", "imageUrl", "featuredImage", "photo"]));
+  const url = webUrl(pick(r, ["url", "link", "permalink", "product_link", "productUrl", "product_url", "onlineStoreUrl", "href"]) ?? pick(offer, ["url"]));
+  const id = str(pick(r, ["id", "sku", "product_id", "productId"]));
+  const badge = str(pick(r, ["badge", "tag", "ribbon"]));
+  return {
+    title,
+    ...id ? { id } : {},
+    ...image ? { image } : {},
+    ...price.amount !== void 0 ? { price: price.amount } : {},
+    ...currency ? { currency } : {},
+    ...price.amount !== void 0 && compare.amount !== void 0 && compare.amount > price.amount ? { compareAtPrice: compare.amount } : {},
+    ...stars !== void 0 ? { rating: stars } : {},
+    ...reviewCount !== void 0 ? { reviewCount } : {},
+    ...availability ? { availability } : {},
+    ...merchant ? { merchant } : {},
+    ...merchant && merchantLogo ? { merchantLogo } : {},
+    ...badge ? { badge } : {},
+    options: readOptions(r),
+    ...shipping ? { shipping } : {},
+    // Shown as text, so a tag would show as `<p>`: take the words out of the markup.
+    ...description ? { description: plainText(description) } : {},
+    ...url ? { url } : {},
+    actions: readActions(r["actions"])
+  };
+}
+function readProducts(raw) {
+  if (!raw || typeof raw !== "object") return null;
+  let list;
+  let title;
+  if (Array.isArray(raw)) {
+    list = raw;
+  } else {
+    const r = raw;
+    const many = ["products", "results", "shopping_results", "items"].map((key) => r[key]).find(Array.isArray);
+    if (many) {
+      list = many;
+      title = str(pick(r, ["title", "heading"]));
+    } else {
+      list = [r];
+    }
+  }
+  const products = list.map(readProduct).filter((p) => p !== null).slice(0, PRODUCTS_SHOWN);
+  return products.length ? { ...title ? { title } : {}, products } : null;
+}
+function discountOf(product) {
+  const { price, compareAtPrice } = product;
+  if (price === void 0 || compareAtPrice === void 0 || compareAtPrice <= price || compareAtPrice <= 0) return void 0;
+  const ratio = (compareAtPrice - price) / compareAtPrice;
+  return Math.round(ratio * 100) >= 1 ? ratio : void 0;
+}
+const money = (config, product, amount) => formatPrice(config, amount, product.currency);
+const notNull = (value) => value !== null && value !== void 0;
+function media(product, className = "") {
+  const frame = el(
+    "div",
+    { class: `aparte-product__media${className ? ` ${className}` : ""}` },
+    glyph(BAG, "aparte-rich-card__glyph aparte-product__placeholder")
+  );
+  if (!product.image) {
+    frame.setAttribute("data-empty", "");
+    return frame;
+  }
+  const image = el("img", {
+    class: "aparte-product__image",
+    attrs: {
+      src: product.image.src,
+      alt: product.image.alt ?? product.title,
+      loading: "lazy",
+      decoding: "async",
+      // A shop's CDN learns nothing about the chat page that showed its photo.
+      referrerpolicy: "no-referrer"
+    }
+  });
+  image.addEventListener("error", () => {
+    image.hidden = true;
+    frame.setAttribute("data-empty", "");
+  }, { once: true });
+  frame.append(image);
+  return frame;
+}
+function titleOf(product) {
+  const title = el("div", { class: "aparte-product__title" });
+  if (product.url) {
+    title.append(el("a", {
+      class: "aparte-product__link",
+      attrs: { href: product.url, target: "_blank", rel: "noopener noreferrer" },
+      text: product.title
+    }));
+  } else {
+    title.textContent = product.title;
+  }
+  return title;
+}
+function merchantOf(product) {
+  if (!product.merchant) return null;
+  const node = el("div", { class: "aparte-product__merchant" });
+  if (product.merchantLogo) {
+    const logo = el("img", { class: "aparte-product__logo", attrs: { src: product.merchantLogo, alt: "", loading: "lazy", decoding: "async", referrerpolicy: "no-referrer" } });
+    logo.addEventListener("error", () => {
+      logo.hidden = true;
+    }, { once: true });
+    node.append(logo);
+  }
+  node.append(el("span", { class: "aparte-product__merchant-name", text: product.merchant }));
+  return node;
+}
+function discountBadge(ctx, product) {
+  const ratio = discountOf(product);
+  if (ratio === void 0) return null;
+  const badge = el("span", { class: "aparte-badge aparte-badge--danger aparte-badge--solid aparte-badge--sm aparte-product__discount" });
+  ctx.bind(badge, () => `−${formatPercent(ctx.config, ratio)}`);
+  return badge;
+}
+function priceOf(ctx, product, withDiscount = false) {
+  if (product.price === void 0) return null;
+  const row2 = el("div", { class: "aparte-product__price" });
+  const now = el("span", { class: "aparte-product__now" });
+  ctx.bind(now, () => money(ctx.config, product, product.price));
+  row2.append(now);
+  if (product.compareAtPrice !== void 0) {
+    const said = el("span", { class: "aparte-sr-only" });
+    ctx.bind(said, () => `${word(ctx.config, "cardsProductWas", P.cardsProductWas)} `);
+    const value = el("span", { class: "aparte-product__was-value" });
+    ctx.bind(value, () => money(ctx.config, product, product.compareAtPrice));
+    row2.append(el("del", { class: "aparte-product__was" }, said, value));
+    const discount = withDiscount ? discountBadge(ctx, product) : null;
+    if (discount) row2.append(discount);
+  }
+  return row2;
+}
+function availabilityOf(ctx, product) {
+  const availability = product.availability;
+  if (!availability) return null;
+  const status = "status" in availability ? availability.status : void 0;
+  const text = el("span", { class: "aparte-product__stock-text" });
+  if (status) ctx.word(text, STOCK_WORD[status], P[STOCK_WORD[status]]);
+  else text.textContent = availability.text;
+  return el(
+    "div",
+    { class: "aparte-product__stock", attrs: { "data-availability": status ?? "other" } },
+    el("span", { class: "aparte-product__dot", attrs: { "aria-hidden": "true" } }),
+    text
+  );
+}
+function shippingOf(ctx, product) {
+  const shipping = product.shipping;
+  if (!shipping) return null;
+  const text = el("span", { class: "aparte-product__shipping-text" });
+  if ("text" in shipping) text.textContent = shipping.text;
+  else if (shipping.cost === 0) ctx.word(text, "cardsProductFreeShipping", P.cardsProductFreeShipping);
+  else ctx.bind(text, () => word(ctx.config, "cardsProductShippingCost", P.cardsProductShippingCost, { price: money(ctx.config, product, shipping.cost) }));
+  return el(
+    "div",
+    { class: "aparte-product__shipping", attrs: { "data-free": "cost" in shipping && shipping.cost === 0 } },
+    glyph(TRUCK, "aparte-rich-card__glyph aparte-product__shipping-icon"),
+    text
+  );
+}
+function flags(ctx, product, withDiscount) {
+  const items = [
+    product.badge ? el("span", { class: "aparte-badge aparte-badge--sm aparte-product__badge", text: product.badge }) : null,
+    withDiscount ? discountBadge(ctx, product) : null
+  ].filter(notNull);
+  return items.length ? el("div", { class: "aparte-product__flags" }, ...items) : null;
+}
+function optionsOf(ctx, product) {
+  if (!product.options.length) return null;
+  const list = el("ul", { class: "aparte-product__options", attrs: { role: "list" } });
+  ctx.bind(list, () => word(ctx.config, "cardsProductOptions", P.cardsProductOptions), "aria-label");
+  for (const option of product.options.slice(0, OPTIONS_SHOWN)) {
+    list.append(el("li", { class: "aparte-tag aparte-tag--sm aparte-product__option" }, el("span", { class: "aparte-tag__label", text: option })));
+  }
+  const rest = product.options.length - OPTIONS_SHOWN;
+  if (rest > 0) {
+    const shown = el("span", { class: "aparte-tag__label", attrs: { "aria-hidden": "true" } });
+    ctx.bind(shown, () => `+${formatNumber(ctx.config, rest)}`);
+    const said = el("span", { class: "aparte-sr-only" });
+    ctx.bind(said, () => word(ctx.config, "cardsProductMoreOptions", P.cardsProductMoreOptions, { n: formatNumber(ctx.config, rest) }));
+    list.append(el("li", { class: "aparte-tag aparte-tag--sm aparte-product__option aparte-product__option--more" }, shown, said));
+  }
+  return list;
+}
+function actionsOf(ctx, product, max) {
+  const buttons = product.actions.slice(0, max).map((action) => ctx.action(action, product, "aparte-product__action")).filter(notNull);
+  return buttons.length ? el("div", { class: "aparte-product__actions" }, ...buttons) : null;
+}
+function productRoot(kind, product, extra = "") {
+  return el("div", {
+    class: `aparte-product aparte-product--${kind}${extra ? ` ${extra}` : ""}`,
+    attrs: {
+      "data-availability": product.availability && "status" in product.availability ? product.availability.status : void 0,
+      "data-linked": product.url !== void 0
+    }
+  });
+}
+function tile(ctx, product, { actions, mini = false }) {
+  const node = productRoot("tile", product, mini ? "aparte-product--mini" : "");
+  const photo = media(product);
+  const corner = mini ? null : flags(ctx, product, true);
+  if (corner) photo.append(corner);
+  const body = el(
+    "div",
+    { class: "aparte-product__body" },
+    mini ? null : merchantOf(product),
+    titleOf(product),
+    mini ? null : rating(ctx, product.rating, { count: product.reviewCount }),
+    priceOf(ctx, product),
+    mini ? null : availabilityOf(ctx, product)
+  );
+  node.append(photo, body);
+  const buttons = actionsOf(ctx, product, actions);
+  if (buttons) node.append(buttons);
+  return node;
+}
+function row(ctx, product) {
+  const node = productRoot("row", product);
+  const meta = el(
+    "div",
+    { class: "aparte-product__meta" },
+    product.merchant ? el("span", { class: "aparte-product__merchant-name", text: product.merchant }) : null,
+    rating(ctx, product.rating, { starsOnly: true }),
+    product.availability && !("status" in product.availability && product.availability.status === "in-stock") ? availabilityOf(ctx, product) : null
+  );
+  const main = el("div", { class: "aparte-product__main" }, titleOf(product), meta.childNodes.length ? meta : null);
+  node.append(media(product, "aparte-product__thumb"), main);
+  const amount = priceOf(ctx, product);
+  if (amount) node.append(amount);
+  const buttons = actionsOf(ctx, product, 1);
+  if (buttons) node.append(buttons);
+  return node;
+}
+function detail(ctx, product) {
+  const node = productRoot("detail", product);
+  const photo = media(product);
+  const corner = flags(ctx, product, false);
+  if (corner) photo.append(corner);
+  const shown = product.url ? el("a", { class: "aparte-product__media-link", attrs: { href: product.url, target: "_blank", rel: "noopener noreferrer", tabindex: -1, "aria-hidden": "true" } }, photo) : photo;
+  const facts = el("div", { class: "aparte-product__facts" }, availabilityOf(ctx, product), shippingOf(ctx, product));
+  const body = el(
+    "div",
+    { class: "aparte-product__body" },
+    merchantOf(product),
+    titleOf(product),
+    rating(ctx, product.rating, { count: product.reviewCount }),
+    priceOf(ctx, product, true),
+    facts.childNodes.length ? facts : null,
+    product.description ? el("p", { class: "aparte-product__description", text: product.description }) : null,
+    optionsOf(ctx, product),
+    actionsOf(ctx, product, ACTIONS_PER_PRODUCT)
+  );
+  node.append(shown, body);
+  return el("div", { class: "aparte-product__detail" }, node);
+}
+function heading(data) {
+  return data.title ? el("div", { class: "aparte-product__heading", text: data.title }) : null;
+}
+function labelOf(data, ctx) {
+  const products = data?.products ?? [];
+  if (products.length === 1) return products[0].title;
+  if (data?.title) return data.title;
+  if (products.length > 1) return word(ctx.config, "cardsProductCount", P.cardsProductCount, { n: formatNumber(ctx.config, products.length) });
+  return word(ctx.config, "cardsProductTitle", P.cardsProductTitle);
+}
+function render(data, ctx) {
+  const { products } = data;
+  const first = products[0];
+  if (ctx.variant === "detail") {
+    const out = [detail(ctx, first)];
+    if (products.length > 1) {
+      const title = el("div", { class: "aparte-product__more-title" });
+      ctx.word(title, "cardsProductMore", P.cardsProductMore);
+      const slides2 = products.slice(1).map((p) => tile(ctx, p, { actions: 0, mini: true }));
+      out.push(el(
+        "div",
+        { class: "aparte-product__more" },
+        title,
+        carousel(ctx, slides2, { label: () => word(ctx.config, "cardsProductMore", P.cardsProductMore) })
+      ));
+    }
+    return out;
+  }
+  if (ctx.variant === "compact") {
+    if (products.length === 1) return [row(ctx, first)];
+    const list = el(
+      "ul",
+      { class: "aparte-product__rows", attrs: { role: "list" } },
+      ...products.map((p) => el("li", { class: "aparte-product__item" }, row(ctx, p)))
+    );
+    return [heading(data), list].filter(notNull);
+  }
+  if (products.length === 1) return [tile(ctx, first, { actions: ACTIONS_PER_PRODUCT })];
+  const slides = products.map((p) => tile(ctx, p, { actions: 1 }));
+  return [el(
+    "div",
+    { class: "aparte-product__collection" },
+    heading(data),
+    carousel(ctx, slides, { label: () => labelOf(data, ctx) })
+  )];
+}
+function skeleton(partial, ctx) {
+  const block = (cls, kind = "rect") => el("span", { class: `aparte-skeleton aparte-skeleton--${kind} ${cls}`, attrs: { "aria-hidden": "true" } });
+  const lines = () => [block("aparte-product__sk-line", "text"), block("aparte-product__sk-line aparte-product__sk-line--short", "text")];
+  const query = partial?.title ? el("div", { class: "aparte-product__query" }, glyph(SEARCH, "aparte-rich-card__glyph aparte-product__query-icon"), el("span", { class: "aparte-product__query-text", text: partial.title })) : null;
+  if (ctx.variant === "compact") {
+    const rows = [0, 1, 2].map(() => el(
+      "div",
+      { class: "aparte-product__item" },
+      el(
+        "div",
+        { class: "aparte-product aparte-product--row aparte-product--skeleton" },
+        block("aparte-product__sk-thumb"),
+        el("div", { class: "aparte-product__main" }, ...lines()),
+        block("aparte-product__sk-price", "text")
+      )
+    ));
+    return [query, el("div", { class: "aparte-product__rows" }, ...rows)].filter(notNull);
+  }
+  if (ctx.variant === "detail") {
+    return [query, el(
+      "div",
+      { class: "aparte-product__detail" },
+      el(
+        "div",
+        { class: "aparte-product aparte-product--detail aparte-product--skeleton" },
+        block("aparte-product__sk-media"),
+        el("div", { class: "aparte-product__body" }, ...lines(), block("aparte-product__sk-price", "text"), block("aparte-product__sk-line", "text"))
+      )
+    )].filter(notNull);
+  }
+  const tiles = [0, 1, 2].map(() => el(
+    "div",
+    { class: "aparte-product aparte-product--tile aparte-product--skeleton" },
+    block("aparte-product__sk-media"),
+    el("div", { class: "aparte-product__body" }, ...lines(), block("aparte-product__sk-price", "text"))
+  ));
+  return [el("div", { class: "aparte-product__collection" }, query, el("div", { class: "aparte-product__sk-track" }, ...tiles))];
+}
+const productCard = defineCard({
+  name: "product",
+  variants: ["card", "compact", "detail"],
+  styles: productStyles,
+  icon: TAG,
+  normalize: readProducts,
+  render,
+  skeleton,
+  label: labelOf,
+  fallback: (data, ctx) => {
+    const lines = data.products.map((p) => {
+      const amount = p.price !== void 0 ? ` — ${money(ctx.config, p, p.price)}` : "";
+      const stars = p.rating !== void 0 ? ` (${formatNumber(ctx.config, p.rating, { maximumFractionDigits: 1 })}/5)` : "";
+      return `${p.title}${amount}${stars}`;
+    });
+    return [data.title, ...lines].filter(notNull).join("\n");
+  },
+  partial: (input) => {
+    const query = str(input["query"] ?? input["q"] ?? input["search"] ?? input["keywords"] ?? input["term"] ?? input["product"]);
+    return query ? { title: query } : null;
+  }
+});
+function setupProductCard(options = {}) {
+  return productCard.setup(options);
+}
+export {
+  discountOf,
+  productCard,
+  readProducts,
+  setupProductCard
+};
+//# sourceMappingURL=product.js.map