/* Page-specific layout; cards, inputs, buttons, checkboxes and dialogs are shared. */
#pe-form { display: grid; gap: 20px; }
.pe-section-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.pe-section-heading h2 { font-size: 18px; line-height: 1.4; margin-bottom: 6px; }
.pe-required { color: var(--blue); }
.pe-back, .pe-add-wholesale { color: var(--blue); font-size: 14px; }
.pe-count { display: inline-block; color: var(--muted); font-size: 14px; font-weight: 400; margin-left: 6px; }
.product-editor .muted, .pe-feedback .muted { font-size: 13px; line-height: 1.5; }
.product-editor .form-input { min-width: 0; }
.pe-counted-input { position: relative; }
.pe-counted-input .form-input { width: 100%; padding-right: 108px; }
.pe-character-count { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pe-counted-input .pe-character-count { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.pe-character-count.is-over-limit { color: #b50000; }
.pe-editor { border-radius: 16px; background: var(--inner); overflow: hidden; }
.pe-editor:has([aria-invalid="true"]) { box-shadow: inset 0 0 0 1px #b50000; }
.pe-editor-footer { display: flex; justify-content: flex-end; padding: 8px 20px 12px; }
.pe-editor:focus-within { outline: 2px solid var(--blue); outline-offset: 3px; }
.pe-editor-toolbar { display: flex; gap: 4px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--gray); }
.pe-editor-toolbar button { background: transparent; border: 0; border-radius: 8px; width: 36px; height: 34px; display: inline-flex; align-items: center; justify-content: center; color: var(--text); }
.pe-editor-toolbar button:hover, .pe-editor-toolbar button[aria-pressed="true"] { color: var(--blue); background: var(--white); }
.pe-toolbar-divider { width: 1px; height: 20px; background: #d5d5d5; margin: 0 6px; }
.pe-editor-content { padding: 16px 20px; min-height: 168px; max-height: 290px; overflow: auto; outline: none; font-size: 14px; overflow-wrap: anywhere; }
.pe-editor-content:empty::before { content: attr(data-placeholder); color: var(--muted); pointer-events: none; }
.pe-editor-content p + p, .pe-editor-content p + ul, .pe-editor-content p + ol { margin-top: 8px; }
.pe-editor-content ul, .pe-editor-content ol { padding-left: 24px; margin-block: 8px; }
.pe-photo-drop { display: flex; flex-wrap: wrap; gap: 12px; border-radius: 14px; }
.pe-photo-drop.is-over { outline: 2px dashed var(--blue); outline-offset: 8px; }
.pe-photos { display: contents; }
.pe-photo, .pe-upload { width: 156px; height: 178px; border: 1px solid var(--gray); border-radius: 14px; }
.pe-photo { position: relative; background: white; cursor: grab; overflow: hidden; }
.pe-photo.is-dragging { opacity: .45; }
.pe-photo.is-target { border: 2px solid var(--blue); }
.pe-photo img { width: 100%; height: 100%; object-fit: contain; padding: 22px 12px; user-select: none; }
.pe-main-badge { position: absolute; top: 8px; left: 8px; border-radius: 20px; padding: 4px 8px; font-size: 10px; background: var(--blue); color: white; pointer-events: none; }
.pe-photo-delete { position: absolute; right: 6px; top: 6px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: white; color: var(--text); display: grid; place-items: center; }
.pe-photo-delete .ui-icon { width: 18px; height: 18px; }
.pe-photo-actions { position: absolute; bottom: 6px; left: 6px; right: 6px; display: grid; gap: 4px; }
.pe-make-main { width: 100%; border: 0; border-radius: 16px; min-height: 28px; background: var(--blue); color: white; font-size: 11px; }
.pe-photo-move { display: flex; justify-content: space-between; }
.pe-photo-move button { width: 28px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 8px; background: var(--inner); color: var(--blue); }
.pe-photo-move .ui-icon { width: 16px; height: 16px; }
.pe-photo-delete, .pe-photo-actions { opacity: 0; transition: opacity .15s; }
.pe-photo:hover .pe-photo-delete, .pe-photo:hover .pe-photo-actions, .pe-photo:focus-within .pe-photo-delete, .pe-photo:focus-within .pe-photo-actions { opacity: 1; }
.pe-upload { border-style: dashed; background: var(--bg); color: var(--blue); display: flex; flex-direction: column; gap: 7px; justify-content: center; align-items: center; font-size: 13px; padding: 10px; }
.pe-upload:hover { border-color: var(--blue); }
.pe-photo-drop:has(.pe-photos:empty) .pe-upload { width: 100%; height: 160px; }
.pe-commerce-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 36px; }
.pe-pricing, .pe-availability, .pe-wholesale { display: grid; align-content: start; gap: 16px; }
.pe-availability { border-left: 1px solid var(--line); padding-left: 30px; gap: 24px; }
.pe-base-price { display: flex; align-items: center; gap: 14px; }
.pe-base-price input { max-width: 230px; }
.pe-base-price > span { font-size: 14px; white-space: nowrap; }
.pe-wholesale-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 32px; gap: 8px; align-items: end; }
.pe-wholesale-row .form-input { padding-inline: 16px; }
.pe-delete { width: 32px; height: 44px; border: 0; background: transparent; color: var(--muted); padding: 4px; display: grid; place-items: center; border-radius: 16px; }
.pe-delete:hover, .pe-photo-delete:hover { color: #b50000; background: var(--bg); }
.pe-delete .ui-icon { width: 18px; height: 18px; }
.pe-tax-stock { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pe-check-label { display: flex; align-items: center; gap: 10px; min-height: 28px; cursor: pointer; }
.pe-add-wholesale { justify-self: start; text-align: left; }
.pe-add-wholesale:disabled { color: var(--muted); cursor: default; }
.pe-request { font-size: 13px; flex-shrink: 0; padding-inline: 16px; }
.pe-request .ui-icon { width: 18px; height: 18px; }
.pe-picker-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.pe-picker { min-width: 0; }
.pe-picker .search-field { background: var(--inner); }
.pe-picker .search-field input { font-size: 14px; }
.pe-picker .search-field:focus-within { outline: 2px solid var(--blue); outline-offset: 3px; }
.pe-tree { max-height: 338px; overflow-y: auto; padding: 12px 8px 6px 0; scrollbar-width: thin; }
.pe-tree ul { list-style: none; padding: 0; margin: 0; }
.pe-tree ul ul { margin-left: 18px; border-left: 1px solid var(--line); padding-left: 8px; }
.pe-tree-row { display: flex; align-items: center; min-height: 38px; gap: 5px; border-radius: 8px; }
.pe-tree-row:hover { background: var(--bg); }
.pe-tree-row label { display: flex; align-items: center; gap: 9px; font-size: 13px; padding-block: 8px; cursor: pointer; min-width: 0; }
.pe-tree-toggle, .pe-tree-spacer { width: 24px; min-width: 24px; height: 30px; }
.pe-tree-toggle { display: grid; place-items: center; padding: 2px; border: 0; background: transparent; color: var(--muted); }
.pe-tree-toggle .ui-icon { width: 16px; height: 16px; transition: transform .15s; }
.pe-tree-toggle[aria-expanded="true"] .ui-icon { transform: rotate(90deg); }
.pe-category-selection h3, .pe-selected-properties h3 { font-size: 14px; font-weight: 700; margin-bottom: 16px; }
.pe-category-selection, .pe-selected-properties { min-width: 0; }
.pe-category-chip { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: 12px; background: var(--bg); padding: 10px 12px; margin-bottom: 8px; font-size: 13px; }
.pe-category-chip small { display: block; color: var(--muted); font-size: 11px; margin-bottom: 3px; }
.pe-category-chip .pe-delete { height: 30px; flex-shrink: 0; }
.pe-selection-empty { color: var(--muted); font-size: 13px; padding: 24px 20px; border: 1px dashed var(--gray); border-radius: 14px; text-align: center; line-height: 1.6; }
.pe-property-total { padding: 12px 0 8px; }
.pe-property-list { max-height: 450px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 8px; }
.pe-property-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pe-property-name { font-size: 13px; overflow-wrap: anywhere; }
.pe-property-add { border: 0; border-radius: 20px; color: var(--blue); background: var(--bg); padding: 7px 12px; font-size: 12px; white-space: nowrap; }
.pe-property-add:hover { background: var(--inner); }
.pe-property-add:disabled { color: var(--muted); cursor: default; }
.pe-selected-property { display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 6px; align-items: end; margin-bottom: 14px; }
#pe-property-selected { max-height: 514px; overflow-y: auto; padding: 4px 8px 4px 4px; scrollbar-width: thin; }
.pe-no-results { padding: 20px 0; }
.pe-save-area { display: grid; justify-items: center; text-align: center; gap: 12px; padding-top: 4px; }
.pe-save-actions { display: flex; justify-content: center; gap: 12px; }
#pe-save { min-width: 152px; }
.pe-feedback-form { display: grid; gap: 20px; }
.pe-feedback-form > .btn { justify-self: center; }
.pe-draft-banner { background: white; border-radius: 14px; padding: 16px 20px; font-size: 14px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pe-draft-banner button { color: var(--blue); }
.product-editor button:disabled { opacity: .6; }
@media (hover: none) { .pe-photo-delete, .pe-photo-actions { opacity: 1; } }
@media (max-width: 1199px) {
  .pe-section-heading { flex-wrap: wrap; }
  .pe-commerce-grid { gap: 22px; }
  .pe-availability { padding-left: 20px; }
  .pe-picker-grid { gap: 20px; }
}
@media (max-width: 767px) {
  .pe-commerce-grid, .pe-picker-grid { grid-template-columns: 1fr; }
  .pe-availability { border-left: 0; border-top: 1px solid var(--line); padding: 22px 0 0; }
  .pe-property-list { max-height: 290px; }
  #pe-property-selected { max-height: none; overflow: visible; }
  .pe-draft-banner { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 399px) {
  .pe-photo, .pe-upload { width: calc((100% - 12px) / 2); height: 166px; }
  .pe-request { padding-inline: 12px; font-size: 12px; }
  .pe-wholesale-row .form-field > label { font-size: 12px; }
  .pe-tree ul ul { margin-left: 8px; padding-left: 4px; }
}