/* Shared surface for authentic product cutouts across all Studio routes.
   Change these tokens once; page styles only own sizing and composition. */
:root {
  --product-stage-bg: #e4e9ed;
  --product-stage-hover: #dce3e8;
  --product-stage-ink: #253038;
}

.product-visual {
  background: var(--product-stage-bg);
  color: var(--product-stage-ink);
  color-scheme: light;
}

/* In-frame arrows and captions inherit the shared foreground color. */
.product-visual > figcaption {
  color: inherit;
}

/* Only linked product images respond to hover or keyboard focus. */
a:is(:hover, :focus-visible) > .product-visual {
  background: var(--product-stage-hover);
}