/* =====================================================================
   ZippKart Phase 5 — performance, accessibility and quality layer
   Loaded after the existing storefront/admin styles so it can improve
   usability without replacing the current visual identity.
   ===================================================================== */

:root {
  --focus-ring: 0 0 0 3px rgba(30,111,235,.28), 0 0 0 1px #1e6feb;
}

html { scroll-padding-top: 92px; }
body { overflow-x: clip; }

/* Keyboard users can jump over the repeated navigation. */
.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100000;
  transform: translateY(-160%);
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff;
  color: #0e1e38;
  border: 2px solid #1e6feb;
  box-shadow: 0 10px 28px rgba(14,30,56,.22);
  font-weight: 800;
  text-decoration: none;
  transition: transform .16s ease;
}
.skip-link:focus { transform: translateY(0); }

/* A consistent, high-visibility keyboard focus indicator. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid #1e6feb;
  outline-offset: 3px;
  box-shadow: var(--focus-ring);
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}

/* Utility for accessible labels that remain available to 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;
}

/* Make form errors easier to find and understand. */
:where(input, select, textarea)[aria-invalid="true"] {
  border-color: #c62828 !important;
  box-shadow: 0 0 0 3px rgba(198,40,40,.12) !important;
}
.alert[role="alert"] { scroll-margin-top: 110px; }

/* Prevent decorative images from creating baselines or escaping cards. */
img { max-width: 100%; }
.pthumb img,
.pdx-stage img,
.rp-product-card img { background-color: #f5f7fa; }

/* Stronger touch targets without altering desktop proportions. */
@media (pointer: coarse) {
  :where(button, .btn, .icon-btn, .nav-hamburger, .pwish, .pdx-gnav) {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Admin system-health page. */
.health-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0 22px;
}
.health-summary__item,
.health-card {
  background: #fff;
  border: 1px solid var(--border, #e6eaf2);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(14,30,56,.06);
}
.health-summary__item { padding: 18px; }
.health-summary__item strong { display: block; font-size: 27px; line-height: 1; margin-bottom: 7px; }
.health-summary__item span { color: var(--text-soft, #617087); font-size: 13px; }
.health-card { overflow: hidden; margin-bottom: 18px; }
.health-card__head { padding: 16px 18px; border-bottom: 1px solid var(--border, #e6eaf2); }
.health-card__head h2 { margin: 0; font-size: 17px; }
.health-list { list-style: none; margin: 0; padding: 0; }
.health-row {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(220px, 1.5fr) auto;
  gap: 16px;
  align-items: center;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border, #e6eaf2);
}
.health-row:last-child { border-bottom: 0; }
.health-row__name { font-weight: 750; color: var(--ink, #0e1e38); }
.health-row__detail { color: var(--text-soft, #617087); font-size: 13px; overflow-wrap: anywhere; }
.health-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.health-badge--pass { color: #0b6b3a; background: #e8f8ef; }
.health-badge--warn { color: #8a4d00; background: #fff2d9; }
.health-badge--fail { color: #a11d2c; background: #fde9ec; }
.health-note { padding: 14px 16px; border-radius: 13px; background: #eef5ff; color: #24466f; line-height: 1.65; }

/* Friendly error page. */
.error-page { padding: clamp(50px, 9vw, 110px) 0; }
.error-page__card {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(28px, 6vw, 58px);
  text-align: center;
  background: #fff;
  border: 1px solid var(--border, #e6eaf2);
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(14,30,56,.10);
}
.error-page__code { font: 800 clamp(58px, 12vw, 108px)/.9 var(--font-display, system-ui); color: #1e6feb; letter-spacing: -.07em; }
.error-page__card h1 { margin: 18px 0 10px; }
.error-page__card p { max-width: 560px; margin: 0 auto 24px; color: var(--text-soft, #617087); line-height: 1.7; }
.error-page__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.error-page__search { display: flex; gap: 8px; max-width: 480px; margin: 24px auto 0; }
.error-page__search input { flex: 1 1 auto; min-width: 0; }

@media (max-width: 900px) {
  .health-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .health-row { grid-template-columns: 1fr auto; }
  .health-row__detail { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 520px) {
  html { scroll-padding-top: 72px; }
  .health-summary { grid-template-columns: 1fr; }
  .health-row { padding: 13px 14px; }
  .error-page__search { flex-direction: column; }
}

/* Respect operating-system accessibility preferences. */
@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  .health-badge,
  .pbadge,
  .pdx-flag { border: 1px solid currentColor; }
}

@media print {
  header, .site-footer, #chat-bubble, #chat-panel, .cmp-tray, .pdx-buybar, .skip-link { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  a { color: #000 !important; text-decoration: underline; }
}