/*
 * Back2Back Royal Frequency Colour System
 * Dark Signature implementation — 2026-08-14
 * This is the final colour authority for the public website.
 */

:root {
  color-scheme: dark;

  --b2b-void: #000000;
  --b2b-obsidian: #05050a;
  --b2b-midnight: #180b23;
  --b2b-surface-2: #24113a;
  --b2b-deep-royal: #3d0d81;
  --b2b-violet: #6d00e4;
  --b2b-amethyst: #a453fa;
  --b2b-magenta: #d036f3;
  --b2b-cyan: #2ae9fd;
  --b2b-blue: #0672fa;
  --b2b-ice: #bffcff;
  --b2b-gold: #fbd08d;
  --b2b-bronze: #7d3b06;
  --b2b-pearl: #fff4c6;
  --b2b-smoke: #bba591;
  --b2b-white: #ffffff;

  --b2b-surface-glass: rgba(24, 11, 35, .78);
  --b2b-line: rgba(191, 252, 255, .18);
  --b2b-line-strong: rgba(42, 233, 253, .58);
  --b2b-line-premium: rgba(251, 208, 141, .42);
  --b2b-shadow: rgba(0, 0, 0, .56);
  --b2b-focus: #2ae9fd;

  --b2b-gradient-royal: linear-gradient(135deg, #3d0d81 0%, #6d00e4 52%, #a453fa 100%);
  --b2b-gradient-signal: linear-gradient(135deg, #0672fa 0%, #2ae9fd 62%, #bffcff 100%);
  --b2b-gradient-premium: linear-gradient(135deg, #7d3b06 0%, #fbd08d 55%, #fff4c6 100%);
  --b2b-gradient-signature: linear-gradient(115deg, #6d00e4 0%, #d036f3 42%, #2ae9fd 72%, #fbd08d 100%);

  /* Legacy aliases intentionally redirected to the canonical system. */
  --ink: var(--b2b-obsidian);
  --brand-night: var(--b2b-obsidian);
  --surface: var(--b2b-midnight);
  --surface-2: var(--b2b-surface-2);
  --panel: var(--b2b-midnight);
  --panel-2: var(--b2b-surface-2);
  --bg: var(--b2b-obsidian);
  --black: var(--b2b-void);
  --black-soft: var(--b2b-obsidian);
  --black-card: var(--b2b-midnight);
  --black-line: var(--b2b-line);
  --bone: var(--b2b-white);
  --white: var(--b2b-white);
  --white-muted: var(--b2b-ice);
  --muted: var(--b2b-smoke);
  --gold: var(--b2b-gold);
  --gold-hi: var(--b2b-pearl);
  --signal: var(--b2b-cyan);
  --cyan: var(--b2b-cyan);
  --ice: var(--b2b-ice);
  --violet: var(--b2b-violet);
  --acid: var(--b2b-cyan);
  --danger: #e46bbd;
  --line: var(--b2b-line);
  --b2b-ink: var(--b2b-obsidian);
  --b2b-gold-bright: var(--b2b-pearl);
}

html {
  background: var(--b2b-void) !important;
  accent-color: var(--b2b-violet);
}

html body.home-page,
html body.catalog-page,
html body.drumkits-page {
  color: var(--b2b-white) !important;
  background-color: var(--b2b-obsidian) !important;
  background-image:
    radial-gradient(circle at 16% 13%, rgba(109, 0, 228, .13), transparent 29rem),
    radial-gradient(circle at 84% 68%, rgba(42, 233, 253, .07), transparent 32rem) !important;
}

body ::selection {
  color: var(--b2b-white);
  background: var(--b2b-deep-royal);
}

body :where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--b2b-focus, #2ae9fd) !important;
  outline-offset: 3px !important;
}

body main img,
body .site-header img,
body .site-footer img,
body .product-dialog img {
  filter: none !important;
}

/* Header and navigation */
html body .site-header,
html body .site-header.scrolled {
  color: var(--b2b-white) !important;
  background: linear-gradient(110deg, rgba(5, 5, 10, .94), rgba(24, 11, 35, .84)) !important;
  border-color: var(--b2b-line) !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .38) !important;
}

html body .site-header::after {
  background: var(--b2b-gradient-signature) !important;
  box-shadow: 0 0 16px rgba(42, 233, 253, .18) !important;
  opacity: .82 !important;
}

html body .site-header .brand,
html body .site-header .brand > span,
html body .site-header .brand > span > span {
  color: var(--b2b-white) !important;
}

html body .site-header .brand > span > span,
html body .footer-brand i {
  color: var(--b2b-cyan) !important;
}

html body .brand::before {
  background: conic-gradient(from 20deg, transparent 0 18%, var(--b2b-cyan) 21% 27%, transparent 30% 55%, var(--b2b-violet) 58% 64%, transparent 67%) !important;
}

html body .brand::after {
  background: linear-gradient(90deg, var(--b2b-violet), var(--b2b-cyan), transparent) !important;
  box-shadow: 0 0 12px rgba(42, 233, 253, .34) !important;
}

html body .brand:hover img,
html body .brand:focus-visible img {
  box-shadow: 0 0 0 2px rgba(42, 233, 253, .72), 0 0 26px rgba(109, 0, 228, .28) !important;
}

html body .desktop-nav a {
  color: var(--b2b-smoke) !important;
}

html body .desktop-nav a::before {
  color: var(--b2b-gold) !important;
}

html body .desktop-nav a::after {
  background: var(--b2b-gradient-royal) !important;
}

html body .desktop-nav a:hover,
html body .desktop-nav a:focus-visible,
html body .desktop-nav a[aria-current="page"] {
  color: var(--b2b-white) !important;
  text-shadow: 0 0 14px rgba(164, 83, 250, .32) !important;
}

html body .icon-button,
html body .lang-switch {
  color: var(--b2b-white) !important;
  background: rgba(24, 11, 35, .84) !important;
  border-color: rgba(42, 233, 253, .46) !important;
  box-shadow: inset 0 0 0 1px rgba(109, 0, 228, .18) !important;
}

html body .icon-button:hover,
html body .lang-switch:hover {
  color: var(--b2b-obsidian) !important;
  background: var(--b2b-gradient-signal) !important;
  border-color: var(--b2b-ice) !important;
}

html body .site-header .header-actions .lang-switch .lang-current {
  color: var(--b2b-obsidian) !important;
  background: var(--b2b-gradient-premium) !important;
}

html body .site-header .header-actions .lang-switch .lang-next {
  color: var(--b2b-ice) !important;
}

html body .site-header .header-actions .lang-switch > i {
  background: var(--b2b-cyan) !important;
}

html body .mobile-menu {
  color: var(--b2b-white) !important;
  background:
    linear-gradient(145deg, rgba(5, 5, 10, .97), rgba(24, 11, 35, .94)),
    radial-gradient(circle at 100% 0, rgba(109, 0, 228, .18), transparent 22rem) !important;
  border-color: var(--b2b-line-strong) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .58) !important;
}

html body .mobile-menu a {
  color: var(--b2b-white) !important;
  border-color: var(--b2b-line) !important;
}

html body .mobile-menu a::before {
  color: var(--b2b-gold) !important;
}

html body .mobile-menu a:hover,
html body .mobile-menu a:focus-visible,
html body .mobile-menu a[aria-current="page"] {
  color: var(--b2b-ice) !important;
  background: linear-gradient(90deg, rgba(109, 0, 228, .28), transparent 74%) !important;
  border-color: rgba(42, 233, 253, .54) !important;
}

/* Global content hierarchy */
html body :where(h1, h2, h3, h4, strong) {
  color: var(--b2b-white);
}

html body :where(p, li, small) {
  color: var(--b2b-ice);
}

html body .section-index,
html body .section-kicker,
html body .eyebrow,
html body .kit-genre,
html body .product-card__genre,
html body .product-dialog__genre {
  color: var(--b2b-gold) !important;
}

html body .text-link {
  color: var(--b2b-cyan) !important;
}

html body .text-link:hover,
html body .text-link:focus-visible {
  color: var(--b2b-ice) !important;
}

/* Buttons: violet action, cyan secondary, gold premium purchase. */
html body .button {
  color: var(--b2b-white) !important;
  background: rgba(24, 11, 35, .62) !important;
  border-color: rgba(42, 233, 253, .42) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .34) !important;
}

