/* Per-product accent surfaces — clay + accent-tinted shadows */

.has-product-theme .product-hero .btn.buy,
.has-product-theme .product-pricing .btn.buy,
.has-product-theme .product-pricing-card .btn.buy {
  background: linear-gradient(135deg, var(--product-accent), var(--product-accent-2));
  border-color: transparent;
  color: #0b1220;
  box-shadow:
    4px 4px 16px color-mix(in srgb, var(--product-accent) 35%, transparent),
    inset 2px 2px 6px rgba(255, 255, 255, 0.2);
}

.has-product-theme .product-hero .accent,
.has-product-theme .contact-title .accent,
.has-product-theme .section-header .accent {
  color: var(--product-accent);
}

.has-product-theme .product-hero::before,
.has-product-theme .product-pricing::before {
  background: radial-gradient(
    circle at var(--section-glow-x, 40%) var(--section-glow-y, 30%),
    var(--product-glow),
    transparent 62%
  );
}

.project-card[data-rp-sku] {
  --card-accent: var(--product-accent, #3b82f6);
  --card-accent-2: var(--product-accent-2, #22d3ee);
  background: color-mix(in srgb, var(--card-accent) 10%, var(--clay-surface, #fff)) !important;
  border-color: color-mix(in srgb, var(--card-accent) 18%, var(--clay-border-subtle, rgba(79, 140, 255, 0.12))) !important;
  box-shadow:
    var(--clay-shadow-outer, 8px 8px 24px rgba(26, 34, 51, 0.08)),
    var(--clay-shadow-inner, inset -4px -4px 12px rgba(26, 34, 51, 0.04)),
    0 0 0 1px color-mix(in srgb, var(--card-accent) 12%, transparent) !important;
}

.project-card[data-rp-sku]::before {
  background: radial-gradient(
    circle at top left,
    color-mix(in srgb, var(--card-accent) 22%, transparent),
    transparent 62%
  );
}

.project-card[data-rp-sku]:hover,
.project-card[data-rp-sku]:focus-within {
  box-shadow:
    var(--clay-shadow-hover, 12px 12px 32px rgba(26, 34, 51, 0.1)),
    var(--clay-shadow-inner, inset -4px -4px 12px rgba(26, 34, 51, 0.04)),
    0 0 28px color-mix(in srgb, var(--product-glow, var(--card-accent)) 30%, transparent) !important;
}

.project-card[data-rp-sku] .badge,
.project-card[data-rp-sku] .store-version-badge,
.account-plugin-row[data-product-sku] .account-version-badge {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  border-color: color-mix(in srgb, var(--card-accent, var(--product-accent)) 40%, transparent) !important;
  background: color-mix(in srgb, var(--card-accent, var(--product-accent)) 14%, #ffffff) !important;
  box-shadow: none;
  font-weight: 700;
}

html[data-theme="dark"] .project-card[data-rp-sku] .badge,
html[data-theme="dark"] .project-card[data-rp-sku] .store-version-badge,
html[data-theme="dark"] .account-plugin-row[data-product-sku] .account-version-badge {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
  background: color-mix(in srgb, var(--card-accent, var(--product-accent)) 22%, #1a1f2e) !important;
}

.project-card[data-rp-sku]:hover .project-link.buy,
.project-card[data-rp-sku]:focus-within .project-link.buy {
  background: linear-gradient(135deg, var(--card-accent), var(--card-accent-2));
  color: #0b1220;
  border: none;
  box-shadow:
    4px 4px 16px color-mix(in srgb, var(--card-accent) 40%, transparent),
    inset 2px 2px 6px rgba(255, 255, 255, 0.25);
}

.project-card[data-rp-sku] .project-link.buy[disabled],
.project-card[data-rp-sku] .project-link.buy[data-checkout-disabled="true"] {
  opacity: 0.55;
  filter: grayscale(0.35);
}

.project-card[data-rp-sku]:hover .project-link.buy[disabled],
.project-card[data-rp-sku]:focus-within .project-link.buy[disabled],
.project-card[data-rp-sku]:hover .project-link.buy[data-checkout-disabled="true"],
.project-card[data-rp-sku]:focus-within .project-link.buy[data-checkout-disabled="true"] {
  opacity: 0.55;
  filter: grayscale(0.35);
}

.account-plugin-row[data-product-sku] {
  border-color: color-mix(in srgb, var(--product-accent) 28%, var(--clay-border-subtle, rgba(79, 140, 255, 0.12)));
  box-shadow:
    var(--clay-shadow-outer),
    var(--clay-shadow-inner),
    inset 3px 0 0 var(--product-accent);
}

.account-plugin-row[data-product-sku] .account-beta-badge {
  background: linear-gradient(135deg, var(--product-accent), var(--product-accent-2));
  color: #0b1220;
}

.has-product-theme .feature-card,
.has-product-theme .product-pricing-card {
  background: color-mix(in srgb, var(--product-accent) 8%, var(--clay-surface, #fff)) !important;
  border-color: color-mix(in srgb, var(--product-accent) 20%, var(--clay-border-subtle)) !important;
}