* { box-sizing: border-box; }
html { font-family: var(--font-family); color: var(--color-text); background: var(--color-page); }
body { margin: 0; font-size: var(--font-body); line-height: var(--line-body); font-weight: var(--weight-normal); }
h1, h2, h3, p { margin: 0 0 var(--space-4); overflow-wrap: anywhere; }
h1 { font-size: var(--font-title); line-height: var(--line-title); font-weight: var(--weight-strong); }
h2, h3 { font-size: var(--font-section); line-height: var(--line-section); font-weight: var(--weight-strong); }
a { display: inline-flex; align-items: center; min-height: var(--touch-size); min-width: var(--touch-size);
  color: var(--color-primary); text-underline-offset: var(--space-1); overflow-wrap: anywhere; }
a:hover { color: var(--color-primary-hover); }
a:active { color: var(--color-primary-active); }
button, input, select, textarea { font: inherit; }
button, .button { display: inline-flex; justify-content: center; align-items: center; min-height: var(--control-height);
  min-width: var(--touch-size); padding: var(--space-2) var(--space-4); border: var(--border-width) solid var(--color-primary);
  border-radius: var(--radius-control); background: var(--color-primary); color: var(--color-card);
  font-weight: var(--weight-strong); cursor: pointer; text-decoration: none; overflow-wrap: anywhere; }
button:hover, .button:hover { background: var(--color-primary-hover); color: var(--color-card); }
button:active, .button:active { background: var(--color-primary-active); }
.button-secondary { background: var(--color-card); color: var(--color-primary); }
.button-secondary:hover { background: var(--color-primary-soft); color: var(--color-primary); }
.button-danger { background: var(--color-error); border-color: var(--color-error); }
.button-danger:hover { background: var(--color-error-soft); color: var(--color-error); }
button:disabled, .button[aria-disabled="true"] { background: var(--color-disabled); color: var(--color-disabled-text);
  border-color: var(--color-disabled); cursor: not-allowed; }
:focus-visible { outline: var(--focus-width) solid var(--color-primary); outline-offset: var(--focus-offset); }
input:not([type="hidden"]), select, textarea { display: block; width: 100%; min-width: 0; max-width: 100%;
  min-height: var(--control-height); padding: var(--space-3); border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-control); background: var(--color-card); color: var(--color-text); }
input::placeholder, textarea::placeholder { color: var(--color-muted); }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--color-error); }
textarea { min-height: var(--textarea-height); resize: vertical; }
label { display: grid; gap: var(--space-2); color: var(--color-secondary); }
.checkbox-label { display: flex; align-items: center; min-height: var(--touch-size); gap: var(--space-3); }
.checkbox-label input[type="checkbox"] { flex: 0 0 var(--space-6); width: var(--space-6); min-height: var(--space-6);
  height: var(--space-6); padding: 0; accent-color: var(--color-primary); }
.form { display: flex; flex-direction: column; gap: var(--space-4); margin-block: var(--space-4); min-width: 0; }
.form > label + input, .form > label + select { margin-top: calc(0px - var(--space-2)); }
.form > .field-error { margin-top: calc(0px - var(--space-3)); }
.filter-form { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); margin-block: var(--space-6); }
.filter-form label { flex: 1; min-width: 0; }
fieldset { min-width: 0; margin: 0; padding: var(--space-4); border: var(--border-width) solid var(--color-divider);
  border-radius: var(--radius-control); display: grid; gap: var(--space-4); }
legend { padding-inline: var(--space-2); font-weight: var(--weight-strong); }
.container { width: 100%; max-width: var(--buyer-width); margin-inline: auto; padding: var(--space-4);
  padding-bottom: calc(var(--nav-height) + var(--space-8) + env(safe-area-inset-bottom)); min-width: 0; }
.page-header { min-height: var(--header-height); max-width: var(--buyer-width); margin-inline: auto;
  display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; gap: var(--space-2);
  padding-inline: var(--space-3); background: var(--color-card); border-bottom: var(--border-width) solid var(--color-divider); }
