:root {
  color-scheme: light;
  --paper: #eeeeee;
  --surface: #ffffff;
  --ink: #202020;
  --muted: #626262;
  --line: #d5d5d5;
  --subtle: #e4e4e4;
  --focus: #245dba;
  --success: #21663e;
  --success-surface: #ecf7ef;
  --warning: #76522a;
  --warning-surface: #fcf3e7;
  --danger: #b72b2b;
  --danger-surface: #fceeee;
  --radius: 6px;
  --control-height: 44px;
  --font-ui: "Avenir Next", Avenir, "Segoe UI", sans-serif;
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 8px; left: 16px; z-index: 100; padding: 12px 16px; color: var(--ink); background: var(--surface); transform: translateY(-160%); }
.skip-link:focus { transform: none; outline: 2px solid var(--focus); }
::selection { color: var(--surface); background: var(--ink); }
button:disabled { cursor: not-allowed; }
[aria-busy="true"] { cursor: progress; }

.product-thumbnail { position: relative; display: block; flex: 0 0 56px; width: 56px; height: 56px; overflow: hidden; border-radius: 4px; background: #f7f7f7; }
.product-thumbnail img { display: block; width: 100%; height: 100%; object-fit: contain; }
.product-thumbnail.is-empty::after { content: attr(data-image-fallback); position: absolute; inset: 0; display: grid; place-items: center; padding: 4px; color: var(--muted); font-size: 10px; line-height: 1.3; text-align: center; overflow-wrap: anywhere; }