/* v3_1_39 — Product form / карточка товара / фото.
   Page-specific visual layer only. Upload logic and templates are unchanged. */

.product-form-page-v39.product-edit-wide {
  max-width: none;
  width: min(1480px, calc(100vw - 80px));
}

.product-form-page-v39 .product-form-split {
  display: grid;
  grid-template-columns: minmax(520px, 1fr) minmax(360px, 520px);
  gap: 28px;
  align-items: start;
}

.product-form-page-v39 .product-form-left,
.product-form-page-v39 .product-form-right {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.product-form-page-v39 .product-form-right .photo-upload-section {
  background: var(--jit-surface-soft, var(--panel));
  border: 1px solid var(--jit-border, var(--line));
  border-radius: var(--jit-radius-lg, 12px);
  padding: 20px;
}

.product-form-page-v39 .product-form-right h3 {
  margin-top: 0;
}

.product-form-page-v39 .compact-price-grid {
  gap: 12px;
}

.product-form-page-v39 .product-form-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.product-form-page-v39 .photo-panel-sticky {
  position: sticky;
  top: 24px;
}

.product-form-page-v39 .product-form .photo-preview-main {
  width: min(100%, 340px);
  max-width: 340px;
  aspect-ratio: 3 / 4;
}

.product-form-page-v39 .product-form .main-photo-slot {
  max-width: 360px;
}

.product-form-page-v39 .product-form .photo-preview-square {
  aspect-ratio: 1 / 1;
}

.product-form-page-v39 .photo-row-actions {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.product-form-page-v39 .photo-row-actions .dropzone {
  flex: 1;
}

.product-form-page-v39 .extra-photos-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.product-form-page-v39 .extra-photos-grid .dropzone-title {
  font-size: 12px;
  line-height: 1.25;
}

.product-form-page-v39 .extra-photos-grid .compact-dropzone {
  min-height: 58px;
  padding: 10px;
}

.product-form-page-v39 .product-form .dropzone {
  min-height: 58px;
  padding: 8px 10px;
}

.product-form-page-v39 .product-form .compact-dropzone {
  min-height: 50px;
  padding: 7px 9px;
}

.product-form-page-v39 .product-form .dropzone-title {
  font-size: 12px;
  line-height: 1.22;
}

.product-form-page-v39 .product-form .dropzone-note {
  font-size: 11px;
}

.product-form-page-v39 .icon-only-delete {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  font-size: 11px;
  padding: 0;
  flex: 0 0 26px;
  border: 1px solid color-mix(in srgb, var(--jit-accent, var(--accent)) 45%, transparent);
  color: var(--jit-accent, var(--accent));
  background: color-mix(in srgb, var(--jit-accent, var(--accent)) 8%, transparent);
  cursor: pointer;
}

.product-form-page-v39 .icon-only-delete input {
  display: none;
}

.product-form-page-v39 .icon-only-delete:has(input:checked) {
  background: color-mix(in srgb, var(--jit-accent, var(--accent)) 18%, transparent);
  border-color: color-mix(in srgb, var(--jit-accent, var(--accent)) 72%, transparent);
}

@media (max-width: 1280px) {
  .product-form-page-v39.product-edit-wide {
    width: auto;
  }

  .product-form-page-v39 .product-form-split {
    grid-template-columns: 1fr;
  }

  .product-form-page-v39 .photo-panel-sticky {
    position: static;
  }

  .product-form-page-v39 .product-form .photo-preview-main,
  .product-form-page-v39 .product-form .main-photo-slot {
    max-width: 100%;
  }

  .product-form-page-v39 .extra-photos-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

@media (max-width: 720px) {
  .product-form-page-v39 .extra-photos-grid {
    grid-template-columns: 1fr;
  }
}

/* v3_1_40 — Product form containment and photo controls.
   Scope: product create/edit page only. No upload/save logic changes. */
.product-form-page-v40.product-edit-wide {
  width: 100%;
  max-width: min(1520px, 100%);
  box-sizing: border-box;
}

.product-form-page-v40 .product-form-split {
  grid-template-columns: minmax(0, 1fr) minmax(500px, 620px);
  gap: 24px;
}

.product-form-page-v40 .product-form-left,
.product-form-page-v40 .product-form-right,
.product-form-page-v40 .photo-upload-section,
.product-form-page-v40 .extra-photos-grid,
.product-form-page-v40 .photo-slot,
.product-form-page-v40 .dropzone {
  min-width: 0;
  box-sizing: border-box;
}

.product-form-page-v40 .extra-photos-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: stretch;
  width: 100%;
  max-width: 100%;
}

.product-form-page-v40 .additional-photo-slot {
  max-width: 100%;
  width: 100%;
  overflow: visible;
}

.product-form-page-v40 .additional-photo-slot .photo-preview-square,
.product-form-page-v40 .additional-photo-slot .extra-photo-row-actions {
  width: 100%;
  max-width: 100%;
}

.product-form-page-v40 .additional-photo-slot .extra-photo-row-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
}

.product-form-page-v40 .additional-photo-slot .extra-photo-row-actions:has(.photo-delete-check) {
  grid-template-columns: 34px minmax(0, 1fr);
}

.product-form-page-v40 .additional-photo-slot .photo-delete-check.icon-only-delete {
  width: 34px;
  min-width: 34px;
  max-width: 34px;
  height: 50px;
  min-height: 50px;
  max-height: 50px;
  align-self: start;
  justify-self: start;
}

.product-form-page-v40 .additional-photo-slot .extra-photo-dropzone {
  min-height: 50px;
  height: 50px;
  overflow: hidden;
}

@media (max-width: 1420px) {
  .product-form-page-v40 .product-form-split {
    grid-template-columns: minmax(0, 0.95fr) minmax(460px, 0.75fr);
  }
}

@media (max-width: 1180px) {
  .product-form-page-v40 .product-form-split {
    grid-template-columns: 1fr;
  }
}

/* v3_1_41 — product form photo delete controls.
   Fixes additional photo delete controls without touching upload/save logic. */
.product-form-page-v41 .additional-photo-slot .extra-photo-row-actions,
.product-form-page-v41 .technical-photo-slot .photo-row-actions,
.product-form-page-v41 .main-photo-slot .photo-row-actions {
  align-items: center;
}

.product-form-page-v41 .additional-photo-slot .extra-photo-row-actions:has(.photo-delete-check) {
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
}

.product-form-page-v41 .additional-photo-slot .photo-delete-check.icon-only-delete,
.product-form-page-v41 .photo-delete-check.icon-only-delete {
  width: 28px;
  min-width: 28px;
  max-width: 28px;
  height: 28px;
  min-height: 28px;
  max-height: 28px;
  padding: 0;
  margin: 0;
  display: inline-grid;
  place-items: center;
  align-self: center;
  justify-self: start;
  line-height: 1;
  font-size: 11px;
  border-radius: 999px;
}

.product-form-page-v41 .photo-delete-check.icon-only-delete span {
  display: block;
  line-height: 1;
  transform: none;
}

.product-form-page-v41 .photo-delete-check.icon-only-delete input[type="checkbox"] {
  display: none;
}

.product-form-page-v41 .additional-photo-slot .extra-photo-dropzone {
  height: 50px;
  min-height: 50px;
  max-height: 50px;
}

/* v3_1_42 — normalize product photo delete controls.
   The delete icon is a reusable square component; this block only places it in product photo rows. */
.product-form-page-v42 .additional-photo-slot .extra-photo-row-actions,
.product-form-page-v42 .main-photo-slot .photo-row-actions,
.product-form-page-v42 .technical-photo-slot .photo-row-actions {
  align-items: center;
  gap: 8px;
}

.product-form-page-v42 .additional-photo-slot .extra-photo-row-actions:has(.jit-photo-delete-control) {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
}

.product-form-page-v42 .jit-photo-delete-control,
.product-form-page-v42 .additional-photo-slot .photo-delete-check.icon-only-delete.jit-photo-delete-control,
.product-form-page-v42 .photo-delete-check.icon-only-delete.jit-photo-delete-control {
  width: 28px;
  min-width: 28px;
  max-width: 28px;
  height: 28px;
  min-height: 28px;
  max-height: 28px;
  inline-size: 28px;
  block-size: 28px;
  flex: 0 0 28px;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  justify-self: start;
  aspect-ratio: 1 / 1;
  line-height: 1;
  border-radius: 999px;
  overflow: hidden;
}

.product-form-page-v42 .jit-photo-delete-control span {
  display: block;
  line-height: 1;
  font-size: 12px;
  transform: none;
}

.product-form-page-v42 .jit-photo-delete-control input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.product-form-page-v42 .additional-photo-slot .extra-photo-dropzone {
  min-height: 50px;
  height: 50px;
  max-height: 50px;
}

/* v3_4_24 — photo delete icon visibility fix (revised in v3_4_25, v3_5_7).
   Problem 1: .jit-photo-delete-control has display:inline-flex (v42/v43).
   JS style.display='none' loses to in the stylesheet.
   Problem 2 (v3_4_24 regression): setting display:block on extra-photo-row-actions
   broke align-self:start from v43, causing the additional-photo-slot grid to stretch
   the row-actions row to full slot height — dropzone shifted to bottom of slot.
   Fix: keep display:grid (no layout model change), only override grid-template-columns
   to single 1fr column. The hidden delete icon leaves the flow; dropzone takes full width.
   Covers: (1) initial empty slots, (2) user deletes photo (JS adds is-empty),
   (3) broken image path (onerror adds is-empty).
   v3_5_7: added high-specificity (0,6,0) override for the v40 rule in theme_bridge.css
   (line 918) which has (0,5,0) and was silently beating the (0,4,0) fix below. */
.photo-slot:has(.photo-preview-frame.is-empty) .photo-delete-check {
  display: none;
  visibility: hidden;
  pointer-events: none;
}
.photo-slot:has(.photo-preview-frame.is-empty) .extra-photo-row-actions {
  grid-template-columns: minmax(0, 1fr);
}
.product-form-page-v40 .extra-photos-grid .additional-photo-slot:has(.photo-preview-frame.is-empty) .extra-photo-row-actions {
  grid-template-columns: minmax(0, 1fr);
}

/* v3_8_0 — Типографическая система: product form */

/* Кнопка «Удалить продукт» — outline вместо filled */
.btn-delete {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  border: 0.5px solid var(--line);
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 500;
  color: var(--danger);
  background: transparent;
  cursor: pointer;
}
.btn-delete:hover {
  background: color-mix(in srgb, var(--danger) 8%, var(--panel));
  border-color: color-mix(in srgb, var(--danger) 30%, var(--line));
}

/* v3.8.8 — ретро-чистка: удалены мёртвые .size-stock-* / .section-head /
   .product-edit-grid (нигде не используются; .row-2/.row-3 автономны ниже). */

/* v3_8_1 — Точечные правки страницы «Редактировать продукт» */

/* ПРОБЛЕМА 1: Автономные grid-строки (не требуют обёртки .product-edit-grid) */
/* v3.8.4: больше воздуха по вертикали между полями */
.row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  margin-bottom: 16px;
}
.row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px 14px;
  margin-bottom: 16px;
}
.fld {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Одиночные поля (напр. «Техническое название») — тоже с нижним отступом,
   иначе следующий ряд подъезжает вплотную. Только прямые потомки form-block,
   чтобы поля внутри row-2/row-3 не получали лишний отступ. */
.product-edit-panel .form-block > .fld {
  margin-bottom: 16px;
}

/* ПРОБЛЕМА 2: Компактные язык-табы (mlf-widget) на странице продукта */
.product-edit-panel .mlf-label-v39 {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted, #999);
}
.product-edit-panel .mlf-header-v39 {
  gap: 5px;
  margin-bottom: 4px;
}
.product-edit-panel .mlf-tab-v39 {
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 500;
  border-radius: 8px;
  border: 0.5px solid var(--line, #ddd);
  color: var(--muted, #888);
  background: transparent;
}
.product-edit-panel .mlf-tab-v39.active {
  background: #1a1a1a;
  color: #fff;
  border-color: #1a1a1a;
}
/* ПРАВКА 2 (v3.8.3): «Перевести» — тихая ссылка, не кнопка */
.translate-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  padding: 0;
  border: none;
  background: none;
  font-size: 10px;
  font-weight: 400;
  color: var(--muted);
  cursor: pointer;
}
.translate-btn:hover { color: var(--text); }
.translate-btn i { font-size: 11px; }
.translate-btn svg { width: 11px; height: 11px; }

/* ПРОБЛЕМА 3: Кнопка «Удалить» — override .button pill shape */
.product-edit-panel .btn-delete {
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 12px;
}

/* ПРАВКА 3 (v3.8.3): Заголовки секций — 11px / 500, без uppercase */
.product-edit-panel .form-block h3,
.product-edit-panel .photo-upload-section h3 {
  font-size: 14px;
  font-weight: 500;
  color: var(--text, #201417);
  letter-spacing: 0;
  text-transform: none;
  margin: 0 0 10px;
}

/* ПРАВКА 4 (v3.8.3): пустое тех-превью не показываем большой серой плашкой.
   Аплоад-зона ниже несёт плейсхолдер. JS снимает is-empty при выборе файла →
   превью с картинкой вернётся. theme_bridge форсит серый фон через,
   поэтому именно скрываем пустой фрейм, а не перекрашиваем. */
.product-edit-panel .technical-photo-slot .photo-preview-frame.is-empty {
  display: none;
}

/* ПРОБЛЕМА 5: Кнопка «+ Добавить цвет» */
.add-color-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 0.5px dashed var(--line, #ccc);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted, #666);
  background: transparent;
  cursor: pointer;
  margin-top: 8px;
}
.add-color-btn:hover {
  border-color: var(--text, #111);
  color: var(--text, #111);
}

/* ПРОБЛЕМА 6: Checkbox «Фото в PDF» */
.checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text, #201417);
  cursor: pointer;
}
/* legacy_overrides.css задаёт input{width:100%} — сбрасываем для чекбокса,
   иначе он растягивается и отталкивает текст вправо. */
.checkbox-row input[type="checkbox"] {
  width: auto;
  flex: 0 0 auto;
  margin: 0;
}
.checkbox-row span {
  font-size: 12px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text, #201417);
}
.checkbox-hint {
  font-size: 10px;
  font-weight: 400;
  color: var(--muted, #888);
  margin-top: 4px;
  line-height: 1.4;
}

/* ПРОБЛЕМА 7: Нижняя строка формы */
.form-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  margin-top: 4px;
  border-top: 0.5px solid var(--line, #e8e8e8);
}