/* Shared end-user components. Each primitive has a stable mc-* contract
   and carefully selected aliases for the legacy migration window. */

body.product-page .mc-button,
body.product-page .button,
body.product-page .btn {
  display: inline-flex;
  min-block-size: var(--mc-target-comfortable);
  align-items: center;
  justify-content: center;
  gap: var(--mc-space-2);
  padding: 0.65rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--mc-radius-control);
  font-family: var(--mc-font-sans);
  font-size: var(--mc-text-sm);
  font-weight: var(--mc-weight-semibold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    color var(--mc-motion-direct) var(--mc-ease-standard),
    background-color var(--mc-motion-state) var(--mc-ease-standard),
    border-color var(--mc-motion-state) var(--mc-ease-standard),
    transform var(--mc-motion-direct) var(--mc-ease-standard);
}

body.product-page :where(.mc-button, .button, .btn):active:not(:disabled) {
  transform: translateY(1px);
}

body.product-page :where(.mc-button, .button, .btn):disabled,
body.product-page :where(.mc-button, .button, .btn)[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

body.product-page :where(
  .mc-button--primary,
  .button--primary,
  .button-primary,
  .btn-primary
) {
  color: var(--mc-on-cobalt);
  background: var(--mc-cobalt);
  border-color: var(--mc-cobalt);
}

body.product-page :where(
  .mc-button--primary,
  .button--primary,
  .button-primary,
  .btn-primary
):hover:not(:disabled) {
  color: var(--mc-on-cobalt);
  background: var(--mc-cobalt-hover);
  border-color: var(--mc-cobalt-hover);
}

body.product-page :where(
  .mc-button--secondary,
  .button--secondary,
  .button-secondary,
  .btn-secondary
) {
  color: var(--mc-ink);
  background: var(--mc-paper);
  border-color: var(--mc-line-strong);
}

body.product-page :where(
  .mc-button--secondary,
  .button--secondary,
  .button-secondary,
  .btn-secondary
):hover:not(:disabled) {
  background: #efeee8;
  border-color: var(--mc-ink-muted);
}

body.product-page :where(
  .mc-button--tertiary,
  .button--tertiary,
  .button-tertiary,
  .btn-tertiary
) {
  min-block-size: var(--mc-target-minimum);
  padding-inline: var(--mc-space-1);
  color: var(--mc-cobalt);
  background: transparent;
  border-color: transparent;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}

body.product-page :where(
  .mc-button--destructive,
  .button--danger,
  .button-destructive,
  .btn-danger
) {
  color: #ffffff;
  background: var(--mc-danger);
  border-color: var(--mc-danger);
}

body.product-page :where(.button--danger, .mc-button--destructive)::before {
  content: "!";
  display: inline-grid;
  inline-size: 1.15em;
  block-size: 1.15em;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 0.75em;
  line-height: 1;
}

body.product-page [data-journey-cta] {
  min-inline-size: clamp(9.5rem, 14vw, 12.5rem);
  white-space: nowrap;
}

body.product-page .mc-field,
body.product-page .field {
  display: grid;
  gap: var(--mc-space-2);
}

body.product-page .mc-field > label,
body.product-page .field > label,
body.product-page .mc-field__label,
body.product-page .field__label {
  color: var(--mc-ink);
  font-size: var(--mc-text-sm);
  font-weight: var(--mc-weight-semibold);
  line-height: 1.3;
}

body.product-page :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  textarea,
  select,
  .field__control
) {
  min-block-size: var(--mc-target-comfortable);
  inline-size: 100%;
  padding: 0.65rem 0.75rem;
  color: var(--mc-ink);
  background: var(--mc-paper-strong);
  border: 1px solid var(--mc-line-strong);
  border-radius: var(--mc-radius-control);
  transition:
    border-color var(--mc-motion-direct) var(--mc-ease-standard),
    box-shadow var(--mc-motion-direct) var(--mc-ease-standard);
}

body.product-page textarea {
  min-block-size: 8rem;
  resize: vertical;
}

