.wp-button {
  align-items: center;
  border: 0.125rem solid transparent;
  border-radius: var(--wp-radius-sm);
  cursor: pointer;
  display: inline-flex;
  font-weight: 700;
  justify-content: center;
  min-block-size: 2.75rem;
  min-inline-size: 2.75rem;
  padding: var(--wp-space-2) var(--wp-space-4);
  text-decoration: none;
  transition: background-color var(--wp-motion-fast), border-color var(--wp-motion-fast), color var(--wp-motion-fast);
}

.wp-button--primary {
  background: var(--wp-color-accent);
  color: var(--wp-color-on-accent);
}

.wp-button--primary:hover {
  background: var(--wp-color-accent-strong);
}

.wp-button--secondary {
  background: var(--wp-color-surface);
  border-color: var(--wp-color-brand);
  color: var(--wp-color-brand);
}

.wp-button--secondary:hover {
  background: var(--wp-color-surface-subtle);
}

.wp-button--danger {
  background: var(--wp-color-danger);
  color: #ffffff;
}

.wp-button--danger:hover {
  background: #852535;
}

.wp-button:disabled {
  background: var(--wp-color-surface-subtle);
  border-color: var(--wp-color-border);
  color: var(--wp-color-muted);
  cursor: not-allowed;
  opacity: 1;
}

.wp-link {
  align-items: center;
  border-radius: var(--wp-radius-sm);
  display: inline-flex;
  font-weight: 700;
  justify-content: center;
  min-block-size: 2.75rem;
  min-inline-size: 2.75rem;
  padding: var(--wp-space-2) var(--wp-space-1);
  text-align: center;
  text-decoration-thickness: 0.125rem;
  text-underline-offset: 0.2em;
}

.wp-link--subtle {
  color: var(--wp-color-muted);
  font-weight: 600;
}

.wp-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp-space-1) var(--wp-space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.wp-nav__link {
  border-radius: var(--wp-radius-sm);
  color: var(--wp-color-ink);
  display: inline-flex;
  min-block-size: 2.75rem;
  padding: var(--wp-space-2);
  text-decoration: none;
}

.wp-nav__link:hover,
.wp-nav__link[aria-current="page"] {
  background: var(--wp-color-surface-subtle);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.wp-field {
  display: grid;
  gap: var(--wp-space-2);
}

.wp-field__label {
  font-weight: 700;
}

.wp-field__control {
  background: var(--wp-color-surface);
  border: 0.125rem solid var(--wp-color-border);
  border-radius: var(--wp-radius-sm);
  color: var(--wp-color-ink);
  min-block-size: 2.75rem;
  padding: var(--wp-space-2) var(--wp-space-3);
  width: 100%;
}

.wp-field__control:hover {
  border-color: var(--wp-color-muted);
}

.wp-field__control:focus-visible {
  border-color: var(--wp-color-focus);
}

.wp-field__hint,
.wp-field__error {
  font-size: var(--wp-font-size-sm);
  margin: 0;
}

.wp-field__hint {
  color: var(--wp-color-muted);
}

.wp-field__error {
  color: var(--wp-color-danger-strong);
  font-weight: 700;
}

.wp-field--error .wp-field__control {
  border-color: var(--wp-color-danger);
}

.wp-alert {
  align-items: start;
  border: 0.0625rem solid;
  border-left-width: 0.35rem;
  border-radius: var(--wp-radius-md);
  display: grid;
  gap: var(--wp-space-3);
  grid-template-columns: auto 1fr;
  padding: var(--wp-space-4);
}

.wp-alert p,
.wp-alert__title {
  margin: 0;
}

.wp-alert__mark,
.wp-badge__mark {
  background: currentColor;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
  height: 0.75rem;
  margin-top: 0.35rem;
  width: 0.75rem;
}

.wp-alert--info { background: var(--wp-color-info-bg); border-color: var(--wp-color-info); color: var(--wp-color-info); }
.wp-alert--success { background: var(--wp-color-success-bg); border-color: var(--wp-color-success); color: var(--wp-color-success); }
.wp-alert--warning { background: var(--wp-color-warning-bg); border-color: var(--wp-color-warning); color: var(--wp-color-warning); }
.wp-alert--danger { background: var(--wp-color-danger-bg); border-color: var(--wp-color-danger); color: var(--wp-color-danger-strong); }

.wp-badge {
  align-items: center;
  border: 0.0625rem solid currentColor;
  border-radius: 999rem;
  display: inline-flex;
  font-size: var(--wp-font-size-sm);
  font-weight: 700;
  gap: var(--wp-space-2);
  padding: var(--wp-space-1) var(--wp-space-3);
}

.wp-badge__mark { height: 0.55rem; margin: 0; width: 0.55rem; }
.wp-badge--success { background: var(--wp-color-success-bg); color: var(--wp-color-success); }
.wp-badge--warning { background: var(--wp-color-warning-bg); color: var(--wp-color-warning); }
.wp-badge--danger { background: var(--wp-color-danger-bg); color: var(--wp-color-danger-strong); }
.wp-badge--info { background: var(--wp-color-info-bg); color: var(--wp-color-info); }
.wp-badge--neutral { background: var(--wp-color-surface-subtle); color: var(--wp-color-ink); }

.wp-table-region {
  border: 0.0625rem solid var(--wp-color-border);
  border-radius: var(--wp-radius-md);
  overflow-x: auto;
}

.wp-table {
  border-collapse: collapse;
  min-inline-size: 42rem;
  width: 100%;
}

.wp-table caption {
  font-size: var(--wp-font-size-lg);
  font-weight: 700;
  padding: var(--wp-space-4);
  text-align: left;
}

.wp-table th,
.wp-table td {
  border-top: 0.0625rem solid var(--wp-color-border);
  overflow-wrap: anywhere;
  padding: var(--wp-space-3) var(--wp-space-4);
  text-align: left;
  vertical-align: top;
}

.wp-table th {
  background: var(--wp-color-surface-subtle);
}

.wp-state {
  background: var(--wp-color-surface);
  border: 0.0625rem solid var(--wp-color-border);
  border-radius: var(--wp-radius-md);
  display: grid;
  gap: var(--wp-space-3);
  min-block-size: 0;
  padding: var(--wp-space-5);
}

.wp-state h3,
.wp-state p {
  margin: 0;
}

.wp-state__mark {
  border: 0.2rem solid var(--wp-color-border);
  border-radius: 50%;
  display: block;
  height: 2.25rem;
  width: 2.25rem;
}

.wp-state--loading .wp-state__mark {
  animation: wp-spin 1s linear infinite;
  border-right-color: var(--wp-color-brand);
}

.wp-state--error .wp-state__mark {
  border-color: var(--wp-color-danger);
  border-radius: var(--wp-radius-sm);
}

@keyframes wp-spin { to { transform: rotate(360deg); } }

.wp-dialog {
  background: var(--wp-color-surface);
  border: 0;
  border-radius: var(--wp-radius-lg);
  box-shadow: var(--wp-shadow-md);
  color: var(--wp-color-ink);
  max-inline-size: min(32rem, calc(100% - 2rem));
  padding: var(--wp-space-6);
}

.wp-dialog::backdrop {
  background: rgb(10 21 15 / 68%);
}

.wp-dialog h3 {
  margin-block-start: 0;
}

.wp-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp-space-3);
  justify-content: end;
  margin-block-start: var(--wp-space-5);
}

