/* Global interface normalization layer.
   This file is loaded late so every portal, document, account, and storefront
   screen shares the same final surface, spacing, and control treatment. */

:where(.ep-page, .cm-auth-page, .cm-onboarding-page, .cm-embed-page) {
  --cm-global-radius: 8px;
  --cm-global-bg: #f3f5fa;
  --cm-global-surface: #ffffff;
  --cm-global-surface-muted: #f8fafc;
  --cm-global-border: #d7dde8;
  --cm-global-text: #101828;
  --cm-global-muted: #475467;
  --cm-global-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  --radius: var(--cm-global-radius) !important;
  --radius-sm: var(--cm-global-radius) !important;
  --radius-md: var(--cm-global-radius) !important;
  --radius-lg: var(--cm-global-radius) !important;
  --radius-xl: var(--cm-global-radius) !important;
  --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;
  font-size: var(--cm-type-base);
}

:where(.ep-page, .cm-auth-page, .cm-onboarding-page, .cm-embed-page),
:where(.ep-page, .cm-auth-page, .cm-onboarding-page, .cm-embed-page) :where(*) {
  letter-spacing: 0 !important;
}

:where(.ep-page:not(.cm-storefront-page), .cm-auth-page, .cm-onboarding-page, .cm-embed-page) {
  background: var(--cm-global-bg) !important;
  color: var(--text, var(--shell-text, var(--cm-global-text))) !important;
}

:where(.ep-page, .cm-auth-page, .cm-onboarding-page, .cm-embed-page) :where(.text-xs) {
  font-size: var(--cm-type-xs) !important;
  line-height: 1.075rem !important;
}

:where(.ep-page, .cm-auth-page, .cm-onboarding-page, .cm-embed-page) :where(.text-sm, .muted) {
  font-size: var(--cm-type-sm) !important;
  line-height: 1.205rem !important;
}

:where(.ep-page, .cm-auth-page, .cm-onboarding-page, .cm-embed-page) :where(.text-base) {
  font-size: var(--cm-type-base) !important;
  line-height: 1.305rem !important;
}

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

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

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

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

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

:where(.ep-page, .cm-auth-page, .cm-onboarding-page, .cm-embed-page) :where(
  h1,
  .cm-topbar__title,
  .ep-page-heading,
  .cart-retail-title,
  .product-retail-title,
  .retail-hero__title,
  .lp-hero-title,
  .auth-title,
  .onb-title
) {
  font-size: clamp(1.085rem, 0.72vw + 0.905rem, 1.305rem) !important;
  line-height: 1.08 !important;
}

:where(.ep-page, .cm-auth-page, .cm-onboarding-page, .cm-embed-page) :where(
  h2,
  .ep-card__title,
  .cms-panel__title,
  .ep-toolbar-card__title,
  .cart-panel__title,
  .product-section__title,
  .retail-section__title,
  .vnd-card__title
) {
  font-size: clamp(0.905rem, 0.32vw + 0.805rem, 1.025rem) !important;
  line-height: 1.18 !important;
}

:where(.ep-page, .cm-auth-page, .cm-onboarding-page, .cm-embed-page) :where(h3, h4, h5, h6) {
  font-size: clamp(0.845rem, 0.24vw + 0.765rem, 0.965rem) !important;
  line-height: 1.2 !important;
}

:where(.ep-page, .cm-auth-page, .cm-onboarding-page, .cm-embed-page) :where(
  p,
  li,
  label,
  summary,
  td,
  th,
  input,
  select,
  textarea,
  button,
  .ep-btn,
  .btn,
  .auth-input,
  .auth-btn,
  .onb-input,
  .onb-btn-primary,
  .onb-btn-ghost,
  .cm-topbar__cta,
  .cm-sidebar__item-label,
  .cm-sidebar__child,
  .cm-user-toggle__name,
  .cm-user-panel__link,
  .cm-user-panel__button,
  .cm-user-panel__switch button,
  .cm-user-panel__switch-current,
  .store-product-card,
  .retail-card,
  .cart-line,
  .cart-summary-card,
  .checkout-panel,
  .qc-modal
) {
  font-size: var(--cm-type-base) !important;
}

