/* admin_products — стили для админ-панели товаров.
   Современная светлая эстетика в духе Tailwind UI 2026 (без подключения
   самого Tailwind): нейтральные slate-тона, indigo-акцент для primary,
   мягкие тени и скругления, единые высоты элементов (решает «прыгающие»
   кнопки и инпуты). Все токены локальны — изолированы в scope
   .admin_products, .admin_products_modal и .ap_opt_overlay, чтобы не
   влиять на остальной сайт. */

.admin_products,
.admin_products_modal,
.ap_opt_overlay {
	--ap-bg: #f8fafc;
	--ap-surface: #ffffff;
	--ap-border: #e2e8f0;
	--ap-border-strong: #cbd5e1;
	--ap-text: #0f172a;
	--ap-muted: #64748b;
	--ap-primary: #4f46e5;
	--ap-primary-hover: #4338ca;
	--ap-primary-soft: #eef2ff;
	--ap-danger: #dc2626;
	--ap-danger-soft: #fee2e2;
	--ap-success: #16a34a;
	--ap-success-soft: #dcfce7;
	--ap-warn-soft: #fef3c7;
	--ap-radius: 10px;
	--ap-radius-sm: 8px;
	--ap-radius-lg: 14px;
	--ap-control-h: 40px;
	--ap-control-h-sm: 36px;
	--ap-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
	--ap-shadow-md: 0 4px 10px -2px rgba(15, 23, 42, 0.08),
		0 2px 4px -2px rgba(15, 23, 42, 0.05);
	--ap-shadow-lg: 0 20px 40px -10px rgba(15, 23, 42, 0.18),
		0 8px 16px -8px rgba(15, 23, 42, 0.1);
	--ap-ring: 0 0 0 3px rgba(79, 70, 229, 0.18);
	color: var(--ap-text);
}

/* ---------------- Toolbar и таблица в /lk ---------------- */
.admin_products_toolbar {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 16px;
}
.admin_products_toolbar .admin_products_search {
	flex: 1;
	min-width: 220px;
	height: var(--ap-control-h);
	padding: 0 14px 0 38px;
	border: 1px solid var(--ap-border);
	border-radius: var(--ap-radius-sm);
	background: var(--ap-surface)
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>")
		no-repeat 12px center;
	background-size: 16px 16px;
	font-size: 14px;
	color: var(--ap-text);
	transition: border-color 0.15s, box-shadow 0.15s;
}
.admin_products_toolbar .admin_products_search:focus {
	outline: none;
	border-color: var(--ap-primary);
	box-shadow: var(--ap-ring);
}

.admin_products_table_wrap {
	overflow-x: auto;
	padding: 0;
	background: var(--ap-surface);
	border: 1px solid var(--ap-border);
	border-radius: var(--ap-radius);
	box-shadow: var(--ap-shadow-sm);
}
.admin_products_table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.admin_products_table th,
.admin_products_table td {
	padding: 12px 14px;
	text-align: left;
	border-bottom: 1px solid var(--ap-border);
	vertical-align: middle;
}
.admin_products_table thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	font-weight: 600;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ap-muted);
	background: rgba(15, 23, 42, 0.03);
	backdrop-filter: saturate(180%) blur(4px);
}
.admin_products_table tbody tr {
	transition: background 0.12s;
}
.admin_products_table tbody tr:hover {
	background: var(--ap-bg);
}
.admin_products_table tbody tr:last-child td {
	border-bottom: none;
}
.ap_actions {
	white-space: nowrap;
	text-align: right;
}
.ap_seria {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
	color: var(--ap-muted);
}
.ap_name {
	font-weight: 500;
	color: var(--ap-text);
}
.ap_cat {
	color: var(--ap-muted);
	font-size: 13px;
}
.ap_price {
	font-variant-numeric: tabular-nums;
	font-weight: 500;
}
.ap_qty {
	white-space: nowrap;
}
/* Колонка "Создан": компактная дата dd.mm.yy, tabular-nums чтобы цифры
   стояли ровно в столбик. */
