/* Site-wide accessibility contrast guardrails.
   Keep button-like controls readable regardless of theme/custom branding. */

:root {
  --cm-a11y-primary-bg: var(--cm-primary-action, #2563eb);
  --cm-a11y-primary-bg-hover: color-mix(in srgb, var(--cm-a11y-primary-bg) 86%, #000000);
  --cm-a11y-primary-fg: #ffffff;
  --cm-a11y-secondary-bg: #ffffff;
  --cm-a11y-secondary-bg-hover: #f3f4f6;
  --cm-a11y-secondary-fg: #111111;
  --cm-a11y-secondary-border: #8b929d;
  --cm-a11y-danger-bg: #991b1b;
  --cm-a11y-danger-bg-hover: #7f1d1d;
  --cm-a11y-success-bg: #166534;
  --cm-a11y-success-bg-hover: #14532d;
  --cm-a11y-focus: #2563eb;
  --cm-a11y-bg: var(--bg, #f5f7fb);
  --cm-a11y-surface: var(--panel-bg, var(--card-bg, #ffffff));
  --cm-a11y-surface-elevated: var(--panel-bg-raised, var(--card-bg, #ffffff));
  --cm-a11y-surface-muted: var(--subtle-bg, #f3f6fb);
  --cm-a11y-text: var(--text, #0f172a);
  --cm-a11y-text-soft: color-mix(in srgb, var(--cm-a11y-text) 82%, var(--cm-a11y-bg));
  --cm-a11y-muted: color-mix(in srgb, var(--cm-a11y-text) 64%, var(--cm-a11y-bg));
  --cm-a11y-border: var(--border, #d8e0ea);
  --cm-a11y-border-strong: color-mix(in srgb, var(--cm-a11y-border) 72%, var(--cm-a11y-text));
  --cm-a11y-link: var(--link, var(--brand-color, #1d4ed8));
  --cm-a11y-info-text: #075985;
  --cm-a11y-info-bg: #e0f2fe;
  --cm-a11y-info-border: #7dd3fc;
  --cm-a11y-success-text: #166534;
  --cm-a11y-success-soft: #dcfce7;
  --cm-a11y-warning-text: #92400e;
  --cm-a11y-warning-soft: #fef3c7;
  --cm-a11y-danger-text: #991b1b;
  --cm-a11y-danger-soft: #fee2e2;
  --cm-a11y-disabled-bg: color-mix(in srgb, var(--cm-a11y-surface-muted) 86%, var(--cm-a11y-border));
  --cm-a11y-disabled-text: color-mix(in srgb, var(--cm-a11y-text) 52%, var(--cm-a11y-bg));
  --cm-a11y-page-bg: var(--cm-a11y-bg);
  --cm-a11y-elevated-shadow: 0 18px 46px rgba(15, 23, 42, 0.1);
  --cm-a11y-divider: color-mix(in srgb, var(--cm-a11y-border) 86%, var(--cm-a11y-bg));
  --cm-a11y-action-primary: var(--cm-a11y-primary-bg);
  --cm-a11y-action-primary-text: var(--cm-a11y-primary-fg);
  --cm-a11y-action-secondary: var(--cm-a11y-secondary-bg);
  --cm-a11y-action-secondary-text: var(--cm-a11y-secondary-fg);
  --cm-a11y-action-ghost: color-mix(in srgb, var(--cm-a11y-surface) 88%, var(--cm-a11y-link));
  --cm-a11y-hover: color-mix(in srgb, var(--cm-a11y-link) 8%, var(--cm-a11y-surface));
  --cm-a11y-active: color-mix(in srgb, var(--cm-a11y-link) 13%, var(--cm-a11y-surface));
  --cm-a11y-selected: color-mix(in srgb, var(--cm-a11y-link) 16%, var(--cm-a11y-surface));
  --cm-a11y-input-bg: var(--cm-a11y-surface-elevated);
  --cm-a11y-input-border: var(--cm-a11y-border-strong);
  --cm-a11y-input-text: var(--cm-a11y-text);
  --cm-a11y-placeholder: color-mix(in srgb, var(--cm-a11y-text) 58%, var(--cm-a11y-bg));
  --cm-a11y-modal-bg: var(--cm-a11y-surface-elevated);
  --cm-a11y-dropdown-bg: var(--cm-a11y-surface-elevated);
  --cm-a11y-chat-bg: #f6f8fc;
  --cm-a11y-chat-message-bg: #ffffff;
  --cm-a11y-chat-user-bg: #2563eb;
  --cm-a11y-chat-user-text: #ffffff;
  --cm-a11y-assistant-highlight-bg: #eef4ff;
  --cm-a11y-control-height: 2.5rem;
  --cm-a11y-control-radius: 0.5rem;
}

:root[data-theme="dark"],
:root[data-partner-theme="dark"],
.ep-app[data-ui-theme="dark"] {
  --cm-a11y-secondary-bg: #111827;
  --cm-a11y-secondary-bg-hover: #1f2937;
  --cm-a11y-secondary-fg: #ffffff;
  --cm-a11y-secondary-border: #6b7280;
  --cm-a11y-focus: #93c5fd;
  --cm-a11y-bg: var(--shell-app-bg, var(--bg, #07111c));
  --cm-a11y-surface: var(--shell-surface-strong, var(--panel-bg, var(--card-bg, #0f1927)));
  --cm-a11y-surface-elevated: var(--panel-bg-raised, var(--shell-surface, #121b2a));
  --cm-a11y-surface-muted: var(--shell-surface-muted, var(--subtle-bg, #182536));
  --cm-a11y-text: var(--shell-text, var(--text, #f3f7fb));
  --cm-a11y-text-soft: var(--shell-text-soft, color-mix(in srgb, var(--cm-a11y-text) 86%, var(--cm-a11y-bg)));
  --cm-a11y-muted: var(--shell-text-muted, color-mix(in srgb, var(--cm-a11y-text) 72%, var(--cm-a11y-bg)));
  --cm-a11y-border: var(--shell-border, var(--border, #243244));
  --cm-a11y-border-strong: var(--shell-border-strong, color-mix(in srgb, var(--cm-a11y-border) 70%, var(--cm-a11y-text)));
  --cm-a11y-link: var(--link, var(--shell-primary, #93c5fd));
  --cm-a11y-info-text: #bae6fd;
  --cm-a11y-info-bg: rgba(14, 165, 233, 0.16);
  --cm-a11y-info-border: rgba(125, 211, 252, 0.38);
  --cm-a11y-success-text: #86efac;
  --cm-a11y-success-soft: rgba(34, 197, 94, 0.16);
  --cm-a11y-warning-text: #fde68a;
  --cm-a11y-warning-soft: rgba(245, 158, 11, 0.18);
  --cm-a11y-danger-text: #fecaca;
  --cm-a11y-danger-soft: rgba(239, 68, 68, 0.18);
  --cm-a11y-disabled-bg: color-mix(in srgb, var(--cm-a11y-surface-muted) 80%, #000000);
  --cm-a11y-disabled-text: color-mix(in srgb, var(--cm-a11y-text) 58%, var(--cm-a11y-bg));
  --cm-a11y-elevated-shadow: 0 22px 52px rgba(0, 0, 0, 0.32);
  --cm-a11y-divider: color-mix(in srgb, var(--cm-a11y-border) 78%, #000000);
  --cm-a11y-action-ghost: color-mix(in srgb, var(--cm-a11y-surface) 90%, var(--cm-a11y-link));
  --cm-a11y-hover: color-mix(in srgb, var(--cm-a11y-link) 10%, var(--cm-a11y-surface));
  --cm-a11y-active: color-mix(in srgb, var(--cm-a11y-link) 15%, var(--cm-a11y-surface));
  --cm-a11y-selected: color-mix(in srgb, var(--cm-a11y-link) 18%, var(--cm-a11y-surface));
  --cm-a11y-input-bg: #101b2a;
  --cm-a11y-input-border: var(--cm-a11y-border-strong);
  --cm-a11y-input-text: var(--cm-a11y-text);
  --cm-a11y-placeholder: color-mix(in srgb, var(--cm-a11y-text) 72%, var(--cm-a11y-bg));
  --cm-a11y-modal-bg: var(--cm-a11y-surface-elevated);
  --cm-a11y-dropdown-bg: var(--cm-a11y-surface-elevated);
  --cm-a11y-chat-bg: #0b1420;
  --cm-a11y-chat-message-bg: #121d2e;
  --cm-a11y-chat-user-bg: #2563eb;
  --cm-a11y-chat-user-text: #ffffff;
  --cm-a11y-assistant-highlight-bg: rgba(91, 140, 255, 0.16);
}

:where(
  .ep-page,
  .cm-auth-page,
  .ep-app,
  .cm-embed-shell,
  .onboarding-page,
  body
) :where(
  .ep-btn,
  .ep-btn-primary,
  .btn,
  .auth-btn,
  .onb-btn-primary,
  .onb-btn-ghost,
  .vnd-btn,
  .aff-btn,
  .rd-btn,
  .cm-topbar__cta,
  .cm-notice-rail__cta,
  .cm-notice-rail__dismiss,
  .cm-user-panel__link,
  .cm-user-panel__button,
  .cm-user-panel__switch button,
  .cm-user-panel__switch-current,
  .store-product-card__button,
  .retail-card__button,
  .retail-advert__cta,
  .product-retail-quickbuy,
  .product-mobile-purchase__btn,
  .qc-primary-btn,
  .qc-secondary-btn,
  .lp-btn,
  .lp-legal-btn,
  .cart-summary-actions .ep-btn,
  .checkout-primary-btn,
  .tc-payment-main .ep-btn,
  .tc-payment-main .ep-btn-primary,
  [role="button"][class],
  button[class*="btn"],
  a[class*="btn"],
  button[class*="button"],
  a[class*="button"]
) {
  text-decoration: none !important;
  text-shadow: none !important;
}

:where(
  .ep-page,
  .cm-auth-page,
  .ep-app,
  .cm-embed-shell,
  .onboarding-page,
  body
) :where(
  .ep-btn--primary,
  .ep-btn-primary,
  .btn.primary,
  button[class*="primary"],
  a[class*="primary"][class*="btn"],
  a[class*="primary"][class*="button"],
  input[type="submit"][class*="primary"],
  .auth-btn--primary,
  .onb-btn-primary,
  .vnd-btn--primary,
  .aff-btn--primary,
  .rd-btn--primary,
  .cm-topbar__cta--primary,
  .cm-notice-rail__cta,
  .store-product-card__button--primary,
  .store-product-card__button--buy-now,
  .retail-card__button--primary,
  .retail-card__button--buy-now,
  .product-retail-quickbuy,
  .product-mobile-purchase__btn--buy,
  .qc-primary-btn,
  .lp-btn-primary,
  .lp-legal-btn--primary,
  .checkout-primary-btn,
  .cart-summary-actions .ep-btn--primary,
  .tc-payment-main .ep-btn--primary,
  .tc-payment-main .ep-btn-primary
) {
  background: var(--cm-a11y-primary-bg) !important;
  border-color: var(--cm-a11y-primary-bg) !important;
  color: var(--cm-a11y-primary-fg) !important;
  -webkit-text-fill-color: var(--cm-a11y-primary-fg) !important;
}

:where(
  .ep-page,
  .cm-auth-page,
  .ep-app,
  .cm-embed-shell,
  .onboarding-page,
  body
) :where(
  .ep-btn--primary,
  .ep-btn-primary,
  .btn.primary,
  button[class*="primary"],
  a[class*="primary"][class*="btn"],
  a[class*="primary"][class*="button"],
  input[type="submit"][class*="primary"],
  .auth-btn--primary,
  .onb-btn-primary,
  .vnd-btn--primary,
  .aff-btn--primary,
  .rd-btn--primary,
  .cm-topbar__cta--primary,
  .cm-notice-rail__cta,
  .store-product-card__button--primary,
  .store-product-card__button--buy-now,
  .retail-card__button--primary,
  .retail-card__button--buy-now,
  .product-retail-quickbuy,
  .product-mobile-purchase__btn--buy,
  .qc-primary-btn,
  .lp-btn-primary,
  .lp-legal-btn--primary,
  .checkout-primary-btn,
  .cart-summary-actions .ep-btn--primary,
  .tc-payment-main .ep-btn--primary,
  .tc-payment-main .ep-btn-primary
):where(:hover, :focus) {
  background: var(--cm-a11y-primary-bg-hover) !important;
  border-color: var(--cm-a11y-primary-bg-hover) !important;
  color: var(--cm-a11y-primary-fg) !important;
  -webkit-text-fill-color: var(--cm-a11y-primary-fg) !important;
}

:where(
  .ep-page,
  .cm-auth-page,
  .ep-app,
  .cm-embed-shell,
  .onboarding-page,
  body
) :where(
  .ep-btn--secondary,
  .ep-btn--outline,
  .ep-btn--ghost,
  .btn.secondary,
  button[class*="secondary"],
  a[class*="secondary"][class*="btn"],
  a[class*="secondary"][class*="button"],
  input[type="submit"][class*="secondary"],
  button[class*="outline"],
  a[class*="outline"][class*="btn"],
  a[class*="outline"][class*="button"],
  button[class*="ghost"],
  a[class*="ghost"][class*="btn"],
  a[class*="ghost"][class*="button"],
  .auth-btn--ghost,
  .onb-btn-ghost,
  .vnd-btn--secondary,
  .aff-btn--secondary,
  .rd-btn--secondary,
  .rd-btn--ghost,
  .cm-topbar__cta,
  .cm-sidebar-toggle,
  .cm-icon-button,
  .cm-user-toggle,
  .cm-user-panel__link,
  .cm-user-panel__button,
  .cm-user-panel__switch button,
  .cm-user-panel__switch-current,
  .store-product-card__button--secondary:not(.store-product-card__button--buy-now),
  .retail-card__button--secondary:not(.retail-card__button--buy-now),
  .product-mobile-purchase__btn--cart,
  .qc-secondary-btn,
  .lp-btn-ghost,
  .lp-btn-outline,
  .lp-legal-btn:not(.lp-legal-btn--primary),
  .cart-summary-actions .ep-btn--secondary,
  .cart-summary-actions .ep-btn--ghost,
  .tc-payment-main .ep-btn--secondary,
  .tc-payment-main .ep-btn--ghost
) {
  background: var(--cm-a11y-secondary-bg) !important;
  border-color: var(--cm-a11y-secondary-border) !important;
  color: var(--cm-a11y-secondary-fg) !important;
  -webkit-text-fill-color: var(--cm-a11y-secondary-fg) !important;
}

:where(
  .ep-page,
  .cm-auth-page,
  .ep-app,
  .cm-embed-shell,
  .onboarding-page,
  body
) :where(
  button[class*="bg-blue-"],
  a[class*="bg-blue-"],
  input[type="submit"][class*="bg-blue-"],
  button[class*="bg-indigo-"],
  a[class*="bg-indigo-"],
  input[type="submit"][class*="bg-indigo-"],
  button[class*="bg-sky-"],
  a[class*="bg-sky-"],
  input[type="submit"][class*="bg-sky-"],
  button[class*="bg-red-"],
  a[class*="bg-red-"],
  input[type="submit"][class*="bg-red-"],
  button[class*="bg-emerald-"],
  a[class*="bg-emerald-"],
  input[type="submit"][class*="bg-emerald-"],
  button[class*="bg-green-"],
  a[class*="bg-green-"],
  input[type="submit"][class*="bg-green-"],
  button[class*="bg-slate-9"],
  a[class*="bg-slate-9"],
  input[type="submit"][class*="bg-slate-9"],
  button[class*="bg-gray-9"],
  a[class*="bg-gray-9"],
  input[type="submit"][class*="bg-gray-9"],
  button[class*="bg-black"],
  a[class*="bg-black"],
  input[type="submit"][class*="bg-black"]
) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

:where(
  .ep-page,
  .cm-auth-page,
  .ep-app,
  .cm-embed-shell,
  .onboarding-page,
  body
) :where(
  button[class*="bg-white"],
  a[class*="bg-white"],
  input[type="submit"][class*="bg-white"],
  button[class*="bg-gray-50"],
  a[class*="bg-gray-50"],
  input[type="submit"][class*="bg-gray-50"],
  button[class*="bg-slate-50"],
  a[class*="bg-slate-50"],
  input[type="submit"][class*="bg-slate-50"]
) {
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
}

:where(
  .ep-page,
  .cm-auth-page,
  .ep-app,
  .cm-embed-shell,
  .onboarding-page,
  body
) :where(
  .ep-btn--secondary,
  .ep-btn--outline,
  .ep-btn--ghost,
  .btn.secondary,
  button[class*="secondary"],
  a[class*="secondary"][class*="btn"],
  a[class*="secondary"][class*="button"],
  input[type="submit"][class*="secondary"],
  button[class*="outline"],
  a[class*="outline"][class*="btn"],
  a[class*="outline"][class*="button"],
  button[class*="ghost"],
  a[class*="ghost"][class*="btn"],
  a[class*="ghost"][class*="button"],
  .auth-btn--ghost,
  .onb-btn-ghost,
  .vnd-btn--secondary,
  .aff-btn--secondary,
  .rd-btn--secondary,
  .rd-btn--ghost,
  .cm-topbar__cta,
  .cm-sidebar-toggle,
  .cm-icon-button,
  .cm-user-toggle,
  .cm-user-panel__link,
  .cm-user-panel__button,
  .cm-user-panel__switch button,
  .cm-user-panel__switch-current,
  .store-product-card__button--secondary:not(.store-product-card__button--buy-now),
  .retail-card__button--secondary:not(.retail-card__button--buy-now),
  .product-mobile-purchase__btn--cart,
  .qc-secondary-btn,
  .lp-btn-ghost,
  .lp-btn-outline,
  .lp-legal-btn:not(.lp-legal-btn--primary),
  .cart-summary-actions .ep-btn--secondary,
  .cart-summary-actions .ep-btn--ghost,
  .tc-payment-main .ep-btn--secondary,
  .tc-payment-main .ep-btn--ghost
):where(:hover, :focus) {
  background: var(--cm-a11y-secondary-bg-hover) !important;
  color: var(--cm-a11y-secondary-fg) !important;
  -webkit-text-fill-color: var(--cm-a11y-secondary-fg) !important;
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body)
:where(.ep-btn--danger, .btn.danger, button[class*="danger"], a[class*="danger"][class*="btn"], a[class*="danger"][class*="button"], input[type="submit"][class*="danger"], .cm-user-panel__button--danger, .vnd-btn--danger, .aff-btn--danger) {
  background: var(--cm-a11y-danger-bg) !important;
  border-color: var(--cm-a11y-danger-bg) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body)
:where(.ep-btn--danger, .btn.danger, button[class*="danger"], a[class*="danger"][class*="btn"], a[class*="danger"][class*="button"], input[type="submit"][class*="danger"], .cm-user-panel__button--danger, .vnd-btn--danger, .aff-btn--danger):where(:hover, :focus) {
  background: var(--cm-a11y-danger-bg-hover) !important;
  border-color: var(--cm-a11y-danger-bg-hover) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body)
:where(.ep-btn--success, .btn.success, button[class*="success"], a[class*="success"][class*="btn"], a[class*="success"][class*="button"], input[type="submit"][class*="success"], .vnd-btn--success, .aff-btn--success) {
  background: var(--cm-a11y-success-bg) !important;
  border-color: var(--cm-a11y-success-bg) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body)
:where(.ep-btn--success, .btn.success, button[class*="success"], a[class*="success"][class*="btn"], a[class*="success"][class*="button"], input[type="submit"][class*="success"], .vnd-btn--success, .aff-btn--success):where(:hover, :focus) {
  background: var(--cm-a11y-success-bg-hover) !important;
  border-color: var(--cm-a11y-success-bg-hover) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

:where(
  .ep-page,
  .cm-auth-page,
  .ep-app,
  .cm-embed-shell,
  .onboarding-page,
  body
) :where(
  .ep-btn,
  .ep-btn-primary,
  .btn,
  .auth-btn,
  .onb-btn-primary,
  .onb-btn-ghost,
  .vnd-btn,
  .aff-btn,
  .rd-btn,
  .cm-topbar__cta,
  .cm-notice-rail__cta,
  .cm-notice-rail__dismiss,
  .cm-sidebar-toggle,
  .cm-icon-button,
  .cm-user-toggle,
  .cm-user-panel__link,
  .cm-user-panel__button,
  .cm-user-panel__switch button,
  .cm-user-panel__switch-current,
  .store-product-card__button,
  .retail-card__button,
  .retail-advert__cta,
  .product-retail-quickbuy,
  .product-mobile-purchase__btn,
  .qc-primary-btn,
  .qc-secondary-btn,
  .lp-btn,
  .lp-legal-btn,
  .cart-summary-actions .ep-btn,
  .checkout-primary-btn,
  .tc-payment-main .ep-btn,
  .tc-payment-main .ep-btn-primary
) :where(span, svg, strong, small) {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

:where(
  .ep-page,
  .cm-auth-page,
  .ep-app,
  .cm-embed-shell,
  .onboarding-page,
  body
) :where(
  .ep-btn,
  .ep-btn-primary,
  .btn,
  .auth-btn,
  .onb-btn-primary,
  .onb-btn-ghost,
  .vnd-btn,
  .aff-btn,
  .rd-btn,
  .cm-topbar__cta,
  .cm-sidebar-toggle,
  .cm-icon-button,
  .cm-user-toggle,
  .store-product-card__button,
  .retail-card__button,
  .retail-advert__cta,
  .product-retail-quickbuy,
  .product-mobile-purchase__btn,
  .qc-primary-btn,
  .qc-secondary-btn,
  .lp-btn,
  .lp-legal-btn,
  .checkout-primary-btn,
  [role="button"][class],
  button[class],
  a[class*="btn"],
  a[class*="button"]
):focus-visible {
  outline: 3px solid var(--cm-a11y-focus) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

:where(
  .ep-page,
  .cm-auth-page,
  .ep-app,
  .cm-embed-shell,
  .onboarding-page,
  body
) :where(
  .ep-btn,
  .ep-btn-primary,
  .btn,
  .auth-btn,
  .onb-btn-primary,
  .onb-btn-ghost,
  .vnd-btn,
  .aff-btn,
  .rd-btn,
  .cm-topbar__cta,
  .cm-notice-rail__cta,
  .cm-notice-rail__dismiss,
  .cm-sidebar-toggle,
  .cm-icon-button,
  .cm-user-toggle,
  .cm-user-panel__link,
  .cm-user-panel__button,
  .cm-ai-assistant__action,
  .cm-ai-assistant__choice-chip,
  .cm-ai-assistant__prompt-chip,
  .store-product-card__button,
  .retail-card__button,
  .qc-primary-btn,
  .qc-secondary-btn,
  button[class*="button"],
  a[class*="button"],
  button[class*="btn"],
  a[class*="btn"]
) {
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  min-height: var(--cm-a11y-control-height);
  max-width: 100%;
  line-height: 1.12;
  overflow-wrap: normal;
  text-wrap: balance;
}

:where(
  .ep-page,
  .cm-auth-page,
  .ep-app,
  .cm-embed-shell,
  .onboarding-page,
  body
) :where(
  .cm-topbar__cta,
  .cm-icon-button,
  .cm-user-toggle,
  .cm-ai-assistant__action,
  .cm-ai-assistant__choice-chip,
  .cm-ai-assistant__prompt-chip,
  button[class*="ghost"],
  a[class*="ghost"],
  button[class*="secondary"],
  a[class*="secondary"],
  button[class*="outline"],
  a[class*="outline"],
  [data-ai-status="snoozed"],
  [data-ai-hide]
) {
  border-color: var(--cm-a11y-secondary-border) !important;
  background: var(--cm-a11y-action-secondary) !important;
  color: var(--cm-a11y-action-secondary-text) !important;
  -webkit-text-fill-color: var(--cm-a11y-action-secondary-text) !important;
}

:where(
  .ep-page,
  .cm-auth-page,
  .ep-app,
  .cm-embed-shell,
  .onboarding-page,
  body
) :where(
  .cm-ai-assistant__choice-chip--primary,
  .cm-ai-assistant__action--primary,
  [data-ai-open-report-button]
) {
  border-color: var(--cm-a11y-action-primary) !important;
  background: var(--cm-a11y-action-primary) !important;
  color: var(--cm-a11y-action-primary-text) !important;
  -webkit-text-fill-color: var(--cm-a11y-action-primary-text) !important;
}

/* Platform-wide theme and contrast safety net.
   These rules intentionally use semantic variables so custom themes can still
   brand the UI while keeping text, controls, menus, charts, and builder chrome
   readable in light and dark mode. */

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) {
  color: var(--cm-a11y-text);
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :where(
  .ep-card,
  .card,
  .cms-panel,
  .ep-toolbar-card,
  .ep-table-wrap,
  .dashboard-widget,
  .dashboard-card,
  .cm-user-panel,
  .cm-notification-menu__panel,
  .cm-quick-actions__menu,
  .ep-dropdown__menu,
  .dropdown-menu,
  .popover,
  .toast,
  .alert,
  .drawer,
  .modal,
  .modal-content,
  [role="dialog"],
  [role="menu"],
  .cm-ai-assistant__panel,
  .cm-ai-assistant__item,
  .cm-ai-action-float,
  .cart-builder-topbar,
  .cart-builder-flow,
  .cart-builder-attention,
  .cart-builder-pane,
  .cart-builder-group,
  .page-builder-toolbar,
  .page-builder-sidebar,
  .builder-nav,
  .sb-card,
  .pb-card
) {
  background-color: var(--cm-a11y-surface) !important;
  border-color: var(--cm-a11y-border) !important;
  color: var(--cm-a11y-text) !important;
  -webkit-text-fill-color: var(--cm-a11y-text);
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :where(
  .ep-card,
  .card,
  .cms-panel,
  .ep-toolbar-card,
  .ep-table-wrap,
  .dashboard-widget,
  .dashboard-card,
  .modal,
  .modal-content,
  [role="dialog"],
  .drawer,
  .cart-builder-pane,
  .page-builder-sidebar,
  .sb-card,
  .pb-card
) {
  box-shadow: var(--cm-a11y-elevated-shadow);
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :where(
  .cm-user-panel,
  .cm-notification-menu__panel,
  .cm-quick-actions__menu,
  .ep-dropdown__menu,
  .dropdown-menu,
  .popover,
  [role="menu"]
) {
  background: var(--cm-a11y-dropdown-bg) !important;
  border-color: var(--cm-a11y-border-strong) !important;
  box-shadow: var(--cm-a11y-elevated-shadow);
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :where(
  .modal,
  .modal-content,
  [role="dialog"],
  .drawer
) {
  background: var(--cm-a11y-modal-bg) !important;
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :where(
  p,
  li,
  summary,
  label,
  dt,
  dd,
  td,
  th,
  strong,
  .ep-card__title,
  .cms-panel__title,
  .cm-modal__title,
  .cm-ai-assistant__bubble,
  .cm-ai-assistant__human-card,
  .cart-builder-group__title,
  .page-builder-sidebar h3
) {
  color: inherit;
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :where(
  .muted,
  .help,
  .helptext,
  .ep-field__help,
  .ep-card__subtitle,
  .cms-panel__subtitle,
  .ep-toolbar-card__text,
  .ep-empty-state__description,
  .cm-page-breadcrumbs,
  .cm-sidebar__item-meta,
  .cm-sidebar__child-meta,
  .cm-notification-menu__meta,
  .cm-ai-assistant__meta,
  .cm-ai-assistant__followup-note,
  .cart-builder-flow__hint,
  .cart-builder-group__meta,
  .stage-subtitle,
  .table-meta,
  .text-muted
) {
  color: var(--cm-a11y-muted) !important;
  -webkit-text-fill-color: var(--cm-a11y-muted) !important;
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :where(
  a:not([class*="btn"]):not([class*="button"]):not(.ep-btn):not(.btn)
) {
  color: var(--cm-a11y-link);
  text-underline-offset: 0.14em;
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
  select,
  textarea,
  .input,
  .ep-input,
  .form-control,
  .auth-input,
  .rd-field__control,
  .rd-search,
  .rd-search__input,
  .rd-search__select,
  [contenteditable="true"],
  pre,
  code
) {
  background-color: var(--cm-a11y-input-bg) !important;
  border-color: var(--cm-a11y-input-border) !important;
  color: var(--cm-a11y-input-text) !important;
  -webkit-text-fill-color: var(--cm-a11y-input-text);
  caret-color: var(--cm-a11y-input-text);
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
  select,
  textarea,
  .input,
  .ep-input,
  .form-control,
  .auth-input,
  .rd-field__control,
  .rd-search__input,
  .rd-search__select,
  [contenteditable="true"]
) {
  min-height: var(--cm-a11y-control-height);
  border-radius: var(--cm-a11y-control-radius);
  padding: 0.62rem 0.82rem;
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :where(
  .cm-topbar__search,
  .rd-search,
  .search,
  .search-box,
  .search-input,
  .ep-search,
  [role="search"]
) {
  min-height: var(--cm-a11y-control-height);
  border-color: var(--cm-a11y-input-border) !important;
  background: var(--cm-a11y-input-bg) !important;
  color: var(--cm-a11y-input-text) !important;
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :where(
  .cm-topbar__search input,
  .rd-search__input,
  .search input,
  .search-box input,
  .ep-search input,
  [role="search"] input:not([type="checkbox"]):not([type="radio"])
) {
  min-width: 0;
  padding-inline: 0.25rem 0.5rem !important;
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
  textarea,
  .input,
  .ep-input,
  .form-control,
  .auth-input,
  .rd-field__control,
  .rd-search__input,
  [contenteditable="true"]
)::placeholder {
  color: var(--cm-a11y-placeholder) !important;
  -webkit-text-fill-color: var(--cm-a11y-placeholder) !important;
  opacity: 1 !important;
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
  select,
  textarea,
  .input,
  .ep-input,
  .form-control,
  .auth-input,
  .rd-field__control,
  .rd-search,
  .cm-topbar__search,
  .cm-ai-assistant__chat-form input
):focus-within,
:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
  select,
  textarea,
  .input,
  .ep-input,
  .form-control,
  .auth-input,
  .rd-field__control,
  .cm-ai-assistant__chat-form input
):focus {
  border-color: var(--cm-a11y-focus) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cm-a11y-focus) 22%, transparent) !important;
  outline: none !important;
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :where(
  select option,
  select optgroup
) {
  background: var(--cm-a11y-surface-elevated);
  color: var(--cm-a11y-text);
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :where(
  input:disabled,
  select:disabled,
  textarea:disabled,
  button:disabled,
  [aria-disabled="true"],
  .is-disabled,
  .disabled
) {
  background-color: var(--cm-a11y-disabled-bg) !important;
  border-color: var(--cm-a11y-border) !important;
  color: var(--cm-a11y-disabled-text) !important;
  -webkit-text-fill-color: var(--cm-a11y-disabled-text) !important;
  opacity: 1 !important;
  cursor: not-allowed;
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :where(
  .ep-table,
  .vnd-table,
  .aff-table,
  .rd-table,
  table
) {
  color: var(--cm-a11y-text);
  border-color: var(--cm-a11y-border);
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :where(
  .ep-table thead th,
  .vnd-table thead th,
  .aff-table thead th,
  .rd-table thead th,
  table thead th
) {
  background: var(--cm-a11y-surface-muted) !important;
  border-color: var(--cm-a11y-border) !important;
  color: var(--cm-a11y-text-soft) !important;
  -webkit-text-fill-color: var(--cm-a11y-text-soft) !important;
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :where(
  .ep-table tbody td,
  .vnd-table tbody td,
  .aff-table tbody td,
  .rd-table tbody td,
  table tbody td
) {
  border-color: var(--cm-a11y-border) !important;
  color: var(--cm-a11y-text) !important;
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :where(
  .ep-table tbody tr:hover,
  .vnd-table tbody tr:hover,
  .aff-table tbody tr:hover,
  .rd-table tbody tr:hover,
  table tbody tr:hover,
  [aria-selected="true"],
  .is-selected,
  .selected
) {
  background: color-mix(in srgb, var(--cm-a11y-link) 9%, var(--cm-a11y-surface)) !important;
  color: var(--cm-a11y-text) !important;
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :where(
  .ep-badge,
  .badge,
  .vnd-badge,
  .aff-badge,
  .tag,
  .chip,
  .pill
) {
  background: var(--cm-a11y-surface-muted) !important;
  border: 1px solid var(--cm-a11y-border) !important;
  color: var(--cm-a11y-text-soft) !important;
  -webkit-text-fill-color: var(--cm-a11y-text-soft) !important;
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :where(.ep-badge--success, .badge-success, .status-success, .is-success) {
  background: var(--cm-a11y-success-soft) !important;
  border-color: color-mix(in srgb, var(--cm-a11y-success-text) 42%, transparent) !important;
  color: var(--cm-a11y-success-text) !important;
  -webkit-text-fill-color: var(--cm-a11y-success-text) !important;
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :where(.ep-badge--warning, .badge-warning, .status-warning, .is-warning) {
  background: var(--cm-a11y-warning-soft) !important;
  border-color: color-mix(in srgb, var(--cm-a11y-warning-text) 42%, transparent) !important;
  color: var(--cm-a11y-warning-text) !important;
  -webkit-text-fill-color: var(--cm-a11y-warning-text) !important;
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :where(.ep-badge--danger, .badge-danger, .status-danger, .is-danger, .ep-badge--error, .badge-error) {
  background: var(--cm-a11y-danger-soft) !important;
  border-color: color-mix(in srgb, var(--cm-a11y-danger-text) 42%, transparent) !important;
  color: var(--cm-a11y-danger-text) !important;
  -webkit-text-fill-color: var(--cm-a11y-danger-text) !important;
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :where(.ep-badge--info, .badge-info, .status-info, .is-info) {
  background: var(--cm-a11y-info-bg) !important;
  border-color: var(--cm-a11y-info-border) !important;
  color: var(--cm-a11y-info-text) !important;
  -webkit-text-fill-color: var(--cm-a11y-info-text) !important;
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :where(
  [role="tooltip"],
  .tooltip,
  .chart-tooltip,
  .dashboard-chart-tooltip,
  .cm-ai-assistant__tooltip
) {
  background: var(--cm-a11y-surface-elevated) !important;
  border: 1px solid var(--cm-a11y-border-strong) !important;
  color: var(--cm-a11y-text) !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.18);
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :where(
  [data-dashboard-chart],
  .dashboard-chart,
  .dashboard-chart-card,
  .analytics-chart,
  .chart-card,
  .chart-container
) :where(text, .chart-label, .axis-label, .tick text) {
  color: var(--cm-a11y-muted) !important;
  fill: var(--cm-a11y-muted) !important;
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :where(
  [data-dashboard-chart],
  .dashboard-chart,
  .dashboard-chart-card,
  .analytics-chart,
  .chart-card,
  .chart-container
) :where(.grid-line, .chart-grid, .axis-line, line[stroke="#e5e7eb"], line[stroke="#edf1f8"]) {
  stroke: var(--cm-a11y-border) !important;
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :where(
  .page-builder-app,
  .cart-builder-app,
  .builder-nav,
  .sb-block-wrap,
  .pb-section,
  .pb-card
) {
  color: var(--cm-a11y-text);
}

:where(.page-builder-app, .cart-builder-app, body) :where(
  .sb-block-wrap:hover,
  .sb-block-wrap.sb-block-selected,
  .sortable-ghost,
  .cart-builder-stage.is-selected,
  .cart-builder-component.is-selected,
  .cart-builder-block.is-selected,
  .builder-selected,
  .is-dragging
) {
  outline-color: var(--cm-a11y-focus) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cm-a11y-focus) 30%, transparent) !important;
}

:where(.page-builder-app, .cart-builder-app, body) :where(
  .sb-block-label,
  .builder-selection-label,
  .resize-handle,
  .cart-builder-handle,
  .builder-handle
) {
  background: var(--cm-a11y-focus) !important;
  border-color: var(--cm-a11y-focus) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

:where(.page-builder-app, .cart-builder-app, body) :where(
  .page-builder-toolbar,
  .builder-canvas-toolbar,
  .builder-bottom-bar,
  .builder-inspector-header,
  .builder-history-drawer,
  .cart-builder-topbar,
  .cart-builder-preview-toolbar,
  .cart-builder-shell,
  .cart-builder-pane,
  .cart-builder-group,
  .cart-builder-empty-panel,
  .site-builder-shell__inspector,
  .site-builder-shell__sidebar
) {
  background: var(--cm-a11y-surface-elevated) !important;
  border-color: var(--cm-a11y-border) !important;
  color: var(--cm-a11y-text) !important;
}

:where(.page-builder-app, .cart-builder-app, body) :where(
  .builder-command,
  .builder-page-action,
  .builder-nav-item,
  .cart-builder-stage-card,
  .cart-builder-add-card,
  .cart-builder-click-card,
  .cart-builder-flow__step,
  .cart-builder-attention__item
) {
  border-color: var(--cm-a11y-border-strong) !important;
  background: var(--cm-a11y-surface) !important;
  color: var(--cm-a11y-text) !important;
  -webkit-text-fill-color: var(--cm-a11y-text) !important;
}

:where(.page-builder-app, .cart-builder-app, body) .builder-command--primary {
  border-color: var(--cm-builder-primary, var(--cm-a11y-primary-bg)) !important;
  background: var(--cm-builder-primary, var(--cm-a11y-primary-bg)) !important;
  color: var(--cm-a11y-primary-fg) !important;
  -webkit-text-fill-color: var(--cm-a11y-primary-fg) !important;
}

:where(.page-builder-app, .cart-builder-app, body) .builder-command--primary:where(:hover, :focus-visible) {
  border-color: var(--cm-builder-primary-hover, var(--cm-a11y-primary-bg-hover)) !important;
  background: var(--cm-builder-primary-hover, var(--cm-a11y-primary-bg-hover)) !important;
  color: var(--cm-a11y-primary-fg) !important;
  -webkit-text-fill-color: var(--cm-a11y-primary-fg) !important;
}

:where(.page-builder-app, .cart-builder-app, body) :where(
  .cart-builder-stage-card.is-active,
  .cart-builder-flow__step.is-ready .cart-builder-flow__label,
  .cart-builder-add-card:hover,
  .builder-nav-item.is-active
) {
  border-color: var(--cm-a11y-action-primary) !important;
  background: var(--cm-a11y-selected) !important;
  color: var(--cm-a11y-text) !important;
}

:where(.page-builder-app, .cart-builder-app, body) :where(
  .builder-inspector-header__eyebrow,
  .builder-inspector-header__meta,
  .builder-status-token,
  .builder-device-label,
  .builder-nav-item__meta,
  .cart-builder-group__meta,
  .cart-builder-flow__hint,
  .cart-builder-stage-card__hint,
  .cart-builder-empty-panel,
  .builder-history-drawer__copy
) {
  color: var(--cm-a11y-muted) !important;
  -webkit-text-fill-color: var(--cm-a11y-muted) !important;
}

.ep-app[data-ui-theme="dark"] :where(.text-gray-900, .text-slate-900, .text-neutral-900, .text-zinc-900, .text-stone-900),
.ep-app[data-ui-theme="dark"] [style*="#111827" i],
.ep-app[data-ui-theme="dark"] [style*="rgb(17, 24, 39)" i] {
  color: var(--cm-a11y-text) !important;
  -webkit-text-fill-color: var(--cm-a11y-text) !important;
}

.ep-app[data-ui-theme="dark"] :where(.text-gray-800, .text-gray-700, .text-gray-600, .text-gray-500, .text-slate-800, .text-slate-700, .text-slate-600, .text-slate-500, .text-neutral-800, .text-neutral-700, .text-neutral-600, .text-zinc-800, .text-zinc-700, .text-zinc-600),
.ep-app[data-ui-theme="dark"] [style*="#374151" i],
.ep-app[data-ui-theme="dark"] [style*="#4b5563" i],
.ep-app[data-ui-theme="dark"] [style*="#64748b" i],
.ep-app[data-ui-theme="dark"] [style*="#6b7280" i] {
  color: var(--cm-a11y-muted) !important;
  -webkit-text-fill-color: var(--cm-a11y-muted) !important;
}

.ep-app[data-ui-theme="dark"] :where(.bg-white, .bg-gray-50, .bg-gray-100, .bg-slate-50, .bg-slate-100, .bg-neutral-50, .bg-neutral-100, .bg-zinc-50, .bg-zinc-100, .bg-stone-50, .bg-stone-100),
.ep-app[data-ui-theme="dark"] [style*="background:#fff" i],
.ep-app[data-ui-theme="dark"] [style*="background: #fff" i],
.ep-app[data-ui-theme="dark"] [style*="background:#ffffff" i],
.ep-app[data-ui-theme="dark"] [style*="background: #ffffff" i] {
  background-color: var(--cm-a11y-surface) !important;
  color: var(--cm-a11y-text) !important;
}

.ep-app[data-ui-theme="dark"] :where(.border-gray-100, .border-gray-200, .border-gray-300, .border-slate-100, .border-slate-200, .border-slate-300, .border-neutral-100, .border-neutral-200, .border-zinc-100, .border-zinc-200) {
  border-color: var(--cm-a11y-border) !important;
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :where(
  .ep-card,
  .card,
  .cms-panel,
  .ep-toolbar-card,
  .ep-table-wrap,
  .modal,
  [role="dialog"],
  .dropdown-menu,
  .ep-dropdown__menu,
  .popover,
  .cart-builder-pane,
  .page-builder-sidebar
) :where(.text-white, [style*="color:#fff" i], [style*="color: #fff" i], [style*="color:#ffffff" i], [style*="color: #ffffff" i]) {
  color: var(--cm-a11y-text) !important;
  -webkit-text-fill-color: var(--cm-a11y-text) !important;
}

/* Keep solid coloured CTAs readable even when later theme rules set text-fill. */
:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :is(
  .cm-topbar__cta--upgrade,
  .cm-topbar__cta--primary,
  .cm-sidebar__plan-action,
  .cm-notice-rail__cta,
  .ep-btn--primary,
  .ep-btn-primary,
  .btn.primary,
  .auth-btn--primary,
  .onb-btn-primary,
  .vnd-btn--primary,
  .aff-btn--primary,
  .rd-btn--primary,
  .qc-primary-btn,
  .lp-btn-primary,
  .lp-legal-btn--primary,
  .checkout-primary-btn,
  .cart-summary-actions .ep-btn--primary,
  .tc-payment-main .ep-btn--primary,
  .tc-payment-main .ep-btn-primary,
  .store-product-card__button--primary,
  .store-product-card__button--buy-now,
  .retail-card__button--primary,
  .retail-card__button--buy-now,
  .product-retail-quickbuy,
  .product-mobile-purchase__btn--buy,
  .dashboard-shell-metric,
  .dashboard-metric,
  .dashboard-inventory-stat,
  .dashboard-summary-line,
  .dashboard-chart-callout,
  .dashboard-action[class*="dashboard-action--"],
  button[class*="bg-blue-"],
  a[class*="bg-blue-"],
  button[class*="bg-indigo-"],
  a[class*="bg-indigo-"],
  button[class*="bg-sky-"],
  a[class*="bg-sky-"],
  button[class*="bg-red-"],
  a[class*="bg-red-"],
  button[class*="bg-emerald-"],
  a[class*="bg-emerald-"],
  button[class*="bg-green-"],
  a[class*="bg-green-"],
  button[class*="bg-slate-9"],
  a[class*="bg-slate-9"],
  button[class*="bg-gray-9"],
  a[class*="bg-gray-9"],
  button[class*="bg-black"],
  a[class*="bg-black"]
),
:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :is(
  .cm-topbar__cta--upgrade,
  .cm-topbar__cta--primary,
  .cm-sidebar__plan-action,
  .cm-notice-rail__cta,
  .ep-btn--primary,
  .ep-btn-primary,
  .btn.primary,
  .auth-btn--primary,
  .onb-btn-primary,
  .vnd-btn--primary,
  .aff-btn--primary,
  .rd-btn--primary,
  .qc-primary-btn,
  .lp-btn-primary,
  .lp-legal-btn--primary,
  .checkout-primary-btn,
  .cart-summary-actions .ep-btn--primary,
  .tc-payment-main .ep-btn--primary,
  .tc-payment-main .ep-btn-primary,
  .store-product-card__button--primary,
  .store-product-card__button--buy-now,
  .retail-card__button--primary,
  .retail-card__button--buy-now,
  .product-retail-quickbuy,
  .product-mobile-purchase__btn--buy,
  .dashboard-shell-metric,
  .dashboard-metric,
  .dashboard-inventory-stat,
  .dashboard-summary-line,
  .dashboard-chart-callout,
  .dashboard-action[class*="dashboard-action--"],
  button[class*="bg-blue-"],
  a[class*="bg-blue-"],
  button[class*="bg-indigo-"],
  a[class*="bg-indigo-"],
  button[class*="bg-sky-"],
  a[class*="bg-sky-"],
  button[class*="bg-red-"],
  a[class*="bg-red-"],
  button[class*="bg-emerald-"],
  a[class*="bg-emerald-"],
  button[class*="bg-green-"],
  a[class*="bg-green-"],
  button[class*="bg-slate-9"],
  a[class*="bg-slate-9"],
  button[class*="bg-gray-9"],
  a[class*="bg-gray-9"],
  button[class*="bg-black"],
  a[class*="bg-black"]
) :where(span, strong, small, svg) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.cm-admin-button,
.submit-row input,
.submit-row .button,
.object-tools a,
a.button,
input[type="submit"],
button.button {
  background: var(--cm-a11y-secondary-bg, #ffffff) !important;
  border-color: var(--cm-a11y-secondary-border, #8b929d) !important;
  color: var(--cm-a11y-secondary-fg, #111111) !important;
  -webkit-text-fill-color: var(--cm-a11y-secondary-fg, #111111) !important;
}

.cm-admin-button--primary,
.submit-row input.default,
.submit-row .button.default,
.object-tools a.addlink,
a.button.default,
input[type="submit"].default {
  background: var(--cm-a11y-primary-bg, #111111) !important;
  border-color: var(--cm-a11y-primary-bg, #111111) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.cm-admin-button:hover,
.submit-row input:hover,
.submit-row .button:hover,
.object-tools a:hover,
a.button:hover,
input[type="submit"]:hover,
button.button:hover {
  background: var(--cm-a11y-secondary-bg-hover, #f3f4f6) !important;
  color: var(--cm-a11y-secondary-fg, #111111) !important;
  -webkit-text-fill-color: var(--cm-a11y-secondary-fg, #111111) !important;
}

.cm-admin-button--primary:hover,
.submit-row input.default:hover,
.submit-row .button.default:hover,
.object-tools a.addlink:hover,
a.button.default:hover,
input[type="submit"].default:hover {
  background: var(--cm-a11y-primary-bg-hover, #2b2b2b) !important;
  border-color: var(--cm-a11y-primary-bg-hover, #2b2b2b) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html.dark .cm-admin-button,
html.dark .submit-row input,
html.dark .submit-row .button,
html.dark .object-tools a,
html.dark a.button,
html.dark input[type="submit"],
html.dark button.button {
  background: #111827 !important;
  border-color: #6b7280 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

button[disabled],
input[type="submit"][disabled],
.ep-btn[disabled],
.ep-btn[aria-disabled="true"],
.auth-btn[disabled],
.onb-btn-primary[disabled],
.vnd-btn[disabled],
.aff-btn[disabled] {
  opacity: 0.72 !important;
}

/* Strong compact global type scale.
   Kept here as a late-loading guardrail so standalone pages that do not extend
   the shared shell still inherit the calmer smaller text treatment. */
:root {
  --cm-type-xs: 0.705rem;
  --cm-type-sm: 0.765rem;
  --cm-type-base: 0.845rem;
  --cm-type-md: 0.885rem;
  --cm-type-lg: 0.965rem;
  --cm-type-xl: 1.065rem;
  --cm-type-2xl: 1.175rem;
  --cm-type-3xl: 1.285rem;
  --cm-font-family: "Satoshi", ui-sans-serif, system-ui, sans-serif;
  --cm-font-weight-body: 400;
  --cm-font-weight-muted: 400;
  --cm-font-weight-label: 500;
  --cm-font-weight-control: 500;
  --cm-font-weight-title: 560;
  --cm-font-weight-heading: 600;
  --cm-font-weight-metric: 620;
  --cm-font-weight-strong: 560;
  --cm-font-weight-emphasis: 600;
  --cm-line-height-body: 1.52;
  --cm-line-height-copy: 1.58;
  --cm-line-height-tight: 1.18;
  --cm-letter-spacing-ui: 0;
  --cm-letter-spacing-label: 0.01em;
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) {
  font-family: var(--cm-font-family) !important;
  font-size: var(--cm-type-base) !important;
  font-weight: var(--cm-font-weight-body) !important;
  line-height: var(--cm-line-height-body) !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :where(
  p,
  li,
  label,
  summary,
  td,
  th,
  input,
  select,
  textarea,
  button,
  .ep-btn,
  .btn,
  .auth-input,
  .auth-btn,
  .cm-sidebar__item-label,
  .cm-sidebar__child,
  .store-product-card,
  .retail-card,
  .cart-line,
  .checkout-panel
) {
  font-size: var(--cm-type-base) !important;
  font-weight: var(--cm-font-weight-body) !important;
  line-height: var(--cm-line-height-body) !important;
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :where(
  .text-xs,
  small,
  .help,
  .helptext,
  .ep-field__help,
  .ep-field__error,
  .cm-page-breadcrumbs,
  .ep-badge,
  .badge
) {
  font-size: var(--cm-type-xs) !important;
  line-height: 1.005rem !important;
  font-weight: var(--cm-font-weight-muted) !important;
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :where(
  .text-sm,
  .muted,
  .ep-card__subtitle,
  .cms-panel__subtitle,
  .ep-toolbar-card__text
) {
  font-size: var(--cm-type-sm) !important;
  line-height: 1.105rem !important;
  font-weight: var(--cm-font-weight-muted) !important;
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :where(.text-lg) {
  font-size: var(--cm-type-md) !important;
  line-height: 1.185rem !important;
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :where(.text-xl) {
  font-size: var(--cm-type-lg) !important;
  line-height: 1.245rem !important;
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :where(.text-2xl) {
  font-size: var(--cm-type-xl) !important;
  line-height: 1.365rem !important;
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :where(.text-3xl) {
  font-size: var(--cm-type-2xl) !important;
  line-height: 1.465rem !important;
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :where(.text-4xl, .text-5xl, .text-6xl) {
  font-size: var(--cm-type-3xl) !important;
  line-height: 1.605rem !important;
}

/* Calm typography weight system.
   These selectors intentionally load late, so old page-level utility classes,
   inline-heavy labels, admin rows, builders, and assistant cards cannot make
   the whole platform feel overly bold again. */
:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :where(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .ep-page-heading,
  .auth-title,
  .onb-title,
  .cart-retail-title,
  .product-retail-title,
  .retail-hero__title,
  .lp-hero-title
) {
  font-weight: var(--cm-font-weight-heading) !important;
  letter-spacing: var(--cm-letter-spacing-ui) !important;
  line-height: var(--cm-line-height-tight) !important;
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :where(
  h2,
  h3,
  h4,
  .ep-card__title,
  .cms-panel__title,
  .ep-toolbar-card__title,
  .cart-panel__title,
  .product-section__title,
  .retail-section__title,
  .vnd-card__title,
  .aff-card__title,
  .builder-panel-title,
  .builder-inspector-header,
  .page-builder-app [class*="title"],
  .cart-builder-app [class*="title"]
) {
  font-weight: var(--cm-font-weight-title) !important;
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :where(
  p,
  li,
  .ep-card__subtitle,
  .cms-panel__subtitle,
  .ep-toolbar-card__text,
  .ep-summary-card__text,
  .cms-kpi__meta,
  .dashboard-widget__meta,
  .dashboard-widget__eyebrow,
  .cm-ai-assistant__bubble p,
  .cm-ai-assistant__item-body,
  .cm-ai-assistant__item-outcome,
  .page-builder-app p,
  .cart-builder-app p
) {
  font-weight: var(--cm-font-weight-body) !important;
  line-height: var(--cm-line-height-copy) !important;
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :where(
  label,
  .label,
  .ep-field__label,
  .auth-label,
  .onb-label,
  .cm-sidebar__item-label,
  .cm-sidebar__child,
  .cm-topbar__title,
  .cm-user-toggle__name,
  .cm-user-panel__name,
  .cm-user-panel__link,
  .cm-user-panel__button,
  .page-builder-app label,
  .cart-builder-app label,
  .builder-inspector label
) {
  font-weight: var(--cm-font-weight-label) !important;
  letter-spacing: var(--cm-letter-spacing-ui) !important;
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :where(
  button,
  .ep-btn,
  .btn,
  .auth-btn,
  .onb-btn-primary,
  .onb-btn-ghost,
  .vnd-btn,
  .aff-btn,
  .rd-btn,
  .cm-topbar__cta,
  .cm-icon-button,
  .cm-sidebar-toggle,
  .cm-ai-assistant__action,
  .cm-ai-assistant__choice-chip,
  .cm-ai-assistant__prompt-chip,
  input[type="submit"],
  a[class*="btn"],
  a[class*="button"]
) {
  font-weight: var(--cm-font-weight-control) !important;
  letter-spacing: var(--cm-letter-spacing-ui) !important;
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :where(
  th,
  .ep-table th,
  .vnd-table th,
  .rd-table th,
  .aff-card table th,
  .badge,
  .ep-badge,
  .vnd-badge,
  .aff-badge,
  .cm-admin-chip,
  .cm-ai-assistant__plain-label,
  .cm-ai-assistant__model-pill
) {
  font-weight: var(--cm-font-weight-label) !important;
  letter-spacing: var(--cm-letter-spacing-label) !important;
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :where(
  .ep-summary-card__value,
  .cms-kpi__value,
  .dashboard-shell-metric__value,
  .dashboard-metric__value,
  .dashboard-inventory-stat__value,
  .cart-summary-card__total,
  .product-retail-price,
  .retail-card__price,
  .vnd-stat__value,
  .aff-stat__value,
  .font-black
) {
  font-weight: var(--cm-font-weight-metric) !important;
  letter-spacing: var(--cm-letter-spacing-ui) !important;
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :where(
  strong,
  b,
  .font-semibold,
  .font-bold,
  .font-extrabold
) {
  font-weight: var(--cm-font-weight-strong) !important;
}

:where(.ep-page, .cm-auth-page, .ep-app, .cm-embed-shell, .onboarding-page, body) :where(
  .uppercase,
  [class*="tracking-wide"],
  [class*="tracking-wider"],
  .cm-topbar__kicker,
  .cm-user-toggle__label,
  .cm-user-panel__title,
  .cm-user-panel__section-label,
  .ep-summary-card__eyebrow,
  .cms-kpi__label,
  .dashboard-widget__eyebrow,
  .cm-ai-assistant__item-meta
) {
  font-weight: var(--cm-font-weight-label) !important;
  letter-spacing: var(--cm-letter-spacing-label) !important;
}

/* Staging responsive QA guardrails.
   These late rules are deliberately broad but restrained: they contain wide
   children inside the relevant component instead of allowing a whole page to
   become horizontally scrollable. */
:root {
  --cm-layer-base: var(--cm-layer-page);
  --cm-layer-page: 0;
  --cm-layer-sticky: 20;
  --cm-layer-sidebar: 40;
  --cm-layer-header: 60;
  --cm-layer-header-dropdown: 120;
  --cm-layer-floating: 180;
  --cm-layer-chat: 260;
  --cm-layer-drawer: 520;
  --cm-layer-modal-backdrop: 700;
  --cm-layer-modal: 720;
  --cm-layer-workbench: 760;
  --cm-layer-ai-workbench: var(--cm-layer-workbench);
  --cm-layer-confirmation: 820;
  --cm-layer-toast: 900;
  --cm-responsive-gutter: clamp(0.75rem, 1.6vw, 1.25rem);
  --cm-responsive-radius: 0.75rem;
  --cm-responsive-touch: 2.5rem;
}

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

@supports not (overflow-x: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

:where(.ep-app, .ep-page, .cm-admin-shell, .cm-embed-shell, .onboarding-page, .cm-auth-page) {
  max-width: 100vw;
  min-width: 0;
}

:where(.ep-app, .ep-page, .cm-admin-shell, .cm-embed-shell, .onboarding-page, .cm-auth-page) :where(
  *,
  *::before,
  *::after
) {
  box-sizing: border-box;
}

:where(.ep-app, .ep-page, .cm-admin-shell, .cm-embed-shell, .onboarding-page, .cm-auth-page) :where(
  .cm-main,
  .cm-main-content,
  .cm-main-content__inner,
  main,
  section,
  article,
  .dashboard-delivery,
  .dash-main,
  .dash-card,
  .ep-card,
  .cms-panel,
  .cm-admin-card,
  .platform-admin-card,
  .workspace-stack-card,
  .storefront-page,
  .cart-page,
  .checkout-page,
  .product-retail-page,
  .site-builder-shell,
  .cart-builder-app,
  .page-builder-app
) {
  min-width: 0;
  max-width: 100%;
}

:where(.ep-app, .ep-page, .cm-admin-shell, .cm-embed-shell, .onboarding-page, .cm-auth-page) :where(
  p,
  li,
  dd,
  dt,
  th,
  td,
  label,
  small,
  strong,
  span,
  a,
  button,
  .ep-card__title,
  .ep-card__subtitle,
  .cm-page-title,
  .cm-admin-title,
  .dashboard-card-title,
  .cm-ai-assistant__bubble,
  .cm-notification-menu__item-title,
  .cm-notification-menu__item-copy
) {
  overflow-wrap: anywhere;
}

:where(.ep-app, .ep-page, .cm-admin-shell, .cm-embed-shell, .onboarding-page, .cm-auth-page) :where(
  img,
  svg,
  video,
  canvas,
  iframe
) {
  max-width: 100%;
}

:where(.ep-app, .ep-page, .cm-admin-shell, .cm-embed-shell, .onboarding-page, .cm-auth-page) :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea,
  .ep-input,
  .form-control,
  [contenteditable="true"]
) {
  min-width: 0;
  max-width: 100%;
  min-height: var(--cm-responsive-touch);
}

:where(.ep-app, .ep-page, .cm-admin-shell, .cm-embed-shell, .onboarding-page, .cm-auth-page) :where(
  button,
  .ep-btn,
  .btn,
  .cm-btn,
  .auth-btn,
  a[class*="btn"],
  a[class*="button"]
) {
  min-width: 0;
  max-width: 100%;
}

:where(.ep-app, .ep-page, .cm-admin-shell, .cm-embed-shell, .onboarding-page, .cm-auth-page) :where(
  .ep-button-row,
  .ep-card__actions,
  .ep-page-actions,
  .cm-admin-actions,
  .dashboard-action-row,
  .cart-summary-actions,
  .checkout-actions,
  .modal-footer,
  .rd-modal__footer,
  .cm-workbench__footer,
  .cm-ai-assistant__choice-row,
  .cm-notification-menu__item-actions
) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 0;
}

:where(.ep-app, .ep-page, .cm-admin-shell, .cm-embed-shell, .onboarding-page, .cm-auth-page) :where(
  .ep-table-wrap,
  .table-responsive,
  .cm-table-wrap,
  .rd-table-wrap,
  .vnd-table-wrap,
  .aff-table-wrap,
  .orders-table-wrap,
  .files-table-wrap,
  .builder-table-wrap,
  .overflow-x-auto
) {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

:where(.ep-app, .ep-page, .cm-admin-shell, .cm-embed-shell, .onboarding-page, .cm-auth-page) :where(
  table,
  .ep-table,
  .rd-table,
  .vnd-table,
  .aff-table
) {
  max-width: 100%;
}

@media (min-width: 1024px) {
  .ep-app.cm-shell .cm-topbar,
  .cm-admin-shell .topbar,
  .cm-admin-shell .cm-admin-topbar {
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    min-width: 0;
    overflow: visible;
  }

  .ep-app.cm-shell .cm-topbar :where(.cm-topbar__start, .cm-topbar__actions, .cm-topbar__search),
  .cm-admin-shell .topbar > *,
  .cm-admin-shell .cm-admin-topbar > * {
    min-width: 0;
  }

  .ep-app.cm-shell .cm-topbar__search {
    min-width: clamp(16rem, 30vw, 46rem);
    max-width: 100%;
  }
}

@media (max-width: 1023px) {
  .ep-app.cm-shell {
    grid-template-columns: 1fr !important;
  }

  .ep-app.cm-shell .cm-topbar,
  .cm-admin-shell .topbar,
  .cm-admin-shell .cm-admin-topbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.55rem !important;
    max-width: 100vw !important;
  }

  .ep-app.cm-shell .cm-topbar__search,
  .cm-admin-shell .topbar :where(.search, .search-box, form[role="search"]) {
    order: 20;
    flex: 1 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .ep-app.cm-shell .cm-sidebar {
    max-width: min(21rem, calc(100vw - 1rem)) !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    z-index: var(--cm-layer-sidebar) !important;
  }

  .ep-app.cm-shell .cm-sidebar-backdrop {
    z-index: calc(var(--cm-layer-drawer) - 1) !important;
  }

  .ep-app.cm-shell[data-sidebar-open='true'] .cm-sidebar {
    z-index: var(--cm-layer-drawer) !important;
    pointer-events: auto !important;
  }

  .ep-app.cm-shell .cm-sidebar :where(.cm-sidebar__body, .cm-clean-nav, .cm-sidebar__scroll) {
    max-height: calc(100dvh - 5.5rem) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  :where(.ep-app, .ep-page, .cm-admin-shell, .cm-embed-shell) :where(
    .ep-grid,
    .dashboard-grid,
    .dashboard-delivery,
    .dash-grid,
    .cms-grid,
    .platform-admin-grid,
    .newsletter-grid,
    .checkout-grid,
    .product-retail-grid,
    .storefront-product-grid
  ) {
    grid-template-columns: 1fr !important;
  }
}

/* Keep the companion assistant anchored to the viewport on tablet layouts.
   The launcher is narrower than the panel, so pinning both panel edges to the
   launcher can place the conversation outside the visible viewport. */
@media (min-width: 641px) and (max-width: 1023px) {
  .ep-app.cm-shell[data-cm-app-shell] .cm-ai-assistant--companion .cm-ai-assistant__panel {
    left: auto !important;
    right: 0 !important;
    bottom: 4.05rem !important;
    width: min(25.5rem, calc(100vw - 2rem)) !important;
    height: min(40rem, calc(100dvh - 6rem)) !important;
    max-height: calc(100dvh - 6rem) !important;
  }
}

@media (min-width: 641px) and (max-width: 1023px) and (max-height: 760px) {
  .ep-app.cm-shell[data-cm-app-shell] .cm-ai-assistant--companion .cm-ai-assistant__panel {
    height: calc(100dvh - 6rem) !important;
  }
}

@media (min-width: 721px) and (max-width: 1023px) and (max-height: 760px) {
  .ep-app.cm-shell[data-cm-app-shell] .cm-notification-menu__panel {
    position: fixed !important;
    top: 0.5rem !important;
    right: auto !important;
    bottom: 0.5rem !important;
    left: 0.5rem !important;
    width: min(25.5rem, calc(100vw - 1rem)) !important;
    height: calc(100dvh - 1rem) !important;
    max-height: calc(100dvh - 1rem) !important;
    translate: 0 0 !important;
  }
}

/* Overlay, modal and drawer contract. */
:where(
  .cm-modal-backdrop,
  .rd-modal,
  .cm-upgrade-modal,
  .cm-workbench-backdrop,
  .cm-ai-workbench-backdrop,
  .builder-history-backdrop,
  [data-modal-backdrop]
) {
  z-index: var(--cm-layer-modal-backdrop) !important;
}

:where(
  .cm-modal__panel,
  .rd-modal__panel,
  .cm-upgrade-modal__panel,
  .cm-workbench,
  .cm-workbench__panel,
  .cm-ai-workbench,
  .cm-ai-workbench__panel,
  .builder-history-drawer,
  [role="dialog"]
) {
  z-index: var(--cm-layer-modal) !important;
  max-width: min(100vw - 1rem, var(--modal-max-width, 64rem)) !important;
  max-height: min(92dvh, var(--modal-max-height, 54rem)) !important;
}

:where(
  .cm-modal__body,
  .rd-modal__body,
  .cm-upgrade-modal__body,
  .cm-workbench__body,
  .cm-ai-workbench__body,
  [role="dialog"] .modal-body
) {
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

body.cm-overlay-open .cm-ai-assistant--companion,
body.cm-workbench-open .cm-ai-assistant--companion,
body:has(:where(.cm-upgrade-modal.is-open, .rd-modal[aria-hidden="false"], .cm-workbench.is-open, .cm-ai-workbench.is-open, .cm-assistant-workbench:not([hidden]), .cm-guided-assistant:not([hidden]), [data-modal-open="true"])) .cm-ai-assistant--companion {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(0.75rem) scale(0.98) !important;
}

/* P0 Ask AI responsive launcher contract. */
.cm-ai-assistant--companion {
  position: fixed !important;
  right: max(1rem, env(safe-area-inset-right)) !important;
  bottom: max(1rem, env(safe-area-inset-bottom)) !important;
  max-width: calc(100vw - 1rem) !important;
  z-index: var(--cm-layer-chat) !important;
}

.cm-ai-assistant--companion .cm-ai-assistant__toggle {
  max-width: calc(100vw - 1.5rem) !important;
  white-space: nowrap;
}

.cm-ai-assistant--companion .cm-ai-assistant__panel {
  width: min(26rem, calc(100vw - 1rem)) !important;
  max-width: calc(100vw - 1rem) !important;
  max-height: min(42rem, calc(100dvh - 5rem)) !important;
}

.cm-ai-assistant__body,
.cm-ai-assistant__companion-messages,
.cm-ai-assistant__history-list {
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.cm-ai-assistant__chat-form,
.cm-ai-assistant__composer-shell {
  position: sticky;
  bottom: 0;
  z-index: 2;
}

.cm-notification-menu__panel,
[data-cm-notification-panel],
.cm-help-panel,
[data-cm-help-panel],
.cm-user-panel,
.cm-quick-actions__panel {
  z-index: var(--cm-layer-header-dropdown) !important;
  width: min(25.5rem, calc(100vw - 1rem)) !important;
  max-width: calc(100vw - 1rem) !important;
  max-height: min(86dvh, 44rem) !important;
  overflow: hidden !important;
}

.cm-notification-menu :where(.cm-notification-menu__list, .cm-notification-menu__body),
.cm-notification-menu__list,
.cm-notification-menu__filters,
.cm-help-panel :where(.cm-help-panel__body, .cm-help-panel__list),
.cm-user-panel :where(.cm-user-panel__body, .cm-user-panel__list),
.cm-quick-actions__panel :where(.cm-quick-actions__body, .cm-quick-actions__list) {
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 641px) and (max-height: 760px) {
  .cm-ai-assistant--companion .cm-ai-assistant__panel {
    height: min(36rem, calc(100dvh - 3rem)) !important;
    max-height: calc(100dvh - 3rem) !important;
  }

  .cm-notification-menu__panel,
  [data-cm-notification-panel],
  .cm-help-panel,
  [data-cm-help-panel],
  .cm-user-panel,
  .cm-quick-actions__panel {
    max-height: calc(100dvh - 4rem) !important;
  }
}

@media (max-width: 640px) {
  :where(
    .cm-modal__panel,
    .rd-modal__panel,
    .cm-upgrade-modal__panel,
    .cm-workbench,
    .cm-workbench__panel,
    .cm-ai-workbench,
    .cm-ai-workbench__panel,
    [role="dialog"]
  ) {
    width: calc(100vw - 0.5rem) !important;
    max-width: calc(100vw - 0.5rem) !important;
    max-height: calc(100dvh - 0.5rem) !important;
    border-radius: 0.85rem !important;
  }

  .ep-app.cm-shell[data-cm-app-shell] .cm-ai-assistant--companion .cm-ai-assistant__panel {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }

  .cm-ai-assistant--companion .cm-ai-assistant__toggle {
    position: relative !important;
    width: 3.15rem !important;
    min-width: 3.15rem !important;
    max-width: 3.15rem !important;
    min-height: 3.15rem !important;
    padding: 0.45rem !important;
    justify-content: center !important;
    margin-right: max(0.75rem, env(safe-area-inset-right)) !important;
    margin-bottom: max(0.75rem, env(safe-area-inset-bottom)) !important;
  }

  .cm-ai-assistant--companion .cm-ai-assistant__toggle-text {
    display: none !important;
  }

  .cm-ai-assistant--companion .cm-ai-assistant__count {
    position: absolute !important;
    top: -0.2rem !important;
    right: -0.2rem !important;
  }

  .cm-notification-menu__panel,
  [data-cm-notification-panel],
  .cm-help-panel,
  [data-cm-help-panel],
  .cm-user-panel,
  .cm-quick-actions__panel {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }

  :where(.ep-app, .ep-page, .cm-admin-shell, .cm-embed-shell) :where(
    .ep-button-row,
    .ep-card__actions,
    .ep-page-actions,
    .cm-admin-actions,
    .dashboard-action-row,
    .cart-summary-actions,
    .checkout-actions,
    .modal-footer,
    .rd-modal__footer,
    .cm-workbench__footer,
    .cm-ai-assistant__choice-row,
    .cm-notification-menu__item-actions
  ) > * {
    flex: 1 1 100%;
  }
}

/* Shared Figma-density pass: compact internal workspaces without reducing legibility. */
:where(.ep-app, .cm-overlay-root, .cm-admin-shell, .vnd-shell, .aff-shell, .customer-portal) {
  --text-xs: 0.75rem;
  --text-xs--line-height: 1rem;
  --text-sm: 0.875rem;
  --text-sm--line-height: 1.25rem;
  --text-base: 1rem;
  --text-base--line-height: 1.5rem;
  --text-lg: 1.125rem;
  --text-lg--line-height: 1.5rem;
  --text-xl: 1.25rem;
  --text-xl--line-height: 1.75rem;
  --text-2xl: 1.5rem;
  --text-2xl--line-height: 2rem;
  --text-3xl: 1.875rem;
  --text-3xl--line-height: 2.25rem;
  --text-4xl: 2.25rem;
  --text-4xl--line-height: 2.5rem;
}

.ep-app :where(.cm-main, .cm-main-content, .cm-main-content__inner, .ep-card, .cms-panel, .grid, .flex) > * {
  min-width: 0;
}

.ep-app :where(.ep-table-wrap, .table-scroll, [data-table-scroll]) {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.ep-app :where(.ep-inline-actions, .ep-page-actions, .cms-toolbar__actions, .filter-actions) {
  min-width: 0;
  flex-wrap: wrap;
}

.ep-app :where(.ep-table, .dash-table, .seo-table) :where(td, th) {
  max-width: min(24rem, 42vw);
}

.ep-app :where(.ep-table, .dash-table, .seo-table) td :where(a, span, strong) {
  overflow-wrap: break-word;
}

/* One search contract replaces the accumulated per-page variants. */
.ep-app.cm-shell.cm-shell--trackdesk .cm-topbar__actions > .cm-topbar__search {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 3rem !important;
  min-height: 3rem !important;
  align-items: center !important;
  gap: 0.7rem !important;
  padding: 0 0.9rem !important;
  border: 1px solid #e2e8f3 !important;
  border-radius: 0.65rem !important;
  background: #ffffff !important;
  box-shadow: 0 1px 2px rgba(25, 38, 66, 0.03) !important;
  transition: border-color 150ms ease, box-shadow 150ms ease !important;
}

.ep-app.cm-shell.cm-shell--trackdesk .cm-topbar__actions > .cm-topbar__search:focus-within {
  border-color: #7f9cff !important;
  box-shadow: 0 0 0 3px rgba(47, 91, 255, 0.12) !important;
}

.ep-app.cm-shell.cm-shell--trackdesk .cm-topbar__search input {
  order: 2 !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: #25293a !important;
  font-family: "Satoshi", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 450 !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
  -webkit-text-fill-color: #25293a !important;
}

.ep-app.cm-shell.cm-shell--trackdesk .cm-topbar__search input::placeholder {
  color: #8a94a8 !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #8a94a8 !important;
}

.ep-app.cm-shell.cm-shell--trackdesk .cm-topbar__search-button {
  order: 1 !important;
  width: 1.35rem !important;
  min-width: 1.35rem !important;
  height: 1.35rem !important;
  min-height: 1.35rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #8a94a8 !important;
  box-shadow: none !important;
}

.ep-app.cm-shell.cm-shell--trackdesk .cm-topbar__search-button:hover,
.ep-app.cm-shell.cm-shell--trackdesk .cm-topbar__search-button:focus-visible {
  background: transparent !important;
  color: #2f5bff !important;
}

.ep-app.cm-shell.cm-shell--trackdesk .cm-topbar__search-button svg {
  width: 1.1rem !important;
  height: 1.1rem !important;
}

.ep-app.cm-shell.cm-shell--trackdesk .cm-topbar__search-results {
  top: calc(100% + 0.45rem) !important;
  right: 0 !important;
  left: 0 !important;
  width: 100% !important;
  max-height: min(29rem, calc(100dvh - 7rem)) !important;
  overflow-y: auto !important;
  border: 1px solid #dce4f1 !important;
  border-radius: 0.65rem !important;
  background: #ffffff !important;
  box-shadow: 0 18px 42px rgba(20, 32, 55, 0.15) !important;
}

.ep-app.cm-shell.cm-shell--trackdesk .cm-topbar__search-result {
  gap: 0.18rem !important;
  padding: 0.72rem 0.8rem !important;
}

.ep-app.cm-shell.cm-shell--trackdesk .cm-topbar__search-result-title {
  min-width: 0 !important;
  overflow: hidden !important;
  font-size: 0.8125rem !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.ep-app.cm-shell.cm-shell--trackdesk .cm-topbar__search-result-copy,
.ep-app.cm-shell.cm-shell--trackdesk .cm-topbar__search-result-meta,
.ep-app.cm-shell.cm-shell--trackdesk .cm-topbar__search-results-note {
  font-size: 0.75rem !important;
}

.ep-app.cm-shell.cm-shell--trackdesk[data-ui-theme="dark"] .cm-topbar__actions > .cm-topbar__search,
.ep-app.cm-shell.cm-shell--trackdesk[data-ui-theme="dark"] .cm-topbar__search-results {
  border-color: rgba(145, 162, 189, 0.24) !important;
  background: #151f2e !important;
}

.ep-app.cm-shell.cm-shell--trackdesk[data-ui-theme="dark"] .cm-topbar__search input {
  color: #edf4ff !important;
  -webkit-text-fill-color: #edf4ff !important;
}

.ep-app.cm-shell.cm-shell--trackdesk[data-ui-theme="dark"] .cm-topbar__search input::placeholder {
  color: #91a2b9 !important;
  -webkit-text-fill-color: #91a2b9 !important;
}

@media (min-width: 1024px) and (max-width: 1599px) {
  .ep-app.cm-shell.cm-shell--trackdesk .cm-topbar {
    display: grid !important;
    grid-template-columns: minmax(8.5rem, 0.6fr) minmax(0, 2fr) !important;
    min-height: 4.5rem !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 0.75rem clamp(0.9rem, 1.6vw, 1.35rem) !important;
  }

  .ep-app.cm-shell.cm-shell--trackdesk .cm-topbar__start {
    grid-column: 1 !important;
    width: auto !important;
    min-width: 0 !important;
  }

  .ep-app.cm-shell.cm-shell--trackdesk .cm-topbar__actions {
    grid-column: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(12rem, 1fr) repeat(4, 2.25rem) minmax(2.5rem, auto) !important;
    width: 100% !important;
    min-width: 0 !important;
    align-items: center !important;
    gap: 0.45rem !important;
  }

  .ep-app.cm-shell.cm-shell--trackdesk .cm-topbar__actions > .cm-topbar__search {
    grid-column: 1 !important;
    height: 2.75rem !important;
    min-height: 2.75rem !important;
  }

  .ep-app.cm-shell.cm-shell--trackdesk .cm-main-content__inner {
    padding-inline: clamp(0.9rem, 1.5vw, 1.35rem) !important;
  }

  .ep-app.cm-shell.cm-shell--trackdesk .cm-clean-nav__item,
  .ep-app.cm-shell.cm-shell--trackdesk .cm-clean-support-link {
    min-height: 2.7rem !important;
    font-size: 0.875rem !important;
  }

  .ep-app.cm-shell.cm-shell--trackdesk :where(.ep-card, .cms-panel, .ep-toolbar-card) {
    --cm-space-card-padding: 0.875rem;
  }

  .ep-app.cm-shell.cm-shell--dashboard-frame .chart-card {
    min-height: 22.5rem !important;
  }

  .ep-app.cm-shell.cm-shell--dashboard-frame .chart-canvas {
    min-height: 14rem !important;
  }
}

@media (min-width: 1280px) {
  .ep-app.cm-shell.cm-shell--dashboard-frame .dashboard-delivery > .kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .ep-app.cm-shell.cm-shell--dashboard-frame .dashboard-delivery > .kpi-grid .kpi-card:last-child {
    grid-column: auto !important;
  }
}

@media (min-width: 1600px) {
  .ep-app.cm-shell.cm-shell--trackdesk .cm-topbar__actions > .cm-topbar__search {
    height: 3.25rem !important;
    min-height: 3.25rem !important;
  }
}

@media (max-width: 1023px) {
  .ep-app.cm-shell.cm-shell--trackdesk .cm-topbar__actions > .cm-topbar__search {
    order: 20 !important;
    flex: 1 0 100% !important;
    height: 2.75rem !important;
    min-height: 2.75rem !important;
  }
}

/* Platform-wide mobile table flow contract.
   Keep text horizontal and let dense tables scroll instead of compressing
   words into one-character columns. */
body :where(
  .ep-table,
  .cms-table,
  .rd-table,
  .vnd-table,
  .aff-table,
  .dash-table,
  .seo-table,
  table
) :where(th, td),
body :where(
  .ep-table,
  .cms-table,
  .rd-table,
  .vnd-table,
  .aff-table,
  .dash-table,
  .seo-table,
  table
) :where(th, td) :where(a, span, strong, small, code, time) {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: none;
}

@media (max-width: 760px) {
  :where(.ep-app, .ep-shell, .cm-admin-shell, .customer-portal) :where(
    .ep-table-wrap,
    .cms-table-wrap,
    .vnd-table-wrap,
    .aff-table-wrap,
    .table-scroll,
    [data-table-scroll]
  ) {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  :where(.ep-app, .ep-shell, .cm-admin-shell, .customer-portal) :where(
    .ep-table,
    .cms-table,
    .rd-table,
    .vnd-table,
    .aff-table,
    .dash-table,
    .seo-table,
    table
  ) :where(th, td) {
    max-width: none !important;
    white-space: normal;
  }

  :where(.ep-app, .ep-shell, .cm-admin-shell, .customer-portal) :where(
    .ep-table,
    .cms-table,
    .rd-table,
    .vnd-table,
    .aff-table,
    .dash-table,
    .seo-table,
    table
  ):not(.ep-table--stack):not(:has(tbody td[data-label])):has(thead th:nth-child(4)) {
    min-width: 42rem;
  }

  :where(.ep-app, .ep-shell, .cm-admin-shell, .customer-portal) :where(
    .ep-table,
    .cms-table,
    .rd-table,
    .vnd-table,
    .aff-table,
    .dash-table,
    .seo-table,
    table
  ):not(.ep-table--stack):not(:has(tbody td[data-label])):has(thead th:nth-child(3)):not(:has(thead th:nth-child(4))) {
    min-width: 34rem;
  }

  .ep-table-wrap--stack .ep-table--stack td {
    grid-template-columns: minmax(5.75rem, 36%) minmax(8rem, 1fr) !important;
    align-items: start !important;
  }

  .ep-table-wrap--stack .ep-table--stack td::before {
    min-width: 0;
    writing-mode: horizontal-tb !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  .ep-table-wrap--stack .ep-table--stack td > * {
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 760px) {
  .ep-table-wrap--stack {
    overflow: visible !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .ep-table-wrap--stack .ep-table--stack {
    min-width: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 0.75rem !important;
  }

  .ep-table-wrap--stack .ep-table--stack thead {
    display: none !important;
  }

  .ep-table-wrap--stack .ep-table--stack,
  .ep-table-wrap--stack .ep-table--stack tbody,
  .ep-table-wrap--stack .ep-table--stack tr,
  .ep-table-wrap--stack .ep-table--stack td {
    display: block !important;
    width: 100% !important;
  }

  .ep-table-wrap--stack .ep-table--stack tr {
    padding: 0.75rem !important;
    border: 1px solid var(--cm-border, var(--border, #dbe2ea)) !important;
    border-radius: var(--cm-radius-card, 8px) !important;
    background: var(--cm-surface, var(--card-bg, #fff)) !important;
    box-shadow: var(--cm-shadow-card, 0 1px 2px rgba(15, 23, 42, 0.06)) !important;
  }

  .ep-table-wrap--stack .ep-table--stack td {
    display: grid !important;
    grid-template-columns: minmax(5.75rem, 36%) minmax(8rem, 1fr) !important;
    gap: 0.75rem !important;
    min-height: 0 !important;
    padding: 0.4rem 0 !important;
    border: 0 !important;
    text-align: left !important;
    overflow-wrap: break-word;
  }

  .ep-table-wrap--stack .ep-table--stack td::before {
    content: attr(data-label);
    color: var(--cm-text-muted, var(--muted, #64748b));
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.15rem;
  }

  .ep-table-wrap--stack .ep-table--stack td[data-label=""] {
    display: block !important;
    padding: 0 !important;
  }

  .ep-table-wrap--stack .ep-table--stack td[data-label=""]::before {
    display: none !important;
  }

  .ep-table-wrap--stack .ep-table__actions-cell {
    text-align: left !important;
  }

  .ep-table-wrap--stack .ep-table__actions-cell > * {
    grid-column: 2;
    min-width: 0;
  }

  .ep-table-wrap--stack .ep-table__actions-cell .ep-btn {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
  }
}

/* Platform admin uses the same visual grammar without depending on the
   partner navigation implementation. */
body.cm-admin-shell {
  background: var(--cm-page-bg);
  color: var(--cm-text);
}
.cm-admin-shell .shell { grid-template-columns: var(--cm-sidebar-width) minmax(0, 1fr); }
.cm-admin-shell .sidebar {
  border-right: 1px solid var(--cm-border);
  background: var(--cm-surface);
  color: var(--cm-text);
}
.cm-admin-shell .brand { color: var(--cm-text); font-weight: 600; }
.cm-admin-shell .nav a { color: var(--cm-text-secondary); font-weight: 500; }
.cm-admin-shell .nav a:hover,
.cm-admin-shell .nav a.active { background: var(--cm-selected); color: var(--cm-primary-action); }
.cm-admin-shell :where(.eyebrow, .kpi label, .status, .btn) { font-weight: 500; }
.cm-admin-shell .content { padding: var(--cm-space-page); }
.cm-admin-shell .panel { border-radius: var(--cm-radius-card); box-shadow: var(--cm-shadow-card); }
.cm-admin-shell .btn.primary { background: var(--cm-primary-action); border-color: var(--cm-primary-action); color: #ffffff; }
.cm-admin-shell .btn.primary:hover { filter: brightness(0.92); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.cm-admin-shell {
    --bg: #0b1420;
    --panel: #151f2c;
    --text: #f8fbff;
    --muted: #aab9cd;
    --border: rgba(141, 161, 190, 0.24);
    --border-strong: rgba(164, 185, 216, 0.42);
    --surface-elevated: #151f2c;
    --cm-page-bg: var(--bg);
    --cm-surface: var(--panel);
    --cm-surface-elevated: var(--panel);
    --cm-surface-muted: #111a26;
    --cm-text: var(--text);
    --cm-text-secondary: #dbe6f5;
    --cm-text-muted: var(--muted);
    --cm-border: var(--border);
    --cm-border-strong: var(--border-strong);
    color-scheme: dark;
  }
}

@media (max-width: 760px) {
  .cm-admin-shell .shell { grid-template-columns: 1fr; }
  .cm-admin-shell .content { padding: 1rem; }
}

/* Authenticated mobile shell contract: closed header panels must never consume the viewport. */
@media (max-width: 1023px) {
  .ep-app.cm-shell[data-cm-app-shell]:not(.cm-shell--builder-fullscreen) {
    height: 100vh;
    height: 100dvh;
    min-height: 100svh;
    overflow: hidden !important;
  }

  .ep-app.cm-shell[data-cm-app-shell]:not(.cm-shell--builder-fullscreen) > .cm-main {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }

  .ep-app.cm-shell[data-cm-app-shell]:not(.cm-shell--builder-fullscreen) .cm-topbar {
    flex: 0 0 auto;
  }

  .ep-app.cm-shell[data-cm-app-shell]:not(.cm-shell--builder-fullscreen) .cm-main-content {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  .ep-app.cm-shell .cm-notification-menu {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    border-radius: 0 !important;
  }

  .ep-app.cm-shell[data-cm-app-shell] .cm-topbar:has(.cm-notification-menu.is-open) {
    z-index: var(--cm-layer-modal) !important;
  }

  .ep-app.cm-shell[data-cm-app-shell] .cm-notification-menu.is-open {
    z-index: var(--cm-layer-modal) !important;
  }

  .ep-app.cm-shell[data-cm-app-shell] .cm-notification-menu.is-open .cm-notification-menu__panel {
    z-index: var(--cm-layer-modal) !important;
  }

  .ep-app.cm-shell[data-cm-app-shell]:has(.cm-notification-menu.is-open) .cm-ai-assistant--companion {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .ep-app.cm-shell :where(
    .cm-notification-menu__panel[hidden],
    [data-cm-notification-panel][hidden],
    .cm-help-panel[hidden],
    [data-cm-help-panel][hidden],
    .cm-user-panel[hidden],
    .cm-quick-actions__panel[hidden]
  ) {
    display: none !important;
    pointer-events: none !important;
  }
}

@media (max-width: 1023px) {
  .ep-app.cm-shell[data-cm-app-shell]:not(.cm-shell--builder-fullscreen) > .cm-main > .cm-topbar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
    min-height: 4rem !important;
    padding: max(0.62rem, env(safe-area-inset-top)) 0.72rem 0.62rem !important;
  }

  .ep-app.cm-shell[data-cm-app-shell]:not(.cm-shell--builder-fullscreen) .cm-topbar .cm-topbar__start {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
  }

  .ep-app.cm-shell[data-cm-app-shell]:not(.cm-shell--builder-fullscreen) .cm-topbar .cm-topbar__heading {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .ep-app.cm-shell[data-cm-app-shell]:not(.cm-shell--builder-fullscreen) .cm-topbar .cm-topbar__actions {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.35rem !important;
    width: auto !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .ep-app.cm-shell[data-cm-app-shell]:not(.cm-shell--builder-fullscreen) .cm-topbar .cm-topbar__search,
  .ep-app.cm-shell[data-cm-app-shell]:not(.cm-shell--builder-fullscreen) .cm-topbar .cm-topbar__actions > .cm-help-menu,
  .ep-app.cm-shell[data-cm-app-shell]:not(.cm-shell--builder-fullscreen) .cm-topbar .cm-topbar__actions > .cm-quick-actions,
  .ep-app.cm-shell[data-cm-app-shell]:not(.cm-shell--builder-fullscreen) .cm-topbar .cm-topbar__actions > .cm-theme-toggle {
    display: none !important;
  }

  .ep-app.cm-shell[data-cm-app-shell]:not(.cm-shell--builder-fullscreen) .cm-topbar .cm-topbar__actions > .cm-notification-menu,
  .ep-app.cm-shell[data-cm-app-shell]:not(.cm-shell--builder-fullscreen) .cm-topbar .cm-topbar__actions > .cm-user-menu {
    display: block !important;
    flex: 0 0 auto !important;
  }

  .ep-app.cm-shell[data-cm-app-shell]:not(.cm-shell--builder-fullscreen) .cm-topbar .cm-topbar__kicker,
  .ep-app.cm-shell[data-cm-app-shell]:not(.cm-shell--builder-fullscreen) .cm-topbar .cm-topbar__subtitle {
    display: none !important;
  }

  .ep-app.cm-shell[data-cm-app-shell]:not(.cm-shell--builder-fullscreen) .cm-topbar .cm-page-breadcrumbs {
    max-width: 100% !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  .ep-app.cm-shell[data-cm-app-shell]:not(.cm-shell--builder-fullscreen) .cm-topbar .cm-page-breadcrumbs__link,
  .ep-app.cm-shell[data-cm-app-shell]:not(.cm-shell--builder-fullscreen) .cm-topbar .cm-page-breadcrumbs__sep {
    display: none !important;
  }

  .ep-app.cm-shell[data-cm-app-shell]:not(.cm-shell--builder-fullscreen) .cm-topbar .cm-page-breadcrumbs__current,
  .ep-app.cm-shell[data-cm-app-shell]:not(.cm-shell--builder-fullscreen) .cm-topbar .cm-topbar__title {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    color: var(--shell-text) !important;
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* Builder responsive contract. */
:where(.site-builder-shell, .cart-builder-app, .page-builder-app, .builder-shell) {
  width: 100vw;
  max-width: 100vw;
  min-height: 100dvh;
  overflow: hidden;
}

:where(.site-builder-shell, .cart-builder-app, .page-builder-app, .builder-shell) :where(
  .site-builder-shell__toolbar,
  .cart-builder-toolbar,
  .builder-toolbar
) {
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

:where(.site-builder-shell, .cart-builder-app, .page-builder-app, .builder-shell) :where(
  .site-builder-shell__canvas,
  .builder-canvas-wrap,
  .cart-builder-preview,
  .builder-preview
) {
  min-width: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 900px) {
  :where(.site-builder-shell, .cart-builder-app, .page-builder-app, .builder-shell) :where(
    .site-builder-shell__body,
    .cart-builder-body,
    .builder-body
  ) {
    display: flex !important;
    flex-direction: column !important;
    overflow: auto !important;
  }

  :where(.site-builder-shell, .cart-builder-app, .page-builder-app, .builder-shell) :where(
    .site-builder-shell__sidebar,
    .site-builder-shell__inspector,
    .cart-builder-sidebar,
    .cart-builder-inspector,
    .builder-sidebar,
    .builder-inspector
  ) {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 42dvh !important;
    border-inline: 0 !important;
  }
}

/* Storefront, cart and checkout containment. */
:where(.storefront-page, .product-retail-page, .cart-page, .checkout-page, .tc-payment-main) :where(
  .product-gallery,
  .product-media,
  .cart-drawer,
  .cart-summary,
  .checkout-summary,
  .checkout-panel,
  .payment-panel,
  .order-summary
) {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 768px) {
  :where(.storefront-page, .product-retail-page, .cart-page, .checkout-page, .tc-payment-main) :where(
    .product-layout,
    .product-retail-grid,
    .cart-layout,
    .checkout-layout,
    .checkout-grid,
    .tc-payment-grid
  ) {
    grid-template-columns: 1fr !important;
  }

  :where(.storefront-page, .product-retail-page, .cart-page, .checkout-page, .tc-payment-main) :where(
    .cart-drawer,
    .checkout-summary,
    .order-summary
  ) {
    width: 100% !important;
    max-width: 100% !important;
    position: relative;
  }
}

/* Canonical CreativeMark design-system contract.
   This final layer normalises every application family while preserving each
   storefront's configured brand colour and specialist builder canvas. */
:where(.ep-app, .cm-admin-shell, .vnd-shell, .aff-shell, .customer-portal, .cm-auth-page, .onboarding-page, .storefront-page, .cart-page, .checkout-page) {
  --cm-page-bg: var(--shell-app-bg, var(--bg, #f4f7fb));
  --cm-surface: var(--shell-surface-strong, var(--panel-bg, var(--card-bg, #ffffff)));
  --cm-surface-elevated: var(--shell-surface-strong, var(--panel-bg-raised, var(--cm-surface)));
  --cm-surface-muted: var(--shell-surface-muted, var(--subtle-bg, #f4f7fb));
  --cm-text: var(--shell-text, var(--text, #0f172a));
  --cm-text-secondary: var(--shell-text-soft, color-mix(in srgb, var(--cm-text) 78%, var(--cm-page-bg)));
  --cm-text-muted: var(--shell-text-muted, color-mix(in srgb, var(--cm-text) 62%, var(--cm-page-bg)));
  --cm-text-disabled: color-mix(in srgb, var(--cm-text) 44%, var(--cm-page-bg));
  --cm-border: var(--shell-border, var(--border, #dce3ed));
  --cm-border-strong: var(--shell-border-strong, color-mix(in srgb, var(--cm-border) 70%, var(--cm-text)));
  --cm-divider: color-mix(in srgb, var(--cm-border) 82%, transparent);
  --cm-primary-action: var(--shell-primary, var(--brand-color, #2563eb));
  --cm-primary-action-text: #ffffff;
  --cm-hover: color-mix(in srgb, var(--cm-primary-action) 7%, var(--cm-surface));
  --cm-active: color-mix(in srgb, var(--cm-primary-action) 12%, var(--cm-surface));
  --cm-selected: color-mix(in srgb, var(--cm-primary-action) 15%, var(--cm-surface));
  --cm-focus-ring: color-mix(in srgb, var(--cm-primary-action) 76%, #ffffff);
  --cm-success: var(--shell-success, var(--success, #15803d));
  --cm-warning: var(--shell-warning, var(--warning, #d97706));
  --cm-error: var(--shell-danger, var(--danger, #dc2626));
  --cm-information: #0284c7;
  --cm-link: var(--link, var(--cm-primary-action));
  --cm-input-bg: var(--cm-surface-elevated);
  --cm-input-border: var(--cm-border-strong);
  --cm-table-header: var(--cm-surface-muted);
  --cm-table-hover: var(--cm-hover);
  --cm-drawer-bg: var(--cm-surface-elevated);
  --cm-modal-bg: var(--cm-surface-elevated);
  --cm-overlay-backdrop: rgba(15, 23, 42, 0.46);
  --cm-chat-surface: var(--cm-surface-elevated);
  --cm-chart-grid: var(--cm-divider);
  --cm-chart-label: var(--cm-text-muted);
  --cm-space-page: clamp(1rem, 1.7vw, 2rem);
  --cm-space-section: 1rem;
  --cm-space-card-gap: 0.75rem;
  --cm-space-card-padding: 1rem;
  --cm-space-field: 0.75rem;
  --cm-radius-control: 0.5rem;
  --cm-radius-card: 0.5rem;
  --cm-radius-modal: 0.625rem;
  --cm-shadow-card: 0 1px 3px rgba(15, 23, 42, 0.05);
  --cm-shadow-elevated: 0 18px 42px rgba(15, 23, 42, 0.14);
  --cm-shadow-drawer: -18px 0 42px rgba(15, 23, 42, 0.14);
  --cm-header-height: 4rem;
  --cm-sidebar-width: 16.5rem;
  --cm-drawer-width: 42rem;
  --cm-modal-width: 38rem;
  --cm-input-height: 2.5rem;
  --cm-table-row-height: 3.25rem;
  font-family: "Satoshi", ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 0;
}

body.cm-dialog-open { overflow: hidden !important; }

:where(.ep-app, .cm-admin-shell, .vnd-shell, .aff-shell, .customer-portal, .cm-auth-page, .onboarding-page) :where(
  .cm-main-content,
  .ep-main,
  main,
  [data-cm-main-content]
) {
  min-width: 0;
  max-width: 100%;
}

:where(.ep-app, .cm-admin-shell, .vnd-shell, .aff-shell, .customer-portal, .cm-auth-page, .onboarding-page) :where(
  .ep-card,
  .card,
  .panel,
  .cm-card,
  .vnd-card,
  .aff-card,
  .rd-card
) {
  border-color: var(--cm-border);
  border-radius: var(--cm-radius-card);
  background: var(--cm-surface);
  color: var(--cm-text);
  box-shadow: var(--cm-shadow-card);
}

:where(.ep-app, .cm-admin-shell, .vnd-shell, .aff-shell, .customer-portal, .cm-auth-page, .onboarding-page) :where(
  h1,
  .ep-page-heading,
  .cm-page-title
) {
  color: var(--cm-text);
  font-weight: 600;
  letter-spacing: 0;
}

:where(.ep-app, .cm-admin-shell, .vnd-shell, .aff-shell, .customer-portal, .cm-auth-page, .onboarding-page) :where(
  h2,
  h3,
  .ep-card__title,
  .panel-header h2,
  .card-title
) {
  color: var(--cm-text);
  font-weight: 600;
  letter-spacing: 0;
}

:where(.ep-app, .cm-admin-shell, .vnd-shell, .aff-shell, .customer-portal, .cm-auth-page, .onboarding-page) :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
  select,
  textarea,
  .input,
  .ep-input,
  .form-control
) {
  min-height: var(--cm-input-height);
  border-color: var(--cm-input-border);
  border-radius: var(--cm-radius-control);
  background: var(--cm-input-bg);
  color: var(--cm-text);
  font: inherit;
}

:where(.ep-app, .cm-admin-shell, .vnd-shell, .aff-shell, .customer-portal, .cm-auth-page, .onboarding-page) :where(
  table,
  .ep-table,
  .rd-table,
  .vnd-table,
  .aff-table
) {
  width: 100%;
  border-collapse: collapse;
  color: var(--cm-text);
}

:where(.ep-app, .cm-admin-shell, .vnd-shell, .aff-shell, .customer-portal, .cm-auth-page, .onboarding-page) :where(
  table thead,
  .ep-table thead,
  .rd-table thead,
  .vnd-table thead,
  .aff-table thead
) {
  background: var(--cm-table-header);
  color: var(--cm-text-secondary);
}

:where(.ep-app, .cm-admin-shell, .vnd-shell, .aff-shell, .customer-portal, .cm-auth-page, .onboarding-page) :where(
  table tbody tr,
  .ep-table tbody tr,
  .rd-table tbody tr,
  .vnd-table tbody tr,
  .aff-table tbody tr
) {
  min-height: var(--cm-table-row-height);
  border-color: var(--cm-divider);
}

:where(.ep-app, .cm-admin-shell, .vnd-shell, .aff-shell, .customer-portal, .cm-auth-page, .onboarding-page) :where(
  table tbody tr:hover,
  .ep-table tbody tr:hover,
  .rd-table tbody tr:hover,
  .vnd-table tbody tr:hover,
  .aff-table tbody tr:hover
) { background: var(--cm-table-hover); }

:where([role="dialog"][aria-modal="true"]) {
  max-width: 100vw;
  max-height: 100dvh;
  border-color: var(--cm-border);
  background: var(--cm-modal-bg);
  color: var(--cm-text);
}

:where(.ep-app, .cm-admin-shell, .vnd-shell, .aff-shell, .customer-portal, .cm-auth-page, .onboarding-page) :focus-visible {
  outline: 2px solid var(--cm-focus-ring) !important;
  outline-offset: 2px;
}

@media (min-width: 1440px) {
  :where(.ep-app, .cm-admin-shell, .vnd-shell, .aff-shell, .customer-portal) :where(.cm-main-content, [data-cm-main-content]) {
    padding-inline: var(--cm-space-page);
  }
}

@media (max-width: 1024px) {
  :where(.ep-app, .cm-admin-shell, .vnd-shell, .aff-shell, .customer-portal) :where(.cm-main-content, [data-cm-main-content]) {
    padding-inline: min(1.25rem, 3vw);
  }
}

@media (max-width: 640px) {
  :where(.ep-app, .cm-admin-shell, .vnd-shell, .aff-shell, .customer-portal) :where(.cm-main-content, [data-cm-main-content]) {
    padding-inline: 1rem;
  }
  :where([role="dialog"][aria-modal="true"]) {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
}

/* Keep workspace search available in the compact two-row mobile header. */
@media (max-width: 1023px) {
  .ep-app.cm-shell.cm-shell--trackdesk[data-cm-app-shell]:not(.cm-shell--builder-fullscreen) > .cm-main > .cm-topbar {
    flex-wrap: wrap !important;
  }

  .ep-app.cm-shell.cm-shell--trackdesk[data-cm-app-shell]:not(.cm-shell--builder-fullscreen) .cm-topbar .cm-topbar__actions {
    width: 100% !important;
    flex: 1 0 100% !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }

  .ep-app.cm-shell.cm-shell--trackdesk[data-cm-app-shell]:not(.cm-shell--builder-fullscreen) .cm-topbar .cm-topbar__search {
    display: flex !important;
    order: 20 !important;
    width: 100% !important;
    flex: 1 0 100% !important;
  }
}