/* Personalization fields, shared by the product page panel and the
   after-checkout design details form (inc/products/personalization*.php).
   Loaded on product pages and the order surfaces that show the form. */

.pdp-pz-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-s);
}

.pz-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  min-width: 0;
}

.pz-wide {
  grid-column: 1 / -1;
}

.pz-field label {
  font-size: var(--text-small);
  font-weight: var(--weight-strong);
  color: var(--ink);
}

.pz-req {
  color: var(--brand-accent);
}

.pz-field small {
  font-size: var(--text-xs);
  color: var(--ink-muted);
}

.pz-field input[type="file"] {
  padding-block: var(--space-2xs);
  cursor: pointer;
}

.pz-field input[type="file"]::file-selector-button {
  margin-inline-end: var(--space-xs);
  padding: var(--space-3xs) var(--space-xs);
  border: var(--border-thin) solid var(--brand-secondary);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--brand-secondary);
  font: inherit;
  font-weight: var(--weight-strong);
  cursor: pointer;
}

.pz-field input:user-invalid,
.pz-field select:user-invalid {
  border-color: var(--brand-danger);
}

@media (max-width: 560px) {
  .pdp-pz-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}