/**
 * Qube-on-B cascade bridge for gbp_pack
 * Template B keeps paper/serif chrome; Qube skin vars drive primary CTA fill.
 * Do not import upgrades/qube-manhattan/ full A skin.
 */

.client-skin--qube.template--B {
  --accent: var(--client-primary);
  --accent-hover: var(--client-accent-hover);
  --accent-text: #b35512;
  --on-accent: var(--btn-primary-fg);
  --focus: var(--client-primary);
  --halo: 0 0 0 3px rgba(246, 122, 32, 0.22);
}

/* Primary CTA: Qube orange fill (user lock). Secondary stays B outline. */
.client-skin--qube.template--B .btn--primary {
  background: var(--btn-primary-bg, #F67A20);
  color: var(--btn-primary-fg, #000000);
  border: 2px solid var(--btn-primary-bg, #F67A20);
}

.client-skin--qube.template--B .btn--primary:hover,
.client-skin--qube.template--B .btn--primary:focus-visible {
  background: var(--client-accent-hover, #e06d1a);
  border-color: var(--client-accent-hover, #e06d1a);
  color: var(--btn-primary-fg, #000000);
}

.client-skin--qube.template--B .btn--outline,
.client-skin--qube.template--B .btn--secondary {
  background: transparent;
  color: var(--fc-b-text, #1A1A18);
  border: 1px solid var(--fc-b-border, #D8D5CD);
}

.client-skin--qube.template--B .btn--outline:hover,
.client-skin--qube.template--B .btn--secondary:hover {
  border-color: var(--client-primary, #F67A20);
  color: var(--accent-text, #b35512);
}

.client-skin--qube.template--B a:not(.btn) {
  color: var(--accent-text, #b35512);
}

.client-skin--qube.template--B .chip--accent {
  border-color: rgba(246, 122, 32, 0.45);
  color: var(--accent-text, #b35512);
}

.client-skin--qube.template--B .sticky-cta .btn--primary {
  flex: 1;
}

.client-skin--qube.template--B .sticky-cta .btn--secondary,
.client-skin--qube.template--B .sticky-cta .btn--outline {
  flex: 1;
}

/* Publisher force: Design PASS WITH NOTES — Qube orange must win over B outline primary */
body.client-skin--qube.template--B a.btn.btn--primary,
body.client-skin--qube.template--B .btn.btn--primary {
  background: #F67A20 !important;
  color: #000000 !important;
  border: 2px solid #F67A20 !important;
}
body.client-skin--qube.template--B a.btn.btn--primary:hover,
body.client-skin--qube.template--B a.btn.btn--primary:focus-visible,
body.client-skin--qube.template--B .btn.btn--primary:hover,
body.client-skin--qube.template--B .btn.btn--primary:focus-visible {
  background: #e06d1a !important;
  border-color: #e06d1a !important;
  color: #000000 !important;
}