html body .button.primary:not(.buy-link) {
  color: var(--b2b-white) !important;
  background: var(--b2b-gradient-royal) !important;
  border-color: var(--b2b-amethyst) !important;
  box-shadow: 0 14px 38px rgba(109, 0, 228, .30) !important;
}

html body .button.primary:not(.buy-link):hover,
html body .button.primary:not(.buy-link):focus-visible {
  color: var(--b2b-white) !important;
  background: linear-gradient(135deg, var(--b2b-violet), var(--b2b-amethyst)) !important;
  border-color: var(--b2b-ice) !important;
  box-shadow: 0 16px 44px rgba(164, 83, 250, .34) !important;
}

html body .button.buy-link,
html body .product-dialog__buy {
  color: var(--b2b-obsidian) !important;
  background: var(--b2b-gradient-premium) !important;
  border-color: var(--b2b-pearl) !important;
  box-shadow: 0 14px 38px rgba(251, 208, 141, .20) !important;
}

html body .button.buy-link:hover,
html body .button.buy-link:focus-visible,
html body .product-dialog__buy:hover,
html body .product-dialog__buy:focus-visible {
  color: var(--b2b-obsidian) !important;
  background: linear-gradient(135deg, var(--b2b-gold), var(--b2b-pearl)) !important;
  border-color: var(--b2b-cyan) !important;
}

