/* ---- Keyboard accessibility (§30) ---------------------------------------- *
 * Every interactive element must show a clearly visible focus ring. The ring is
 * drawn with :focus-visible so it appears for keyboard users without adding
 * noise for pointer users.
 * -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #1a4fd6;
  outline-offset: 2px;
  border-radius: 3px;
}
.mk-card:focus-within { outline: 2px solid #1a4fd6; outline-offset: 2px; }
.mk-card-thumb { display: block; }
.mk-card-thumb img { display: block; width: 100%; height: auto; border-radius: 8px 8px 0 0; }
.notice.error:focus, [role="alert"]:focus { outline: 3px solid #b3261e; outline-offset: 2px; }

/* ---- Media never overflows the market layout (§26) ----------------------- *
 * Portfolio and showcase media inherited from the platform can be wider than a
 * phone viewport. market.css is loaded only on market pages, so constraining
 * every image, picture and video here is safe and prevents horizontal scroll.
 * -------------------------------------------------------------------------- */
img, picture, video, iframe, svg { max-width: 100%; }
img { height: auto; }
.mk-gallery img { width: 100%; }