/* ─── MR Commerce — Utilities ────────────────────────────────
   Layer 6: Single-purpose helper classes. Highest specificity layer.
   Rule: Only accessibility and display utilities here.
   Rule: No layout utilities (no .flex, .grid — use tokens in components).
   Rule: !important is allowed ONLY in this file.
   ─────────────────────────────────────────────────────────── */

/* Screen reader only — visually hidden but announced by screen readers */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Visually hidden but focusable (skip links) */
.sr-only-focusable:focus,
.sr-only-focusable:focus-within {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: var(--mr-space-sm) var(--mr-space-lg) !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

/* Skip to content link */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--mr-space-lg);
  z-index: var(--mr-z-tooltip);
  background: var(--mr-primary);
  color: #fff;
  padding: var(--mr-space-sm) var(--mr-space-lg);
  border-radius: var(--mr-radius-sm);
  font-size: var(--mr-font-body);
  font-weight: var(--mr-weight-medium);
  transition: top var(--mr-transition);
}

.skip-link:focus {
  top: var(--mr-space-lg);
}

/* Focus visible — global focus ring style */
:focus-visible {
  outline: 2px solid var(--mr-primary);
  outline-offset: 2px;
}

/* Remove outline for mouse users only */
:focus:not(:focus-visible) {
  outline: none;
}