html body .button.ghost,
html body .details-button {
  color: var(--b2b-cyan) !important;
  background: rgba(5, 5, 10, .66) !important;
  border-color: rgba(42, 233, 253, .58) !important;
}

html body .button.ghost:hover,
html body .button.ghost:focus-visible,
html body .details-button:hover,
html body .details-button:focus-visible {
  color: var(--b2b-obsidian) !important;
  background: var(--b2b-gradient-signal) !important;
  border-color: var(--b2b-ice) !important;
}

/* Home */
html body.home-page main#main section.hero .hero-content {
  color: var(--b2b-white) !important;
}

html body.home-page main#main section.hero h1 em {
  color: var(--b2b-cyan) !important;
  text-shadow: 0 0 28px rgba(42, 233, 253, .20) !important;
}

html body.home-page .identity-rail,
html body.home-page main#main section#process,
html body.home-page main#main section#mixing-mastering,
html body.home-page main#main section#faq,
html body.home-page main#main section#custom-beats,
html body .site-footer {
  border-color: var(--b2b-line-premium) !important;
}

html body.home-page .rail-copy p {
  color: var(--b2b-ice) !important;
}

html body.home-page main#main#main#main section#process .process-heading {
  color: var(--b2b-white) !important;
  background: linear-gradient(135deg, rgba(24, 11, 35, .86), rgba(5, 5, 10, .74)) !important;
  border-color: var(--b2b-line-strong) !important;
  border-left-color: var(--b2b-violet) !important;
  box-shadow: 0 22px 64px rgba(0, 0, 0, .44), inset 0 1px rgba(191, 252, 255, .09) !important;
}

html body.home-page main#main#main#main section#process .process-heading::after {
  background: linear-gradient(90deg, var(--b2b-violet), var(--b2b-cyan), transparent) !important;
}

html body.home-page main#main#main#main section#process .process-heading h2 {
  color: var(--b2b-white) !important;
  -webkit-text-stroke: .35px rgba(42, 233, 253, .56) !important;
}

html body.home-page main#main#main#main section#process .process-step {
  color: var(--b2b-white) !important;
  background: rgba(5, 5, 10, .76) !important;
  border-color: var(--b2b-line) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .42) !important;
}

html body.home-page main#main#main#main section#process .process-step:hover,
html body.home-page main#main#main#main section#process .process-step:focus-within {
  border-color: rgba(164, 83, 250, .76) !important;
  box-shadow: 0 24px 58px rgba(61, 13, 129, .25) !important;
}

html body.home-page main#main#main#main section#process .process-image {
  background: var(--b2b-obsidian) !important;
}

html body.home-page main#main#main#main section#process .process-image img,
html body.home-page main#main#main#main section#process .process-step:nth-child(3) .process-image img,
html body.home-page main#main#main#main section#process .process-step:hover .process-image img,
html body.home-page main#main#main#main section#process .process-step:focus-within .process-image img {
  filter: none !important;
  opacity: 1 !important;
}

html body.home-page main#main#main#main section#process .process-image::after {
  background: linear-gradient(180deg, transparent 54%, rgba(24, 11, 35, .48)) !important;
}

html body.home-page main#main#main#main section#process .process-image > span {
  color: var(--b2b-obsidian) !important;
  background: var(--b2b-gradient-premium) !important;
  border-color: var(--b2b-pearl) !important;
}

html body.home-page main#main#main#main section#process .process-step > div:nth-child(2) {
  color: var(--b2b-white) !important;
  background: rgba(24, 11, 35, .72) !important;
  border-color: rgba(42, 233, 253, .36) !important;
  border-left-color: var(--b2b-violet) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .36), inset 0 1px rgba(191, 252, 255, .08) !important;
}

html body.home-page main#main#main#main section#process .process-step > div:nth-child(2) h3 {
  color: var(--b2b-white) !important;
  -webkit-text-stroke: .25px rgba(42, 233, 253, .42) !important;
}

html body.home-page main#main#main#main section#process .process-step > div:nth-child(2) p {
  color: var(--b2b-ice) !important;
}

html body.home-page main#main section#mixing-mastering .service-section__content {
  color: var(--b2b-white) !important;
  background: linear-gradient(110deg, rgba(5, 5, 10, .96), rgba(24, 11, 35, .83)) !important;
  border-color: var(--b2b-line) !important;
  border-left-color: var(--b2b-violet) !important;
  box-shadow: 0 24px 72px rgba(0, 0, 0, .48) !important;
}

html body.home-page main#main section#mixing-mastering .service-section__content h2 {
  color: var(--b2b-white) !important;
}

