/**
 * Brand Tokens — scoped color sync inside frozen commerce chrome.
 * Only price, titles, CTAs, quick-add, wishlist active, and selected states inherit brand colors.
 */
.sg-ai-commerce {
  --sg-brand-primary: var(--sg-brand-primary, var(--sg-brand-accent, var(--sg-accent, #111111)));
  --sg-brand-price: var(--sg-brand-price, var(--sg-accent, #c9a962));
  --sg-brand-highlight: var(--sg-brand-highlight, var(--sg-accent, #c9a962));
  --sg-brand-cta-bg: var(--sg-brand-cta-bg, #ffffff);
  --sg-brand-cta-ink: var(--sg-brand-cta-ink, #0a0a0a);
}

.sg-ai-commerce .sg-ai-card__price,
.sg-ai-commerce .sg-ai-product__price {
  color: var(--sg-brand-price) !important;
}

.sg-ai-commerce .sg-ai-product__title,
.sg-ai-commerce .sg-ai-shop__section-title {
  color: var(--sg-brand-primary);
}

.sg-ai-commerce .sg-ai-product__add,
.sg-ai-commerce .sg-ai-card__quick-add,
.sg-ai-commerce .sg-ai-sticky-bar__primary,
.sg-ai-commerce .sg-ai-checkout__submit {
  background: var(--sg-brand-cta-bg) !important;
  color: var(--sg-brand-cta-ink) !important;
}

.sg-ai-commerce .sg-ai-featured-hero__cta {
  color: var(--sg-brand-cta-ink);
  background: color-mix(in srgb, var(--sg-brand-cta-bg) 92%, transparent);
}

.sg-ai-commerce .sg-ai-card__badge--sale,
.sg-ai-commerce .sg-ai-product__badge--sale,
.sg-ai-commerce .sg-ai-product__price-badge {
  background: color-mix(in srgb, var(--sg-brand-highlight) 88%, #0a0a0a) !important;
}

.sg-ai-commerce .sg-ai-card__wishlist.is-saved {
  background: color-mix(in srgb, var(--sg-brand-accent, var(--sg-accent)) 18%, #ffffff) !important;
  color: var(--sg-brand-accent, var(--sg-accent)) !important;
}

.sg-ai-commerce .sg-ai-shop__chip.is-active {
  border-color: color-mix(in srgb, var(--sg-brand-accent, var(--sg-accent)) 55%, transparent) !important;
  color: var(--sg-brand-accent, var(--sg-accent)) !important;
}

.sg-ai-commerce .sg-ai-cat-tile.is-active,
.sg-ai-commerce .sg-ai-cat-tile:focus-visible {
  outline-color: var(--sg-brand-accent, var(--sg-accent));
}

.sg-ai-commerce .sg-ai-product__variant.is-active {
  border-color: var(--sg-brand-accent, var(--sg-accent));
  color: var(--sg-brand-accent, var(--sg-accent));
}