#modal.product-create-dialog {
  --product-create-line: #34373c;
  width: min(800px, calc(100vw - 48px));
  max-height: calc(100dvh - 40px);
  padding: 0;
  border-radius: 7px;
  overflow: hidden;
  color: var(--text);
  font: 13px "IBM Plex Sans", "Segoe UI", sans-serif;
}
:root[data-theme="light"] #modal.product-create-dialog { --product-create-line: #dcddd8; }
#modal.product-create-dialog[open] { display: flex; flex-direction: column; }
#modal.product-create-dialog > .modal-head {
  flex: none;
  padding: 21px 25px;
  border-bottom: 1px solid var(--product-create-line);
}
#modal.product-create-dialog > .modal-head h2 {
  margin: 0;
  font: 500 28px/1.15 "Barlow Condensed", "Arial Narrow", sans-serif;
}
#modal.product-create-dialog > .modal-body { display: flex; min-height: 0; padding: 0; overflow: hidden; }
#modal .product-create-form { display: flex; flex-direction: column; width: 100%; min-height: 0; margin: 0; }
#modal .product-create-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 265px;
  grid-template-rows: min-content 1fr;
  min-height: 0;
  overflow: auto;
  scrollbar-gutter: stable;
}
#modal .product-create-identification { grid-column: 1; padding: 24px 25px 0; }
#modal .product-create-values {
  grid-column: 2;
  grid-row: 1 / 3;
  padding: 24px;
  border-left: 1px solid var(--product-create-line);
  background: var(--surface-raised);
}
#modal .product-create-form .field { min-width: 0; margin: 0 0 20px; }
#modal .product-create-form label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 11px; font-weight: 400; }
#modal .product-create-form :is(input,select) {
  width: 100%; min-width: 0; min-height: 41px;
  border: 1px solid var(--product-create-line); border-radius: 4px;
  padding: 9px 10px; background: var(--surface-input); color: var(--text);
  font: inherit;
}
#modal .product-create-form :is(input,select):focus { outline: 1px solid var(--accent-bright); outline-offset: 0; border-color: var(--accent-bright); box-shadow: none; }
#modal .product-create-unit-fields { padding-top: 18px; border-top: 1px solid var(--product-create-line); }
#modal .product-create-total { margin: 10px 0 0; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
#modal .product-create-name input { font-size: 17px; min-height: 48px; }
#modal .product-create-values input { font-variant-numeric: tabular-nums; }
#modal .product-create-price input { min-height: 56px; font-size: 30px; font-weight: 500; letter-spacing: -.6px; }
#modal .product-create-price { padding-bottom: 21px; border-bottom: 1px solid var(--product-create-line); }
#modal .product-create-values .field:last-child { margin-bottom: 0; }
#modal .product-create-codes { grid-column: 1; margin: 0 25px 25px; border-top: 1px solid var(--product-create-line); align-self: start; }
#modal .product-create-codes summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 0; list-style: none; cursor: pointer; font-size: 12px; }
#modal .product-create-codes summary::after { content: "+"; color: var(--muted); font-size: 18px; }
#modal .product-create-codes[open] summary::after { content: "−"; }
#modal .product-create-codes summary::-webkit-details-marker { display: none; }
#modal .product-create-code-fields { display: grid; grid-template-columns: 1fr; gap: 0; }
#modal .product-create-code-fields .field:last-child { margin-bottom: 0; }
#modal .product-create-form :is(button,summary):focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }
#modal .product-create-footer { display: flex; flex: none; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding: 17px 25px; border-top: 1px solid var(--product-create-line); background: var(--surface); }
#modal .product-create-actions { display: flex; gap: 9px; margin-left: auto; }
#modal .product-create-actions button { min-height: 38px; padding: 9px 16px; font-size: 12px; }
#modal [data-product-create-status] { flex: 1 1 200px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
#modal [data-product-create-status]:empty { display: none; }
#modal [data-product-create-status][data-error="true"],#modal .product-create-error { color: var(--red); }
#modal .product-create-error { display: block; margin-top: 7px; font-size: 11px; line-height: 1.5; }
#modal .product-create-form [aria-invalid="true"] { border-color: var(--red); }
#modal .product-create-form [hidden] { display: none; }
@media(max-width:650px) {
  #modal.product-create-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  #modal .product-create-body { display: flex; flex-direction: column; }
  #modal .product-create-identification { padding: 20px 20px 0; }
  #modal .product-create-values { border-left: 0; border-block: 1px solid var(--product-create-line); padding: 20px; }
  #modal .product-create-price { padding-bottom: 0; border-bottom: 0; }
  #modal .product-create-codes { margin: 0 20px 20px; border-top: 0; }
  #modal.product-create-dialog > .modal-head,#modal .product-create-footer { padding: 17px 20px; }
}