html body.home-page main#main section#mixing-mastering .service-section__content p,
html body.home-page main#main section#mixing-mastering .service-list li {
  color: var(--b2b-ice) !important;
  border-color: var(--b2b-line-premium) !important;
}

html body.home-page main#main section#faq {
  color: var(--b2b-white) !important;
  background-color: var(--b2b-obsidian) !important;
}

html body.home-page main#main section#faq .faq-heading h2 {
  color: var(--b2b-white) !important;
  text-shadow: 0 3px 18px rgba(0, 0, 0, .84) !important;
}

html body.home-page main#main section#faq .faq-item {
  color: var(--b2b-white) !important;
  background: rgba(24, 11, 35, .90) !important;
  border-color: var(--b2b-line) !important;
  box-shadow: inset 3px 0 0 var(--b2b-deep-royal) !important;
}

html body.home-page main#main section#faq .faq-item:nth-child(3n + 2) {
  box-shadow: inset 3px 0 0 var(--b2b-cyan) !important;
}

html body.home-page main#main section#faq .faq-item:nth-child(3n) {
  box-shadow: inset 3px 0 0 var(--b2b-gold) !important;
}

html body.home-page main#main section#faq .faq-item[open] {
  background: var(--b2b-surface-2) !important;
  border-color: rgba(164, 83, 250, .68) !important;
}

html body.home-page main#main section#faq .faq-item summary {
  color: var(--b2b-white) !important;
}

html body.home-page main#main section#faq .faq-item p {
  color: var(--b2b-ice) !important;
  background: rgba(5, 5, 10, .46) !important;
  border-top: 1px solid var(--b2b-line) !important;
}

html body.home-page main#main section#faq .faq-item summary::after {
  background: linear-gradient(var(--b2b-cyan), var(--b2b-cyan)) center/100% 1px no-repeat, linear-gradient(var(--b2b-cyan), var(--b2b-cyan)) center/1px 100% no-repeat !important;
}

html body.home-page main#main#main#main section#custom-beats.universe-cta .universe-cta__custom-copy {
  color: var(--b2b-white) !important;
  background: linear-gradient(135deg, rgba(24, 11, 35, .88), rgba(5, 5, 10, .82)) !important;
  border-color: var(--b2b-line-strong) !important;
  border-left-color: var(--b2b-violet) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .48), inset 0 1px rgba(191, 252, 255, .08) !important;
}

html body.home-page main#main#main#main section#custom-beats.universe-cta .universe-cta__custom-copy h2 {
  color: var(--b2b-white) !important;
}

html body.home-page main#main#main#main section#custom-beats.universe-cta .universe-cta__custom-copy p {
  color: var(--b2b-ice) !important;
}

/* Catalog */
html body.catalog-page main#main .catalog-hero .shell {
  color: var(--b2b-white) !important;
  background: linear-gradient(135deg, rgba(24, 11, 35, .90), rgba(5, 5, 10, .78)) !important;
  border-color: var(--b2b-line-strong) !important;
  border-left-color: var(--b2b-violet) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .44) !important;
}

html body.catalog-page main#main .catalog-hero h1 {
  color: var(--b2b-white) !important;
}

html body.catalog-page main#main .catalog-hero p {
  color: var(--b2b-ice) !important;
  border-left-color: var(--b2b-gold) !important;
}

html body.catalog-page main#main#main#main#main section.store-section.section.shell {
  color: var(--b2b-white) !important;
  background-color: transparent !important;
}

html body.catalog-page main#main section.store-section .store-copy {
  color: var(--b2b-white) !important;
  background: linear-gradient(135deg, rgba(24, 11, 35, .88), rgba(5, 5, 10, .76)) !important;
  border-color: var(--b2b-line-strong) !important;
  border-left-color: var(--b2b-violet) !important;
  box-shadow: 0 20px 58px rgba(0, 0, 0, .42) !important;
}

html body.catalog-page main#main section.store-section .store-copy h2 {
  color: var(--b2b-white) !important;
}

html body.catalog-page main#main section.store-section .store-copy p {
  color: var(--b2b-ice) !important;
}

html body.catalog-page main#main section.store-section .store-embed {
  background: var(--b2b-obsidian) !important;
  border-color: rgba(42, 233, 253, .54) !important;
  box-shadow: 0 28px 72px rgba(0, 0, 0, .52), 0 0 0 1px rgba(109, 0, 228, .18) !important;
}

html body.catalog-page main#main section#license-path.license-section {
  color: var(--b2b-white) !important;
  border-color: var(--b2b-line-premium) !important;
}