.ap_created {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	font-size: 12px;
	color: var(--ap-muted);
	width: 1%;
}
.ap_actions .ap_icon_btn + .ap_icon_btn {
	margin-left: 4px;
}

/* Бейдж количества товара в таблице. */
.ap_badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 56px;
	height: 24px;
	padding: 0 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.01em;
	font-variant-numeric: tabular-nums;
}
.ap_badge_success {
	background: var(--ap-success-soft);
	color: #166534;
}
.ap_badge_muted {
	background: rgba(15, 23, 42, 0.05);
	color: var(--ap-muted);
}

/* Иконочные action-кнопки в таблице (вид/правка/удаление/восстановление).
   Применяется и к <button>, и к <a>, поэтому сбрасываем дефолты обоих. */
.ap_icon_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ap-control-h-sm);
	height: var(--ap-control-h-sm);
	padding: 0;
	border: 1px solid var(--ap-border);
	border-radius: var(--ap-radius-sm);
	background: var(--ap-surface);
	color: var(--ap-muted);
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s, border-color 0.15s, color 0.15s,
		box-shadow 0.15s;
	vertical-align: middle;
}
.ap_icon_btn:hover {
	background: var(--ap-primary-soft);
	border-color: var(--ap-primary);
	color: var(--ap-primary);
}
.ap_icon_btn:focus-visible {
	outline: none;
	box-shadow: var(--ap-ring);
}
.ap_icon_btn svg {
	display: block;
	width: 16px;
	height: 16px;
}
.ap_icon_btn.ap_danger:hover {
	background: var(--ap-danger-soft);
	border-color: var(--ap-danger);
	color: var(--ap-danger);
}

/* ---------------- Форма ---------------- */
.admin_products_modal,
.admin_products_modal.stage { /* .stage из colors/style.css тоже красит #fff — повышаем specificity */
	/* Ширина формы согласована с основным контейнером сайта
	   (.container max-width: 1440px в public.css).
	   - width: 100% (inline из arcticmodal) растягивает модалку на ширину
	     overlay-контейнера;
	   - max-width: min(1440px, calc(100vw - 32px)) одновременно ограничивает
	     сверху шириной сайта И гарантирует отступ 16px слева/справа на
	     экранах шире, на узких — сжимается корректно. */
	width: 100%;
	max-width: min(1440px, calc(100vw - 32px));
	max-height: 90vh;
	overflow-y: auto;
	box-sizing: border-box;
	padding: 0;
	/* Модалка не чисто-белая, а slate-50. Это создаёт мягкий контраст
	   фона с белыми карточками-секциями внутри — деликатное цветовое
	   зонирование без крикливых цветных блоков. */
	background: var(--ap-bg);
	border-radius: var(--ap-radius-lg);
	box-shadow: var(--ap-shadow-lg);
}
.admin_products_form_wrap {
	padding: 24px 28px 0;
}
.admin_products_form_wrap h3 {
	margin: 0 0 20px;
	font-size: 20px;
	font-weight: 600;
	color: var(--ap-text);
	letter-spacing: -0.01em;
}

/* ---------------- Секции формы (ap_group) ----------------
   Деликатное цветовое зонирование: на slate-50 фоне модалки каждая
   логическая группа полей — это белая карточка с тонкой рамкой,
   едва заметной тенью и негромким заголовком. Цветовой акцент
   передаётся через маленькую круглую точку в заголовке (ap_group_dot)
   и цвет иконки + лёгкая заливка в header — так мы получаем современную
   «раскладку как в Linear/Vercel», не перегружая глаз. */
