/* ANDPRO art-direction G16 — exact UI v3.1 corporate tokens.
   Scoped to the existing ap-attention-v1 root. No business logic or handlers. */
html.ap-attention-v1 {
  --ap-ds-canvas: #f6f8fb;
  --ap-ds-surface: #ffffff;
  --ap-ds-brand-soft: #eef0fb;
  --ap-ds-ink: #2c3a47;
  --ap-ds-muted: #5a6b7a;
  --ap-ds-soft: #7a8a99;
  --ap-ds-line: #dfe3f1;
  --ap-ds-brand: #575fcf;
  --ap-ds-brand-strong: #474fbf;
  --ap-ds-commerce: #ffc048;
  --ap-ds-success: #16875b;
  --ap-ds-danger: #c64b55;
  --ap-ds-card-radius: 14px;
  --ap-ds-control-radius: 8px;
  --ap-ds-control-min: 46px;
  --ap-ds-shadow: 0 8px 22px rgba(34, 36, 102, .05);

  /* Compatibility bridge for the already-live attention layer.
     Its component declarations intentionally have priority; changing only
     their scoped token inputs preserves the accepted no-important contract. */
  --ap-attention-primary-bg: var(--ap-ds-commerce);
  --ap-attention-primary-hover: var(--ap-ds-commerce);
  --ap-attention-primary-active: var(--ap-ds-commerce);
  --ap-attention-primary-fg: var(--ap-ds-ink);
  --ap-attention-secondary-fg: var(--ap-ds-brand-strong);
  --ap-attention-secondary-border: var(--ap-ds-line);
  --ap-attention-focus: var(--ap-ds-brand);
  --ap-attention-disabled-bg: var(--ap-ds-brand-soft);
  --ap-attention-disabled-border: var(--ap-ds-line);
  --ap-attention-disabled-fg: var(--ap-ds-muted);

  /* Reconcile the already-live harmony, header/footer and form token layers. */
  --ap-h-color-brand: var(--ap-ds-brand);
  --ap-h-color-brand-strong: var(--ap-ds-brand-strong);
  --ap-h-color-brand-soft: var(--ap-ds-brand-soft);
  --ap-h-color-attention: var(--ap-ds-commerce);
  --ap-h-color-attention-ink: var(--ap-ds-ink);
  --ap-h-color-trust: var(--ap-ds-success);
  --ap-h-color-support: var(--ap-ds-brand);
  --ap-h-color-ink: var(--ap-ds-ink);
  --ap-h-color-muted: var(--ap-ds-muted);
  --ap-h-color-line: var(--ap-ds-line);
  --ap-h-color-surface: var(--ap-ds-surface);
  --ap-h-radius-control: var(--ap-ds-control-radius);
  --ap-h-radius-card: var(--ap-ds-card-radius);
  --ap-h-radius-panel: var(--ap-ds-card-radius);
  --ap-h-control-min: var(--ap-ds-control-min);
  --ap-h-focus-ring: 0 0 0 3px rgba(87, 95, 207, .28);

  --hf: var(--ap-ds-brand);
  --hf-dark: var(--ap-ds-brand-strong);
  --hf-deep: var(--ap-ds-ink);
  --hf-ink: var(--ap-ds-ink);
  --hf-muted: var(--ap-ds-muted);
  --hf-line: var(--ap-ds-line);
  --hf-soft: var(--ap-ds-brand-soft);
  --hf-yellow: var(--ap-ds-commerce);
  --hf-radius: var(--ap-ds-control-radius);

  --fui: var(--ap-ds-brand);
  --fui-dark: var(--ap-ds-brand-strong);
  --fui-ink: var(--ap-ds-ink);
  --fui-muted: var(--ap-ds-muted);
  --fui-line: var(--ap-ds-line);
  --fui-line-strong: var(--ap-ds-brand);
  --fui-err: var(--ap-ds-danger);
  --fui-radius: var(--ap-ds-control-radius);
}

html.ap-attention-v1 body {
  color: var(--ap-ds-ink);
  font-family: Roboto, Arial, sans-serif;
}

html.ap-attention-v1 main h1,
html.ap-attention-v1 .content h1,
html.ap-attention-v1 .content-block h1 {
  color: var(--ap-ds-ink);
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.12;
  letter-spacing: -.02em;
}

html.ap-attention-v1.andpro-article-modern-page main h1 {
  font-size: clamp(30px, 3.4vw, 40px);
}