body.product-page :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  textarea,
  select,
  .field__control
):hover:not(:disabled) {
  border-color: var(--mc-ink-muted);
}

body.product-page :where(input, textarea, select)[aria-invalid="true"] {
  border-color: var(--mc-danger);
}

body.product-page :where(input, textarea, select):disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

body.product-page :where(
  .mc-field__hint,
  .field__hint,
  .field-hint
) {
  color: var(--mc-ink-muted);
  font-size: var(--mc-text-sm);
  line-height: 1.45;
}

body.product-page :where(
  .mc-field__error,
  .field__error,
  .field-validation-error
) {
  color: var(--mc-danger);
  font-size: var(--mc-text-sm);
  font-weight: var(--mc-weight-medium);
}

body.product-page .mc-state-surface,
body.product-page .state-surface,
body.product-page [data-state-surface] {
  display: grid;
  gap: var(--mc-space-3);
  padding: var(--mc-space-6);
  color: var(--mc-ink);
  background: var(--mc-paper);
  border-inline-start: 4px solid var(--mc-line-strong);
  border-radius: var(--mc-radius-compact);
}

body.product-page :where(
  .mc-state-surface,
  .state-surface,
  [data-state-surface]
)[hidden] {
  display: none;
}

body.product-page :where(.mc-state-surface--success,
  .state-surface--success,
  [data-state-surface="success"]) {
  background: var(--mc-success-soft);
  border-inline-start-color: var(--mc-success);
}

body.product-page :where(.mc-state-surface--warning,
  .state-surface--warning,
  [data-state-surface="warning"]) {
  background: var(--mc-warning-soft);
  border-inline-start-color: var(--mc-warning);
}

body.product-page :where(.mc-state-surface--error,
  .state-surface--error,
  .state-surface--validation-error,
  [data-state-surface="validation-error"],
  [data-state-surface="error"]) {
  background: var(--mc-danger-soft);
  border-inline-start-color: var(--mc-danger);
}

body.product-page :where(
  .state-surface--loading,
  [data-state-surface="loading"]
) {
  border-inline-start-color: var(--mc-cobalt);
}

body.product-page :where(
  .state-surface--empty,
  [data-state-surface="empty"]
) {
  background: var(--mc-paper);
  border-inline-start-color: var(--mc-line-strong);
}

body.product-page :where(
  .state-surface--unavailable,
  [data-state-surface="unavailable"]
) {
  background: var(--mc-warning-soft);
  border-inline-start-color: var(--mc-warning);
}

body.product-page .mc-status-badge,
body.product-page .status-badge {
  display: inline-flex;
  min-block-size: var(--mc-target-minimum);
  inline-size: fit-content;
  align-items: center;
  gap: var(--mc-space-1);
  padding: 0.2rem 0.5rem;
  color: var(--mc-ink);
  background: #ecebe5;
  border: 1px solid var(--mc-line);
  border-radius: var(--mc-radius-control);
  font-size: var(--mc-text-xs);
  font-weight: var(--mc-weight-semibold);
  letter-spacing: 0.02em;
  line-height: 1.25;
}

body.product-page .mc-page-heading,
body.product-page .page-heading {
  display: grid;
  gap: var(--mc-space-3);
  max-inline-size: var(--mc-reading-width);
  margin-block-end: var(--mc-space-10);
}