.admin_products_form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.ap_group {
	background: var(--ap-surface);
	border: 1px solid var(--ap-border);
	border-radius: var(--ap-radius-lg);
	box-shadow: var(--ap-shadow-sm);
	/* ВАЖНО: НЕ ставить overflow: hidden/clip — внутри секции живут
	   combobox-поиск (ap_prop_name) и select-выпадашки, которые
	   абсолютно спозиционированы и должны выходить за границы карточки.
	   Скругление шапки решено border-radius на самом ap_group_header. */
	--ap-accent: #64748b;
	--ap-accent-soft: #f1f5f9;
}
.ap_group_header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 18px;
	border-bottom: 1px solid var(--ap-border);
	/* Скругляем top-радиус шапки, чтобы градиент не вылезал за рамку
	   секции (bottom — плоский, т.к. ниже идёт тело карточки). */
	border-radius: var(--ap-radius-lg) var(--ap-radius-lg) 0 0;
	background: linear-gradient(180deg, var(--ap-accent-soft), rgba(255, 255, 255, 0));
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ap-muted);
}
.ap_group_dot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--ap-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ap-accent) 20%, transparent);
	flex: 0 0 auto;
}
.ap_group_icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ap-accent);
	flex: 0 0 auto;
}
.ap_group_title {
	color: var(--ap-accent);
	letter-spacing: 0.06em;
}
.ap_group_body {
	padding: 18px;
}
.ap_group_body > .ap_field:last-child,
.ap_group_body > .ap_field_row:last-child {
	margin-bottom: 0;
}
/* Секция фото: body сжимаем по вертикали — внутренние компоненты
   (photo_order_admin_wrap, ap_drop_area) уже имеют свои отступы. */
.ap_group[data-group="photos"] .ap_group_body {
	padding: 14px 18px 18px;
}
.ap_group[data-group="photos"] .ap_field_photos {
	margin-bottom: 0;
}
.ap_group[data-group="photos"] .ap_field_photos > .ap_label {
	display: none; /* Заголовок теперь в шапке секции. */
}

/* Цветовые акценты секций. Используем HSL-нейтрализованные оттенки
   из Tailwind 2026 палитры — приглушённые и пастельные, чтобы
   разделение пространства оставалось «деликатным», а не цветастым. */
