/* Shop section: one the AI designer wrote (ShopSection), its own styles in
   @scope. Whatever it draws stays in its box, so nothing it does can cover
   the page around it. A draft in the look studio says it is one. */
.shop-section {
  contain: layout paint;
  inline-size: 100%;
  min-inline-size: 0;
}

.shop-section[data-draft] {
  outline: 2px dashed var(--color-accent-text);
  outline-offset: var(--space-2xs);
}

.shop-section__draft {
  background: var(--color-accent-fill);
  border-radius: var(--button-radius);
  color: var(--color-on-accent);
  display: inline-block;
  font-size: var(--step--2);
  font-weight: var(--weight-semibold);
  margin-block-end: var(--space-2xs);
  padding: var(--space-3xs) var(--space-xs);
}