html body.catalog-page main#main section#license-path.license-section > div {
  background: linear-gradient(135deg, rgba(24, 11, 35, .92), rgba(5, 5, 10, .84)) !important;
  border-left: 4px solid var(--b2b-violet) !important;
  box-shadow: 0 20px 58px rgba(0, 0, 0, .48) !important;
}

html body.catalog-page main#main section#license-path h2,
html body.catalog-page main#main section#license-path strong {
  color: var(--b2b-white) !important;
}

html body.catalog-page main#main section#license-path p {
  color: var(--b2b-ice) !important;
}

html body.catalog-page main#main section#license-path li {
  border-color: var(--b2b-line-premium) !important;
}

html body.catalog-page main#main section#license-path li > span {
  color: var(--b2b-obsidian) !important;
  background: var(--b2b-gradient-premium) !important;
  border-color: var(--b2b-pearl) !important;
}

html body.catalog-page main#main section#license-path li:nth-child(2) > span {
  color: var(--b2b-white) !important;
  background: var(--b2b-gradient-royal) !important;
  border-color: var(--b2b-amethyst) !important;
}

html body.catalog-page main#main section#license-path li:nth-child(3) > span {
  color: var(--b2b-obsidian) !important;
  background: var(--b2b-gradient-signal) !important;
  border-color: var(--b2b-ice) !important;
}

html body.catalog-page main#main section.catalog-art > div {
  color: var(--b2b-white) !important;
  background: linear-gradient(135deg, rgba(24, 11, 35, .90), rgba(5, 5, 10, .80)) !important;
  border-color: var(--b2b-line-strong) !important;
  border-left-color: var(--b2b-violet) !important;
}

html body.catalog-page main#main section.catalog-art h2 {
  color: var(--b2b-white) !important;
}

html body.catalog-page main#main section.catalog-art p {
  color: var(--b2b-ice) !important;
}

/* Drum kits and MIDI */
html body.drumkits-page main#main .drumkits-hero__copy,
html body.drumkits-page main#main .drumkits-final__content {
  color: var(--b2b-white) !important;
  background: linear-gradient(135deg, rgba(24, 11, 35, .78), rgba(5, 5, 10, .68)) !important;
  border-color: var(--b2b-line-premium) !important;
  border-left-color: var(--b2b-violet) !important;
  box-shadow: 0 24px 72px rgba(0, 0, 0, .46) !important;
}

html body.drumkits-page main#main .drumkits-hero__copy :where(h1, p),
html body.drumkits-page main#main .drumkits-final__content :where(h2, p) {
  color: var(--b2b-white) !important;
}

html body.drumkits-page main#main .kit-selector {
  color: var(--b2b-white) !important;
  background: rgba(5, 5, 10, .92) !important;
  border-color: var(--b2b-line) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .48) !important;
}

html body.drumkits-page main#main .kit-selector__item {
  --route-color: var(--b2b-violet);
  border-color: var(--b2b-line) !important;
}

html body.drumkits-page main#main .kit-selector__item:nth-child(3n + 2) {
  --route-color: var(--b2b-cyan);
}

html body.drumkits-page main#main .kit-selector__item:nth-child(3n) {
  --route-color: var(--b2b-gold);
}

html body.drumkits-page main#main .kit-selector__item:hover,
html body.drumkits-page main#main .kit-selector__item:focus-visible {
  background: rgba(61, 13, 129, .34) !important;
}

html body.drumkits-page main#main .kit-selector__item strong {
  color: var(--b2b-white) !important;
}

html body.drumkits-page main#main .kit-selector__item small {
  color: var(--b2b-ice) !important;
}

html body.drumkits-page main#main .kit-stage {
  color: var(--b2b-white) !important;
  background-color: var(--b2b-obsidian) !important;
  border-color: var(--b2b-line) !important;
}

html body.drumkits-page main#main .kit-copy {
  color: var(--b2b-white) !important;
  background: linear-gradient(135deg, rgba(24, 11, 35, .86), rgba(5, 5, 10, .78)) !important;
  border-color: var(--b2b-line) !important;
  border-left-color: var(--b2b-violet) !important;
  box-shadow: 0 20px 58px rgba(0, 0, 0, .44) !important;
}

html body.drumkits-page main#main .kit-copy h2,
html body.drumkits-page main#main .kit-copy p,
html body.drumkits-page main#main .kit-copy small {
  color: var(--b2b-white) !important;
}

html body.drumkits-page main#main .kit-copy p,
html body.drumkits-page main#main .kit-copy small {
  color: var(--b2b-ice) !important;
}

html body.drumkits-page main#main .kit-facts span,
html body.drumkits-page main#main .product-card__facts span,
html body .product-dialog__facts span {
  color: var(--b2b-ice) !important;
  background: rgba(61, 13, 129, .25) !important;
  border-color: rgba(164, 83, 250, .54) !important;
}

