@layer site-actions {
  /* Shared button palette. Colored surfaces opt in where the surrounding panel is colored. */
  body {
    --action-dark: #000;
    --page-action-accent: var(--page-teal, var(--page-pink, var(--pink, #d4789c)));
    --action-fill: var(--action-dark);
  }

  [data-action-surface="color"],
  body:has(.section-sea[data-action-surface="color"]) .jbw-cart-dock {
    --action-fill: initial;
    --action-ink: var(--action-dark);
  }

  [data-action-surface="dark"],
  .order-signup {
    --action-fill: var(--action-dark);
    --action-ink: initial;
  }

  :is(.blush.trilogy-cta-btn, .home-buy-btn[data-book-name="Blush Born"]) {
    --action-accent: #d4789c;
  }

  :is(
      .faded.trilogy-cta-btn,
      .home-book-nav-btn--quest,
      .home-buy-btn[data-book-name="A Faded Quest"]
    ) {
    --action-accent: var(--faded-quest-purple, #896dc8);
  }

  :is(
      .echoes.trilogy-cta-btn,
      .home-book-nav-btn--echoes,
      .home-buy-btn[data-book-name="Echoes of Foreshadow"]
    ) {
    --action-accent: var(--echoes-green, #8b8513);
  }

  html
    body
    :is(
      .trilogy-cta-btn,
      .cta-btn,
      .cta-link,
      .home-buy-btn,
      .home-book-nav-btn,
      .home-story-cta,
      .prism-cta,
      .pk-cta,
      .tier-cta,
      .spotify-btn,
      .substack-cta-link,
      .grotto-trust-btn,
      .map-region-btn,
      .btn-primary,
      .pill-btn,
      .policy-btn,
      .shop-primary,
      .shop-secondary,
      .order-signup-link,
      .jbw-cart-link,
      .chapter-sample-toggle,
      button.cover-preview-cue,
      button[type="submit"]
    ),
  html body #subscribe.order-signup button {
    --current-action-accent: var(--action-accent, var(--page-action-accent));
    --current-action-ink: var(--action-ink, var(--current-action-accent));
    background: var(--action-fill, var(--current-action-accent)) !important;
    color: var(--current-action-ink) !important;
    -webkit-text-fill-color: var(--current-action-ink) !important;
    border: 2px solid var(--current-action-ink) !important;
    border-radius: 0 !important;
  }

  /* The trilogy uses one black, outlined button design across colored panels. */
  .trilogy-book-page :is(.cta-btn, .trilogy-book-actions .trilogy-cta-btn),
  .home-cover-actions .home-buy-btn,
  .home-book-nav-item :is(.home-buy-btn, .home-book-nav-btn) {
    --action-fill: #000;
    --action-ink: var(--action-accent, var(--page-action-accent));
  }

  .home-cover-actions .home-buy-btn {
    --action-accent: #d4789c;
  }

  .home-book-nav-item--quest :is(.home-buy-btn, .home-book-nav-btn) {
    --action-accent: var(--faded-quest-purple, #896dc8);
  }

  .home-book-nav-item--echoes :is(.home-buy-btn, .home-book-nav-btn) {
    --action-accent: var(--echoes-green, #8b8513);
  }

  /* A shared compact footprint prevents the hero Add to Cart from stretching
     into a full-width dark bar on the three trilogy book pages. */
  .trilogy-book-page .cta-block.cta-hero .cta-btn {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 52px !important;
    height: auto !important;
    padding: 0 1rem !important;
  }

  .trilogy-book-page .trilogy-cart-action > .trilogy-cta-btn {
    width: min(240px, 100%) !important;
  }

  .trilogy-book-page .trilogy-book-navigation .trilogy-book-links {
    max-width: 496px !important;
  }

  html body .cta-link :is(.cta-link-label, .cta-link-sub, .cta-link-arrow),
  html body .home-book-nav-btn :is(.home-book-nav-kicker, .home-book-nav-title) {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
  }

  html body nav.site-nav-bar.snb-footer .snb-links > .snb-item,
  html body nav.site-nav-bar.snb-footer .snb-dropdown > .snb-dropdown-btn {
    background: transparent !important;
    color: rgba(245, 242, 238, 0.72) !important;
    -webkit-text-fill-color: currentColor !important;
    font-weight: 500 !important;
  }

  html body nav.site-nav-bar.snb-footer .snb-links > .snb-item[aria-current="page"] {
    color: var(--page-action-accent) !important;
  }

  html body nav.site-nav-bar.snb-footer .snb-links > .snb-item:focus-visible,
  html body nav.site-nav-bar.snb-footer .snb-dropdown > .snb-dropdown-btn:focus-visible {
    outline: 2px solid currentColor !important;
    outline-offset: 2px;
  }
}