.page-header h1 { grid-column: 2; margin: 0; text-align: center; }
.back-link { display: flex; align-items: center; min-height: var(--touch-size); text-decoration: none; }
.brand { font-weight: var(--weight-strong); color: var(--color-primary); }
.auth-shell .page-header { grid-template-columns: 1fr auto; }
.auth-shell .page-header h1 { text-align: right; }
.auth-shell .container { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.card, .auth-card { background: var(--color-card); border: var(--border-width) solid var(--color-divider);
  border-radius: var(--radius-card); padding: var(--space-4); margin-bottom: var(--space-3); min-width: 0; overflow-wrap: anywhere; }
.card > :last-child, .auth-card > :last-child { margin-bottom: 0; }
.auth-card > a { display: inline-flex; align-items: center; min-height: var(--touch-size); }
.eyebrow, .helper { color: var(--color-secondary); font-size: var(--font-helper); line-height: var(--line-helper); }
.eyebrow { color: var(--color-primary); font-weight: var(--weight-strong); margin-bottom: var(--space-2); }
.field-error { color: var(--color-error); font-size: var(--font-helper); line-height: var(--line-helper); }
.error-summary, .notice { padding: var(--space-4); margin-bottom: var(--space-4); border-radius: var(--radius-control);
  background: var(--color-primary-soft); color: var(--color-primary); border: var(--border-width) solid currentColor; }
.error-summary, .notice-error { background: var(--color-error-soft); color: var(--color-error); }
.error-summary a { color: inherit; display: inline-flex; min-height: var(--touch-size); align-items: center; }
.error-summary ul { padding-left: var(--space-6); margin: 0; }
.notice-success { background: var(--color-success-soft); color: var(--color-success); }
.notice-warning { background: var(--color-warning-soft); color: var(--color-warning); }
.empty-state { text-align: center; color: var(--color-secondary); padding: var(--space-8) var(--space-4);
  border: var(--border-width) dashed var(--color-border); border-radius: var(--radius-card); }
.status-tag { display: inline-flex; align-items: center; min-height: var(--tag-height); padding: 0 var(--space-2);
  border-radius: var(--radius-control); font-size: var(--font-tag); line-height: var(--line-helper);
  color: var(--color-primary); background: var(--color-primary-soft); }
.price { color: var(--color-price); font-size: var(--font-price); line-height: var(--line-title); font-weight: var(--weight-strong); }
.product-image { display: block; max-width: 100%; max-height: var(--image-max-height); object-fit: contain; margin-bottom: var(--space-3); }
output, dd, code { overflow-wrap: anywhere; }
dl { margin: 0 0 var(--space-6); }
dt { color: var(--color-secondary); margin-top: var(--space-3); }
dd { margin: var(--space-1) 0 0; }
.secret-output { display: block; padding: var(--space-4); background: var(--color-primary-soft); font-weight: var(--weight-strong); }
nav:not(.buyer-nav):not(.admin-nav) { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
nav a, summary { min-height: var(--touch-size); display: inline-flex; align-items: center; }
summary { cursor: pointer; color: var(--color-primary); padding: var(--space-2); }
.buyer-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--buyer-width);
  display: grid; grid-template-columns: repeat(3, 1fr); min-height: var(--nav-height); z-index: 2;
  padding-bottom: env(safe-area-inset-bottom); border-top: var(--border-width) solid var(--color-divider); background: var(--color-card); }
.buyer-nav > a, .buyer-nav summary { display: flex; justify-content: center; align-items: center; min-height: var(--nav-height);
  font-size: var(--font-nav); line-height: var(--line-nav); text-decoration: none; }
.account-panel { background: var(--color-card); border: var(--border-width) solid var(--color-divider);
  border-radius: var(--radius-card); padding: var(--space-3); box-shadow: var(--shadow-panel); }
.buyer-nav .account-panel { position: absolute; bottom: 100%; right: 0; width: 100%; }
.account-panel a { display: flex; min-height: var(--touch-size); align-items: center; }
.account-panel .form { margin-bottom: 0; }
.admin-nav { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4);
  background: var(--color-card); border: var(--border-width) solid var(--color-divider); margin-bottom: var(--space-6); }
.admin-links { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.admin-nav a { padding: var(--space-2); text-decoration: none; }
.admin-nav a:hover { background: var(--color-primary-soft); border-radius: var(--radius-control); }
.table-scroll { max-width: 100%; overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: var(--font-helper); line-height: var(--line-table); }
th, td { padding: var(--space-3); border-bottom: var(--border-width) solid var(--color-divider); text-align: left; overflow-wrap: anywhere; }
th { height: var(--table-head-height); color: var(--color-secondary); background: var(--color-primary-soft); }
td { height: var(--table-row-height); }
.skip-link { position: fixed; top: 0; left: 0; transform: translateY(-100%); z-index: 3; padding: var(--space-3); background: var(--color-card); }
.skip-link:focus { transform: none; }
/* CSS custom properties cannot be used in media query conditions. */
@media (min-width: 1024px) {
  .admin-shell { padding-left: var(--sidebar-width); }
  .admin-shell .page-header { max-width: none; min-height: var(--admin-header-height); padding-inline: var(--space-6); }
  .admin-shell h1 { font-size: var(--font-desktop-title); line-height: var(--line-desktop-title); }
  .admin-shell h2 { font-size: var(--font-desktop-section); line-height: var(--line-desktop-section); }
  .admin-shell .container { max-width: none; padding: var(--space-6); }
  .admin-nav { position: fixed; top: 0; bottom: 0; left: 0; width: var(--sidebar-width); margin: 0; overflow-y: auto; z-index: 1; }
  .admin-links { flex-direction: column; }
  .admin-shell .auth-card { max-width: var(--buyer-width); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media (min-width: 1024px) {
  .admin-shell { font-size: var(--font-desktop-body); line-height: var(--line-table); }
  .admin-shell .helper { font-size: var(--font-desktop-helper); }
  button, .button, input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]), select {
    min-height: var(--desktop-control-height); font-size: var(--font-desktop-body); line-height: var(--desktop-control-line);
    padding: var(--desktop-control-padding-y) var(--desktop-control-padding-x);
  }
  td .button, td button { min-height: var(--table-action-height); padding-block: var(--table-action-padding-y); }
}
input[type="file"]::file-selector-button { font: inherit; line-height: inherit; border: 0;
  padding: 0 var(--space-2); color: var(--color-primary); background: var(--color-primary-soft); }