:where(.ep-page, .cm-auth-page, .cm-onboarding-page, .cm-embed-page) :where(
  small,
  .help,
  .helptext,
  .ep-field__help,
  .ep-field__error,
  .ep-card__subtitle,
  .cms-panel__subtitle,
  .ep-toolbar-card__text,
  .cm-topbar__kicker,
  .cm-page-breadcrumbs,
  .cm-user-toggle__label,
  .cm-user-panel__title,
  .cm-user-panel__meta,
  .ep-badge,
  .badge,
  .cm-admin-chip,
  .cart-summary-note
) {
  font-size: var(--cm-type-sm) !important;
}

:where(.ep-page, .cm-auth-page, .cm-onboarding-page, .cm-embed-page) :where(
  .ep-summary-card__value,
  .cms-kpi__value,
  .dashboard-shell-metric__value,
  .cart-summary-card__total,
  .product-retail-price,
  .retail-card__price
) {
  font-size: clamp(0.985rem, 0.42vw + 0.865rem, 1.125rem) !important;
  line-height: 1.12 !important;
}

:where(.ep-page, .cm-auth-page, .cm-onboarding-page, .cm-embed-page) :where(
  .ep-card,
  .card,
  .cms-panel,
  .ep-toolbar-card,
  .ep-summary-card,
  .cms-kpi,
  .ep-empty-state,
  .ep-message,
  .ep-disclosure,
  .ep-modal,
  .auth-card,
  .onb-card,
  .vnd-card,
  .aff-card,
  .rd-card,
  .rd-table-card,
  .b2b-context-banner,
  .checkout-panel,
  .cart-summary-card,
  .cart-line,
  .store-product-card,
  .retail-card,
  .product-gallery,
  .doc-paper,
  .doc-toolbar,
  .doc-meta-card,
  .doc-panel,
  .doc-note,
  .doc-table-wrap,
  .cm-user-panel,
  .cm-quick-actions__panel,
  [class*="card"],
  [class*="panel"],
  [class*="modal"],
  [class*="dialog"],
  [class*="table-wrap"],
  [class*="table-card"],
  [class*="toolbar"]
) {
  border-radius: var(--cm-global-radius) !important;
}

:where(.ep-page, .cm-auth-page, .cm-onboarding-page, .cm-embed-page) :where(
  a[class],
  button,
  input,
  select,
  textarea,
  fieldset,
  summary,
  iframe,
  [role="button"],
  [role="tab"],
  [role="menuitem"],
  [role="listbox"],
  .ep-btn,
  .btn,
  .auth-input,
  .auth-btn,
  .onb-input,
  .onb-btn-primary,
  .onb-btn-ghost,
  .ep-tab,
  .cm-sidebar__item,
  .cm-sidebar__child,
  .cm-sidebar__brand-mark,
  .cm-sidebar__plan-card,
  .cm-sidebar__paywall-card,
  .cm-sidebar__footer-link,
  .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,
  .cm-topbar__search,
  .cm-topbar__cta,
  .cm-avatar,
  .lp-nav-link,
  .lp-nav-cta,
  .lp-btn,
  .vnd-btn,
  .aff-btn,
  .rd-btn,
  .doc-status
) {
  border-radius: var(--cm-global-radius) !important;
}

:where(.ep-page, .cm-auth-page, .cm-onboarding-page, .cm-embed-page) :where(
  .ep-badge,
  .badge,
  .cm-admin-chip,
  .cm-notice-rail__pill,
  .cm-notice-rail__cta,
  .cm-notice-rail__dismiss,
  .rd-pill,
  .rd-chip,
  .doc-status,
  .rounded-full
) {
  border-radius: 999px !important;
}