.ap_group_indigo  { --ap-accent: #6366f1; --ap-accent-soft: #eef2ff; }
.ap_group_amber   { --ap-accent: #d97706; --ap-accent-soft: #fffbeb; }
.ap_group_sky     { --ap-accent: #0284c7; --ap-accent-soft: #f0f9ff; }
.ap_group_emerald { --ap-accent: #059669; --ap-accent-soft: #ecfdf5; }
.ap_group_violet  { --ap-accent: #7c3aed; --ap-accent-soft: #f5f3ff; }
.ap_group_rose    { --ap-accent: #e11d48; --ap-accent-soft: #fff1f2; }
.ap_group_neutral { --ap-accent: #64748b; --ap-accent-soft: #f1f5f9; }
.ap_field {
	margin-bottom: 16px;
}
.ap_field_row {
	display: flex;
	gap: 12px;
	margin-bottom: 16px;
	align-items: flex-end;
}
.ap_field_row > .ap_field {
	flex: 1;
	min-width: 0;
	margin-bottom: 0;
}
.ap_label {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 500;
	color: var(--ap-muted);
	letter-spacing: 0.01em;
}
.ap_req {
	color: var(--ap-danger);
	margin-left: 2px;
}
/* Унифицированные инпуты формы. Высота 40px у всех текстовых/числовых
   полей и селектов ставит их на одну линию с combobox'ами и кнопками,
   убирая визуальный разнобой. */
.ap_input,
.ap_field input[type="text"],
.ap_field input[type="number"],
.ap_field input[type="search"],
.ap_field input[type="email"],
.ap_field select,
.ap_field textarea {
	width: 100%;
	box-sizing: border-box;
	height: var(--ap-control-h);
	padding: 8px 12px;
	font-size: 14px;
	color: var(--ap-text);
	background: var(--ap-surface);
	border: 1px solid var(--ap-border);
	border-radius: var(--ap-radius-sm);
	transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
	font-family: inherit;
}
.ap_field input::placeholder,
.ap_field textarea::placeholder {
	color: #94a3b8;
}
.ap_field input:hover,
.ap_field select:hover,
.ap_field textarea:hover {
	border-color: var(--ap-border-strong);
}
.ap_field input:focus,
.ap_field select:focus,
.ap_field textarea:focus {
	outline: none;
	border-color: var(--ap-primary);
	box-shadow: var(--ap-ring);
}
.ap_field textarea {
	height: auto;
	min-height: 96px;
	padding: 10px 12px;
	resize: vertical;
	line-height: 1.5;
}

/* Подсказки под полем (напр. auto-генерация seria). */
.ap_seria_hint,
.font_low.ap_seria_hint {
	font-size: 12px;
	color: var(--ap-muted);
	margin-top: 6px;
}

/* ── Seria в create-режиме: preview в блоке «Категории» ───────────── */
.ap_seria_preview_wrap {
	margin-top: 4px;
}
.ap_seria_preview_row {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: var(--ap-control-h);
}

/* Нередактируемая плашка с артикулом */
.ap_seria_preview_display {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	height: var(--ap-control-h);
	padding: 0 14px;
	border: 1px solid var(--ap-border);
	border-radius: var(--ap-radius-sm);
	background: var(--ap-bg);
	font-size: 14px;
	font-family: ui-monospace, 'Cascadia Code', 'Fira Mono', monospace;
	letter-spacing: 0.02em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ap_seria_preview_value {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ap_seria_preview_value.ap_seria_preview_placeholder {
	color: var(--ap-muted);
	font-family: inherit;
	font-size: 13px;
	letter-spacing: 0;
	font-style: italic;
}
.ap_seria_preview_display.is-filled {
	border-color: var(--ap-border-strong);
	background: var(--ap-surface);
	color: var(--ap-text);
}

/* Кнопка «карандаш» появляется, когда артикул сформирован */
.ap_seria_edit_btn {
	flex: 0 0 auto;
}

/* Поле ввода (только когда пользователь нажал «карандаш») */
.ap_seria_preview_input {
	flex: 1;
}
.ap_seria_preview_input:focus {
	outline: none;
	border-color: var(--ap-primary);
	box-shadow: var(--ap-ring);
}

/* Combobox: подстраиваем триггер под общий размер инпутов, чтобы на
   одной строке (ap_field_row) ничего не «плавало» по вертикали. */
.admin_products_form .cmb_trigger,
.admin_products_modal .cmb_trigger,
.ap_combobox > .cmb_trigger {
	min-height: var(--ap-control-h);
	padding: 8px 12px;
	border-radius: var(--ap-radius-sm);
	border-color: var(--ap-border);
	font-size: 14px;
}
.admin_products_form .cmb.is-open > .cmb_trigger,
.admin_products_form .cmb_trigger:focus,
.admin_products_form .cmb_trigger:focus-visible,
.admin_products_modal .cmb.is-open > .cmb_trigger,
.admin_products_modal .cmb_trigger:focus,
.admin_products_modal .cmb_trigger:focus-visible {
	border-color: var(--ap-primary);
	box-shadow: var(--ap-ring);
}

/* Свойства */
.ap_props_list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.ap_prop_row {
	display: grid;
	grid-template-columns: 1fr 1fr var(--ap-control-h);
	gap: 8px;
	align-items: stretch;
}
.ap_prop_key_wrap,
.ap_prop_val_wrap {
	min-width: 0;
}
.ap_prop_key_wrap .cmb,
.ap_prop_val_wrap .cmb {
	width: 100%;
	height: 100%;
}
/* Внутри ap_prop_row combobox'ы чуть компактнее, чем в основном ряду,
   но всё равно выровнены по 40px высоте вместе с кнопкой удаления. */
.ap_prop_combobox > .cmb_trigger {
	min-height: var(--ap-control-h);
	padding: 8px 12px;
	font-size: 13px;
	border-radius: var(--ap-radius-sm);
	border-color: var(--ap-border);
}
.ap_prop_remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ap-control-h);
	height: var(--ap-control-h);
	padding: 0;
	border: 1px solid var(--ap-border);
	background: var(--ap-surface);
	border-radius: var(--ap-radius-sm);
	color: var(--ap-muted);
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ap_prop_remove:hover {
	background: var(--ap-danger-soft);
	border-color: var(--ap-danger);
	color: var(--ap-danger);
}
.ap_prop_add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: var(--ap-control-h);
	padding: 0 14px;
	margin-top: 8px;
	cursor: pointer;
	background: var(--ap-surface);
	border: 1px dashed var(--ap-border-strong);
	border-radius: var(--ap-radius-sm);
	color: var(--ap-muted);
	font-size: 13px;
	font-weight: 500;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ap_prop_add:hover {
	background: var(--ap-primary-soft);
	border-color: var(--ap-primary);
	border-style: solid;
	color: var(--ap-primary);
}

/* Photos: сетка/превью/DnD/rotate/delete живут в product_gallery.
   Здесь — только зона загрузки drop-area. */
.ap_drop_area {
	display: block;
	width: 100%;
	box-sizing: border-box;
	border: 2px dashed var(--ap-border-strong);
	padding: 24px;
	text-align: center;
	cursor: pointer;
	background: var(--ap-bg);
	border-radius: var(--ap-radius);
	color: var(--ap-muted);
	font-size: 13px;
	line-height: 1.5;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.ap_drop_area.is_dragover {
	border-color: var(--ap-primary);
	background: var(--ap-primary-soft);
	color: var(--ap-primary);
}
.ap_drop_area:focus,
.ap_drop_area:focus-visible {
	outline: none;
	border-color: var(--ap-primary);
	background: var(--ap-primary-soft);
	color: var(--ap-primary);
	box-shadow: var(--ap-ring);
}
.ap_drop_area kbd {
	display: inline-block;
	padding: 1px 6px;
	border: 1px solid var(--ap-border-strong);
	border-bottom-width: 2px;
	border-radius: 4px;
	background: var(--ap-surface);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	line-height: 1.4;
	color: var(--ap-text);
}
.ap_drop_hint_target {
	display: block;
	margin-top: 6px;
	color: var(--ap-muted);
	font-size: 12px;
}
.ap_drop_area.ap_needs_seria {
	background: rgba(15, 23, 42, 0.03);
	color: #94a3b8;
	cursor: not-allowed;
	border-style: dotted;
}
.ap_drop_area.ap_needs_seria.is_dragover {
	border-color: var(--ap-danger);
	background: var(--ap-danger-soft);
	color: var(--ap-danger);
}
.ap_hint {
	color: var(--ap-muted);
	background: var(--ap-bg);
}

/* ---------------- Прогресс загрузки ---------------- */
.ap_uploads_progress {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.ap_upload_item {
	padding: 10px 12px;
	background: var(--ap-surface);
	border: 1px solid var(--ap-border);
	border-radius: var(--ap-radius-sm);
	box-shadow: var(--ap-shadow-sm);
}
.ap_upload_item.is_done {
	background: var(--ap-success-soft);
	border-color: #86efac;
}
.ap_upload_item.is_error {
	background: var(--ap-danger-soft);
	border-color: #fca5a5;
}
.ap_upload_top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	margin-bottom: 6px;
}
.ap_upload_name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--ap-text);
}
.ap_upload_pct {
	flex-shrink: 0;
	font-variant-numeric: tabular-nums;
	color: var(--ap-muted);
	font-size: 12px;
}
.ap_upload_close {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1px solid transparent;
	background: transparent;
	color: var(--ap-muted);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}
.ap_upload_close:hover {
	background: rgba(15, 23, 42, 0.06);
	color: var(--ap-text);
	border-color: var(--ap-border);
}
.ap_upload_item.is_error .ap_upload_close {
	color: var(--ap-danger);
}
.ap_upload_item.is_error .ap_upload_close:hover {
	background: rgba(220, 38, 38, 0.1);
	border-color: rgba(220, 38, 38, 0.3);
}
.ap_upload_track {
	height: 6px;
	border-radius: 999px;
	background: rgba(15, 23, 42, 0.08);
	overflow: hidden;
}
.ap_upload_bar {
	height: 100%;
	width: 0%;
	background: var(--ap-primary);
	transition: width 0.15s ease, background 0.2s ease;
}
.ap_upload_item.is_done .ap_upload_bar {
	background: var(--ap-success);
}
.ap_upload_item.is_error .ap_upload_bar {
	background: var(--ap-danger);
}
.ap_upload_status {
	margin-top: 6px;
	color: var(--ap-muted);
	font-size: 12px;
	white-space: pre-wrap;
	word-break: break-word;
}
.ap_upload_item.is_error .ap_upload_status {
	color: #991b1b;
}

.ap_uploads_header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	padding: 6px 4px;
	font-size: 12px;
	flex-wrap: wrap;
	color: var(--ap-muted);
}
.ap_uploads_count {
	color: var(--ap-muted);
}
.ap_uploads_actions {
	display: inline-flex;
	gap: 6px;
}
.ap_uploads_actions button {
	height: 28px;
	padding: 0 10px;
	background: var(--ap-surface);
	border: 1px solid var(--ap-border);
	border-radius: var(--ap-radius-sm);
	color: var(--ap-muted);
	cursor: pointer;
	font-size: 12px;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ap_uploads_actions button:hover {
	background: var(--ap-primary-soft);
	border-color: var(--ap-primary);
	color: var(--ap-primary);
}
.ap_uploads_actions button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ---------------- Actions / footer ---------------- */
/* Sticky footer: при длинной форме кнопки «Сохранить/Отмена» всегда
   в поле зрения. Полупрозрачный blur-фон не даёт форме «наезжать». */
.admin_products_form_actions {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: flex-end;
	position: sticky;
	bottom: 0;
	margin: 20px -28px 0;
	padding: 16px 28px;
	/* Полупрозрачная заливка ap-bg — футер визуально сливается с фоном
	   модалки и даёт ощущение «плавающей панели» вместо жёсткой полосы. */
	background: rgba(248, 250, 252, 0.88);
	backdrop-filter: saturate(180%) blur(10px);
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	border-top: 1px solid var(--ap-border);
	border-bottom-left-radius: var(--ap-radius-lg);
	border-bottom-right-radius: var(--ap-radius-lg);
	z-index: 2;
}
.admin_products_form_msg {
	margin-right: auto;
	font-size: 13px;
}
.admin_products_form_msg[data-kind="ok"] { color: var(--ap-success); }
.admin_products_form_msg[data-kind="error"] { color: var(--ap-danger); }
.admin_products_form_msg[data-kind="progress"] { color: var(--ap-muted); }

/* Primary и secondary кнопки админки. Важны одинаковая высота,
   inline-flex и гаp — это и есть то, что «выравнивает» их с инпутами
   и друг с другом в любых комбинациях (toolbar, footer, модалки). */
.admin_products .main_btn.prime,
.admin_products_form .main_btn.prime,
.admin_products_modal .main_btn.prime {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: var(--ap-control-h);
	padding: 0 18px;
	background: var(--ap-primary);
	color: #fff;
	border: 1px solid var(--ap-primary);
	border-radius: var(--ap-radius-sm);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	box-shadow: var(--ap-shadow-sm);
	transition: background 0.15s, border-color 0.15s, box-shadow 0.15s,
		transform 0.05s;
}
.admin_products .main_btn.prime:hover,
.admin_products_form .main_btn.prime:hover,
.admin_products_modal .main_btn.prime:hover {
	background: var(--ap-primary-hover);
	border-color: var(--ap-primary-hover);
}
.admin_products .main_btn.prime:active,
.admin_products_form .main_btn.prime:active,
.admin_products_modal .main_btn.prime:active {
	transform: translateY(1px);
}
.admin_products .main_btn.prime:focus-visible,
.admin_products_form .main_btn.prime:focus-visible,
.admin_products_modal .main_btn.prime:focus-visible {
	outline: none;
	box-shadow: var(--ap-ring), var(--ap-shadow-sm);
}

.admin_products_cancel_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: var(--ap-control-h);
	padding: 0 16px;
	background: var(--ap-surface);
	color: var(--ap-text);
	border: 1px solid var(--ap-border);
	border-radius: var(--ap-radius-sm);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}
.admin_products_cancel_btn:hover {
	background: var(--ap-bg);
	border-color: var(--ap-border-strong);
}

/* ---------------- Optimize buttons ---------------- */
/* «Оптимизировать всё» в тулбаре и «Оптимизировать фото товара» в форме.
   Один визуальный пресет — secondary-кнопка с иконкой-молнией. */
.admin_products_optimize_all_btn,
.admin_products_optimize_product_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: var(--ap-control-h);
	padding: 0 14px;
	background: var(--ap-surface);
	cursor: pointer;
	border: 1px solid var(--ap-border);
	border-radius: var(--ap-radius-sm);
	color: var(--ap-muted);
	font-size: 13px;
	font-weight: 500;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.admin_products_optimize_all_btn:hover,
.admin_products_optimize_product_btn:hover {
	background: var(--ap-warn-soft);
	border-color: #f59e0b;
	color: #92400e;
}
.admin_products_optimize_all_btn:disabled,
.admin_products_optimize_product_btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
.admin_products_optimize_all_btn svg,
.admin_products_optimize_product_btn svg {
	width: 14px;
	height: 14px;
}

/* ---------------- Optimize progress modal ---------------- */
/* Собственный overlay (НЕ arcticmodal), открывается поверх формы товара
   и имеет отдельную кнопку «Закрыть», не закрывающую форму. */
.ap_opt_overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.45);
	backdrop-filter: blur(4px);
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.ap_opt_modal {
	background: var(--ap-surface);
	width: 100%;
	max-width: 640px;
	max-height: 90vh;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
	border-radius: var(--ap-radius-lg);
	box-shadow: var(--ap-shadow-lg);
}
.ap_opt_title {
	font-size: 18px;
	font-weight: 600;
	margin: 0;
	color: var(--ap-text);
	letter-spacing: -0.01em;
}
.ap_opt_status {
	color: var(--ap-muted);
	min-height: 1.4em;
	font-size: 13px;
}
.ap_opt_progress_track {
	height: 8px;
	background: rgba(15, 23, 42, 0.08);
	border-radius: 999px;
	overflow: hidden;
}
.ap_opt_progress_bar {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, var(--ap-primary), var(--ap-primary-hover));
	transition: width 0.25s ease;
}
.ap_opt_stats {
	color: var(--ap-muted);
	font-size: 13px;
	min-height: 1.4em;
}
.ap_opt_log {
	background: #f1f5f9;
	max-height: 240px;
	overflow-y: auto;
	padding: 10px 12px;
	border-radius: var(--ap-radius-sm);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	line-height: 1.5;
	color: var(--ap-text);
}
.ap_opt_log_line { color: var(--ap-success); }
.ap_opt_log_line.ap_opt_skip { color: var(--ap-muted); }
.ap_opt_log_line.ap_opt_err  { color: var(--ap-danger); }
.ap_opt_actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}
.ap_opt_close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--ap-control-h);
	padding: 0 18px;
	background: var(--ap-surface);
	color: var(--ap-text);
	border: 1px solid var(--ap-border);
	border-radius: var(--ap-radius-sm);
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	transition: background 0.15s, border-color 0.15s;
}
.ap_opt_close:hover {
	background: var(--ap-bg);
	border-color: var(--ap-border-strong);
}
.ap_opt_close:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* PDP edit button — кнопка на странице товара (не в модалке).
   Оставляем не в .admin_products-скоупе, т.к. рендерится вне его. */
.admin_products_pdp_edit {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	height: 40px;
	padding: 0 16px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	cursor: pointer;
	font-size: 14px;
	color: #0f172a;
	transition: background 0.15s, border-color 0.15s;
}
.admin_products_pdp_edit:hover {
	background: #eef2ff;
	border-color: #4f46e5;
	color: #4f46e5;
}