/* System page components (TODO 00001.5.16), DESIGN-GUIDE.md section 8 "Actions and forms": primary and outline
   buttons, link with arrow, input/select/textarea with label above, helper and error states, notices. Used by the
   About, Contact and 404 patterns; the Woo cart, checkout and account styling lives in the *-body pattern CSS. */
.p-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--wp--preset--spacing--30);
  min-height: var(--wp--custom--control); padding: 14px var(--wp--preset--spacing--60); box-sizing: border-box;
  border: 1px solid transparent; border-radius: var(--wp--custom--radius--default);
  font-family: inherit; font-size: var(--wp--preset--font-size--button); font-weight: var(--wp--custom--font-weight--button);
  letter-spacing: var(--wp--custom--letter-spacing--button); line-height: 1; text-decoration: none; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.p-btn--primary { background: var(--wp--preset--color--orange); color: var(--wp--preset--color--navy); }
.p-btn--outline { background: transparent; color: var(--wp--preset--color--navy); border-color: var(--wp--preset--color--navy); }
.p-btn:focus-visible { outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--orange); outline-offset: var(--wp--custom--focus--offset); }
.p-btn:active { transform: scale(.98); }
.p-btn:disabled, .p-btn[aria-disabled="true"] {
  background: var(--wp--preset--color--mist); color: var(--wp--preset--color--slate); border-color: var(--wp--preset--color--line); cursor: default;
}
.p-btn__spinner { display: none; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: p-spin .8s linear infinite; }
.p-btn.is-loading .p-btn__spinner { display: inline-block; }
@keyframes p-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .p-btn__spinner { animation-duration: 2.4s; } }
@media (hover: hover) and (pointer: fine) {
  .p-btn--primary:not(:disabled):hover { box-shadow: inset 0 0 0 100vmax var(--wp--custom--alpha--overlay-navy); }
  .p-btn--outline:not(:disabled):hover { background: var(--wp--preset--color--mist); }
}

.p-link-arrow {
  display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--30); min-height: var(--wp--custom--touch);
  color: var(--wp--preset--color--navy); font-size: var(--wp--preset--font-size--body); font-weight: 600; text-decoration: none;
}
.p-link-arrow .p-icon { transition: transform .15s ease; }
.p-link-arrow:focus-visible { outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--orange); outline-offset: var(--wp--custom--focus--offset); }
.p-link-arrow:active { color: var(--wp--preset--color--ink); }
@media (hover: hover) and (pointer: fine) { .p-link-arrow:hover .p-icon { transform: translateX(3px); } }

/* Fields: label above in 14/600 ink, 48px control with a 1px slate border, helper below in 14 slate. */
.p-field { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); min-width: 0; }
.p-field__label { color: var(--wp--preset--color--ink); font-size: var(--wp--preset--font-size--small); font-weight: 600; line-height: 1.5; }
.p-field__opt { color: var(--wp--preset--color--slate); font-weight: 400; }
.p-field__input {
  width: 100%; min-height: var(--wp--custom--control); box-sizing: border-box; margin: 0;
  padding: 0 var(--wp--preset--spacing--50); background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--slate); border-radius: var(--wp--custom--radius--default);
  color: var(--wp--preset--color--ink); font-family: inherit; font-size: var(--wp--preset--font-size--body); line-height: 1.5;
}
.p-field__input--area { min-height: 160px; padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50); resize: vertical; }
.p-field__select { position: relative; }
.p-field__select select { appearance: none; padding-right: var(--wp--preset--spacing--90); cursor: pointer; }
.p-field__select .p-icon { position: absolute; right: var(--wp--preset--spacing--50); top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--wp--preset--color--ink); }
.p-field__input:focus { outline: none; }
.p-field__input:focus-visible { outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--orange); outline-offset: var(--wp--custom--focus--offset); }
.p-field__input:disabled { background: var(--wp--preset--color--line); color: var(--wp--preset--color--slate); }
.p-field__help { margin: 0; color: var(--wp--preset--color--slate); font-size: var(--wp--preset--font-size--small); line-height: 1.5; }
.p-field__error {
  display: flex; align-items: flex-start; gap: var(--wp--preset--spacing--30); margin: 0;
  color: var(--wp--preset--color--alert); font-size: var(--wp--preset--font-size--small); line-height: 1.5;
}
.p-field__error[hidden] { display: none; }
.p-field__error .p-icon { flex: none; margin-top: 3px; }
.p-field.has-error .p-field__input { border: 2px solid var(--wp--preset--color--alert); }
@media (hover: hover) and (pointer: fine) {
  .p-field__input:not(:disabled):hover { border-color: var(--wp--preset--color--ink); }
  .p-field.has-error .p-field__input:hover { border-color: var(--wp--preset--color--alert); }
}

/* Notice: mist panel, 1px line edge, 4px left rule (navy for info and success, alert for errors). */
.p-notice {
  display: flex; align-items: flex-start; gap: var(--wp--preset--spacing--40);
  padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
  background: var(--wp--preset--color--mist); border: 1px solid var(--wp--preset--color--line);
  border-left: 4px solid var(--wp--preset--color--navy); border-radius: var(--wp--custom--radius--default);
  color: var(--wp--preset--color--ink); font-size: var(--wp--preset--font-size--body); line-height: 1.6;
}
.p-notice[hidden] { display: none; }
.p-notice > .p-icon { flex: none; margin-top: 3px; color: var(--wp--preset--color--navy); }
.p-notice p { margin: 0; }
.p-notice__title { font-weight: 600; color: var(--wp--preset--color--navy); }
.p-notice--error { border-left-color: var(--wp--preset--color--alert); }
.p-notice--error > .p-icon, .p-notice--error .p-notice__title { color: var(--wp--preset--color--alert); }
.p-notice:focus { outline: none; }
.p-notice:focus-visible { outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--navy); outline-offset: var(--wp--custom--focus--offset); }