html.ap-attention-v1 .ap-harmony-section {
  border-color: var(--ap-ds-line);
  border-radius: var(--ap-ds-card-radius);
  background: var(--ap-ds-surface);
  padding: clamp(18px, 3vw, 32px);
  box-shadow: var(--ap-ds-shadow);
}

html.ap-attention-v1 :is(
  .ap-home-section,
  .ap-tracks,
  .ap-cfg,
  .ap-trust,
  .catalog-container,
  .itempage-container,
  .andpro-blog-hub-next,
  .ap-article-section,
  .ap-services-process,
  .andpro-company,
  .andpro-registry
) {
  color: var(--ap-ds-ink);
  min-width: 0;
}

html.ap-attention-v1 .ap-harmony-card {
  border-color: var(--ap-ds-line);
  border-radius: var(--ap-ds-card-radius);
  background: var(--ap-ds-surface);
  box-shadow: var(--ap-ds-shadow);
}

html.ap-attention-v1 .ap-harmony-chip {
  min-height: 32px;
  color: var(--ap-ds-brand-strong);
  background: var(--ap-ds-brand-soft);
  font-size: max(12px, .75rem);
}

html.ap-attention-v1 .ap-harmony-action,
html.ap-attention-v1 .cf-button,
html.ap-attention-v1 .header__cat-btn,
html.ap-attention-v1 .hf-contact__call {
  min-height: var(--ap-ds-control-min);
  border-radius: var(--ap-ds-control-radius);
  font-family: inherit;
}

html.ap-attention-v1 .ap-harmony-action {
  color: var(--ap-ds-surface);
  background: var(--ap-ds-brand);
  border-color: var(--ap-ds-brand);
}

@media (hover: hover) {
  html.ap-attention-v1 .ap-harmony-action:hover,
  html.ap-attention-v1 .header__cat-btn:hover,
  html.ap-attention-v1 .hf-contact__call:hover {
    color: var(--ap-ds-surface);
    background: var(--ap-ds-brand-strong);
    border-color: var(--ap-ds-brand-strong);
  }

  html.ap-attention-v1 .ap-harmony-card:hover {
    border-color: var(--ap-ds-brand);
    box-shadow: 0 8px 22px rgba(34, 36, 102, .05);
  }
}

/* Conversion role: purchase / submit remains distinct from navigation. */
html.ap-attention-v1 .card-btn.--buy,
html.ap-attention-v1 .itempage-stickybar__buy,
html.ap-attention-v1 .cf-total-box__btn,
html.ap-attention-v1 .order-page .cf-button.--primary,
html.ap-attention-v1 .order-total .cf-button.--primary,
html.ap-attention-v1 .content-block__total-order .cf-button,
html.ap-attention-v1 .ap-checkout-mobile-bar button,
html.ap-attention-v1 .basket .cf-button.--primary {
  min-height: var(--ap-ds-control-min);
  color: var(--ap-ds-ink);
  background: var(--ap-ds-commerce);
  border: 1px solid var(--ap-ds-ink);
  border-radius: var(--ap-ds-control-radius);
  font-family: inherit;
  font-weight: 700;
}

@media (hover: hover) {
  html.ap-attention-v1 .card-btn.--buy:hover,
  html.ap-attention-v1 .itempage-stickybar__buy:hover,
  html.ap-attention-v1 .cf-total-box__btn:hover,
  html.ap-attention-v1 .order-page .cf-button.--primary:hover,
  html.ap-attention-v1 .order-total .cf-button.--primary:hover,
  html.ap-attention-v1 .content-block__total-order .cf-button:hover,
  html.ap-attention-v1 .ap-checkout-mobile-bar button:hover {
    color: var(--ap-ds-ink);
    background: var(--ap-ds-commerce);
    border-color: var(--ap-ds-ink);
    box-shadow: inset 0 0 0 1px var(--ap-ds-ink);
  }
}

html.ap-attention-v1 .card-btn.--buy:active,
html.ap-attention-v1 .itempage-stickybar__buy:active,
html.ap-attention-v1 .cf-total-box__btn:active,
html.ap-attention-v1 .order-page .cf-button.--primary:active,
html.ap-attention-v1 .order-total .cf-button.--primary:active,
html.ap-attention-v1 .content-block__total-order .cf-button:active {
  color: var(--ap-ds-ink);
  background: var(--ap-ds-commerce);
  border-color: var(--ap-ds-ink);
  transform: translateY(1px);
}