:where(.ep-page, .cm-auth-page, .cm-onboarding-page, .cm-embed-page) :where(
  .rounded,
  .rounded-sm,
  .rounded-md,
  .rounded-lg,
  .rounded-xl,
  .rounded-2xl,
  [class*="rounded-[0."],
  [class*="rounded-[1"]
) {
  border-radius: var(--cm-global-radius) !important;
}

:where(.ep-page, .cm-auth-page, .cm-onboarding-page, .cm-embed-page) :where(
  .cm-shell,
  .cm-sidebar,
  .cm-topbar,
  .ep-header,
  .ep-main,
  .lp-nav,
  .lp-hero,
  .lp-footer
) {
  border-radius: 0 !important;
}

:where(.ep-page, .cm-auth-page, .cm-onboarding-page, .cm-embed-page) :where(
  .ep-card,
  .card,
  .cms-panel,
  .ep-toolbar-card,
  .ep-summary-card,
  .cms-kpi,
  .auth-card,
  .onb-card,
  .vnd-card,
  .aff-card,
  .rd-card,
  .doc-paper,
  .doc-toolbar,
  .doc-meta-card,
  .doc-panel,
  .doc-table-wrap
) {
  box-shadow: var(--cm-global-shadow) !important;
}

:where(.ep-page, .cm-auth-page, .cm-onboarding-page, .cm-embed-page) :where(
  input,
  select,
  textarea,
  .input,
  .ep-input,
  .form-control,
  .auth-input,
  .onb-input
) {
  background: var(--panel-bg, var(--shell-surface-strong, var(--card-bg, var(--cm-global-surface)))) !important;
  border: 1px solid var(--border, var(--shell-border, var(--cm-global-border))) !important;
  color: var(--text, var(--shell-text, var(--cm-global-text))) !important;
  box-shadow: none !important;
}

:where(.ep-page, .cm-auth-page, .cm-onboarding-page, .cm-embed-page) :where(
  input,
  select,
  textarea,
  .input,
  .ep-input,
  .form-control,
  .auth-input,
  .onb-input
):focus {
  border-color: color-mix(in srgb, var(--brand-color, var(--shell-primary, #cb0b0b)) 54%, var(--border, var(--cm-global-border))) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-color, var(--shell-primary, #cb0b0b)) 16%, transparent) !important;
  outline: none !important;
}

:where(.ep-page, .cm-auth-page, .cm-onboarding-page, .cm-embed-page) :where(
  a[href],
  button,
  input,
  select,
  textarea,
  summary,
  [role="button"],
  [role="tab"],
  [role="menuitem"],
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand-color, var(--shell-primary, #cb0b0b)) 78%, transparent) !important;
  outline-offset: 2px !important;
}

:where(.ep-page, .cm-auth-page, .cm-onboarding-page, .cm-embed-page) :where(
  button[disabled],
  input[disabled],
  select[disabled],
  textarea[disabled],
  .ep-btn[aria-disabled="true"],
  .cm-topbar__cta[aria-disabled="true"]
) {
  opacity: 0.58 !important;
  cursor: not-allowed !important;
}

:where(.ep-page, .cm-auth-page, .cm-onboarding-page, .cm-embed-page) :where(
  tr[data-row-link],
  .cm-sidebar__item,
  .cm-sidebar__child,
  .cm-user-panel__link,
  .cm-user-panel__button,
  .ep-tab,
  .ep-btn,
  .cm-topbar__cta
) {
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease !important;
}

:where(.ep-page, .cm-auth-page, .cm-onboarding-page, .cm-embed-page) tr[data-row-link]:hover > td,
:where(.ep-page, .cm-auth-page, .cm-onboarding-page, .cm-embed-page) tr[data-row-link]:focus-visible > td {
  background: color-mix(in srgb, var(--brand-color, var(--shell-primary, #cb0b0b)) 5%, transparent) !important;
}