html body.drumkits-page main#main .producer-shop {
  color: var(--b2b-white) !important;
  background-color: var(--b2b-obsidian) !important;
}

html body.drumkits-page main#main section.producer-shop .producer-shop__intro {
  color: var(--b2b-white) !important;
  background: linear-gradient(135deg, rgba(24, 11, 35, .88), rgba(5, 5, 10, .74)) !important;
  border-color: var(--b2b-line-strong) !important;
  border-left-color: var(--b2b-violet) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .50), inset 0 1px rgba(191, 252, 255, .08) !important;
}

html body.drumkits-page main#main section.producer-shop .producer-shop__intro h2 {
  color: var(--b2b-white) !important;
}

html body.drumkits-page main#main section.producer-shop .producer-shop__intro p {
  color: var(--b2b-ice) !important;
  background: rgba(5, 5, 10, .52) !important;
  border-left-color: var(--b2b-cyan) !important;
}

html body.drumkits-page main#main .product-card {
  --route-color: var(--b2b-violet);
  color: var(--b2b-white) !important;
  background: linear-gradient(160deg, var(--b2b-midnight), var(--b2b-obsidian)) !important;
  border-color: rgba(164, 83, 250, .48) !important;
  box-shadow: inset 0 4px 0 var(--b2b-violet), 0 18px 48px rgba(0, 0, 0, .40) !important;
}

html body.drumkits-page main#main .product-card:nth-child(3n + 2) {
  --route-color: var(--b2b-cyan);
  box-shadow: inset 0 4px 0 var(--b2b-cyan), 0 18px 48px rgba(0, 0, 0, .40) !important;
}

html body.drumkits-page main#main .product-card:nth-child(3n) {
  --route-color: var(--b2b-gold);
  box-shadow: inset 0 4px 0 var(--b2b-gold), 0 18px 48px rgba(0, 0, 0, .40) !important;
}

html body.drumkits-page main#main .product-card:hover,
html body.drumkits-page main#main .product-card:focus-within {
  border-color: var(--route-color) !important;
  box-shadow: inset 0 4px 0 var(--route-color), 0 24px 58px rgba(61, 13, 129, .24) !important;
}

html body.drumkits-page main#main .product-card h3 {
  color: var(--b2b-white) !important;
}

html body.drumkits-page main#main .product-card p {
  color: var(--b2b-ice) !important;
}

html body.drumkits-page main#main .product-card__genre {
  color: var(--route-color) !important;
}

html body .product-dialog {
  --dialog-accent: var(--b2b-violet) !important;
  color: var(--b2b-white) !important;
  background: linear-gradient(145deg, var(--b2b-midnight), var(--b2b-obsidian)) !important;
  border-color: var(--b2b-line-strong) !important;
  outline-color: var(--b2b-violet) !important;
  box-shadow: 0 32px 100px rgba(0, 0, 0, .72) !important;
}

html body .product-dialog::backdrop {
  background: rgba(0, 0, 0, .86) !important;
}

html body .product-dialog h2 {
  color: var(--b2b-white) !important;
}

html body .product-dialog__description {
  color: var(--b2b-ice) !important;
}

html body .product-dialog__close {
  color: var(--b2b-white) !important;
  background: var(--b2b-deep-royal) !important;
  border-color: var(--b2b-cyan) !important;
}

html body .product-dialog__close:hover,
html body .product-dialog__close:focus-visible {
  color: var(--b2b-obsidian) !important;
  background: var(--b2b-gradient-signal) !important;
}

/* Footer and utility feedback */
html body .site-footer {
  color: var(--b2b-white) !important;
  background:
    linear-gradient(135deg, rgba(24, 11, 35, .68), rgba(5, 5, 10, .96)),
    var(--b2b-obsidian) !important;
  border-top-color: var(--b2b-line-premium) !important;
}

html body .site-footer .footer-grid strong,
html body .site-footer .footer-brand,
html body .site-footer p,
html body .site-footer a,
html body .site-footer .copyright {
  color: var(--b2b-ice) !important;
}

html body .site-footer .footer-grid strong,
html body .site-footer .footer-brand {
  color: var(--b2b-gold) !important;
}

html body .site-footer a:hover,
html body .site-footer a:focus-visible {
  color: var(--b2b-cyan) !important;
}

html body .site-footer .copyright {
  border-top-color: var(--b2b-line) !important;
}

html body .toast {
  color: var(--b2b-white) !important;
  background: linear-gradient(135deg, var(--b2b-deep-royal), var(--b2b-midnight)) !important;
  border-color: var(--b2b-cyan) !important;
  box-shadow: 0 16px 50px rgba(0, 0, 0, .56) !important;
}

html body .language-flash {
  background: radial-gradient(circle, rgba(109, 0, 228, .16), rgba(5, 5, 10, .08) 40%, transparent 70%) !important;
}

