/* Demo-only scaffolding for the rectangle-selection examples (product grid + selection counter).
   Lived inline in the old demo page's <style>; extracted so the demo page and the standalone
   example routes share it. Tile fills use a theme-aware surface token — the 6 --color-N classes
   are kept so the markup is unchanged; they all resolve to the same token (see the dark-theme
   sweep note in the repo history). */
.product-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-t--global--spacer--md, 1rem);
  padding: var(--pf-t--global--spacer--md, 1rem);
}
.product-card {
  width: 150px;
  height: 175px;
  position: relative;
  border: 1px solid var(--pf-t--global--border--color--default, #eee);
  border-bottom-width: 2px;
  border-right-width: 2px;
  background-color: var(--pf-t--global--background--color--primary--default, #fff);
  background-size: cover;
  background-position: center;
  cursor: default;
  transition: outline 0.1s ease;
}
.product-card__label {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  background-color: var(--pf-t--global--background--color--primary--default, #fff);
  font-weight: var(--pf-t--global--font--weight--body--bold, 700);
  font-size: var(--pf-t--global--font--size--body--sm, 0.75rem);
  padding: var(--pf-t--global--spacer--xs, 0.25rem) 0;
}
.product-card--color-1,
.product-card--color-2,
.product-card--color-3,
.product-card--color-4,
.product-card--color-5,
.product-card--color-6 {
  background-color: var(--pf-t--global--background--color--secondary--default, #f5f5f5);
}
.selection-count {
  padding: var(--pf-t--global--spacer--sm, 0.5rem) var(--pf-t--global--spacer--md, 1rem);
  font-weight: var(--pf-t--global--font--weight--body--bold, 700);
}