body.product-page :where(.mc-page-heading__eyebrow,
  .page-heading__eyebrow) {
  color: var(--mc-cobalt);
  font-size: var(--mc-text-xs);
  font-weight: var(--mc-weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body.product-page :where(.mc-page-heading__description,
  .page-heading__description) {
  max-inline-size: var(--mc-reading-width);
  color: var(--mc-ink-muted);
  font-size: var(--mc-text-lg);
}

body.product-page .mc-surface-card,
body.product-page .surface-card {
  padding: clamp(var(--mc-space-5), 3vw, var(--mc-space-8));
  background: var(--mc-paper);
  border: 1px solid rgb(8 45 82 / 10%);
  border-radius: var(--mc-radius-major);
  box-shadow: var(--mc-shadow-low);
}

body.product-page .mc-coordinate {
  color: var(--mc-cobalt);
  font-family: var(--mc-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

body.product-page .mc-route {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

body.product-page .mc-route::before {
  position: absolute;
  inset: 11px 0 auto;
  block-size: 1px;
  background: var(--mc-line);
  content: "";
}

body.product-page .mc-route__node {
  position: relative;
  padding-block-start: 32px;
  color: var(--mc-ink-muted);
}

body.product-page .mc-route__node::before {
  position: absolute;
  inset: 7px auto auto 0;
  inline-size: 9px;
  block-size: 9px;
  border: 1px solid currentcolor;
  border-radius: 50%;
  background: var(--mc-paper);
  content: "";
}

body.product-page .mc-route__node.is-current {
  color: var(--mc-cobalt);
  font-weight: var(--mc-weight-semibold);
}

body.product-page .mc-route__node.is-current::before,
body.product-page .mc-route__node.is-complete::before {
  border-color: var(--mc-cobalt);
  background: var(--mc-cobalt);
}

body.product-page .skip-link {
  position: fixed;
  z-index: 10000;
  inset-block-start: var(--mc-space-3);
  inset-inline-start: var(--mc-space-3);
  padding: var(--mc-space-3) var(--mc-space-4);
  color: var(--mc-on-cobalt);
  background: var(--mc-cobalt);
  border-radius: var(--mc-radius-control);
  box-shadow: var(--mc-shadow-medium);
  text-decoration: none;
  transform: translateY(calc(-100% - var(--mc-space-6)));
}

body.product-page .skip-link:focus-visible {
  transform: translateY(0);
}

@media (max-width: 26.25rem) {
  body.product-page .mc-route {
    grid-template-columns: repeat(4, minmax(8rem, 1fr));
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    padding-block-end: var(--mc-space-3);
  }

  body.product-page .mc-route::before {
    inset-inline-end: auto;
    inline-size: 32rem;
  }
}

body.product-page .product-breadcrumb {
  display: flex;
  min-block-size: var(--mc-target-minimum);
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mc-space-2);
  margin-block-end: var(--mc-space-6);
  color: var(--mc-ink-muted);
  font-size: var(--mc-text-sm);
}

body.product-page .product-breadcrumb a {
  display: inline-flex;
  min-inline-size: var(--mc-target-comfortable);
  min-block-size: var(--mc-target-comfortable);
  align-items: center;
  color: var(--mc-cobalt);
  text-underline-offset: 0.2em;
}

body.product-page .product-breadcrumb [aria-current="page"] {
  min-inline-size: 0;
  color: var(--mc-ink);
  font-weight: var(--mc-weight-semibold);
  overflow-wrap: anywhere;
}

body.product-page .mc-coordinate-label,
body.product-page .coordinate-label {
  display: inline-flex;
  align-items: baseline;
  gap: var(--mc-space-2);
  color: var(--mc-ink);
  font-family: var(--mc-font-mono);
  font-size: var(--mc-text-sm);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.025em;
}

body.product-page .mc-journey-route,
body.product-page [data-journey-route] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--mc-space-4);
  padding: var(--mc-space-4) 0;
  border-block-end: 1px solid var(--mc-line);
}

body.product-page :where(.mc-journey-route__step,
  [data-journey-route-step]) {
  color: var(--mc-ink-muted);
  font-size: var(--mc-text-sm);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 36rem) {
  body.product-page [data-journey-cta] {
    min-inline-size: 0;
    white-space: normal;
  }

  body.product-page .mc-journey-route,
  body.product-page [data-journey-route] {
    grid-template-columns: auto minmax(0, 1fr);
  }

  body.product-page :where(.mc-journey-route__action,
    [data-journey-route-action]) {
    grid-column: 2;
    justify-self: start;
  }
}