html body .language-flash span {
  background: linear-gradient(90deg, transparent, var(--b2b-violet), var(--b2b-cyan), var(--b2b-gold), transparent) !important;
  box-shadow: 0 0 18px rgba(42, 233, 253, .38) !important;
}

@media (max-width: 900px) {
  html body .site-header,
  html body .site-header.scrolled {
    background: linear-gradient(110deg, rgba(5, 5, 10, .88), rgba(24, 11, 35, .76)) !important;
    border-color: rgba(42, 233, 253, .28) !important;
  }

  html body.home-page main#main#main#main section#process .process-heading {
    text-align: left !important;
  }

  html body.catalog-page main#main section.store-section .store-copy,
  html body.catalog-page main#main .catalog-hero .shell,
  html body.drumkits-page main#main .drumkits-hero__copy {
    background: linear-gradient(145deg, rgba(24, 11, 35, .88), rgba(5, 5, 10, .74)) !important;
  }
}

/* Release QA: reliable touch targets without reintroducing a header bar. */
html body .site-header .brand,
html body .site-header .lang-switch,
html body .site-header .menu-toggle,
html body .desktop-nav a {
  min-height: 44px !important;
}

html body .site-header .menu-toggle {
  min-width: 44px !important;
}

html body .site-footer a {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
}

html body .site-footer .footer-grid > div:nth-child(3) a {
  justify-content: center !important;
}

@media (prefers-reduced-motion: reduce) {
  html body *,
  html body *::before,
  html body *::after {
    scroll-behavior: auto !important;
  }
}

/* 2026-08-14 — supplied 1920x1080 wallpaper suite, full-frame presentation */
html body.home-page main#main#main#main section.hero {
  min-height: max(calc(100svh - 66px), 56.25vw) !important;
  background: var(--b2b-obsidian) !important;
}

html body.home-page main#main#main#main section.hero .hero-bg {
  background: var(--b2b-obsidian) url('images/back2back-beats-desktop-02-director-of-sound-1920x1080.png') center / contain no-repeat !important;
  filter: none !important;
  opacity: 1 !important;
}

html body.home-page main#main#main#main section.hero::before,
html body.home-page main#main#main#main section.hero::after {
  display: none !important;
  content: none !important;
}

html body.home-page main#main#main#main section#process .process-image {
  aspect-ratio: 16 / 9 !important;
  background: var(--b2b-obsidian) !important;
}

html body.home-page main#main#main#main section#process .process-image img,
html body.home-page main#main#main#main section#process .process-step:nth-child(3) .process-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

html body.home-page main#main#main#main section#process .process-image::after {
  background: linear-gradient(180deg, transparent 64%, rgba(5, 5, 10, .34)) !important;
  opacity: .58 !important;
}

html body.home-page main#main#main#main section#process .process-step:hover .process-image img,
html body.home-page main#main#main#main section#process .process-step:focus-within .process-image img {
  filter: saturate(1.08) contrast(1.04) drop-shadow(0 0 20px rgba(42, 233, 253, .18)) !important;
  transform: scale(1.012) !important;
}

html body.home-page main#main#main#main section#process .process-step > div:nth-child(2) {
  background: rgba(24, 11, 35, .58) !important;
  border: 1px solid rgba(191, 252, 255, .24) !important;
  border-left: 3px solid var(--b2b-violet) !important;
  -webkit-backdrop-filter: blur(12px) saturate(125%) !important;
  backdrop-filter: blur(12px) saturate(125%) !important;
}

html body.home-page main#main#main#main section#mixing-mastering .service-section__media {
  background: var(--b2b-obsidian) url('images/back2back-beats-desktop-13-ace-of-sound-1920x1080.png') center / contain no-repeat !important;
  filter: none !important;
  opacity: 1 !important;
}

html body.home-page main#main#main#main section#faq .faq-heading h2 {
  color: var(--b2b-pearl) !important;
  -webkit-text-stroke: .45px rgba(251, 208, 141, .74) !important;
  text-shadow: 0 0 22px rgba(164, 83, 250, .26), 0 3px 18px rgba(0, 0, 0, .92) !important;
}

html body.catalog-page main#main#main#main .catalog-hero {
  min-height: max(calc(100svh - 66px), 56.25vw) !important;
  background: var(--b2b-obsidian) !important;
}

html body.catalog-page main#main#main#main .catalog-hero > picture,
html body.catalog-page main#main#main#main .catalog-hero > picture > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  background: var(--b2b-obsidian) !important;
  filter: none !important;
}

html body.catalog-page main#main#main#main section#license-path.license-section {
  background: var(--b2b-obsidian) url('images/back2back-beats-desktop-06-session-gate-1920x1080.png') center / contain no-repeat !important;
  min-height: min(56.25vw, 680px) !important;
}