.wp-dialog--static {
  box-shadow: var(--wp-shadow-sm);
  margin: 0;
  position: static;
  width: 100%;
}

/* Native controls on product pages share the same accessible treatment. */
.wp-gallery :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]), select, textarea) {
  background: var(--wp-color-surface);
  border: 1px solid var(--wp-color-border);
  border-radius: var(--wp-radius-sm);
  color: var(--wp-color-ink);
  font: inherit;
  max-width: 100%;
  min-height: 2.75rem;
  padding: .65rem .85rem;
}
.wp-gallery :is(select, textarea) { width: 100%; }
.wp-form-grid { display: grid; gap: 1rem; max-width: 44rem; }
.wp-form-grid label { display: grid; gap: .5rem; }
.wp-table-wrap { max-width: 100%; overflow-x: auto; }
.wp-table-region { max-width: 100%; }
.wp-gallery table { border-collapse: collapse; width: 100%; }
.wp-gallery :is(th, td) { padding: .9rem 1rem; text-align: left; border-bottom: 1px solid var(--wp-color-surface-subtle); }
.wp-gallery th { position: relative; background: var(--wp-color-surface-subtle); }
.wp-gallery caption { text-align: left; font-weight: 700; padding: 1rem; }
.wp-gallery :is(pre, code) { overflow-wrap: anywhere; white-space: pre-wrap; }
.wp-gallery :is(p, li, dd, h1, h2, h3) { overflow-wrap: anywhere; }
.wp-state + .wp-state { margin-top: 1rem; }
.wp-state--empty, .wp-state--loading, .wp-state--error { min-block-size: 10rem; }

.wp-gallery fieldset {
  min-inline-size: 0;
  border: 1px solid var(--wp-color-border);
  border-radius: var(--wp-radius-md);
  padding: 1rem;
}
.wp-gallery legend { padding-inline: .25rem; }
.wp-check {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-block-size: 2.75rem;
  cursor: pointer;
}
.wp-check input { flex: none; inline-size: 1.125rem; block-size: 1.125rem; accent-color: var(--wp-color-brand); }