/* Secondary commerce actions remain quiet and do not compete with purchase. */
html.ap-attention-v1 .ap-invoice-btn,
html.ap-attention-v1 .itempage-stickybar__invoice,
html.ap-attention-v1 .ap-price-alert-open,
html.ap-attention-v1 .cf-button:not(.--primary) {
  min-height: var(--ap-ds-control-min);
  color: var(--ap-ds-brand-strong);
  background: var(--ap-ds-surface);
  border: 1px solid var(--ap-ds-line);
  border-radius: var(--ap-ds-control-radius);
  font-family: inherit;
}

/* Forms and checkout: compact cards, clear totals, safe touch targets. */
html.ap-attention-v1 .order-page,
html.ap-attention-v1 .order-total,
html.ap-attention-v1 .form-box,
html.ap-attention-v1 .itempage-question,
html.ap-attention-v1 .itempage-reviewform {
  color: var(--ap-ds-ink);
  border-color: var(--ap-ds-line);
  border-radius: var(--ap-ds-card-radius);
  background: var(--ap-ds-surface);
  box-shadow: var(--ap-ds-shadow);
}

html.ap-attention-v1 .order-page input,
html.ap-attention-v1 .order-page select,
html.ap-attention-v1 .order-page textarea,
html.ap-attention-v1 .form-box input,
html.ap-attention-v1 .form-box select,
html.ap-attention-v1 .form-box textarea,
html.ap-attention-v1 .form-control.subscribe-form {
  min-height: var(--ap-ds-control-min);
  color: var(--ap-ds-ink);
  border-color: var(--ap-ds-line);
  border-radius: var(--ap-ds-control-radius);
  background: var(--ap-ds-surface);
  font-family: inherit;
}

html.ap-attention-v1 .order-total {
  border-top: 3px solid var(--ap-ds-commerce);
}

/* Shared shell and trust surfaces use the same density and role palette. */
html.ap-attention-v1 .header {
  border-bottom-color: var(--ap-ds-line);
  box-shadow: var(--ap-ds-shadow);
}

html.ap-attention-v1 .header__row {
  gap: clamp(10px, 1.4vw, 16px);
}

html.ap-attention-v1 .header__search-block input,
html.ap-attention-v1 .header__rightbox .call-btn,
html.ap-attention-v1 .header__rightbox .header-btn,
html.ap-attention-v1 .header__menu-btn {
  min-height: var(--ap-ds-control-min);
  border-radius: var(--ap-ds-control-radius);
}

html.ap-attention-v1 .header__rightbox .header-badge {
  color: var(--ap-ds-ink);
  background: var(--ap-ds-commerce);
  font-size: 12px;
}

html.ap-attention-v1 .nwfooter-main__row {
  gap: clamp(18px, 3vw, 26px);
}

html.ap-attention-v1 .nwfooter-main__menu a,
html.ap-attention-v1 .nwfooter button,
html.ap-attention-v1 .nwfooter input {
  min-height: var(--ap-ds-control-min);
}

html.ap-attention-v1 .ap-trust__badge.ap-harmony-chip {
  font-size: 12px;
}

html.ap-attention-v1 :is(
  .ap-harmony-action,
  .card-btn.--buy,
  .itempage-stickybar__buy,
  .ap-invoice-btn,
  .itempage-stickybar__invoice,
  .ap-price-alert-open,
  .cf-button,
  .header a,
  .header button,
  .nwfooter a,
  .nwfooter button,
  input,
  select,
  textarea
):focus-visible {
  outline: 3px solid var(--ap-ds-brand);
  outline-offset: 3px;
}

html.ap-attention-v1 :is(button, [role="button"], .cf-button, .card-btn)[disabled],
html.ap-attention-v1 :is(button, [role="button"], .cf-button, .card-btn)[aria-disabled="true"] {
  color: var(--ap-ds-muted);
  background: var(--ap-ds-brand-soft);
  border-color: var(--ap-ds-line);
  cursor: not-allowed;
  opacity: 1;
}

@media (max-width: 767px) {
  html.ap-attention-v1 main h1,
  html.ap-attention-v1 .content h1,
  html.ap-attention-v1 .content-block h1 {
    font-size: 28px;
  }

  html.ap-attention-v1.andpro-article-modern-page main h1 {
    font-size: 30px;
  }

  html.ap-attention-v1 .ap-harmony-section {
    padding: 18px;
  }

  html.ap-attention-v1 .content-block__order,
  html.ap-attention-v1 .content-block__total-order {
    min-width: 0;
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.ap-attention-v1 *,
  html.ap-attention-v1 *::before,
  html.ap-attention-v1 *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (forced-colors: active) {
  html.ap-attention-v1 :focus-visible {
    outline: 3px solid Highlight !important;
  }
}