html body.catalog-page main#main#main#main section#license-path.license-section > div {
  background: rgba(5, 5, 10, .82) !important;
  -webkit-backdrop-filter: blur(9px) saturate(120%) !important;
  backdrop-filter: blur(9px) saturate(120%) !important;
}

html body.drumkits-page main#main#main#main section.drumkits-hero {
  min-height: max(calc(100svh - 66px), 56.25vw) !important;
  background: var(--b2b-obsidian) !important;
}

html body.drumkits-page main#main#main#main section.drumkits-hero .drumkits-hero__media {
  background: var(--b2b-obsidian) url('images/back2back-beats-desktop-03-purple-grille-frequency-1920x1080.png') center / contain no-repeat !important;
  filter: none !important;
  opacity: 1 !important;
}

html body.drumkits-page main#main#main#main section#gravesignal .kit-env,
html body.drumkits-page main#main#main#main section#shadowslide .kit-env,
html body.drumkits-page main#main#main#main section#ghostrideknock .kit-env {
  background-color: var(--b2b-obsidian) !important;
  background-image: var(--env) !important;
  background-position: center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  filter: none !important;
  opacity: 1 !important;
}

html body.drumkits-page main#main#main#main section.producer-shop {
  background: var(--b2b-obsidian) url('images/back2back-beats-desktop-12-chrome-chain-resonance-1920x1080.png') center top / contain no-repeat !important;
}

html body .site-footer {
  padding: 22px 0 12px !important;
  background: linear-gradient(110deg, rgba(24, 11, 35, .94), rgba(5, 5, 10, .98)) !important;
  border-top: 2px solid var(--b2b-violet) !important;
  box-shadow: inset 0 1px rgba(42, 233, 253, .18) !important;
}

html body .site-footer .footer-grid {
  display: grid !important;
  grid-template-columns: 52px minmax(210px, .8fr) minmax(300px, 1.45fr) !important;
  align-items: center !important;
  gap: 14px 22px !important;
}

html body .site-footer .footer-grid > img {
  width: 52px !important;
  height: 52px !important;
}

html body .site-footer .footer-grid > div:nth-child(2) {
  display: grid !important;
  gap: 3px !important;
}

html body .site-footer .footer-grid > div:nth-child(2) p {
  margin: 0 !important;
}

html body .site-footer .footer-grid > div:nth-child(3) {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: 6px 14px !important;
  width: 100% !important;
  justify-self: stretch !important;
}

html body .site-footer .footer-grid > div:nth-child(3) a {
  margin: 0 !important;
  font-size: .78rem !important;
  letter-spacing: .035em !important;
}

html body .site-footer .copyright {
  margin: 12px auto 0 !important;
  padding-top: 10px !important;
  color: var(--b2b-cyan) !important;
  font-size: .72rem !important;
  text-align: center !important;
  border-top: 1px solid rgba(42, 233, 253, .24) !important;
}

@media (max-width: 900px) {
  html body.home-page main#main#main#main section.hero {
    height: max(620px, 82svh) !important;
    min-height: max(620px, 82svh) !important;
  }

  html body.catalog-page main#main#main#main .catalog-hero,
  html body.drumkits-page main#main#main#main section.drumkits-hero {
    min-height: 100svh !important;
  }

  html body.home-page main#main#main#main section.hero .hero-bg,
  html body.catalog-page main#main#main#main .catalog-hero > picture > img,
  html body.drumkits-page main#main#main#main section.drumkits-hero .drumkits-hero__media {
    background-size: contain !important;
    object-fit: contain !important;
    background-position: center !important;
    object-position: center !important;
  }

  html body.catalog-page main#main#main#main section#license-path.license-section {
    min-height: auto !important;
    background-size: contain !important;
    background-position: center top !important;
  }

  html body .site-footer .footer-grid {
    grid-template-columns: 44px 1fr !important;
    gap: 10px 14px !important;
  }

  html body .site-footer .footer-grid > img {
    width: 44px !important;
    height: 44px !important;
  }

  html body .site-footer .footer-grid > div:nth-child(3) {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px 12px !important;
    width: 100% !important;
    justify-self: stretch !important;
  }

  html body .site-footer {
    padding: 14px 0 9px !important;
  }

  html body .site-footer .copyright {
    margin-top: 8px !important;
    padding-top: 7px !important;
  }
}

/* Release QA: preserve 44px interactive targets against legacy header rules. */
html body .site-header .header-actions .lang-switch,
html body .site-header .header-actions .menu-toggle {
  height:44px!important;
  min-height:44px!important;
}

html body .skip-link {
  min-height:44px!important;
  display:inline-flex!important;
  align-items:center!important;
}

html body .desktop-nav a {
  min-width:44px!important;
  justify-content:center!important;
}