/* Product page themes - harmonized modern surfaces with preserved identities */
.product-page {
  --product-accent: var(--color-accent);
  --product-accent-hover: var(--color-accent-hover);
  --product-accent-2: #6a8bff;
  --product-bg: var(--color-bg);
  --product-bg-soft: var(--color-bg-soft);
  --product-surface: var(--color-bg-elevated);
  --product-border: var(--color-border);
  --product-glow: var(--glow-accent);
  --product-text: var(--color-text);
  --product-text-muted: var(--color-text-muted);
  --product-hero-gradient: var(--gradient-surface);
  --product-panel-gradient: var(--gradient-surface);
  --product-cta-gradient: linear-gradient(135deg, var(--product-accent) 0%, var(--product-accent-2) 100%);
  --product-focus: #7aa2ff;
  --product-bg-glow-a: color-mix(in srgb, var(--product-accent) 20%, transparent);
  --product-bg-glow-b: color-mix(in srgb, var(--product-accent-2) 16%, transparent);
  --product-bg-overlay: linear-gradient(
    160deg,
    color-mix(in srgb, var(--product-bg) 92%, transparent) 0%,
    color-mix(in srgb, var(--product-bg-soft) 88%, transparent) 48%,
    color-mix(in srgb, var(--product-bg) 94%, transparent) 100%
  );
  --section-tone-a: linear-gradient(180deg, color-mix(in srgb, var(--product-bg-soft) 24%, transparent) 0%, color-mix(in srgb, var(--product-bg) 12%, transparent) 100%);
  --section-tone-b: linear-gradient(180deg, color-mix(in srgb, var(--product-bg-soft) 36%, transparent) 0%, color-mix(in srgb, var(--product-bg) 20%, transparent) 100%);
  --section-divider: color-mix(in srgb, var(--product-border) 64%, transparent);

  --color-accent: var(--product-accent);
  --color-accent-hover: var(--product-accent-hover);
  --color-border: var(--product-border);
  --color-text: var(--product-text);
  --color-text-muted: var(--product-text-muted);
  --color-bg: var(--product-bg);
  --color-bg-soft: var(--product-bg-soft);
  --color-bg-elevated: var(--product-surface);
  --glow-accent: var(--product-glow);
  --color-focus: var(--product-focus);
  --gradient-hero: var(--product-hero-gradient);
  --gradient-surface: var(--product-panel-gradient);
  --gradient-card: var(--product-panel-gradient);
}

body.product-page {
  background-color: var(--product-bg);
  background-image:
    radial-gradient(circle at 14% 14%, var(--product-bg-glow-a) 0%, transparent 44%),
    radial-gradient(circle at 84% 16%, var(--product-bg-glow-b) 0%, transparent 46%),
    var(--product-bg-overlay),
    url("../assets/jenko-bg.png");
  background-repeat: no-repeat;
  background-size: cover, cover, cover, cover;
  background-position: center top, center top, center top, center top;
}

.product-page--apportio {
  --product-accent: #4ec4a2;
  --product-accent-hover: #6ad7b8;
  --product-accent-2: #ff9546;
  --product-bg: #4a5d85;
  --product-bg-soft: #3f5072;
  --product-surface: #32445f;
  --product-border: #5f759f;
  --product-glow: 0 0 22px rgba(78, 196, 162, 0.28);
  --product-text: #edf3ff;
  --product-text-muted: #becee7;
  --product-hero-gradient: radial-gradient(circle at 84% 18%, rgba(255, 149, 70, 0.12) 0%, transparent 52%),
    linear-gradient(148deg, rgba(56, 73, 108, 0.58) 0%, rgba(47, 64, 95, 0.62) 100%);
  --product-panel-gradient: linear-gradient(180deg, rgba(51, 67, 98, 0.95) 0%, rgba(44, 60, 88, 0.97) 100%);
  --product-cta-gradient: linear-gradient(135deg, #45c6a4 0%, #67d8b8 100%);
  --product-focus: #8ec6ff;
  --product-bg-glow-a: rgba(78, 196, 162, 0.2);
  --product-bg-glow-b: rgba(255, 149, 70, 0.14);
}

.product-page--allocatrix {
  --product-accent: #ff9546;
  --product-accent-hover: #ffaf6c;
  --product-accent-2: #f0c050;
  --product-bg: #3b465e;
  --product-bg-soft: #313a50;
  --product-surface: #293248;
  --product-border: #666f89;
  --product-glow: 0 0 22px rgba(255, 149, 70, 0.28);
  --product-text: #f6f0e8;
  --product-text-muted: #d5c8b7;
  --product-hero-gradient: radial-gradient(circle at 86% 18%, rgba(255, 149, 70, 0.13) 0%, transparent 52%),
    linear-gradient(148deg, rgba(47, 56, 77, 0.58) 0%, rgba(39, 47, 65, 0.62) 100%);
  --product-panel-gradient: linear-gradient(180deg, rgba(43, 52, 73, 0.94) 0%, rgba(36, 44, 63, 0.97) 100%);
  --product-cta-gradient: linear-gradient(135deg, #ff9546 0%, #ffd27a 100%);
  --product-focus: #ffd18a;
  --product-bg-glow-a: rgba(255, 149, 70, 0.2);
  --product-bg-glow-b: rgba(240, 192, 80, 0.14);
}

.product-page--jense {
  --product-accent: #f2a33d;
  --product-accent-hover: #d7922f;
  --product-accent-2: #e7b96c;
  --product-bg: #f7f4ee;
  --product-bg-soft: #efe8dc;
  --product-surface: #fbf8f2;
  --product-border: rgba(199, 153, 75, 0.34);
  --product-glow: 0 0 14px rgba(199, 153, 75, 0.12);
  --product-text: #1a1a1a;
  --product-text-muted: #5c5348;
  --product-hero-gradient: radial-gradient(circle at 84% 18%, rgba(242, 163, 61, 0.08) 0%, transparent 50%),
    linear-gradient(145deg, rgba(251, 248, 242, 0.7) 0%, rgba(245, 238, 227, 0.72) 100%);
  --product-panel-gradient: linear-gradient(180deg, rgba(255, 252, 246, 0.98) 0%, rgba(247, 241, 231, 0.98) 100%);
  --product-cta-gradient: linear-gradient(135deg, #f2a33d 0%, #e7b96c 100%);
  --product-focus: #c89d5b;
  --product-bg-glow-a: rgba(242, 163, 61, 0.1);
  --product-bg-glow-b: rgba(223, 189, 129, 0.08);
}

.product-page--eventq {
  --product-accent: #8fa8b8;
  --product-accent-hover: #b4c4cf;
  --product-accent-2: #d0d0d0;
  --product-bg: #171c1f;
  --product-bg-soft: #1d2529;
  --product-surface: #212a30;
  --product-border: #33414a;
  --product-glow: 0 0 20px rgba(143, 168, 184, 0.18);
  --product-text: #e6edf2;
  --product-text-muted: #b8c4cd;
  --product-hero-gradient: radial-gradient(circle at 78% 14%, rgba(224, 224, 224, 0.07) 0%, transparent 42%),
    linear-gradient(145deg, rgba(33, 42, 48, 0.58) 0%, rgba(27, 34, 39, 0.62) 100%);
  --product-panel-gradient: linear-gradient(180deg, rgba(33, 42, 48, 0.96) 0%, rgba(25, 32, 36, 0.96) 100%);
  --product-cta-gradient: linear-gradient(135deg, #8fa8b8 0%, #d0d0d0 100%);
  --product-focus: #c7d8e3;
  --product-bg-glow-a: rgba(143, 168, 184, 0.17);
  --product-bg-glow-b: rgba(208, 208, 208, 0.1);
}

.product-page--bespoke {
  --product-accent: #2F8F82;
  --product-accent-hover: #27786D;
  --product-accent-2: #B4ECE3;
  --product-bg: #E7F3F0;
  --product-bg-soft: #DBECE8;
  --product-surface: #F4FAF8;
  --product-border: #C3DDD7;
  --product-glow: 0 0 18px rgba(180, 236, 227, 0.22);
  --product-text: #132528;
  --product-text-muted: #3F5C60;
  --product-hero-gradient: radial-gradient(circle at 84% 18%, rgba(180, 236, 227, 0.18) 0%, transparent 54%),
    linear-gradient(148deg, rgba(224, 241, 237, 0.9) 0%, rgba(214, 234, 229, 0.92) 100%);
  --product-panel-gradient: linear-gradient(180deg, rgba(246, 252, 250, 0.98) 0%, rgba(235, 246, 243, 0.98) 100%);
  --product-cta-gradient: linear-gradient(135deg, #2F8F82 0%, #B4ECE3 100%);
  --product-focus: #2F8F82;
  --product-bg-glow-a: rgba(180, 236, 227, 0.24);
  --product-bg-glow-b: rgba(47, 143, 130, 0.18);
}

.product-page .product-hero-logo {
  max-height: clamp(4.6rem, 8.5vw, 6.2rem);
  width: auto;
  object-fit: contain;
  margin-bottom: var(--space-4);
}

.product-page--jense .btn--primary,
.product-page--jense .step-card__number {
  color: #231a10;
}

.product-page--apportio .main-nav__link:hover,
.product-page--apportio .main-nav__link[aria-current="page"],
.product-page--allocatrix .main-nav__link:hover,
.product-page--allocatrix .main-nav__link[aria-current="page"],
.product-page--jense .main-nav__link:hover,
.product-page--jense .main-nav__link[aria-current="page"],
.product-page--eventq .main-nav__link:hover,
.product-page--eventq .main-nav__link[aria-current="page"],
.product-page--apportio .main-nav__item--has-submenu.is-current-group > .main-nav__link,
.product-page--allocatrix .main-nav__item--has-submenu.is-current-group > .main-nav__link,
.product-page--jense .main-nav__item--has-submenu.is-current-group > .main-nav__link,
.product-page--eventq .main-nav__item--has-submenu.is-current-group > .main-nav__link,
.product-page--apportio .main-nav__sublink:hover,
.product-page--apportio .main-nav__sublink[aria-current="page"],
.product-page--allocatrix .main-nav__sublink:hover,
.product-page--allocatrix .main-nav__sublink[aria-current="page"],
.product-page--jense .main-nav__sublink:hover,
.product-page--jense .main-nav__sublink[aria-current="page"],
.product-page--eventq .main-nav__sublink:hover,
.product-page--eventq .main-nav__sublink[aria-current="page"] {
  background: rgba(255, 255, 255, 0.1);
}

.product-page--bespoke .main-nav__link:hover,
.product-page--bespoke .main-nav__link[aria-current="page"],
.product-page--bespoke .main-nav__item--has-submenu.is-current-group > .main-nav__link,
.product-page--bespoke .main-nav__sublink:hover,
.product-page--bespoke .main-nav__sublink[aria-current="page"] {
  background: color-mix(in srgb, var(--product-accent) 18%, transparent);
}

body.product-page.product-page--bespoke {
  background-image:
    radial-gradient(circle at 12% 14%, rgba(180, 236, 227, 0.13) 0%, transparent 42%),
    radial-gradient(circle at 86% 12%, rgba(47, 143, 130, 0.1) 0%, transparent 46%),
    linear-gradient(165deg, rgba(226, 241, 237, 0.35) 0%, rgba(214, 232, 227, 0.31) 48%, rgba(223, 239, 235, 0.38) 100%),
    url("../assets/jenko-bg.png");
  background-attachment: fixed;
}

.product-page--bespoke .section--tone-a {
  background: linear-gradient(180deg, rgba(245, 252, 250, 0.5) 0%, rgba(231, 245, 241, 0.42) 100%);
}

.product-page--bespoke .section--tone-b {
  background:
    radial-gradient(circle at 82% 18%, rgba(180, 236, 227, 0.09) 0%, transparent 46%),
    linear-gradient(180deg, rgba(205, 230, 224, 0.66) 0%, rgba(194, 222, 215, 0.6) 100%);
}

.product-page--bespoke .section--divider {
  border-top-color: color-mix(in srgb, var(--product-accent) 32%, var(--product-border) 68%);
}